tntd 1.4.17 → 2.0.0-beta-1

package/components/Columns/README.md

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

package/components/Columns/index.js

@@ -1,75 +0,0 @@
-import classnames from 'classnames';
-import { Row, Col } from 'antd';
-import './index.less';
-
-const clsPrefix = 'tnt-columns';
-
-export const Item = props => {
-    const { children, span, extra, title, tabList, defaultActiveTabKey, activeTabKey, tabType, onTabChange } = props;
-    const realActiveKey = activeTabKey || defaultActiveTabKey;
-
-    return (
-        <Col className={`${clsPrefix}-col`} span={span < 4 ? 4 : span}>
-            <div>
-                {
-                    (!tabList || tabList.length < 0) && (
-                        <div className={`${clsPrefix}-col-header`}>
-                            <div className="title-left">{title}</div>
-                            {
-                                extra && <div className="title-extra">{extra}</div>
-                            }
-                        </div>
-                    )
-                }
-                {
-                    tabList?.length > 0 && (
-                        <div
-                            className={`${clsPrefix}-col-tabs`}
-                            tabType={tabType}
-                            tabList={tabList}
-                        >
-                            {
-                                tabList.map(({ tab, key }) => (
-                                    <span
-                                        className={classnames('tab-item', {
-                                            'active-tab': realActiveKey === key
-                                        })}
-                                        style={{
-                                            width: tabList && tabType === 'default' ? 'auto' : `${100 / tabList.length}%`
-                                        }}
-                                        key={key}
-                                        onClick={() => onTabChange(key)}
-                                    >
-                                        {tab}
-                                    </span>
-                                ))
-                            }
-                        </div>
-                    )
-                }
-                <div className={`${clsPrefix}-col-body`}>{children}</div>
-            </div>
-        </Col>
-    );
-};
-
-const Columns = props => {
-    const { children, height, gutter = 0, style, ...rest } = props;
-    const rowStyle = {
-        ...style,
-        height: props.height ? `${props.height}px` : 'calc(100vh)'
-    };
-
-    return (
-        <Row
-            className={classnames(clsPrefix, { gutter })}
-            style={rowStyle}
-            {...rest}
-        >
-            {children}
-        </Row>
-    );
-};
-Columns.Item = Item;
-
-export default Columns;

package/components/Columns/index.less

@@ -1,75 +0,0 @@
-.tnt-columns {
-    .ant-col:not(:first-of-type) > div {
-        box-shadow: 5px 5px 10px -4px rgba(213,213,213,0.50), 3px -5px 10px -4px rgba(213,213,213,0.40);
-        .gutter & {
-            box-shadow: 0 0 10px 0 rgba(213,213,213,0.50);
-        }
-    }
-
-    .ant-col:first-child > div {
-        box-shadow: 0 0 10px 0 rgba(213,213,213,0.50);
-    }
-
-    &-col {
-        height: inherit;
-        & > div {
-            height: inherit;
-        }
-
-        &-header {
-            padding: 0 20px;
-            height: 48px;
-            line-height: 48px;   
-            border-bottom: 1px solid #E1E6EE;
-
-            .title-left {
-                float: left;
-                color: #17233D;
-                font-size: 14px;
-            }
-            .title-extra {
-                float: right;
-
-                .ant-btn {
-                    width: 64px;
-                    height: 22px;
-                    font-size: 12px;
-                }
-
-                .ant-btn-primary {
-                    background: #126BFB;
-                    border-radius: 2px;
-                    border-color: #126BFB;
-                }
-            }
-        }
-
-        &-tabs {
-            height: 48px;
-            line-height: 48px;   
-            border-bottom: 1px solid #E1E6EE;
-            color: #17233D;
-            font-size: 14px;
-
-            .tab-item {
-                display: inline-block;
-                padding: 0 20px;
-                height: 48px;
-                text-align: center;
-                cursor: pointer;
-                transition: borderBottom 1s;
-            }
-
-            .active-tab {
-                border-bottom: 2px solid #126BFB;
-            }
-        }
-
-        &-body {
-            height: calc(~"100% - 48px");
-            padding: 10px 20px;
-            overflow-y: scroll;
-            color: #17233D;
-        }
-    }
-}

