@douyinfe/semi-ui 2.1.4-alpha.0 → 2.2.0-beta.0

package/lib/es/pagination/index.js

@@ -15,6 +15,7 @@ import { cssClasses, numbers } from '@douyinfe/semi-foundation/lib/es/pagination
 import '@douyinfe/semi-foundation/lib/es/pagination/pagination.css';
 import { numbers as popoverNumbers } from '@douyinfe/semi-foundation/lib/es/popover/constants';
 import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
+import warning from '@douyinfe/semi-foundation/lib/es/utils/warning';
 import ConfigContext from '../configProvider/context';
 import LocaleConsumer from '../locale/localeConsumer';
 import Select from '../select/index';
@@ -45,6 +46,7 @@ export default class Pagination extends BaseComponent {
     this.foundation = new PaginationFoundation(this.adapter);
     this.renderDefaultPage = _bindInstanceProperty(_context = this.renderDefaultPage).call(_context, this);
     this.renderSmallPage = _bindInstanceProperty(_context2 = this.renderSmallPage).call(_context2, this);
+    warning(Boolean(props.showSizeChanger && props.hideOnSinglePage), '[Semi Pagination] You should not use showSizeChanger and hideOnSinglePage in ths same time. At this time, hideOnSinglePage no longer takes effect, otherwise there may be a problem that the switch entry disappears');
   }
 
   get adapter() {
@@ -338,7 +340,8 @@ export default class Pagination extends BaseComponent {
       className,
       style,
       hideOnSinglePage,
-      hoverShowPageSelect
+      hoverShowPageSelect,
+      showSizeChanger
     } = this.props;
     const paginationCls = classNames("".concat(prefixCls, "-small"), prefixCls, className);
     const {
@@ -348,7 +351,7 @@ export default class Pagination extends BaseComponent {
     } = this.state;
     const totalPageNum = Math.ceil(total / pageSize);
 
-    if (totalPageNum < 2 && hideOnSinglePage) {
+    if (totalPageNum < 2 && hideOnSinglePage && !showSizeChanger) {
       return null;
     }
 
@@ -377,13 +380,14 @@ export default class Pagination extends BaseComponent {
       showTotal,
       className,
       style,
-      hideOnSinglePage
+      hideOnSinglePage,
+      showSizeChanger
     } = this.props;
     const paginationCls = classNames(className, "".concat(prefixCls));
     const showTotalCls = "".concat(prefixCls, "-total");
     const totalPageNum = Math.ceil(total / pageSize);
 
-    if (totalPageNum < 2 && hideOnSinglePage) {
+    if (totalPageNum < 2 && hideOnSinglePage && !showSizeChanger) {
       return null;
     }
 

package/lib/es/radio/radio.d.ts

@@ -65,7 +65,7 @@ declare class Radio extends BaseComponent<RadioProps, RadioState> {
         prefixCls?: string;
         name?: string;
         onChange?: (e: RadioChangeEvent) => void;
-        buttonSize?: "small" | "large" | "middle";
+        buttonSize?: "small" | "middle" | "large";
         isCardRadio?: boolean;
         isPureCardRadio?: boolean;
     };

package/lib/es/radio/radio.js

@@ -127,6 +127,7 @@ class Radio extends BaseComponent {
       ["".concat(prefix, "-cardRadioGroup")]: isCardRadioGroup,
       ["".concat(prefix, "-cardRadioGroup_disabled")]: isDisabled && isCardRadioGroup,
       ["".concat(prefix, "-cardRadioGroup_checked")]: isCardRadioGroup && realChecked && !isDisabled,
+      ["".concat(prefix, "-cardRadioGroup_checked_disabled")]: isCardRadioGroup && realChecked && isDisabled,
       ["".concat(prefix, "-cardRadioGroup_hover")]: isCardRadioGroup && !realChecked && isHover && !isDisabled,
       [className]: Boolean(className)
     });

package/lib/es/radio/radioGroup.d.ts

@@ -40,7 +40,7 @@ declare class RadioGroup extends BaseComponent<RadioGroupProps, RadioGroupState>
         disabled: PropTypes.Requireable<boolean>;
         name: PropTypes.Requireable<string>;
         options: PropTypes.Requireable<any[]>;
-        buttonSize: PropTypes.Requireable<"small" | "large" | "middle">;
+        buttonSize: PropTypes.Requireable<"small" | "middle" | "large">;
         type: PropTypes.Requireable<"default" | "button" | "card" | "pureCard">;
         value: PropTypes.Requireable<any>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/es/rating/item.js

@@ -71,7 +71,7 @@ export default class Item extends PureComponent {
       height: size,
       fontSize: size
     } : {};
-    const iconSize = size === 'small' ? 'default' : 'extra-large';
+    const iconSize = isCustomSize ? 'inherit' : size === 'small' ? 'default' : 'extra-large';
     const content = character ? character : /*#__PURE__*/React.createElement(IconStar, {
       size: iconSize
     });
@@ -86,7 +86,8 @@ export default class Item extends PureComponent {
       "aria-checked": value > index ? 'true' : 'false',
       "aria-posinset": index + 1,
       "aria-setsize": count,
-      tabIndex: 0
+      tabIndex: 0,
+      className: "".concat(prefixCls, "-wrapper")
     }, /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-first"),
       style: {

package/lib/es/select/index.d.ts

@@ -2,13 +2,20 @@ import React, { MouseEvent } from 'react';
 import PropTypes from 'prop-types';
 import SelectFoundation, { SelectAdapter } from '@douyinfe/semi-foundation/lib/es/select/foundation';
 import BaseComponent, { ValidateStatus } from '../_base/baseComponent';
+import { InputProps } from '../input/index';
 import Option, { OptionProps } from './option';
 import OptionGroup from './optionGroup';
+import { Subtract } from 'utility-types';
 import '@douyinfe/semi-foundation/lib/es/select/select.css';
 import { Position, TooltipProps } from '../tooltip';
 export { OptionProps } from './option';
 export { OptionGroupProps } from './optionGroup';
 export { VirtualRowProps } from './virtualRow';
+declare type ExcludeInputType = {
+    value?: InputProps['value'];
+    onFocus?: InputProps['onFocus'];
+    onChange?: InputProps['onChange'];
+};
 export interface optionRenderProps {
     key?: any;
     label?: string | React.ReactNode | number;
@@ -48,6 +55,7 @@ export declare type RenderMultipleSelectedItemFn = (optionNode: Record<string, a
 };
 export declare type RenderSelectedItemFn = RenderSingleSelectedItemFn | RenderMultipleSelectedItemFn;
 export declare type SelectProps = {
+    id?: string;
     autoFocus?: boolean;
     arrowIcon?: React.ReactNode;
     defaultValue?: string | number | any[] | Record<string, any>;
@@ -84,6 +92,7 @@ export declare type SelectProps = {
     suffix?: React.ReactNode;
     prefix?: React.ReactNode;
     insetLabel?: React.ReactNode;
+    inputProps?: Subtract<InputProps, ExcludeInputType>;
     showClear?: boolean;
     showArrow?: boolean;
     renderSelectedItem?: RenderSelectedItemFn;
@@ -150,6 +159,7 @@ declare class Select extends BaseComponent<SelectProps, SelectState> {
         dropdownStyle: PropTypes.Requireable<object>;
         outerTopSlot: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         innerTopSlot: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        inputProps: PropTypes.Requireable<object>;
         outerBottomSlot: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         innerBottomSlot: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         optionList: PropTypes.Requireable<any[]>;

package/lib/es/select/index.js

@@ -342,39 +342,44 @@ class Select extends BaseComponent {
     const {
       size,
       multiple,
-      disabled
+      disabled,
+      inputProps
     } = this.props;
+
+    const inputPropsCls = _get(inputProps, 'className');
+
     const inputcls = cls("".concat(prefixcls, "-input"), {
       ["".concat(prefixcls, "-input-single")]: !multiple,
       ["".concat(prefixcls, "-input-multiple")]: multiple
-    });
+    }, inputPropsCls);
     const {
       inputValue
     } = this.state;
-    const inputProps = {
+
+    const selectInputProps = _Object$assign({
       value: inputValue,
       disabled,
       className: inputcls,
       onChange: this.handleInputChange
-    };
+    }, inputProps);
+
     let style = {}; // Multiple choice mode
 
     if (multiple) {
       style = {
         width: inputValue ? "".concat(inputValue.length * 16, "px") : '2px'
       };
-      inputProps.style = style;
+      selectInputProps.style = style;
     }
 
     return /*#__PURE__*/React.createElement(Input, _Object$assign({
       ref: this.inputRef,
-      size: size
-    }, inputProps, {
+      size: size,
       onFocus: e => {
         // prevent event bubbling which will fire trigger onFocus event
         e.stopPropagation(); // e.nativeEvent.stopImmediatePropagation();
       }
-    }));
+    }, selectInputProps));
   }
 
   close() {
@@ -704,7 +709,9 @@ class Select extends BaseComponent {
           key: value
         }), content);
       } else {
-        return content;
+        return /*#__PURE__*/React.createElement(Fragment, {
+          key: value
+        }, content);
       }
     });
 
