@douyinfe/semi-ui 2.1.5 → 2.2.0

package/timeline/item.tsx

@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import cls from 'classnames';
+import { noop } from 'lodash';
 import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/timeline/constants';
 import '@douyinfe/semi-foundation/timeline/timeline.scss';
@@ -13,6 +14,7 @@ export interface TimelineItemProps {
     position?: 'left' | 'right';
     className?: string;
     style?: React.CSSProperties;
+    onClick?: React.MouseEventHandler<HTMLLIElement>;
 }
 
 const prefixCls = cssClasses.ITEM;
@@ -27,11 +29,13 @@ export default class Item extends PureComponent<TimelineItemProps> {
         position: PropTypes.oneOf(strings.ITEM_POS),
         className: PropTypes.string,
         style: PropTypes.object,
+        onClick: PropTypes.func,
     };
 
     static defaultProps = {
         type: 'default',
         time: '',
+        onClick: noop,
     };
 
     render() {
@@ -43,7 +47,8 @@ export default class Item extends PureComponent<TimelineItemProps> {
             type,
             style,
             time,
-            extra
+            extra,
+            onClick,
         } = this.props;
 
         const itemCls = cls(prefixCls,
@@ -57,7 +62,7 @@ export default class Item extends PureComponent<TimelineItemProps> {
         });
         const dotStyle = color ? { style: { backgroundColor: color } } : null;
         return (
-            <li className={itemCls} style={style}>
+            <li className={itemCls} style={style} onClick={onClick}>
                 <div className={`${prefixCls}-tail`} />
                 <div
                     className={dotCls}

package/tooltip/_story/tooltip.stories.js

@@ -652,7 +652,7 @@ export const ShowArrow = () => {
     return (
       <div>
         <h4>should show content and arrow when click</h4>
-        <Tooltip showArrow trigger="click" content={'hi bytedance'}>
+        <Tooltip style={{ maxWidth: 320 }} showArrow trigger='custom' visible content={'hi semi semi semi semi semi semi semi'} position='right'>
           <Test />
         </Tooltip>
       </div>

package/upload/__test__/upload.test.js

@@ -869,7 +869,7 @@ describe('Upload', () => {
             beforeClear: () => Promise.reject(),
             onChange: spyOnChangeReject,
             onClear: spyOnClearReject,
-        })
+        });
 
         const clearBtn = upload.find(`.${BASE_CLASS_PREFIX}-upload-file-list-title-clear`).at(0);
         const clearBtnPass = uploadPass.find(`.${BASE_CLASS_PREFIX}-upload-file-list-title-clear`).at(0);
@@ -893,4 +893,53 @@ describe('Upload', () => {
             expect(spyOnClearReject.callCount).toEqual(0);
         });
     });
+
+    it('insert method', () => {
+        const props = {
+            defaultFileList: [],
+        };
+        const upload = getUpload(props);
+        const uploadInstance = upload.instance();
+
+        const file_0 = new File([new ArrayBuffer(1024)], 'chucknorris_0.png', { type: 'image/png' });
+        const file_1 = new File([new ArrayBuffer(1024)], 'chucknorris_1.png', { type: 'image/png' });
+        const file_2 = new File([new ArrayBuffer(1024)], 'chucknorris_2.png', { type: 'image/png' });
+
+        expect(uploadInstance instanceof Upload).toEqual(true);
+        expect(Object.prototype.hasOwnProperty.call(uploadInstance, 'insert')).toEqual(true);
+
+        /**
+         * test fileList state should be [] => [file_0] => [file_1, file_0] => [file_1, file_2, file_0]
+         */
+        upload.instance().insert([file_0]);
+        upload.instance().insert([file_1], 0);
+        upload.instance().insert([file_2], 1);
+
+        expect(Array.isArray(upload.state('fileList'))).toEqual(true);
+        expect(upload.state('fileList').length).toEqual(3);
+        expect(upload.state('fileList')[0].name).toEqual('chucknorris_1.png');
+        expect(upload.state('fileList')[1].name).toEqual('chucknorris_2.png');
+        expect(upload.state('fileList')[2].name).toEqual('chucknorris_0.png');
+    });
+
+    it('showPicInfo works', () => {
+        const props = {
+            listType: 'picture',
+            defaultFileList: [
+                {
+                    uid: '1',
+                    name: 'jiafang1.jpeg',
+                    status: 'success',
+                    size: '130kb',
+                    url: 'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg',
+                },
+            ],
+            showPicInfo: true,
+        };
+        const upload = getUpload(props);
+
+        expect(upload.exists(`.${BASE_CLASS_PREFIX}-upload`)).toEqual(true);
+        expect(upload.exists(`.${BASE_CLASS_PREFIX}-upload-file-list-main`)).toEqual(true);
+        expect(upload.exists(`.${BASE_CLASS_PREFIX}-upload-picture-file-card-pic-info`)).toEqual(true);
+    });
 });

