@rainbow-oh/yee-c 0.9.2 → 0.10.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 (109) hide show
  1. package/dist/cjs/Input/style/index.less +1 -0
  2. package/dist/cjs/Tabs/demo/overflow-center.d.ts +3 -0
  3. package/dist/cjs/Tabs/demo/overflow-center.js +54 -0
  4. package/dist/cjs/Tabs/hooks/useNavListMove.d.ts +2 -1
  5. package/dist/cjs/Tabs/hooks/useNavListMove.js +51 -16
  6. package/dist/cjs/Tabs/hooks/useTabScroll.d.ts +1 -0
  7. package/dist/cjs/Tabs/hooks/useTabScroll.js +5 -1
  8. package/dist/cjs/Tabs/interface.d.ts +9 -0
  9. package/dist/cjs/Tabs/style/index.less +5 -0
  10. package/dist/cjs/Tabs/tab-header/index.d.ts +1 -0
  11. package/dist/cjs/Tabs/tab-header/index.js +9 -2
  12. package/dist/cjs/Tabs/tabs.js +4 -1
  13. package/dist/cjs/Upload/demo/auto-upload.d.ts +3 -0
  14. package/dist/cjs/Upload/demo/auto-upload.js +65 -0
  15. package/dist/cjs/Upload/demo/basic.js +5 -10
  16. package/dist/cjs/Upload/demo/controlled.js +4 -4
  17. package/dist/cjs/Upload/demo/pictureWall.js +14 -13
  18. package/dist/cjs/Upload/dragger.d.ts +2 -1
  19. package/dist/cjs/Upload/dragger.js +32 -21
  20. package/dist/cjs/Upload/index.d.ts +1 -1
  21. package/dist/cjs/Upload/interface.d.ts +67 -120
  22. package/dist/cjs/Upload/style/index.less +40 -13
  23. package/dist/cjs/Upload/upload.d.ts +2 -2
  24. package/dist/cjs/Upload/upload.js +435 -185
  25. package/dist/cjs/Upload/uploaded-list/index.d.ts +2 -1
  26. package/dist/cjs/Upload/uploaded-list/index.js +6 -3
  27. package/dist/cjs/Upload/uploaded-list/uploaded-item.d.ts +6 -3
  28. package/dist/cjs/Upload/uploaded-list/uploaded-item.js +127 -138
  29. package/dist/cjs/style/size.css +1 -1
  30. package/dist/cjs/style/themes.css +1 -1
  31. package/dist/cjs/style/variables.css +2 -2
  32. package/dist/cjs/utils/ax/core.d.ts +3 -1
  33. package/dist/cjs/utils/ax/core.js +24 -37
  34. package/dist/cjs/utils/ax/index.d.ts +3 -1
  35. package/dist/cjs/utils/folder-scanner.d.ts +1 -1
  36. package/dist/cjs/utils/folder-scanner.js +43 -34
  37. package/dist/cjs/version.d.ts +1 -1
  38. package/dist/cjs/version.js +1 -1
  39. package/dist/esm/Input/style/index.less +1 -0
  40. package/dist/esm/Tabs/demo/overflow-center.d.ts +3 -0
  41. package/dist/esm/Tabs/demo/overflow-center.js +61 -0
  42. package/dist/esm/Tabs/hooks/useNavListMove.d.ts +2 -1
  43. package/dist/esm/Tabs/hooks/useNavListMove.js +62 -25
  44. package/dist/esm/Tabs/hooks/useTabScroll.d.ts +1 -0
  45. package/dist/esm/Tabs/hooks/useTabScroll.js +9 -0
  46. package/dist/esm/Tabs/interface.d.ts +9 -0
  47. package/dist/esm/Tabs/style/index.less +5 -0
  48. package/dist/esm/Tabs/tab-header/index.d.ts +1 -0
  49. package/dist/esm/Tabs/tab-header/index.js +13 -2
  50. package/dist/esm/Tabs/tabs.js +4 -2
  51. package/dist/esm/Upload/demo/auto-upload.d.ts +3 -0
  52. package/dist/esm/Upload/demo/auto-upload.js +42 -0
  53. package/dist/esm/Upload/demo/basic.js +5 -11
  54. package/dist/esm/Upload/demo/controlled.js +8 -6
  55. package/dist/esm/Upload/demo/pictureWall.js +17 -14
  56. package/dist/esm/Upload/dragger.d.ts +2 -1
  57. package/dist/esm/Upload/dragger.js +10 -5
  58. package/dist/esm/Upload/index.d.ts +1 -1
  59. package/dist/esm/Upload/interface.d.ts +67 -120
  60. package/dist/esm/Upload/style/index.less +40 -13
  61. package/dist/esm/Upload/upload.d.ts +2 -2
  62. package/dist/esm/Upload/upload.js +573 -271
  63. package/dist/esm/Upload/uploaded-list/index.d.ts +2 -1
  64. package/dist/esm/Upload/uploaded-list/index.js +9 -4
  65. package/dist/esm/Upload/uploaded-list/uploaded-item.d.ts +6 -3
  66. package/dist/esm/Upload/uploaded-list/uploaded-item.js +145 -150
  67. package/dist/esm/style/size.css +1 -1
  68. package/dist/esm/style/themes.css +1 -1
  69. package/dist/esm/style/variables.css +2 -2
  70. package/dist/esm/utils/ax/core.d.ts +3 -1
  71. package/dist/esm/utils/ax/core.js +32 -40
  72. package/dist/esm/utils/ax/index.d.ts +3 -1
  73. package/dist/esm/utils/folder-scanner.d.ts +1 -1
  74. package/dist/esm/utils/folder-scanner.js +76 -75
  75. package/dist/esm/version.d.ts +1 -1
  76. package/dist/esm/version.js +1 -1
  77. package/dist/umd/yee-c.min.css +2 -2
  78. package/dist/umd/yee-c.min.js +1 -1
  79. package/package.json +1 -1
  80. package/src/Input/style/index.less +1 -0
  81. package/src/Tabs/demo/overflow-center.tsx +35 -0
  82. package/src/Tabs/hooks/useNavListMove.ts +60 -18
  83. package/src/Tabs/hooks/useTabScroll.ts +7 -1
  84. package/src/Tabs/index.en-US.md +33 -31
  85. package/src/Tabs/index.zh-CN.md +33 -31
  86. package/src/Tabs/interface.ts +9 -0
  87. package/src/Tabs/style/index.less +5 -0
  88. package/src/Tabs/tab-header/index.tsx +12 -2
  89. package/src/Tabs/tabs.tsx +2 -0
  90. package/src/Upload/demo/auto-upload.tsx +35 -0
  91. package/src/Upload/demo/basic.tsx +7 -11
  92. package/src/Upload/demo/controlled.tsx +12 -8
  93. package/src/Upload/demo/directory.tsx +3 -4
  94. package/src/Upload/demo/drag.tsx +5 -12
  95. package/src/Upload/demo/multiple.tsx +3 -4
  96. package/src/Upload/demo/pictureWall.tsx +22 -21
  97. package/src/Upload/dragger.tsx +47 -34
  98. package/src/Upload/index.en-US.md +63 -43
  99. package/src/Upload/index.ts +8 -1
  100. package/src/Upload/index.zh-CN.md +62 -42
  101. package/src/Upload/interface.ts +68 -120
  102. package/src/Upload/style/index.less +40 -13
  103. package/src/Upload/upload.tsx +546 -215
  104. package/src/Upload/uploaded-list/index.tsx +9 -5
  105. package/src/Upload/uploaded-list/uploaded-item.tsx +199 -228
  106. package/src/style/size.css +1 -1
  107. package/src/utils/ax/core.ts +28 -41
  108. package/src/utils/folder-scanner.ts +51 -37
  109. package/src/version.ts +1 -1
