tntd 1.4.17 → 2.0.0-beta-1

package/components/Ellipsis/index.js

@@ -1,158 +0,0 @@
-/*
- * @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';
-
-const tolerance = 0; // In px. Depends on the font you are using
-
-const isEllipsisActive = (e) => {
-    if(e.offsetWidth === e.scrollWidth && e.offsetHeight === e.scrollHeight){
-        let styleStr = 'overflow:visible; ';
-        if(!e?.parentNode?.getAttribute('style')?.includes('width')){
-            styleStr+='width:100%;';
-        }
-        e.parentNode.setAttribute('style',styleStr);
-    }
-    return e.offsetWidth + tolerance < e.scrollWidth || e.offsetHeight < e.scrollHeight;
-};
-
-export default props => {
-    let {
-        _popover = props.Popover, // `Popover` or `Tooltip` ?
-        title,  // in most cases for `Tooltip`
-        content,   // in most cases for `Popover`
-        className,
-        style,
-        widthLimit,  // width trigger value
-        _lines = props.lines !== 1 && props.lines,  // number or lines, default 1 line;
-        children,  // children Node
-        emptyText,  // default: null
-        _copyable = props.copyable,  // copy function
-        prefix,  // 前缀dom
-        suffix   // 后缀dom
-    } = props;
-
-    // allow visible or not state
-    const [flag, setFlag] = useState(true);
-    // visible[Tooltip/Popover] state
-    const [tipVisible, setTipVisible] = useState(false);
-    // copy animation state
-    const [hasCopy, setHasCopy] = useState(false);
-
-    const elementRef = useRef();
-
-    useEffect(() => {
-        elementRef.current && isEllipsisActive(elementRef.current)
-            ? setFlag(true)
-            : (
-                setFlag(false),
-                setTipVisible(false)
-            );
-    });
-
-    // original Node
-    const inner = typeof children === 'string' ? children : (_popover ? content : title);
-
-    // for className
-    const getClassName = () => {
-        return `overflow ${_lines ? 'ellipsis-wrap' : 'ellipsis-nowrap'} ${className || ''}`;
-    };
-
-    // Tooltip.trigger(default 'hover') ==trigger==> onVisibleChange(visible)
-    const handleVisibleChange = (visible) => {
-        // const { onVisibleChange } = props;
-        // onVisibleChange(visible);
-        flag && setTipVisible(visible);
-    };
-
-    // onClick Copy Button
-    const handleCopy = (innerText) => {
-        copy(innerText);
-        setHasCopy(!hasCopy);
-        setTimeout(() => {
-            setHasCopy(false);
-        }, 1000);
-    };
-
-    const renderNode = () => {
-        const popoverNode = (
-            <Popover
-                {...props}
-                content={content || children}
-                visible={tipVisible}
-                onVisibleChange={(visible) => handleVisibleChange(visible)}
-            >
-                <div
-                    className={className}
-                    style={{ WebkitLineClamp: _lines }}
-                    ref={elementRef}
-                >
-                    {children || content}
-                </div>
-            </Popover>
-        );
-
-        const tooltipNode = (
-            <Tooltip
-                {...props}
-                title={title || children}
-                visible={tipVisible}
-                onVisibleChange={(visible) => handleVisibleChange(visible)}
-            >
-                <div
-                    className={className}
-                    style={{ WebkitLineClamp: _lines }}
-                    ref={elementRef}
-                >
-                    {children || title}
-                </div>
-            </Tooltip>
-        );
-
-        return _popover ? popoverNode : tooltipNode;
-
-    };
-
-    return <>
-        <div
-            className="tnt-ellipsis"
-            style={{
-                ...style,
-                maxWidth: widthLimit
-            }}
-        >
-            {/* prefix */}
-            {prefix && prefix}
-            {/* content */}
-            <div
-                className={getClassName()}
-            >
-                {inner ? renderNode() : emptyText}
-            </div>
-            {/* suffix */}
-            {suffix && suffix}
-            {/* copyable button */}
-            {
-                inner && _copyable &&
-                <div
-                    className='svg-button'
-                    onClick={() => handleCopy(elementRef.current.innerText)}
-                >
-                    {
-                        !hasCopy
-                            ? <CopySVG />
-                            : <TickSVG />
-                    }
-                </div>
-            }
-        </div>
-    </>;
-};

package/components/Ellipsis/index.less

@@ -1,56 +0,0 @@
-.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/components/Handle/README.md

@@ -1,104 +0,0 @@
-## 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/components/Handle/index.js

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

package/components/Handle/index.less

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

package/components/Icon/README.md

@@ -1,119 +0,0 @@
-## 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   |         | 否       |