@douyinfe/semi-ui 2.17.0-alpha.1 → 2.17.0

package/tagInput/index.tsx

@@ -11,7 +11,7 @@ import {
 } from 'lodash';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/tagInput/constants';
 import '@douyinfe/semi-foundation/tagInput/tagInput.scss';
-import TagInputFoundation, { TagInputAdapter } from '@douyinfe/semi-foundation/tagInput/foundation';
+import TagInputFoundation, { TagInputAdapter, OnSortEndProps } from '@douyinfe/semi-foundation/tagInput/foundation';
 import { ArrayElement } from '../_base/base';
 import { isSemiIcon } from '../_utils';
 import BaseComponent from '../_base/baseComponent';
@@ -19,12 +19,27 @@ import Tag from '../tag';
 import Input from '../input';
 import Popover, { PopoverProps } from '../popover';
 import Paragraph from '../typography/paragraph';
-import { IconClear } from '@douyinfe/semi-icons';
+import { IconClear, IconHandle } from '@douyinfe/semi-icons';
+import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
 
 export type Size = ArrayElement<typeof strings.SIZE_SET>;
 export type RestTagsPopoverProps = PopoverProps;
 type ValidateStatus = "default" | "error" | "warning";
 
+const SortableItem = SortableElement(props => props.item);
+
+const SortableList = SortableContainer(
+    ({ items }) => {
+        return (
+            <div style={{ display: 'flex', flexFlow: 'row wrap', }}>
+                {items.map((item, index) => (
+                    // @ts-ignore skip SortableItem type check
+                    <SortableItem key={item.key} index={index} item={item.item}></SortableItem>
+                ))}
+            </div>
+        );
+    });
+
 export interface TagInputProps {
     className?: string;
     defaultValue?: string[];
@@ -38,6 +53,8 @@ export interface TagInputProps {
     showContentTooltip?: boolean;
     allowDuplicates?: boolean;
     addOnBlur?: boolean;
+    draggable?: boolean;
+    expandRestTagsOnClick?: boolean;
     onAdd?: (addedValue: string[]) => void;
     onBlur?: (e: React.MouseEvent<HTMLInputElement>) => void;
     onChange?: (value: string[]) => void;
@@ -69,6 +86,7 @@ export interface TagInputState {
     inputValue?: string;
     focusing?: boolean;
     hovering?: boolean;
+    active?: boolean;
 }
 
 const prefixCls = cssClasses.PREFIX;
@@ -93,6 +111,8 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         separator: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
         showClear: PropTypes.bool,
         addOnBlur: PropTypes.bool,
+        draggable: PropTypes.bool,
+        expandRestTagsOnClick: PropTypes.bool,
         autoFocus: PropTypes.bool,
         renderTagItem: PropTypes.func,
         onBlur: PropTypes.func,
@@ -118,6 +138,8 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         allowDuplicates: true,
         showRestTagsPopover: true,
         autoFocus: false,
+        draggable: false,
+        expandRestTagsOnClick: true,
         showContentTooltip: true,
         separator: ',',
         size: 'default' as const,
@@ -134,7 +156,9 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
     };
 
     inputRef: React.RefObject<HTMLInputElement>;
+    tagInputRef: React.RefObject<HTMLDivElement>;
     foundation: TagInputFoundation;
+    clickOutsideHandler: any;
 
     constructor(props: TagInputProps) {
         super(props);
@@ -143,9 +167,12 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
             tagsArray: props.defaultValue || [],
             inputValue: '',
             focusing: false,
-            hovering: false
+            hovering: false,
+            active: false,
         };
         this.inputRef = React.createRef();
+        this.tagInputRef = React.createRef();
+        this.clickOutsideHandler = null;
     }
 
     static getDerivedStateFromProps(nextProps: TagInputProps, prevState: TagInputState) {
@@ -190,6 +217,12 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
             setHovering: (hovering: boolean) => {
                 this.setState({ hovering });
             },
+            setActive: (active: boolean) => {
+                this.setState({ active });
+            },
+            getClickOutsideHandler: () => {
+                return this.clickOutsideHandler;
+            },
             notifyBlur: (e: React.MouseEvent<HTMLInputElement>) => {
                 this.props.onBlur(e);
             },
@@ -211,6 +244,21 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
             notifyKeyDown: e => {
                 this.props.onKeyDown(e);
             },
+            registerClickOutsideHandler: cb => {
+                const clickOutsideHandler = (e: Event) => {
+                    const tagInputDom = this.tagInputRef && this.tagInputRef.current;
+                    const target = e.target as Element;
+                    if (tagInputDom && !tagInputDom.contains(target)) {
+                        cb(e);
+                    }
+                };
+                this.clickOutsideHandler = clickOutsideHandler;
+                document.addEventListener('click', clickOutsideHandler, false);
+            },
+            unregisterClickOutsideHandler: () => {
+                document.removeEventListener('click', this.clickOutsideHandler, false);
+                this.clickOutsideHandler = null;
+            },
         };
     }
 