package/upload/fileCard.tsx

@@ -3,7 +3,7 @@ import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/upload/constants';
 import { getFileSize } from '@douyinfe/semi-foundation/upload/utils';
-import { BaseFileItem } from '@douyinfe/semi-foundation/upload/foundation';
+import { IconAlertCircle, IconClose, IconFile, IconRefresh } from '@douyinfe/semi-icons';
 import LocaleConsumer from '../locale/localeConsumer';
 import { Locale } from '../locale/interface';
 
@@ -13,7 +13,6 @@ import Tooltip from '../tooltip/index';
 import Spin from '../spin/index';
 import { isElement } from '../_base/reactUtils';
 import { RenderFileItemProps } from './interface';
-import { IconAlertCircle, IconClose, IconFile, IconRefresh } from '@douyinfe/semi-icons';
 
 const prefixCls = cssClasses.PREFIX;
 
@@ -69,6 +68,7 @@ class FileCard extends PureComponent<FileCardProps> {
         style: PropTypes.object,
         url: PropTypes.string,
         validateMessage: PropTypes.node,
+        index: PropTypes.number
     };
 
     static defaultProps = {
@@ -92,10 +92,10 @@ class FileCard extends PureComponent<FileCardProps> {
         let content = null;
         switch (true) {
             case typeof validateMessage === 'string' && status === strings.FILE_STATUS_VALIDATING:
-                content = (<><Spin size="small" wrapperClassName={`${prefixCls }-file-card-icon-loading`} />{validateMessage}</>);
+                content = (<><Spin size="small" wrapperClassName={`${prefixCls}-file-card-icon-loading`} />{validateMessage}</>);
                 break;
             case typeof validateMessage === 'string':
-                content = (<><IconAlertCircle className={`${prefixCls }-file-card-icon-error`} />{validateMessage}</>);
+                content = (<><IconAlertCircle className={`${prefixCls}-file-card-icon-error`} />{validateMessage}</>);
                 break;
             case isElement(validateMessage):
                 content = validateMessage;
@@ -111,10 +111,10 @@ class FileCard extends PureComponent<FileCardProps> {
         let icon = null;
         switch (true) {
             case validateMessage && status === strings.FILE_STATUS_VALIDATING:
-                icon = (<Spin size="small" wrapperClassName={`${prefixCls }-picture-file-card-icon-loading`} />);
+                icon = (<Spin size="small" wrapperClassName={`${prefixCls}-picture-file-card-icon-loading`} />);
                 break;
             case validateMessage && (status === strings.FILE_STATUS_VALID_FAIL || status === strings.FILE_STATUS_UPLOAD_FAIL):
-                icon = (<div className={`${prefixCls }-picture-file-card-icon-error`}><ErrorSvg /></div>);
+                icon = (<div className={`${prefixCls}-picture-file-card-icon-error`}><ErrorSvg /></div>);
                 break;
             default:
                 break;
@@ -123,41 +123,50 @@ class FileCard extends PureComponent<FileCardProps> {
     }
 
     renderPic(locale: Locale['Upload']): ReactNode {
-        const { url, percent, status, disabled, style, onPreviewClick } = this.props;
-        const filePicCardCls = cls({
-            [`${prefixCls }-picture-file-card`]: true,
-            [`${prefixCls }-picture-file-card-disabled`]: disabled,
-            [`${prefixCls }-picture-file-card-show-pointer`]: typeof onPreviewClick !== 'undefined',
-        });
+        const { url, percent, status, disabled, style, onPreviewClick, showPicInfo, renderPicInfo, renderThumbnail, name, index } = this.props;
         const showProgress = status === strings.FILE_STATUS_UPLOADING && percent !== 100;
         const showRetry = status === strings.FILE_STATUS_UPLOAD_FAIL && this.props.showRetry;
         const showReplace = status === strings.FILE_STATUS_SUCCESS && this.props.showReplace;
-        const closeCls = `${prefixCls }-picture-file-card-close`;
+        const filePicCardCls = cls({
+            [`${prefixCls}-picture-file-card`]: true,
+            [`${prefixCls}-picture-file-card-disabled`]: disabled,
+            [`${prefixCls}-picture-file-card-show-pointer`]: typeof onPreviewClick !== 'undefined',
+            [`${prefixCls}-picture-file-card-error`]: status === strings.FILE_STATUS_UPLOAD_FAIL,
+            [`${prefixCls}-picture-file-card-uploading`]: showProgress
+        });
+        const closeCls = `${prefixCls}-picture-file-card-close`;
         const retry = (
             <div
-                className={`${prefixCls }-picture-file-card-retry`} onClick={e => this.onRetry(e)}>
-                <IconRefresh className={`${prefixCls }-picture-file-card-icon-retry`} />
+                className={`${prefixCls}-picture-file-card-retry`} onClick={e => this.onRetry(e)}>
+                <IconRefresh className={`${prefixCls}-picture-file-card-icon-retry`} />
             </div>
         );
         const replace = (
             <Tooltip trigger="hover" position="top" content={locale.replace} showArrow={false} spacing={4}>
                 <div
-                    className={`${prefixCls }-picture-file-card-replace`} onClick={(e): void => this.onReplace(e)}>
-                    <ReplaceSvg className={`${prefixCls }-picture-file-card-icon-replace`} />
+                    className={`${prefixCls}-picture-file-card-replace`} onClick={(e): void => this.onReplace(e)}>
+                    <ReplaceSvg className={`${prefixCls}-picture-file-card-icon-replace`} />
                 </div>
             </Tooltip>
 
         );
 
+        const picInfo = typeof renderPicInfo === 'function' ? renderPicInfo(this.props) : (
+            <div className={`${prefixCls }-picture-file-card-pic-info`}>{index + 1}</div>
+        );
+
+        const thumbnail = typeof renderThumbnail === 'function' ? renderThumbnail(this.props) : <img src={url} alt={`picture of ${name}`} />;
+
         return (
             <div className={filePicCardCls} style={style} onClick={onPreviewClick}>
-                <img src={url} />
+                {thumbnail}
                 {showProgress ? <Progress percent={percent} type="circle" size="small" orbitStroke={'#FFF'} /> : null}
                 {showRetry ? retry : null}
                 {showReplace && replace}
-                {disabled ? null : (
-                    <div className={closeCls} onClick={e => this.onRemove(e)}>
-                        <IconClose size="extra-small" />
+                {showPicInfo && picInfo}
+                {!disabled && (
+                    <div className={closeCls}>
+                        <IconClose size="extra-small" onClick={e => this.onRemove(e)} />
                     </div>
                 )}
                 {this.renderPicValidateMsg()}
@@ -165,6 +174,77 @@ class FileCard extends PureComponent<FileCardProps> {
         );
     }
 
+    renderFile(locale: Locale["Upload"]) {
+        const { name, size, percent, url, showRetry: propsShowRetry, showReplace: propsShowReplace, preview, previewFile, status, style, onPreviewClick } = this.props;
+        const fileCardCls = cls({
+            [`${prefixCls}-file-card`]: true,
+            [`${prefixCls}-file-card-fail`]: status === strings.FILE_STATUS_VALID_FAIL || status === strings.FILE_STATUS_UPLOAD_FAIL,
+            [`${prefixCls}-file-card-show-pointer`]: typeof onPreviewClick !== 'undefined',
+        });
+        const previewCls = cls({
+            [`${prefixCls}-file-card-preview`]: true,
+            [`${prefixCls}-file-card-preview-placeholder`]: !preview || previewFile
+        });
+        const infoCls = `${prefixCls}-file-card-info`;
+        const closeCls = `${prefixCls}-file-card-close`;
+        const replaceCls = `${prefixCls}-file-card-replace`;
+        const showProgress = !(percent === 100 || typeof percent === 'undefined') && status === strings.FILE_STATUS_UPLOADING;
+        // only show retry when upload fail & showRetry is true, no need to show during validate fail
+        const showRetry = status === strings.FILE_STATUS_UPLOAD_FAIL && propsShowRetry;
+        const showReplace = status === strings.FILE_STATUS_SUCCESS && propsShowReplace;
+        const fileSize = this.transSize(size);
+        let previewContent: ReactNode = preview ? (<img src={url} />) : (<IconFile size="large" />);
+        if (previewFile) {
+            previewContent = previewFile(this.props);
+        }
+        return (
+            <div className={fileCardCls} style={style} onClick={onPreviewClick}>
+                <div className={previewCls}>
+                    {previewContent}
+                </div>
+                <div className={`${infoCls}-main`}>
+                    <div className={`${infoCls}-main-text`}>
+                        <span className={`${infoCls}-name`}>
+                            {name}
+                        </span>
+                        <span>
+                            <span className={`${infoCls}-size`}>{fileSize}</span>
+                            {showReplace && (
+                                <Tooltip trigger="hover" position="top" showArrow={false} content={locale.replace}>
+                                    <IconButton
+                                        onClick={e => this.onReplace(e)}
+                                        type="tertiary"
+                                        theme="borderless"
+                                        size="small"
+                                        icon={<DirectorySvg />}
+                                        className={replaceCls}
+                                    />
+                                </Tooltip>
+                            )}
+
+                        </span>
+
+                    </div>
+                    {showProgress ? (<Progress percent={percent} style={{ width: '100%' }} />) : null}
+                    <div className={`${infoCls}-main-control`}>
+                        <span className={`${infoCls}-validate-message`}>
+                            {this.renderValidateMessage()}
+                        </span>
+                        {showRetry ? <span className={`${infoCls}-retry`} onClick={e => this.onRetry(e)}>{locale.retry}</span> : null}
+                    </div>
+                </div>
+                <IconButton
+                    onClick={e => this.onRemove(e)}
+                    type="tertiary"
+                    icon={<IconClose />}
+                    theme="borderless"
+                    size="small"
+                    className={closeCls}
+                />
+            </div>
+        );
+    }
+
     onRemove(e: MouseEvent): void {
         e.stopPropagation();
         this.props.onRemove(this.props, e);
@@ -181,89 +261,24 @@ class FileCard extends PureComponent<FileCardProps> {
     }
 
     render() {
-        const { name, size, percent, url, listType, preview, previewFile, status, style, onPreviewClick } = this.props;
-        const fileCardCls = cls({
-            [`${prefixCls}-file-card`]: true,
-            [`${prefixCls}-file-card-fail`]: status === strings.FILE_STATUS_VALID_FAIL || status === strings.FILE_STATUS_UPLOAD_FAIL,
-            [`${prefixCls}-file-card-show-pointer`]: typeof onPreviewClick !== 'undefined',
-        });
-        const previewCls = cls({
-            [`${prefixCls}-file-card-preview`]: true,
-            [`${prefixCls}-file-card-preview-placeholder`]: !preview || previewFile
-        });
-        const infoCls = `${prefixCls}-file-card-info`;
-        const closeCls = `${prefixCls}-file-card-close`;
-        const replaceCls = `${prefixCls}-file-card-replace`;
-        const showProgress = !(percent === 100 || typeof percent === 'undefined') && status === strings.FILE_STATUS_UPLOADING;
-        // only show retry when upload fail & showRetry is true, no need to show during validate fail
-        const showRetry = status === strings.FILE_STATUS_UPLOAD_FAIL && this.props.showRetry;
-        const showReplace = status === strings.FILE_STATUS_SUCCESS && this.props.showReplace;
-
+        const { listType } = this.props;
         if (listType === strings.FILE_LIST_PIC) {
             return (
                 <LocaleConsumer componentName="Upload">
-                    {(locale: Locale['Upload']): ReactNode => (this.renderPic(locale))}
+                    {(locale: Locale["Upload"]) => (this.renderPic(locale))}
                 </LocaleConsumer>
             );
         }
 
-        const fileSize = this.transSize(size);
-        let previewContent: ReactNode = preview ? (<img src={url} />) : (<IconFile size="large" />);
-        if (previewFile) {
-            previewContent = previewFile(this.props);
+        if (listType === strings.FILE_LIST_DEFAULT) {
+            return (
+                <LocaleConsumer componentName="Upload">
+                    {(locale: Locale["Upload"]) => (this.renderFile(locale))}
+                </LocaleConsumer>
+            );
         }
-        return (
-            <LocaleConsumer componentName="Upload">
-                {(locale: Locale['Upload']): ReactNode => (
-                    <div className={fileCardCls} style={style} onClick={onPreviewClick}>
-                        {/* <a target='_blank' href={url} className={infoCls} rel="noopener noreferrer"> */}
-                        <div className={previewCls}>
-                            {previewContent}
-                        </div>
-                        <div className={`${infoCls}-main`}>
-                            <div className={`${infoCls}-main-text`}>
-                                <span className={`${infoCls}-name`}>
-                                    {name}
-                                </span>
-                                <span>
-                                    <span className={`${infoCls}-size`}>{fileSize}</span>
-                                    {showReplace && (
-                                        <Tooltip trigger="hover" position="top" showArrow={false} content={locale.replace}>
-                                            <IconButton
-                                                onClick={(e): void => this.onReplace(e)}
-                                                type="tertiary"
-                                                theme="borderless"
-                                                size="small"
-                                                icon={<DirectorySvg />}
-                                                className={replaceCls}
-                                            />
-                                        </Tooltip>
-                                    )}
 
-                                </span>
-
-                            </div>
-                            {showProgress ? (<Progress percent={percent} style={{ width: '100%' }} />) : null}
-                            <div className={`${infoCls}-main-control`}>
-                                <span className={`${infoCls}-validate-message`}>
-                                    {this.renderValidateMessage()}
-                                </span>
-                                {showRetry ? <span className={`${infoCls}-retry`} onClick={e => this.onRetry(e)}>{locale.retry}</span> : null}
-                            </div>
-                        </div>
-                        {/* </a> */}
-                        <IconButton
-                            onClick={(e): void => this.onRemove(e)}
-                            type="tertiary"
-                            icon={<IconClose />}
-                            theme="borderless"
-                            size="small"
-                            className={closeCls}
-                        />
-                    </div>
-                )}
-            </LocaleConsumer>
-        );
+        return null;
     }
 }