feat: add-table (#54)

* feat: add-table

* add engines

* update doc

 module.exports = {
-  parser: 'babel-eslint',
-  extends: ['airbnb', 'prettier', 'plugin:compat/recommended'],
-  env: {
-    browser: true,
-    node: true,
-    es6: true,
-    mocha: true,
-    jest: true,
-    jasmine: true,
-  },
-  globals: {
-    APP_TYPE: true,
-    page: true,
-  },
+  extends: [require.resolve('@umijs/fabric/dist/eslint')],
   rules: {
-    'import/prefer-default-export': 0,
-    'react/jsx-filename-extension': [1, { extensions: ['.js'] }],
-    'react/jsx-wrap-multilines': 0,
-    'react/prop-types': 0,
-    'react/forbid-prop-types': 0,
-    'react/jsx-one-expression-per-line': 0,
-    'import/no-unresolved': 0,
-    'import/no-extraneous-dependencies': [
-      2,
-      {
-        optionalDependencies: true,
-        devDependencies: ['**/tests/**.js', '/mock/**.js', '**/**.test.js', '**/_scripts/*.js'],
-      },
-    ],
-    'jsx-a11y/no-noninteractive-element-interactions': 0,
-    'jsx-a11y/click-events-have-key-events': 0,
-    'jsx-a11y/no-static-element-interactions': 0,
-    'jsx-a11y/anchor-is-valid': 0,
-    'linebreak-style': 0,
-  },
-  settings: {
-    polyfills: ['fetch', 'promises', 'url'],
+    'import/no-extraneous-dependencies': 0,
   },
 };

-
 export default {
   plugins: [
-    ['umi-plugin-block-dev', {
-      layout: process.env.LAYOUT || 'ant-design-pro',
-      menu: {
-        name: process.env.BLOCK,
-        icon: 'home',
+    [
+      'umi-plugin-block-dev',
+      {
+        layout: process.env.LAYOUT || 'ant-design-pro',
+        menu: {
+          name: process.env.BLOCK,
+          icon: 'home',
+        },
       },
-    }],
-    ['umi-plugin-react', {
-      'dva': true,
-      'antd': true,
-    }],
-    require.resolve('./plugin'),
+    ],
+    [
+      'umi-plugin-react',
+      {
+        dva: true,
+        antd: true,
+      },
+    ],
+    // require.resolve('./plugin'),
   ],
 };

@@ -15,7 +15,7 @@ $ yarn
 > Specify the block via BLOCK env.
 
 ```bash
-$ BLOCK=templates/user-dashboard yarn start
+ yarn start templates/user-dashboard
 ```
 
 ### Create Block

@@ -17,7 +17,7 @@ class BlockGenerator extends Generator {
             this.destinationPath(file.replace(/^_/, '.')),
             {
               name: process.env.BLOCK.split('/')[1],
-            },
+            }
           );
         }
       });

