tntd 1.4.17 → 2.0.0-beta-1

package/lib/Table/README.md

@@ -1,109 +0,0 @@
-## 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/lib/Table/ResizableTable/index.js

@@ -1,126 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-require("antd/lib/table/style");
-
-var _table = _interopRequireDefault(require("antd/lib/table"));
-
-var _react = require("react");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _lodash = require("lodash");
-
-var _reactResizable = require("react-resizable");
-
-require("./index.less");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": 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 _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; }
-
-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(_reactResizable.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));
-};
-
-var _default = (0, _react.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 = (0, _react.useState)(buildColumns(props.columns)),
-      _useState2 = _slicedToArray(_useState, 2),
-      columns = _useState2[0],
-      setColumns = _useState2[1];
-
-  var dataRef = (0, _react.useRef)({
-    columns: columns
-  });
-
-  var handleResize = function handleResize(index) {
-    return (0, _lodash.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);
-  };
-
-  (0, _react.useEffect)(function () {
-    setColumns(buildColumns(props.columns));
-  }, [props.columns]);
-  (0, _react.useEffect)(function () {
-    dataRef.current.columns = columns;
-  }, [columns]);
-  return React.createElement(_table["default"], _extends({}, props, {
-    className: (0, _classnames["default"])('tnt-resizable-table', _defineProperty({}, props.className, props.className)),
-    components: {
-      header: {
-        cell: ResizableTitle
-      }
-    },
-    columns: columns,
-    ref: ref
-  }));
-});
-
-exports["default"] = _default;

package/lib/Table/ResizableTable/index.less

@@ -1,36 +0,0 @@
-.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/lib/Table/index.js

@@ -1,56 +0,0 @@
-"use strict";
-
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-require("antd/lib/table/style");
-
-var _table = _interopRequireDefault(require("antd/lib/table"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _ResizableTable = _interopRequireDefault(require("./ResizableTable"));
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-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; }
-
-// const ResizableTable = React.lazy(() => import('./ResizableTable'));
-var _default = (0, _react.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["default"].createElement(_ResizableTable["default"], _extends({}, props, {
-        ref: ref
-      })) // </React.Suspense>
-
-    );
-  }
-
-  return _react["default"].createElement(_table["default"], _extends({
-    className: (0, _classnames["default"])('tnt-table', _defineProperty({}, props.className, props.className))
-  }, props, {
-    ref: ref
-  }));
-});
-
-exports["default"] = _default;

package/lib/Title/README.md

@@ -1,106 +0,0 @@
-## 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/lib/Title/index.js

@@ -1,53 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-require("./index.less");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-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; }
-
-var _default = function _default(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: (0, _classnames["default"])('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));
-};
-
-exports["default"] = _default;

package/lib/Title/index.less

@@ -1,170 +0,0 @@
-.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;
-        }
-    }
-}