@douyinfe/semi-ui 2.1.5 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (104) hide show
  1. package/_base/_story/a11y.jsx +1302 -0
  2. package/_base/_story/a11y.scss +49 -0
  3. package/_base/_story/index.stories.js +3 -1
  4. package/_utils/index.ts +9 -4
  5. package/cascader/__test__/cascader.test.js +221 -0
  6. package/cascader/_story/cascader.stories.js +138 -0
  7. package/cascader/index.tsx +37 -21
  8. package/cascader/item.tsx +4 -2
  9. package/datePicker/__test__/datePicker.test.js +85 -2
  10. package/datePicker/_story/datePicker.stories.js +29 -1
  11. package/datePicker/_story/v2/YearButton.jsx +17 -0
  12. package/datePicker/_story/v2/index.js +1 -0
  13. package/datePicker/monthsGrid.tsx +12 -1
  14. package/datePicker/navigation.tsx +55 -29
  15. package/descriptions/__test__/descriptions.test.js +27 -1
  16. package/descriptions/_story/descriptions.stories.js +52 -2
  17. package/descriptions/item.tsx +1 -1
  18. package/dist/css/semi.css +49 -25
  19. package/dist/css/semi.min.css +1 -1
  20. package/dist/umd/semi-ui.js +839 -253
  21. package/dist/umd/semi-ui.js.map +1 -1
  22. package/dist/umd/semi-ui.min.js +1 -1
  23. package/dist/umd/semi-ui.min.js.map +1 -1
  24. package/empty/index.tsx +2 -2
  25. package/form/_story/form.stories.js +0 -67
  26. package/gulpfile.js +2 -1
  27. package/lib/cjs/_utils/index.d.ts +1 -0
  28. package/lib/cjs/_utils/index.js +12 -5
  29. package/lib/cjs/cascader/index.d.ts +7 -0
  30. package/lib/cjs/cascader/index.js +35 -22
  31. package/lib/cjs/cascader/item.d.ts +2 -0
  32. package/lib/cjs/cascader/item.js +4 -2
  33. package/lib/cjs/datePicker/monthsGrid.d.ts +1 -0
  34. package/lib/cjs/datePicker/monthsGrid.js +6 -0
  35. package/lib/cjs/datePicker/navigation.js +47 -7
  36. package/lib/cjs/descriptions/item.js +1 -1
  37. package/lib/cjs/empty/index.d.ts +2 -2
  38. package/lib/cjs/empty/index.js +19 -18
  39. package/lib/cjs/form/baseForm.d.ts +5 -0
  40. package/lib/cjs/form/field.d.ts +5 -0
  41. package/lib/cjs/locale/source/es.d.ts +7 -0
  42. package/lib/cjs/locale/source/es.js +168 -0
  43. package/lib/cjs/pagination/index.js +9 -4
  44. package/lib/cjs/rating/item.js +1 -1
  45. package/lib/cjs/select/index.d.ts +9 -0
  46. package/lib/cjs/select/index.js +13 -9
  47. package/lib/cjs/tabs/index.js +3 -7
  48. package/lib/cjs/timeline/item.d.ts +3 -0
  49. package/lib/cjs/timeline/item.js +10 -4
  50. package/lib/cjs/upload/fileCard.d.ts +2 -0
  51. package/lib/cjs/upload/fileCard.js +70 -45
  52. package/lib/cjs/upload/index.d.ts +23 -2
  53. package/lib/cjs/upload/index.js +133 -25
  54. package/lib/cjs/upload/interface.d.ts +3 -0
  55. package/lib/es/_utils/index.d.ts +1 -0
  56. package/lib/es/_utils/index.js +12 -5
  57. package/lib/es/cascader/index.d.ts +7 -0
  58. package/lib/es/cascader/index.js +34 -25
  59. package/lib/es/cascader/item.d.ts +2 -0
  60. package/lib/es/cascader/item.js +4 -2
  61. package/lib/es/datePicker/monthsGrid.d.ts +1 -0
  62. package/lib/es/datePicker/monthsGrid.js +6 -0
  63. package/lib/es/datePicker/navigation.js +48 -8
  64. package/lib/es/descriptions/item.js +1 -1
  65. package/lib/es/empty/index.d.ts +2 -2
  66. package/lib/es/empty/index.js +19 -18
  67. package/lib/es/form/baseForm.d.ts +5 -0
  68. package/lib/es/form/field.d.ts +5 -0
  69. package/lib/es/locale/source/es.d.ts +7 -0
  70. package/lib/es/locale/source/es.js +157 -0
  71. package/lib/es/pagination/index.js +8 -4
  72. package/lib/es/rating/item.js +1 -1
  73. package/lib/es/select/index.d.ts +9 -0
  74. package/lib/es/select/index.js +17 -9
  75. package/lib/es/tabs/index.js +1 -5
  76. package/lib/es/timeline/item.d.ts +3 -0
  77. package/lib/es/timeline/item.js +9 -4
  78. package/lib/es/upload/fileCard.d.ts +2 -0
  79. package/lib/es/upload/fileCard.js +69 -44
  80. package/lib/es/upload/index.d.ts +23 -2
  81. package/lib/es/upload/index.js +133 -24
  82. package/lib/es/upload/interface.d.ts +3 -0
  83. package/locale/source/es.ts +160 -0
  84. package/navigation/__test__/navigation.test.js +4 -4
  85. package/navigation/_story/AutoOpen/index.js +1 -1
  86. package/navigation/_story/WithChildren/index.js +1 -1
  87. package/navigation/_story/navigation.stories.js +1 -1
  88. package/navigation/_story/navigation.stories.tsx +4 -4
  89. package/package.json +17 -9
  90. package/pagination/_story/pagination.stories.js +11 -0
  91. package/pagination/index.tsx +9 -4
  92. package/popover/Arrow.tsx +1 -1
  93. package/rating/item.tsx +1 -1
  94. package/select/_story/select.stories.js +39 -14
  95. package/select/index.tsx +18 -7
  96. package/table/_story/DynamicFilters/index.js +13 -16
  97. package/tabs/index.tsx +1 -1
  98. package/timeline/_story/timeline.stories.js +70 -6
  99. package/timeline/item.tsx +7 -2
  100. package/tooltip/_story/tooltip.stories.js +1 -1
  101. package/upload/__test__/upload.test.js +50 -1
  102. package/upload/fileCard.tsx +110 -95
  103. package/upload/index.tsx +147 -53
  104. package/upload/interface.ts +3 -0