@@ -42,39 +42,48 @@ __export(folder_scanner_exports, {
42
42
  default: () => folderScanner
43
43
  });
44
44
  module.exports = __toCommonJS(folder_scanner_exports);
45
- function folderScanner(entry, filesList) {
46
- return __async(this, null, function* () {
47
- return new Promise((resolve, reject) => {
48
- if (entry.isDirectory) {
49
- const directoryReader = entry.createReader();
50
- directoryReader.readEntries(
51
- (entries) => __async(this, null, function* () {
52
- entries.forEach((entry2, index) => __async(this, null, function* () {
53
- yield folderScanner(entry2, filesList);
54
- if (index === entries.length - 1) {
55
- resolve(filesList);
56
- }
57
- }));
58
- }),
59
- (e) => {
60
- reject(e);
61
- }
62
- );
63
- } else if (entry.isFile) {
64
- entry.file(
65
- (file) => __async(this, null, function* () {
66
- const path = entry.fullPath.substring(1);
67
- const newFile = Object.defineProperty(file, "webkitRelativePath", {
68
- value: path
69
- });
70
- filesList.push(newFile);
71
- resolve(filesList);
72
- }),
73
- (e) => {
74
- reject(e);
75
- }
76
- );
77
- }
78
- });
45
+ var readAllEntries = (reader) => {
46
+ return new Promise((resolve, reject) => {
47
+ const entries = [];
48
+ const readNextBatch = () => {
49
+ reader.readEntries((batch) => {
50
+ if (batch.length === 0) {
51
+ resolve(entries);
52
+ return;
53
+ }
54
+ entries.push(...batch);
55
+ readNextBatch();
56
+ }, reject);
57
+ };
58
+ readNextBatch();
59
+ });
60
+ };
61
+ var readFile = (entry) => {
62
+ return new Promise((resolve, reject) => {
63
+ entry.file((file) => {
64
+ const path = entry.fullPath.replace(/^\//, "");
65
+ Object.defineProperty(file, "webkitRelativePath", {
66
+ configurable: true,
67
+ value: path
68
+ });
69
+ resolve(file);
70
+ }, reject);
71
+ });
72
+ };
73
+ function folderScanner(_0) {
74
+ return __async(this, arguments, function* (entry, filesList = []) {
75
+ if (entry.isFile) {
76
+ filesList.push(yield readFile(entry));
77
+ return filesList;
78
+ }
79
+ if (entry.isDirectory) {
80
+ const reader = entry.createReader();
81
+ const entries = yield readAllEntries(reader);
82
+ const nestedFiles = yield Promise.all(
83
+ entries.map((nestedEntry) => folderScanner(nestedEntry, []))
84
+ );
85
+ filesList.push(...nestedFiles.flat());
86
+ }
87
+ return filesList;
79
88
  });
80
89
  }
@@ -3,4 +3,4 @@ declare global {
3
3
  __yee_c_version__: string;
4
4
  }
5
5
  }
6
- export declare const version = "0.9.2";
6
+ export declare const version = "0.10.0";
@@ -22,7 +22,7 @@ __export(version_exports, {
22
22
  version: () => version
23
23
  });
24
24
  module.exports = __toCommonJS(version_exports);
25
- var version = "0.9.2";
25
+ var version = "0.10.0";
26
26
  if (typeof window !== "undefined") {
27
27
  window.__yee_c_version__ = version;
28
28
  }
@@ -13,6 +13,7 @@
13
13
  border: var(--yee-input-border-width) solid var(--yee-input-border-color);
14
14
  border-radius: var(--yee-input-border-radius, 4px);
15
15
  font-family: var(--yee-font-family);
16
+ outline: inherit;
16
17
 
17
18
  &:not(@{pls}-disabled):hover {
18
19
  border-color: var(--yee-input-hover-border-color);
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ declare const _default: () => React.JSX.Element;
3
+ export default _default;
@@ -0,0 +1,61 @@
1
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
2
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
3
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
4
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
5
+ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
6
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
7
+ import { Tabs } from "../..";
8
+ import React, { useState } from 'react';
9
+ export default (function () {
10
+ var items = Array.from({
11
+ length: 24
12
+ }, function (_, i) {
13
+ return {
14
+ key: "tab-".concat(i + 1),
15
+ label: "Tab ".concat(i + 1),
16
+ children: "Content of Tab Pane ".concat(i + 1)
17
+ };
18
+ });
19
+ var _useState = useState('tab-1'),
20
+ _useState2 = _slicedToArray(_useState, 2),
21
+ centerKey = _useState2[0],
22
+ setCenterKey = _useState2[1];
23
+ var _useState3 = useState('tab-1'),
24
+ _useState4 = _slicedToArray(_useState3, 2),
25
+ autoKey = _useState4[0],
26
+ setAutoKey = _useState4[1];
27
+ return /*#__PURE__*/React.createElement("div", {
28
+ style: {
29
+ display: 'flex',
30
+ flexDirection: 'column',
31
+ gap: 24
32
+ }
33
+ }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
34
+ style: {
35
+ marginBottom: 8
36
+ }
37
+ }, "activeAlign=\"center\""), /*#__PURE__*/React.createElement("div", {
38
+ style: {
39
+ maxWidth: 480
40
+ },
41
+ "data-testid": "center-wrap"
42
+ }, /*#__PURE__*/React.createElement(Tabs, {
43
+ activeAlign: "center",
44
+ items: items,
45
+ activeKey: centerKey,
46
+ onChange: setCenterKey
47
+ }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
48
+ style: {
49
+ marginBottom: 8
50
+ }
51
+ }, "default (auto)"), /*#__PURE__*/React.createElement("div", {
52
+ style: {
53
+ maxWidth: 480
54
+ },
55
+ "data-testid": "auto-wrap"
56
+ }, /*#__PURE__*/React.createElement(Tabs, {
57
+ items: items,
58
+ activeKey: autoKey,
59
+ onChange: setAutoKey
60
+ }))));
61
+ });
@@ -3,10 +3,11 @@ interface UseNavListMoveOptions {
3
3
  direction: 'horizontal' | 'vertical';
4
4
  activeKey: string | number;
5
5
  enabled: boolean;
6
+ align?: 'auto' | 'center';
6
7
  activetab: React.RefObject<HTMLElement | null>;
7
8
  navList: React.RefObject<HTMLDivElement | null>;
8
9
  navContainer: React.RefObject<HTMLDivElement | null>;
9
10
  onMoved?: () => void;
10
11
  }
11
- export declare function useNavListMove({ direction, activeKey, enabled, activetab, navList, navContainer, onMoved, }: UseNavListMoveOptions): void;
12
+ export declare function useNavListMove({ direction, activeKey, enabled, align, activetab, navList, navContainer, onMoved, }: UseNavListMoveOptions): void;
12
13
  export {};
@@ -10,6 +10,8 @@ export function useNavListMove(_ref) {
10
10
  var direction = _ref.direction,
11
11
  activeKey = _ref.activeKey,
12
12
  enabled = _ref.enabled,
13
+ _ref$align = _ref.align,
14
+ align = _ref$align === void 0 ? 'auto' : _ref$align,
13
15
  activetab = _ref.activetab,
14
16
  navList = _ref.navList,
15
17
  navContainer = _ref.navContainer,
@@ -21,47 +23,82 @@ export function useNavListMove(_ref) {
21
23
  if (!enabled || !tab || !list || !container) {
22
24
  return;
23
25
  }
24
- var _isInContainer = isInContainer(direction, tab, list, container),
25
- _isInContainer2 = _slicedToArray(_isInContainer, 1),
26
- isVisible = _isInContainer2[0];
27
- if (isVisible) return;
26
+
27
+ // 'auto': keep as-is when the active tab is already fully visible.
28
+ // 'center': always re-center, even for tabs already visible on the header.
29
+ if (align !== 'center') {
30
+ var _isInContainer = isInContainer(direction, tab, list, container),
31
+ _isInContainer2 = _slicedToArray(_isInContainer, 1),
32
+ isVisible = _isInContainer2[0];
33
+ if (isVisible) return;
34
+ }
35
+ var moved = false;
28
36
  if (direction === 'horizontal') {
29
- var _getEleTranslate = getEleTranslate(list),
30
- _getEleTranslate2 = _slicedToArray(_getEleTranslate, 1),
31
- x = _getEleTranslate2[0];
32
- var tabLeft = tab.offsetLeft;
33
- var tabWidth = tab.offsetWidth;
34
- var containerWidth = container.clientWidth;
35
- var newX = x;
37
+ if (align === 'center') {
38
+ var containerWidth = container.clientWidth;
39
+ var maxOffset = list.scrollWidth - containerWidth;
40
+ var tabCenter = tab.offsetLeft + tab.offsetWidth / 2;
41
+ var newX = Math.round(containerWidth / 2 - tabCenter);
42
+ newX = Math.max(-maxOffset, Math.min(0, newX));
43
+ var _getEleTranslate = getEleTranslate(list),
44
+ _getEleTranslate2 = _slicedToArray(_getEleTranslate, 1),
45
+ x = _getEleTranslate2[0];
46
+ if (Math.abs(newX - x) > 0.5) {
47
+ setEleTranslate(list, newX);
48
+ moved = true;
49
+ }
50
+ } else {
51
+ var _getEleTranslate3 = getEleTranslate(list),
52
+ _getEleTranslate4 = _slicedToArray(_getEleTranslate3, 1),
53
+ _x = _getEleTranslate4[0];
54
+ var tabLeft = tab.offsetLeft;
55
+ var tabWidth = tab.offsetWidth;
56
+ var _containerWidth = container.clientWidth;
57
+ var _newX = _x;
36
58
 
37
- // Tab overflows on the right side
38
- if (tabLeft + tabWidth - Math.abs(x) > containerWidth) {
39
- var overflow = tabLeft + tabWidth - Math.abs(x) - containerWidth;
40
- newX = x - overflow;
59
+ // Tab overflows on the right side
60
+ if (tabLeft + tabWidth - Math.abs(_x) > _containerWidth) {
61
+ var overflow = tabLeft + tabWidth - Math.abs(_x) - _containerWidth;
62
+ _newX = _x - overflow;
63
+ }
64
+ // Tab overflows on the left side
65
+ else if (tabLeft < Math.abs(_x)) {
66
+ var _overflow = Math.abs(_x) - tabLeft;
67
+ _newX = _x + _overflow;
68
+ }
69
+ setEleTranslate(list, _newX);
70
+ moved = true;
41
71
  }
42
- // Tab overflows on the left side
43
- else if (tabLeft < Math.abs(x)) {
44
- var _overflow = Math.abs(x) - tabLeft;
45
- newX = x + _overflow;
72
+ } else if (align === 'center') {
73
+ var containerHeight = container.clientHeight;
74
+ var _maxOffset = container.scrollHeight - containerHeight;
75
+ var _tabCenter = tab.offsetTop + tab.offsetHeight / 2;
76
+ var newScrollTop = Math.max(0, Math.min(_maxOffset, Math.round(_tabCenter - containerHeight / 2)));
77
+ if (Math.abs(newScrollTop - container.scrollTop) > 0.5) {
78
+ container.scrollTop = newScrollTop;
79
+ moved = true;
46
80
  }
47
- setEleTranslate(list, newX);
48
81
  } else {
49
82
  var tabTop = tab.offsetTop;
50
83
  var tabHeight = tab.offsetHeight;
51
- var containerHeight = container.clientHeight;
84
+ var _containerHeight = container.clientHeight;
52
85
  var scrollTop = container.scrollTop;
53
86
 
54
87
  // Tab overflows below
55
- if (tabTop + tabHeight - scrollTop >= containerHeight) {
56
- var _overflow2 = tabTop + tabHeight - scrollTop - containerHeight;
88
+ if (tabTop + tabHeight - scrollTop >= _containerHeight) {
89
+ var _overflow2 = tabTop + tabHeight - scrollTop - _containerHeight;
57
90
  container.scrollTop = scrollTop + _overflow2;
91
+ moved = true;
58
92
  }
59
93
  // Tab overflows above
60
94
  else if (tabTop < scrollTop) {
61
95
  var _overflow3 = scrollTop - tabTop;
62
96
  container.scrollTop = scrollTop - _overflow3;
97
+ moved = true;
63
98
  }
64
99
  }
65
- onMoved === null || onMoved === void 0 || onMoved();
66
- }, [activeKey, enabled, direction, activetab, navList, navContainer, onMoved]);
100
+ if (moved) {
101
+ onMoved === null || onMoved === void 0 || onMoved();
102
+ }
103
+ }, [activeKey, enabled, direction, align, activetab, navList, navContainer, onMoved]);
67
104
  }
@@ -7,6 +7,7 @@ interface UseTabScrollOptions {
7
7
  }
8
8
  export declare function useTabScroll({ direction, navContainer, navList, enabled, }: UseTabScrollOptions): {
9
9
  refreshKey: number;
10
+ refresh: () => void;
10
11
  updateShadow: import("../../utils/debounce").Debounced<() => void>;
11
12
  };
12
13
  export {};
@@ -35,6 +35,14 @@ export function useTabScroll(_ref) {
35
35
  container.classList.toggle('with-suffix-shadow', currentOffset < maxOffset);
36
36
  }, [direction, navContainer, navList]);
