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

package/lib/cjs/select/index.js

@@ -402,39 +402,40 @@ class Select extends _baseComponent.default {
     const {
       size,
       multiple,
-      disabled
+      disabled,
+      inputProps
     } = this.props;
+    const inputPropsCls = (0, _get2.default)(inputProps, 'className');
     const inputcls = (0, _classnames.default)("".concat(prefixcls, "-input"), {
       ["".concat(prefixcls, "-input-single")]: !multiple,
       ["".concat(prefixcls, "-input-multiple")]: multiple
-    });
+    }, inputPropsCls);
     const {
       inputValue
     } = this.state;
-    const inputProps = {
+    const selectInputProps = (0, _assign.default)({
       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.default.createElement(_index3.default, (0, _assign.default)({
       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() {
@@ -762,7 +763,9 @@ class Select extends _baseComponent.default {
           key: value
         }), content);
       } else {
-        return content;
+        return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+          key: value
+        }, content);
       }
     });
     const contentWrapperCls = (0, _classnames.default)({
@@ -873,6 +876,7 @@ class Select extends _baseComponent.default {
       multiple,
       filter,
       style,
+      id,
       size,
       className,
       validateStatus,
@@ -946,6 +950,7 @@ class Select extends _baseComponent.default {
       ref: ref => this.triggerRef.current = ref,
       onClick: e => this.foundation.handleClick(e),
       style: style,
+      id: id,
       tabIndex: tabIndex,
       onMouseEnter: this.onMouseEnter,
       onMouseLeave: this.onMouseLeave,
@@ -1031,6 +1036,7 @@ Select.propTypes = {
   dropdownStyle: _propTypes.default.object,
   outerTopSlot: _propTypes.default.node,
   innerTopSlot: _propTypes.default.node,
+  inputProps: _propTypes.default.object,
   outerBottomSlot: _propTypes.default.node,
   innerBottomSlot: _propTypes.default.node,
   optionList: _propTypes.default.array,

package/lib/cjs/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/cjs/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/cjs/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/cjs/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/cjs/timeline/item.d.ts

@@ -3,28 +3,31 @@ import PropTypes from 'prop-types';
 import '@douyinfe/semi-foundation/lib/cjs/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/cjs/timeline/item.js

@@ -18,6 +18,8 @@ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 
 var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
 
+var _noop2 = _interopRequireDefault(require("lodash/noop"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -46,7 +48,8 @@ class Item extends _react.PureComponent {
       type,
       style,
       time,
-      extra
+      extra,
+      onClick
     } = this.props;
     const itemCls = (0, _classnames.default)(prefixCls, className);
     const dotCls = (0, _classnames.default)({
@@ -61,16 +64,17 @@ class Item extends _react.PureComponent {
     } : null;
     return /*#__PURE__*/_react.default.createElement("li", {
       className: itemCls,
-      style: style
+      style: style,
+      onClick: onClick
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefixCls, "-tail")
     }), /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
       className: dotCls
     }, dotStyle), dot), /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefixCls, "-content")
-    }, children, extra ? /*#__PURE__*/_react.default.createElement("div", {
+    }, children, extra && /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefixCls, "-content-extra")
-    }, extra) : null, /*#__PURE__*/_react.default.createElement("div", {
+    }, extra), time && /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefixCls, "-content-time")
     }, time)));
   }
