@rainbow-oh/yee-c 0.9.1 → 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.
- package/dist/cjs/Badge/badge.js +5 -3
- package/dist/cjs/Badge/interface.d.ts +4 -0
- package/dist/cjs/Input/style/index.less +1 -0
- package/dist/cjs/Popconfirm/interface.d.ts +0 -4
- package/dist/cjs/Select/select.js +2 -1
- package/dist/cjs/TableSelect/table-select.js +2 -2
- package/dist/cjs/Tabs/demo/overflow-center.d.ts +3 -0
- package/dist/cjs/Tabs/demo/overflow-center.js +54 -0
- package/dist/cjs/Tabs/hooks/useNavListMove.d.ts +2 -1
- package/dist/cjs/Tabs/hooks/useNavListMove.js +51 -16
- package/dist/cjs/Tabs/hooks/useTabScroll.d.ts +1 -0
- package/dist/cjs/Tabs/hooks/useTabScroll.js +5 -1
- package/dist/cjs/Tabs/interface.d.ts +9 -0
- package/dist/cjs/Tabs/style/index.less +5 -0
- package/dist/cjs/Tabs/tab-header/index.d.ts +1 -0
- package/dist/cjs/Tabs/tab-header/index.js +9 -2
- package/dist/cjs/Tabs/tabs.js +4 -1
- package/dist/cjs/TreeSelect/tree-select.js +1 -1
- package/dist/cjs/Upload/demo/auto-upload.d.ts +3 -0
- package/dist/cjs/Upload/demo/auto-upload.js +65 -0
- package/dist/cjs/Upload/demo/basic.js +5 -10
- package/dist/cjs/Upload/demo/controlled.js +4 -4
- package/dist/cjs/Upload/demo/pictureWall.js +14 -13
- package/dist/cjs/Upload/dragger.d.ts +2 -1
- package/dist/cjs/Upload/dragger.js +32 -21
- package/dist/cjs/Upload/index.d.ts +1 -1
- package/dist/cjs/Upload/interface.d.ts +67 -120
- package/dist/cjs/Upload/style/index.less +40 -13
- package/dist/cjs/Upload/upload.d.ts +2 -2
- package/dist/cjs/Upload/upload.js +435 -185
- package/dist/cjs/Upload/uploaded-list/index.d.ts +2 -1
- package/dist/cjs/Upload/uploaded-list/index.js +6 -3
- package/dist/cjs/Upload/uploaded-list/uploaded-item.d.ts +6 -3
- package/dist/cjs/Upload/uploaded-list/uploaded-item.js +127 -138
- package/dist/cjs/style/size.css +1 -1
- package/dist/cjs/style/themes.css +1 -1
- package/dist/cjs/style/variables.css +2 -2
- package/dist/cjs/utils/ax/core.d.ts +3 -1
- package/dist/cjs/utils/ax/core.js +24 -37
- package/dist/cjs/utils/ax/index.d.ts +3 -1
- package/dist/cjs/utils/folder-scanner.d.ts +1 -1
- package/dist/cjs/utils/folder-scanner.js +43 -34
- package/dist/cjs/version.d.ts +1 -1
- package/dist/cjs/version.js +1 -1
- package/dist/esm/Badge/badge.js +3 -2
- package/dist/esm/Badge/interface.d.ts +4 -0
- package/dist/esm/Input/style/index.less +1 -0
- package/dist/esm/Popconfirm/interface.d.ts +0 -4
- package/dist/esm/Select/select.js +2 -1
- package/dist/esm/TableSelect/table-select.js +2 -2
- package/dist/esm/Tabs/demo/overflow-center.d.ts +3 -0
- package/dist/esm/Tabs/demo/overflow-center.js +61 -0
- package/dist/esm/Tabs/hooks/useNavListMove.d.ts +2 -1
- package/dist/esm/Tabs/hooks/useNavListMove.js +62 -25
- package/dist/esm/Tabs/hooks/useTabScroll.d.ts +1 -0
- package/dist/esm/Tabs/hooks/useTabScroll.js +9 -0
- package/dist/esm/Tabs/interface.d.ts +9 -0
- package/dist/esm/Tabs/style/index.less +5 -0
- package/dist/esm/Tabs/tab-header/index.d.ts +1 -0
- package/dist/esm/Tabs/tab-header/index.js +13 -2
- package/dist/esm/Tabs/tabs.js +4 -2
- package/dist/esm/TreeSelect/tree-select.js +1 -1
- package/dist/esm/Upload/demo/auto-upload.d.ts +3 -0
- package/dist/esm/Upload/demo/auto-upload.js +42 -0
- package/dist/esm/Upload/demo/basic.js +5 -11
- package/dist/esm/Upload/demo/controlled.js +8 -6
- package/dist/esm/Upload/demo/pictureWall.js +17 -14
- package/dist/esm/Upload/dragger.d.ts +2 -1
- package/dist/esm/Upload/dragger.js +10 -5
- package/dist/esm/Upload/index.d.ts +1 -1
- package/dist/esm/Upload/interface.d.ts +67 -120
- package/dist/esm/Upload/style/index.less +40 -13
- package/dist/esm/Upload/upload.d.ts +2 -2
- package/dist/esm/Upload/upload.js +573 -271
- package/dist/esm/Upload/uploaded-list/index.d.ts +2 -1
- package/dist/esm/Upload/uploaded-list/index.js +9 -4
- package/dist/esm/Upload/uploaded-list/uploaded-item.d.ts +6 -3
- package/dist/esm/Upload/uploaded-list/uploaded-item.js +145 -150
- package/dist/esm/style/size.css +1 -1
- package/dist/esm/style/themes.css +1 -1
- package/dist/esm/style/variables.css +2 -2
- package/dist/esm/utils/ax/core.d.ts +3 -1
- package/dist/esm/utils/ax/core.js +32 -40
- package/dist/esm/utils/ax/index.d.ts +3 -1
- package/dist/esm/utils/folder-scanner.d.ts +1 -1
- package/dist/esm/utils/folder-scanner.js +76 -75
- package/dist/esm/version.d.ts +1 -1
- package/dist/esm/version.js +1 -1
- package/dist/umd/yee-c.min.css +2 -2
- package/dist/umd/yee-c.min.js +1 -1
- package/package.json +1 -1
- package/src/Badge/badge.tsx +2 -1
- package/src/Badge/interface.ts +4 -0
- package/src/Input/style/index.less +1 -0
- package/src/Popconfirm/interface.ts +0 -4
- package/src/Select/select.tsx +2 -1
- package/src/TableSelect/table-select.tsx +1 -0
- package/src/Tabs/demo/overflow-center.tsx +35 -0
- package/src/Tabs/hooks/useNavListMove.ts +60 -18
- package/src/Tabs/hooks/useTabScroll.ts +7 -1
- package/src/Tabs/index.en-US.md +33 -31
- package/src/Tabs/index.zh-CN.md +33 -31
- package/src/Tabs/interface.ts +9 -0
- package/src/Tabs/style/index.less +5 -0
- package/src/Tabs/tab-header/index.tsx +12 -2
- package/src/Tabs/tabs.tsx +2 -0
- package/src/TreeSelect/tree-select.tsx +1 -1
- package/src/Upload/demo/auto-upload.tsx +35 -0
- package/src/Upload/demo/basic.tsx +7 -11
- package/src/Upload/demo/controlled.tsx +12 -8
- package/src/Upload/demo/directory.tsx +3 -4
- package/src/Upload/demo/drag.tsx +5 -12
- package/src/Upload/demo/multiple.tsx +3 -4
- package/src/Upload/demo/pictureWall.tsx +22 -21
- package/src/Upload/dragger.tsx +47 -34
- package/src/Upload/index.en-US.md +63 -43
- package/src/Upload/index.ts +8 -1
- package/src/Upload/index.zh-CN.md +62 -42
- package/src/Upload/interface.ts +68 -120
- package/src/Upload/style/index.less +40 -13
- package/src/Upload/upload.tsx +546 -215
- package/src/Upload/uploaded-list/index.tsx +9 -5
- package/src/Upload/uploaded-list/uploaded-item.tsx +199 -228
- package/src/style/size.css +1 -1
- package/src/utils/ax/core.ts +28 -41
- package/src/utils/folder-scanner.ts +51 -37
- 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
|
-
|
|
46
|
-
return
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
(entries)
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
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
|
}
|
package/dist/cjs/version.d.ts
CHANGED
package/dist/cjs/version.js
CHANGED
package/dist/esm/Badge/badge.js
CHANGED
|
@@ -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", "children", "count", "showZero", "dot", "size", "status", "offset", "style", "color", "overflowCount", "text", "active", "className", "styles", "classNames"];
|
|
2
|
+
var _excluded = ["prefixCls", "children", "count", "showZero", "dot", "size", "status", "offset", "style", "color", "overflowCount", "text", "active", "className", "styles", "classNames", "title"];
|
|
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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
5
5
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
@@ -40,6 +40,7 @@ var InternalBadge = function InternalBadge(baseprops) {
|
|
|
40
40
|
className = props.className,
|
|
41
41
|
styles = props.styles,
|
|
42
42
|
classNames = props.classNames,
|
|
43
|
+
title = props.title,
|
|
43
44
|
rest = _objectWithoutProperties(props, _excluded);
|
|
44
45
|
var supNode;
|
|
45
46
|
var supTitle = '';
|
|
@@ -49,7 +50,7 @@ var InternalBadge = function InternalBadge(baseprops) {
|
|
|
49
50
|
var renderCountNode = function renderCountNode() {
|
|
50
51
|
if (count === null || count === undefined) return null;
|
|
51
52
|
if (typeof count === 'number') {
|
|
52
|
-
supTitle = String(count);
|
|
53
|
+
supTitle = title || String(count);
|
|
53
54
|
|
|
54
55
|
// When count is 0 and showZero is false, return null
|
|
55
56
|
if (count === 0 && !showZero) return null;
|
|
@@ -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);
|
|
@@ -21,6 +21,7 @@ import useMergedState from "../hooks/useMergedState";
|
|
|
21
21
|
import mergeContextToProps from "../utils/mergeContextToProps";
|
|
22
22
|
import useSelectKeyboard from "./hooks/useSelectKeyboard";
|
|
23
23
|
import Options from "./options";
|
|
24
|
+
import Omit from "../utils/omit";
|
|
24
25
|
import "./style/index.less";
|
|
25
26
|
|
|
26
27
|
// ---------------------------------------------------------------------------
|
|
@@ -228,7 +229,7 @@ var Select = function Select(baseprops) {
|
|
|
228
229
|
} : undefined,
|
|
229
230
|
open: disabled ? false : open,
|
|
230
231
|
onOpenChange: handleOpenChange
|
|
231
|
-
}), /*#__PURE__*/React.createElement(Selector, _extends({}, rest, {
|
|
232
|
+
}), /*#__PURE__*/React.createElement(Selector, _extends({}, Omit(rest, ['forceRender']), {
|
|
232
233
|
mode: mode,
|
|
233
234
|
value: searchValue,
|
|
234
235
|
options: options,
|
|
@@ -174,7 +174,7 @@ var TableSelect = function TableSelect(baseprops) {
|
|
|
174
174
|
rowKey: rowKey
|
|
175
175
|
}));
|
|
176
176
|
};
|
|
177
|
-
return /*#__PURE__*/React.createElement(Trigger, {
|
|
177
|
+
return /*#__PURE__*/React.createElement(Trigger, _extends({}, rest, {
|
|
178
178
|
trigger: "click",
|
|
179
179
|
popupClassName: "".concat(prefixCls, "-popup"),
|
|
180
180
|
popup: renderPopup(),
|
|
@@ -182,7 +182,7 @@ var TableSelect = function TableSelect(baseprops) {
|
|
|
182
182
|
hideOnClick: selectionType === 'radio' ? true : false,
|
|
183
183
|
onOpenChange: onVisibleChange,
|
|
184
184
|
stretch: "minWidth"
|
|
185
|
-
}, /*#__PURE__*/React.createElement(Selector, selectorProps));
|
|
185
|
+
}), /*#__PURE__*/React.createElement(Selector, selectorProps));
|
|
186
186
|
};
|
|
187
187
|
TableSelect.displayName = 'TableSelect';
|
|
188
188
|
export default TableSelect;
|
|
@@ -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
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
if (
|
|
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
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
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
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
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
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
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
|
|
84
|
+
var _containerHeight = container.clientHeight;
|
|
52
85
|
var scrollTop = container.scrollTop;
|
|
53
86
|
|
|
54
87
|
// Tab overflows below
|
|
55
|
-
if (tabTop + tabHeight - scrollTop >=
|
|
56
|
-
var _overflow2 = tabTop + tabHeight - scrollTop -
|
|
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
|
-
|
|
66
|
-
|
|
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:
|
|
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
|
package/dist/esm/Tabs/tabs.js
CHANGED
|
@@ -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,
|
|
@@ -231,7 +231,7 @@ var TreeSelect = function TreeSelect(baseprops) {
|
|
|
231
231
|
popupClassName: "".concat(prefixCls, "-popup"),
|
|
232
232
|
hideOnClick: false,
|
|
233
233
|
onOpenChange: handleOpenChange
|
|
234
|
-
}), /*#__PURE__*/React.createElement(Selector, _extends({}, omit(rest, ['showLine']), {
|
|
234
|
+
}), /*#__PURE__*/React.createElement(Selector, _extends({}, omit(rest, ['showLine', 'forceRender']), {
|
|
235
235
|
className: "".concat(prefixCls, "-selector"),
|
|
236
236
|
mode: mode,
|
|
237
237
|
value: searchValue,
|
|
@@ -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: '
|
|
17
|
-
raw: {},
|
|
16
|
+
status: 'success',
|
|
18
17
|
size: 123,
|
|
19
|
-
percent:
|
|
18
|
+
percent: 100,
|
|
20
19
|
type: 'image/png'
|
|
21
20
|
}, {
|
|
22
21
|
uid: '2',
|
|
23
22
|
name: 'yyy.png',
|
|
24
|
-
status: '
|
|
25
|
-
raw: {},
|
|
23
|
+
status: 'success',
|
|
26
24
|
size: 123,
|
|
27
|
-
percent:
|
|
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
|
});
|