@@ -818,6 +825,7 @@ class Select extends BaseComponent {
       multiple,
       filter,
       style,
+      id,
       size,
       className,
       validateStatus,
@@ -891,6 +899,7 @@ class Select extends BaseComponent {
       ref: ref => this.triggerRef.current = ref,
       onClick: e => this.foundation.handleClick(e),
       style: style,
+      id: id,
       tabIndex: tabIndex,
       onMouseEnter: this.onMouseEnter,
       onMouseLeave: this.onMouseLeave,
@@ -976,6 +985,7 @@ Select.propTypes = {
   dropdownStyle: PropTypes.object,
   outerTopSlot: PropTypes.node,
   innerTopSlot: PropTypes.node,
+  inputProps: PropTypes.object,
   outerBottomSlot: PropTypes.node,
   innerBottomSlot: PropTypes.node,
   optionList: PropTypes.array,

package/lib/es/table/Table.d.ts

@@ -176,7 +176,7 @@ declare class Table<RecordType extends Record<string, any>> extends BaseComponen
     _invokeColumnFn: (key: string, funcName: string, ...args: any[]) => void;
     _cacheHeaderRef: (node: HTMLDivElement) => void;
     getCurrentPageData: () => any;
-    getColumns: (columns: ColumnProps<RecordType>[], children: ReactNode) => ColumnProps<any>[];
+    getColumns: (columns: ColumnProps<RecordType>[], children: ReactNode) => ColumnProps<RecordType>[];
     getCellWidths: (...args: any[]) => number[];
     setHeadWidths: (...args: any[]) => void;
     getHeadWidths: (...args: any[]) => number[];

package/lib/es/timePicker/TimePicker.d.ts

@@ -85,11 +85,11 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         panelFooter: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         prefixCls: PropTypes.Requireable<string>;
         clearText: PropTypes.Requireable<string>;
-        value: PropTypes.Requireable<string | number | string[] | Date | number[] | Date[]>;
+        value: PropTypes.Requireable<string | number | string[] | number[] | Date | Date[]>;
         inputReadOnly: PropTypes.Requireable<boolean>;
         disabled: PropTypes.Requireable<boolean>;
         showClear: PropTypes.Requireable<boolean>;
-        defaultValue: PropTypes.Requireable<string | number | string[] | Date | number[] | Date[]>;
+        defaultValue: PropTypes.Requireable<string | number | string[] | number[] | Date | Date[]>;
         open: PropTypes.Requireable<boolean>;
         defaultOpen: PropTypes.Requireable<boolean>;
         onOpenChange: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/es/timePicker/TimeShape.d.ts

@@ -6,5 +6,5 @@ import PropTypes from 'prop-types';
  * - \[12:00:12, 12:21:12]
  * - \[[12:00:12, 12:21:12], [12:11:12, 12:32:12]]
  */
-declare const TimeShape: PropTypes.Requireable<string | number | string[] | Date | number[] | Date[]>;
+declare const TimeShape: PropTypes.Requireable<string | number | string[] | number[] | Date | Date[]>;
 export { TimeShape };

package/lib/es/timePicker/index.d.ts

@@ -13,11 +13,11 @@ export default class LocaleTimePicker extends React.PureComponent<LocalePickerPr
         panelFooter: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
         prefixCls: import("prop-types").Requireable<string>;
         clearText: import("prop-types").Requireable<string>;
-        value: import("prop-types").Requireable<string | number | string[] | Date | number[] | Date[]>;
+        value: import("prop-types").Requireable<string | number | string[] | number[] | Date | Date[]>;
         inputReadOnly: import("prop-types").Requireable<boolean>;
         disabled: import("prop-types").Requireable<boolean>;
         showClear: import("prop-types").Requireable<boolean>;
-        defaultValue: import("prop-types").Requireable<string | number | string[] | Date | number[] | Date[]>;
+        defaultValue: import("prop-types").Requireable<string | number | string[] | number[] | Date | Date[]>;
         open: import("prop-types").Requireable<boolean>;
         defaultOpen: import("prop-types").Requireable<boolean>;
         onOpenChange: import("prop-types").Requireable<(...args: any[]) => any>;

package/lib/es/timeline/item.d.ts

@@ -3,28 +3,31 @@ import PropTypes from 'prop-types';
 import '@douyinfe/semi-foundation/lib/es/timeline/timeline.css';
 export interface TimelineItemProps {
     color?: string;
-    time?: string;
+    time?: React.ReactNode;
     type?: 'default' | 'ongoing' | 'success' | 'warning' | 'error';
     dot?: React.ReactNode;
     extra?: React.ReactNode;
     position?: 'left' | 'right';
     className?: string;
     style?: React.CSSProperties;
+    onClick?: React.MouseEventHandler<HTMLLIElement>;
 }
 export default class Item extends PureComponent<TimelineItemProps> {
     static propTypes: {
         color: PropTypes.Requireable<string>;
-        time: PropTypes.Requireable<string>;
+        time: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         type: PropTypes.Requireable<string>;
         dot: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         extra: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         position: PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static defaultProps: {
         type: string;
         time: string;
+        onClick: (...args: any[]) => void;
     };
     render(): JSX.Element;
 }

package/lib/es/timeline/item.js

@@ -1,3 +1,4 @@
+import _noop from "lodash/noop";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import React, { PureComponent } from 'react';
@@ -18,7 +19,8 @@ export default class Item extends PureComponent {
       type,
       style,
       time,
-      extra
+      extra,
+      onClick
     } = this.props;
     const itemCls = cls(prefixCls, className);
     const dotCls = cls({
@@ -33,16 +35,17 @@ export default class Item extends PureComponent {
     } : null;
     return /*#__PURE__*/React.createElement("li", {
       className: itemCls,
-      style: style
+      style: style,
+      onClick: onClick
     }, /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-tail")
     }), /*#__PURE__*/React.createElement("div", _Object$assign({
       className: dotCls
     }, dotStyle), dot), /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-content")
-    }, children, extra ? /*#__PURE__*/React.createElement("div", {
+    }, children, extra && /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-content-extra")
-    }, extra) : null, /*#__PURE__*/React.createElement("div", {
+    }, extra), time && /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-content-time")
     }, time)));
   }
