tntd 1.3.65 → 1.4.1

package/es/Ellipsis/index.js

@@ -0,0 +1,139 @@
+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 _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; }
+
+/*
+ * @Author: 梁洪刚
+ * @CreatDate: 2021-03-31 13:57:32
+ * @Describe: 省略号组件
+ */
+import { useState, useEffect, useRef } from 'react';
+import { Popover, Tooltip } from 'antd';
+import copy from 'copy-to-clipboard';
+import CopySVG from './Svg/CopySVG';
+import TickSVG from './Svg/TickSVG';
+import './index.less';
+var tolerance = 0; // In px. Depends on the font you are using
+
+var isEllipsisActive = function isEllipsisActive(e) {
+  return e.offsetWidth + tolerance < e.scrollWidth || e.offsetHeight < e.scrollHeight;
+};
+
+export default (function (props) {
+  var _props$_popover = props._popover,
+      _popover = _props$_popover === void 0 ? props.Popover : _props$_popover,
+      title = props.title,
+      content = props.content,
+      className = props.className,
+      style = props.style,
+      widthLimit = props.widthLimit,
+      _props$_lines = props._lines,
+      _lines = _props$_lines === void 0 ? props.lines !== 1 && props.lines : _props$_lines,
+      children = props.children,
+      emptyText = props.emptyText,
+      _props$_copyable = props._copyable,
+      _copyable = _props$_copyable === void 0 ? props.copyable : _props$_copyable,
+      prefix = props.prefix,
+      suffix = props.suffix; // allow visible or not state
+
+
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      flag = _useState2[0],
+      setFlag = _useState2[1]; // visible[Tooltip/Popover] state
+
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      tipVisible = _useState4[0],
+      setTipVisible = _useState4[1]; // copy animation state
+
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      hasCopy = _useState6[0],
+      setHasCopy = _useState6[1];
+
+  var elementRef = useRef();
+  useEffect(function () {
+    elementRef.current && isEllipsisActive(elementRef.current) ? setFlag(true) : (setFlag(false), setTipVisible(false));
+  }); // original Node
+
+  var inner = typeof children === 'string' ? children : _popover ? content : title; // for className
+
+  var getClassName = function getClassName() {
+    return "overflow ".concat(_lines ? 'ellipsis-wrap' : 'ellipsis-nowrap', " ").concat(className || '');
+  }; // Tooltip.trigger(default 'hover') ==trigger==> onVisibleChange(visible)
+
+
+  var handleVisibleChange = function handleVisibleChange(visible) {
+    // const { onVisibleChange } = props;
+    // onVisibleChange(visible);
+    flag && setTipVisible(visible);
+  }; // onClick Copy Button
+
+
+  var handleCopy = function handleCopy(innerText) {
+    copy(innerText);
+    setHasCopy(!hasCopy);
+    setTimeout(function () {
+      setHasCopy(false);
+    }, 1000);
+  };
+
+  var renderNode = function renderNode() {
+    var popoverNode = React.createElement(Popover, _extends({}, props, {
+      content: content || children,
+      visible: tipVisible,
+      onVisibleChange: function onVisibleChange(visible) {
+        return handleVisibleChange(visible);
+      }
+    }), React.createElement("div", {
+      className: className,
+      style: {
+        WebkitLineClamp: _lines
+      },
+      ref: elementRef
+    }, children || content));
+    var tooltipNode = React.createElement(Tooltip, _extends({}, props, {
+      title: title || children,
+      visible: tipVisible,
+      onVisibleChange: function onVisibleChange(visible) {
+        return handleVisibleChange(visible);
+      }
+    }), React.createElement("div", {
+      className: className,
+      style: {
+        WebkitLineClamp: _lines
+      },
+      ref: elementRef
+    }, children || title));
+    return _popover ? popoverNode : tooltipNode;
+  };
+
+  return React.createElement(React.Fragment, null, React.createElement("div", {
+    "class": "tnt-ellipsis",
+    style: _objectSpread({}, style, {
+      maxWidth: widthLimit
+    })
+  }, prefix && prefix, React.createElement("div", {
+    "class": getClassName()
+  }, inner ? renderNode() : emptyText), suffix && suffix, inner && _copyable && React.createElement("div", {
+    "class": "svg-button",
+    onClick: function onClick() {
+      return handleCopy(elementRef.current.innerText);
+    }
+  }, !hasCopy ? React.createElement(CopySVG, null) : React.createElement(TickSVG, null))));
+});

