feat(Card): Add selected props & Update example & Update menu to webi…

…ste (#175) * chore(deps): add renovate.json (#6) Co-authored-by: Renovate Bot <bot@renovateapp.com> * chore(deps): pin dependencies (#7) Co-authored-by: Renovate Bot <bot@renovateapp.com> * chore(deps): update react-navigation monorepo * fix(deps): update dependency @types/color to v3.0.1 * chore(deps): update dependency react-navigation-stack to v2 * released v1.6.1 * feat(CheckBox): Enhance checkedIcon/unCheckedIcon props. * chore: Update @uiw/icons to v2.4.3 * released v1.6.2 * doc(CheckBox): Update README.md * feat: Modify unCheckedIcon default value. * released v1.6.3 * chore(deps): Update react-native to v0.62.2 * chore(deps): pin dependencies * chore(deps): update dependency tsbb to v1.7.3 * chore: Modify example. * chore: Fix homepage layout issue. * chore: Format the code. * released v1.7.0 * released v1.7.1 * chore: Remove redundant codes. * released v1.7.2 * feat: Add MaskLayer component. * feat: Add usePrevious. * fix: Fix Animated errors. * fix: Fix Modal style. * released v1.7.3 * released v1.7.4 * Update dependency tsbb to v1.7.4 * Update dependency react-native-safe-area-context to v2 * Update dependency @types/react-native to v0.62.11 * Update react-navigation monorepo * Update dependency react-native-safe-area-context to v2.0.1 * Update react-navigation monorepo * Update dependency react-native-safe-area-context to v3 * chore(deps): bump lodash from 4.17.15 to 4.17.19 Bumps [lodash](https://github.com/lodash/lodash) from 4.17.15 to 4.17.19. - [Release notes](https://github.com/lodash/lodash/releases) - [Commits](lodash/lodash@4.17.15...4.17.19) Signed-off-by: dependabot[bot] <support@github.com> * Update dependency tsbb to v1.7.6 * Upgrade react-native to v0.63.2 (#61) Co-authored-by: songjie@nihaosi.com <songjie@nihaosi.com> * 恢复babel.config的eslink,删除不需要上传的flowconfig (#65) * react-native升级0.63.2 * 恢复babel的eslink * flx删除不需要上传的flowconfig Co-authored-by: songjie@nihaosi.com <songjie@nihaosi.com> * chore(deps): bump logkitty from 0.6.1 to 0.7.1 Bumps [logkitty](https://github.com/zamotany/logkitty) from 0.6.1 to 0.7.1. - [Release notes](https://github.com/zamotany/logkitty/releases) - [Commits](zamotany/logkitty@v0.6.1...v0.7.1) Signed-off-by: dependabot[bot] <support@github.com> * doc: Update README.md * fix:解决MenuDropdown组件下拉报错 * 升级TypeScript，注释babel.config.js两行代码 (#68) * react-native升级0.63.2 * 恢复babel的eslink * flx删除不需要上传的flowconfig * flx升级TypeScript，注释babel.config.js两行代码 Co-authored-by: songjie@nihaosi.com <songjie@nihaosi.com> * Create LICENSE * fix(SelectCascader): update native Pick * chore: Update ios/UIW.xcodeproj/project.pbxproj &yarn.lock * chore: Update dependencies * released v1.7.5 * fix: update react-native-svg * fix: update react-native-svg * doc: Update README.md * chore: Update dependencies. * released v1.7.5 * released v1.7.6 * chore(deps): pin dependencies * chore: remove package-lock.json * chore(deps): update dependency typescript to v4 * chore: Update yarn.lock * doc: Update README.md * chore(deps): update dependency tsbb to v1.7.8 * fix(Icon): Add fill default value. * chore(deps): update dependency react-native to v0.64 * chore: update yarn.lock * released v1.7.6 * type: Fix type errors. * released v1.7.6 * released v1.8.0 * fix:SearchBar组件 * released v1.9.0 * type(SearchBar): Fix type errors. #93 * released v1.9.1 * fix:SearchBar组件 * fix:Table表格 * #95 * released v1.10.0 * chore(doc): Update README.md * fix(deps): update dependency @react-native-picker/picker to v1.16.0 * chore(deps): update react-navigation monorepo * Wx (#103) * fix:解决MenuDropdown组件下拉报错 * fix:SearchBar组件 * fix:Table表格 * fix:展开组件封装,修复xcode14.5无法运行问题 * fix:update package.json * released v1.11.0 * chore: publish npm using workflows. * chore: update workflows config. * type: fix tsconfig.json errors. * chore(deps): update dependency fs-extra to v10 * chore(deps): update dependency prettier to v2.3.1 * chore(deps): update dependency tsbb to v2.2.1 * fix(deps): update dependency @uiw/icons to v2.5.1 * chore(deps): update dependencies. * released v1.12.0 * fix:team团队页面调用github用户信息接口 * fix:解决svg报错 * fix:Tab example报错和封装quickList 组件 * fix:QuickList routes Demo * fix:删除Table demo 多余代码 * fix:Card 组件 * fix:QuickLidt文档 * fix:Card组件增加点击选中功能 Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: jaywcjlove <398188662@qq.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: cc <33281802+matuanc@users.noreply.github.com> Co-authored-by: songjie@nihaosi.com <songjie@nihaosi.com> Co-authored-by: 小弟调调™ <kennyiseeyou@gmail.com> Co-authored-by: xingyuefeng <15262870437@163.com>
uiwjs · Aug 14, 2021 · a3282b8 · a3282b8
1 parent 67430ea
commit a3282b8
Show file tree

Hide file tree

Showing 8 changed files with 125 additions and 25 deletions.
diff --git a/example/examples/src/routes.tsx b/example/examples/src/routes.tsx
@@ -314,14 +314,14 @@ export const stackPageData: Routes[] = [
       description: 'QuickList 快速请求上拉下拉数据列表',
     },
   },
