tntd 1.4.17 → 2.0.0-beta

package/components/Icon/iconList.js

@@ -1,119 +0,0 @@
-export default [
-    'system',
-    'entry',
-    'permission',
-    'graph',
-    'guanjia',
-    'case',
-    'celve1',
-    'shoucang',
-    'deal-type',
-    'pm',
-    'shoukuan',
-    'zhibiao',
-    'puzzle',
-    'user-group',
-    'yuce',
-    'jianmo',
-    'zhuanzhang',
-    'yunwei',
-    'baozhang',
-    'jizhang',
-    'tongji',
-    'pingfen',
-    'limit',
-    'spider',
-    'loan',
-    'access',
-    'role',
-    'org',
-    'celve',
-    'book',
-    'tag',
-    'shixufenxipeizhi',
-    'all-cases',
-    'xianeguanli',
-    'api',
-    'network',
-    'analysis',
-    'calendar',
-    'backup',
-    'all',
-    'attachment',
-    'chart-line',
-    'branches',
-    'chart-area',
-    'clock',
-    'check',
-    'charging-setting',
-    'chart-pie-alt',
-    'dashboard',
-    'datebase',
-    'check-reply',
-    'datacenter',
-    'connection',
-    'download',
-    'date-set',
-    'event',
-    'event-wait',
-    'fieldanalysis',
-    'exchange',
-    'knowledge',
-    'key',
-    'log',
-    'list',
-    'menu',
-    'index',
-    'project',
-    'monitorin',
-    'pointmap',
-    'ranking',
-    'model',
-    'plan',
-    'task',
-    'wait',
-    'upload',
-    'question-list',
-    'read',
-    'setting',
-    'reply',
-    'jinjianguanli',
-    'change-theme',
-    'application',
-    'flag-en',
-    'flag-cn',
-    'down',
-    'up',
-    'workflow',
-    'sync',
-    'folder',
-    'database',
-    'circle',
-    'edit',
-    'edit-color',
-    'box',
-    'layer',
-    'box-color',
-    'home-color',
-    'record',
-    'monitor',
-    'time-color',
-    'user',
-    'function-color',
-    'record-color',
-    'warning-color',
-    'layer-color',
-    'template',
-    'template-color',
-    'monitor-color',
-    'search',
-    'user-color',
-    'function',
-    'warning',
-    'search-color',
-    'home',
-    'time',
-    'application',
-    'plus',
-    'minus'
-];

package/components/Icon/index.js

@@ -1,14 +0,0 @@
-import './fonts/iconfont';
-import './index.less';
-
-export { default as iconList } from './iconList';
-
-export default ({ type, prefix = 'tnt-', className = '', ...props }) => {
-    return (
-        <i className={`tnt-icon ${className}`} type={type} {...props}>
-            <svg aria-hidden="true">
-                <use xlinkHref={`#${prefix}${type}`} />
-            </svg>
-        </i>
-    );
-};

package/components/Icon/index.less

@@ -1,9 +0,0 @@
-.tnt-icon {
-    svg {
-        width: 1em;
-        height: 1em;
-        vertical-align: -0.15em;
-        fill: currentColor;
-        overflow: hidden;
-    }
-}

package/components/Img/Contain.js

@@ -1,50 +0,0 @@
-import React from 'react';
-import classnames from 'classnames';
-
-export default props => {
-    const { alt, title, src, width, height, style = {}, className, onError, shape, errorImgSrc, type, ...others } = props;
-
-    const styles = {
-        ...style,
-        display: 'inline-block',
-        width,
-        height,
-        overflow: 'hidden',
-    };
-    if (shape === 'rounded') {
-        styles.borderRadius = '5px';
-    } else if (shape === 'circle') {
-        styles.borderRadius = '50%';
-    }
-
-    const centerStyles = {
-        width,
-        height,
-        display: 'table-cell',
-        verticalAlign: 'middle',
-        textAlign: 'center',
-    };
-
-    const imgStyles = {
-        width: 'auto',
-        height: 'auto',
-        maxWidth: width,
-        maxHeight: height,
-    };
-
-    const cls = classnames('tntd-img', shape, className);
-
-    return (
-        <div className={cls} style={styles} {...others}>
-            <div style={centerStyles}>
-                <img
-                    style={imgStyles}
-                    onError={onError}
-                    src={src}
-                    alt={alt}
-                    title={title}
-                />
-            </div>
-        </div>
-    );
-};

