tntd 1.3.64 → 1.4.0

package/es/QueryForm/README.md

@@ -0,0 +1,512 @@
+,## QueryForm
+查询表单
+
+
+### 安装
+```
+npm install tntd --save
+```
+
+### 代码演示
+
+### 展开/收起查询条件
+```jsx
+import React, { useState, Fragment } from 'react';
+import ReactDOM from 'react-dom';
+import { Button, Popconfirm, Divider, ButtonGroup, TreeSelect, Cascader, Checkbox  } from 'antd';
+import { QueryForm } from 'tntd';
+import 'antd/dist/antd.css';
+
+const { Field } = QueryForm;
+const ExtraActions = (
+    <Button.Group> 
+        <Button icon="cloud-upload" />
+        <Button icon="cloud-download" />
+        <Button icon="setting" />
+    </Button.Group>
+);
+
+ReactDOM.render(
+    <QueryForm
+        extraActions={ExtraActions}
+        initialValues={{
+            name: 'zhangsan',
+            status: 'initial'
+        }}
+        onChange={console.log}
+        onSearch={console.log}
+        onReset={console.log}
+        onToggleExpand={console.log}
+    >
+        <Field
+            name="tree"
+            component={TreeSelect}
+            props={{
+                placeholder: "树形选择",
+                dropdownStyle:{
+                    maxHeight: 400, 
+                    overflow: 'auto'
+                },
+                treeData: [
+                    {
+                        title: 'Node1',
+                        value: '0-0',
+                        key: '0-0',
+                        children: [
+                        {
+                            title: 'Child Node1',
+                            value: '0-0-1',
+                            key: '0-0-1',
+                        },
+                        {
+                            title: 'Child Node2',
+                            value: '0-0-2',
+                            key: '0-0-2',
+                        },
+                        ],
+                    },
+                    {
+                        title: 'Node2',
+                        value: '0-1',
+                        key: '0-1',
+                    }
+                ]
+            }}
+        />
+        <Field
+            type="input"
+            name="name"
+            props={{
+                placeholder: "名称"
+            }}
+        />
+        <Field
+            type="select"
+            name="status"
+            props={{
+                placeholder: '状态',
+                options: [
+                    { label: '初始化', value: 'initial' },
+                    { label: '运行中', value: 'running' },
+                    { label: '成功', value: 'success', disabled: true },
+                    { label: '失败', value: 'fail' }
+                ]
+            }}
+        />
+        <Field
+            type="select"
+            name="select1"
+            props={{
+                placeholder: '状态',
+                loadData: () => new Promise(resolve => resolve(['初始化', '运行中', '成功', '失败']))
+            }}
+        />
+        <Field
+            type="input"
+            name="name2"
+            props={{ placeholder: "名称" }}
+        />
+        <Field 
+            type="search"
+            name="search"
+            props={{
+                placeholder: '搜索'
+            }}
+        />
+        <Field
+            type="select"
+            name="select2"
+            props={{
+                placeholder: '状态',
+                options: ['初始化', '运行中', '成功', '失败']
+            }}
+        />
+        <Field type="date" name="date3" />
+        <Field type="input" name="field1" />
+        <Field type="input" name="field2" />
+        <Field type="dateRange" name="date2" />
+        <Field type="checkbox" name="checkbox" />
+    </QueryForm>,
+    document.getElementById('root')
+)
+```
+
+### 类组件示例
+```jsx
+import React from 'react';
+import { Button } from 'antd';
+import { QueryForm } from 'tntd';
+
+const { Field, createForm } = QueryForm;
+
+class QueryFormDemo extends React.Component {
+    form = createForm();
+
+    render() {
+        return (
+            <QueryForm
+                form={this.form}
+                initialValues={{ name: 'Hello', job: 'Developer', status: 'init' }}
+                extraActions={(
+                    <Button.Group>
+                        <Button onClick={() => this.form.setValues({ name: 'World', status: 'running' })}>设置值</Button>
+                        <Button onClick={() => this.form.setValue('job', 'Designer')}>设置单个值</Button>
+                        <Button onClick={() => alert(JSON.stringify(this.form.getValues(), null, 4))}>获取值</Button>
+                    </Button.Group>
+                )}
+            >
+                <Field type="input" name="name" />
+                <Field type="input" name="job" />
+                <Field type="select" name="status" props={{ options: ['init', 'running', 'error', 'success']}} />
+            </QueryForm>
+        );
+    }
+
+    componentDidMount() {
+        console.log('form:', this.form);
+    }
+}
+
+ReactDOM.render(
+    <QueryFormDemo />,
+    document.getElementById('root')
+)
+```
+
+
+### 抽屉显示更多条件
+```jsx
+import React, { useState, Fragment } from 'react';
+import ReactDOM from 'react-dom';
+import { Button, Popconfirm, Divider, ButtonGroup, TreeSelect, Cascader, Icon } from 'antd';
+import { QueryForm } from 'tntd';
+import { createGlobalStyle } from 'styled-components';
+import 'antd/dist/antd.css';
+
+const GlobalStyle = createGlobalStyle`
+  .site-body {
+    .ichYgh {
+        overflow: visible;
+    }
+}
+`;
+
+const { useForm, Field } = QueryForm;
+
+const QueryFormDemo = () => {
+    const [form] = useForm();
+
+    const ExtraActions = (
+        <Button.Group> 
+            <Button icon="cloud-upload" onClick={() => form.setValues({ tree: '0-0', name: '张三', obj: { id: '1000' }})}/>
+            <Button icon="cloud-upload" onClick={() => form.setValue('name', '')} />
+            <Button icon="cloud-download" onClick={() => form.resetValues()}/>
+            <Button icon="setting" onClick={() => console.log('form values:', form.getValues())}/>
+        </Button.Group>
+    );
+
+    return (
+        <QueryForm
+            form={form}
+            extraActions={ExtraActions}
+            // 设置showFieldCount时，则使用抽屉显示更多否则使用展开/收起交互
+            showFieldCount={2}
+            initialValues={{
+                name: 'Jim Green',
+                status: 'initial',
+                obj: {
+                    name: 'zhangsan'
+                }
+            }}
+            onChange={console.log}
+            onSearch={console.log}
+            onReset={console.log}
+            onToggleExpand={console.log}
+        >
+            <Field
+                type="selectInput"
+                name="obj"
+                props={{
+                    placeholder: "名称",
+                    options: [
+                        { label: '名称', value: 'name' },
+                        { label: 'ID', value: 'id' }
+                    ],
+                    addonBeforeStyle: { width: '100px' }
+                }}
+            />
+            <Field
+                name="tree"
+                component={TreeSelect}
+                props={{
+                    placeholder: "名称222",
+                    dropdownStyle:{
+                        maxHeight: 400, 
+                        overflow: 'auto'
+                    },
+                    treeData: [
+                        {
+                            title: 'Node1',
+                            value: '0-0',
+                            key: '0-0',
+                            children: [
+                            {
+                                title: 'Child Node1',
+                                value: '0-0-1',
+                                key: '0-0-1',
+                            },
+                            {
+                                title: 'Child Node2',
+                                value: '0-0-2',
+                                key: '0-0-2',
+                            },
+                            ],
+                        },
+                        {
+                            title: 'Node2',
+                            value: '0-1',
+                            key: '0-1',
+                        }
+                    ]
+                }}
+            />
+            <Field
+                type="input"
+                name="name"
+                props={{
+                    placeholder: "名称"
+                }}
+            />
+            <Field
+                name="cascader"
+                component={Cascader}
+                props={{
+                    options: [
+                        {
+                            value: 'zhejiang',
+                            label: 'Zhejiang',
+                            children: [
+                                {
+                                    value: 'hangzhou',
+                                    label: 'Hangzhou',
+                                    children: [
+                                        {
+                                            value: 'xihu',
+                                            label: 'West Lake'
+                                        }
+                                    ]
+                                }
+                            ]
+                        }
+                    ]
+                }}
+            />
+            <Field 
+                type="date"
+                name="date1"
+            />
+            <Field
+                title="状态"
+                type="select"
+                name="status2"
+                props={{
+                    placeholder: '状态',
+                    options: [
+                        { label: '初始化', value: 'initial' },
+                        { label: '运行中', value: 'running' },
+                        { label: '成功', value: 'success', disabled: true },
+                        { label: '失败', value: 'fail' }
+                    ]
+                }}
+            />
+            <Field title="日期" type="date" name="date" />
+            <Field
+                title="日期范围"
+                type="dateRange"
+                name="date2"
+            />
+            <Field
+                title="状态"
+                type="select"
+                name="select1"
+                props={{
+                    placeholder: '状态',
+                    fieldNames: {
+                        label: 'displayName',
+                        value: 'name'
+                    },
+                    loadData: () => new Promise(
+                        resolve => resolve([
+                            { name: 'success', displayName: '成功' },
+                            { name: 'fail', displayName: '失败' }
+                        ])
+                    )
+                }}
+            />
+            <Field
+                title="名称"
+                type="input"
+                name="name2"
+                props={{ placeholder: "名称" }}
+            />
+            <Field
+                title="状态2"
+                type="select"
+                name="select2"
+                props={{
+                    placeholder: '状态',
+                    options: ['初始化', '运行中', '成功', '失败']
+                }}
+            />
+        </QueryForm>
+    );
+};
+
+ReactDOM.render(
+    <Fragment>
+        <QueryFormDemo />
+        <GlobalStyle />
+    </Fragment>,
+    document.getElementById('root')
+)
+```
+
+### API
+#### QueryForm
+| 属性名称       | 属性说明                                                  | 类型      | 默认值 | 是否必须 |
+| :------------- | :-------------------------------------------------------- | :-------- | :----- | :------- |
+| initialValues  | 表单初始值对象                                           | object | 无     | 否       |
+| showFieldCount | 显示在外面的表单数量(尽在“更多条件”在Drawer交互时使用)    | number    | 无     | 否       |
+| showExpand | 展开/收起功能配置，默认开启    | boolean    | true     | 否       |
+| showSearch | 搜索按钮显示配置，默认开启    | boolean    | true     | 否       |
+| showReset | 重置按钮显示配置，默认开启    | boolean    | true     | 否       |
+| drawerProps    | Drawer props（参见antd，设置样式宽度时可用）              | Object    | 无     | 否       |
+| extraActions  | 额外操作                                                  | ReactNode | 无     | 否       |
+| renderActions  | 表单操作, 自定义操作按钮，默认是查询、重置                | Function  | 无     | 否       |
+| onChange       | 表单变化事件，onChange(values, { name, value, preValue }) | Function  | 无     | 否       |
+| onSearch | 搜索事件，onSearch(values) | Function  | 无     | 否       |
+| onReset       | 重置表单事件，onReset(values) | Function  | 无     | 否       |
+
+#### Field
+| 属性名称  | 属性说明                                                       | 类型   | 默认值 | 是否必须 |
+| :-------- | :------------------------------------------------------------- | :----- | :----- | :------- |
+| name      | 表单项名，保证唯一                                             | string | 无     | 是       |
+| title     | 表单label                                                      | string | 无     | 否       |
+| type      | 表单类型input、search, number、select、selectInput、 date、 dateRange       | 无     | 否     |
+| component      | 表单组件，如果内置的type表单组件不满足需求的话，可以直接传ReactNode类型的表单组件，其优先级高于type,如 antd TreeSelect、Cascader等，也可以完全自定义表单组件       | 无     | 否     |
+| props     | 表单元素属性，参照antd, Input, InputNumber, Select, DatePicker | Object | 无     | 否       |
+| className | 添加样式class                                                  | string | 无     | 否       |
+
+type="select"， props 扩展了 options, fieldNames, loadData用法如下：
+```js
+<Field
+    type="select"
+    name="status"
+    props={{
+        options: [
+            { name: 'success', displayName: '成功' },
+            { name: 'fail', displayName: '失败' }
+        ],
+        fieldNames: {
+            label: 'displayName',
+            value: 'name'
+        }
+    }}
+/>
+```
+loadData 是一个function 返回一个promise, 用于异步加载options的场景
+```js
+<Field
+    type="select"
+    name="status"
+    props={{
+        loadData: () => new Promise(
+            resolve => resolve([
+                { name: 'success', displayName: '成功' },
+                { name: 'fail', displayName: '失败' }
+            ])
+        ),
+        fieldNames: {
+            label: 'displayName',
+            value: 'name'
+        }
+    }}
+/>
+```
+
+type="selectInput", 扩展了addonBeforeStyle属性，用来设置前面Select的样式
+```js
+<Field
+    type="selectInput"
+    props={{
+        addonBeforeStyle: {
+            width: '160px'
+        }
+    }}
+/>
+```
+#### form
+form是QueryForm组件数据管理的对象，里面包含了数据相关的setter 和 getter方法。
+```js
+{
+    // 设置form表单值
+    setValues(values: object): void,
+
+    // 设置单个field表单项值
+    setValue(name: string, value): void,
+
+    // 重置form表单值
+    resetValues(): void,
+
+    // 获取form表单值
+    getValues(): object,
+
+    // 获取单个field值
+    getValue(name): any
+}
+```
+
+#### useForm
+hooks函数组件中使用,返回一个[form]用法如下：
+```js
+import { QueryForm } from 'tntd';
+
+const { Field, useForm } = QueryForm;
+
+const Demo = () => {
+    const [form] = useForm();
+
+    return (
+        <>
+            <Button onClick={() => form.setValues({ name: 'Hello World' })}>设置值</Button>
+            <QueryForm form={form}>
+                <Field
+                    type="input"
+                    name="name"
+                />
+            </QueryForm>
+        <>
+    );
+};
+```
+
+#### createForm
+主要用在class 组件的场景,用法如下：
+```js
+import React from 'react';
+import { QueryForm } from 'tntd';
+
+const { Field, createForm } = QueryForm;
+
+class Demo extends React.Component {
+    form = createForm();
+
+    render() {
+        return (
+            <QueryForm form={this.form}>
+                <Field type="input" name="name" />
+            </QueryForm>
+        )
+    }
+}
+```