-  // {
-  //   name: 'Card',
-  //   component: require('./routes/Card').default,
-  //   params: {
-  //     title: 'Card 卡片',
-  //     description: 'QuickList 最基础的卡片容器，可承载文字、列表、图片、段落。',
-  //   },
-  // },
+  {
+    name: 'Card',
+    component: require('./routes/Card').default,
+    params: {
+      title: 'Card 卡片',
+      description: 'Card 最基础的卡片容器，可承载文字、列表、图片、段落。',
+    },
+  },
   {
     name: 'NoticeBar',
     component: require('./routes/NoticeBar').default,

diff --git a/example/examples/src/routes/Card/index.tsx b/example/examples/src/routes/Card/index.tsx
@@ -1,31 +1,63 @@
-import React from 'react';
-import {SafeAreaView, View, Image} from 'react-native';
-import {Card} from '@uiw/react-native';
+import React, { useState } from 'react';
+import { ScrollView, View, Image } from 'react-native';
+import { Card, Divider, Loader } from '@uiw/react-native';
 import Layout from '../../Layout';
 const CardDemo = (props: any) => {
-  const {Header} = Layout;
-  const {route} = props;
+  const { Header } = Layout;
+  const { route } = props;
   const description = route.params.description;
   const title = route.params.title;
+  const [selected, setSelected] = useState(false)
+  const [loading, setLoad] = useState(true)
   return (
-    <SafeAreaView style={{flex: 1}}>
+    <ScrollView style={{ flex: 1 }}>
       <Header title={title} description={description} />
+      <Header description={'基本使用'} />
       <Card
+      >
+        <Loader loading={loading}>
+          <Image
+            onLoad={() => setLoad(false)}
+            source={{
+              uri: 'https://image11.m1905.cn/uploadfile/2020/ss/0624/20200624104507290748.jpg',
+            }}
+            style={{ height: 200 }}
+          />
+        </Loader>
+      </Card>
+      <Divider />
+      <Header description={'带标题下划线圆角卡片'} />
+      <Card
+        title="我是标题"
+        showDriver={true}
+        borderRadius={12}
+      >
+        <Image
+          source={{
+            uri: 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2019%2F04%2F22%2Fca22d8623fe7454ea9cdb33f3137d14e.jpeg&thumbnail=650x2147483647&quality=80&type=jpg',
+          }}
+          style={{ height: 200 }}
+        />
+      </Card>
+      <Divider />
+      <Header description={'可点击选中卡片'} />
+      <Card
+        selected={selected}
         title="我是标题"
         showDriver={true}
-        borderRadius={0}
-        // onLongPress={() => {}}
+        borderRadius={12}
+        onPress={() => { setSelected(!selected) }}
       >
-        <View>
+        <Loader loading={loading}>
           <Image
             source={{
-              uri: 'https://img11.51tietu.net/pic/2016-071418/20160714181543xyu10ukncwf221991.jpg',
+              uri: 'https://image11.m1905.cn/uploadfile/2020/ss/0624/20200624104507290748.jpg',
             }}
-            style={{height: 150}}
+            style={{ height: 200 }}
           />
-        </View>
+        </Loader>
       </Card>
-    </SafeAreaView>
+    </ScrollView>
   );
 };
 export default CardDemo;
diff --git a/packages/core/src/Card/README.md b/packages/core/src/Card/README.md
@@ -17,7 +17,7 @@ class Demo extends Component {
       <Card
         title="我是标题"
         showDriver={true}
-        borderRadius={0}
+        // borderRadius={12}
         // onLongPress={() => {}}
       >
         <View>
@@ -42,6 +42,7 @@ class Demo extends Component {
 | `titleStyle` | 标题样式（可选） | object (style) | none |
 | `showDriver` | 是否展示下划线（可选） | Boolean | false |
 | `borderRadius` | 设置卡片圆角度数（可选）  | Number | none |
+| `selected` | 是否选中（可选）  | Boolean | none |
 | `onPress` | 按下卡片时的动作（可选） | TouchableOpacityProps['onPress']| none |
 | `onLongPress` | 长按下卡片时的动作（可选） | TouchableOpacityProps['onLongPress']| none |
 
diff --git a/packages/core/src/Card/index.tsx b/packages/core/src/Card/index.tsx
@@ -1,3 +1,4 @@
+import { check } from 'prettier';
 import React from 'react';
 import {
   View,
@@ -8,9 +9,12 @@ import {
   ViewStyle,
   TextStyle,
   TouchableOpacity,
-  TouchableOpacityProps
+  TouchableOpacityProps,
+  Animated
 } from 'react-native';
 import Divider from '../Divider'
+import Icon from '../Icon'
+import { checked } from './svg'
 
 export type CardProps = {
   containerStyle?: StyleProp<ViewStyle>;
@@ -19,11 +23,13 @@ export type CardProps = {
   titleStyle?: StyleProp<TextStyle>;
   showDriver?: boolean;
   borderRadius?: number;
+  selected?: boolean;
   children?: React.ReactNode;
   onPress?: TouchableOpacityProps['onPress'];
   onLongPress?: TouchableOpacityProps['onLongPress'];
 };
 
+
 const Card = ({
   children,
   containerStyle,
@@ -32,14 +38,15 @@ const Card = ({
   titleStyle,
   showDriver = false,
   borderRadius,
+  selected,
   onPress,
   onLongPress,
   ...attributes
 }: CardProps) => {
   const Container: any = onPress || onLongPress ? TouchableOpacity : View;
   // 获取卡片圆角度数
   const getBorderRadius = () => {
-    return borderRadius === undefined ? 12 : borderRadius;
+    return !borderRadius ? 0 : borderRadius;
   }
   // 卡片标题
   const CardTitle = (
@@ -50,6 +57,31 @@ const Card = ({
     </Text>
   )
 
+  // 卡片选中icon
+  const renderSelection = () => {
+    if (!selected) {
+      return null;
+    }
+    return (
+      <Animated.View
+        style={[
+          styles.selectedBorder,
+          {
+            opacity: 1,
+            borderRadius: getBorderRadius()
+          }
+        ]}
+        pointerEvents="none"
+      >
+        <View
+          style={styles.selectedIndicator}
+        >
+          <Icon xml={checked}  size={30} />
+        </View>
+      </Animated.View>
+    );
+  }
+
   return (
     <Container
       {...attributes}
@@ -74,10 +106,11 @@ const Card = ({
       >
         {title && CardTitle}
         {
-         title && showDriver && <Divider style={StyleSheet.flatten([styles.divider])} />
+          title && showDriver && <Divider style={StyleSheet.flatten([styles.divider])} />
         }
         {children}
       </View>
+      {renderSelection()}
     </Container>
   );
 };
@@ -120,6 +153,22 @@ const styles = StyleSheet.create({
   divider: {
     marginBottom: 15,
   },
+  selectedBorder: {
+    ...StyleSheet.absoluteFillObject,
+    borderRadius: 12,
+    borderWidth: 2,
+    borderColor: '#5847FF'
+  },
+  selectedIndicator: {
+    borderRadius: 999,
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    width: 20,
+    height: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   wrapper: {
     backgroundColor: 'transparent',
   },

diff --git a/packages/core/src/Card/svg.tsx b/packages/core/src/Card/svg.tsx
@@ -0,0 +1,3 @@
+export const checked:string = `
+<svg t="1628911378978" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13528" width="200" height="200"><path d="M846.336 0H1.536l1024.512 1024V179.2c-0.512-98.816-80.896-179.2-179.712-179.2zM916.48 137.216c0.512 2.048 1.536 4.096 0 4.608-2.048 0-3.584 0-5.12 0.512 2.048-1.536 3.584-3.072 5.12-5.12z m-11.776 15.872c0.512-1.024 1.024-2.56 1.536-3.584v-1.536l1.024-1.024c-0.512 0.512-0.512 1.536-1.024 2.048 0 1.536 1.536 2.56 3.072 2.56s2.56 0 4.096 0.512c-1.024 0-2.56 0-4.096-0.512-2.048 0.512-3.584 1.024-4.608 1.536-1.024 2.048-2.048 3.584-3.584 5.12 0.512-2.56 1.536-4.096 3.584-5.12z m1.536 34.816c-2.048-1.536-4.608-3.072-6.656-2.56v5.12c-8.704 0-10.24 6.144-12.288 12.288 1.536 0.512 3.584 0.512 5.12 1.024 1.536-3.072 0-5.12-3.584-4.096 5.632-1.024 9.728-3.072 12.8-6.144 1.536 1.024 1.024 1.024 2.56 1.536-3.072 8.704-6.144 18.432-7.68 27.648 0 0.512-1.024 1.024-1.536 1.024 0.512 0 0.512 0.512 1.024 0.512-0.512 1.536-0.512 3.072-1.024 4.608v0.512c-1.024 2.048-2.56 3.072-4.608 4.608-3.072 1.536-6.656 3.584-10.24 5.12-5.12 2.048 0 14.848-3.584 22.016 0 1.536-7.168-4.608-7.168-1.536-1.536 6.144-1.536 12.8-5.12 16.896 0 3.072-10.752-0.512-10.752 2.56-1.536 6.144-1.536 25.6 3.584 18.432 7.168-10.752 10.752-18.944 17.408-29.184-3.584 10.752-8.192 21.504-16.384 31.232-5.12 6.144-15.36 11.264-20.992 19.968v0.512c-5.12 13.312-7.68 30.208-17.92 42.496-20.992 22.528-37.376 46.592-54.272 69.632-8.704 11.264-16.896 22.528-26.624 33.28l-7.68 8.704c-4.608 5.12-9.728 10.24-14.336 15.36-9.728 10.24-15.872 20.48-25.088 29.184l-5.632 6.144c-11.776 13.312-17.92 24.064-30.208 31.232-1.536 1.024-5.12-3.072-6.656-5.12-13.824-14.848-27.136-26.112-41.472-36.864-7.168-5.632-14.336-10.752-22.016-16.384-7.168-5.12-13.824-10.24-20.992-15.36-15.872-11.264-28.672-24.576-28.672-48.128-1.024-31.744-37.376-48.64-27.648-25.6-11.776-36.864-33.792-30.208-24.064-67.072 0.512-2.56 16.384-41.984 46.08-37.376h0.512c15.872 11.776 47.104 32.768 57.344 52.224 10.24 21.504 24.064 37.888 38.912 52.736l1.536 1.536 0.512 0.512 1.024 1.024 2.048 2.048 4.096 4.096c2.56 2.56 5.12 5.12 8.192 8.704 0.512 0.512 1.024 0.512 1.536 0.512 2.048-1.024 4.608-2.048 7.168-3.072 2.56-0.512 5.12-2.048 8.192-3.584 3.072-2.048 5.12-2.56 11.264-8.192 10.24-8.704 20.48-18.432 30.208-28.16 36.352-36.352 65.024-72.192 101.888-105.984 5.632-5.12 11.264-10.752 16.384-15.872v0.512c0-0.512 0-0.512 0.512-0.512 2.56-2.56 5.12-5.12 8.192-7.68h1.536-1.024c0.512-0.512 1.536-1.024 2.048-2.048 5.12 1.024 6.144-2.56 7.68-6.144l1.536-3.072 1.536-1.536h-2.56c3.072-3.072 6.144-6.144 9.216-8.704l-1.536 3.072c0 0.512-0.512 1.024-0.512 1.536l4.608-4.608v1.536c0-0.512 0.512-0.512 0.512-1.024 3.584-2.048 6.656-4.608 9.728-6.656 1.536-0.512 1.024-2.048 0.512-4.096v-1.024c10.24-10.752 20.48-22.016 30.72-34.816l0.512-0.512c1.536-0.512 10.24-2.56 15.36-1.536-1.536 0-2.56 1.536-3.072 2.56z m33.792-33.792c-3.584 9.728-6.144 19.456-9.728 29.696-6.144 10.24-9.728 18.432-17.408 29.184-5.12 7.168-5.12-12.288-3.584-18.432 0-3.072 10.752 0.512 10.24-2.56 3.584-4.096 3.584-10.752 5.12-16.896 0-3.072 7.168 3.072 7.168 1.536 3.584-7.168-2.048-19.968 3.584-22.016 3.584-2.048 6.656-3.584 10.24-5.12-2.048 1.024-4.096 2.048-5.632 4.608z m22.016-49.664l-0.512-0.512c-3.584 5.632-8.192 9.728-16.896 11.264 3.584-1.024 5.12 1.024 3.584 4.096-1.536-0.512-3.584-0.512-5.12-1.024 1.536-6.144 3.584-12.288 12.288-12.288v-5.12c2.048-0.512 4.608 1.536 6.656 2.56 0.512-1.024 1.536-2.048 2.048-3.584h0.512c-1.536 2.048-2.048 3.072-2.56 4.608z" fill="#5847FF" p-id="13529"></path><path d="M845.824 242.176c2.048-1.536 3.072-3.072 3.584-5.12-1.536 1.024-3.072 2.56-3.584 5.12zM854.016 236.032c-1.536-0.512-3.072-1.024-3.072-2.56-0.512 1.024-1.024 2.56-1.536 3.584 1.536-0.512 3.072-1.024 4.608-1.024zM854.016 236.032c1.536 0.512 3.072 0 4.096 0.512-1.536-0.512-3.072-0.512-4.096-0.512zM803.84 282.624c5.632 0 9.728-2.048 11.264-5.632 0-0.512 0.512-0.512 1.024-0.512h-1.024c-5.632-0.512-11.264 0-11.264 6.144z" fill="#5847FF" p-id="13530"></path></svg>
+`
diff --git a/website/src/pages/components/card/index.tsx b/website/src/pages/components/card/index.tsx
@@ -0,0 +1,11 @@
+import Markdown, { importAll } from '../../../component/Markdown';
+
+export default class Page extends Markdown {
+  path="/packages/core/src/Card/README.md"
+  getMarkdown = async () => {
+    const md = await import('@uiw/react-native/lib/Card/README.md');
+    // 支持 markdown 中，相对于当前 index.tsx 相对路径引入图片资源
+    importAll((require as any).context('./', true, /\.(png|gif|jpg|svg)$/), this.imageFiles);
+    return md.default || md;
+  }
+}
diff --git a/website/src/routes/menus.ts b/website/src/routes/menus.ts
@@ -37,6 +37,7 @@ export const componentMenus: MenuData[] = [
   { path: "/components/steps", name: "Steps 步骤条" },
   { path: "/components/timeLine", name: "Timeline 时间轴" },
   { path: "/components/quicklist", name: "QuicList 快速列表" },
+  { path: "/components/card", name: "Card 卡片" },
   { divider: true, name: "Feedback" },
   { path: "/components/loader", name: "Loader 加载" },
   { path: "/components/modal", name: "Modal 模态框" },

diff --git a/website/src/routes/router.tsx b/website/src/routes/router.tsx
@@ -180,4 +180,7 @@ export const getRouterData = {
   '/components/quicklist': {
     component: dynamicWrapper([], () => import('../pages/components/quicklist')),
   },
+  '/components/card': {
+    component: dynamicWrapper([], () => import('../pages/components/card')),
+  },
 };