package/components/Img/Cover.js

@@ -1,96 +0,0 @@
-import React from 'react';
-import { useEffect, useState, useRef } from 'react';
-import classnames from 'classnames';
-
-export default props => {
-    const { alt, title, src, width, height, style = {}, className, onError, shape, errorImgSrc, type, ...others } = props;
-    const imgRef = useRef();
-    const [imgStyles, setImgStyles] = useState({
-        display: 'block',
-        maxWidth: 'none',
-        width: 'auto',
-        height: 'auto',
-        // transition: 'opacity 0.2s ease',
-        opacity: 0,
-    });
-
-    const getStyles = (wrapWidth, wrapHeight, imgWidth, imgHeight) => {
-        // 进行等比运算
-        const wrapRatio = wrapWidth / wrapHeight;
-        const imgRatio = imgWidth / imgHeight;
-
-        let finalWidth = 0;
-        let finalHeight = 0;
-        let finalMarginTop = 0;
-        let finalMarginLeft = 0;
-
-        if (wrapRatio > imgRatio) {
-            // 父框宽度更大，以父框的宽度为准，拉伸图片上移
-            finalWidth = wrapWidth;
-            finalHeight = finalWidth / imgRatio;
-            finalMarginTop = ((finalHeight - wrapHeight) / 2) * -1;
-        } else {
-            // 父框高度更大，以父框高度为准，拉伸图片左移动
-            finalHeight = wrapHeight;
-            finalWidth = finalHeight * imgRatio;
-            finalMarginLeft = ((finalWidth - wrapWidth) / 2) * -1;
-        }
-
-        return {
-            height: finalHeight,
-            width: finalWidth,
-            marginLeft: finalMarginLeft,
-            marginTop: finalMarginTop,
-        };
-    };
-
-    const imgOnload = () => {
-        const imgDOM = imgRef.current;
-        const { width, height } = props;
-        const imgWidth = imgDOM.width;
-        const imgHeight = imgDOM.height;
-
-        const imgStyles2 = getStyles(width, height, imgWidth, imgHeight);
-        setImgStyles({
-            ...imgStyles,
-            ...imgStyles2,
-            opacity: 1,
-        });
-    };
-
-    useEffect(() => {
-        if (width || height) {
-            imgOnload();
-        }
-    }, [width, height]);
-
-
-    const styles = {
-        ...style,
-        display: 'inline-block',
-        overflow: 'hidden',
-        width,
-        height,
-    };
-    if (shape === 'rounded') {
-        styles.borderRadius = '5px';
-    } else if (shape === 'circle') {
-        styles.borderRadius = '50%';
-    }
-
-    const cls = classnames('tntd-img', shape, className);
-
-    return (
-        <div className={cls} style={styles} {...others}>
-            <img
-                style={imgStyles}
-                onError={onError}
-                ref={imgRef}
-                src={src}
-                alt={alt}
-                title={title}
-                onLoad={imgOnload}
-            />
-        </div>
-    );
-};

package/components/Img/README.md