package/components/DevelopmentLogin/LoginModal.js

@@ -1,85 +0,0 @@
-import { useState } from 'react';
-import { Modal, Input, Form, message } from 'antd';
-import Cookies from 'universal-cookie';
-
-const cookies = new Cookies();
-// 默认
-let accountInfoDefault = {
-    account: undefined,
-    password: undefined
-};
-
-export default ({ visible, close, signIn }) => {
-    const [confirmLoading, setConfirmLoading] = useState(false);
-
-    // 如果storage中已存在，则取storage
-    const storageAccountInfo = localStorage.getItem('accountInfo');
-    if(storageAccountInfo){
-        try{
-            accountInfoDefault = JSON.parse(storageAccountInfo);
-        }catch(e){}
-    }
-
-    const [accountInfo, setAccountInfo] = useState(accountInfoDefault);
-    const { account, password } = accountInfo;
-
-    const onSubmit = () => {
-        setConfirmLoading(true);
-        const returnVal = signIn && signIn(accountInfo);
-
-        if (returnVal && returnVal.then) {
-            returnVal.then(res => {
-                message.success('模拟登陆成功');
-                localStorage.setItem('accountInfo',JSON.stringify(accountInfo));
-                setConfirmLoading(false);
-                setTimeout(() => {
-                    const { tdToken: token, userId } = res || {};
-
-                    cookies.set('_td_token_', token, { path: '/' });
-                    cookies.set('_uid_', userId, { path: '/' });
-                    close();
-                }, 500);
-            })
-                .catch((err) => {
-                    setConfirmLoading(false);
-                    throw err;
-                });
-        }
-    };
-    const changeFieldValue = (key, evt) => {
-        setAccountInfo({
-            ...accountInfo,
-            [key]: evt.target.value,
-        });
-    };
-
-    return (
-        <Modal
-            title="开发者模拟登陆"
-            visible={visible}
-            maskClosable={false}
-            onOk={onSubmit}
-            onCancel={close}
-            confirmLoading={confirmLoading}
-        >
-            <Form labelCol={{ span: 5 }} wrapperCol={{ span: 18 }}>
-                <Form.Item label="用户名：">
-                    <Input
-                        type="text"
-                        placeholder="请输入用户名"
-                        value={account || undefined}
-                        onChange={evt => changeFieldValue('account', evt)}
-                    />
-                </Form.Item>
-                <Form.Item label="密码：">
-                    <Input
-                        type="text"
-                        placeholder="请输入用户名"
-                        value={password || undefined}
-                        onChange={evt => changeFieldValue('password', evt)}
-                    />
-                </Form.Item>
-            </Form>
-        </Modal>
-    );
-};

package/components/DevelopmentLogin/README.md

@@ -1,49 +0,0 @@
-## DevelopmentLogin组件
-### 代码演示
-```jsx
-import { Fragment, useState } from 'react';
-import ReactDOM from 'react-dom';
-import { createGlobalStyle } from 'styled-components';
-import { DevelopmentLogin } from 'tntd';
-import 'antd/dist/antd.css';
-
-const GlobalStyle = createGlobalStyle`
-  .site-body {
-    .ichYgh {
-        padding: 0;
-        overflow: visible;
-    }
-}
-`;
-
-ReactDOM.render(
-    <DevelopmentLogin
-        signIn={params => {
-            console.log('login info...', params);
-            // TODO 发送请求到后端登录，返回一个promise
-            // 目前组件内部在拿到返回的数据后默认的处理逻辑如下：
-            /*
-            const { tdToken: token, userId } = res || {};
-
-            cookies.set('_td_token_', token, { path: '/' });
-            cookies.set('_uid_', userId, { path: '/' });
-            */
-            return new Promise(resolve => {
-                setTimeout(() => {
-                    resolve({
-                        tdToken: 'tdToken', userId: 'userId'
-                    });
-                }, 100);
-            });
-        }}
-    />,
-    document.getElementById('root')
-);
-```
-
-### API
-#### Icon
-
-| 属性名称    | 属性说明                           | 类型     | 默认值      | 是否必须 |
-| :---------- | :------------------------------ | :------ | :---------- | :------- |
-| signIn        | 登录时执行的方法                     | Function(返回值类型Promise)   | 无          | 是       |

