tntd 1.3.64 → 1.4.0

package/es/ArrayInput/README.md

@@ -0,0 +1,129 @@
+## ArrayInput 组件
+
+### 代码演示 1
+
+```jsx
+import React, { useState } from "react";
+import ReactDOM from "react-dom";
+import { Button, Icon, Input, Select } from "antd";
+import { ArrayInput } from "tntd";
+import "antd/dist/antd.css";
+
+const Option = Select.Option;
+
+const Demo = () => {
+    const [value, setValue] = useState([{ type: "input" }]);
+    return (
+        <ArrayInput
+            value={value}
+            onChange={v => {
+                console.log("值修改了", v);
+                setValue(v);
+            }}
+            plusTip="注意要添加哦"
+            deleteTip="注意要删除了哦"
+            require
+        >
+            {(row, index) => {
+                return (
+                    <>
+                        <Select
+                            name="type"
+                            placeholder="联动"
+                            span={4}
+                            onChange={(value, index, changeValue) => {
+                                changeValue(index, "string", undefined);
+                            }}
+                        >
+                            <Option value="input">输入框</Option>
+                            <Option value="select">选择框</Option>
+                        </Select>
+                        {row.type === "input" ? (
+                            <Input name="string" placeholder="输入值" span={6} />
+                        ) : (
+                            <Select name="string" placeholder="下拉值" span={6}>
+                                <Option value="input">下拉值1</Option>
+                                <Option value="select">下拉值2</Option>
+                            </Select>
+                        )}
+                        <Input name="input" placeholder="输入框" />
+                    </>
+                );
+            }}
+        </ArrayInput>
+    );
+};
+
+ReactDOM.render(<Demo />, document.getElementById("root"));
+```
+
+### 代码演示 2
+
+```jsx
+import React, { useState } from "react";
+import ReactDOM from "react-dom";
+import { Button, Icon, Input, Select } from "antd";
+import { ArrayInput } from "tntd";
+import "antd/dist/antd.css";
+
+const Option = Select.Option;
+
+const Demo = () => {
+    return (
+        <ArrayInput mode="table">
+            {(row, index) => {
+                return [
+                    <Select
+                        name="type"
+                        placeholder="联动"
+                        title="输入框类型"
+                        span={4}
+                        onChange={(value, index, changeValue) => {
+                            changeValue(index, "string", undefined);
+                        }}
+                    >
+                        <Option value="input">输入框</Option>
+                        <Option value="select">选择框</Option>
+                    </Select>,
+                    row.type === "input" ? (
+                        <Input name="string" placeholder="输入值" title="输入类型联动" span={6} />
+                    ) : (
+                        <Select name="string" placeholder="输入值" title="输入类型联动" span={6}>
+                            <Option value="input">下拉值1</Option>
+                            <Option value="select">下拉值2</Option>
+                        </Select>
+                    ),
+                    <Input name="input" placeholder="输入框" title="输入框" span={6} />,
+                ];
+            }}
+        </ArrayInput>
+    );
+};
+
+ReactDOM.render(<Demo />, document.getElementById("root"));
+```
+
+### API
+
+#### ArrayInput
+
+| 参数         | type              | description                   | default |
+| :----------- | :---------------- | :---------------------------- | :------ |
+| defaultValue | array             | 默认值                        |         |
+| value        | array             | 可控值                        |         |
+| onChange     | Function          | 值变化时的回调                |         |
+| mode         | string            | 展示形式(list 或者 table)     | list    |
+| gutter       | number/array      | 同 antd 中的 row 使用方法类似 | 10      |
+| require      | boolean           | 是否至少有一列                | false   |
+| children     | Function          | 每行渲染函数                  |         |
+| deleteTip    | string            | 删除按钮说明文案              |         |
+| plusTip      | string            | 添加按钮说明文案              |         |
+| addText      | string\|ReactNode | 添加按钮文本                  | '添加'  |
+
+#### children 中输入控件参数
+
+| 参数  | type   | description                   | default |
+| :---- | :----- | :---------------------------- | :------ |
+| name  | string | 控件的 key(必填)              |         |
+| span  | number | 同 antd 中的 Col 使用方法类似 | 4       |
+| title | string | mode 为 table 的时候必填      |         |

package/es/ArrayInput/icon.js

@@ -0,0 +1,24 @@
+export var plusIcon = React.createElement("svg", {
+  viewBox: "64 64 896 896",
+  focusable: "false",
+  "data-icon": "plus-circle",
+  width: "1em",
+  height: "1em",
+  fill: "currentColor",
+  "aria-hidden": "true"
+}, React.createElement("path", {
+  d: "M696 480H544V328c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v152H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h152v152c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V544h152c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z"
+}), React.createElement("path", {
+  d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+}));
+export var deleteIcon = React.createElement("svg", {
+  viewBox: "64 64 896 896",
+  focusable: "false",
+  "data-icon": "delete",
+  width: "1em",
+  height: "1em",
+  fill: "currentColor",
+  "aria-hidden": "true"
+}, React.createElement("path", {
+  d: "M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
+}));