package/es/QueryForm/createActions.js

@@ -0,0 +1,53 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import EventEmitter from 'eventemitter3';
+import { get, set } from 'lodash';
+export default (function () {
+  var eventEmitter = new EventEmitter();
+  var data = {
+    initialValues: {},
+    values: {}
+  };
+  return {
+    setData: function setData(key, value) {
+      set(data, key, value);
+    },
+    getData: function getData(key) {
+      get(data, key);
+    },
+    setValues: function setValues(values) {
+      data.values = values;
+      eventEmitter.emit('setValues', values);
+    },
+    getValues: function getValues() {
+      return data.values;
+    },
+    resetValues: function resetValues() {
+      data.values = _objectSpread({}, data.initialValues);
+      eventEmitter.emit('setValues', data.values);
+    },
+    setValue: function setValue(name, value) {
+      data.values = data.values || {};
+      data.values[name] = value;
+      eventEmitter.emit('setValue', name, value);
+    },
+    getValue: function getValue(name) {
+      var _data$values;
+
+      return (_data$values = data.values) == null ? void 0 : _data$values[name];
+    },
+    on: function on(eventName, callback) {
+      eventEmitter.on(eventName, callback);
+    },
+    emit: function emit() {
+      eventEmitter.emit.apply(eventEmitter, arguments);
+    },
+    off: function off() {
+      eventEmitter.removeListener.apply(eventEmitter, arguments);
+    }
+  };
+});