tntd 1.3.66 → 1.4.0

package/es/Table/README.md

@@ -0,0 +1,109 @@
+## ResizableTable
+可伸缩列表格
+
+
+### 安装
+```
+npm install tntd --save
+```
+
+### 代码演示
+```jsx
+import React, { useState, Fragment } from 'react';
+import ReactDOM from 'react-dom';
+import { Switch } from 'antd';
+import { Table } from 'tntd';
+import 'antd/dist/antd.css';
+
+const TableDemo = () => {
+    const [resizable, setResizable] = useState(true);
+
+    return (
+        <>
+            <Switch checkedChildren="可伸缩列" unCheckedChildren="可伸缩列" checked={resizable} onChange={checked => setResizable(checked)} />
+            <Table
+                resizable={resizable}
+                rowKey="id"
+                bordered
+                columns={[
+                    { dataIndex: 'id', title: 'ID', width: 200 },
+                    { dataIndex: 'name', title: '名称', width: 120 },
+                    { dataIndex: 'job', title: '职业' },
+                    { dataIndex: 'operation', title: '操作', width: 80 }
+                ]}
+                dataSource={[
+                    { id: 1, name: '张三' },
+                    { id: 2, name: '李四' }
+                ]}
+            />
+        </>
+    )
+};
+
+ReactDOM.render(
+    <TableDemo />,
+    document.getElementById('root')
+)
+```
+
+### Fixed column
+```jsx
+import React, { useState, Fragment, useRef, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import { Switch } from 'antd';
+import { Table } from 'tntd';
+import 'antd/dist/antd.css';
+
+const TableDemo = () => {
+    const [resizable, setResizable] = useState(true);
+    const handleRef = (component) => {
+        console.log('handleRef:', component);
+    };
+    const tableRef = useRef();
+    useEffect(() => {
+        console.log('tableRef:', tableRef);
+        setTimeout(() => {
+            console.log(tableRef)
+        })
+    }, []);
+
+    return (
+        <>
+            <Switch checkedChildren="可伸缩列" unCheckedChildren="可伸缩列" checked={resizable} onChange={checked => setResizable(checked)} />
+            <Table
+                resizable={resizable}
+                rowKey="id"
+                bordered
+                ref={tableRef || handleRef}
+                columns={[
+                    { dataIndex: 'id', title: 'ID', width: 200, fixed: 'left' },
+                    { dataIndex: 'name', title: '名称', width: 120 },
+                    { dataIndex: 'name1', title: '名称1', width: 200 },
+                    { dataIndex: 'name2', title: '名称2', width: 200 },
+                    { dataIndex: 'name3', title: '名称3', width: 200 },
+                    { dataIndex: 'name4', title: '名称4', width: 200 },
+                    { dataIndex: 'name5', title: '名称5', width: 200 },
+                    { dataIndex: 'name6', title: '名称6', width: 200 },
+                    { dataIndex: 'job', title: '职业', width: 200 },
+                    { dataIndex: 'operation', title: '操作', width: 80, fixed: 'right' }
+                ]}
+                dataSource={[
+                    { id: 1, name: '张三' },
+                    { id: 2, name: '李四' }
+                ]}
+                scroll={{ x: window.innerWidth - 260 }}
+            />
+        </>
+    )
+};
+
+ReactDOM.render(
+    <TableDemo />,
+    document.getElementById('root')
+)
+```
+
+### API
+#### Table
+同antd Table
+

package/es/Table/ResizableTable/index.js

