@douyinfe/semi-ui 2.3.1 → 2.5.0-beta.0

package/treeSelect/_story/treeSelect.stories.js

@@ -1165,3 +1165,245 @@ export const DisabledStrictly = () => (
 DisabledStrictly.story = {
   name: 'disabledStrictly',
 };
+
+
+export const CheckRelationDemo = () => {
+  const treeData = [
+    {
+        label: 'Asia',
+        value: 'Asia',
+        key: '0',
+        children: [
+            {
+                label: 'China',
+                value: 'China',
+                key: '0-0',
+                children: [
+                    {
+                        label: 'Beijing',
+                        value: 'Beijing',
+                        key: '0-0-0',
+                    },
+                    {
+                        label: 'Shanghai',
+                        value: 'Shanghai',
+                        key: '0-0-1',
+                    },
+                    {
+                        label: 'Chengdu',
+                        value: 'Chengdu',
+                        key: '0-0-2',
+                    },
+                ],
+            },
+            {
+                label: 'Japan',
+                value: 'Japan',
+                key: '0-1',
+                children: [
+                    {
+                        label: 'Osaka',
+                        value: 'Osaka',
+                        key: '0-1-0'
+                    }
+                ]
+            },
+        ],
+    },
+    {
+        label: 'North America',
+        value: 'North America',
+        key: '1',
+        children: [
+            {
+                label: 'United States',
+                value: 'United States',
+                key: '1-0'
+            },
+            {
+                label: 'Canada',
+                value: 'Canada',
+                key: '1-1'
+            }
+        ]
+    }
+  ];
+  const [value, setValue] = useState('China');
+  const [value2, setValue2] = useState();
+  const [value3, setValue3] = useState();
+  const style = {
+    width: 300,
+  };
+  const dropdownStyle = {
+    maxHeight: 400,
+    overflow: 'auto'
+  };
+  const handleChange = value => {
+    console.log(value);
+    setValue(value);
+  };
+  const handleChange2 = value => {
+    console.log(value);
+    setValue2(value);
+  };
+  const handleChange3 = value => {
+    console.log(value);
+    setValue3(value);
+  };
+  return (
+    <>
+      <div>checkRelation='unRelated'</div>
+      <TreeSelect
+        dropdownStyle={dropdownStyle}
+        treeData={treeData}
+        multiple
+        checkRelation='unRelated'
+        defaultExpandAll
+        style={style}
+      />
+      <br /><br />
+      <div>checkRelation='unRelated' + maxTagCount=2</div>
+      <TreeSelect
+        dropdownStyle={dropdownStyle}
+        treeData={treeData}
+        multiple
+        maxTagCount={2}
+        checkRelation='unRelated'
+        defaultExpandAll
+        style={style}
+      />
+      <br /><br />
+      <div>checkRelation='unRelated' + maxTagCount=2 + 开启搜索</div>
+      <TreeSelect
+        dropdownStyle={dropdownStyle}
+        treeData={treeData}
+        multiple
+        maxTagCount={2}
+        filterTreeNode
+        checkRelation='unRelated'
+        defaultExpandAll
+        style={style}
+      />
+      <br /><br />
+      <div>checkRelation='unRelated' + maxTagCount=2 + 开启搜索 + searchBox in trigger</div>
+      <TreeSelect
+        dropdownStyle={dropdownStyle}
+        treeData={treeData}
+        multiple
+        maxTagCount={2}
+        filterTreeNode
+        checkRelation='unRelated'
+        searchPosition='trigger'
+        defaultExpandAll
+        style={style}
+      />
+      <br /><br />
+      <div>checkRelation='unRelated' + 中国节点为 disabled</div>
+      <TreeSelect
+        dropdownStyle={dropdownStyle}
+        treeData={treeDataWithoutValue}
+        multiple
+        checkRelation='unRelated'
+        defaultExpandAll
+        style={style}
+      />
+      <br /><br />
+      <div>checkRelation='unRelated' + 中国节点为 disabled + 严格禁用</div>
+      <TreeSelect
+        dropdownStyle={dropdownStyle}
+        treeData={treeDataWithoutValue}
+        multiple
+        checkRelation='unRelated'
+        defaultExpandAll
+        disableStrictly
+        style={style}
+      />
+      <br /><br />
+      <div>checkRelation='unRelated' + defaultValue 为 China</div>
+      <TreeSelect
+        dropdownStyle={dropdownStyle}
+        treeData={treeData}
+        multiple
+        checkRelation='unRelated'
+        defaultExpandAll
+        style={style}
+        defaultValue='China'
+      />
+      <br /><br />
+      <div>checkRelation='unRelated' + defaultValue 为 China + 开启搜索</div>
+      <TreeSelect
+        dropdownStyle={dropdownStyle}
+        treeData={treeData}
+        multiple
+        filterTreeNode
+        checkRelation='unRelated'
+        defaultExpandAll
+        style={style}
+        defaultValue='China'
+      />
+      <br /><br />
+      <div>checkRelation='unRelated' + defaultValue 为 China + 开启搜索 + searchBox in trigger + showClear</div>
+      <TreeSelect
+        dropdownStyle={dropdownStyle}
+        treeData={treeData}
+        multiple
+        filterTreeNode
+        showClear
+        checkRelation='unRelated'
+        defaultExpandAll
+        style={style}
+        searchPosition='trigger'
+        defaultValue='China'
+      />
+      <br /><br />
+      <div>checkRelation='unRelated' + 受控 + value 初始为 China</div>
+      <TreeSelect
+        dropdownStyle={dropdownStyle}
+        treeData={treeData}
+        multiple
+        checkRelation='unRelated'
+        defaultExpandAll
+        style={style}
+        value={value}
+        onChange={handleChange}
+      />
+      <br /><br />
+      <div>checkRelation='unRelated' + 受控 + onChangeWithObject</div>
+      <TreeSelect
+        dropdownStyle={dropdownStyle}
+        treeData={treeData}
+        multiple
+        checkRelation='unRelated'
+        defaultExpandAll
+        style={style}
+        value={value2}
+        onChangeWithObject
+        onChange={handleChange2}
+      />
+      <br /><br />
+      <div>checkRelation='unRelated' + 受控 + leafOnly，此时 leafOnly 失效</div>
+      <TreeSelect
+        dropdownStyle={dropdownStyle}
+        leafOnly
+        treeData={treeData}
+        multiple
+        checkRelation='unRelated'
+        defaultExpandAll
+        style={style}
+        value={value3}
+        onChange={handleChange3}
+      />
+      <br /><br />
+      <div>checkRelation='unRelated' + onSelect </div>
+      <TreeSelect
+        dropdownStyle={dropdownStyle}
+        treeData={treeData}
+        multiple
+        checkRelation='unRelated'
+        defaultExpandAll
+        style={style}
+        onSelect={(value,status,node)=>console.log('select', value, status, node)}
+      />
+    </>
+  );
+};

package/treeSelect/index.tsx

@@ -23,7 +23,8 @@ import {
     getValueOrKey,
     normalizeKeyList,
     calcDisabledKeys,
-    normalizeValue
+    normalizeValue,
+    updateKeys,
 } from '@douyinfe/semi-foundation/tree/treeUtil';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/treeSelect/constants';
 import { numbers as popoverNumbers } from '@douyinfe/semi-foundation/popover/constants';
@@ -83,22 +84,22 @@ export type RenderSelectedItemInMultiple = (
 export type RenderSelectedItem = RenderSelectedItemInSingle | RenderSelectedItemInMultiple;
 
 export type OverrideCommonProps =
-'renderFullLabel'
-| 'renderLabel'
-| 'defaultValue'
-| 'emptyContent'
-| 'filterTreeNode'
-| 'style'
-| 'treeData'
-| 'value'
-| 'onExpand';
+    'renderFullLabel'
+    | 'renderLabel'
+    | 'defaultValue'
+    | 'emptyContent'
+    | 'filterTreeNode'
+    | 'style'
+    | 'treeData'
+    | 'value'
+    | 'onExpand';
 
 /**
 * Type definition description:
 * TreeSelectProps inherits some properties from BasicTreeSelectProps (from foundation) and TreeProps (from semi-ui-react).
 */
 // eslint-disable-next-line max-len
-export interface TreeSelectProps extends Omit<BasicTreeSelectProps, OverrideCommonProps | 'validateStatus' | 'searchRender'>, Pick<TreeProps, OverrideCommonProps>{
+export interface TreeSelectProps extends Omit<BasicTreeSelectProps, OverrideCommonProps | 'validateStatus' | 'searchRender'>, Pick<TreeProps, OverrideCommonProps> {
     'aria-describedby'?: React.AriaAttributes['aria-describedby'];
     'aria-errormessage'?: React.AriaAttributes['aria-errormessage'];
     'aria-invalid'?: React.AriaAttributes['aria-invalid'];
@@ -145,10 +146,10 @@ export interface TreeSelectProps extends Omit<BasicTreeSelectProps, OverrideComm
 }
 
 export type OverrideCommonState =
-'keyEntities'
-| 'treeData'
-| 'disabledKeys'
-| 'flattenNodes';
+    'keyEntities'
+    | 'treeData'
+    | 'disabledKeys'
+    | 'flattenNodes';
 
 // eslint-disable-next-line max-len
 export interface TreeSelectState extends Omit<BasicTreeSelectInnerData, OverrideCommonState | 'prevProps'>, Pick<TreeState, OverrideCommonState> {
@@ -241,7 +242,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         outerBottomSlot: PropTypes.node,
         outerTopSlot: PropTypes.node,
         onVisibleChange: PropTypes.func,
-        expandAction: PropTypes.oneOf(['click' as const, 'doubleClick'  as const, false as const]),
+        expandAction: PropTypes.oneOf(['click' as const, 'doubleClick' as const, false as const]),
         searchPosition: PropTypes.oneOf([strings.SEARCH_POSITION_DROPDOWN, strings.SEARCH_POSITION_TRIGGER]),
         clickToHide: PropTypes.bool,
         renderLabel: PropTypes.func,
@@ -250,6 +251,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         optionListStyle: PropTypes.object,
         searchRender: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
         renderSelectedItem: PropTypes.func,
+        checkRelation: PropTypes.string,
         'aria-label': PropTypes.string,
     };
 
@@ -279,6 +281,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         expandAction: false,
         clickToHide: true,
         searchAutoFocus: false,
+        checkRelation: 'related',
         'aria-label': 'TreeSelect'
     };
     inputRef: React.RefObject<typeof Input>;
@@ -307,6 +310,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
             selectedKeys: [],
             checkedKeys: new Set(),
             halfCheckedKeys: new Set(),
+            realCheckedKeys: new Set([]),
             disabledKeys: new Set(),
             motionKeys: new Set([]),
             motionType: 'hide',
@@ -362,7 +366,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         if (
             treeData &&
             props.motion &&
-            !isEqual(new Set(Object.keys(newState.keyEntities)), new Set(Object.keys(prevState.keyEntities)))
+            !isEqual(Object.keys(newState.keyEntities), Object.keys(prevState.keyEntities))
         ) {
             if (prevProps && props.motion) {
                 newState.motionKeys = new Set([]);
@@ -432,11 +436,15 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
                 );
             } else if (treeData) {
                 // If `treeData` changed, we also need check it
-                newState.selectedKeys = findKeysForValues(
-                    normalizeValue(props.value, withObject) || '',
-                    valueEntities,
-                    isMultiple
-                );
+                if (props.value) {
+                    newState.selectedKeys = findKeysForValues(
+                        normalizeValue(props.value, withObject) || '',
+                        valueEntities,
+                        isMultiple
+                    );
+                } else {
+                    newState.selectedKeys = updateKeys(prevState.selectedKeys, keyEntities);
+                }
             }
         } else {
             // checkedKeys: multiple mode controlled || data changed
@@ -456,18 +464,26 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
                 );
             } else if (treeData) {
                 // If `treeData` changed, we also need check it
-                checkedKeyValues = findKeysForValues(
-                    normalizeValue(props.value, withObject) || [],
-                    valueEntities,
-                    isMultiple
-                );
+                if (props.value) {
+                    checkedKeyValues = findKeysForValues(
+                        normalizeValue(props.value, withObject) || [],
+                        valueEntities,
+                        isMultiple
+                    );
+                } else {
+                    checkedKeyValues = updateKeys(prevState.checkedKeys, keyEntities);
+                }
             }
 
             if (checkedKeyValues) {
-                const { checkedKeys, halfCheckedKeys } = calcCheckedKeys(checkedKeyValues, keyEntities);
+                if (props.checkRelation === 'unRelated') {
+                    newState.realCheckedKeys = new Set(checkedKeyValues);
+                } else if (props.checkRelation === 'related') {
+                    const { checkedKeys, halfCheckedKeys } = calcCheckedKeys(checkedKeyValues, keyEntities);
 
-                newState.checkedKeys = checkedKeys;
-                newState.halfCheckedKeys = halfCheckedKeys;
+                    newState.checkedKeys = checkedKeys;
+                    newState.halfCheckedKeys = halfCheckedKeys;
+                }
             }
         }
 
