@douyinfe/semi-ui 2.19.2-alpha.0 → 2.20.0-beta.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 (139) hide show
  1. package/dist/css/semi.css +243 -968
  2. package/dist/css/semi.min.css +1 -1
  3. package/dist/umd/semi-ui.js +3449 -452
  4. package/dist/umd/semi-ui.js.map +1 -1
  5. package/dist/umd/semi-ui.min.js +1 -1
  6. package/dist/umd/semi-ui.min.js.map +1 -1
  7. package/lib/cjs/button/Button.d.ts +1 -1
  8. package/lib/cjs/button/index.d.ts +1 -1
  9. package/lib/cjs/carousel/CarouselIndicator.d.ts +1 -1
  10. package/lib/cjs/carousel/index.d.ts +1 -1
  11. package/lib/cjs/datePicker/dateInput.d.ts +1 -1
  12. package/lib/cjs/datePicker/datePicker.d.ts +1 -1
  13. package/lib/cjs/datePicker/monthsGrid.d.ts +1 -1
  14. package/lib/cjs/image/image.d.ts +48 -0
  15. package/lib/cjs/image/image.js +248 -0
  16. package/lib/cjs/image/index.d.ts +6 -0
  17. package/lib/cjs/image/index.js +29 -0
  18. package/lib/cjs/image/interface.d.ts +178 -0
  19. package/lib/cjs/image/interface.js +5 -0
  20. package/lib/cjs/image/preview.d.ts +81 -0
  21. package/lib/cjs/image/preview.js +249 -0
  22. package/lib/cjs/image/previewContext.d.ts +12 -0
  23. package/lib/cjs/image/previewContext.js +11 -0
  24. package/lib/cjs/image/previewFooter.d.ts +62 -0
  25. package/lib/cjs/image/previewFooter.js +337 -0
  26. package/lib/cjs/image/previewHeader.d.ts +4 -0
  27. package/lib/cjs/image/previewHeader.js +57 -0
  28. package/lib/cjs/image/previewImage.d.ts +49 -0
  29. package/lib/cjs/image/previewImage.js +253 -0
  30. package/lib/cjs/image/previewInner.d.ts +87 -0
  31. package/lib/cjs/image/previewInner.js +443 -0
  32. package/lib/cjs/index.d.ts +2 -0
  33. package/lib/cjs/index.js +14 -0
  34. package/lib/cjs/locale/interface.d.ts +13 -0
  35. package/lib/cjs/locale/source/ar.js +13 -0
  36. package/lib/cjs/locale/source/de.js +13 -0
  37. package/lib/cjs/locale/source/en_GB.js +13 -0
  38. package/lib/cjs/locale/source/en_US.js +13 -0
  39. package/lib/cjs/locale/source/es.js +13 -0
  40. package/lib/cjs/locale/source/fr.js +13 -0
  41. package/lib/cjs/locale/source/id_ID.js +13 -0
  42. package/lib/cjs/locale/source/it.js +13 -0
  43. package/lib/cjs/locale/source/ja_JP.js +13 -0
  44. package/lib/cjs/locale/source/ko_KR.js +13 -0
  45. package/lib/cjs/locale/source/ms_MY.js +13 -0
  46. package/lib/cjs/locale/source/pt_BR.js +13 -0
  47. package/lib/cjs/locale/source/ru_RU.js +13 -0
  48. package/lib/cjs/locale/source/th_TH.js +13 -0
  49. package/lib/cjs/locale/source/tr_TR.js +13 -0
  50. package/lib/cjs/locale/source/vi_VN.js +13 -0
  51. package/lib/cjs/locale/source/zh_CN.js +13 -0
  52. package/lib/cjs/locale/source/zh_TW.js +13 -0
  53. package/lib/cjs/progress/index.d.ts +10 -2
  54. package/lib/cjs/progress/index.js +37 -8
  55. package/lib/cjs/radio/radio.d.ts +1 -1
  56. package/lib/cjs/radio/radioGroup.d.ts +1 -1
  57. package/lib/cjs/skeleton/item.d.ts +1 -0
  58. package/lib/cjs/skeleton/item.js +10 -4
  59. package/lib/cjs/tag/index.js +5 -1
  60. package/lib/cjs/tag/interface.d.ts +2 -0
  61. package/lib/cjs/timePicker/TimePicker.d.ts +2 -2
  62. package/lib/cjs/timePicker/TimeShape.d.ts +1 -1
  63. package/lib/cjs/timePicker/index.d.ts +2 -2
  64. package/lib/cjs/toast/index.d.ts +9 -0
  65. package/lib/cjs/toast/index.js +50 -10
  66. package/lib/cjs/toast/toast.d.ts +1 -0
  67. package/lib/cjs/toast/toast.js +4 -0
  68. package/lib/cjs/typography/base.d.ts +1 -1
  69. package/lib/cjs/typography/paragraph.d.ts +1 -1
  70. package/lib/cjs/typography/text.d.ts +1 -1
  71. package/lib/cjs/typography/title.d.ts +2 -2
  72. package/lib/cjs/upload/index.d.ts +1 -1
  73. package/lib/es/button/Button.d.ts +1 -1
  74. package/lib/es/button/index.d.ts +1 -1
  75. package/lib/es/carousel/CarouselIndicator.d.ts +1 -1
  76. package/lib/es/carousel/index.d.ts +1 -1
  77. package/lib/es/datePicker/dateInput.d.ts +1 -1
  78. package/lib/es/datePicker/datePicker.d.ts +1 -1
  79. package/lib/es/datePicker/monthsGrid.d.ts +1 -1
  80. package/lib/es/image/image.d.ts +48 -0
  81. package/lib/es/image/image.js +224 -0
  82. package/lib/es/image/index.d.ts +6 -0
  83. package/lib/es/image/index.js +5 -0
  84. package/lib/es/image/interface.d.ts +178 -0
  85. package/lib/es/image/interface.js +1 -0
  86. package/lib/es/image/preview.d.ts +81 -0
  87. package/lib/es/image/preview.js +229 -0
  88. package/lib/es/image/previewContext.d.ts +12 -0
  89. package/lib/es/image/previewContext.js +2 -0
  90. package/lib/es/image/previewFooter.d.ts +62 -0
  91. package/lib/es/image/previewFooter.js +301 -0
  92. package/lib/es/image/previewHeader.d.ts +4 -0
  93. package/lib/es/image/previewHeader.js +38 -0
  94. package/lib/es/image/previewImage.d.ts +49 -0
  95. package/lib/es/image/previewImage.js +235 -0
  96. package/lib/es/image/previewInner.d.ts +87 -0
  97. package/lib/es/image/previewInner.js +419 -0
  98. package/lib/es/index.d.ts +2 -0
  99. package/lib/es/index.js +3 -1
  100. package/lib/es/locale/interface.d.ts +13 -0
  101. package/lib/es/locale/source/ar.js +13 -0
  102. package/lib/es/locale/source/de.js +13 -0
  103. package/lib/es/locale/source/en_GB.js +13 -0
  104. package/lib/es/locale/source/en_US.js +13 -0
  105. package/lib/es/locale/source/es.js +13 -0
  106. package/lib/es/locale/source/fr.js +13 -0
  107. package/lib/es/locale/source/id_ID.js +13 -0
  108. package/lib/es/locale/source/it.js +13 -0
  109. package/lib/es/locale/source/ja_JP.js +13 -0
  110. package/lib/es/locale/source/ko_KR.js +13 -0
  111. package/lib/es/locale/source/ms_MY.js +13 -0
  112. package/lib/es/locale/source/pt_BR.js +13 -0
  113. package/lib/es/locale/source/ru_RU.js +13 -0
  114. package/lib/es/locale/source/th_TH.js +13 -0
  115. package/lib/es/locale/source/tr_TR.js +13 -0
  116. package/lib/es/locale/source/vi_VN.js +13 -0
  117. package/lib/es/locale/source/zh_CN.js +13 -0
  118. package/lib/es/locale/source/zh_TW.js +13 -0
  119. package/lib/es/progress/index.d.ts +10 -2
  120. package/lib/es/progress/index.js +36 -8
  121. package/lib/es/radio/radio.d.ts +1 -1
  122. package/lib/es/radio/radioGroup.d.ts +1 -1
  123. package/lib/es/skeleton/item.d.ts +1 -0
  124. package/lib/es/skeleton/item.js +10 -4
  125. package/lib/es/tag/index.js +5 -1
  126. package/lib/es/tag/interface.d.ts +2 -0
  127. package/lib/es/timePicker/TimePicker.d.ts +2 -2
  128. package/lib/es/timePicker/TimeShape.d.ts +1 -1
  129. package/lib/es/timePicker/index.d.ts +2 -2
  130. package/lib/es/toast/index.d.ts +9 -0
  131. package/lib/es/toast/index.js +50 -10
  132. package/lib/es/toast/toast.d.ts +1 -0
  133. package/lib/es/toast/toast.js +4 -0
  134. package/lib/es/typography/base.d.ts +1 -1
  135. package/lib/es/typography/paragraph.d.ts +1 -1
  136. package/lib/es/typography/text.d.ts +1 -1
  137. package/lib/es/typography/title.d.ts +2 -2
  138. package/lib/es/upload/index.d.ts +1 -1
  139. package/package.json +8 -8