@@ -0,0 +1,168 @@
1
+ "use strict";
2
+
3
+ var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
4
+
5
+ _Object$defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+
9
+ exports.default = void 0;
10
+
11
+ var _locale = require("date-fns/locale");
12
+
13
+ /**
14
+ * [i18n-Spanish(es)]
15
+ *
16
+ */
17
+ const locale = {
18
+ code: 'es',
19
+ dateFnsLocale: _locale.es,
20
+ Pagination: {
21
+ item: 'objeto',
22
+ pageSize: ' objetos / página',
23
+ page: ' páginas',
24
+ total: '',
25
+ jumpTo: 'Ir a'
26
+ },
27
+ Modal: {
28
+ confirm: 'Aceptar',
29
+ cancel: 'Cancelar'
30
+ },
31
+ TimePicker: {
32
+ placeholder: {
33
+ time: 'Seleccionar hora',
34
+ timeRange: 'Seleccionar rango de tiempo'
35
+ },
36
+ begin: 'Hora inicial',
37
+ end: 'Hora final',
38
+ hour: '',
39
+ minute: '',
40
+ second: '',
41
+ AM: 'AM',
42
+ PM: 'PM'
43
+ },
44
+ DatePicker: {
45
+ placeholder: {
46
+ date: 'Seleccionar fecha',
47
+ dateTime: 'Seleccionar hora y fecha',
48
+ dateRange: ['Fecha inicial', 'Fecha final'],
49
+ dateTimeRange: ['Fecha inicial', 'Fecha final']
50
+ },
51
+ footer: {
52
+ confirm: 'Aceptar',
53
+ cancel: 'Cancelar'
54
+ },
55
+ selectDate: 'Seleccionar fecha',
56
+ selectTime: 'Seleccionar hora',
57
+ year: 'año',
58
+ month: 'mes',
59
+ day: 'día',
60
+ monthText: '${month} ${year}',
61
+ months: {
62
+ 1: 'Ene',
63
+ 2: 'Feb',
64
+ 3: 'Mar',
65
+ 4: 'Abr',
66
+ 5: 'May',
67
+ 6: 'Jun',
68
+ 7: 'Jul',
69
+ 8: 'Ago',
70
+ 9: 'Sep',
71
+ 10: 'Oct',
72
+ 11: 'Nov',
73
+ 12: 'Dic'
74
+ },
75
+ fullMonths: {
76
+ 1: 'Enero',
77
+ 2: 'Febrero',
78
+ 3: 'Marzo',
79
+ 4: 'Abril',
80
+ 5: 'Mayo',
81
+ 6: 'Junio',
82
+ 7: 'Julio',
83
+ 8: 'Agosto',
84
+ 9: 'Septiembre',
85
+ 10: 'Octubre',
86
+ 11: 'Noviembre',
87
+ 12: 'Diciembre'
88
+ },
89
+ weeks: {
90
+ Mon: 'Lun',
91
+ Tue: 'Mar',
92
+ Wed: 'Mie',
93
+ Thu: 'Jue',
94
+ Fri: 'Vie',
95
+ Sat: 'Sab',
96
+ Sun: 'Dom'
97
+ },
98
+ localeFormatToken: {
99
+ FORMAT_SWITCH_DATE: 'yyyy-MM-dd'
100
+ }
101
+ },
102
+ Popconfirm: {
103
+ confirm: 'Aceptar',
104
+ cancel: 'Cancelar'
105
+ },
106
+ Navigation: {
107
+ collapseText: 'Contraer barra lateral',
108
+ expandText: 'Expandir barra lateral'
109
+ },
110
+ Table: {
111
+ emptyText: 'Sin resultados',
112
+ pageText: 'Mostrando del ${currentStart} al ${currentEnd} de ${total}'
113
+ },
114
+ Select: {
115
+ emptyText: 'Sin resultados',
116
+ createText: 'Crear'
117
+ },
118
+ Tree: {
119
+ emptyText: 'Sin resultados',
120
+ searchPlaceholder: 'Búsqueda'
121
+ },
122
+ Cascader: {
123
+ emptyText: 'Sin resultados'
124
+ },
125
+ List: {
126
+ emptyText: 'Sin resultados'
127
+ },
128
+ Calendar: {
129
+ allDay: 'Todo el día',
130
+ AM: '${time} AM',
131
+ PM: '${time} PM',
132
+ datestring: '',
133
+ remaining: '${remained} mas'
134
+ },
135
+ Upload: {
136
+ mainText: 'Clic aquí para cargar archivo o arrastre aquí el archivo',
137
+ illegalTips: 'Este tipo de archivo no es compatible',
138
+ legalTips: 'Suelte y comience a cargar',
139
+ retry: 'Reintentar',
140
+ replace: 'Reemplazar archivo',
141
+ clear: 'Limpiar',
142
+ selectedFiles: 'Archivos seleccionados',
143
+ illegalSize: 'Tamaño de archivo inválido',
144
+ fail: 'Error al cargar'
145
+ },
146
+ TreeSelect: {
147
+ searchPlaceholder: 'Búsqueda'
148
+ },
149
+ Typography: {
150
+ copy: 'Copiar',
151
+ copied: 'Copiado',
152
+ expand: 'Expandir',
153
+ collapse: 'Contraer'
154
+ },
155
+ Transfer: {
156
+ emptyLeft: 'Sin datos',
157
+ emptySearch: 'Sin resultados de búsqueda',
158
+ emptyRight: 'Sin contenido, verifique desde la izquierda',
159
+ placeholder: 'Búsqueda',
160
+ clear: 'Limpiar',
161
+ selectAll: 'Seleccionar todo',
162
+ clearSelectAll: 'Deseleccionar todo',
163
+ total: 'Total ${total} objetos',
164
+ selected: '${total} objetos seleccionados'
165
+ }
166
+ };
167
+ var _default = locale;
168
+ exports.default = _default;
@@ -40,6 +40,8 @@ var _constants2 = require("@douyinfe/semi-foundation/lib/cjs/popover/constants")
40
40
 