37
37
  var debouncedUpdateShadow = useDebounceFunction(updateShadow, 200);
38
+
39
+ // Refresh dropdown range and shadows after the nav list is moved programmatically
40
+ var refresh = useCallback(function () {
41
+ setRefreshKey(function (prev) {
42
+ return prev + 1;
43
+ });
44
+ debouncedUpdateShadow();
45
+ }, [debouncedUpdateShadow]);
38
46
  useEffect(function () {
39
47
  var container = navContainer.current;
40
48
  var list = navList.current;
@@ -84,6 +92,7 @@ export function useTabScroll(_ref) {
84
92
  }, [direction, enabled, navContainer, navList, debouncedUpdateShadow, updateShadow]);
85
93
  return {
86
94
  refreshKey: refreshKey,
95
+ refresh: refresh,
87
96
  updateShadow: debouncedUpdateShadow
88
97
  };
89
98
  }
@@ -121,5 +121,14 @@ export interface TabsProps extends DataAttributeProps {
121
121
  * @default false
122
122
  */
123
123
  fixedHeader?: boolean;
124
+ /**
125
+ * How the active tab is aligned when the tab list overflows
126
+ * - 'auto': scroll minimally so the active tab is visible at the edge;
127
+ * no scrolling when it is already fully visible
128
+ * - 'center': always scroll so the active tab is centered in the header,
129
+ * including tabs clicked directly on the header
130
+ * @default 'auto'
131
+ */
132
+ activeAlign?: 'auto' | 'center';
124
133
  }