@@ -218,7 +266,9 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         const { disabled, autoFocus, preventScroll } = this.props;
         if (!disabled && autoFocus) {
             this.inputRef.current.focus({ preventScroll });
+            this.foundation.handleClick();
         }
+        this.foundation.init();
     }
 
     handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -254,6 +304,10 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         this.foundation.handleInputMouseLeave();
     };
 
+    handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+        this.foundation.handleClick(e);
+    };
+
     handleInputMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {
         this.foundation.handleInputMouseEnter();
     };
@@ -338,34 +392,37 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         );
     }
 
-    renderTags() {
+    getAllTags = () => {
         const {
             size,
             disabled,
             renderTagItem,
-            maxTagCount,
             showContentTooltip,
-            showRestTagsPopover,
-            restTagsPopoverProps = {},
+            draggable,
         } = this.props;
-        const { tagsArray } = this.state;
+        const { tagsArray, active } = this.state;
+        const showIconHandler = active && draggable;
         const tagCls = cls(`${prefixCls}-wrapper-tag`, {
             [`${prefixCls}-wrapper-tag-size-${size}`]: size,
+            [`${prefixCls}-wrapper-tag-icon`]: showIconHandler,
         });
         const typoCls = cls(`${prefixCls}-wrapper-typo`, {
-            [`${prefixCls}-wrapper-typo-disabled`]: disabled
+            [`${prefixCls}-wrapper-typo-disabled`]: disabled,
         });
-        const restTagsCls = cls(`${prefixCls}-wrapper-n`, {
-            [`${prefixCls}-wrapper-n-disabled`]: disabled
+        const itemWrapperCls = cls({
+            [`${prefixCls}-drag-item`]: showIconHandler,
+            [`${prefixCls}-wrapper-tag-icon`]: showIconHandler,
         });
-        const restTags: Array<React.ReactNode> = [];
-        const tags: Array<React.ReactNode> = [];
-        tagsArray.forEach((value, index) => {
-            let item = null;
+        const DragHandle = SortableHandle(() => <IconHandle className={`${prefixCls}-drag-handler`}></IconHandle>);
+        return tagsArray.map((value, index) => {
+            const elementKey = showIconHandler ? value : `${index}${value}`;
             if (isFunction(renderTagItem)) {
-                item = renderTagItem(value, index);
+                return showIconHandler? (<div className={itemWrapperCls} key={elementKey}>
+                    <DragHandle />
+                    {renderTagItem(value, index)}
+                </div>) : renderTagItem(value, index);
             } else {
-                item = (
+                return (
                     <Tag
                         className={tagCls}
                         color="white"
@@ -375,10 +432,11 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
                             !disabled && this.handleTagClose(index);
                         }}
                         closable={!disabled}
-                        key={`${index}${value}`}
+                        key={elementKey}
                         visible
                         aria-label={`${!disabled ? 'Closable ' : ''}Tag: ${value}`}
                     >
+                        {showIconHandler && <DragHandle />}
                         <Paragraph
                             className={typoCls}
                             ellipsis={{ showTooltip: showContentTooltip, rows: 1 }}
@@ -388,17 +446,47 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
                     </Tag>
                 );
             }
-            if (maxTagCount && index >= maxTagCount) {
-                restTags.push(item);
-            } else {
-                tags.push(item);
-            }
         });
+    }
 
+    onSortEnd = (callbackProps: OnSortEndProps) => {
+        this.foundation.handleSortEnd(callbackProps);
+    }
+
+    renderTags() {
+        const {
+            disabled,
+            maxTagCount,
+            showRestTagsPopover,
+            restTagsPopoverProps = {},
+            draggable,
+            expandRestTagsOnClick,
+        } = this.props;
+        const { tagsArray, active } = this.state;
+        const restTagsCls = cls(`${prefixCls}-wrapper-n`, {
+            [`${prefixCls}-wrapper-n-disabled`]: disabled,
+        });
+        const allTags = this.getAllTags();
+        let restTags: Array<React.ReactNode> = [];
+        let tags: Array<React.ReactNode> = [...allTags];
+        if (( !active || !expandRestTagsOnClick) && maxTagCount && maxTagCount < allTags.length){
+            tags = allTags.slice(0, maxTagCount);
+            restTags = allTags.slice(maxTagCount);
+        }
+    
         const restTagsContent = (
             <span className={restTagsCls}>+{tagsArray.length - maxTagCount}</span>
         );
 
+        const sortableListItems = allTags.map((item, index) => ({
+            item: item,
+            key: tagsArray[index],
+        }));
+
+        if (active && draggable && sortableListItems.length > 0) {
+            // @ts-ignore skip SortableItem type check
+            return <SortableList useDragHandle items={sortableListItems} onSortEnd={this.onSortEnd} axis={"xy"} />;
+        } 
         return (
             <>
                 {tags}
@@ -426,11 +514,17 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
 
     blur() {
         this.inputRef.current.blur();
+        // unregister clickOutside event 
+        this.foundation.clickOutsideCallBack();
     }
 
     focus() {
-        const { preventScroll } = this.props;
+        const { preventScroll, disabled } = this.props;
         this.inputRef.current.focus({ preventScroll });
+        if (!disabled) {
+            // register clickOutside event 
+            this.foundation.handleClick();
+        }
     }
 
     render() {
@@ -447,11 +541,12 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
             focusing,
             hovering,
             tagsArray,
-            inputValue
+            inputValue,
+            active,
         } = this.state;
 
         const tagInputCls = cls(prefixCls, className, {
-            [`${prefixCls}-focus`]: focusing,
+            [`${prefixCls}-focus`]: focusing || active,
             [`${prefixCls}-disabled`]: disabled,
             [`${prefixCls}-hover`]: hovering && !disabled,
             [`${prefixCls}-error`]: validateStatus === 'error',
@@ -463,7 +558,9 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         const wrapperCls = cls(`${prefixCls}-wrapper`);
 
         return (
+            // eslint-disable-next-line 
             <div
+                ref={this.tagInputRef}
                 style={style}
                 className={tagInputCls}
                 aria-disabled={disabled}
@@ -475,6 +572,9 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
                 onMouseLeave={e => {
                     this.handleInputMouseLeave(e);
                 }}
+                onClick={e => {   
+                    this.handleClick(e);
+                }}
             >
                 {this.renderPrefix()}
                 <div className={wrapperCls}>

package/timePicker/TimePicker.tsx

@@ -248,7 +248,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
                         this.timePickerRef.current.contains(e.target as Node);
                     if (!isInTimepicker && !isInPanel) {
                         const clickedOutside = true;
-                        this.foundation.hanldePanelClose(clickedOutside, e);
+                        this.foundation.handlePanelClose(clickedOutside, e);
                     }
                 };
                 document.addEventListener('mousedown', this.clickOutSideHandler);

package/tooltip/index.tsx

@@ -75,8 +75,10 @@ export interface TooltipProps extends BaseProps {
     guardFocus?: boolean;
     returnFocusOnClose?: boolean;
     onEscKeyDown?: (e: React.KeyboardEvent) => void;
+    disableArrowKeyDown?: boolean; 
     wrapperId?: string;
     preventScroll?: boolean;
+    disableFocusListener?: boolean;
 }
 interface TooltipState {
     visible: boolean;
@@ -162,6 +164,8 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         guardFocus: false,
         returnFocusOnClose: false,
         onEscKeyDown: noop,
+        disableFocusListener: false,
+        disableArrowKeyDown: false,
     };
 
     eventManager: Event;
@@ -716,8 +720,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
                     ref.current = node;
                 }
             },
-            tabIndex: 0, // a11y keyboard
-            'data-popupid': id
+            tabIndex:  (children as React.ReactElement).props.tabIndex || 0 // a11y keyboard, in some condition select's tabindex need to -1 or 0 
         });
 
         // If you do not add a layer of div, in order to bind the events and className in the tooltip, you need to cloneElement children, but this time it may overwrite the children's original ref reference

package/typography/_story/typography.stories.js

@@ -3,7 +3,7 @@ import withPropsCombinations from 'react-storybook-addon-props-combinations';
 
 import Icon from '../../icons';
 import Typography from '../index';
-import { IconLink, IconTick, IconPlusCircle } from '@douyinfe/semi-icons';
+import { IconLink, IconTick } from '@douyinfe/semi-icons';
 
 export default {
   title: 'Typography'
@@ -51,22 +51,10 @@ export const _Text = () => (
     <br />
     <Text link={{ href: 'https://semi.design/' }}>打开网站</Text>
     <br />
-    {/* 用户未通过icon API设置icon，而是通过children传入，则需要手动处理内容的对齐 */}
     <Text link>
-      <span style={ {display: 'inline-flex', alignItems: 'center' }}  >
-        <IconLink style={{ marginRight: 4 }}/>
-        网页链接
-      </span>
+      <IconLink />
+      网页链接
     </Text>
-    <br />
-    <Text link icon={<IconLink />} underline>带下划线的网页链接</Text>
-    <br />
-    <Text icon={<IconLink />} underline>带下划线的内容</Text>
-    <br />
-    <Text icon={<IconPlusCircle />} style={{ color: 'purple'}}>添加条件</Text>
-    <br />
-    <Text icon={<IconPlusCircle />} style={{ color: 'purple'}} size={'small'}>添加条件</Text>
-    <br />
   </div>
 );
 

package/typography/base.tsx

@@ -1,4 +1,4 @@
-import React, { Component, ReactElement } from 'react';
+import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
@@ -54,15 +54,15 @@ const prefixCls = cssClasses.PREFIX;
 const ELLIPSIS_STR = '...';
 
 const wrapperDecorations = (props: BaseTypographyProps, content: React.ReactNode) => {
-    const { mark, code, underline, strong, link, disabled, icon, } = props;
+    const { mark, code, underline, strong, link, disabled } = props;
     let wrapped = content;
     const wrap = (isNeeded: boolean | LinkType, tag: string) => {
-        let wrapProps = icon ? { style: { display: 'inline-flex', alignItems: 'center' } } : {};
+        let wrapProps = {};
         if (!isNeeded) {
             return;
         }
         if (typeof isNeeded === 'object') {
-            wrapProps = { ...isNeeded } as any;
+            wrapProps = { ...isNeeded };
         }
         wrapped = React.createElement(tag, wrapProps, wrapped);
     };
@@ -72,11 +72,6 @@ const wrapperDecorations = (props: BaseTypographyProps, content: React.ReactNode
     wrap(strong, 'strong');
     wrap(props.delete, 'del');
     wrap(link, disabled ? 'span' : 'a');
-    // When the content is not wrapped, and there is more than one element in the content (one of which is an icon), 
-    // use span to wrap the content, so that the content in the span is vertically aligned
-    if (wrapped === content && icon) {
-        wrap(true, 'span');
-    }
     return wrapped;
 };
 

package/typography/text.tsx

@@ -4,13 +4,9 @@ import { strings } from '@douyinfe/semi-foundation/typography/constants';
 import Base from './base';
 import { Ellipsis, TypographyBaseSize, TypographyBaseType, OmitTypographyProps } from './interface';
 import { CopyableConfig, LinkType } from './title';
-import cls from 'classnames';
-import { cssClasses } from '@douyinfe/semi-foundation/typography/constants';
 
 type OmitTextProps = OmitTypographyProps;
 
-const prefixCls = cssClasses.PREFIX;
-
 export interface TextProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, OmitTextProps> {
     children?: React.ReactNode;
     className?: string;
@@ -67,10 +63,6 @@ export default class Text extends PureComponent<TextProps> {
     };
 
     render() {
-        const className = cls(this.props.className, {
-            [`${prefixCls}-text`]: true,
-            [`${prefixCls}-text-icon`]: this.props.icon,
-        });
-        return <Base component={'span'} {...this.props} className={className} />;
+        return <Base component={'span'} {...this.props} />;
     }
 }

package/upload/__test__/upload.test.js

@@ -45,7 +45,7 @@ const defaultFileList = [
         status: 'success',
         size: '130KB',
         preview: true,
-        url: 'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dbf7351bb779433d17c4f50478cf42f7.jpg',
+        url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
     },
     {
         uid: '2',
@@ -53,7 +53,7 @@ const defaultFileList = [
         status: 'uploadFail',
         size: '222KB',
         preview: false,
-        url: 'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dbf7351bb779433d17c4f50478cf42f7.jpg',
+        url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
     },
 ];
 
@@ -448,7 +448,7 @@ describe('Upload', () => {
             size: '222KB',
             preview: true,
             fileInstance,
-            url: 'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dbf7351bb779433d17c4f50478cf42f7.jpg',
+            url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
         };
         const props = {
             fileList: [file],
@@ -502,7 +502,7 @@ describe('Upload', () => {
             size: '222KB',
             preview: true,
             fileInstance,
-            url: 'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dbf7351bb779433d17c4f50478cf42f7.jpg',
+            url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
         };
         let props = {
             defaultFileList: [file],
@@ -535,7 +535,7 @@ describe('Upload', () => {
                     status: 'error',
                     size: '222KB',
                     preview: true,
-                    url: 'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dbf7351bb779433d17c4f50478cf42f7.jpg',
+                    url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
                 },
             ],
         };
@@ -756,7 +756,7 @@ describe('Upload', () => {
                     status: 'success',
                     size: '130KB',
                     preview: true,
-                    url: 'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dbf7351bb779433d17c4f50478cf42f7.jpg',
+                    url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
                 },
             ],
             showReplace: true,
@@ -786,7 +786,7 @@ describe('Upload', () => {
                     status: 'success',
                     size: '130KB',
                     preview: true,
-                    url: 'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dbf7351bb779433d17c4f50478cf42f7.jpg',
+                    url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
                 },
             ],
         };
@@ -839,7 +839,7 @@ describe('Upload', () => {
                     status: 'success',
                     size: '130KB',
                     preview: true,
-                    url: 'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dbf7351bb779433d17c4f50478cf42f7.jpg',
+                    url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
                 },
             ],
         };
@@ -933,7 +933,7 @@ describe('Upload', () => {
                     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',
+                    url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
                 },
             ],
             showPicInfo: true,

package/upload/_story/upload.stories.js

@@ -258,7 +258,7 @@ const defaultFileList = [
     status: 'success',
     size: '130kb',
     url:
-      'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg',
+      'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
   },
   {
     uid: '2',
@@ -266,7 +266,7 @@ const defaultFileList = [
     status: 'uploadFail',
     size: '222kb',
     url:
-      'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg',
+      'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
   },
   {
     uid: '3',
@@ -275,7 +275,7 @@ const defaultFileList = [
     percent: 50,
     size: '222kb',
     url:
-      'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg',
+      'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
   },
   {
     uid: '4',
@@ -284,7 +284,7 @@ const defaultFileList = [
     validateMessage: '文件过大',
     size: '222kb',
     url:
-      'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg',
+      'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
   },
   {
     uid: '5',
@@ -293,7 +293,7 @@ const defaultFileList = [
     validateMessage: '校验中',
     size: '222kb',
     url:
-      'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg',
+      'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
   },
 ];