@@ -50,15 +53,17 @@ export default class Item extends PureComponent {
 }
 Item.propTypes = {
   color: PropTypes.string,
-  time: PropTypes.string,
+  time: PropTypes.node,
   type: PropTypes.oneOf(strings.ITEM_TYPE),
   dot: PropTypes.node,
   extra: PropTypes.node,
   position: PropTypes.oneOf(strings.ITEM_POS),
   className: PropTypes.string,
-  style: PropTypes.object
+  style: PropTypes.object,
+  onClick: PropTypes.func
 };
 Item.defaultProps = {
   type: 'default',
-  time: ''
+  time: '',
+  onClick: _noop
 };

package/lib/es/tree/treeNode.js

@@ -64,8 +64,6 @@ export default class TreeNode extends PureComponent {
       const {
         onNodeRightClick
       } = this.context;
-      e.stopPropagation();
-      e.nativeEvent.stopImmediatePropagation();
       onNodeRightClick(e, this.props);
     };
 

package/lib/es/treeSelect/index.js

@@ -716,6 +716,7 @@ class TreeSelect extends BaseComponent {
           itemSize: virtualize.itemSize,
           height: height,
           width: width,
+          // @ts-ignore avoid strict check of itemKey
           itemKey: this.itemKey,
           itemData: flattenNodes,
           className: "".concat(prefixTree, "-virtual-list"),

package/lib/es/typography/title.d.ts

@@ -37,7 +37,7 @@ export default class Title extends PureComponent<TitleProps> {
         underline: PropTypes.Requireable<boolean>;
         strong: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<"warning" | "success" | "primary" | "tertiary" | "secondary" | "danger" | "quaternary">;
-        heading: PropTypes.Requireable<1 | 2 | 3 | 4 | 6 | 5>;
+        heading: PropTypes.Requireable<1 | 2 | 3 | 4 | 5 | 6>;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         component: PropTypes.Requireable<string>;

package/lib/es/upload/fileCard.d.ts

@@ -26,6 +26,7 @@ declare class FileCard extends PureComponent<FileCardProps> {
         style: PropTypes.Requireable<object>;
         url: PropTypes.Requireable<string>;
         validateMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        index: PropTypes.Requireable<number>;
     };
     static defaultProps: {
         listType: "list";
@@ -39,6 +40,7 @@ declare class FileCard extends PureComponent<FileCardProps> {
     renderValidateMessage(): ReactNode;
     renderPicValidateMsg(): ReactNode;
     renderPic(locale: Locale['Upload']): ReactNode;
+    renderFile(locale: Locale["Upload"]): JSX.Element;
     onRemove(e: MouseEvent): void;
     onReplace(e: MouseEvent): void;
     onRetry(e: MouseEvent): void;

package/lib/es/upload/fileCard.js

@@ -4,13 +4,13 @@ import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/upload/constants';
 import { getFileSize } from '@douyinfe/semi-foundation/lib/es/upload/utils';
+import { IconAlertCircle, IconClose, IconFile, IconRefresh } from '@douyinfe/semi-icons';
 import LocaleConsumer from '../locale/localeConsumer';
 import IconButton from '../iconButton/index';
 import Progress from '../progress/index';
 import Tooltip from '../tooltip/index';
 import Spin from '../spin/index';
 import { isElement } from '../_base/reactUtils';
-import { IconAlertCircle, IconClose, IconFile, IconRefresh } from '@douyinfe/semi-icons';
 const prefixCls = cssClasses.PREFIX;
 
 const ErrorSvg = function () {
@@ -158,16 +158,23 @@ class FileCard extends PureComponent {
       status,
       disabled,
       style,
-      onPreviewClick
+      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 filePicCardCls = cls({
       ["".concat(prefixCls, "-picture-file-card")]: true,
       ["".concat(prefixCls, "-picture-file-card-disabled")]: disabled,
-      ["".concat(prefixCls, "-picture-file-card-show-pointer")]: typeof onPreviewClick !== 'undefined'
+      ["".concat(prefixCls, "-picture-file-card-show-pointer")]: typeof onPreviewClick !== 'undefined',
+      ["".concat(prefixCls, "-picture-file-card-error")]: status === strings.FILE_STATUS_UPLOAD_FAIL,
+      ["".concat(prefixCls, "-picture-file-card-uploading")]: showProgress
     });
-    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 = "".concat(prefixCls, "-picture-file-card-close");
     const retry = /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-picture-file-card-retry"),
@@ -187,47 +194,38 @@ class FileCard extends PureComponent {
     }, /*#__PURE__*/React.createElement(ReplaceSvg, {
       className: "".concat(prefixCls, "-picture-file-card-icon-replace")
     })));
+    const picInfo = typeof renderPicInfo === 'function' ? renderPicInfo(this.props) : /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-picture-file-card-pic-info")
+    }, index + 1);
+    const thumbnail = typeof renderThumbnail === 'function' ? renderThumbnail(this.props) : /*#__PURE__*/React.createElement("img", {
+      src: url,
+      alt: "picture of ".concat(name)
+    });
     return /*#__PURE__*/React.createElement("div", {
       className: filePicCardCls,
       style: style,
       onClick: onPreviewClick
-    }, /*#__PURE__*/React.createElement("img", {
-      src: url
-    }), showProgress ? /*#__PURE__*/React.createElement(Progress, {
+    }, thumbnail, showProgress ? /*#__PURE__*/React.createElement(Progress, {
       percent: percent,
       type: "circle",
       size: "small",
       orbitStroke: '#FFF'
-    }) : null, showRetry ? retry : null, showReplace && replace, disabled ? null : /*#__PURE__*/React.createElement("div", {
-      className: closeCls,
-      onClick: e => this.onRemove(e)
+    }) : null, showRetry ? retry : null, showReplace && replace, showPicInfo && picInfo, !disabled && /*#__PURE__*/React.createElement("div", {
+      className: closeCls
     }, /*#__PURE__*/React.createElement(IconClose, {
-      size: "extra-small"
+      size: "extra-small",
+      onClick: e => this.onRemove(e)
     })), this.renderPicValidateMsg());
   }
 
-  onRemove(e) {
-    e.stopPropagation();
-    this.props.onRemove(this.props, e);
-  }
-
-  onReplace(e) {
-    e.stopPropagation();
-    this.props.onReplace(this.props, e);
-  }
-
-  onRetry(e) {
-    e.stopPropagation();
-    this.props.onRetry(this.props, e);
-  }
-
-  render() {
+  renderFile(locale) {
     const {
       name,
       size,
       percent,
       url,
-      listType,
+      showRetry: propsShowRetry,
+      showReplace: propsShowReplace,
       preview,
       previewFile,
       status,
@@ -248,15 +246,8 @@ class FileCard extends PureComponent {
     const replaceCls = "".concat(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;
-
-    if (listType === strings.FILE_LIST_PIC) {
-      return /*#__PURE__*/React.createElement(LocaleConsumer, {
-        componentName: "Upload"
-      }, locale => this.renderPic(locale));
-    }
-
+    const showRetry = status === strings.FILE_STATUS_UPLOAD_FAIL && propsShowRetry;
+    const showReplace = status === strings.FILE_STATUS_SUCCESS && propsShowReplace;
     const fileSize = this.transSize(size);
     let previewContent = preview ? /*#__PURE__*/React.createElement("img", {
       src: url
@@ -268,9 +259,7 @@ class FileCard extends PureComponent {
       previewContent = previewFile(this.props);
     }
 
-    return /*#__PURE__*/React.createElement(LocaleConsumer, {
-      componentName: "Upload"
-    }, locale => /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       className: fileCardCls,
       style: style,
       onClick: onPreviewClick
@@ -315,7 +304,42 @@ class FileCard extends PureComponent {
       theme: "borderless",
       size: "small",
       className: closeCls
-    })));
+    }));
+  }
+
+  onRemove(e) {
+    e.stopPropagation();
+    this.props.onRemove(this.props, e);
+  }
+
+  onReplace(e) {
+    e.stopPropagation();
+    this.props.onReplace(this.props, e);
+  }
+
+  onRetry(e) {
+    e.stopPropagation();
+    this.props.onRetry(this.props, e);
+  }
+
+  render() {
+    const {
+      listType
+    } = this.props;
+
+    if (listType === strings.FILE_LIST_PIC) {
+      return /*#__PURE__*/React.createElement(LocaleConsumer, {
+        componentName: "Upload"
+      }, locale => this.renderPic(locale));
+    }
+
+    if (listType === strings.FILE_LIST_DEFAULT) {
+      return /*#__PURE__*/React.createElement(LocaleConsumer, {
+        componentName: "Upload"
+      }, locale => this.renderFile(locale));
+    }
+
+    return null;
   }
 
 }
@@ -338,7 +362,8 @@ FileCard.propTypes = {
   status: PropTypes.string,
   style: PropTypes.object,
   url: PropTypes.string,
-  validateMessage: PropTypes.node
+  validateMessage: PropTypes.node,
+  index: PropTypes.number
 };
 FileCard.defaultProps = {
   listType: strings.FILE_LIST_DEFAULT,