fix:Table表格

ChenlingasMx · jaywcjlove · commit c8d5bea7f5d9 · 2021-04-27T11:03:46.000+08:00
diff --git a/components/Table/BodyRow.tsx b/components/Table/BodyRow.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+interface BodyRowProps {
+  columns: Array<columnsState>;
+  record: Object | any;
+  style?: Object
+}
+
+interface columnsState {
+  dataIndex: string
+  title: string
+  style?: Object
+  render?: (record: any) => React.ReactNode;
+  ellipsis?: boolean
+}
+interface textEllipsizeState {
+  numberOfLines: number;
+  ellipsizeMode: string;
+}
+export default function BodyRow({ columns, record, style }: BodyRowProps) {
+  return (
+    <View style={[styles.row, style]}>
+      {columns.map((itm, idx) => {
+        // row渲染的内容
+        let val = '';
+        if (itm.dataIndex.indexOf('.') > -1) {
+          const firstKey = itm.dataIndex.split('.')[0];
+          const secondKey = itm.dataIndex.split('.')[1];
+          val = record[firstKey][secondKey];
+        } else {
+          val = record[itm.dataIndex];
+        }
+
+        // 是否省略多余文字
+        let textEllipsize: textEllipsizeState | any =
+          itm.ellipsis && itm.ellipsis
+            ? {
+              numberOfLines: 1,
+              ellipsizeMode: 'tail',
+            }
+            : null;
+
+        return (
+          <View key={itm.dataIndex} style={[styles.cell, itm.style]}>
+            {itm.render ? (
+              itm.render(record)
+            ) : (
+              <Text selectable={true} {...textEllipsize} style={styles.content}>
+                {val}
+              </Text>
+            )}
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignContent: 'center',
+    borderBottomWidth: 1,
+    borderColor: '#E5E5E5',
+  },
+  cell: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    borderRightWidth: 1,
+    borderRightColor: '#E5E5E5',
+    paddingTop: 4,
+    paddingBottom: 4,
+    backgroundColor: '#fff',
+  },
+  content: {
+    color: '#888888',
+  },
+});
diff --git a/components/Table/index.md b/components/Table/index.md
@@ -0,0 +1,52 @@
+### Table组件
+
+```
+       <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>
+              );
+            },
+          },
+        ]}
+        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"
+      />
+```
+### props
+
+| 参数                 | 说明         | 类型    | 默认值  |
+| -------------------- | ------------ | ------- | ------- |
+| `columns`           |	表格列的配置描述，具体项见下表       | ColumnsType[] | - |
+| `data`            | 数据数组  | object[] | - |
+| `rowKey`           | 表格行 key 的取值，可以是字符串或一个函数     | string | function(record): string    | key       |
+
+### Column
+
+| 参数                 | 说明         | 类型    | 默认值  |
+| -------------------- | ------------ | ------- | ------- |
+| `dataIndex`           |	列数据在数据项中对应的路径，支持通过数组查询嵌套路径      | string | string[] | - |
+| `ellipsis`            | 超过宽度将自动省略 | - |
+| `title`           | 列头显示文字    | string | -   | 
+| `render`           | 生成复杂数据的渲染函数,参数为当前行数据    | function(record) {} | -   | 
diff --git a/components/Table/index.tsx b/components/Table/index.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import { View, Text, StyleSheet, Dimensions } from 'react-native';
+import BodyRow from './BodyRow';
+
+
+interface TableProps {
+  data: Array<Object>;
+  columns: Array<columnsState>;
+  rowKey: any
+}
+
+interface columnsState {
+  dataIndex: string
+  title: string
+  style?: Object;
+  render?: (record: any) => React.ReactNode;
+  ellipsis?: boolean
+}
+// table组件
+const Table = ({
+  data,
+  columns,
+  rowKey
+}: TableProps) => {
+
+  const getRowKey: (record: any) => string = (record) => {
+    const key = typeof rowKey === 'function' ? rowKey(record) : record && record[rowKey];
+    return key;
+  }
+
+  return (
+    <View style={styles.conW}>
+      <View style={styles.conTitle}>
+        {columns.map((itm, idx) => (
+          <View key={itm.dataIndex + idx} style={[styles.contRight, { borderRightWidth: idx === columns.length - 1 ? 0 : 1 }, itm.style]}>
+            <Text style={styles.content}>{itm.title}</Text>
+          </View>
+        ))}
+      </View>
+      {data.map((item, idx) => {
+        const key = getRowKey(item);
+        return <BodyRow key={key} columns={columns} record={item} style={{ borderBottomWidth: idx === data.length - 1 ? 0 : 1 }} />;
+      })}
+      {data.length === 0 && <Text style={styles.noDataText}>暂无数据...</Text>}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  title: {
+    backgroundColor: '#fff',
+    height: 30,
+  },
+  conTitle: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderColor: '#E5E5E5',
+  },
+  content: {
+    color: '#888888',
+  },
+  conn: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderColor: '#E5E5E5',
+  },
+
+  contRight: {
+    borderRightWidth: 1,
+    flex: 1,
+    borderRightColor: '#E5E5E5',
+    borderBottomColor: '#E5E5E5',
+    color: '#888888',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: 5,
+    paddingBottom: 5,
+  },
+  conW: {
+    borderTopLeftRadius: 5,
+    borderTopRightRadius: 5,
+    // overflow: 'hidden',
+    borderWidth: 1,
+    borderTopWidth: 0,
+    borderColor: '#E5E5E5',
+    // marginTop: 10,
+    width: Dimensions.get('window').width,
+    backgroundColor: '#fff',
+    // marginBottom: 20
+  },
+  noDataText: {
+    color: '#888888',
+    textAlign: 'center',
+    paddingTop: 4,
+    paddingBottom: 4,
+  },
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    borderBottomWidth: 1,
+    borderColor: '#E5E5E5',
+  },
+});
+
+export default Table;
diff --git a/src/routes.tsx b/src/routes.tsx
@@ -249,4 +249,12 @@ export const stackPageData: Routes[] = [
       description: '模糊搜索select。',
     },
   },
+  {
+    name: 'Table',
+    component: require('./routes/Table').default,
+    params: {
+      title: 'Table 表格',
+      description: '表格Table',
+    },
+  },
 ];
diff --git a/src/routes/Table/index.tsx b/src/routes/Table/index.tsx
@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+import { SafeAreaView,TouchableHighlight,Text } from 'react-native';
+import Table from '../../../components/Table/index'
+import Layout from '../../Layout';
+const SearchBarDemo = (props:any) => {
+
+  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
+        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>
+              );
+            },
+          },
+        ]}
+        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"
+      />
+    </SafeAreaView>
+  );
+};
+export default SearchBarDemo;