package/es/Ellipsis/index.less

@@ -0,0 +1,56 @@
+.tnt-ellipsis{
+    display:flex;
+    .overflow{
+        // white-space:nowrap;     //溢出不换行
+        overflow:hidden;        //超出的文本隐藏
+        text-overflow:ellipsis; //溢出用省略号显示
+        i {
+            margin: 0 0.3em;
+        }
+    }
+    
+    .ellipsis-nowrap{
+        white-space:nowrap;     //溢出不换行
+        & * {
+            overflow:hidden;        //超出的文本隐藏
+            text-overflow:ellipsis; //溢出用省略号显示
+        }
+    }
+    
+    .ellipsis-wrap{
+        display:-webkit-inline-box;
+        -webkit-line-clamp:2;
+        -webkit-box-orient:vertical;
+        overflow:hidden;
+        text-overflow:ellipsis;
+    }
+    
+    .button{
+        height:20px;
+        width:20px;
+        display: inline-flex;
+        align-items: center;
+        margin-left: 8px;
+        :hover{
+            cursor: pointer;
+        }
+    }
+    
+    .button-hidden{
+        display:none !important;
+    }
+    
+    .button-active{
+        display: inline-flex;
+        g{
+            animation: copy-active 0.3s;
+        }
+    }
+    
+    @keyframes copy-active
+    {
+        from {stroke: #07C790;}
+        to {stroke: #1e90ff;}
+    }
+}
+

package/es/Handle/README.md

@@ -0,0 +1,104 @@
+## Handle组件
+### 代码演示
+```jsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import 'antd/dist/antd.css';
+import {Button, Table, Popconfirm} from 'antd';
+import { Handle } from 'tntd';
+
+const Demo = props => {
+    const dataSource = [
+        {
+            key: '1',
+            name: '胡彦斌',
+            age: 32,
+            address: '西湖区湖底公园1号',
+        },
+        {
+            key: '2',
+            name: '胡彦祖',
+            age: 42,
+            address: '西湖区湖底公园1号',
+        },
+    ];
+
+    const columns = [
+        {
+            title: '姓名',
+            dataIndex: 'name',
+            key: 'name',
+            width: 500,
+        },
+        {
+            title: '年龄',
+            dataIndex: 'age',
+            key: 'age',
+            width: 600,
+        },
+        {
+            title: '住址',
+            dataIndex: 'address',
+            key: 'address',
+            width: 400,
+        },
+        {
+            title: '操作',
+            dataIndex:'opera',
+            fixed:"right",
+            width: 230,
+            render:()=>{
+                return (
+                    <Handle className="custom-class" num={3}>
+                        <a onClick={()=>{console.log("online")}}>上线</a>
+                        <a>查看</a>
+                        <a>编辑</a>
+                        <a>测试</a>
+                        {
+                            false && 
+                            <a>导入</a>
+                        }
+                        <a>导出</a>
+                        <Popconfirm
+                            title="Are you sure delete this task?"
+                            onConfirm={void 0}
+                            onCancel={void 0}
+                            okText="Yes"
+                            cancelText="No"
+                            onClick={e => e.stopPropagation()}
+                            getPopupContainer={trigger => trigger.parentNode}
+                            trigger="hover"
+                            overlayStyle={{
+                                width: 300
+                            }}
+                        >
+                            <a>Delete</a>
+                        </Popconfirm>
+                    </Handle>
+                )
+            }
+        }
+    ];
+
+    return (
+        <Table dataSource={dataSource} columns={columns} rowKey={(e,i)=>i} scroll={{x:1000}}/>
+    );
+};
+
+
+ReactDOM.render(
+    <Demo />,
+    document.getElementById('root')
+);
+```
+### API
+#### Handle
+| 属性名称    | 属性说明                           | 类型     | 默认值      | 是否必须 |
+| :---------- | :------------------------------ | :------ | :---------- | :------- |
+| type        | 类型，展示“更多”的模式，Icon或者文字 | String   | 文字          | 否       |
+| num        | 最多展示的个数                     | Number   |    3      | 否      |
+| lessOneMoreFit  | 当更多中等于1个的时候不显示更多                     | Bool   | false         | 否       |
+| divider  | 分隔线                     | Bool   | true          | 否       |
+| lang       | 中英文                     | String   | cn          | 否       |
+| className  | 自定义类名                     | String   | 无          | 否       |
+

package/es/Handle/index.js

@@ -0,0 +1,86 @@
+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 { Fragment } from 'react';
+import { Dropdown, Menu, Divider } from 'antd';
+import Icon from '../Icon';
+import './index.less';
+var clsPrefix = 'tnt-more-menus';
+export default (function (props) {
+  var _lastChildPart2, _lastChildPart3;
+
+  var _ref = props || {},
+      _ref$children = _ref.children,
+      children = _ref$children === void 0 ? [] : _ref$children,
+      type = _ref.type,
+      _ref$num = _ref.num,
+      num = _ref$num === void 0 ? 3 : _ref$num,
+      lang = _ref.lang,
+      _ref$divider = _ref.divider,
+      divider = _ref$divider === void 0 ? true : _ref$divider,
+      lessOneMoreFit = _ref.lessOneMoreFit,
+      rest = _objectWithoutProperties(_ref, ["children", "type", "num", "lang", "divider", "lessOneMoreFit"]);
+
+  var newChildren = [];
+
+  if (Array.isArray(children)) {
+    newChildren = (children == null ? void 0 : children.filter(function (item) {
+      return !!item;
+    })) || [];
+  } else if (children) {
+    newChildren.push(children);
+  }
+
+  var preChildPart = newChildren,
+      lastChildPart = null; // 只有1个时不适配
+
+  if (lessOneMoreFit && newChildren.length - num === 1) {
+    preChildPart = newChildren;
+  } else if (newChildren && num && !isNaN(num) && newChildren.length > num) {
+    preChildPart = newChildren.slice(0, num);
+    lastChildPart = newChildren.slice(num);
+  }
+
+  ;
+
+  if (divider && preChildPart) {
+    var preChildLen = preChildPart.length;
+    preChildPart = preChildPart.map(function (dom, i) {
+      var _lastChildPart;
+
+      return React.createElement(Fragment, {
+        key: i
+      }, dom, !(i === preChildLen - 1 && !((_lastChildPart = lastChildPart) == null ? void 0 : _lastChildPart.length) // 没有更多 且 是最后一个时 不显示 Divider
+      ) && React.createElement(Divider, {
+        type: "vertical"
+      }));
+    });
+  }
+
+  var menu = React.createElement(Menu, {
+    className: "org-pop-opera-btn"
+  }, (_lastChildPart2 = lastChildPart) == null ? void 0 : _lastChildPart2.map(function (child, i) {
+    return React.createElement(Menu.Item, {
+      key: i
+    }, child);
+  }));
+  return React.createElement("div", _extends({
+    onClick: function onClick(e) {
+      e.stopPropagation();
+    }
+  }, rest), preChildPart, ((_lastChildPart3 = lastChildPart) == null ? void 0 : _lastChildPart3.length) > 0 && React.createElement(Dropdown, {
+    overlay: menu,
+    arrow: true
+  }, type === 'icon' ? React.createElement(Icon, {
+    type: "more"
+  }) : React.createElement("a", {
+    className: "ant-dropdown-more"
+  }, lang === 'en' ? 'More' : '更多', React.createElement("i", {
+    className: "".concat(clsPrefix, "-dropdown-icon")
+  }, React.createElement(Icon, {
+    type: "down"
+  })))));
+});

package/es/Handle/index.less

@@ -0,0 +1,9 @@
+.tnt-more-menus {
+    // display: flex;
+    // align-items: center;
+
+    &-dropdown-icon {
+        font-size: 12px;
+        margin-left: 2px;
+    }
+}

package/es/Icon/README.md

@@ -0,0 +1,119 @@
+## Icon组件
+### 代码演示
+```jsx
+import { Fragment, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { createGlobalStyle } from 'styled-components';
+import { Icon } from 'tntd';
+import 'antd/dist/antd.css';
+
+const GlobalStyle = createGlobalStyle`
+  .site-body {
+    .ichYgh {
+        padding: 0;
+        overflow: visible;
+    }
+}
+`;
+
+ReactDOM.render(
+    <Icon type="analysis" />,
+    document.getElementById('root')
+);
+```
+
+```jsx
+import { Fragment, useState } from 'react';
+import ReactDOM from 'react-dom';
+import styled, { createGlobalStyle } from 'styled-components';
+import { Input } from 'antd';
+import { Icon } from 'tntd';
+import icons from 'tntd/Icon/iconList';
+import 'antd/dist/antd.css';
+
+const GlobalStyle = createGlobalStyle`
+  .site-body {
+    .ichYgh {
+        padding: 0;
+        overflow: visible;
+    }
+}
+`;
+
+const IconList = styled.ul`
+    margin: 10px 0;
+    overflow: hidden;
+    list-style: none;
+`;
+const IconItem = styled.li`
+    position: relative;
+    float: left;
+    width: 16.66%;
+    height: 100px;
+    margin: 3px 0;
+    padding: 10px 0 0;
+    overflow: hidden;
+    color: #555;
+    text-align: center;
+    list-style: none;
+    background-color: inherit;
+    border-radius: 4px;
+    cursor: pointer;
+    -webkit-transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
+    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
+    &:hover {
+        color: #fff;
+        background-color: #1890ff;
+    }
+    .tnt-icon {
+        margin: 12px 0 8px;
+        font-size: 36px;
+        -webkit-transition: -webkit-transform 0.3s ease-in-out;
+        transition: -webkit-transform 0.3s ease-in-out;
+        transition: transform 0.3s ease-in-out;
+        transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
+        will-change: transform;
+    }
+`;
+
+const IconsDemo = props => {
+    const [searchValue, setSearchValue] = useState();
+
+    return (
+        <Fragment>
+            <Input.Search
+                onChange={evt => setSearchValue(evt.target.value)}
+                placeholder="输入icon标识搜索"
+            />
+            <IconList>
+                {
+                    icons.filter(
+                        icon => (!searchValue || new RegExp(searchValue, 'i').test(icon))
+                    ).map(icon => (
+                        <IconItem key={icon}>
+                            <Icon type={icon} />
+                            <p>{icon}</p>
+                        </IconItem>
+                    ))
+                }
+            </IconList>
+            <GlobalStyle />
+        </Fragment>
+    );
+};
+
+
+ReactDOM.render(
+    <IconsDemo />,
+    document.getElementById('root')
+);
+```
+
+
+### API
+#### Icon
+
+| 属性名称    | 属性说明                           | 类型     | 默认值      | 是否必须 |
+| :---------- | :------------------------------ | :------ | :---------- | :------- |
+| type        | icon类型标识                     | string   | 无          | 是       |
+| prefix      | type 前缀                       | string   |         | 否       |