@@ -153,6 +153,19 @@ const local = {
153
153
  },
154
154
  Form: {
155
155
  optional: '(по желанию)'
156
+ },
157
+ Image: {
158
+ preview: 'предварительный просмотр',
159
+ loading: 'Загрузка',
160
+ loadError: 'Ошибка загрузки',
161
+ prevTip: 'Предыдущий',
162
+ nextTip: 'Далее',
163
+ zoomInTip: 'Увеличить',
164
+ zoomOutTip: 'уменьшить масштаб',
165
+ rotateTip: 'Повернуть',
166
+ downloadTip: 'скачать',
167
+ adaptiveTip: 'Адаптировать к странице',
168
+ originTip: 'Исходный размер'
156
169
  }
157
170
  }; // [i18n-Russia] 俄罗斯语
158
171
 
@@ -154,6 +154,19 @@ const local = {
154
154
  },
155
155
  Form: {
156
156
  optional: '(ไม่จำเป็น)'
157
+ },
158
+ Image: {
159
+ preview: 'ดูตัวอย่าง',
160
+ loading: 'กำลังโหลด',
161
+ loadError: 'โหลดไม่สำเร็จ',
162
+ prevTip: 'ก่อนหน้า',
163
+ nextTip: 'ถัดไป',
164
+ zoomInTip: 'ซูมเข้า',
165
+ zoomOutTip: 'ซูมออก',
166
+ rotateTip: 'หมุน',
167
+ downloadTip: 'ดาวน์โหลด',
168
+ adaptiveTip: 'ปรับให้เข้ากับหน้า',
169
+ originTip: 'ขนาดเดิม'
157
170
  }
