feat: add FilterTable block (#28)

* feat: add FilterTable block

Co-authored-by: aboutblank <[email protected]>

blocks/FilterTable/README.md

@@ -0,0 +1,5 @@
+# FilterTable
+
+简介：基础过滤表格
+
+基础的过滤区加表格的组合

blocks/FilterTable/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@alifd/fusion-filter-table",
+  "version": "0.1.0",
+  "description": "基础的过滤区加表格的组合",
+  "files": [
+    "src/!(style.d.ts)",
+    "build/",
+    "screenshot.png"
+  ],
+  "license": "MIT",
+  "keywords": [
+    "ice",
+    "react",
+    "block"
+  ],
+  "scripts": {
+    "start": "../../node_modules/.bin/build-scripts start --config ../../build.block.json",
+    "build": "../../node_modules/.bin/build-scripts build --config ../../build.block.json",
+    "screenshot": "../../node_modules/.bin/screenshot -l -s mountNode",
+    "prepublishOnly": "npm run build -- --design && npm run screenshot",
+    "design": "../../node_modules/.bin/build-scripts build --design --config ../../build.block.json"
+  },
+  "dependencies": {
+    "ahooks": "^2.0.0",
+    "prop-types": "^15.5.8"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0",
+    "@alifd/next": "^1.x"
+  },
+  "blockConfig": {
+    "name": "FilterTable",
+    "title": "基础过滤表格",
+    "category": "Table"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@alifd/theme-design-pro": "^0.6.2"
+  }
+}

blocks/FilterTable/src/EmptyBlock.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const EmptyBlock: React.FunctionComponent = (): JSX.Element => {
+  return (
+    <div className="table-empty-block">
+      <div className="result-image">
+        <img alt="data empty" src="//img.alicdn.com/tfs/TB1_yJXFkL0gK0jSZFAXXcA9pXa-1112-758.png" />
+      </div>
+      <div className="result-title">
+        数据为空
+      </div>
+    </div>
+  )
+}
+
+export default EmptyBlock;

blocks/FilterTable/src/ExceptionBlock.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Button } from '@alifd/next';
+
+const ExceptionBlock: React.FunctionComponent = ({ onRefresh }): JSX.Element => {
+  return (
+    <div className="table-empty-block">
+      <div className="result-image">
+        <img alt="data empty" src="//img.alicdn.com/tfs/TB1_yJXFkL0gK0jSZFAXXcA9pXa-1112-758.png" />
+      </div>
+      <div className="result-title">
+        <Button type="secondary" onClick={onRefresh}>重新加载</Button>
+      </div>
+    </div>
+  )
+}
+
+export default ExceptionBlock;

blocks/FilterTable/src/index.module.scss

@@ -0,0 +1,27 @@
+.FilterTable {
+  :global {
+    .table-empty-block {
+      width: 100%;
+      min-height: 200px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      user-select: none;
+
+      .result-image {
+        height: 120px;
+
+        img {
+          height: 100%;
+        }
+      }
+
+      .result-title {
+        font-size: 12px;
+        line-height: 1.5;
+        color: #bcc4cc;
+      }
+    }
+  }
+}

blocks/FilterTable/src/index.tsx