125
134
  export {};
@@ -439,6 +439,10 @@
439
439
  height: var(--yee-tabs-nav-operations-height);
440
440
  }
441
441
 
442
+ @{pls}-nav-more {
443
+ margin-left: 4px;
444
+ }
445
+
442
446
  // 下拉框
443
447
  @{pls}-operation-container {
444
448
  max-height: var(--yee-tabs-operation-container-max-height);
@@ -452,6 +456,7 @@
452
456
 
453
457
  @{pls}-tab {
454
458
  height: var(--yee-tabs-operation-tab-height);
459
+ margin: 0;
455
460
  padding: var(--yee-tabs-operation-tab-padding);
456
461
  cursor: pointer;
457
462
 
@@ -12,6 +12,7 @@ export interface TabHeaderProps {
12
12
  prefixCls: string;
13
13
  type?: 'card' | 'editable-card';
14
14
  position?: 'top' | 'bottom' | 'left' | 'right';
15
+ activeAlign?: 'auto' | 'center';
15
16
  headerExtra?: {
16
17
  prefix?: React.ReactNode | (() => React.ReactNode);
17
18
  suffix?: React.ReactNode | (() => React.ReactNode);
@@ -23,6 +23,8 @@ var TabHeader = function TabHeader(props) {
23
23
  type = props.type,
24
24
  _props$position = props.position,
25
25
  position = _props$position === void 0 ? 'top' : _props$position,
26
+ _props$activeAlign = props.activeAlign,
27
+ activeAlign = _props$activeAlign === void 0 ? 'auto' : _props$activeAlign,
26
28
  headerExtra = props.headerExtra,
27
29
  classNames = props.classNames,
28
30
  styles = props.styles,
@@ -58,7 +60,8 @@ var TabHeader = function TabHeader(props) {
58
60
  navList: navList,
59
61
  enabled: moreOpen
60
62
  }),
61
- refreshKey = _useTabScroll.refreshKey;
63
+ refreshKey = _useTabScroll.refreshKey,
64
+ refreshNav = _useTabScroll.refresh;
62
65
 
63
66
  // ActiveBar movement
64
67
  useActiveBar({
@@ -70,15 +73,22 @@ var TabHeader = function TabHeader(props) {
70
73
  enabled: !type // Only show active bar for non-card types
71
74
  });
72
75
 
76
+ // Recompute dropdown visibility, dropdown range and shadows after the list is moved
77
+ var handleNavMoved = useCallback(function () {
78
+ checkVisibility();
79
+ refreshNav();
80
+ }, [checkVisibility, refreshNav]);
81
+
73
82
  // Navigation list movement
74
83
  useNavListMove({
75
84
  direction: direction,
76
85
  activeKey: activeKey,
77
86
  enabled: moreOpen,
87
+ align: activeAlign,
78
88
  activetab: activetab,
79
89
  navList: navList,
80
90
  navContainer: navContainer,
81
- onMoved: checkVisibility
91
+ onMoved: handleNavMoved
82
92
  });
83
93
 
84
94
  // Listen for container size changes
@@ -159,6 +169,7 @@ var TabHeader = function TabHeader(props) {
159
169
  range: range
160
170
  }, /*#__PURE__*/React.createElement(Button, {
161
171
  className: "".concat(prefixCls, "-nav-more"),
172
+ size: "small",
162
173
  icon: /*#__PURE__*/React.createElement(Ellipsis, {
163
174
  size: 14,
164
175
  strokeWidth: 1.5
@@ -1,5 +1,5 @@
1
1
  function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
- var _excluded = ["prefixCls", "position", "type", "className", "style", "classNames", "styles", "items", "lazy", "activeKey", "defaultActiveKey", "fixedHeader", "onChange", "onEdit", "onTabClick"];
2
+ var _excluded = ["prefixCls", "position", "type", "className", "style", "classNames", "styles", "items", "lazy", "activeKey", "defaultActiveKey", "fixedHeader", "activeAlign", "onChange", "onEdit", "onTabClick"];
3
3
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4
4
  function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
5
5
  function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
@@ -42,6 +42,7 @@ var Tabs = function Tabs(baseprops) {
42
42
  activeKey = props.activeKey,
43
43
  defaultActiveKey = props.defaultActiveKey,
44
44
  fixedHeader = props.fixedHeader,
45
+ activeAlign = props.activeAlign,
45
46
  onChange = props.onChange,
46
47
  onEdit = props.onEdit,
47
48
  onTabClick = props.onTabClick,
@@ -110,7 +111,8 @@ var Tabs = function Tabs(baseprops) {
110
111
  }), /*#__PURE__*/React.createElement(TabsCtx.Provider, {
111
112
  value: contextValue
112
113
  }, /*#__PURE__*/React.createElement(TabHeader, _extends({}, omit(props, ['children', 'className', 'style']), {
113
- prefixCls: prefixCls
114
+ prefixCls: prefixCls,
115
+ activeAlign: activeAlign
114
116
  })), /*#__PURE__*/React.createElement(TabContent, {
115
117
  prefixCls: prefixCls,
116
118
  className: classNames === null || classNames === void 0 ? void 0 : classNames.content,
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ declare const _default: () => React.JSX.Element;
3
+ export default _default;
@@ -0,0 +1,42 @@
1
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
2
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
3
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
4
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
5
+ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
6
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
7
+ import { Button, Upload } from "../..";
8
+ import React, { useRef, useState } from 'react';
9
+ export default (function () {
10
+ var uploadRef = useRef(null);
11
+ var _useState = useState([]),
12
+ _useState2 = _slicedToArray(_useState, 2),
13
+ fileList = _useState2[0],
14
+ setFileList = _useState2[1];
15
+ var readyCount = fileList.filter(function (file) {
16
+ return file.status === 'ready';
17
+ }).length;
18
+ return /*#__PURE__*/React.createElement("div", {
19
+ style: {
20
+ display: 'flex',
21
+ flexDirection: 'column',
22
+ gap: 12
23
+ }
24
+ }, /*#__PURE__*/React.createElement(Upload, {
25
+ ref: uploadRef,
26
+ autoUpload: false,
27
+ multiple: true,
28
+ action: "https://www.mocky.io/v2/5cc8019d300000980a055e76",
29
+ fileList: fileList,
30
+ onChange: function onChange(_ref) {
31
+ var nextFileList = _ref.fileList;
32
+ return setFileList(nextFileList);
33
+ }
34
+ }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
35
+ type: "primary",
36
+ disabled: readyCount === 0,
37
+ onClick: function onClick() {
38
+ var _uploadRef$current;
39
+ return (_uploadRef$current = uploadRef.current) === null || _uploadRef$current === void 0 ? void 0 : _uploadRef$current.upload();
40
+ }
41
+ }, "Start upload (", readyCount, ")")));
42
+ });
@@ -13,24 +13,18 @@ export default (function () {
13
13
  defaultFileList: [{
14
14
  uid: '1',
15
15
  name: 'xxx.png',
16
- status: 'done',
17
- raw: {},
16
+ status: 'success',
18
17
  size: 123,
19
- percent: 0,
18
+ percent: 100,
20
19
  type: 'image/png'
21
20
  }, {
22
21
  uid: '2',
23
22
  name: 'yyy.png',
24
- status: 'done',
25
- raw: {},
23
+ status: 'success',
26
24
  size: 123,
27
- percent: 0,
25
+ percent: 100,
28
26
  type: 'image/png'
29
27
  }]
30
28
  };
31
- return (
32
- /*#__PURE__*/
33
- // @ts-ignore
34
- React.createElement(Upload, props, /*#__PURE__*/React.createElement(Button, null, "Upload"))
35
- );
29
+ return /*#__PURE__*/React.createElement(Upload, props, /*#__PURE__*/React.createElement(Button, null, "Upload"));
36
30
  });
@@ -16,16 +16,18 @@ export default (function () {
16
16
  fileList: fileList,
17
17
  onChange: function onChange(_ref) {
18
18
  var file = _ref.file,
19
- fileList = _ref.fileList;
20
- setFileList(fileList);
19
+ nextFileList = _ref.fileList;
20
+ setFileList(nextFileList);
21
21
  if (file.status !== 'uploading') {
22
- console.log(file, fileList);
22
+ console.log(file, nextFileList);
23
23
  }
24
24
  },
25
25
  onRemove: function onRemove(file) {
26
- setFileList(fileList.filter(function (item) {
27
- return item.uid !== file.uid;
28
- }));
26
+ setFileList(function (current) {
27
+ return current.filter(function (item) {
28
+ return item.uid !== file.uid;
29
+ });
30
+ });
29
31
  return true;
30
32
  }
31
33
  };
@@ -6,35 +6,38 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
6
6
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
7
7
  import { Upload } from "../..";
8
8
  import React, { useState } from 'react';
9
+ var imageUrl = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png';
9
10
  export default (function () {
10
11
  var _useState = useState([{
11
12
  uid: '-1',
12
- name: 'image.png',
13
- status: 'done',
14
- url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
13
+ name: 'image-1.png',
14
+ status: 'success',
15
+ type: 'image/png',
16
+ url: imageUrl
15
17
  }, {
16
18
  uid: '-2',
17
- name: 'image.png',
18
- status: 'done',
19
- url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
19
+ name: 'image-2.png',
20
+ status: 'success',
21
+ type: 'image/png',
22
+ url: imageUrl
20
23
  }, {
21
24
  uid: '-3',
22
- name: 'image.png',
23
- status: 'done',
24
- url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
25
+ name: 'image-3.png',
26
+ status: 'success',
27
+ type: 'image/png',
28
+ url: imageUrl
25
29
  }]),
26
30
  _useState2 = _slicedToArray(_useState, 2),
27
31
  fileList = _useState2[0],
28
32
  setFileList = _useState2[1];
29
- var handleChange = function handleChange(_ref) {
30
- var fileList = _ref.fileList;
31
- setFileList(fileList);
32
- };
33
33
  var props = {
34
34
  action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
35
35
  listType: 'picture-wall',
36
36
  fileList: fileList,
37
- onChange: handleChange
37
+ onChange: function onChange(_ref) {
38
+ var nextFileList = _ref.fileList;
39
+ return setFileList(nextFileList);
40
+ }
38
41
  };
39
42
  return /*#__PURE__*/React.createElement(Upload, props);
40
43
  });
@@ -1,3 +1,4 @@
1
1
  import React from 'react';
2
- declare const Dragger: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>;
2
+ import type { UploadDraggerProps, UploadInstance } from './interface';
3
+ declare const Dragger: React.ForwardRefExoticComponent<UploadDraggerProps & React.RefAttributes<UploadInstance>>;
3
4
  export default Dragger;