@douyinfe/semi-ui 2.1.6-alpha.0 → 2.2.1

package/lib/cjs/locale/source/es.js

@@ -0,0 +1,168 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _locale = require("date-fns/locale");
+
+/**
+ * [i18n-Spanish(es)]
+ *
+ */
+const locale = {
+  code: 'es',
+  dateFnsLocale: _locale.es,
+  Pagination: {
+    item: 'objeto',
+    pageSize: ' objetos / página',
+    page: ' páginas',
+    total: '',
+    jumpTo: 'Ir a'
+  },
+  Modal: {
+    confirm: 'Aceptar',
+    cancel: 'Cancelar'
+  },
+  TimePicker: {
+    placeholder: {
+      time: 'Seleccionar hora',
+      timeRange: 'Seleccionar rango de tiempo'
+    },
+    begin: 'Hora inicial',
+    end: 'Hora final',
+    hour: '',
+    minute: '',
+    second: '',
+    AM: 'AM',
+    PM: 'PM'
+  },
+  DatePicker: {
+    placeholder: {
+      date: 'Seleccionar fecha',
+      dateTime: 'Seleccionar hora y fecha',
+      dateRange: ['Fecha inicial', 'Fecha final'],
+      dateTimeRange: ['Fecha inicial', 'Fecha final']
+    },
+    footer: {
+      confirm: 'Aceptar',
+      cancel: 'Cancelar'
+    },
+    selectDate: 'Seleccionar fecha',
+    selectTime: 'Seleccionar hora',
+    year: 'año',
+    month: 'mes',
+    day: 'día',
+    monthText: '${month} ${year}',
+    months: {
+      1: 'Ene',
+      2: 'Feb',
+      3: 'Mar',
+      4: 'Abr',
+      5: 'May',
+      6: 'Jun',
+      7: 'Jul',
+      8: 'Ago',
+      9: 'Sep',
+      10: 'Oct',
+      11: 'Nov',
+      12: 'Dic'
+    },
+    fullMonths: {
+      1: 'Enero',
+      2: 'Febrero',
+      3: 'Marzo',
+      4: 'Abril',
+      5: 'Mayo',
+      6: 'Junio',
+      7: 'Julio',
+      8: 'Agosto',
+      9: 'Septiembre',
+      10: 'Octubre',
+      11: 'Noviembre',
+      12: 'Diciembre'
+    },
+    weeks: {
+      Mon: 'Lun',
+      Tue: 'Mar',
+      Wed: 'Mie',
+      Thu: 'Jue',
+      Fri: 'Vie',
+      Sat: 'Sab',
+      Sun: 'Dom'
+    },
+    localeFormatToken: {
+      FORMAT_SWITCH_DATE: 'yyyy-MM-dd'
+    }
+  },
+  Popconfirm: {
+    confirm: 'Aceptar',
+    cancel: 'Cancelar'
+  },
+  Navigation: {
+    collapseText: 'Contraer barra lateral',
+    expandText: 'Expandir barra lateral'
+  },
+  Table: {
+    emptyText: 'Sin resultados',
+    pageText: 'Mostrando del ${currentStart} al ${currentEnd} de ${total}'
+  },
+  Select: {
+    emptyText: 'Sin resultados',
+    createText: 'Crear'
+  },
+  Tree: {
+    emptyText: 'Sin resultados',
+    searchPlaceholder: 'Búsqueda'
+  },
+  Cascader: {
+    emptyText: 'Sin resultados'
+  },
+  List: {
+    emptyText: 'Sin resultados'
+  },
+  Calendar: {
+    allDay: 'Todo el día',
+    AM: '${time} AM',
+    PM: '${time} PM',
+    datestring: '',
+    remaining: '${remained} mas'
+  },
+  Upload: {
+    mainText: 'Clic aquí para cargar archivo o arrastre aquí el archivo',
+    illegalTips: 'Este tipo de archivo no es compatible',
+    legalTips: 'Suelte y comience a cargar',
+    retry: 'Reintentar',
+    replace: 'Reemplazar archivo',
+    clear: 'Limpiar',
+    selectedFiles: 'Archivos seleccionados',
+    illegalSize: 'Tamaño de archivo inválido',
+    fail: 'Error al cargar'
+  },
+  TreeSelect: {
+    searchPlaceholder: 'Búsqueda'
+  },
+  Typography: {
+    copy: 'Copiar',
+    copied: 'Copiado',
+    expand: 'Expandir',
+    collapse: 'Contraer'
+  },
+  Transfer: {
+    emptyLeft: 'Sin datos',
+    emptySearch: 'Sin resultados de búsqueda',
+    emptyRight: 'Sin contenido, verifique desde la izquierda',
+    placeholder: 'Búsqueda',
+    clear: 'Limpiar',
+    selectAll: 'Seleccionar todo',
+    clearSelectAll: 'Deseleccionar todo',
+    total: 'Total ${total} objetos',
+    selected: '${total} objetos seleccionados'
+  }
+};
+var _default = locale;
+exports.default = _default;

package/lib/cjs/rating/item.js

@@ -99,7 +99,7 @@ class Item extends _react.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.default.createElement(_semiIcons.IconStar, {
       size: iconSize
     });

package/lib/cjs/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/cjs/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/cjs/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;
@@ -85,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;
@@ -151,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/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() {
@@ -1035,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/tabs/index.js

@@ -10,7 +10,7 @@ var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-s
 
 var _forEachInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
 
-var _Object$keys2 = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
@@ -25,8 +25,6 @@ var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-st
 
 var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
 
-var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
-
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 
 var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
@@ -41,8 +39,6 @@ var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-st
 
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 
-var _omit2 = _interopRequireDefault(require("lodash/omit"));
-
 var _pick2 = _interopRequireDefault(require("lodash/pick"));
 
 var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
@@ -73,7 +69,7 @@ var _tabsContext = _interopRequireDefault(require("./tabs-context"));
 
 var _interface = require("./interface");
 
-_forEachInstanceProperty2(_context9 = _Object$keys2(_interface)).call(_context9, function (key) {
+_forEachInstanceProperty2(_context9 = _Object$keys(_interface)).call(_context9, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _interface[key]) return;
@@ -101,7 +97,7 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   return t;
 };
 
-const panePickKeys = (0, _keys.default)((0, _omit2.default)(_TabPane.default.propTypes, ['children']));
+const panePickKeys = ['className', 'style', 'disabled', 'itemKey', 'tab', 'icon'];
 
 class Tabs extends _baseComponent.default {
   constructor(props) {

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

@@ -10,6 +10,7 @@ export interface TimelineItemProps {
     position?: 'left' | 'right';
     className?: string;
     style?: React.CSSProperties;
+    onClick?: React.MouseEventHandler<HTMLLIElement>;
 }
 export default class Item extends PureComponent<TimelineItemProps> {
     static propTypes: {
@@ -21,10 +22,12 @@ export default class Item extends PureComponent<TimelineItemProps> {
         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,7 +64,8 @@ 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)({
@@ -86,9 +90,11 @@ Item.propTypes = {
   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/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<4 | 2 | 1 | 3 | 5 | 6>;
+        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,7 +124,10 @@ 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>;
@@ -157,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;
 }