@douyinfe/semi-ui 2.41.3 → 2.42.0

package/lib/es/form/interface.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Subtract } from 'utility-types';
 import type { RuleItem } from 'async-validator';
 import type { Options as ScrollIntoViewOptions } from 'scroll-into-view-if-needed';
-import type { BaseFormApi as FormApi, FormState, WithFieldOption, AllErrors } from '@douyinfe/semi-foundation/lib/es/form/interface';
+import type { BaseFormApi as FormApi, FormState, WithFieldOption, AllErrors, FieldValidateTriggerType } from '@douyinfe/semi-foundation/lib/es/form/interface';
 import type { SelectProps } from '../select/index';
 import Option from '../select/option';
 import OptGroup from '../select/optionGroup';
@@ -88,6 +88,7 @@ export interface BaseFormProps<Values extends Record<string, any> = any> extends
     onReset?: () => void;
     onValueChange?: (values: Values, changedValue: Partial<Values>) => void;
     onChange?: (formState: FormState<Values>) => void;
+    allowEmpty?: boolean;
     validateFields?: (values: Values) => string | Partial<AllErrors<Values>>;
     /** Use this if you want to populate the form with initial values. */
     initValues?: Values;
@@ -96,18 +97,19 @@ export interface BaseFormProps<Values extends Record<string, any> = any> extends
     getFormApi?: (formApi: FormApi<Values>) => void;
     style?: React.CSSProperties;
     className?: string;
+    extraTextPosition?: 'middle' | 'bottom';
     layout?: 'horizontal' | 'vertical';
     labelPosition?: 'top' | 'left' | 'inset';
     labelWidth?: number | string;
     labelAlign?: 'left' | 'right';
     labelCol?: Record<string, any>;
     wrapperCol?: Record<string, any>;
-    allowEmpty?: boolean;
     render?: (internalProps: FormFCChild) => React.ReactNode;
     component?: React.FC<any> | React.ComponentClass<any>;
     children?: React.ReactNode | ((internalProps: FormFCChild) => React.ReactNode);
     autoScrollToError?: boolean | ScrollIntoViewOptions;
     disabled?: boolean;
     showValidateIcon?: boolean;
-    extraTextPosition?: 'middle' | 'bottom';
+    stopValidateWithError?: boolean;
+    trigger?: FieldValidateTriggerType;
 }

package/lib/es/inputNumber/index.js