41
41
  var _semiIcons = require("@douyinfe/semi-icons");
42
42
 
43
+ var _warning = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/warning"));
44
+
43
45
  var _context7 = _interopRequireDefault(require("../configProvider/context"));
44
46
 
45
47
  var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
@@ -78,6 +80,7 @@ class Pagination extends _baseComponent.default {
78
80
  this.foundation = new _foundation.default(this.adapter);
79
81
  this.renderDefaultPage = (0, _bind.default)(_context = this.renderDefaultPage).call(_context, this);
80
82
  this.renderSmallPage = (0, _bind.default)(_context2 = this.renderSmallPage).call(_context2, this);
83
+ (0, _warning.default)(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');
81
84
  }
82
85
 
83
86
  get adapter() {
@@ -370,7 +373,8 @@ class Pagination extends _baseComponent.default {
370
373
  className,
371
374
  style,
372
375
  hideOnSinglePage,
373
- hoverShowPageSelect
376
+ hoverShowPageSelect,
377
+ showSizeChanger
374
378
  } = this.props;
375
379
  const paginationCls = (0, _classnames.default)("".concat(prefixCls, "-small"), prefixCls, className);
376
380
  const {
@@ -380,7 +384,7 @@ class Pagination extends _baseComponent.default {
380
384
  } = this.state;
381
385
  const totalPageNum = Math.ceil(total / pageSize);
382
386
 
383
- if (totalPageNum < 2 && hideOnSinglePage) {
387
+ if (totalPageNum < 2 && hideOnSinglePage && !showSizeChanger) {
384
388
  return null;
385
389
  }
386
390
 
@@ -410,13 +414,14 @@ class Pagination extends _baseComponent.default {
410
414
  showTotal,
411
415
  className,
412
416
  style,
413
- hideOnSinglePage
417
+ hideOnSinglePage,
418
+ showSizeChanger
414
419
  } = this.props;
415
420
  const paginationCls = (0, _classnames.default)(className, "".concat(prefixCls));
416
421
  const showTotalCls = "".concat(prefixCls, "-total");
417
422
  const totalPageNum = Math.ceil(total / pageSize);
418
423
 
419
- if (totalPageNum < 2 && hideOnSinglePage) {
424
+ if (totalPageNum < 2 && hideOnSinglePage && !showSizeChanger) {
420
425
  return null;
421
426
  }
422
427
 
@@ -99,7 +99,7 @@ class Item extends _react.PureComponent {
99
99
  height: size,
100
100
  fontSize: size
101
101
  } : {};
102
- const iconSize = size === 'small' ? 'default' : 'extra-large';
102
+ const iconSize = isCustomSize ? 'inherit' : size === 'small' ? 'default' : 'extra-large';
103
103
  const content = character ? character : /*#__PURE__*/_react.default.createElement(_semiIcons.IconStar, {
104
104
  size: iconSize
105
105
  });
@@ -2,13 +2,20 @@ import React, { MouseEvent } from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  import SelectFoundation, { SelectAdapter } from '@douyinfe/semi-foundation/lib/cjs/select/foundation';
4
4
  import BaseComponent, { ValidateStatus } from '../_base/baseComponent';
5
+ import { InputProps } from '../input/index';
5
6
  import Option, { OptionProps } from './option';
6
7
  import OptionGroup from './optionGroup';
8
+ import { Subtract } from 'utility-types';
7
9
  import '@douyinfe/semi-foundation/lib/cjs/select/select.css';
8
10
  import { Position, TooltipProps } from '../tooltip';
9
11
  export { OptionProps } from './option';
10
12
  export { OptionGroupProps } from './optionGroup';
11
13
  export { VirtualRowProps } from './virtualRow';
14
+ declare type ExcludeInputType = {
15
+ value?: InputProps['value'];
16
+ onFocus?: InputProps['onFocus'];
17
+ onChange?: InputProps['onChange'];
18
+ };
12
19
  export interface optionRenderProps {
13
20
  key?: any;
14
21
  label?: string | React.ReactNode | number;
@@ -85,6 +92,7 @@ export declare type SelectProps = {
85
92
  suffix?: React.ReactNode;
86
93
  prefix?: React.ReactNode;
87
94
  insetLabel?: React.ReactNode;
95
+ inputProps?: Subtract<InputProps, ExcludeInputType>;
88
96
  showClear?: boolean;
89
97
  showArrow?: boolean;
90
98
  renderSelectedItem?: RenderSelectedItemFn;
@@ -151,6 +159,7 @@ declare class Select extends BaseComponent<SelectProps, SelectState> {
151
159
  dropdownStyle: PropTypes.Requireable<object>;
152
160
  outerTopSlot: PropTypes.Requireable<PropTypes.ReactNodeLike>;
153
161
  innerTopSlot: PropTypes.Requireable<PropTypes.ReactNodeLike>;
162
+ inputProps: PropTypes.Requireable<object>;
154
163
  outerBottomSlot: PropTypes.Requireable<PropTypes.ReactNodeLike>;
155
164
  innerBottomSlot: PropTypes.Requireable<PropTypes.ReactNodeLike>;
156
165
  optionList: PropTypes.Requireable<any[]>;
@@ -402,39 +402,40 @@ class Select extends _baseComponent.default {
402
402
  const {
403
403
  size,
404
404
  multiple,
405
- disabled
405
+ disabled,
406
+ inputProps
406
407
  } = this.props;
408
+ const inputPropsCls = (0, _get2.default)(inputProps, 'className');
407
409
  const inputcls = (0, _classnames.default)("".concat(prefixcls, "-input"), {
408
410
  ["".concat(prefixcls, "-input-single")]: !multiple,
409
411
  ["".concat(prefixcls, "-input-multiple")]: multiple
410
- });
412
+ }, inputPropsCls);
411
413
  const {
412
414
  inputValue
413
415
  } = this.state;
414
- const inputProps = {
416
+ const selectInputProps = (0, _assign.default)({
415
417
  value: inputValue,
416
418
  disabled,
417
419
  className: inputcls,
418
420
  onChange: this.handleInputChange
419
- };
421
+ }, inputProps);
420
422
  let style = {}; // Multiple choice mode
421
423
 
422
424
  if (multiple) {
423
425
  style = {
424
426
  width: inputValue ? "".concat(inputValue.length * 16, "px") : '2px'
425
427
  };
426
- inputProps.style = style;
428
+ selectInputProps.style = style;
427
429
  }
428
430
 
429
431
  return /*#__PURE__*/_react.default.createElement(_index3.default, (0, _assign.default)({
430
432
  ref: this.inputRef,
431
- size: size
432
- }, inputProps, {
433
+ size: size,
433
434
  onFocus: e => {
434
435
  // prevent event bubbling which will fire trigger onFocus event
435
436
  e.stopPropagation(); // e.nativeEvent.stopImmediatePropagation();
436
437
  }
437
- }));
438
+ }, selectInputProps));
438
439
  }
439
440
 
440
441
  close() {
@@ -762,7 +763,9 @@ class Select extends _baseComponent.default {
762
763
  key: value
763
764
  }), content);
764
765
  } else {
765
- return content;
766
+ return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
767
+ key: value
768
+ }, content);
766
769
  }