package/es/ArrayInput/index.js

@@ -0,0 +1,282 @@
+import "antd/es/row/style";
+import _Row from "antd/es/row";
+import "antd/es/tooltip/style";
+import _Tooltip from "antd/es/tooltip";
+import "antd/es/col/style";
+import _Col from "antd/es/col";
+import "antd/es/table/style";
+import _Table from "antd/es/table";
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
+
+function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
+
+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; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { useEffect, useState, useCallback, isValidElement } from "react";
+import { isFunction, isArray, sumBy, sum, set, get } from "lodash";
+import { plusIcon, deleteIcon } from "./icon";
+import "./index.less";
+var Column = _Table.Column;
+
+var getWidth = function getWidth(span) {
+  return 1000 / span;
+};
+
+export default function ArrayInput(_ref) {
+  var children = _ref.children,
+      defaultValue = _ref.defaultValue,
+      value = _ref.value,
+      onChange = _ref.onChange,
+      _ref$mode = _ref.mode,
+      mode = _ref$mode === void 0 ? "list" : _ref$mode,
+      _ref$gutter = _ref.gutter,
+      gutter = _ref$gutter === void 0 ? 10 : _ref$gutter,
+      _ref$require = _ref.require,
+      require = _ref$require === void 0 ? false : _ref$require,
+      _ref$deleteTip = _ref.deleteTip,
+      deleteTip = _ref$deleteTip === void 0 ? "" : _ref$deleteTip,
+      _ref$plusTip = _ref.plusTip,
+      plusTip = _ref$plusTip === void 0 ? "" : _ref$plusTip,
+      _ref$addText = _ref.addText,
+      addText = _ref$addText === void 0 ? "添加" : _ref$addText;
+
+  if (!isFunction(children)) {
+    throw new Error("ArrayInput的children必须是函数");
+  }
+
+  var _useState = useState(value || defaultValue),
+      _useState2 = _slicedToArray(_useState, 2),
+      _value = _useState2[0],
+      setValue = _useState2[1];
+
+  useEffect(function () {
+    setValue(value);
+  }, [value]);
+
+  var _onChange = useCallback(function (value) {
+    if (onChange) {
+      onChange(value);
+    } else {
+      setValue(value);
+    }
+  }, []);
+
+  var inValue = _value || [];
+
+  if (require && inValue.length === 0) {
+    inValue = [{}];
+  }
+
+  var changeValue = function changeValue(index, name, value) {
+    inValue[index] = _objectSpread({}, inValue[index], _defineProperty({}, name, value));
+
+    _onChange(_toConsumableArray(inValue));
+  };
+
+  var onAdd = function onAdd(index) {
+    if (index === undefined) {
+      _onChange([].concat(_toConsumableArray(inValue), [{}]));
+    } else {
+      inValue.splice(index + 1, 0, {});
+
+      _onChange(_toConsumableArray(inValue));
+    }
+  };
+
+  var onDelete = function onDelete(i) {
+    inValue.splice(i, 1);
+
+    _onChange(_toConsumableArray(inValue));
+  };
+
+  if (mode === "list") {
+    return React.createElement("div", {
+      className: "tntd-array-input"
+    }, inValue.map(function (item, index) {
+      var fields = children(item, index);
+
+      if (!isArray(fields)) {
+        fields = get(fields, "props.children", []);
+      }
+
+      return React.createElement(_Row, {
+        gutter: gutter,
+        key: index,
+        className: "tntd-array-input-item"
+      }, fields.map(function (field, i) {
+        if (!isValidElement(field)) {
+          return field ? React.createElement(_Col, {
+            span: 4,
+            key: i
+          }, field) : "";
+        }
+
+        var _ref2 = field == null ? void 0 : field.props,
+            name = _ref2.name,
+            _ref2$span = _ref2.span,
+            span = _ref2$span === void 0 ? 4 : _ref2$span,
+            fieldChange = _ref2.onChange,
+            other = _objectWithoutProperties(_ref2, ["name", "span", "onChange"]);
+
+        return React.createElement(_Col, {
+          span: span,
+          key: i
+        }, React.cloneElement(field, _objectSpread({
+          value: item[name] || undefined,
+          onChange: function onChange(e) {
+            fieldChange && fieldChange(e, index, changeValue);
+            var newValue = e.target ? e.target.value : e;
+            changeValue(index, name, newValue);
+          }
+        }, other)));
+      }), React.createElement(_Col, {
+        span: 24 - sum(fields.map(function (f) {
+          return get(f, "props.span", 4);
+        })) % 24
+      }, React.createElement("span", {
+        className: "tntd-array-input-action"
+      }, plusTip ? React.createElement(_Tooltip, {
+        title: plusTip,
+        placement: "left"
+      }, React.createElement("span", {
+        className: "mr10",
+        onClick: function onClick() {
+          return onAdd(index);
+        }
+      }, plusIcon)) : React.createElement("span", {
+        className: "mr10",
+        onClick: function onClick() {
+          return onAdd(index);
+        }
+      }, plusIcon), deleteTip ? React.createElement(_Tooltip, {
+        title: deleteTip,
+        placement: "right"
+      }, React.createElement("span", {
+        onClick: function onClick() {
+          return onDelete(index);
+        }
+      }, deleteIcon)) : React.createElement("span", {
+        onClick: function onClick() {
+          return onDelete(index);
+        }
+      }, deleteIcon))));
+    }), inValue.length === 0 && React.createElement("a", {
+      onClick: function onClick() {
+        return onAdd();
+      }
+    }, addText));
+  } else {
+    var fields = children({}, 0);
+
+    if (!isArray(fields)) {
+      fields = get(fields, "props.children", []);
+    }
+
+    var dataSource = inValue.map(function (value, index) {
+      var fields = children(value, index);
+      var back = {};
+      fields.forEach(function (field) {
+        var _field$props;
+
+        var name = field == null ? void 0 : (_field$props = field.props) == null ? void 0 : _field$props.name;
+        name && set(back, name, field);
+      });
+      return back;
+    });
+    return React.createElement("div", {
+      className: "tntd-array-input"
+    }, React.createElement(_Table, {
+      dataSource: dataSource,
+      pagination: false,
+      locale: {
+        emptyText: React.createElement("a", {
+          onClick: function onClick() {
+            return onAdd();
+          }
+        }, addText)
+      }
+    }, fields.map(function (field) {
+      var _ref3 = (field == null ? void 0 : field.props) || {},
+          name = _ref3.name,
+          span = _ref3.span,
+          title = _ref3.title;
+
+      return React.createElement(Column, {
+        key: name,
+        dataIndex: name,
+        title: title,
+        width: getWidth(span || 24 / (fields.length + 1)),
+        render: function render(field, row, index) {
+          if (!isValidElement(field)) {
+            return field;
+          }
+
+          var fieldChange = field.props.onChange;
+          return React.cloneElement(field, {
+            value: inValue[index][name] || undefined,
+            onChange: function onChange(e) {
+              fieldChange && fieldChange(e, index, changeValue);
+              var newValue = e.target ? e.target.value : e;
+              changeValue(index, name, newValue);
+            }
+          });
+        }
+      });
+    }), React.createElement(Column, {
+      key: "action",
+      dataIndex: "action",
+      title: "\u64CD\u4F5C",
+      width: getWidth(24 - sumBy(fields, "props.span") % 24),
+      render: function render(text, row, index) {
+        return React.createElement("span", {
+          className: "tntd-array-input-action"
+        }, plusTip ? React.createElement(_Tooltip, {
+          title: plusTip,
+          placement: "left"
+        }, React.createElement("span", {
+          className: "mr10",
+          onClick: function onClick() {
+            return onAdd(index);
+          }
+        }, plusIcon)) : React.createElement("span", {
+          className: "mr10",
+          onClick: function onClick() {
+            return onAdd(index);
+          }
+        }, plusIcon), deleteTip ? React.createElement(_Tooltip, {
+          title: deleteTip,
+          placement: "right"
+        }, React.createElement("span", {
+          onClick: function onClick() {
+            return onDelete(index);
+          }
+        }, deleteIcon)) : React.createElement("span", {
+          onClick: function onClick() {
+            return onDelete(index);
+          }
+        }, deleteIcon));
+      }
+    })));
+  }
+}