@@ -251,7 +251,7 @@ class InputNumber extends BaseComponent {
       } else {
         let valueStr = value;
         if (typeof value === 'number') {
-          valueStr = value.toString();
+          valueStr = this.foundation.doFormat(value);
         }
         const parsedNum = this.foundation.doParse(valueStr, false, true, true);
         const toNum = typeof value === 'number' ? value : this.foundation.doParse(valueStr, false, false, false);

package/lib/es/modal/confirm.d.ts

@@ -382,6 +382,7 @@ export declare function withError(props: ModalReactProps): {
         formMethod?: string;
         formNoValidate?: boolean;
         formTarget?: string;
+        contextMenu?: string;
         dir?: string;
         draggable?: boolean | "true" | "false";
         lang?: string;
@@ -395,7 +396,6 @@ export declare function withError(props: ModalReactProps): {
         'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false";
         'aria-controls'?: string;
         'aria-describedby'?: string;
-        contextMenu?: string;
         placeholder?: string;
         spellCheck?: boolean | "true" | "false";
         radioGroup?: string;

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

@@ -5,6 +5,8 @@ export interface ResizableHeaderCellProps {
     onResizeStart?: ResizeFn;
     onResizeStop?: ResizeFn;
     width?: number | string;
+    /** For compatibility with previous versions, the default value is true. If you don't want to resize, set it to false */
+    resize?: boolean;
 }
 declare class ResizableHeaderCell extends React.PureComponent<ResizableHeaderCellProps> {
     render(): JSX.Element;

package/lib/es/table/ResizableHeaderCell.js

@@ -15,10 +15,11 @@ class ResizableHeaderCell extends React.PureComponent {
         onResize,
         onResizeStart,
         onResizeStop,
-        width
+        width,
+        resize
       } = _a,
-      restProps = __rest(_a, ["onResize", "onResizeStart", "onResizeStop", "width"]);
-    if (typeof width !== 'number') {
+      restProps = __rest(_a, ["onResize", "onResizeStart", "onResizeStop", "width", "resize"]);
+    if (typeof width !== 'number' || resize === false) {
       return /*#__PURE__*/React.createElement("th", Object.assign({}, restProps));
     }
     let {
@@ -36,7 +37,8 @@ class ResizableHeaderCell extends React.PureComponent {
       onResizeStop: onResizeStop,
       draggableOpts: {
         enableUserSelectHack: false
-      }
+      },
+      axis: 'x'
     }, /*#__PURE__*/React.createElement("th", Object.assign({}, restProps), children));
   }
 }

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

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import { BaseProps } from '../_base/baseComponent';
-import { Fixed, TableComponents, OnHeaderRow } from './interface';
+import { Fixed, TableComponents, OnHeaderRow, ColumnProps } from './interface';
 export interface TableHeaderProps extends BaseProps {
     columns?: any[];
     components?: TableComponents;
@@ -15,7 +15,7 @@ export interface TableHeaderCell {
     key: string | number;
     className: string;
     children: ReactNode;
-    column: any[];
+    column: ColumnProps;
     colStart: number;
     level: number;
     parents: any[];

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

@@ -3,9 +3,10 @@ import PropTypes from 'prop-types';
 import BaseComponent from '../_base/baseComponent';
 import { TableContextProps } from './table-context';
 import { TableComponents, OnHeaderRow, Fixed } from './interface';
+import type { TableHeaderCell } from './TableHeader';
 export interface TableHeaderRowProps {
     components?: TableComponents;
-    row?: any[];
+    row?: TableHeaderCell[];
     prefixCls?: string;
     onHeaderRow?: OnHeaderRow<any>;
     index?: number;

package/lib/es/table/TableHeaderRow.js

@@ -131,6 +131,9 @@ export default class TableHeaderRow extends BaseComponent {
           }
         }
       }
+      Object.assign(cellProps, {
+        resize: column.resize
+      });
       const props = _omit(Object.assign(Object.assign({}, cellProps), customProps), ['colStart', 'colEnd', 'hasSubColumns', 'parents', 'level']);
       const {
         rowSpan,

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

@@ -90,6 +90,7 @@ export interface ColumnProps<RecordType extends Record<string, any> = any> {
     onFilterDropdownVisibleChange?: OnFilterDropdownVisibleChange;
     onHeaderCell?: OnHeaderCell<RecordType>;
     ellipsis?: BaseEllipsis;
+    resize?: boolean;
 }
 export type Align = BaseAlign;
 export type SortOrder = BaseSortOrder;
@@ -103,7 +104,7 @@ export type Fixed = BaseFixed;
 export type OnCell<RecordType> = (record?: RecordType, rowIndex?: number) => OnCellReturnObject;
 export type OnFilter<RecordType> = (filteredValue?: any, record?: RecordType) => boolean;
 export type OnFilterDropdownVisibleChange = (visible?: boolean) => void;
-export type OnHeaderCell<RecordType> = (record?: RecordType, columnIndex?: number) => OnHeaderCellReturnObject;
+export type OnHeaderCell<RecordType> = (record?: RecordType, columnIndex?: number, index?: number) => OnHeaderCellReturnObject;
 export type ColumnRender<RecordType> = (text: any, record: RecordType, index: number, options?: RenderOptions) => ColumnRenderReturnType;
 export type RenderFilterDropdownItem = (itemInfo?: FilterDropdownItem) => ReactNode;
 export type Sorter<RecordType> = BaseSorter<RecordType>;

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

@@ -13,7 +13,11 @@ export interface ToastReactProps extends ToastProps {
 export type { ConfigProps, ToastListProps, ToastListState, ToastState };
 declare const createBaseToast: () => {
     new (props: ToastListProps): {
+        stack: boolean;
+        innerWrapperRef: React.RefObject<HTMLDivElement>;
         readonly adapter: ToastListAdapter;
+        handleMouseEnter: (e: React.MouseEvent) => void;
+        handleMouseLeave: (e: React.MouseEvent) => void;
         has(id: string): any;
         add(opts: ToastInstance): any;
         update(id: string, opts: ToastInstance): any;
@@ -47,7 +51,11 @@ declare const createBaseToast: () => {
         UNSAFE_componentWillUpdate?(nextProps: Readonly<ToastListProps>, nextState: Readonly<ToastListState>, nextContext: any): void;
     };
     ref: {
+        stack: boolean;
+        innerWrapperRef: React.RefObject<HTMLDivElement>;
         readonly adapter: ToastListAdapter;
+        handleMouseEnter: (e: React.MouseEvent) => void;
+        handleMouseLeave: (e: React.MouseEvent) => void;
         has(id: string): any;
         add(opts: ToastInstance): any;
         update(id: string, opts: ToastInstance): any;
@@ -90,6 +98,7 @@ declare const createBaseToast: () => {
         onClose: PropTypes.Requireable<(...args: any[]) => any>;
         icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         direction: PropTypes.Requireable<string>;
+        stack: PropTypes.Requireable<boolean>;
     };
     defaultProps: {};
     wrapperId: null | string;
@@ -109,7 +118,11 @@ export declare class ToastFactory {
 }
 declare const _default: {
     new (props: ToastListProps): {
+        stack: boolean;
+        innerWrapperRef: React.RefObject<HTMLDivElement>;
         readonly adapter: ToastListAdapter;
+        handleMouseEnter: (e: React.MouseEvent<Element, MouseEvent>) => void;
+        handleMouseLeave: (e: React.MouseEvent<Element, MouseEvent>) => void;
         has(id: string): any;
         add(opts: ToastInstance): any;
         update(id: string, opts: ToastInstance): any;
@@ -143,7 +156,11 @@ declare const _default: {
         UNSAFE_componentWillUpdate?(nextProps: Readonly<ToastListProps>, nextState: Readonly<ToastListState>, nextContext: any): void;
     };
     ref: {
+        stack: boolean;
+        innerWrapperRef: React.RefObject<HTMLDivElement>;
         readonly adapter: ToastListAdapter;
+        handleMouseEnter: (e: React.MouseEvent<Element, MouseEvent>) => void;
+        handleMouseLeave: (e: React.MouseEvent<Element, MouseEvent>) => void;
         has(id: string): any;
         add(opts: ToastInstance): any;
         update(id: string, opts: ToastInstance): any;
@@ -186,6 +203,7 @@ declare const _default: {
         onClose: PropTypes.Requireable<(...args: any[]) => any>;
         icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         direction: PropTypes.Requireable<string>;
+        stack: PropTypes.Requireable<boolean>;
     };
     defaultProps: {};
     wrapperId: string;

package/lib/es/toast/index.js

@@ -15,10 +15,27 @@ const createBaseToast = () => {
   return _a = class ToastList extends BaseComponent {
     constructor(props) {
       super(props);
+      this.stack = false;
+      this.innerWrapperRef = /*#__PURE__*/React.createRef();
+      this.handleMouseEnter = e => {
+        if (this.stack) {
+          this.foundation.handleMouseInSideChange(true);
+        }
+      };
+      this.handleMouseLeave = e => {
+        var _a;
+        if (this.stack) {
+          const height = (_a = this.foundation.getInputWrapperRect()) === null || _a === void 0 ? void 0 : _a.height;
+          if (height) {
+            this.foundation.handleMouseInSideChange(false);
+          }
+        }
+      };
       this.state = {
         list: [],
         removedItems: [],
-        updatedItems: []
+        updatedItems: [],
+        mouseInSide: false
       };
       this.foundation = new ToastListFoundation(this.adapter);
     }
@@ -30,6 +47,15 @@ const createBaseToast = () => {
             removedItems,
             updatedItems
           });
+        },
+        handleMouseInSideChange: mouseInSide => {
+          this.setState({
+            mouseInSide
+          });
+        },
+        getInputWrapperRect: () => {
+          var _a;
+          return (_a = this.innerWrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
         }
       });
     }
@@ -64,6 +90,7 @@ const createBaseToast = () => {
           ToastList.ref.add(Object.assign(Object.assign({}, opts), {
             id
           }));
+          ToastList.ref.stack = Boolean(opts.stack);
         });
       } else {
         const node = document.querySelector(`#${this.wrapperId}`);
@@ -72,6 +99,9 @@ const createBaseToast = () => {
             node.style[pos] = typeof opts[pos] === 'number' ? `${opts[pos]}px` : opts[pos];
           }
         });
+        if (Boolean(opts.stack) !== ToastList.ref.stack) {
+          ToastList.ref.stack = Boolean(opts.stack);
+        }
         if (ToastList.ref.has(id)) {
           ToastList.ref.update(id, Object.assign(Object.assign({}, opts), {
             id
@@ -197,7 +227,15 @@ const createBaseToast = () => {
           toast.foundation.restartCloseTimer();
         }
       };
-      return /*#__PURE__*/React.createElement(React.Fragment, null, list.map((item, index) => {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: cls({
+          [`${cssClasses.PREFIX}-innerWrapper`]: true,
+          [`${cssClasses.PREFIX}-innerWrapper-hover`]: this.state.mouseInSide
+        }),
+        ref: this.innerWrapperRef,
+        onMouseEnter: this.handleMouseEnter,
+        onMouseLeave: this.handleMouseLeave
+      }, list.map((item, index) => {
         const isRemoved = removedItems.find(removedItem => removedItem.id === item.id) !== undefined;
         return /*#__PURE__*/React.createElement(CSSAnimation, {
           key: item.id,
@@ -211,6 +249,12 @@ const createBaseToast = () => {
             isAnimating
           } = _ref2;
           return isRemoved && !isAnimating ? null : /*#__PURE__*/React.createElement(Toast, Object.assign({}, item, {
+            stack: this.stack,
+            stackExpanded: this.state.mouseInSide,
+            positionInList: {
+              length: list.length,
+              index
+            },
             className: cls({
               [item.className]: Boolean(item.className),
               [animationClassName]: true
@@ -221,7 +265,7 @@ const createBaseToast = () => {
             ref: refFn
           }));
         });
-      }));
+      })));
     }
   }, _a.defaultOpts = {
     motion: true,
@@ -232,7 +276,8 @@ const createBaseToast = () => {
     duration: PropTypes.number,
     onClose: PropTypes.func,
     icon: PropTypes.node,
-    direction: PropTypes.oneOf(strings.directions)
+    direction: PropTypes.oneOf(strings.directions),
+    stack: PropTypes.bool
   }, _a.defaultProps = {}, _a;
 };
 export class ToastFactory {

package/lib/es/toast/toast.d.ts

@@ -7,10 +7,17 @@ export interface ToastReactProps extends ToastProps {
     style?: CSSProperties;
     icon?: React.ReactNode;
     content: React.ReactNode;
+    stack?: boolean;
+    stackExpanded?: boolean;
     onAnimationEnd?: (e: React.AnimationEvent) => void;
     onAnimationStart?: (e: React.AnimationEvent) => void;
+    positionInList?: {
+        index: number;
+        length: number;
+    };
 }
 declare class Toast extends BaseComponent<ToastReactProps, ToastState> {
+    toastEle: React.RefObject<HTMLDivElement>;
     static contextType: React.Context<ContextValue>;
     static propTypes: {
         onClose: PropTypes.Requireable<(...args: any[]) => any>;
@@ -23,6 +30,8 @@ declare class Toast extends BaseComponent<ToastReactProps, ToastState> {
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         showClose: PropTypes.Requireable<boolean>;
+        stack: PropTypes.Requireable<boolean>;
+        stackExpanded: PropTypes.Requireable<boolean>;
         icon: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         direction: PropTypes.Requireable<string>;
     };
@@ -33,6 +42,8 @@ declare class Toast extends BaseComponent<ToastReactProps, ToastState> {
         duration: number;
         textMaxWidth: number;
         showClose: boolean;
+        stack: boolean;
+        stackExpanded: boolean;
         theme: string;
     };
     constructor(props: ToastReactProps);

package/lib/es/toast/toast.js

@@ -13,6 +13,7 @@ const prefixCls = cssClasses.PREFIX;
 class Toast extends BaseComponent {
   constructor(props) {
     super(props);
+    this.toastEle = /*#__PURE__*/React.createRef();
     this.clearCloseTimer = () => {
       this.foundation.clearCloseTimer_();
     };
@@ -92,11 +93,15 @@ class Toast extends BaseComponent {
     textStyle.maxWidth = textMaxWidth;
     const btnTheme = 'borderless';
     const btnSize = 'small';
-    return /*#__PURE__*/React.createElement("div", {
+    const reservedIndex = this.props.positionInList ? this.props.positionInList.length - this.props.positionInList.index - 1 : 0;
+    const toastEle = /*#__PURE__*/React.createElement("div", {
+      ref: this.toastEle,
       role: "alert",
       "aria-label": `${type ? type : 'default'} type`,
       className: toastCls,
-      style: style,
+      style: Object.assign(Object.assign({}, style), {
+        transform: `translate3d(0,0,${reservedIndex * -10}px)`
+      }),
       onMouseEnter: this.clearCloseTimer,
       onMouseLeave: this.startCloseTimer,
       onAnimationStart: this.props.onAnimationStart,
@@ -118,6 +123,17 @@ class Toast extends BaseComponent {
       theme: btnTheme,
       size: btnSize
     }))));
+    if (this.props.stack) {
+      const height = this.props.stackExpanded && this.toastEle.current && getComputedStyle(this.toastEle.current).height || 0;
+      return /*#__PURE__*/React.createElement("div", {
+        className: `${prefixCls}-zero-height-wrapper`,
+        style: {
+          height
+        }
+      }, toastEle);
+    } else {
+      return toastEle;
+    }
   }
 }
 Toast.contextType = ConfigContext;
@@ -132,6 +148,8 @@ Toast.propTypes = {
   style: PropTypes.object,
   className: PropTypes.string,
   showClose: PropTypes.bool,
+  stack: PropTypes.bool,
+  stackExpanded: PropTypes.bool,
   icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   direction: PropTypes.oneOf(strings.directions)
 };
@@ -142,6 +160,8 @@ Toast.defaultProps = {
   duration: numbers.duration,
   textMaxWidth: 450,
   showClose: true,
+  stack: false,
+  stackExpanded: false,
   theme: 'normal'
 };
 export default Toast;

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

@@ -92,7 +92,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
         mouseEnterDelay: PropTypes.Requireable<number>;
         mouseLeaveDelay: PropTypes.Requireable<number>;
-        trigger: PropTypes.Validator<NonNullable<"hover" | "focus" | "click" | "custom">>;
+        trigger: PropTypes.Validator<NonNullable<"hover" | "focus" | "click" | "custom" | "contextMenu">>;
         className: PropTypes.Requireable<string>;
         wrapperClassName: PropTypes.Requireable<string>;
         clickToHide: PropTypes.Requireable<boolean>;

package/lib/es/tooltip/index.js

@@ -329,7 +329,8 @@ export default class Tooltip extends BaseComponent {
         click: 'onClick',
         focus: 'onFocus',
         blur: 'onBlur',
-        keydown: 'onKeyDown'
+        keydown: 'onKeyDown',
+        contextMenu: 'onContextMenu'
       }),
       registerTriggerEvent: triggerEventSet => {
         this.setState({

package/lib/es/tree/treeNode.js

@@ -208,7 +208,7 @@ export default class TreeNode extends PureComponent {
       } = this.props;
       if (_isFunction(renderLabel)) {
         return renderLabel(label, data);
-      } else if (_isString(label) && filtered && keyword && treeNodeFilterProp === 'label') {
+      } else if (_isString(label) && filtered && keyword) {
         return getHighLightTextHTML({
           sourceString: label,
           searchWords: [keyword],
@@ -358,7 +358,6 @@ export default class TreeNode extends PureComponent {
       [`${prefixcls}-selected`]: selected,
       [`${prefixcls}-active`]: !multiple && active,
       [`${prefixcls}-ellipsis`]: labelEllipsis,
-      [`${prefixcls}-filtered`]: filtered && treeNodeFilterProp !== 'label',
       [`${prefixcls}-drag-over`]: !disabled && dragOver,
       [`${prefixcls}-draggable`]: !disabled && draggable && !renderFullLabel,
       // When draggable + renderFullLabel is enabled, the default style

package/lib/es/typography/base.js

@@ -117,9 +117,7 @@ export default class Base extends Component {
         if (showTooltip.type && showTooltip.type.toLowerCase() === 'popover') {
           return _merge({
             opts: {
-              style: {
-                width: '240px'
-              },
+              // style: { width: '240px' },
               showArrow: true
             }
           }, showTooltip);

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

@@ -1,12 +1,19 @@
-import { PureComponent, ReactNode, MouseEvent, CSSProperties } from 'react';
+import { ReactNode, MouseEvent, CSSProperties } from 'react';
 import PropTypes from 'prop-types';
+import { FileCardAdapter } from '@douyinfe/semi-foundation/lib/es/upload/fileCardFoundation';
 import { Locale } from '../locale/interface';
+import BaseComponent from '../_base/baseComponent';
 import { RenderFileItemProps } from './interface';
 export interface FileCardProps extends RenderFileItemProps {
     className?: string;
     style?: CSSProperties;
+    picWidth?: string | number;
+    picHeight?: string | number;
 }
-declare class FileCard extends PureComponent<FileCardProps> {
+export interface FileCardState {
+    fallbackPreview?: boolean;
+}
+declare class FileCard extends BaseComponent<FileCardProps, FileCardState> {
     static propTypes: {
         className: PropTypes.Requireable<string>;
         disabled: PropTypes.Requireable<boolean>;
@@ -19,6 +26,8 @@ declare class FileCard extends PureComponent<FileCardProps> {
         percent: PropTypes.Requireable<number>;
         preview: PropTypes.Requireable<boolean>;
         previewFile: PropTypes.Requireable<(...args: any[]) => any>;
+        picWidth: PropTypes.Requireable<NonNullable<string | number>>;
+        picHeight: PropTypes.Requireable<NonNullable<string | number>>;
         showReplace: PropTypes.Requireable<boolean>;
         showRetry: PropTypes.Requireable<boolean>;
         size: PropTypes.Requireable<NonNullable<string | number>>;
@@ -36,6 +45,8 @@ declare class FileCard extends PureComponent<FileCardProps> {
         preview: boolean;
         size: string;
     };
+    constructor(props: FileCardProps);
+    get adapter(): FileCardAdapter<FileCardProps, FileCardState>;
     transSize(size: string | number): string;
     renderValidateMessage(): ReactNode;
     renderPicValidateMsg(): ReactNode;

package/lib/es/upload/fileCard.js

@@ -1,10 +1,12 @@
-import React, { PureComponent } from 'react';
+import React from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/upload/constants';
+import FileCardFoundation from '@douyinfe/semi-foundation/lib/es/upload/fileCardFoundation';
 import { getFileSize } from '@douyinfe/semi-foundation/lib/es/upload/utils';
 import { IconAlertCircle, IconClose, IconClear, IconFile, IconRefresh } from '@douyinfe/semi-icons';
 import LocaleConsumer from '../locale/localeConsumer';
+import BaseComponent from '../_base/baseComponent';
 import Button from '../button/index';
 import Progress from '../progress/index';
 import Tooltip from '../tooltip/index';
@@ -79,7 +81,21 @@ const DirectorySvg = function () {
     strokeLinejoin: "round"
   }));
 };
-class FileCard extends PureComponent {
+class FileCard extends BaseComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      fallbackPreview: false
+    };
+    this.foundation = new FileCardFoundation(this.adapter);
+  }
+  get adapter() {
+    return Object.assign(Object.assign({}, super.adapter), {
+      updateFallbackPreview: fallbackPreview => this.setState({
+        fallbackPreview
+      })
+    });
+  }
   transSize(size) {
     if (typeof size === 'number') {
       return getFileSize(size);
@@ -140,6 +156,9 @@ class FileCard extends PureComponent {
     }, icon) : null;
   }
   renderPic(locale) {
+    const {
+      fallbackPreview
+    } = this.state;
     const {
       url,
       percent,
@@ -152,7 +171,9 @@ class FileCard extends PureComponent {
       renderPicPreviewIcon,
       renderThumbnail,
       name,
-      index
+      index,
+      picHeight,
+      picWidth
     } = this.props;
     const showProgress = status === strings.FILE_STATUS_UPLOADING && percent !== 100;
     const showRetry = status === strings.FILE_STATUS_UPLOAD_FAIL && this.props.showRetry;
@@ -160,6 +181,7 @@ class FileCard extends PureComponent {
     const showPreview = status === strings.FILE_STATUS_SUCCESS && !this.props.showReplace;
     const filePicCardCls = cls({
       [`${prefixCls}-picture-file-card`]: true,
+      [`${prefixCls}-picture-file-card-preview-fallback`]: fallbackPreview,
       [`${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,
@@ -201,14 +223,29 @@ class FileCard extends PureComponent {
     const picInfo = typeof renderPicInfo === 'function' ? renderPicInfo(this.props) : /*#__PURE__*/React.createElement("div", {
       className: `${prefixCls}-picture-file-card-pic-info`
     }, index + 1);
-    const thumbnail = typeof renderThumbnail === 'function' ? renderThumbnail(this.props) : /*#__PURE__*/React.createElement("img", {
+    let imgStyle = {};
+    let itemStyle = style ? Object.assign({}, style) : {};
+    if (picHeight) {
+      itemStyle.height = picHeight;
+      imgStyle.height = picHeight;
+    }
+    if (picWidth) {
+      itemStyle.width = picWidth;
+      imgStyle.width = picWidth;
+    }
+    const defaultThumbTail = !fallbackPreview ? /*#__PURE__*/React.createElement("img", {
       src: url,
-      alt: name
+      alt: name,
+      onError: error => this.foundation.handleImageError(error),
+      style: imgStyle
+    }) : /*#__PURE__*/React.createElement(IconFile, {
+      size: "large"
     });
+    const thumbnail = typeof renderThumbnail === 'function' ? renderThumbnail(this.props) : defaultThumbTail;
     return /*#__PURE__*/React.createElement("div", {
       role: "listitem",
       className: filePicCardCls,
-      style: style,
+      style: itemStyle,
       onClick: onPreviewClick
     }, thumbnail, showProgress ? /*#__PURE__*/React.createElement(Progress, {
       percent: percent,
@@ -233,6 +270,9 @@ class FileCard extends PureComponent {
       onPreviewClick,
       renderFileOperation
     } = this.props;
+    const {
+      fallbackPreview
+    } = this.state;
     const fileCardCls = cls({
       [`${prefixCls}-file-card`]: true,
       [`${prefixCls}-file-card-fail`]: status === strings.FILE_STATUS_VALID_FAIL || status === strings.FILE_STATUS_UPLOAD_FAIL,
@@ -240,7 +280,7 @@ class FileCard extends PureComponent {
     });
     const previewCls = cls({
       [`${prefixCls}-file-card-preview`]: true,
-      [`${prefixCls}-file-card-preview-placeholder`]: !preview || previewFile
+      [`${prefixCls}-file-card-preview-placeholder`]: !preview || previewFile || fallbackPreview
     });
     const infoCls = `${prefixCls}-file-card-info`;
     const closeCls = `${prefixCls}-file-card-close`;
@@ -250,9 +290,10 @@ class FileCard extends PureComponent {
     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", {
+    let previewContent = preview && !fallbackPreview ? /*#__PURE__*/React.createElement("img", {
       src: url,
-      alt: name
+      alt: name,
+      onError: error => this.foundation.handleImageError(error)
     }) : /*#__PURE__*/React.createElement(IconFile, {
       size: "large"
     });
@@ -352,6 +393,8 @@ FileCard.propTypes = {
   percent: PropTypes.number,
   preview: PropTypes.bool,
   previewFile: PropTypes.func,
+  picWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  picHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   showReplace: PropTypes.bool,
   showRetry: PropTypes.bool,
   size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),