@@ -0,0 +1,110 @@
+import "antd/es/table/style";
+import _Table from "antd/es/table";
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+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; }
+
+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 _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; }
+
+import { useState, useEffect, forwardRef, useRef } from 'react';
+import cn from 'classnames';
+import { throttle } from 'lodash';
+import { Resizable } from 'react-resizable';
+import './index.less';
+
+var ResizableTitle = function ResizableTitle(props) {
+  var onResize = props.onResize,
+      width = props.width,
+      restProps = _objectWithoutProperties(props, ["onResize", "width"]);
+
+  if (!width) {
+    return React.createElement("th", restProps);
+  }
+
+  return React.createElement(Resizable, {
+    width: width,
+    height: 0,
+    handle: React.createElement("span", {
+      className: "tnt-resizable-table-handle",
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      }
+    }),
+    onResize: onResize,
+    draggableOpts: {
+      enableUserSelectHack: false
+    }
+  }, React.createElement("th", restProps));
+};
+
+export default forwardRef(function (props, ref) {
+  var buildColumns = function buildColumns(columns) {
+    return columns.map(function (column, index) {
+      return _objectSpread({}, column, {
+        onHeaderCell: function onHeaderCell(column) {
+          return {
+            width: column.width,
+            onResize: handleResize(index)
+          };
+        }
+      });
+    });
+  };
+
+  var _useState = useState(buildColumns(props.columns)),
+      _useState2 = _slicedToArray(_useState, 2),
+      columns = _useState2[0],
+      setColumns = _useState2[1];
+
+  var dataRef = useRef({
+    columns: columns
+  });
+
+  var handleResize = function handleResize(index) {
+    return throttle(function (e, _ref) {
+      var size = _ref.size;
+      var columns = dataRef.current.columns;
+      setColumns(columns.map(function (column, idx) {
+        if (idx === index) {
+          return _objectSpread({}, column, {
+            width: size.width
+          });
+        }
+
+        return column;
+      }));
+    }, 25);
+  };
+
+  useEffect(function () {
+    setColumns(buildColumns(props.columns));
+  }, [props.columns]);
+  useEffect(function () {
+    dataRef.current.columns = columns;
+  }, [columns]);
+  return React.createElement(_Table, _extends({}, props, {
+    className: cn('tnt-resizable-table', _defineProperty({}, props.className, props.className)),
+    components: {
+      header: {
+        cell: ResizableTitle
+      }
+    },
+    columns: columns,
+    ref: ref
+  }));
+});

package/es/Table/ResizableTable/index.less

@@ -0,0 +1,36 @@
+.tnt-resizable-table {
+    .react-resizable {
+        position: relative;
+        background-clip: padding-box;
+    }
+
+    &-handle {
+        position: absolute;
+        width: 10px;
+        height: 100%;
+        bottom: 0;
+        right: -5px;
+        cursor: col-resize;
+        z-index: 1;
+    }
+
+    th:last-of-type{
+        .react-resizable-handle {
+            right: 0;
+        }
+    }
+    // tbody > tr > td > *,
+    .ant-table-column-title{
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+    .ant-table-column-sorters {
+        display: inline-flex;
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        align-items: center;
+    }
+}

package/es/Table/index.js

@@ -0,0 +1,35 @@
+import "antd/es/table/style";
+import _Table from "antd/es/table";
+
+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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+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; }
+
+import React, { forwardRef } from 'react';
+import cn from 'classnames';
+import ResizableTable from './ResizableTable'; // const ResizableTable = React.lazy(() => import('./ResizableTable'));
+
+export default forwardRef(function (_ref, ref) {
+  var _ref$resizable = _ref.resizable,
+      resizable = _ref$resizable === void 0 ? false : _ref$resizable,
+      props = _objectWithoutProperties(_ref, ["resizable"]);
+
+  if (resizable) {
+    return (// <React.Suspense>
+      React.createElement(ResizableTable, _extends({}, props, {
+        ref: ref
+      })) // </React.Suspense>
+
+    );
+  }
+
+  return React.createElement(_Table, _extends({
+    className: cn('tnt-table', _defineProperty({}, props.className, props.className))
+  }, props, {
+    ref: ref
+  }));
+});

package/es/Title/README.md