@@ -482,7 +498,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         }
 
         // ================ disableStrictly =================
-        if (treeData && props.disableStrictly) {
+        if (treeData && props.disableStrictly && props.checkRelation === 'related') {
             newState.disabledKeys = calcDisabledKeys(keyEntities);
         }
 
@@ -566,7 +582,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
                     this.foundation.handleNodeLoad(loadedKeys, loadingKeys, data, resolve));
             },
             updateState: states => {
-                this.setState({ ...states });
+                this.setState({ ...states } as TreeSelectState);
             },
             openMenu: () => {
                 this.setState({ isOpen: true }, () => {
@@ -607,7 +623,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
             toggleHovering: bool => {
                 this.setState({ isHovering: bool });
             },
-            updateInputFocus: bool => {} // eslint-disable-line
+            updateInputFocus: bool => { } // eslint-disable-line
         };
     }
 
@@ -667,24 +683,39 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         this.foundation.handleSelectionEnterPress(e);
     };
 
+    hasValue = (): boolean => {
+        const { multiple, checkRelation } = this.props;
+        const { realCheckedKeys, checkedKeys, selectedKeys } = this.state;
+        let hasValue = false;
+        if (multiple) {
+            if (checkRelation === 'related') {
+                hasValue = Boolean(checkedKeys.size);
+            } else if (checkRelation === 'unRelated') {
+                hasValue = Boolean(realCheckedKeys.size);
+            }
+        } else {
+            hasValue = Boolean(selectedKeys.length);
+        }
+        return hasValue;
+    }
+
     showClearBtn = () => {
-        const { searchPosition } = this.props;
-        const { inputValue } = this.state;
+        const { showClear, disabled, searchPosition } = this.props;
+        const { inputValue, isOpen, isHovering } = this.state;
         const triggerSearchHasInputValue = searchPosition === strings.SEARCH_POSITION_TRIGGER && inputValue;
-        const { showClear, disabled, multiple } = this.props;
-        const { selectedKeys, checkedKeys, isOpen, isHovering } = this.state;
-        const hasValue = multiple ? Boolean(checkedKeys.size) : Boolean(selectedKeys.length);
-        return showClear && (hasValue || triggerSearchHasInputValue) && !disabled && (isOpen || isHovering);
+
+        return showClear && (this.hasValue() || triggerSearchHasInputValue) && !disabled && (isOpen || isHovering);
     };
 
     renderTagList = () => {
-        const { checkedKeys, keyEntities, disabledKeys } = this.state;
+        const { checkedKeys, keyEntities, disabledKeys, realCheckedKeys } = this.state;
         const {
             treeNodeLabelProp,
             leafOnly,
             disabled,
             disableStrictly,
             size,
+            checkRelation,
             renderSelectedItem: propRenderSelectedItem
         } = this.props;
         const renderSelectedItem = isFunction(propRenderSelectedItem) ?
@@ -693,7 +724,12 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
                 isRenderInTag: true,
                 content: get(item, treeNodeLabelProp, null)
             });