package/components/DevelopmentLogin/index.js

@@ -1,29 +0,0 @@
-/**
- * @file 本地开发登录入口
- */
-import React, { useState } from 'react';
-
-const DevelopmentLoginModal = React.lazy(
-    () => import('./LoginModal')
-);
-
-export default ({ signIn }) => {
-    const [loginVisible, setLoginVisible] = useState(false);
-
-    return (
-        <>
-            <a style={{ fontSize: 14 }} onClick={() => setLoginVisible(true)}>模拟登录</a>
-            {
-                loginVisible && (
-                    <React.Suspense fallback={<div>正在加载中</div>}>
-                        <DevelopmentLoginModal
-                            visible={loginVisible}
-                            signIn={signIn}
-                            close={() => setLoginVisible(false)}
-                        />
-                    </React.Suspense>
-                )
-            }
-        </>
-    );
-};

package/components/Ellipsis/README.md

@@ -1,104 +0,0 @@
-## Ellipsis省略号
-
-## 代码演示
-``` jsx
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Ellipsis } from 'tntd';
-import {Tag} from "antd";
-import 'antd/dist/antd.css';
-
-const Demo = props => {
-	return (
-		 <>
-			{/* instance 1 */}
-			<Ellipsis
-				Popover
-				copyable
-				widthLimit={100}
-				content="你看我有省略号吗？"
-			/>
-			
-			<div style={{width: 100}}>
-
-				{/* 例 2 */}
-				<Ellipsis lines={2} copyable title="你看我有省略号吗？你看我有省略号吗？你看我有省略号吗？"/>
-
-				{/* 例 3 */}
-				<Ellipsis>
-					1你看我有省.01
-				</Ellipsis>
-				
-				{/* 例 4 */}
-				<Ellipsis
-					placement="topLeft"
-				>
-					你看我有省略号吗1？
-				</Ellipsis>
-
-				<Ellipsis 
-					placement="topLeft"
-					title="你看我有省略号吗？你看我有省略号吗？你看我有省略号吗？"
-					suffix={(
-						<Tag style={{marginLeft: "6px"}}>测试</Tag>
-					)}
-				/>
-			</div>
-		</>
-	);
-}
-
-ReactDOM.render(
-    <Demo />,
-    document.getElementById('root')
-);
-```
-
-
-根据限宽截断文本并显示省略号，进而添加Tooltip/Popover悬浮效果以显示完整文本。旨在解决根据字符长度截断时不能很好的兼容中英文的问题。
-        
-## 更新日志
-- 1.0.10 提升兼容性；
-- 1.0.9 优化svg引入方式，消除columns.fixed中的闪动；
-- 1.0.2 新增功能，**复制按钮**；
-- 1.0.1 新增功能，**支持多行**；
-- 1.0.0 以CSS宽度溢出驱动截断的Ellipsis发布，**支持单行**;  
-...
-
-## API  
-参数均同Ant3 Tooltip/Popover。 以下为新增参数
-|      参数         |       说明          |    类型        |
-|      ----         |        ----         |      ----      |
-|   Popover      |   指定超出宽度后，悬浮显示的类型为`Popover`，缺省则为`Tooltip`    |  |
-|  emptyText |   空文本字符，缺省值为空        |   string     |
-|  widthLimit |   指定溢出宽度值，缺省值为父元素宽度 |   number &#124; string      |
-| lines|  指定多行截断的最大行数，***可能在非Webkit内核浏览器中表现不稳定*** | number
-| copyable|  ***(新)*** 显示复制按钮，缺省值为不显示，文本为空时亦不显示 | |
-| suffix | 后缀 | string &#124; ReactNode &#124; () => ReactNode|
-| prefix | 前缀 | string &#124; ReactNode &#124; () => ReactNode|
-   
-#### 其他参数
-|      参数         |       说明          |    类型        |
-|      ----         |        ----         |      ----      |
-|  title |   同Tooltip，可省略，缺省值为元素文本 |   string    |
-|  content |   同Popover，可省略，缺省值为元素文本 |   string    |
-        
-## 何时使用  
-需要使文本元素在宽度溢出时显示省略号并添加悬浮效果（Tooltip/Popover）时。
-        
-## 如何使用  
-- 支持`Popover`和`Tooltip`两种悬浮效果；
-- 当选用`Popover`时，将需要展示的内容放在`content`里（如例1），并添加`Popover`属性；
-- 当选用`Tooltip`时，将需要展示的内容放在`title`（如例2）或包含在标签里（如例3）；
-- -----
-- 为什么不使用统一的属性传递展示的内容？因为antd3中的`Popover`和`Tooltip`的属性是有区别的，`Popover`用`title`作卡片标题，`content`作卡片内容，而`Tooltip`仅用`title`作卡片内容，没有标题功能；具体请参考 [Ant3-Popover](https://3x.ant.design/components/popover-cn/) 和 [Ant3-Tooltip](https://3x.ant.design/components/tooltip-cn/)
-- 相应的，你可以直接使用`Popover`和`Tooltip`的API（如例4）；转换一下思维，你可以把它当作带有***省略号、复制***的`Popover/Tooltip`使用；
-- 利用好`emptyText`属性，在Table中直接作为render中的父元素（例5）；
-- ---- 
-- 根据需求添加下列选填项
-- 添加`copyable`属性后，会在右侧添加一个复制按钮，
-- 添加`lines`指定多行限制，仅在需要多行功能时使用，
-- 添加`widthLimit`属性以增加限制宽度，若不添加则会受父元素宽度限制，
-- 添加`emptyText`指定数据为空时的文本，例如`emptyText="- -"`
-- 添加 `prefix/suffix` 指定前/后缀
-        

package/components/Ellipsis/Svg/CopySVG.js

@@ -1,24 +0,0 @@
-export default props => {
-	return <div {...props}>
-		<svg width="16px" height="16px" viewBox="0 0 16 16">
-			<g id="全家桶视觉方案优化" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-				<g id="工作台1" transform="translate(-730.000000, -299.000000)">
-					<g id="分组-6" transform="translate(240.000000, 96.000000)">
-						<g id="编组-18" transform="translate(0.000000, 171.000000)">
-							<g id="复制" transform="translate(490.000000, 32.000000)">
-								<rect id="矩形" fill="#D8D8D8" opacity="0" x="0" y="0" width="16" height="16"></rect>
-								<g id="编组-5" transform="translate(2.223389, 1.330322)" stroke="#1e90ff" stroke-linecap="round" stroke-width="1.2">
-									<polygon id="路径" stroke-linejoin="round" points="2 11.3333333 11.3333333 11.3333333 11.3333333 4 7.66666667 -8.8817842e-15 2 -8.8817842e-15"></polygon>
-									<polyline id="路径" stroke-linejoin="round" points="7.66666667 0 7.66666667 4 11.3333333 4"></polyline>
-									<polyline id="路径" stroke-linejoin="round" points="0 5.33333333 0 13.3333333 7 13.3333333"></polyline>
-									<line x1="4" y1="5.33333333" x2="5.33333333" y2="5.33333333" id="路径"></line>
-									<line x1="4" y1="8" x2="8" y2="8" id="路径"></line>
-								</g>
-							</g>
-						</g>
-					</g>
-				</g>
-			</g>
-		</svg>
-	</div>;
-};

package/components/Ellipsis/Svg/TickSVG.js

@@ -1,18 +0,0 @@
-export default props => {
-	return <div {...props}>
-		<svg width="17px" height="16px" viewBox="0 0 17 16">
-			<g id="全家桶视觉方案优化" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-				<g id="工作台1" transform="translate(-754.000000, -299.000000)">
-					<g id="分组-6" transform="translate(240.000000, 96.000000)">
-						<g id="编组-18" transform="translate(0.000000, 171.000000)">
-							<g id="复制成功" transform="translate(514.500000, 32.000000)">
-								<rect id="矩形" fill-opacity="0.01" fill="#FFFFFF" fill-rule="nonzero" x="0" y="0" width="16" height="16"></rect>
-								<polyline id="路径" stroke="#07C790" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" points="14.3333333 3.66666667 5.625 12.3333333 1.66666667 8.39393333"></polyline>
-							</g>
-						</g>
-					</g>
-				</g>
-			</g>
-		</svg>
-	</div>;
-};