@@ -0,0 +1,106 @@
+## Title组件
+### 代码演示
+```jsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Button, Table } from 'antd';
+import { Title } from 'tntd';
+import 'antd/dist/antd.css';
+
+const Demo = props => {
+
+    return (
+        <div>
+            <Title 
+                title='这是标题'
+                subTitle='这是描述，相当于副标题'
+                tooltip='test'
+                placement="right"
+                size='large'
+                extra={<Button>这是extra信息</Button>}
+                style={{marginBottom:'20px'}}
+            />
+            <br/>
+            <Title 
+                title='这是标题'
+                subTitle='这是描述，相当于副标题'
+                tooltip='test'
+                placement="right"
+                size='middle'
+                extra={<Button>这是extra信息</Button>}
+            />
+            <br/>
+            <Title 
+                title='这是标题'
+                subTitle='这是描述，相当于副标题'
+                tooltip='test'
+                placement="right"
+            />
+            <br/>
+            <Title 
+                title='这是标题'
+                subTitle='这是描述，相当于副标题'
+                tooltip='test'
+                placement="right"
+                size='small'
+            />
+            <br/>
+            <Title 
+                title='这是标题'
+                subTitle='这是描述，相当于副标题'
+                tooltip='test'
+                placement="right"
+                size='large'
+                number={1}
+            />
+            <br/>
+            <Title 
+                title='这是标题'
+                subTitle='这是描述，相当于副标题'
+                tooltip='test'
+                placement="right"
+                size='middle'
+                number={2}
+            />
+            <br/>
+            <Title 
+                title='这是标题'
+                subTitle='这是描述，相当于副标题'
+                tooltip='test'
+                placement="right"
+                number={3}
+            />
+            <br/>
+            <Title 
+                title='这是标题'
+                subTitle='这是描述，相当于副标题'
+                tooltip='test'
+                placement="right"
+                size='small'
+                number={4}
+                simple
+            />
+        </div>
+    );
+};
+
+
+ReactDOM.render(
+    <Demo />,
+    document.getElementById('root')
+);
+```
+### API
+#### common
+| 属性名称         | 属性说明                               | 类型            | 默认值         | 是否必须 |
+| :----------     | :-------------------------           | :------        | :----------   | :------- |
+| title           | 标题                                  | String         | -             | 否       |
+| subTitle        | 副标题                                 | String         | -             | 否       |
+| number          | 标题前是数字                            | Number         | -             | 否       |
+| size            | 大小，large、middle、default、small     | String         | default       | 否       |
+| extra           | 右边区域内容                            | React node     | -             | 否       |
+
+#### number
+| 属性名称         | 属性说明                    | 类型            | 默认值          | 是否必须 |
+| :----------     | :------------------------- | :------        | :----------    | :------- |
+| simple          | 当数字时，是否有斜杆          | Bool           | true           | 否       |

package/es/Title/index.js

@@ -0,0 +1,40 @@
+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 _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; }
+
+import cn from 'classnames';
+import './index.less';
+export default (function (props) {
+  var _ref = props || {},
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '暂无标题' : _ref$title,
+      subTitle = _ref.subTitle,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'default' : _ref$size,
+      extra = _ref.extra,
+      number = _ref.number,
+      simple = _ref.simple,
+      style = _ref.style,
+      rest = _objectWithoutProperties(_ref, ["title", "subTitle", "size", "extra", "number", "simple", "style"]);
+
+  return React.createElement("div", {
+    className: cn('tnt-title', size, {
+      'has-number': number
+    }, {
+      'is-simple': simple
+    }),
+    style: _objectSpread({}, style)
+  }, React.createElement("div", {
+    className: "tnt-title-text"
+  }, number && React.createElement("i", {
+    "class": "count"
+  }, number <= 9 ? "0".concat(number) : number), React.createElement("h3", null, title), React.createElement("span", null, subTitle)), extra && React.createElement("div", {
+    className: "tnt-title-extra"
+  }, extra));
+});

package/es/Title/index.less

@@ -0,0 +1,170 @@
+.tnt-title {
+    & {
+        position: relative;
+        height: 32px;
+        line-height: 32px;
+        clear: both;
+        overflow: hidden;
+    }
+
+    &.has-number{
+        .tnt-title-text {
+            h3 {
+                margin-left: 0;
+            }
+            &::before {
+                display: none;
+            }
+        }
+        &.is-simple {
+            .count::before {
+                display: none;
+            }
+        }
+        &.small {
+            .count {
+                font-size: 20px;
+                margin-right: 12px;
+                &::before {
+                    width: 20px;
+                    height: 15px;
+                    top: 44%;
+                    left: 60%;
+                }
+            }
+        }
+        &.middle {
+            .count {
+                font-size: 24px;
+                margin-right: 12px;
+                &::before {
+                    width: 24px;
+                    height: 15px;
+                    left: 56%;
+                }
+            }
+        }
+        &.large {
+            .count {
+                font-size: 28px;
+                margin-right: 12px;
+                &::before {
+                    width: 28px;
+                    height: 18px;
+                    left: 56%;
+                }
+            }
+        }
+        .count {
+            position: relative;
+            top: -1px;
+            color: #0089ff;
+            font-size: 22px;
+            font-style: normal;
+            margin-right: 12px;
+            position: relative;
+            vertical-align: top;
+            font-weight: 400;
+            font-family: Roboto,'Helvetica Neue',Helvetica,Tahoma,Arial,'PingFang SC','Microsoft YaHei'!important;
+            letter-spacing: 1px;
+        }
+        .count::before {
+            position: absolute;
+            display: block;
+            content: "";
+            width: 22px;
+            height: 15px;
+            border-top: 1px solid #0089ff;
+            background-color: #fff;
+            top: 45%;
+            left: 58%;
+            transform: rotate(-45deg);
+            -webkit-transform: rotate(-45deg);
+        }
+    }
+    &.small {
+        & {
+            height: 28px;
+            line-height: 28px;
+        }
+        .tnt-title-text {
+            h3 {
+                font-size: 14px;
+            }
+            &::before {
+                height: 14px;
+                top: 7px;
+            }
+        }
+    }
+    &.middle {
+        & {
+            height: 36px;
+            line-height: 36px;
+        }
+        .tnt-title-text {
+            h3 {
+                font-size: 18px;
+            }
+            &::before {
+                height: 18px;
+                top: 9px;
+            }
+        }
+    }
+    &.large {
+        & {
+            height: 40px;
+            line-height: 40px;
+        }
+        .tnt-title-text {
+            h3 {
+                font-size: 20px;
+            }
+            &::before {
+                height: 20px;
+                top: 9px;
+            }
+        }
+    }
+    .tnt-title-text {
+        & {
+            position: relative;
+            float: left;
+        }
+        h3 {
+            font-size: 16px;
+            color: #17233D;
+            font-weight: normal;
+            margin: 0;
+            margin-right: 10px;
+            margin-left: 10px;
+            display: inline-block;
+        }
+        span {
+            position: relative;
+            top: 1px;
+            font-size: 12px;
+            color:#8b919e;
+            margin-right: 10px;
+            line-height: 1;
+        }
+        &::before {
+            position: absolute;
+            left: 0;
+            top: 8px;
+            background-color: #126BFB;
+            content: "";
+            width: 3px;
+            height: 16px;
+            margin-right: 8px;
+        }
+    }
+    .tnt-title-extra {
+        & {
+            position: relative;
+            float: right;
+            margin-left: 8px;
+        }
+    }
+}

