feat: 添加 Card 组件 & 更新 QuickList官网文档 & 删除TableDemo多余代码 (#167)

* 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文档 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 11, 2021 · 2db9c6a · 2db9c6a
1 parent e8ed97c
commit 2db9c6a
Show file tree

Hide file tree

Showing 9 changed files with 245 additions and 19 deletions.
diff --git a/example/examples/src/routes.tsx b/example/examples/src/routes.tsx
@@ -306,12 +306,20 @@ export const stackPageData: Routes[] = [
       description: 'Tabs 选项卡组件跨不同屏幕、数据集和其他交互的内容。',
     },
   },
+  {
+    name: 'QuickList',
+    component: require('./routes/QuickList').default,
+    params: {
+      title: 'QuickList 快速请求列表',
+      description: 'QuickList 快速请求上拉下拉数据列表',
+    },
+  },
   // {
-  //   name: 'QuickList',
-  //   component: require('./routes/QuickList').default,
+  //   name: 'Card',
+  //   component: require('./routes/Card').default,
   //   params: {
-  //     title: 'QuickList 快速请求列表',
-  //     description: 'QuickList 快速请求上拉下拉数据列表',
+  //     title: 'Card 卡片',
+  //     description: 'QuickList 最基础的卡片容器，可承载文字、列表、图片、段落。',
   //   },
   // },
 ];