@@ -0,0 +1,144 @@
+import React, { useState } from 'react';
+import { Select, Form, Field, Table, Card, Pagination } from '@alifd/next';
+import { useFusionTable } from 'ahooks';
+
+import EmptyBlock from './EmptyBlock';
+import ExceptionBlock from './ExceptionBlock';
+
+import styles from './index.module.scss';
+
+const FormItem = Form.Item;
+
+const getTableData = (
+  { current, pageSize }: { current: number; pageSize: number },
+  formData: { status: 'normal' | 'empty' | 'exception' }
+): Promise<any> => {
+  console.log(current, pageSize, formData);
+  if (!formData.status || formData.status === 'normal') {
+    let query = `page=${current}&size=${pageSize}`;
+    Object.entries(formData).forEach(([key, value]) => {
+      if (value) {
+        query += `&${key}=${value}`
+      }
+    });
+    return fetch(`https://randomuser.me/api?results=${pageSize}&${query}`)
+      .then(res => res.json())
+      .then(res => ({
+        total: 55,
+        list: res.results.slice(0, 10),
+      }));
+  }
+  if (formData.status === 'empty') {
+    return Promise.resolve([]);
+  }
+  if (formData.status === 'exception') {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        reject(new Error('data exception'));
+      }, 1000);
+    });
+  }
+
+  return Promise.resolve([]);
+};
+
+const defaultColumnWidth = {
+  'name.last': 140,
+  email: 500,
+  phone: 500,
+  gender: 140,
+};
+
+const FilterTable: React.FunctionComponent = (): JSX.Element => {
+  const [columnWidth, onColumnWidthChange] = useState(defaultColumnWidth);
+  const field = Field.useField([]);
+  const { paginationProps, tableProps, search, error, refresh } = useFusionTable(getTableData, {
+    field,
+  });
+  const { submit, reset } = search;
+
+  const onResizeChange = (dataIndex: keyof typeof defaultColumnWidth, width: number) => {
+    const newWidth = {
+      ...columnWidth,
+    };
+    newWidth[dataIndex] += width;
+    onColumnWidthChange(newWidth);
+  };
+
+  return (
+    <div className={styles.FilterTable}>
+      <Card free>
+        <Card.Content>
+          <Form
+            className="filter-form"
+            responsive
+            fullWidth
+            labelAlign="top"
+            field={field}
+          >
+            <FormItem
+              colSpan={3}
+              label="数据状态"
+              required
+              requiredMessage="必填"
+            >
+              <Select
+                name="status"
+                dataSource={[
+                  {
+                    label: '正常状态',
+                    value: 'normal',
+                  },
+                  {
+                    label: '空数据状态',
+                    value: 'empty',
+                  },
+                  {
+                    label: '数据异常状态',
+                    value: 'exception',
+                  }
+                ]}
+              />
+            </FormItem>
+            <FormItem colSpan={7} />
+            <FormItem
+              colSpan={2}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+              }}
+            >
+              <Form.Submit
+                type="primary"
+                onClick={submit}
+                validate
+                style={{ marginRight: '20px' }}
+              >
+                提交
+              </Form.Submit>
+              <Form.Reset onClick={reset}>重置</Form.Reset>
+            </FormItem>
+          </Form>
+        </Card.Content>
+      </Card>
+      <Card free>
+        <Card.Content>
+          <Table
+            {...tableProps}
+            onResizeChange={onResizeChange}
+            emptyContent={error ? <ExceptionBlock onRefresh={refresh} /> : <EmptyBlock />}
+            primaryKey="email"
+          >
+            <Table.Column title="name" dataIndex="name.last" resizable width={columnWidth['name.last']} />
+            <Table.Column title="email" dataIndex="email" resizable width={columnWidth.email} />
+            <Table.Column title="phone" dataIndex="phone" resizable width={columnWidth.phone} />
+            <Table.Column title="gender" dataIndex="gender" resizable width={columnWidth.gender} />
+          </Table>
+          <Pagination style={{ marginTop: 16 }} {...paginationProps} />
+        </Card.Content>
+      </Card>
+    </div>
+  );
+}
+
+export default FilterTable;

blocks/FilterTable/src/style.d.ts

@@ -0,0 +1,4 @@
+declare module '*.module.scss' {
+  const classes: { [key: string]: string };
+  export default classes;
+}

blocks/FilterTable/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.block.json",
+  "include": [
+    "./src/**/*.ts",
+    "./src/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules",
+    "build"
+  ]
+}

build.block.json

@@ -1,7 +1,9 @@
 {
   "plugins": [
     "build-plugin-block",
-    "build-plugin-fusion",
+    ["build-plugin-fusion", {
+      "themePackage": "@alifd/theme-design-pro"
+    }],
     "build-plugin-fusion-material",
     [
       "build-plugin-moment-locales",

package.json

@@ -36,13 +36,14 @@
   },
   "devDependencies": {
     "@alib/build-scripts": "^0.1.5",
+    "@alifd/theme-design-pro": "^0.6.2",
     "@commitlint/cli": "^8.2.0",
     "@ice/screenshot": "^0.1.5",
     "@ice/spec": "^1.0.1",
     "@types/fs-extra": "^8.0.1",
     "@types/node": "^12.12.17",
     "ali-oss": "^6.5.1",
-    "build-plugin-block": "^1.0.0",
+    "build-plugin-block": "^1.1.0",
     "build-plugin-fusion": "^0.1.0",
     "build-plugin-fusion-material": "^0.1.10",
     "build-plugin-ice-app": "^0.1.5",