@@ -1,131 +0,0 @@
-## Img图片组件
-### 基本用法
-```jsx
-import React,{Fragment} from 'react';
-import ReactDOM from 'react-dom';
-import { Img } from 'tntd';
-
-const Demo = props => {
-    const imgUrl="https://s3.ax1x.com/2020/12/22/rDn40O.jpg";
-    return (
-        <Fragment>
-            <div>
-                <h4>cover 模式强调填充铺平</h4>
-                <Img
-                    width={200}
-                    height={200}
-                    type='cover'
-                    src={imgUrl}
-                    style={{border: '1px solid #ccc', margin: '10px'}}
-                />
-            </div>
-            <div>
-                <h4>contain 模式强调信息全部展示</h4>
-                <Img
-                    width={200}
-                    height={200}
-                    type='contain'
-                    src={imgUrl}
-                    style={{border: '1px solid #ccc', margin: '10px'}}
-                />
-            </div>
-        </Fragment>
-    );
-};
-
-ReactDOM.render(
-    <Demo />,
-    document.getElementById('root')
-);
-```
-### 图片形状
-```jsx
-import React, { Fragment } from 'react';
-import ReactDOM from 'react-dom';
-import { Img } from 'tntd';
-
-const Demo = props => {
-    const imgUrl="https://s3.ax1x.com/2020/12/22/rDn40O.jpg";
-    return (
-        <Fragment>
-            <div>
-                <h4>默认直角矩形</h4>
-                <Img
-                    width={200}
-                    height={200}
-                    type='cover'
-                    src={imgUrl}
-                />
-            </div>
-            <div>
-                <h4>形状是圆角矩形</h4>
-                <Img
-                    width={200}
-                    height={200}
-                    type='cover'
-                    src={imgUrl}
-                    shape="rounded"
-                />
-            </div>
-            <div>
-                <h4>形状是圆形</h4>
-                <Img
-                    width={200}
-                    height={200}
-                    type='cover'
-                    src={imgUrl}
-                    shape="circle"
-                />
-            </div>
-        </Fragment>
-    );
-};
-
-ReactDOM.render(
-    <Demo />,
-    document.getElementById('root')
-);
-```
-
-### 图片加载失败的处理方法
-```jsx
-import React, { Fragment,useState } from 'react';
-import ReactDOM from 'react-dom';
-import { Img } from 'tntd';
-
-const Demo = props => {
-    const imgUrl="https://sinan.tongdun.me/2020/12/22/rDn40O00.jpg"; // 默认错误的图谱
-    const errorImgSrc="https://s3.ax1x.com/2020/12/22/rDUzfx.png";
-
-    return (
-        <Img
-            width={200}
-            height={200}
-            type='cover'
-            src={imgUrl}
-            errorImgSrc={errorImgSrc}
-        />
-    );
-};
-
-ReactDOM.render(
-    <Demo />,
-    document.getElementById('root')
-);
-```
-
-### API
-#### img
-| 属性名称    | 属性说明                           | 类型        | 默认值      | 是否必须     | 可选值                      | 备注
-| :--------  | :------------------------------ | :----------- | :---------- | :-------  | :------                     | :-------
-| type       | 图片显示模式	                        | string    | cover       | 否         | cover、contain              |
-| src        | 图片url	                           | string    |             | 是         |                             |
-| shape      | 图片形状	                            | string    | sharp       | 否         | circle、sharp、rounded       |
-| title      | 图片的 title，hover 上去会显示出来      | string   |              | 否        | circle、sharp、rounded       |
-| alt        | 图片的 alt 通常用于屏幕阅读器（盲人）识别 | string    |             | 否        |                              |
-| className  | 图片的 className                     | string    |             | 否        |                              |
-| style      | 图片的 style                         | object    | {}          | 否        |                              |
-| width      | 图片显示宽度                          | number    |             | 否        |         | 计算图片必需，不传则表现形式等同于普通 img 标签。
-| height      | 图片显示高度                         | number    |             | 否        |         | 计算图片必需，不传则表现形式等同于普通 img 标签。
-| errorImgSrc | 图片加载失败的兜底图片	               | string    |             | 否    |         | 如果图片加载失败，那么将用这张图来代替如果图片加载失败，那么将用这张图来代替
-| onError     | 图片加载失败的回调方法                 | function  |             | 否         |         | 如果图片加载失败，那么将执行这个 callback 让你添加一些容错逻辑

package/components/Img/index.js

@@ -1,37 +0,0 @@
-import { Fragment, useState } from 'react';
-import Cover from './Cover';
-import Contain from './Contain';
-
-export default (props) => {
-    const { type = 'cover', src, shape = 'sharp', title = '', alt = '', className, style, width = 'auto', height = 'auto', errorImgSrc, onError, ...rest } = props || {};
-    const [src2, setSrc2] = useState(src);
-
-    const handleImgLoadError = () => {
-        if (errorImgSrc) {
-            setSrc2(props.errorImgSrc);
-        }
-        props.onError && props.onError();
-    };
-    const params = {
-        type, src: src2, shape, title, alt, className, style, width, height, errorImgSrc, ...rest
-    };
-
-    return (
-        <Fragment>
-            {
-                type === 'contain' &&
-                <Contain
-                    {...params}
-                    onError={handleImgLoadError}
-                />
-            }
-            {
-                type === 'cover' &&
-                <Cover
-                    {...params}
-                    onError={handleImgLoadError}
-                />
-            }
-        </Fragment>
-    );
-};

package/components/Layout/ActionsContext.js

@@ -1,4 +0,0 @@
-import { createContext } from 'react';
-// import createActions from './createActions';
-
-export default createContext({});