-        const renderKeys = normalizeKeyList([...checkedKeys], keyEntities, leafOnly);
+        let renderKeys = [];
+        if (checkRelation === 'related') {
+            renderKeys = normalizeKeyList([...checkedKeys], keyEntities, leafOnly);
+        } else if (checkRelation === 'unRelated') {
+            renderKeys = [...realCheckedKeys];
+        }
         const tagList: Array<React.ReactNode> = [];
         // eslint-disable-next-line @typescript-eslint/no-shadow
         renderKeys.forEach((key: TreeNodeData['key']) => {
@@ -769,15 +805,13 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
             searchPosition,
             filterTreeNode,
         } = this.props;
-        const { selectedKeys, checkedKeys } = this.state;
-        const hasValue = multiple ? Boolean(checkedKeys.size) : Boolean(selectedKeys.length);
         const isTriggerPositionSearch = filterTreeNode && searchPosition === strings.SEARCH_POSITION_TRIGGER;
         // searchPosition = trigger
         if (isTriggerPositionSearch) {
             return multiple ? this.renderTagInput() : this.renderSingleTriggerSearch();
         }
         // searchPosition = dropdown and single seleciton
-        if (!multiple || !hasValue) {
+        if (!multiple || !this.hasValue()) {
             const renderText = this.foundation.getRenderTextInSingle();
             const spanCls = cls({
                 [`${prefixcls}-selection-placeholder`]: !renderText,
@@ -837,11 +871,11 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         const clearCls = cls(`${prefixcls}-clearbtn`);
         if (showClearBtn) {
             return (
-                <div 
+                <div
                     role='button'
-                    tabIndex={0} 
-                    aria-label="Clear TreeSelect value" 
-                    className={clearCls} 
+                    tabIndex={0}
+                    aria-label="Clear TreeSelect value"
+                    className={clearCls}
                     onClick={this.handleClear}
                     onKeyPress={this.handleClearEnterPress}
                 >
@@ -953,7 +987,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
                 onKeyPress={this.handleSelectionEnterPress}
                 aria-invalid={this.props['aria-invalid']}
                 aria-errormessage={this.props['aria-errormessage']}
-                aria-label={this.props['aria-label']} 
+                aria-label={this.props['aria-label']}
                 aria-labelledby={this.props['aria-labelledby']}
                 aria-describedby={this.props['aria-describedby']}
                 aria-required={this.props['aria-required']}
@@ -1005,7 +1039,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
             });
         if (isFunction(renderSelectedItem)) {
             const { content, isRenderInTag } = treeNodeLabelProp in item && item ?
-                (renderSelectedItem as RenderSelectedItemInMultiple)(item, { index: idx, onClose }):
+                (renderSelectedItem as RenderSelectedItemInMultiple)(item, { index: idx, onClose }) :
                 null;
             if (isRenderInTag) {
                 return <Tag {...tagProps}>{content}</Tag>;
@@ -1028,13 +1062,20 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
             searchAutoFocus,
             placeholder,
             maxTagCount,
+            checkRelation,
         } = this.props;
         const {
             keyEntities,
             checkedKeys,
-            inputValue
+            inputValue,
+            realCheckedKeys,
         } = this.state;
-        const keyList = normalizeKeyList(checkedKeys, keyEntities, leafOnly);
+        let keyList = [];
+        if (checkRelation === 'related') {
+            keyList = normalizeKeyList(checkedKeys, keyEntities, leafOnly);
+        } else if (checkRelation === 'unRelated') {
+            keyList = [...realCheckedKeys];
+        }
         return (
             <TagInput
                 maxTagCount={maxTagCount}

package/typography/_story/typography.stories.js

@@ -309,6 +309,14 @@ export const EllipsisMultiple = () => (
       Web 应用。 区别于其他的设计系统而言，Semi Design
       以用户中心、内容优先、设计人性化为设计理念，具有四大优势。
     </Paragraph>
+    <br />
+    <Paragraph ellipsis={{ rows: 3, expandable: true }} style={{ width: 300, whiteSpace: 'pre-line' }}>
+      {'这是一个多行截断的\n例子： Semi Design 是由互娱社区\n前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。 区别于其他的设计系统而言，Semi Design 以用户中心、内容优先、设计人性化为设计理念，具有四大优势。'}
+    </Paragraph>
+    <br />
+    <Paragraph ellipsis={{ rows: 3, expandable: true }} style={{ width: 300, whiteSpace: 'pre-wrap' }}>
+      {'这是一个多行截断的\n例子： Semi Des    ign 是由互               娱社区\n前端团队与 UED      团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。 区别于其他的设计系统而言，Semi Design 以用户中心、内容优先、设计人性化为设计理念，具有四大优势。'}
+    </Paragraph>
   </div>
 );
 

package/typography/util.tsx

@@ -63,7 +63,6 @@ const getRenderText = (
 
     // clean up css overflow
     ellipsisContainer.style.textOverflow = 'clip';
-    ellipsisContainer.style.whiteSpace = 'normal';
     ellipsisContainer.style.webkitLineClamp = 'none';
 
     // Render fake container

package/upload/_story/upload.stories.js

@@ -2,7 +2,7 @@
 import React, { useState } from 'react';
 import { Upload, Button, Toast, Icon } from '@douyinfe/semi-ui/index';
 import { withField, Form } from '../../form/index';
-import { IconPlus, IconFile, IconUpload } from '@douyinfe/semi-icons';
+import { IconPlus, IconFile, IconUpload, IconEyeOpened, IconDownload, IconDelete } from '@douyinfe/semi-icons';
 
 import FileCard from '../fileCard';
 
@@ -50,7 +50,7 @@ let commonProps = {
     let url = fileItem.url;
     console.log(fileItem);
     window.open(url);
-  },
+  }
 };
 
 export const BasicUsage = () => (
@@ -270,7 +270,7 @@ const defaultFileList = [
       'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg',
   },
   {
-    uid: '5',
+    uid: '3',
     name: 'jiafang3.jpeg',
     status: 'uploading',
     percent: 50,
@@ -279,7 +279,7 @@ const defaultFileList = [
       'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg',
   },
   {
-    uid: '5',
+    uid: '4',
     name: 'jiafang3.jpeg',
     status: 'validateFail',
     validateMessage: '文件过大',
@@ -288,7 +288,7 @@ const defaultFileList = [
       'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg',
   },
   {
-    uid: '4',
+    uid: '5',
     name: 'jiafang4.jpeg',
     status: 'validating',
     validateMessage: '校验中',
@@ -399,11 +399,12 @@ PictureListType.story = {
 export const PictureListTypeWithDefaultFileList = () => (
   <>
     <Upload
-      showReplace
       {...commonProps}
+      showReplace={false}
       action={action}
       listType="picture"
       accept="image/*"
+      renderPicPreviewIcon={()=><IconEyeOpened style={{color: 'var(--semi-color-white)',fontSize: 24}} />}
       defaultFileList={defaultFileList}
     >
       <React.Fragment>
@@ -941,3 +942,18 @@ export const _ForbiddenRemove = () => <ForbiddenRemove />;
 _ForbiddenRemove.story = {
   name: 'forbidden remove',
 };
+
+export const CustomListOperation = () => {
+  const renderFileOperation = (fileItem)=>{
+    return <div style={{display: 'flex',columnGap: 8, padding: '0 8px'}}>
+      <Button icon={<IconEyeOpened></IconEyeOpened>} type="tertiary" theme="borderless" size="small"></Button>
+      <Button icon={<IconDownload></IconDownload>} type="tertiary" theme="borderless" size="small"></Button>
+      <Button onClick={e=>fileItem.onRemove()} icon={<IconDelete></IconDelete>} type="tertiary" theme="borderless" size="small"></Button>
+    </div>
+  }
+  return <Upload defaultFileList={defaultFileList} itemStyle={{width: 300}} renderFileOperation={renderFileOperation}><Button icon={<IconUpload />} theme="light">点击上传</Button></Upload>
+}
+
+CustomListOperation.story = {
+  name: 'custom list operation',
+}