@@ -80,15 +84,17 @@ class Item extends _react.PureComponent {
 exports.default = Item;
 Item.propTypes = {
   color: _propTypes.default.string,
-  time: _propTypes.default.string,
+  time: _propTypes.default.node,
   type: _propTypes.default.oneOf(_constants.strings.ITEM_TYPE),
   dot: _propTypes.default.node,
   extra: _propTypes.default.node,
   position: _propTypes.default.oneOf(_constants.strings.ITEM_POS),
   className: _propTypes.default.string,
-  style: _propTypes.default.object
+  style: _propTypes.default.object,
+  onClick: _propTypes.default.func
 };
 Item.defaultProps = {
   type: 'default',
-  time: ''
+  time: '',
+  onClick: _noop2.default
 };

package/lib/cjs/tree/treeNode.js

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

package/lib/cjs/treeSelect/index.js

@@ -769,6 +769,7 @@ class TreeSelect extends _baseComponent.default {
           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/cjs/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/cjs/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/cjs/upload/fileCard.js

@@ -26,6 +26,8 @@ var _constants = require("@douyinfe/semi-foundation/lib/cjs/upload/constants");
 
 var _utils = require("@douyinfe/semi-foundation/lib/cjs/upload/utils");
 
+var _semiIcons = require("@douyinfe/semi-icons");
+
 var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
 
 var _index = _interopRequireDefault(require("../iconButton/index"));
@@ -38,8 +40,6 @@ var _index4 = _interopRequireDefault(require("../spin/index"));
 
 var _reactUtils = require("../_base/reactUtils");
 
-var _semiIcons = require("@douyinfe/semi-icons");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -191,16 +191,23 @@ class FileCard extends _react.PureComponent {
       status,
       disabled,
       style,
-      onPreviewClick
+      onPreviewClick,
+      showPicInfo,
+      renderPicInfo,
+      renderThumbnail,
+      name,
+      index
     } = this.props;
+    const showProgress = status === _constants.strings.FILE_STATUS_UPLOADING && percent !== 100;
+    const showRetry = status === _constants.strings.FILE_STATUS_UPLOAD_FAIL && this.props.showRetry;
+    const showReplace = status === _constants.strings.FILE_STATUS_SUCCESS && this.props.showReplace;
     const filePicCardCls = (0, _classnames.default)({
       ["".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 === _constants.strings.FILE_STATUS_UPLOAD_FAIL,
+      ["".concat(prefixCls, "-picture-file-card-uploading")]: showProgress
     });
-    const showProgress = status === _constants.strings.FILE_STATUS_UPLOADING && percent !== 100;
-    const showRetry = status === _constants.strings.FILE_STATUS_UPLOAD_FAIL && this.props.showRetry;
-    const showReplace = status === _constants.strings.FILE_STATUS_SUCCESS && this.props.showReplace;
     const closeCls = "".concat(prefixCls, "-picture-file-card-close");
 
     const retry = /*#__PURE__*/_react.default.createElement("div", {
@@ -223,47 +230,38 @@ class FileCard extends _react.PureComponent {
       className: "".concat(prefixCls, "-picture-file-card-icon-replace")
     })));
 
+    const picInfo = typeof renderPicInfo === 'function' ? renderPicInfo(this.props) : /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-picture-file-card-pic-info")
+    }, index + 1);
+    const thumbnail = typeof renderThumbnail === 'function' ? renderThumbnail(this.props) : /*#__PURE__*/_react.default.createElement("img", {
+      src: url,
+      alt: "picture of ".concat(name)
+    });
     return /*#__PURE__*/_react.default.createElement("div", {
       className: filePicCardCls,
       style: style,
       onClick: onPreviewClick
-    }, /*#__PURE__*/_react.default.createElement("img", {
-      src: url
-    }), showProgress ? /*#__PURE__*/_react.default.createElement(_index2.default, {
+    }, thumbnail, showProgress ? /*#__PURE__*/_react.default.createElement(_index2.default, {
       percent: percent,
       type: "circle",
       size: "small",
       orbitStroke: '#FFF'
-    }) : null, showRetry ? retry : null, showReplace && replace, disabled ? null : /*#__PURE__*/_react.default.createElement("div", {
-      className: closeCls,
-      onClick: e => this.onRemove(e)
+    }) : null, showRetry ? retry : null, showReplace && replace, showPicInfo && picInfo, !disabled && /*#__PURE__*/_react.default.createElement("div", {
+      className: closeCls
     }, /*#__PURE__*/_react.default.createElement(_semiIcons.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,
@@ -284,15 +282,8 @@ class FileCard extends _react.PureComponent {
     const replaceCls = "".concat(prefixCls, "-file-card-replace");
     const showProgress = !(percent === 100 || typeof percent === 'undefined') && status === _constants.strings.FILE_STATUS_UPLOADING; // only show retry when upload fail & showRetry is true, no need to show during validate fail
 
-    const showRetry = status === _constants.strings.FILE_STATUS_UPLOAD_FAIL && this.props.showRetry;
-    const showReplace = status === _constants.strings.FILE_STATUS_SUCCESS && this.props.showReplace;
-
-    if (listType === _constants.strings.FILE_LIST_PIC) {
-      return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
-        componentName: "Upload"
-      }, locale => this.renderPic(locale));
-    }
-
+    const showRetry = status === _constants.strings.FILE_STATUS_UPLOAD_FAIL && propsShowRetry;
+    const showReplace = status === _constants.strings.FILE_STATUS_SUCCESS && propsShowReplace;
     const fileSize = this.transSize(size);
     let previewContent = preview ? /*#__PURE__*/_react.default.createElement("img", {
       src: url
@@ -304,9 +295,7 @@ class FileCard extends _react.PureComponent {
       previewContent = previewFile(this.props);
     }
 
-    return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
-      componentName: "Upload"
-    }, locale => /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/_react.default.createElement("div", {
       className: fileCardCls,
       style: style,
       onClick: onPreviewClick
@@ -351,7 +340,42 @@ class FileCard extends _react.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 === _constants.strings.FILE_LIST_PIC) {
+      return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
+        componentName: "Upload"
+      }, locale => this.renderPic(locale));
+    }
+
+    if (listType === _constants.strings.FILE_LIST_DEFAULT) {
+      return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
+        componentName: "Upload"
+      }, locale => this.renderFile(locale));
+    }
+
+    return null;
   }
 
 }
