feat(Table): Add scroll props & Update example & Update menu to website & Update (QuickList) example (#176)

ChenlingasMx · renovate[bot] · renovate-bot · web-flow · commit ad8d3a4506f0 · 2021-08-14T17:41:19.000+08:00
* 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组件增加点击选中功能 * fix:QuickList Demo & Table组件增加滚动功能 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>
diff --git a/example/examples/src/routes.tsx b/example/examples/src/routes.tsx
@@ -311,7 +311,7 @@ export const stackPageData: Routes[] = [
     component: require('./routes/QuickList').default,
     params: {
       title: 'QuickList 快速请求列表',
-      description: 'QuickList 快速请求上拉下拉数据列表',
+      description: 'QuickList 高效率快速请求上拉下拉数据列表',
     },
   },
   {
diff --git a/example/examples/src/routes/QuickList/index.tsx b/example/examples/src/routes/QuickList/index.tsx
@@ -1,52 +1,53 @@
-import React, {useRef, useState} from 'react';
-import {SafeAreaView} from 'react-native';
-import {QuickList, List} from '@uiw/react-native';
-import {ComProps} from '../../routes';
+import React, { useRef, useState } from 'react';
+import { SafeAreaView, Image, View, Text } from 'react-native';
+import { QuickList, List } from '@uiw/react-native';
+import { ComProps } from '../../routes';
 import Layout from '../../Layout';
-const {Header} = Layout;
+const { Header } = Layout;
 
-export interface ListViewProps extends ComProps {}
+export interface ListViewProps extends ComProps { }
 
 interface fethProp {
   page: number;
   pageSize: number;
 }
-
-const defaultData: Array<{name: string; id: number}> = [
-  {name: '最好用的快速List列表', id: 1},
-  {name: '最好用的快速List列表', id: 2},
-  {name: '最好用的快速List列表', id: 3},
-  {name: '最好用的快速List列表', id: 4},
-  {name: '最好用的快速List列表', id: 5},
-  {name: '最好用的快速List列表', id: 6},
-  {name: '最好用的快速List列表', id: 7},
-  {name: '最好用的快速List列表', id: 8},
-  {name: '最好用的快速List列表', id: 9},
-  {name: '最好用的快速List列表', id: 10},
+const imageUrl = 'https://c-ssl.duitang.com/uploads/item/202004/13/20200413013923_25wds.jpeg'
+const defaultData: Array<{ name: string; id: number; img: string }> = [
+  { name: '@uiw/react-native QuickList', id: 1, img: imageUrl },
+  { name: '@uiw/react-native QuickList', id: 2, img: imageUrl },
+  { name: '@uiw/react-native QuickList', id: 3, img: imageUrl },
+  { name: '@uiw/react-native QuickList', id: 4, img: imageUrl },
+  { name: '@uiw/react-native QuickList', id: 5, img: imageUrl },
+  { name: '@uiw/react-native QuickList', id: 6, img: imageUrl },
+  { name: '@uiw/react-native QuickList', id: 7, img: imageUrl },
+  { name: '@uiw/react-native QuickList', id: 8, img: imageUrl },
+  { name: '@uiw/react-native QuickList', id: 9, img: imageUrl },
+  { name: '@uiw/react-native QuickList', id: 10, img: imageUrl },
 ];
 
 const QuickListView = (props: ListViewProps) => {
   const baseRef = useRef();
-  const {route} = props;
+  const { route } = props;
   const description = route.params.description;
   const title = route.params.title;
   const [total, setTotal] = useState(0);
-  const [data, setData] = useState<Array<{name: string; id: number}>>([]);
+  const [data, setData] = useState<Array<{ name: string; id: number; img: string }>>([]);
 
   const sleep = (time: any) =>
     new Promise(resolve => setTimeout(() => resolve(''), time));
   // 模拟请求
   const fethList = async (params: fethProp) => {
-    const {page, pageSize} = params;
+    const { page, pageSize } = params;
     if (page === 1) {
       await sleep(500);
       setData(defaultData);
     } else {
       let fetchData = [];
       for (let i = 0; i < pageSize; i++) {
         const id = data.length + (1 / 10) * pageSize + i;
-        const name = '最好用的快速List列表';
-        let obj = {name, id};
+        const name = '@uiw/react-native QuickList';
+        const img = imageUrl
+        let obj = { name, id, img };
         fetchData.push(obj);
       }
       let newData = [...data, ...fetchData];
@@ -56,20 +57,35 @@ const QuickListView = (props: ListViewProps) => {
     setTotal(40);
   };
 
+  const ListItem = (item:any) => {
+    return (
+      <List flat={false}>
+        <View
+          style={{ padding: 10, display: "flex", alignItems: "center", flexDirection: "row" }}>
+          <Image
+            source={{
+              uri: item.img,
+            }}
+            style={{ height: 70, width: 70, borderRadius: 50 }}
+          />
+          <View style={{ marginLeft: 10 }}>
+            <Text style={{ marginBottom: 5, fontSize: 18 }}>react-native</Text>
+            <Text style={{ color:"#808080"}}>{item.name}</Text>
+          </View>
+        </View>
+      </List>
+    )
+  }
+
   return (
-    <SafeAreaView style={{flex: 1}}>
+    <SafeAreaView style={{ flex: 1 }}>
       <Header title={title} description={description} />
       <QuickList
         ref={baseRef}
         onFetch={fethList}
         data={data}
         total={total}
-        renderItem={({item}) => (
-          <List flat={false}>
-            <List.Item
-              style={{height: 70}}>{`${item.id}-${item.name}`}</List.Item>
-          </List>
-        )}
+        renderItem={({ item }) => ListItem(item)}
         keyId="id"
       />
     </SafeAreaView>
diff --git a/example/examples/src/routes/Table/index.tsx b/example/examples/src/routes/Table/index.tsx
@@ -1,46 +1,58 @@
 import React from 'react';
-import {SafeAreaView, TouchableHighlight, Text} from 'react-native';
-import {Table} from '@uiw/react-native';
-import {ComProps} from '../../routes';
+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 {route} = props;
+  const { Header } = Layout;
+  const { route } = props;
   const description = route.params.description;
   const title = route.params.title;
 
   return (
-    <SafeAreaView style={{flex: 1}}>
+    <SafeAreaView style={{ flex: 1 }}>
       <Header title={title} description={description} />
       <Table
         columns={[
           {
-            title: '类型',
-            dataIndex: 'reportType',
-            ellipsis: true,
+            title: '配件名称',
+            dataIndex: 'partName',
+            style: { width: 100 },
+          },
+          {
+            title: '配件品牌',
+            dataIndex: 'partBrand',
+            style: { width: 100 },
+          },
+          {
+            title: '配件型号',
+            dataIndex: 'partModel',
+            style: { width: 100 },
           },
           {
             title: '备注',
             dataIndex: 'remark',
             ellipsis: true,
+            style: { width: 100 },
           },
           {
             title: '操作',
             dataIndex: 'id',
+            style: { width: 90 },
             render: () => {
               return (
-                <TouchableHighlight onPress={() => {}}>
-                  <Text style={{color: '#888'}}>查看</Text>
+                <TouchableHighlight  onPress={() => { }}>
+                  <Text style={{ color: '#888' }}>查看</Text>
                 </TouchableHighlight>
               );
             },
           },
         ]}
         data={[
-          {id: '1', reportType: '❤️爱永恒', remark: 'ff爱zz,三生三世用相随'},
-          {id: '2', reportType: '❤️爱永恒', remark: 'ff爱zz,三生三世用相随'},
-          {id: '3', reportType: '❤️爱永恒', remark: 'ff爱zz,三生三世用相随'},
-          {id: '4', reportType: '❤️爱永恒', remark: 'ff爱zz,三生三世用相随'},
+          { id: '1',  partName: 'Chanel', partBrand: '香奈儿', partModel: 'xl', remark: 'ff爱zz,三生三世用相随' },
+          { id: '2',  partName: 'Chanel', partBrand: '香奈儿', partModel: 'xl', remark: 'ff爱zz,三生三世用相随' },
+          { id: '3',  partName: 'Chanel', partBrand: '香奈儿', partModel: 'xl', remark: 'ff爱zz,三生三世用相随' },
+          { id: '4',  partName: 'Chanel', partBrand: '香奈儿', partModel: 'xl', remark: 'ff爱zz,三生三世用相随' },
         ]}
         rowKey="id"
       />
diff --git a/packages/core/src/QuickList/README.md b/packages/core/src/QuickList/README.md
@@ -8,26 +8,26 @@ QuickList 快速请求列表
 <!--DemoStart--> 
 ```jsx
 import React, { useRef, useState } from 'react';
-import { SafeAreaView } from 'react-native';
+import { SafeAreaView, Image, View, Text } from 'react-native';
 import { QuickList, List } from '@uiw/react-native';
 
-const defaultData =[
-  { name: '最好用的快速List列表', id: 2 },
-  { name: '最好用的快速List列表', id: 3 },
-  { name: '最好用的快速List列表', id: 4 },
-  { name: '最好用的快速List列表', id: 5 },
-  { name: '最好用的快速List列表', id: 6 },
-  { name: '最好用的快速List列表', id: 7 },
-  { name: '最好用的快速List列表', id: 8 },
-  { name: '最好用的快速List列表', id: 9 },
-  { name: '最好用的快速List列表', id: 10 },
-]
+const imageUrl = 'https://c-ssl.duitang.com/uploads/item/202004/13/20200413013923_25wds.jpeg'
+
+const defaultData = [
+  { name: '@uiw/react-native QuickList', id: 1, img: imageUrl },
+  { name: '@uiw/react-native QuickList', id: 2, img: imageUrl },
+  { name: '@uiw/react-native QuickList', id: 3, img: imageUrl },
+  { name: '@uiw/react-native QuickList', id: 4, img: imageUrl },
+  { name: '@uiw/react-native QuickList', id: 5, img: imageUrl },
+  { name: '@uiw/react-native QuickList', id: 6, img: imageUrl },
+  { name: '@uiw/react-native QuickList', id: 7, img: imageUrl },
+  { name: '@uiw/react-native QuickList', id: 8, img: imageUrl },
+  { name: '@uiw/react-native QuickList', id: 9, img: imageUrl },
+  { name: '@uiw/react-native QuickList', id: 10, img: imageUrl },
+];
 
 const QuickListDemo = (props) => {
   const baseRef = useRef();
-  const { route } = props;
-  const description = route.params.description;
-  const title = route.params.title;
   const [total, setTotal] = useState(0)
   const [data, setData] = useState([])
 
@@ -43,8 +43,9 @@ const QuickListDemo = (props) => {
       let fetchData = []
       for (let i = 0; i < pageSize; i++) {
         const id = (data.length + 1 / 10 * pageSize) + i
-        const name = `最好用的快速List列表`;
-        let obj = { name, id }
+        const name = `@uiw/react-native QuickList`;
+        const img = imageUrl
+        let obj = { name, id,img }
         fetchData.push(obj)
       }
       let newData = [...data, ...fetchData]
@@ -53,6 +54,26 @@ const QuickListDemo = (props) => {
     }
     setTotal(40)
   }
+  // 列表渲染
+  const ListItem = (item:any) => {
+    return (
+      <List flat={false}>
+        <View
+          style={{ padding: 10, display: "flex", alignItems: "center", flexDirection: "row" }}>
+          <Image
+            source={{
+              uri: item.img,
+            }}
+            style={{ height: 70, width: 70, borderRadius: 50 }}
+          />
+          <View style={{ marginLeft: 10 }}>
+            <Text style={{ marginBottom: 5, fontSize: 18 }}>react-native</Text>
+            <Text style={{ color:"#808080"}}>{item.name}</Text>
+          </View>
+        </View>
+      </List>
+    )
+  }
 
   return (
     <SafeAreaView style={{ flex: 1 }}>
@@ -61,11 +82,7 @@ const QuickListDemo = (props) => {
         onFetch={fethList}
         data={data}
         total={total}
-        renderItem={({ item }) =>
-          <List flat={false}>
-            <List.Item style={{ height: 70 }}>{`${item.id}-${item.name}`}</List.Item>
-          </List>
-        }
+        renderItem={({ item }) => ListItem(item)}
         keyId="id"
       />
     </SafeAreaView>
diff --git a/packages/core/src/Table/README.md b/packages/core/src/Table/README.md
@@ -8,38 +8,50 @@ import { Table } from '@uiw/react-native';
 
 function Demo() {
   return (
-    <Table
-      columns={[
-        {
-          title: '类型',
-          dataIndex: 'reportType',
-          ellipsis: true,
-        },
-        {
-          title: '备注',
-          dataIndex: 'remark',
-          ellipsis: true,
-        },
-        {
-          title: '操作',
-          dataIndex: 'id',
-          render: record => {
-            return (
-              <TouchableHighlight onPress={()=>{ }}>
-                <Text style={{color: '#888'}}>查看</Text>
-              </TouchableHighlight>
-            );
+     <Table
+        columns={[
+          {
+            title: '配件名称',
+            dataIndex: 'partName',
+            style: { width: 100 },
           },
-        },
-      ]}
-      data={[
-        {id: '1', reportType: '❤️爱永恒', remark: 'ff爱zz,三生三世用相随'},
-        {id: '2', reportType: '❤️爱永恒', remark: 'ff爱zz,三生三世用相随'},
-        {id: '3', reportType: '❤️爱永恒', remark: 'ff爱zz,三生三世用相随'},
-        {id: '4', reportType: '❤️爱永恒', remark: 'ff爱zz,三生三世用相随'},
-      ]}
-      rowKey="id"
-    />
+          {
+            title: '配件品牌',
+            dataIndex: 'partBrand',
+            style: { width: 100 },
+          },
+          {
+            title: '配件型号',
+            dataIndex: 'partModel',
+            style: { width: 100 },
+          },
+          {
+            title: '备注',
+            dataIndex: 'remark',
+            ellipsis: true,
+            style: { width: 100 },
+          },
+          {
+            title: '操作',
+            dataIndex: 'id',
+            style: { width: 90 },
+            render: () => {
+              return (
+                <TouchableHighlight  onPress={() => { }}>
+                  <Text style={{ color: '#888' }}>查看</Text>
+                </TouchableHighlight>
+              );
+            },
+          },
+        ]}
+        data={[
+          { id: '1',  partName: 'Chanel', partBrand: '香奈儿', partModel: 'xl', remark: 'ff爱zz,三生三世用相随' },
+          { id: '2',  partName: 'Chanel', partBrand: '香奈儿', partModel: 'xl', remark: 'ff爱zz,三生三世用相随' },
+          { id: '3',  partName: 'Chanel', partBrand: '香奈儿', partModel: 'xl', remark: 'ff爱zz,三生三世用相随' },
+          { id: '4',  partName: 'Chanel', partBrand: '香奈儿', partModel: 'xl', remark: 'ff爱zz,三生三世用相随' },
+        ]}
+        rowKey="id"
+      />
   );
 }
 ```
@@ -51,6 +63,8 @@ function Demo() {
 | `columns`           |	表格列的配置描述，具体项见下表       | ColumnsType[] | - |
 | `data`            | 数据数组  | object[] | - |
 | `rowKey`           | 表格行 key 的取值，可以是字符串或一个函数     | string | function(record): string    | key       |
+| `horizontal`       | 是否水平排成一行  | bool | true |
+| `style`       | Table样式 | object | - |
 
 ### Column
 
@@ -60,3 +74,4 @@ function Demo() {
 | `ellipsis`            | 超过宽度将自动省略 | - |
 | `title`           | 列头显示文字    | string | -   | 
 | `render`           | 生成复杂数据的渲染函数,参数为当前行数据    | function(record) {} | -   | 
+| `style`           | Table行内样式    | object | -   | 
diff --git a/packages/core/src/Table/index.tsx b/packages/core/src/Table/index.tsx

Original file line number	Diff line number	Diff line change
`@@ -311,7 +311,7 @@ export const stackPageData: Routes[] = [`
`311`	`311`	`component: require('./routes/QuickList').default,`
`312`	`312`	`params: {`
`313`	`313`	`title: 'QuickList 快速请求列表',`
`314`		`- description: 'QuickList 快速请求上拉下拉数据列表',`
	`314`	`+ description: 'QuickList 高效率快速请求上拉下拉数据列表',`
`315`	`315`	`},`
`316`	`316`	`},`
`317`	`317`	`{`