767
770
  });
768
771
  const contentWrapperCls = (0, _classnames.default)({
@@ -1033,6 +1036,7 @@ Select.propTypes = {
1033
1036
  dropdownStyle: _propTypes.default.object,
1034
1037
  outerTopSlot: _propTypes.default.node,
1035
1038
  innerTopSlot: _propTypes.default.node,
1039
+ inputProps: _propTypes.default.object,
1036
1040
  outerBottomSlot: _propTypes.default.node,
1037
1041
  innerBottomSlot: _propTypes.default.node,
1038
1042
  optionList: _propTypes.default.array,
@@ -10,7 +10,7 @@ var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-s
10
10
 
11
11
  var _forEachInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
12
12
 
13
- var _Object$keys2 = require("@babel/runtime-corejs3/core-js-stable/object/keys");
13
+ var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
14
14
 
15
15
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
16
16
 
@@ -25,8 +25,6 @@ var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-st
25
25
 
26
26
  var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
27
27
 
28
- var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
29
-
30
28
  var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
31
29
 
32
30
  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
41
39
 
42
40
  var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
43
41
 
44
- var _omit2 = _interopRequireDefault(require("lodash/omit"));
45
-
46
42
  var _pick2 = _interopRequireDefault(require("lodash/pick"));
47
43
 
48
44
  var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
@@ -73,7 +69,7 @@ var _tabsContext = _interopRequireDefault(require("./tabs-context"));
73
69
 
74
70
  var _interface = require("./interface");
75
71
 
76
- _forEachInstanceProperty2(_context9 = _Object$keys2(_interface)).call(_context9, function (key) {
72
+ _forEachInstanceProperty2(_context9 = _Object$keys(_interface)).call(_context9, function (key) {
77
73
  if (key === "default" || key === "__esModule") return;
78
74
  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
79
75
  if (key in exports && exports[key] === _interface[key]) return;
@@ -101,7 +97,7 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
101
97
  return t;
102
98
  };
103
99
 
104
- const panePickKeys = (0, _keys.default)((0, _omit2.default)(_TabPane.default.propTypes, ['children']));
100
+ const panePickKeys = ['className', 'style', 'disabled', 'itemKey', 'tab', 'icon'];
105
101
 
106
102
  class Tabs extends _baseComponent.default {
107
103
  constructor(props) {
@@ -10,6 +10,7 @@ export interface TimelineItemProps {
10
10
  position?: 'left' | 'right';
11
11
  className?: string;
12
12
  style?: React.CSSProperties;
13
+ onClick?: React.MouseEventHandler<HTMLLIElement>;
13
14
  }
14
15
  export default class Item extends PureComponent<TimelineItemProps> {
15
16
  static propTypes: {
@@ -21,10 +22,12 @@ export default class Item extends PureComponent<TimelineItemProps> {
21
22
  position: PropTypes.Requireable<string>;
22
23
  className: PropTypes.Requireable<string>;
23
24
  style: PropTypes.Requireable<object>;
25
+ onClick: PropTypes.Requireable<(...args: any[]) => any>;
24
26
  };
25
27
  static defaultProps: {
26
28
  type: string;
27
29
  time: string;
30
+ onClick: (...args: any[]) => void;
28
31
  };
29
32
  render(): JSX.Element;
30
33
  }
@@ -18,6 +18,8 @@ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
18
18
 
19
19
  var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
20
20
 
21
+ var _noop2 = _interopRequireDefault(require("lodash/noop"));
22
+
21
23
  var _react = _interopRequireWildcard(require("react"));
22
24
 
23
25
  var _classnames = _interopRequireDefault(require("classnames"));
@@ -46,7 +48,8 @@ class Item extends _react.PureComponent {
46
48
  type,
47
49
  style,
48
50
  time,
49
- extra
51
+ extra,
52
+ onClick
50
53
  } = this.props;
51
54
  const itemCls = (0, _classnames.default)(prefixCls, className);
52
55
  const dotCls = (0, _classnames.default)({
@@ -61,7 +64,8 @@ class Item extends _react.PureComponent {
61
64
  } : null;
62
65
  return /*#__PURE__*/_react.default.createElement("li", {
63
66
  className: itemCls,
64
- style: style
67
+ style: style,
68
+ onClick: onClick
65
69
  }, /*#__PURE__*/_react.default.createElement("div", {
66
70
  className: "".concat(prefixCls, "-tail")
67
71
  }), /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
@@ -86,9 +90,11 @@ Item.propTypes = {
86
90
  extra: _propTypes.default.node,
87
91
  position: _propTypes.default.oneOf(_constants.strings.ITEM_POS),
88
92
  className: _propTypes.default.string,
89
- style: _propTypes.default.object
93
+ style: _propTypes.default.object,
94
+ onClick: _propTypes.default.func
90
95
  };
91
96
  Item.defaultProps = {
92
97
  type: 'default',
93
- time: ''
98
+ time: '',
99
+ onClick: _noop2.default
94
100
  };
@@ -26,6 +26,7 @@ declare class FileCard extends PureComponent<FileCardProps> {
26
26
  style: PropTypes.Requireable<object>;
27
27
  url: PropTypes.Requireable<string>;
28
28
  validateMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
29
+ index: PropTypes.Requireable<number>;
29
30
  };
30
31
  static defaultProps: {
31
32
  listType: "list";
@@ -39,6 +40,7 @@ declare class FileCard extends PureComponent<FileCardProps> {
39
40
  renderValidateMessage(): ReactNode;
40
41
  renderPicValidateMsg(): ReactNode;
41
42
  renderPic(locale: Locale['Upload']): ReactNode;
43
+ renderFile(locale: Locale["Upload"]): JSX.Element;
42
44
  onRemove(e: MouseEvent): void;
43
45
  onReplace(e: MouseEvent): void;
44
46
  onRetry(e: MouseEvent): void;
@@ -26,6 +26,8 @@ var _constants = require("@douyinfe/semi-foundation/lib/cjs/upload/constants");
26
26
 
27
27
  var _utils = require("@douyinfe/semi-foundation/lib/cjs/upload/utils");
28
28
 
29
+ var _semiIcons = require("@douyinfe/semi-icons");
30
+
29
31
  var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
30
32
 
31
33
  var _index = _interopRequireDefault(require("../iconButton/index"));
@@ -38,8 +40,6 @@ var _index4 = _interopRequireDefault(require("../spin/index"));
38
40
 
39
41
  var _reactUtils = require("../_base/reactUtils");
40
42
 
41
- var _semiIcons = require("@douyinfe/semi-icons");
42
-
43
43
  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); }
44
44
 
45
45
  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 {
191
191
  status,
192
192
  disabled,
193
193
  style,
194
- onPreviewClick
194
+ onPreviewClick,
195
+ showPicInfo,
196
+ renderPicInfo,
197
+ renderThumbnail,
198
+ name,
199
+ index
195
200
  } = this.props;
201
+ const showProgress = status === _constants.strings.FILE_STATUS_UPLOADING && percent !== 100;
202
+ const showRetry = status === _constants.strings.FILE_STATUS_UPLOAD_FAIL && this.props.showRetry;
203
+ const showReplace = status === _constants.strings.FILE_STATUS_SUCCESS && this.props.showReplace;
196
204
  const filePicCardCls = (0, _classnames.default)({
197
205
  ["".concat(prefixCls, "-picture-file-card")]: true,
198
206
  ["".concat(prefixCls, "-picture-file-card-disabled")]: disabled,
199
- ["".concat(prefixCls, "-picture-file-card-show-pointer")]: typeof onPreviewClick !== 'undefined'
207
+ ["".concat(prefixCls, "-picture-file-card-show-pointer")]: typeof onPreviewClick !== 'undefined',
208
+ ["".concat(prefixCls, "-picture-file-card-error")]: status === _constants.strings.FILE_STATUS_UPLOAD_FAIL,
209
+ ["".concat(prefixCls, "-picture-file-card-uploading")]: showProgress
200
210
  });
201
- const showProgress = status === _constants.strings.FILE_STATUS_UPLOADING && percent !== 100;
202
- const showRetry = status === _constants.strings.FILE_STATUS_UPLOAD_FAIL && this.props.showRetry;
203
- const showReplace = status === _constants.strings.FILE_STATUS_SUCCESS && this.props.showReplace;
204
211
  const closeCls = "".concat(prefixCls, "-picture-file-card-close");
205
212
 
206
213
  const retry = /*#__PURE__*/_react.default.createElement("div", {
@@ -223,47 +230,38 @@ class FileCard extends _react.PureComponent {
223
230
  className: "".concat(prefixCls, "-picture-file-card-icon-replace")
224
231
  })));
225
232
 
233
+ const picInfo = typeof renderPicInfo === 'function' ? renderPicInfo(this.props) : /*#__PURE__*/_react.default.createElement("div", {
234
+ className: "".concat(prefixCls, "-picture-file-card-pic-info")
235
+ }, index + 1);
236
+ const thumbnail = typeof renderThumbnail === 'function' ? renderThumbnail(this.props) : /*#__PURE__*/_react.default.createElement("img", {
237
+ src: url,
238
+ alt: "picture of ".concat(name)
239
+ });
226
240
  return /*#__PURE__*/_react.default.createElement("div", {
227
241
  className: filePicCardCls,
228
242
  style: style,
229
243
  onClick: onPreviewClick
230
- }, /*#__PURE__*/_react.default.createElement("img", {
231
- src: url
232
- }), showProgress ? /*#__PURE__*/_react.default.createElement(_index2.default, {
244
+ }, thumbnail, showProgress ? /*#__PURE__*/_react.default.createElement(_index2.default, {
233
245
  percent: percent,
234
246
  type: "circle",
235
247
  size: "small",
236
248
  orbitStroke: '#FFF'
237
- }) : null, showRetry ? retry : null, showReplace && replace, disabled ? null : /*#__PURE__*/_react.default.createElement("div", {
238
- className: closeCls,
239
- onClick: e => this.onRemove(e)
249
+ }) : null, showRetry ? retry : null, showReplace && replace, showPicInfo && picInfo, !disabled && /*#__PURE__*/_react.default.createElement("div", {
250
+ className: closeCls
240
251
  }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, {
241
- size: "extra-small"
252
+ size: "extra-small",
253
+ onClick: e => this.onRemove(e)
242
254
  })), this.renderPicValidateMsg());
243
255
  }
244
256
 
245
- onRemove(e) {
246
- e.stopPropagation();
247
- this.props.onRemove(this.props, e);
248
- }
249
-
250
- onReplace(e) {
251
- e.stopPropagation();
252
- this.props.onReplace(this.props, e);
253
- }
254
-
255
- onRetry(e) {
256
- e.stopPropagation();
257
- this.props.onRetry(this.props, e);
258
- }
259
-
260
- render() {
257
+ renderFile(locale) {
261
258
  const {
262
259
  name,
263
260
  size,
264
261
  percent,
265
262
  url,
266
- listType,
263
+ showRetry: propsShowRetry,
264
+ showReplace: propsShowReplace,
267
265
  preview,
268
266
  previewFile,
269
267
  status,
@@ -284,15 +282,8 @@ class FileCard extends _react.PureComponent {
284
282
  const replaceCls = "".concat(prefixCls, "-file-card-replace");
285
283
  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
286
284
 
287
- const showRetry = status === _constants.strings.FILE_STATUS_UPLOAD_FAIL && this.props.showRetry;
288
- const showReplace = status === _constants.strings.FILE_STATUS_SUCCESS && this.props.showReplace;
289
-
290
- if (listType === _constants.strings.FILE_LIST_PIC) {
291
- return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
292
- componentName: "Upload"
293
- }, locale => this.renderPic(locale));
294
- }
295
-
285
+ const showRetry = status === _constants.strings.FILE_STATUS_UPLOAD_FAIL && propsShowRetry;
286
+ const showReplace = status === _constants.strings.FILE_STATUS_SUCCESS && propsShowReplace;
296
287
  const fileSize = this.transSize(size);
297
288
  let previewContent = preview ? /*#__PURE__*/_react.default.createElement("img", {
298
289
  src: url
@@ -304,9 +295,7 @@ class FileCard extends _react.PureComponent {
304
295
  previewContent = previewFile(this.props);
305
296
  }
306
297
 
307
- return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
308
- componentName: "Upload"
309
- }, locale => /*#__PURE__*/_react.default.createElement("div", {
298
+ return /*#__PURE__*/_react.default.createElement("div", {
310
299
  className: fileCardCls,
311
300
  style: style,
312
301
  onClick: onPreviewClick
@@ -351,7 +340,42 @@ class FileCard extends _react.PureComponent {
351
340
  theme: "borderless",
352
341
  size: "small",
353
342
  className: closeCls
354
- })));
343
+ }));
344
+ }
345
+
346
+ onRemove(e) {
347
+ e.stopPropagation();
348
+ this.props.onRemove(this.props, e);
349
+ }
350
+
351
+ onReplace(e) {
352
+ e.stopPropagation();
353
+ this.props.onReplace(this.props, e);
354
+ }
355
+
356
+ onRetry(e) {
357
+ e.stopPropagation();
358
+ this.props.onRetry(this.props, e);
359
+ }
360
+
361
+ render() {
362
+ const {
363
+ listType
364
+ } = this.props;
365
+
366
+ if (listType === _constants.strings.FILE_LIST_PIC) {
367
+ return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
368
+ componentName: "Upload"
369
+ }, locale => this.renderPic(locale));
370
+ }
371
+
372
+ if (listType === _constants.strings.FILE_LIST_DEFAULT) {
373
+ return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
374
+ componentName: "Upload"
375
+ }, locale => this.renderFile(locale));
376
+ }
377
+
378
+ return null;
355
379
  }
356
380
 
357
381
  }
@@ -374,7 +398,8 @@ FileCard.propTypes = {
374
398
  status: _propTypes.default.string,
375
399
  style: _propTypes.default.object,
376
400
  url: _propTypes.default.string,
377
- validateMessage: _propTypes.default.node
401
+ validateMessage: _propTypes.default.node,
402
+ index: _propTypes.default.number
378
403
  };
379
404
  FileCard.defaultProps = {
380
405
  listType: _constants.strings.FILE_LIST_DEFAULT,