diff --git a/example/examples/src/routes/Card/index.tsx b/example/examples/src/routes/Card/index.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import {SafeAreaView, View, Image} from 'react-native';
+import {Card} from '@uiw/react-native';
+import Layout from '../../Layout';
+const CardDemo = (props: any) => {
+  const {Header} = Layout;
+  const {route} = props;
+  const description = route.params.description;
+  const title = route.params.title;
+  return (
+    <SafeAreaView style={{flex: 1}}>
+      <Header title={title} description={description} />
+      <Card
+        title="我是标题"
+        showDriver={true}
+        borderRadius={0}
+        // onLongPress={() => {}}
+      >
+        <View>
+          <Image
+            source={{
+              uri: 'https://img11.51tietu.net/pic/2016-071418/20160714181543xyu10ukncwf221991.jpg',
+            }}
+            style={{height: 150}}
+          />
+        </View>
+      </Card>
+    </SafeAreaView>
+  );
+};
+export default CardDemo;
diff --git a/example/examples/src/routes/Table/index.tsx b/example/examples/src/routes/Table/index.tsx
@@ -1,23 +1,18 @@
-import React, { useState } from 'react';
-import { SafeAreaView,TouchableHighlight,Text } from 'react-native';
-import { Table } from '@uiw/react-native';
+import React from 'react';
+import {SafeAreaView, TouchableHighlight, Text} from 'react-native';
+import {Table} from '@uiw/react-native';
 import {ComProps} from '../../routes';
 import Layout from '../../Layout';
 const SearchBarDemo = (props: ComProps) => {
-
-  const { Header } = Layout;
+  const {Header} = Layout;
   const {route} = props;
   const description = route.params.description;
   const title = route.params.title;
 
-  const [data, setData] = useState([
-    { label: '上海', value: 1 },
-    { label: '南京', value: 2 }
-  ])
   return (
-    <SafeAreaView style={{ flex: 1 }}>
-       <Header title={title} description={description} />
-       <Table
+    <SafeAreaView style={{flex: 1}}>
+      <Header title={title} description={description} />
+      <Table
         columns={[
           {
             title: '类型',
@@ -32,9 +27,9 @@ const SearchBarDemo = (props: ComProps) => {
           {
             title: '操作',
             dataIndex: 'id',
-            render: (record: any) => {
+            render: () => {
               return (
-                <TouchableHighlight onPress={()=>{ }}>
+                <TouchableHighlight onPress={() => {}}>
                   <Text style={{color: '#888'}}>查看</Text>
                 </TouchableHighlight>
               );
@@ -52,4 +47,4 @@ const SearchBarDemo = (props: ComProps) => {
     </SafeAreaView>
   );
 };
-export default SearchBarDemo;
+export default SearchBarDemo;
diff --git a/packages/core/src/Card/README.md b/packages/core/src/Card/README.md
@@ -0,0 +1,47 @@
+Card 卡片
+---
+
+最基础的卡片容器，可承载文字、列表、图片、段落。
+
+### 基础示例
+
+<!--DemoStart--> 
+```jsx
+import {  SafeAreaView, View, Image  } from 'react-native';
+import { Card } from '@uiw/react-native';
+
+class Demo extends Component {
+  render() {
+    return (
+    <SafeAreaView style={{ flex: 1 }}>
+      <Card
+        title="我是标题"
+        showDriver={true}
+        borderRadius={0}
+        // onLongPress={() => {}}
+      >
+        <View>
+          <Image source={{ uri: 'https://img11.51tietu.net/pic/2016-071418/20160714181543xyu10ukncwf221991.jpg' }} style={{ height: 150 }} />
+        </View>
+      </Card>
+    </SafeAreaView>
+    )
+  }
+}
+```
+<!--End-->
+
+
+## Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|-----|------|
+| `containerStyle` | 外容器样式（可选） | object (style) | none |
+| `wrapperStyle` | 内容器样式（可选） | object (style) | none |
+| `title` | 标题（可选） | String | none |
+| `titleStyle` | 标题样式（可选） | object (style) | none |
+| `showDriver` | 是否展示下划线（可选） | Boolean | false |
+| `borderRadius` | 设置卡片圆角度数（可选）  | Number | 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
@@ -0,0 +1,128 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  Platform,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+  TouchableOpacity,
+  TouchableOpacityProps
+} from 'react-native';
+import Divider from '../Divider'
+
+export type CardProps = {
+  containerStyle?: StyleProp<ViewStyle>;
+  wrapperStyle?: StyleProp<ViewStyle>;
+  title?: string
+  titleStyle?: StyleProp<TextStyle>;
+  showDriver?: boolean;
+  borderRadius?: number;
+  children?: React.ReactNode;
+  onPress?: TouchableOpacityProps['onPress'];
+  onLongPress?: TouchableOpacityProps['onLongPress'];
+};
+
+const Card = ({
+  children,
+  containerStyle,
+  wrapperStyle,
+  title,
+  titleStyle,
+  showDriver = false,
+  borderRadius,
+  onPress,
+  onLongPress,
+  ...attributes
+}: CardProps) => {
+  const Container: any = onPress || onLongPress ? TouchableOpacity : View;
+  // 获取卡片圆角度数
+  const getBorderRadius = () => {
+    return borderRadius === undefined ? 12 : borderRadius;
+  }
+  // 卡片标题
+  const CardTitle = (
+    <Text
+      testID="cardTitle"
+      style={StyleSheet.flatten([styles.title, titleStyle]) as TextStyle}>
+      {title}
+    </Text>
+  )
+
+  return (
+    <Container
+      {...attributes}
+      onPress={onPress}
+      delayPressIn={10}
+      activeOpacity={0.6}
+      style={StyleSheet.flatten([
+        styles.container,
+        containerStyle && containerStyle,
+        // 圆角
+        {
+          borderRadius: getBorderRadius(),
+          elevation: 2
+        }
+      ])}
+    >
+      <View
+        style={StyleSheet.flatten([
+          styles.wrapper,
+          wrapperStyle && wrapperStyle,
+        ])}
+      >
+        {title && CardTitle}
+        {
+         title && showDriver && <Divider style={StyleSheet.flatten([styles.divider])} />
+        }
+        {children}
+      </View>
+    </Container>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#fff',
+    borderWidth: 1,
+    padding: 15,
+    margin: 15,
+    marginBottom: 0,
+    borderColor: '#F5F5F5',
+    ...Platform.select({
+      android: {
+        elevation: 1,
+      },
+      default: {
+        shadowColor: '#D3D3D3',
+        shadowOffset: { height: 5, width: 0 },
+        shadowOpacity: 0.25,
+        shadowRadius: 12,
+      },
+    }),
+  },
+  title: {
+    fontSize: 14,
+    color: '#808080',
+    ...Platform.select({
+      android: {
+        fontFamily: 'sans-serif',
+        fontWeight: 'bold',
+      },
+      default: {
+        fontWeight: 'bold',
+      },
+    }),
+    textAlign: 'center',
+    marginBottom: 15,
+  },
+  divider: {
+    marginBottom: 15,
+  },
+  wrapper: {
+    backgroundColor: 'transparent',
+  },
+});
+
+export default Card
diff --git a/packages/core/src/index.tsx b/packages/core/src/index.tsx
@@ -72,6 +72,8 @@ export { default as Tabs } from './Tabs'
 export * from './Tabs'
 export { default as QuickList } from './QuickList'
 export * from './QuickList'
+export { default as Card } from './Card'
+export * from './Card'
 
 /**
  * Typography

diff --git a/website/src/pages/components/quicklist/index.tsx b/website/src/pages/components/quicklist/index.tsx
@@ -0,0 +1,11 @@
+import Markdown, { importAll } from '../../../component/Markdown';
+
+export default class Page extends Markdown {
+  path="/packages/core/src/QuickList/README.md"
+  getMarkdown = async () => {
+    const md = await import('@uiw/react-native/lib/QuickList/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
@@ -36,6 +36,7 @@ export const componentMenus: MenuData[] = [
   { path: "/components/list", name: "List 列表" },
   { path: "/components/steps", name: "Steps 步骤条" },
   { path: "/components/timeLine", name: "Timeline 时间轴" },
+  { path: "/components/quicklist", name: "QuicList 快速列表" },
   { 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
@@ -177,4 +177,7 @@ export const getRouterData = {
   '/components/tabs': {
     component: dynamicWrapper([], () => import('../pages/components/tabs')),
   },
+  '/components/quicklist': {
+    component: dynamicWrapper([], () => import('../pages/components/quicklist')),
+  },
 };