158
171
  }; // [i18n-Thai]
159
172
 
@@ -153,6 +153,19 @@ const local = {
153
153
  },
154
154
  Form: {
155
155
  optional: '(isteğe bağlı)'
156
+ },
157
+ Image: {
158
+ preview: 'Ön izleme',
159
+ loading: 'Yükleniyor',
160
+ loadError: 'Yükleme başarısız',
161
+ prevTip: 'Önceki',
162
+ nextTip: 'Sonraki',
163
+ zoomInTip: 'Yakınlaştır',
164
+ zoomOutTip: 'uzaklaştır',
165
+ rotateTip: 'Döndür',
166
+ downloadTip: 'indir',
167
+ adaptiveTip: 'Sayfaya uyarla',
168
+ originTip: 'Orijinal boyut'
156
169
  }
157
170
  }; // [i18n-Turkish]
158
171
 
@@ -153,6 +153,19 @@ const local = {
153
153
  },
154
154
  Form: {
155
155
  optional: '(không bắt buộc)'
156
+ },
157
+ Image: {
158
+ preview: 'xem trước',
159
+ loading: 'Đang tải',
160
+ loadError: 'Không tải được',
161
+ prevTip: 'Trước đó',
162
+ nextTip: 'Next',
163
+ zoomInTip: 'Phóng to',
164
+ zoomOutTip: 'thu nhỏ',
165
+ rotateTip: 'Xoay',
166
+ downloadTip: 'download',
167
+ adaptiveTip: 'Thích ứng với trang',
168
+ originTip: 'Kích thước ban đầu'
156
169
  }
157
170
  }; // [i18n-Vietnam] 越南语
158
171
 
@@ -151,6 +151,19 @@ const local = {
151
151
  },
152
152
  Form: {
153
153
  optional: '(可选)'
154
+ },
155
+ Image: {
156
+ preview: '预览',
157
+ loading: '加载中',
158
+ loadError: '加载失败',
159
+ prevTip: '上一张',
160
+ nextTip: '下一张',
161
+ zoomInTip: '放大',
162
+ zoomOutTip: '缩小',
163
+ rotateTip: '旋转',
164
+ downloadTip: '下载',
165
+ adaptiveTip: '适应页面',
166
+ originTip: '原始尺寸'
154
167
  }
155
168
  }; // 中文
156
169
 
@@ -151,6 +151,19 @@ const local = {
151
151
  },
152
152
  Form: {
153
153
  optional: '(可選)'
154
+ },
155
+ Image: {
156
+ preview: '預覽',
157
+ loading: '加載中',
158
+ loadError: '加載失敗',
159
+ prevTip: '上一張',
160
+ nextTip: '下一張',
161
+ zoomInTip: '放大',
162
+ zoomOutTip: '縮小',
163
+ rotateTip: '旋轉',
164
+ downloadTip: '下載',
165
+ adaptiveTip: '適應頁面',
166
+ originTip: '原始尺寸'
154
167
  }
155
168
  }; // 中文
156
169
 
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
3
3
  import '@douyinfe/semi-foundation/lib/es/progress/progress.css';
4
4
  import { Animation } from '@douyinfe/semi-animation';
5
5
  import { Motion } from '../_base/base';