@@ -374,7 +398,8 @@ FileCard.propTypes = {
   status: _propTypes.default.string,
   style: _propTypes.default.object,
   url: _propTypes.default.string,
-  validateMessage: _propTypes.default.node
+  validateMessage: _propTypes.default.node,
+  index: _propTypes.default.number
 };
 FileCard.defaultProps = {
   listType: _constants.strings.FILE_LIST_DEFAULT,

package/lib/cjs/upload/index.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode, CSSProperties, RefObject, ChangeEvent, DragEvent } from 'react';
+import React, { ReactNode, CSSProperties, RefObject, ChangeEvent, DragEvent } from 'react';
 import PropTypes from 'prop-types';
-import UploadFoundation, { UploadAdapter, BeforeUploadObjectResult, AfterUploadResult } from '@douyinfe/semi-foundation/lib/cjs/upload/foundation';
+import UploadFoundation, { CustomFile, UploadAdapter, BeforeUploadObjectResult, AfterUploadResult } from '@douyinfe/semi-foundation/lib/cjs/upload/foundation';
 import FileCard from './fileCard';
 import BaseComponent, { ValidateStatus } from '../_base/baseComponent';
 import { FileItem, RenderFileItemProps, UploadListType, PromptPositionType, BeforeUploadProps, AfterUploadProps, OnChangeProps, customRequestArgs, CustomError } from './interface';
@@ -54,7 +54,10 @@ export interface UploadProps {
     prompt?: ReactNode;
     promptPosition?: PromptPositionType;
     renderFileItem?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
+    renderPicInfo?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
+    renderThumbnail?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
     showClear?: boolean;
+    showPicInfo?: boolean;
     showReplace?: boolean;
     showRetry?: boolean;
     showUploadList?: boolean;
@@ -121,14 +124,17 @@ declare class Upload extends BaseComponent<UploadProps, UploadState> {
         prompt: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         promptPosition: PropTypes.Requireable<"left" | "right" | "bottom">;
         renderFileItem: PropTypes.Requireable<(...args: any[]) => any>;
+        renderPicInfo: PropTypes.Requireable<(...args: any[]) => any>;
+        renderThumbnail: PropTypes.Requireable<(...args: any[]) => any>;
         showClear: PropTypes.Requireable<boolean>;
+        showPicInfo: PropTypes.Requireable<boolean>;
         showReplace: PropTypes.Requireable<boolean>;
         showRetry: PropTypes.Requireable<boolean>;
         showUploadList: PropTypes.Requireable<boolean>;
         style: PropTypes.Requireable<object>;
         timeout: PropTypes.Requireable<number>;
         transformFile: PropTypes.Requireable<(...args: any[]) => any>;
-        uploadTrigger: PropTypes.Requireable<"custom" | "auto">;
+        uploadTrigger: PropTypes.Requireable<"auto" | "custom">;
         validateMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
         withCredentials: PropTypes.Requireable<boolean>;
@@ -136,7 +142,16 @@ declare class Upload extends BaseComponent<UploadProps, UploadState> {
     static defaultProps: Partial<UploadProps>;
     static FileCard: typeof FileCard;
     constructor(props: UploadProps);
-    static getDerivedStateFromProps(props: UploadProps): Partial<UploadState> | null;
+    /**
+     * Notes:
+     *   The input parameter and return value here do not declare the type, otherwise tsc may report an error in form/fields.tsx when wrap after withField
+     *   `The types of the parameters "props" and "nextProps" are incompatible.
+           The attribute "action" is missing in the type "Readonly<any>", but it is required in the type "UploadProps".`
+     *   which seems to be a bug, remove props type declare here
+     */
+    static getDerivedStateFromProps(props: any): {
+        fileList: any;
+    };
     get adapter(): UploadAdapter<UploadProps, UploadState>;
     foundation: UploadFoundation;
     inputRef: RefObject<HTMLInputElement>;
@@ -148,13 +163,28 @@ declare class Upload extends BaseComponent<UploadProps, UploadState> {
     onReplaceChange: (e: ChangeEvent<HTMLInputElement>) => void;
     clear: () => void;
     remove: (fileItem: FileItem) => void;
+    /**
+     * ref method
+     * insert files at index
+     * @param files Array<CustomFile>
+     * @param index number
+     * @returns
+     */
+    insert: (files: Array<CustomFile>, index: number) => void;
+    /**
+     * ref method
+     * manual upload by user
+     */
     upload: () => void;
     renderFile: (file: FileItem, index: number, locale: Locale['Upload']) => ReactNode;
     renderFileList: () => ReactNode;
+    renderFileListPic: () => JSX.Element;
+    renderFileListDefault: () => JSX.Element;
     onDrop: (e: DragEvent<HTMLDivElement>) => void;
     onDragOver: (e: DragEvent<HTMLDivElement>) => void;
     onDragLeave: (e: DragEvent<HTMLDivElement>) => void;
     onDragEnter: (e: DragEvent<HTMLDivElement>) => void;
+    renderAddContent: () => React.ReactNode;
     renderDragArea: () => ReactNode;
     render(): ReactNode;
 }