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

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 高效率快速请求上拉下拉数据列表',
     },
   },
   {

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>

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"
       />

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>

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 | -   |