package/es/index.js

@@ -0,0 +1,19 @@
+export { default as Layout } from './Layout';
+export { default as AuthContext } from './AuthContext';
+export { default as QueryForm } from './QueryForm';
+export { default as Table } from './Table';
+export { default as ResizableTable } from './Table/ResizableTable';
+export { default as QueryListScene } from './QueryListScene';
+export { default as Icon } from './Icon';
+export { default as iconList } from './Icon/iconList';
+export { default as Modal } from './Modal';
+export { default as Columns } from './Columns';
+export { default as DevelopmentLogin } from './DevelopmentLogin';
+export { default as LoadingButton } from './LoadingButton';
+export { default as Handle } from './Handle';
+export { default as Page } from './Page';
+export { default as Select } from './Select';
+export { default as Img } from './Img';
+export { default as Title } from './Title';
+export { default as Ellipsis } from './Ellipsis';
+export { default as ArrayInput } from './ArrayInput';

package/es/locale.js

@@ -0,0 +1,60 @@
+export var zh_CN = {
+  globalNavigation: '全局导航',
+  menuSearch: '菜单搜索',
+  // QueryForm
+  search: '搜索',
+  reset: '重置',
+  moreFiltering: '更多过滤',
+  expand: '展开',
+  collapse: '收起',
+  // QueryListScene
+  totalRecords: '共%s条记录',
+  // user popover
+  personalSettings: '个人设置',
+  changePwd: '修改密码',
+  signOut: '退出'
+};
+export var en_US = {
+  globalNavigation: 'Global Navigation',
+  menuSearch: 'Menu Search',
+  // QueryForm
+  search: 'Search',
+  reset: 'Reset',
+  moreFiltering: 'More filtering',
+  expand: 'Expand',
+  collapse: 'Collapse',
+  // QueryListScene
+  totalRecords: 'Total of %s records',
+  // user popover
+  personalSettings: 'Personal settings',
+  changePwd: 'Change password',
+  signOut: 'Sign out'
+};
+export var getText = function getText(key) {
+  var _ref;
+
+  var language = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'cn';
+  var text = (_ref = {
+    cn: zh_CN,
+    en: en_US
+  }[language] || zh_CN) == null ? void 0 : _ref[key];
+
+  for (var _len = arguments.length, params = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+    params[_key - 2] = arguments[_key];
+  }
+
+  if (params == null ? void 0 : params.length) {
+    return params.reduce(function (acc, cur) {
+      return acc.replace(/%s/, cur);
+    }, text);
+  }
+
+  return text;
+};
+export var getLanguage = function getLanguage() {
+  return localStorage.getItem('lang') || 'cn';
+};
+export default {
+  en_US: en_US,
+  zh_CN: zh_CN
+};