package/es/ArrayInput/index.less

@@ -0,0 +1,20 @@
+.tntd-array-input {
+    &-item {
+        margin-bottom: 10px;
+    }
+    .ant-col,
+    .ant-table-row {
+        .ant-select {
+            width: 100%;
+        }
+    }
+    .mr10 {
+        margin-right: 10px;
+    }
+    &-action {
+        line-height: 28px;
+        > span {
+            cursor: pointer;
+        }
+    }
+}

package/es/AuthContext.js

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+export default createContext(function () {
+  return true;
+});

package/es/Columns/README.md

@@ -0,0 +1,149 @@
+## Columns组件
+### 代码演示
+```jsx
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
+import { createGlobalStyle } from 'styled-components';
+import { Button, Icon } from 'antd';
+import { Columns } from 'tntd';
+import 'antd/dist/antd.css';
+
+
+const { Item } = Columns;
+
+const GlobalStyle = createGlobalStyle`
+  .site-body {
+    .ichYgh {
+        padding: 0;
+        overflow: visible;
+    }
+}
+`;
+
+const Demo = props => {
+	const [activeTabKey1, setActiveTabKey1] = useState('3');
+
+    const tabList = [
+        {
+            key: "1",
+            tab: "tab1"
+        },
+        {
+            key: "2",
+            tab: "tab2"
+        }
+    ];
+    const contentList = {
+        "1": <p>content1</p>,
+        "2": <p>content2</p>
+    };
+    const tabList1 = [
+        {
+            key: "3",
+            tab: "tab3"
+        },
+        {
+            key: "4",
+            tab: "tab4"
+        }
+    ];
+    const contentList1 = {
+        "3": <p>content3</p>,
+        "4": <p>content4</p>
+    };
+    return (
+        <>
+           <Columns gutter={0} height={500}>
+                <Item
+                    title="项目列表"
+                    span={5}
+                    hoverable
+                    style={{ color: "#bbb" }}
+                    cover={<span>123</span>}
+                    loading={true}
+                >
+                    内容
+                </Item>
+                <Item
+                    title="项目详情"
+                    extra={
+                        <Button
+                            size="small"
+                            type="primary"
+                            icon="more"
+                        >
+                            更多
+                        </Button>
+                    }
+                    span={14}
+                >
+                    内容
+                </Item>
+                <Item
+                    title="项目配置"
+                    span={5}
+                >
+                    我的column
+                    我的column
+                    我的column
+                    我的column 我的column我的column 我的column 我的column 我的column 我的column我的column 我的column 我的column 我的column 我的column我的column 我的column 我的column 我的column 我的column我的column 我的column 我的column 我的column 我的column我的column 我的column 我的column 我的column 我的column我的column 我的column 我的column 我的column 我的column我的column 我的column 我的column 我的column 我的column我的column 我的column 我的column 我的column 我的column我的column 我的column 我的column 我的column 我的column我的column 我的column 我的column 我的column 我的column我的column 我的column 我的column 我的column 我的column我的column 我的column 我的column 我的column 我的column我的column 我的column 我的column 我的column 我的column我的
+                </Item>
+            </Columns>
+            <Columns height={500} gutter={[20, 24]}>
+                <Item
+                    bordered={true}
+                    span={12}
+                    tabList={tabList1}
+                    activeTabKey={activeTabKey1}
+                    onTabChange={key => setActiveTabKey1(key)}
+                    tabBarExtraContent={(
+                        <Button
+                            size="small"
+                            type="primary"
+                            icon="search"
+                        >搜索</Button>
+                    )}
+                >
+                    我是一段很长很长很长段文本哦我是一段很长很长很长段文本哦我是一段很长很长很长段文本哦我是一段很长很长很长段文本哦我是一段很长很长很长段文本哦我是一段很长很长很长段文本哦我是一段很长很长很长段文本哦我是一段很长很长很长段文本哦！
+                        {contentList1[activeTabKey1]}
+                </Item>
+                <Item
+                    title="测试5"
+                    span={12}
+                    bordered={true}
+                >
+                    我是一段很长很长很长段文本哦我是一段很长很长很长段文本哦我是
+                </Item>
+            </Columns>
+        </>
+    );
+};
+
+
+ReactDOM.render(
+    <Demo />,
+    document.getElementById('root')
+);
+```
+
+### API
+#### Columns
+
+| 参数                | type                                 | description                                     | default                 |
+| :------------------ | :----------------------------------- | :---------------------------------------------- | :---------------------- |
+| gutter              | number/array               | 同antd中的row使用方法类似                          | 0                       |
+| height             | int                                  | 列的高度                        | -                       |
+
+
+#### Columns.Item
+
+| 参数                | type                                 | description                                     | default                 |
+| :------------------ | :----------------------------------- | :---------------------------------------------- | :---------------------- |
+| span                | int                                  | 与antd中col的span的使用方法相同                 | 24                       |
+| extra               | string/ReactNode                     | title 右上角的操作区域                          | -                       |
+| title               | string/ReactNode                     | column 标题                                   | -                       |
+| tabList             | Array<{key: string, tab: ReactNode}> | 标题列表                                        | -                       |
+| activeTabKey        | string                               | 当前激活页签的 key                              | -                       |
+| onTabChange         | (key) => void                        | 页签切换的回调                                  | -                       |
+| defaultActiveTabKey | string                               | 初始化选中页签的 key，如果没有设置 activeTabKey | 第一个页签              |
+| tabType           | string                        | average-根据数量等分， default-默认                             | default        |