@@ -33,7 +33,7 @@ function haveImport(cwd, name) {
 function parseJSON(root) {
   const dirs = readdirSync(root);
   const type = basename(root);
-  const list = dirs.reduce((memo, dir) => {
+  const list = dirs.reduce((memo = [], dir) => {
     if (dir.charAt(0) === '.') return;
     const absDirPath = join(root, dir);
     const pkg = require(join(absDirPath, 'package.json'));
@@ -69,11 +69,7 @@ function generate(root) {
   mkdirp.sync(dist);
 
   const json = parseJSON(root);
-  writeFileSync(
-    join(dist, `${type}.json`),
-    JSON.stringify(json, null, 2),
-    'utf-8',
-  );
+  writeFileSync(join(dist, `${type}.json`), JSON.stringify(json, null, 2), 'utf-8');
 }
 
 generate(join(__dirname, '..', 'templates'));

@@ -24,4 +24,3 @@ const generator = new BlockGenerator({
 generator.run(() => {
   console.log('done');
 });
-

@@ -32,7 +32,9 @@ files.forEach(file => {
     };
     const isPrettier = prettier.check(input, withParserOptions);
     if (!isPrettier) {
-      console.log(`\x1b[31m ${file} is no prettier, please use npm run prettier and git add !\x1b[0m`);
+      console.log(
+        `\x1b[31m ${file} is no prettier, please use npm run prettier and git add !\x1b[0m`
+      );
       didWarn = true;
     }
   } catch (e) {

@@ -3,5 +3,5 @@ import { Button } from 'antd';
 import styles from './index.less';
 
 export default () => {
-  return <Button className={styles.container}>Hello UmiJS!</Button>
-}
+  return <Button className={styles.container}>Hello UmiJS!</Button>;
+};

-
 .wrapper {
   display: flex;
   min-height: 100vh;
   flex-direction: column;
 
-  header, footer {
+  header,
+  footer {
     background: #82caff;
     flex: 0 0 6em;
   }
@@ -19,7 +19,8 @@
     flex: 1;
     background: #fecccc;
   }
-  aside, nav {
+  aside,
+  nav {
     flex: 0 0 12em;
     background: #c9c;
   }

+{
+  "name": "table",
+  "description": "查询表格是每一个项目都需要的基本页面。",
+  "dependencies": {
+    "@ant-design/pro-table": "^1.0.31",
+    "@umijs/ui-flag": "1.0.2",
+    "antd": "^3.10.9"
+  },
+  "peerDependencies": {
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
+  },
+  "devDependencies": {
+    "umi": "^2.13.0"
+  }
+}

+import { Button, Divider, Dropdown, Form, Icon, Menu } from 'antd';
+import React, { useState, useRef } from 'react';
+import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
+import UmiUIFlag from '@umijs/ui-flag';
+import { FormComponentProps } from 'antd/es/form';
+import { TableListItem, TableListParams } from './typing.d';
+
+export async function queryRule(params?: TableListParams) {
+  console.log(params);
+  return { data: [], success: true };
+}
+
+const TableList: React.FC<FormComponentProps> = () => {
+  const [sorter, setSorter] = useState({});
+  const actionRef = useRef<ActionType>();
+  const columns: ProColumns<TableListItem>[] = [
+    {
+      title: '规则名称',
+      dataIndex: 'name',
+    },
+    {
+      title: '描述',
+      dataIndex: 'desc',
+    },
+    {
+      title: '服务调用次数',
+      dataIndex: 'callNo',
+      sorter: true,
+      align: 'right',
+      renderText: (val: string) => `${val} 万`,
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      valueEnum: {
+        0: { text: '关闭', status: 'Default' },
+        1: { text: '运行中', status: 'Processing' },
+        2: { text: '已上线', status: 'Success' },
+        3: { text: '异常', status: 'Error' },
+      },
+    },
+    {
+      title: '上次调度时间',
+      dataIndex: 'updatedAt',
+      sorter: true,
+      valueType: 'dateTime',
+    },
+    {
+      title: '操作',
+      dataIndex: 'option',
+      valueType: 'option',
+      render: () => (
+        <>
+          <a>配置</a>
+          <Divider type="vertical" />
+          <a href="">订阅警报</a>
+        </>
+      ),
+    },
+  ];
+
+  return (
+    <ProTable<TableListItem>
+      headerTitle="查询表格"
+      actionRef={actionRef}
+      rowKey="key"
+      onChange={(_, _filter, _sorter) => {
+        setSorter(`${_sorter.field}_${_sorter.order}`);
+      }}
+      params={{
+        sorter,
+      }}
+      toolBarRender={(action, { selectedRows }) => [
+        <>
+          <UmiUIFlag />
+        </>,
+        <Button icon="plus" type="primary">
+          新建
+        </Button>,
+        selectedRows && selectedRows.length > 0 && (
+          <Dropdown
+            overlay={
+              <Menu
+                onClick={async e => {
+                  if (e.key === 'remove') {
+                    console.log('remove');
+                    action.reload();
+                  }
+                }}
+                selectedKeys={[]}
+              >
+                <Menu.Item key="remove">批量删除</Menu.Item>
+                <Menu.Item key="approval">批量审批</Menu.Item>
+              </Menu>
+            }
+          >
+            <Button>
+              批量操作 <Icon type="down" />
+            </Button>
+          </Dropdown>
+        ),
+      ]}
+      tableAlertRender={(selectedRowKeys, selectedRows) => (
+        <div>
+          已选择 <a style={{ fontWeight: 600 }}>{selectedRowKeys.length}</a> 项&nbsp;&nbsp;
+          <span>
+            服务调用次数总计 {selectedRows.reduce((pre, item) => pre + item.callNo, 0)} 万
+          </span>
+        </div>
+      )}
+      request={params => queryRule(params)}
+      columns={columns}
+    />
+  );
+};
+
+export default Form.create<FormComponentProps>()(TableList);

+export interface TableListItem {
+  key: number;
+  disabled?: boolean;
+  href: string;
+  avatar: string;
+  name: string;
+  title: string;
+  owner: string;
+  desc: string;
+  callNo: number;
+  status: number;
+  updatedAt: Date;
+  createdAt: Date;
+  progress: number;
+}
+
+export interface TableListParams {
+  sorter?: string;
+  status?: string;
+  name?: string;
+  desc?: string;
+  key?: number;
+  pageSize?: number;
+  currentPage?: number;
+}

 {
   "private": true,
   "scripts": {
-    "start": "UMI_UI=none umi dev",
-    "lint:style": "stylelint \"src/**/*.less\" --syntax less",
+    "build": "node ./_scripts/build.js",
+    "create": "node ./_scripts/create.js",
     "lint": "eslint --ext .js src mock tests && npm run lint:style",
-    "lint:fix": "eslint --fix --ext .js src mock tests && npm run lint:style",
     "lint-staged": "lint-staged",
     "lint-staged:js": "eslint --ext .js",
-    "prettier": "node ./_scripts/prettier.js",
-    "build": "node ./_scripts/build.js",
-    "create": "node ./_scripts/create.js"
+    "lint:fix": "eslint --fix --ext .js src mock tests && npm run lint:style",
+    "lint:style": "stylelint \"src/**/*.less\" --syntax less",
+    "prettier": "prettier -c --write \"**/*\"",
+    "screenshot": "pro screenshot",
+    "start": "umi block_dev"
   },
-  "devDependencies": {
-    "@ant-design/pro-layout": "^4.5.16",
-    "babel-eslint": "^10.0.1",
-    "eslint": "^5.4.0",
-    "eslint-config-airbnb": "^17.0.0",
-    "eslint-config-prettier": "^3.0.1",
-    "eslint-plugin-babel": "^5.3.0",
-    "eslint-plugin-compat": "^2.6.2",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "^6.1.2",
-    "eslint-plugin-markdown": "^1.0.0-beta.6",
-    "eslint-plugin-react": "^7.11.1",
-    "glob": "^7.1.4",
-    "husky": "^1.2.0",
-    "lint-staged": "^8.1.0",
-    "mkdirp": "^0.5.1",
-    "prettier": "1.15.2",
-    "stylelint": "^9.8.0",
-    "stylelint-config-prettier": "^4.0.0",
-    "stylelint-config-standard": "^18.0.0",
-    "umi": "^2.3.0-0",
-    "umi-plugin-block-dev": "^2.0.0",
-    "umi-plugin-react": "^1.3.0-0",
-    "umi-request": "^1.2.6",
-    "yeoman-generator": "^4.1.0"
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm run lint-staged"
+    }
   },
   "lint-staged": {
+    "**/*.less": "stylelint --syntax less",
+    "x/**/*.{js,jsx}": "npm run lint-staged:js",
     "x/**/*.{js,ts,tsx,json,jsx,less}": [
       "node ./_scripts/lint-prettier.js",
       "git add"
-    ],
-    "x/**/*.{js,jsx}": "npm run lint-staged:js",
-    "**/*.less": "stylelint --syntax less"
+    ]
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run lint-staged"
-    }
+  "devDependencies": {
+    "@ant-design/pro-cli": "^1.0.5",
+    "@ant-design/pro-layout": "^4.5.16",
+    "@umijs/fabric": "^2.0.0",
+    "cross-env": "^6.0.0",
+    "eslint": "^6.8.0",
+    "glob": "^7.1.4",
+    "husky": "^4.0.7",
+    "import-sort-cli": "^6.0.0",
+    "import-sort-parser-babylon": "^6.0.0",
+    "import-sort-parser-typescript": "^6.0.0",
+    "import-sort-style-module": "^6.0.0",
+    "lint-staged": "^9.5.0",
+    "mkdirp": "^0.5.1",
+    "prettier": "1.19.1",
+    "stylelint": "^13.0.0",
+    "stylelint-config-prettier": "^8.0.0",
+    "stylelint-config-standard": "^19.0.0",
+    "typescript": "^3.5.1",
+    "umi": "^2.13.0",
+    "umi-plugin-block-dev": "^3.0.1",
+    "umi-plugin-react": "^1.15.0",
+    "umi-request": "^1.2.17",
+    "yeoman-generator": "^4.1.0"
+  },
+  "engines": {
+    "node": "12.x"
   }
 }

@@ -35,7 +35,7 @@ function getRoute() {
   };
 }
 
-export default (api) => {
+export default api => {
   api.modifyRoutes(routes => {
     routes[0].routes = [
       getRoute(),

-
 const PAGE_SIZE = 3;
 let data = [
   {
-    "id": 1,
-    "name": "Leanne Graham",
-    "email": "Sincere@april.biz",
-    "website": "hildegard.org",
+    id: 1,
+    name: 'Leanne Graham',
+    email: 'Sincere@april.biz',
+    website: 'hildegard.org',
   },
   {
-    "id": 2,
-    "name": "Ervin Howell",
-    "email": "Shanna@melissa.tv",
-    "website": "anastasia.net",
+    id: 2,
+    name: 'Ervin Howell',
+    email: 'Shanna@melissa.tv',
+    website: 'anastasia.net',
   },
   {
-    "id": 3,
-    "name": "Clementine Bauch",
-    "email": "Nathan@yesenia.net",
-    "website": "ramiro.info",
+    id: 3,
+    name: 'Clementine Bauch',
+    email: 'Nathan@yesenia.net',
+    website: 'ramiro.info',
   },
   {
-    "id": 4,
-    "name": "Patricia Lebsack",
-    "email": "Julianne.OConner@kory.org",
-    "website": "kale.biz",
+    id: 4,
+    name: 'Patricia Lebsack',
+    email: 'Julianne.OConner@kory.org',
+    website: 'kale.biz',
   },
   {
-    "id": 5,
-    "name": "Chelsey Dietrich",
-    "email": "Lucio_Hettinger@annie.ca",
-    "website": "demarco.info",
+    id: 5,
+    name: 'Chelsey Dietrich',
+    email: 'Lucio_Hettinger@annie.ca',
+    website: 'demarco.info',
   },
   {
-    "id": 6,
-    "name": "Mrs. Dennis Schulist",
-    "email": "Karley_Dach@jasper.info",
-    "website": "ola.org",
+    id: 6,
+    name: 'Mrs. Dennis Schulist',
+    email: 'Karley_Dach@jasper.info',
+    website: 'ola.org',
   },
   {
-    "id": 7,
-    "name": "Kurtis Weissnat",
-    "email": "Telly.Hoeger@billy.biz",
-    "website": "elvis.io",
+    id: 7,
+    name: 'Kurtis Weissnat',
+    email: 'Telly.Hoeger@billy.biz',
+    website: 'elvis.io',
   },
   {
-    "id": 8,
-    "name": "Nicholas Runolfsdottir V",
-    "email": "Sherwood@rosamond.me",
-    "website": "jacynthe.com",
+    id: 8,
+    name: 'Nicholas Runolfsdottir V',
+    email: 'Sherwood@rosamond.me',
+    website: 'jacynthe.com',
   },
   {
-    "id": 9,
-    "name": "Glenna Reichert",
-    "email": "Chaim_McDermott@dana.io",
-    "website": "conrad.com",
+    id: 9,
+    name: 'Glenna Reichert',
+    email: 'Chaim_McDermott@dana.io',
+    website: 'conrad.com',
   },
 ];
 
 function uid(len) {
   len = len || 7;
-  return Math.random().toString(35).substr(2, len);
+  return Math.random()
+    .toString(35)
+    .substr(2, len);
 }
 
 function getData(page) {

@@ -11,7 +11,7 @@ class UserEditModal extends Component {
     };
   }
 
-  showModelHandler = (e) => {
+  showModelHandler = e => {
     if (e) e.stopPropagation();
     this.setState({
       visible: true,
@@ -45,9 +45,7 @@ class UserEditModal extends Component {
 
     return (
       <span>
-        <span onClick={this.showModelHandler}>
-          { children }
-        </span>
+        <span onClick={this.showModelHandler}>{children}</span>
         <Modal
           title="Edit User"
           visible={this.state.visible}
@@ -55,35 +53,20 @@ class UserEditModal extends Component {
           onCancel={this.hideModelHandler}
         >
           <Form horizontal onSubmit={this.okHandler}>
-            <FormItem
-              {...formItemLayout}
-              label="Name"
-            >
-              {
-                getFieldDecorator('name', {
-                  initialValue: name,
-                })(<Input />)
-              }
+            <FormItem {...formItemLayout} label="Name">
+              {getFieldDecorator('name', {
+                initialValue: name,
+              })(<Input />)}
             </FormItem>
-            <FormItem
-              {...formItemLayout}
-              label="Email"
-            >
-              {
-                getFieldDecorator('email', {
-                  initialValue: email,
-                })(<Input />)
-              }
+            <FormItem {...formItemLayout} label="Email">
+              {getFieldDecorator('email', {
+                initialValue: email,
+              })(<Input />)}
             </FormItem>
-            <FormItem
-              {...formItemLayout}
-              label="Website"
-            >
-              {
-                getFieldDecorator('website', {
-                  initialValue: website,
-                })(<Input />)
-              }
+            <FormItem {...formItemLayout} label="Website">
+              {getFieldDecorator('website', {
+                initialValue: website,
+              })(<Input />)}
             </FormItem>
           </Form>
         </Modal>

-
 .normal {
 }
 
 .operation a {
-  margin: 0 .5em;
+  margin: 0 0.5em;
 }
 
 .create {

-
 export const PAGE_SIZE = 3;

@@ -2,8 +2,8 @@
   "compilerOptions": {
     "outDir": "build/dist",
     "module": "esnext",
-    "target": "es2016",
-    "lib": ["es6", "dom"],
+    "target": "esnext",
+    "lib": ["esnext", "dom"],
     "sourceMap": true,
     "baseUrl": ".",
     "jsx": "react",
@@ -15,21 +15,13 @@
     "suppressImplicitAnyIndexErrors": true,
     "noUnusedLocals": true,
     "allowJs": true,
+    "resolveJsonModule": true,
     "experimentalDecorators": true,
+    "strict": true,
     "paths": {
-      "@/*": ["./ant-design-pro/*/src/*"]
+      "@/*": ["./src/*"]
     }
   },
-  "include": ["./ant-design-pro"],
-  "exclude": [
-    "node_modules",
-    "build",
-    "scripts",
-    "acceptance-tests",
-    "webpack",
-    "jest",
-    "src/setupTests.ts",
-    "tslint:latest",
-    "tslint-config-prettier"
-  ]
+  "include": [".", "./typings.d"],
+  "exclude": ["node_modules", "_scripts", "jest", "tslint:latest", "tslint-config-prettier"]
 }

-{
-  "extends": ["tslint:latest", "tslint-react", "tslint-config-prettier"],
-  "rules": {
-    "no-var-requires": false,
-    "no-submodule-imports": false,
-    "object-literal-sort-keys": false,
-    "jsx-no-lambda": false,
-    "no-implicit-dependencies": false,
-    "no-console": false
-  }
-}

+declare module '*.css';
+declare module '*.less';
+declare module '*.scss';
+declare module '*.sass';
+declare module '*.svg';
+declare module '*.png';
+declare module '*.jpg';
+declare module '*.jpeg';
+declare module '*.gif';
+declare module '*.bmp';
+declare module '*.tiff';
+declare module 'mockjs';
+
+declare module '@umijs/ui-flag';