6
+ import { StrokeArr } from '@douyinfe/semi-foundation/lib/es/progress/generates';
6
7
  export interface ProgressProps {
7
8
  'aria-label'?: string | undefined;
8
9
  'aria-labelledby'?: string | undefined;
@@ -16,7 +17,8 @@ export interface ProgressProps {
16
17
  percent?: number;
17
18
  showInfo?: boolean;
18
19
  size?: 'default' | 'small' | 'large';
19
- stroke?: string;
20
+ stroke?: string | StrokeArr;
21
+ strokeGradient?: boolean;
20
22
  strokeLinecap?: 'round' | 'square';
21
23
  strokeWidth?: number;
22
24
  style?: React.CSSProperties;
@@ -41,7 +43,11 @@ declare class Progress extends Component<ProgressProps, ProgressState> {
41
43
  scale: PropTypes.Requireable<number>;
42
44
  showInfo: PropTypes.Requireable<boolean>;
43
45
  size: PropTypes.Requireable<string>;
44
- stroke: PropTypes.Requireable<string>;
46
+ stroke: PropTypes.Requireable<string | PropTypes.InferProps<{
47
+ percent: PropTypes.Requireable<number>;
48
+ color: PropTypes.Requireable<string>;
49
+ }>[]>;
50
+ strokeGradient: PropTypes.Requireable<boolean>;
45
51
  strokeLinecap: PropTypes.Requireable<string>;
46
52
  strokeWidth: PropTypes.Requireable<number>;
47
53
  style: PropTypes.Requireable<object>;
@@ -58,6 +64,7 @@ declare class Progress extends Component<ProgressProps, ProgressState> {
58
64
  showInfo: boolean;
59
65
  size: string;
60
66
  stroke: string;
67
+ strokeGradient: boolean;
61
68
  strokeLinecap: string;
62
69
  strokeWidth: number;
63
70
  style: {};
@@ -70,6 +77,7 @@ declare class Progress extends Component<ProgressProps, ProgressState> {
70
77
  componentWillUnmount(): void;
71
78
  renderCircleProgress(): ReactNode;
72
79
  calcPercent(percent: number): number;
80
+ selectStroke(stroke: string | StrokeArr, percent: number, strokeGradient: any): string;
73
81
  renderLineProgress(): ReactNode;
74
82
  render(): ReactNode;
75
83
  }
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
4
4
  import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/progress/constants';
5
5
  import '@douyinfe/semi-foundation/lib/es/progress/progress.css';
6
6
  import { Animation } from '@douyinfe/semi-animation';
7
+ import { generateColor } from '@douyinfe/semi-foundation/lib/es/progress/generates';
7
8
  const prefixCls = cssClasses.PREFIX;
8
9
 
9
10
  class Progress extends Component {
@@ -88,6 +89,7 @@ class Progress extends Component {
88
89
  format,
89
90
  size,
90
91
  stroke,
92
+ strokeGradient,
91
93
  showInfo,
92
94
  percent,
93
95
  orbitStroke,
@@ -112,7 +114,10 @@ class Progress extends Component {
112
114
  width = this.props.width;
113
115
  } else {
114
116
  size === strings.DEFAULT_SIZE ? width = 72 : width = 24;
115
- } // cx, cy is circle center
117
+ } // parse stroke & generate gradients
118
+
119
+
120
+ const _stroke = this.selectStroke(stroke, percent, strokeGradient); // cx, cy is circle center
116
121
 
117
122
 
118
123
  const cy = width / 2;
@@ -128,7 +133,7 @@ class Progress extends Component {
128
133
  id: id,
129
134
  className: classNames.wrapper,
130
135
  style: style,
131
- role: 'progressbar',
136
+ role: "progressbar",
132
137
  "aria-valuemin": 0,
133
138
  "aria-valuemax": 100,
134
139
  "aria-valuenow": percNumber,
@@ -159,7 +164,7 @@ class Progress extends Component {
159
164
  strokeDasharray: strokeDasharray,
160
165
  strokeLinecap: strokeLinecap,
161
166
  fill: "transparent",
162
- stroke: stroke,
167
+ stroke: _stroke,
163
168
  r: radius,
164
169
  cx: cx,
165
170
  cy: cy,
@@ -183,11 +188,26 @@ class Progress extends Component {
183
188
  return perc;
184
189
  }
185
190
 
191
+ selectStroke(stroke, percent, strokeGradient) {
192
+ if (typeof stroke === 'string') {
193
+ return stroke;
194
+ }
195
+
196
+ const color = generateColor(stroke, percent, strokeGradient);
197
+
198
+ if (typeof color !== 'undefined') {
199
+ return color;
200
+ }
201
+
202
+ return strings.STROKE_DEFAULT;
203
+ }
204
+
186
205
  renderLineProgress() {
187
206
  const {
188
207
  className,
189
208
  style,
190
209
  stroke,
210
+ strokeGradient,
191
211
  direction,
192
212
  format,
193
213
  showInfo,
@@ -212,9 +232,12 @@ class Progress extends Component {
212
232
  });
213
233
  const innerCls = cls("".concat(prefixCls, "-track-inner"));
214
234
  const perc = this.calcPercent(percent);
215
- const percNumber = this.calcPercent(percentNumber);
235
+ const percNumber = this.calcPercent(percentNumber); // parse stroke & generate gradients
236
+
237
+ const _stroke = this.selectStroke(stroke, percent, strokeGradient);
238
+
216
239
  const innerStyle = {
217
- background: stroke
240
+ background: _stroke
218
241
  };
219
242
 
220
243
  if (direction === strings.DEFAULT_DIRECTION) {
@@ -228,7 +251,7 @@ class Progress extends Component {
228
251
  id: id,
229
252
  className: progressWrapperCls,
230
253
  style: style,
231
- role: 'progressbar',
254
+ role: "progressbar",
232
255
  "aria-valuemin": 0,
233
256
  "aria-valuemax": 100,
234
257
  "aria-valuenow": perc,
@@ -278,7 +301,11 @@ Progress.propTypes = {
278
301
  scale: PropTypes.number,
279
302
  showInfo: PropTypes.bool,
280
303
  size: PropTypes.oneOf(strings.sizes),
281
- stroke: PropTypes.string,
304
+ stroke: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.shape({
305
+ percent: PropTypes.number,
306
+ color: PropTypes.string
307
+ }))]),
308
+ strokeGradient: PropTypes.bool,
282
309
  strokeLinecap: PropTypes.oneOf(strings.strokeLineCap),
283
310
  strokeWidth: PropTypes.number,
284
311
  style: PropTypes.object,
@@ -294,7 +321,8 @@ Progress.defaultProps = {
294
321
  percent: 0,
295
322
  showInfo: false,
296
323
  size: strings.DEFAULT_SIZE,
297
- stroke: 'var(--semi-color-success)',
324
+ stroke: strings.STROKE_DEFAULT,
325
+ strokeGradient: false,
298
326
  strokeLinecap: strings.DEFAULT_LINECAP,
299
327
  strokeWidth: 4,
300
328
  style: {},
@@ -82,7 +82,7 @@ declare class Radio extends BaseComponent<RadioProps, RadioState> {
82
82
  prefixCls?: string;
83
83
  name?: string;
84
84
  onChange?: (e: RadioChangeEvent) => void;
85
- buttonSize?: "small" | "large" | "middle";
85
+ buttonSize?: "small" | "middle" | "large";
86
86
  isCardRadio?: boolean;
87
87
  isPureCardRadio?: boolean;
88
88
  };
@@ -48,7 +48,7 @@ declare class RadioGroup extends BaseComponent<RadioGroupProps, RadioGroupState>
48
48
  disabled: PropTypes.Requireable<boolean>;
49
49
  name: PropTypes.Requireable<string>;
50
50
  options: PropTypes.Requireable<any[]>;
51
- buttonSize: PropTypes.Requireable<"small" | "large" | "middle">;
51
+ buttonSize: PropTypes.Requireable<"small" | "middle" | "large">;
52
52
  type: PropTypes.Requireable<"default" | "button" | "card" | "pureCard">;
53
53
  value: PropTypes.Requireable<any>;
54
54
  onChange: PropTypes.Requireable<(...args: any[]) => any>;
@@ -13,6 +13,7 @@ export interface ParagraphProps extends BasicProps {
13
13
  }
14
14
  export interface AvatarProps extends BasicProps {
15
15
  size?: typeof strings.SIZE[number];
16
+ shape?: string;
16
17
  }
17
18
  export declare type GenericProps = BasicProps & AvatarProps;
18
19
  export declare const Avatar: React.FC<AvatarProps>;
@@ -16,6 +16,7 @@ import { cssClasses } from '@douyinfe/semi-foundation/lib/es/skeleton/constants'
16
16
  import { strings } from '@douyinfe/semi-foundation/lib/es/avatar/constants';
17
17
  import '@douyinfe/semi-foundation/lib/es/skeleton/skeleton.css';
18
18
  const sizeSet = strings.SIZE;
19
+ const shapeSet = strings.SHAPE;
19
20
 
20
21
  const generator = type => BasicComponent => props => /*#__PURE__*/React.createElement(BasicComponent, Object.assign({
21
22
  type: type
@@ -28,12 +29,15 @@ class Generic extends PureComponent {
28
29
  prefixCls,
29
30
  className,
30
31
  type,
31
- size
32
+ size,
33
+ shape
32
34
  } = _a,
33
- others = __rest(_a, ["prefixCls", "className", "type", "size"]);
35
+ others = __rest(_a, ["prefixCls", "className", "type", "size", "shape"]);
34
36
 
35
37
  const classString = cls(className, "".concat(prefixCls, "-").concat(type), {
36
38
  ["".concat(prefixCls, "-").concat(type, "-").concat(size)]: type.toUpperCase() === 'AVATAR'
39
+ }, {
40
+ ["".concat(prefixCls, "-").concat(type, "-").concat(shape)]: type.toUpperCase() === 'AVATAR'
37
41
  });
38
42
  return /*#__PURE__*/React.createElement('div', Object.assign({
39
43
  className: classString
@@ -47,11 +51,13 @@ Generic.propTypes = {
47
51
  prefixCls: PropTypes.string,
48
52
  style: PropTypes.object,
49
53
  className: PropTypes.string,
50
- size: PropTypes.oneOf(sizeSet)
54
+ size: PropTypes.oneOf(sizeSet),
55
+ shape: PropTypes.oneOf(shapeSet)
51
56
  };
52
57
  Generic.defaultProps = {
53
58
  prefixCls: cssClasses.PREFIX,
54
- size: 'medium'
59
+ size: 'medium',
60
+ shape: 'circle'
55
61
  };
56
62
  export const Avatar = generator('avatar')(Generic);
57
63
  export const Image = generator('image')(Generic);
@@ -126,11 +126,12 @@ export default class Tag extends Component {
126
126
  onClick,
127
127
  className,
128
128
  type,
129
+ shape,
129
130
  avatarSrc,
130
131
  avatarShape,
131
132
  tabIndex
132
133
  } = _a,
133
- attr = __rest(_a, ["tagKey", "children", "size", "color", "closable", "visible", "onClose", "onClick", "className", "type", "avatarSrc", "avatarShape", "tabIndex"]);
134
+ attr = __rest(_a, ["tagKey", "children", "size", "color", "closable", "visible", "onClose", "onClick", "className", "type", "shape", "avatarSrc", "avatarShape", "tabIndex"]);
134
135
 
135
136
  const {
136
137
  visible: isVisible
@@ -148,6 +149,8 @@ export default class Tag extends Component {
148
149
  ["".concat(prefixCls, "-default")]: size === 'default',
149
150
  ["".concat(prefixCls, "-small")]: size === 'small',
150
151
  ["".concat(prefixCls, "-large")]: size === 'large',
152
+ ["".concat(prefixCls, "-square")]: shape === 'square',
153
+ ["".concat(prefixCls, "-circle")]: shape === 'circle',
151
154
  ["".concat(prefixCls, "-").concat(type)]: type,
152
155
  ["".concat(prefixCls, "-").concat(color, "-").concat(type)]: color && type,
153
156
  ["".concat(prefixCls, "-closable")]: closable,
@@ -183,6 +186,7 @@ Tag.defaultProps = {
183
186
  onClick: () => undefined,
184
187
  style: {},
185
188
  className: '',
189
+ shape: 'square',
186
190
  avatarShape: 'square'
187
191
  };
188
192
  Tag.propTypes = {
@@ -4,6 +4,7 @@ export declare type TagColor = 'amber' | 'blue' | 'cyan' | 'green' | 'grey' | 'i
4
4
  export declare type TagType = 'ghost' | 'solid' | 'light';
5
5
  export declare type TagSize = 'default' | 'small' | 'large';
6
6
  export declare type AvatarShape = 'circle' | 'square';
7
+ export declare type TagShape = 'circle' | 'square';
7
8
  export interface TagProps {
8
9
  children?: React.ReactNode;
9
10
  tagKey?: string | number;
@@ -18,6 +19,7 @@ export interface TagProps {
18
19
  className?: string;
19
20
  avatarSrc?: string;
20
21
  avatarShape?: AvatarShape;
22
+ shape?: TagShape;
21
23
  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
22
24
  'aria-label'?: React.AriaAttributes['aria-label'];
23
25
  tabIndex?: number;
@@ -99,11 +99,11 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
99
99
  'aria-required': PropTypes.Requireable<boolean>;
100
100
  prefixCls: PropTypes.Requireable<string>;
101
101
  clearText: PropTypes.Requireable<string>;
102
- value: PropTypes.Requireable<string | number | string[] | Date | number[] | Date[]>;
102
+ value: PropTypes.Requireable<string | number | string[] | number[] | Date | Date[]>;
103
103
  inputReadOnly: PropTypes.Requireable<boolean>;
104
104
  disabled: PropTypes.Requireable<boolean>;
105
105
  showClear: PropTypes.Requireable<boolean>;
106
- defaultValue: PropTypes.Requireable<string | number | string[] | Date | number[] | Date[]>;
106
+ defaultValue: PropTypes.Requireable<string | number | string[] | number[] | Date | Date[]>;
107
107
  open: PropTypes.Requireable<boolean>;
108
108
  defaultOpen: PropTypes.Requireable<boolean>;
109
109
  onOpenChange: PropTypes.Requireable<(...args: any[]) => any>;
@@ -6,5 +6,5 @@ import PropTypes from 'prop-types';
6
6
  * - \[12:00:12, 12:21:12]
7
7
  * - \[[12:00:12, 12:21:12], [12:11:12, 12:32:12]]
8
8
  */
9
- declare const TimeShape: PropTypes.Requireable<string | number | string[] | Date | number[] | Date[]>;
9
+ declare const TimeShape: PropTypes.Requireable<string | number | string[] | number[] | Date | Date[]>;
10
10
  export { TimeShape };
@@ -19,11 +19,11 @@ export default class LocaleTimePicker extends React.PureComponent<LocalePickerPr
19
19
  'aria-required': import("prop-types").Requireable<boolean>;
20
20
  prefixCls: import("prop-types").Requireable<string>;
21
21
  clearText: import("prop-types").Requireable<string>;
22
- value: import("prop-types").Requireable<string | number | string[] | Date | number[] | Date[]>;
22
+ value: import("prop-types").Requireable<string | number | string[] | number[] | Date | Date[]>;
23
23
  inputReadOnly: import("prop-types").Requireable<boolean>;
24
24
  disabled: import("prop-types").Requireable<boolean>;
25
25
  showClear: import("prop-types").Requireable<boolean>;
26
- defaultValue: import("prop-types").Requireable<string | number | string[] | Date | number[] | Date[]>;
26
+ defaultValue: import("prop-types").Requireable<string | number | string[] | number[] | Date | Date[]>;
27
27
  open: import("prop-types").Requireable<boolean>;
28
28
  defaultOpen: import("prop-types").Requireable<boolean>;
29
29
  onOpenChange: import("prop-types").Requireable<(...args: any[]) => any>;
@@ -7,6 +7,7 @@ import { ConfigProps, ToastInstance, ToastProps, ToastState } from '@douyinfe/se
7
7
  import { Motion } from '../_base/base';
8
8
  export { ToastTransitionProps } from './ToastTransition';
9
9
  export interface ToastReactProps extends ToastProps {
10
+ id?: string;
10
11
  style?: CSSProperties;
11
12
  icon?: React.ReactNode;
12
13
  content: React.ReactNode;
@@ -15,7 +16,9 @@ export { ConfigProps, ToastListProps, ToastListState, ToastState };
15
16
  declare const createBaseToast: () => {
16
17
  new (props: ToastListProps): {
17
18
  readonly adapter: ToastListAdapter;
19
+ has(id: string): any;
18
20
  add(opts: ToastInstance): any;
21
+ update(id: string, opts: ToastInstance): any;
19
22
  remove(id: string): any;
20
23
  destroyAll(): any;
21
24
  render(): JSX.Element;
@@ -46,7 +49,9 @@ declare const createBaseToast: () => {
46
49
  };
47
50
  ref: {
48
51
  readonly adapter: ToastListAdapter;
52
+ has(id: string): any;
49
53
  add(opts: ToastInstance): any;
54
+ update(id: string, opts: ToastInstance): any;
50
55
  remove(id: string): any;
51
56
  destroyAll(): any;
52
57
  render(): JSX.Element;
@@ -105,7 +110,9 @@ export declare class ToastFactory {
105
110
  declare const _default: {
106
111
  new (props: ToastListProps): {
107
112
  readonly adapter: ToastListAdapter;
113
+ has(id: string): any;
108
114
  add(opts: ToastInstance): any;
115
+ update(id: string, opts: ToastInstance): any;
109
116
  remove(id: string): any;
110
117
  destroyAll(): any;
111
118
  render(): JSX.Element;
@@ -136,7 +143,9 @@ declare const _default: {
136
143
  };
137
144
  ref: {
138
145
  readonly adapter: ToastListAdapter;
146
+ has(id: string): any;
139
147
  add(opts: ToastInstance): any;
148
+ update(id: string, opts: ToastInstance): any;
140
149
  remove(id: string): any;
141
150
  destroyAll(): any;
142
151
  render(): JSX.Element;
@@ -19,24 +19,28 @@ const createBaseToast = () => {
19
19
  super(props);
20
20
  this.state = {
21
21
  list: [],
22
- removedItems: []
22
+ removedItems: [],
23
+ updatedItems: []
23
24
  };
24
25
  this.foundation = new ToastListFoundation(this.adapter);
25
26
  }
26
27
 
27
28
  get adapter() {
28
29
  return Object.assign(Object.assign({}, super.adapter), {
29
- updateToast: (list, removedItems) => {
30
+ updateToast: (list, removedItems, updatedItems) => {
30
31
  this.setState({
31
32
  list,
32
- removedItems
33
+ removedItems,
34
+ updatedItems
33
35
  });
34
36
  }
35
37
  });
36
38
  }
37
39
 
38
40
  static create(opts) {
39
- const id = getUuid('toast'); // this.id = id;
41
+ var _a;
42
+
43
+ const id = (_a = opts.id) !== null && _a !== void 0 ? _a : getUuid('toast'); // this.id = id;
40
44
 
41
45
  if (!ToastList.ref) {
42
46
  const div = document.createElement('div');
@@ -76,9 +80,16 @@ const createBaseToast = () => {
76
80
  node.style[pos] = typeof opts[pos] === 'number' ? "".concat(opts[pos], "px") : opts[pos];
77
81
  }
78
82
  });
79
- ToastList.ref.add(Object.assign(Object.assign({}, opts), {
80
- id
81
- }));
83
+
84
+ if (ToastList.ref.has(id)) {
85
+ ToastList.ref.update(id, Object.assign(Object.assign({}, opts), {
86
+ id
87
+ }));
88
+ } else {
89
+ ToastList.ref.add(Object.assign(Object.assign({}, opts), {
90
+ id
91
+ }));
92
+ }
82
93
  }
83
94
 
84
95
  return id;
@@ -173,10 +184,18 @@ const createBaseToast = () => {
173
184
  }
174
185
  }
175
186
 
187
+ has(id) {
188
+ return this.foundation.hasToast(id);
189
+ }
190
+
176
191
  add(opts) {
177
192
  return this.foundation.addToast(opts);
178
193
  }
179
194
 
195
+ update(id, opts) {
196
+ return this.foundation.updateToast(id, opts);
197
+ }
198
+
180
199
  remove(id) {
181
200
  return this.foundation.removeToast(id);
182
201
  }
@@ -190,18 +209,39 @@ const createBaseToast = () => {
190
209
  list
191
210
  } = this.state;
192
211
  const {
193
- removedItems
212
+ removedItems,
213
+ updatedItems
194
214
  } = this.state;
195
215
  list = Array.from(new Set([...list, ...removedItems]));
216
+ const updatedIds = updatedItems.map(_ref => {
217
+ let {
218
+ id
219
+ } = _ref;
220
+ return id;
221
+ });
222
+
223
+ const refFn = toast => {
224
+ var _a;
225
+
226
+ if (((_a = toast === null || toast === void 0 ? void 0 : toast.foundation) === null || _a === void 0 ? void 0 : _a._id) && updatedIds.includes(toast.foundation._id)) {
227
+ toast.foundation.setState({
228
+ duration: toast.props.duration
229
+ });
230
+ toast.foundation.restartCloseTimer();
231
+ }
232
+ };
233
+
196
234
  return /*#__PURE__*/React.createElement(React.Fragment, null, list.map((item, index) => item.motion ? /*#__PURE__*/React.createElement(ToastTransition, {
197
235
  key: item.id || index,
198
236
  motion: item.motion
199
237
  }, removedItems.find(removedItem => removedItem.id === item.id) ? null : transitionStyle => /*#__PURE__*/React.createElement(Toast, Object.assign({}, item, {
200
238
  style: Object.assign(Object.assign({}, transitionStyle), item.style),
201
- close: id => this.remove(id)
239
+ close: id => this.remove(id),
240
+ ref: refFn
202
241
  }))) : /*#__PURE__*/React.createElement(Toast, Object.assign({}, item, {
203
242
  style: Object.assign({}, item.style),
204
- close: id => this.remove(id)
243
+ close: id => this.remove(id),
244
+ ref: refFn
205
245
  }))));
206
246
  }
207
247
 
@@ -41,6 +41,7 @@ declare class Toast extends BaseComponent<ToastReactProps, ToastState> {
41
41
  close(e: React.MouseEvent): void;
42
42
  clearCloseTimer: () => void;
43
43
  startCloseTimer: () => void;
44
+ restartCloseTimer: () => void;
44
45
  renderIcon(): string | number | true | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment;
45
46
  render(): JSX.Element;
46
47
  }
@@ -25,6 +25,10 @@ class Toast extends BaseComponent {
25
25
  this.foundation.startCloseTimer_();
26
26
  };
27
27
 
28
+ this.restartCloseTimer = () => {
29
+ this.foundation.restartCloseTimer();
30
+ };
31
+
28
32
  this.state = {};
29
33
  this.foundation = new ToastFoundation(this.adapter);
30
34
  }
@@ -64,7 +64,7 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
64
64
  spacing: PropTypes.Requireable<"normal" | "extended">;
65
65
  strong: PropTypes.Requireable<boolean>;
66
66
  size: PropTypes.Requireable<"small" | "normal">;
67
- type: PropTypes.Requireable<"warning" | "success" | "primary" | "secondary" | "tertiary" | "danger" | "quaternary">;
67
+ type: PropTypes.Requireable<"warning" | "success" | "primary" | "tertiary" | "secondary" | "danger" | "quaternary">;
68
68
  style: PropTypes.Requireable<object>;
69
69
  className: PropTypes.Requireable<string>;
70
70
  icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
@@ -29,7 +29,7 @@ export default class Paragraph extends PureComponent<ParagraphProps> {
29
29
  link: PropTypes.Requireable<boolean | object>;
30
30
  underline: PropTypes.Requireable<boolean>;
31
31
  strong: PropTypes.Requireable<boolean>;
32
- type: PropTypes.Requireable<"warning" | "success" | "primary" | "secondary" | "tertiary" | "danger" | "quaternary">;
32
+ type: PropTypes.Requireable<"warning" | "success" | "primary" | "tertiary" | "secondary" | "danger" | "quaternary">;
33
33
  size: PropTypes.Requireable<"small" | "normal">;
34
34
  spacing: PropTypes.Requireable<"normal" | "extended">;
35
35
  style: PropTypes.Requireable<object>;
@@ -32,7 +32,7 @@ export default class Text extends PureComponent<TextProps> {
32
32
  underline: PropTypes.Requireable<boolean>;
33
33
  link: PropTypes.Requireable<boolean | object>;
34
34
  strong: PropTypes.Requireable<boolean>;
35
- type: PropTypes.Requireable<"warning" | "success" | "primary" | "secondary" | "tertiary" | "danger" | "quaternary">;
35
+ type: PropTypes.Requireable<"warning" | "success" | "primary" | "tertiary" | "secondary" | "danger" | "quaternary">;
36
36
  size: PropTypes.Requireable<"small" | "normal">;
37
37
  style: PropTypes.Requireable<object>;
38
38
  className: PropTypes.Requireable<string>;