bj-web-components 0.2.28 → 0.2.29
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/index.js +1 -51
- package/dist/index.mjs +49 -49
- package/dist/style.css +1 -3744
- package/dist/web/BasicInput/BInput.js +1 -208
- package/dist/web/BasicInput/BInput.mjs +132 -164
- package/dist/web/BasicInput/utils.js +1 -47
- package/dist/web/BasicInput/utils.mjs +28 -38
- package/dist/web/CategoryDropdown/CategoryDropdown.js +1 -307
- package/dist/web/CategoryDropdown/CategoryDropdown.mjs +170 -218
- package/dist/web/CheckBox/BCheckBox.js +1 -116
- package/dist/web/CheckBox/BCheckBox.mjs +70 -86
- package/dist/web/CheckBox/Group.js +1 -73
- package/dist/web/CheckBox/Group.mjs +56 -63
- package/dist/web/CheckBox/context.js +1 -5
- package/dist/web/CheckBox/context.mjs +3 -3
- package/dist/web/CheckBox/index.js +1 -8
- package/dist/web/CheckBox/index.mjs +6 -6
- package/dist/web/Dropdown/BDropdown.js +1 -186
- package/dist/web/Dropdown/BDropdown.mjs +106 -132
- package/dist/web/EmptyInputBox/EmptyInputBox.js +1 -77
- package/dist/web/EmptyInputBox/EmptyInputBox.mjs +48 -52
- package/dist/web/FileCard/FileCard.js +1 -157
- package/dist/web/FileCard/FileCard.mjs +82 -112
- package/dist/web/Icon/Icon.js +1 -9
- package/dist/web/Icon/Icon.mjs +6 -6
- package/dist/web/Input/Input.js +1 -181
- package/dist/web/Input/Input.mjs +113 -122
- package/dist/web/InputNumber/BInputNumber.js +1 -311
- package/dist/web/InputNumber/BInputNumber.mjs +167 -275
- package/dist/web/InputNumber/StepHandler.js +1 -69
- package/dist/web/InputNumber/StepHandler.mjs +32 -38
- package/dist/web/InputNumber/hooks/useCursor.js +1 -40
- package/dist/web/InputNumber/hooks/useCursor.mjs +33 -35
- package/dist/web/InputNumber/hooks/useFrame.js +1 -12
- package/dist/web/InputNumber/hooks/useFrame.mjs +6 -9
- package/dist/web/InputNumber/utils/decimal.js +1 -147
- package/dist/web/InputNumber/utils/decimal.mjs +81 -109
- package/dist/web/Modal/Modal.js +1 -84
- package/dist/web/Modal/Modal.mjs +49 -52
- package/dist/web/OverlayScrollbar/BOverlayScrollbar.js +1 -232
- package/dist/web/OverlayScrollbar/BOverlayScrollbar.mjs +125 -206
- package/dist/web/Pagination/Pagination.js +1 -328
- package/dist/web/Pagination/Pagination.mjs +178 -254
- package/dist/web/ProductField/ProductField.js +1 -272
- package/dist/web/ProductField/ProductField.mjs +143 -190
- package/dist/web/ProductField/arrow-up.svg.js +1 -3
- package/dist/web/ProductField/arrow-up.svg.mjs +2 -2
- package/dist/web/ProductField/checkbox-no.svg.js +1 -3
- package/dist/web/ProductField/checkbox-no.svg.mjs +2 -2
- package/dist/web/ProductField/checkbox-ok.svg.js +1 -3
- package/dist/web/ProductField/checkbox-ok.svg.mjs +2 -2
- package/dist/web/ProductField/no_data_light.svg.js +1 -3
- package/dist/web/ProductField/no_data_light.svg.mjs +2 -2
- package/dist/web/ProductField/search.svg.js +1 -3
- package/dist/web/ProductField/search.svg.mjs +2 -2
- package/dist/web/ProductField/sort.svg.js +1 -3
- package/dist/web/ProductField/sort.svg.mjs +2 -2
- package/dist/web/SkuInputCard/SkuInputCard.js +1 -276
- package/dist/web/SkuInputCard/SkuInputCard.mjs +149 -188
- package/dist/web/SkuInputCard/spin_loading_red.gif.js +1 -3
- package/dist/web/SkuInputCard/spin_loading_red.gif.mjs +2 -2
- package/dist/web/Switch/Switch.js +1 -70
- package/dist/web/Switch/Switch.mjs +37 -47
- package/dist/web/Table/BTable.js +1 -950
- package/dist/web/Table/BTable.mjs +521 -767
- package/dist/web/Table/Column.js +1 -5
- package/dist/web/Table/Column.mjs +2 -2
- package/dist/web/Table/ColumnGroup.js +1 -5
- package/dist/web/Table/ColumnGroup.mjs +2 -2
- package/dist/web/Table/utils/columns.js +1 -48
- package/dist/web/Table/utils/columns.mjs +30 -35
- package/dist/web/Table/utils/sortFilter.js +1 -84
- package/dist/web/Table/utils/sortFilter.mjs +52 -73
- package/dist/web/Tabs/BTabs.js +1 -150
- package/dist/web/Tabs/BTabs.mjs +98 -118
- package/dist/web/Tabs/TabPane.js +1 -8
- package/dist/web/Tabs/TabPane.mjs +4 -4
- package/dist/web/Tooltip/ConfirmTooltip.js +1 -26
- package/dist/web/Tooltip/ConfirmTooltip.mjs +19 -20
- package/dist/web/Tooltip/ContentTooltip.js +1 -94
- package/dist/web/Tooltip/ContentTooltip.mjs +62 -72
- package/dist/web/Tooltip/ProgressTooltip.js +1 -36
- package/dist/web/Tooltip/ProgressTooltip.mjs +20 -22
- package/dist/web/Tooltip/TooltipWrapper.js +1 -12
- package/dist/web/Tooltip/TooltipWrapper.mjs +8 -8
- package/dist/web/Tooltip/useAutoPlacement.js +1 -41
- package/dist/web/Tooltip/useAutoPlacement.mjs +25 -34
- package/dist/web.js +1 -51
- package/dist/web.mjs +49 -49
- package/package.json +1 -1
|
@@ -1,47 +1,37 @@
|
|
|
1
|
-
function
|
|
2
|
-
return
|
|
1
|
+
function i(e) {
|
|
2
|
+
return !!(e.addonBefore || e.addonAfter);
|
|
3
3
|
}
|
|
4
|
-
function
|
|
5
|
-
return
|
|
4
|
+
function l(e) {
|
|
5
|
+
return !!(e.prefix || e.suffix || e.allowClear);
|
|
6
6
|
}
|
|
7
|
-
function
|
|
8
|
-
const
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
currentTarget: { value: currentTarget }
|
|
7
|
+
function t(e, n, r) {
|
|
8
|
+
const c = n.cloneNode(!0), u = Object.create(e, {
|
|
9
|
+
target: { value: c },
|
|
10
|
+
currentTarget: { value: c }
|
|
12
11
|
});
|
|
13
|
-
|
|
14
|
-
if (typeof target.selectionStart === "number" && typeof target.selectionEnd === "number") {
|
|
15
|
-
currentTarget.selectionStart = target.selectionStart;
|
|
16
|
-
currentTarget.selectionEnd = target.selectionEnd;
|
|
17
|
-
}
|
|
18
|
-
currentTarget.setSelectionRange = (...argumentsList) => target.setSelectionRange(...argumentsList);
|
|
19
|
-
return nextEvent;
|
|
12
|
+
return c.value = r, typeof n.selectionStart == "number" && typeof n.selectionEnd == "number" && (c.selectionStart = n.selectionStart, c.selectionEnd = n.selectionEnd), c.setSelectionRange = (...f) => n.setSelectionRange(...f), u;
|
|
20
13
|
}
|
|
21
|
-
function
|
|
22
|
-
if (
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
14
|
+
function s(e, n, r, c) {
|
|
15
|
+
if (r) {
|
|
16
|
+
if (n.type === "click") {
|
|
17
|
+
r(t(n, e, ""));
|
|
18
|
+
return;
|
|
19
|
+
}
|
|
20
|
+
if (e.type !== "file" && c !== void 0) {
|
|
21
|
+
r(t(n, e, c));
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
r(n);
|
|
30
25
|
}
|
|
31
|
-
onChange(event);
|
|
32
26
|
}
|
|
33
|
-
function
|
|
34
|
-
if (!
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
const length = element.value.length;
|
|
38
|
-
if (option.cursor === "start") element.setSelectionRange(0, 0);
|
|
39
|
-
else if (option.cursor === "end") element.setSelectionRange(length, length);
|
|
40
|
-
else element.setSelectionRange(0, length);
|
|
27
|
+
function o(e, n) {
|
|
28
|
+
if (!e || (e.focus(n), !(n != null && n.cursor))) return;
|
|
29
|
+
const r = e.value.length;
|
|
30
|
+
n.cursor === "start" ? e.setSelectionRange(0, 0) : n.cursor === "end" ? e.setSelectionRange(r, r) : e.setSelectionRange(0, r);
|
|
41
31
|
}
|
|
42
32
|
export {
|
|
43
|
-
hasAddon,
|
|
44
|
-
hasPrefixSuffix,
|
|
45
|
-
resolveOnChange,
|
|
46
|
-
triggerFocus
|
|
33
|
+
i as hasAddon,
|
|
34
|
+
l as hasPrefixSuffix,
|
|
35
|
+
s as resolveOnChange,
|
|
36
|
+
o as triggerFocus
|
|
47
37
|
};
|
|
@@ -1,307 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
const jsxRuntime = require("react/jsx-runtime");
|
|
3
|
-
const react = require("react");
|
|
4
|
-
const reactDom = require("react-dom");
|
|
5
|
-
;/* empty css */
|
|
6
|
-
;/* empty css */
|
|
7
|
-
const ContentTooltip = require("../Tooltip/ContentTooltip.js");
|
|
8
|
-
const TooltipWrapper = require("../Tooltip/TooltipWrapper.js");
|
|
9
|
-
function TruncatedTooltip({
|
|
10
|
-
text,
|
|
11
|
-
spanClassName,
|
|
12
|
-
wrapperStyle,
|
|
13
|
-
placement = "top",
|
|
14
|
-
getPopupContainer,
|
|
15
|
-
trailing
|
|
16
|
-
}) {
|
|
17
|
-
const [visible, setVisible] = react.useState(false);
|
|
18
|
-
const wrapperRef = react.useRef(null);
|
|
19
|
-
const spanRef = react.useRef(null);
|
|
20
|
-
const [anchorRect, setAnchorRect] = react.useState(null);
|
|
21
|
-
function handleMouseEnter() {
|
|
22
|
-
var _a;
|
|
23
|
-
const el = spanRef.current;
|
|
24
|
-
if (el && el.scrollWidth > el.offsetWidth) {
|
|
25
|
-
setAnchorRect(((_a = wrapperRef.current) == null ? void 0 : _a.getBoundingClientRect()) ?? null);
|
|
26
|
-
setVisible(true);
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(TooltipWrapper, { ref: wrapperRef, style: wrapperStyle, children: [
|
|
30
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
31
|
-
"span",
|
|
32
|
-
{
|
|
33
|
-
ref: spanRef,
|
|
34
|
-
className: spanClassName,
|
|
35
|
-
onMouseEnter: handleMouseEnter,
|
|
36
|
-
onMouseLeave: () => setVisible(false),
|
|
37
|
-
children: text
|
|
38
|
-
}
|
|
39
|
-
),
|
|
40
|
-
trailing,
|
|
41
|
-
visible && anchorRect && reactDom.createPortal(
|
|
42
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
43
|
-
"span",
|
|
44
|
-
{
|
|
45
|
-
style: {
|
|
46
|
-
position: "fixed",
|
|
47
|
-
top: anchorRect.top,
|
|
48
|
-
left: anchorRect.left,
|
|
49
|
-
width: anchorRect.width,
|
|
50
|
-
height: anchorRect.height,
|
|
51
|
-
display: "block",
|
|
52
|
-
pointerEvents: "none",
|
|
53
|
-
zIndex: 9999999999
|
|
54
|
-
},
|
|
55
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(ContentTooltip, { content: text, placement, className: "bu-category-dropdown__tooltip" })
|
|
56
|
-
}
|
|
57
|
-
),
|
|
58
|
-
(getPopupContainer == null ? void 0 : getPopupContainer()) ?? document.body
|
|
59
|
-
)
|
|
60
|
-
] });
|
|
61
|
-
}
|
|
62
|
-
function ChevronDown() {
|
|
63
|
-
return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.57345 8.828C5.41074 8.66528 5.41074 8.40152 5.57345 8.2388C5.73617 8.07608 5.99993 8.07608 6.16265 8.2388L10.0323 12.1084L13.8349 8.24124C13.9963 8.0772 14.26 8.07503 14.4241 8.23636C14.5881 8.39771 14.5903 8.66149 14.429 8.82555L10.5282 12.7924C10.2576 13.0675 9.81477 13.0694 9.54196 12.7966L5.57345 8.828Z", fill: "#333333" }) });
|
|
64
|
-
}
|
|
65
|
-
function ChevronRight() {
|
|
66
|
-
return (
|
|
67
|
-
// <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
68
|
-
// <path d="M6 3.5L10.5 8L6 12.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
69
|
-
// </svg>
|
|
70
|
-
/* @__PURE__ */ jsxRuntime.jsx("svg", { class: "icon", viewBox: "0 0 1024 1024", version: "1.1", xmlns: "http://www.w3.org/2000/svg", "p-id": "55697", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M451.854222 285.361778A21.333333 21.333333 0 1 0 421.688889 315.52l198.115555 198.122667-197.994666 194.702222a21.333333 21.333333 0 0 0 29.916444 30.414222l203.107556-199.722667a35.555556 35.555556 0 0 0 0.213333-50.488888L451.854222 285.354667z", "p-id": "55698" }) })
|
|
71
|
-
);
|
|
72
|
-
}
|
|
73
|
-
function buildColumns(data, value) {
|
|
74
|
-
var _a;
|
|
75
|
-
const cols = [data];
|
|
76
|
-
let current = data;
|
|
77
|
-
for (let i = 0; i < value.length; i++) {
|
|
78
|
-
const selected = current.find((item) => item.value === value[i]);
|
|
79
|
-
if ((_a = selected == null ? void 0 : selected.children) == null ? void 0 : _a.length) {
|
|
80
|
-
cols.push(selected.children);
|
|
81
|
-
current = selected.children;
|
|
82
|
-
} else {
|
|
83
|
-
break;
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
return cols;
|
|
87
|
-
}
|
|
88
|
-
function buildPath(data, value) {
|
|
89
|
-
const path = [];
|
|
90
|
-
let items = data;
|
|
91
|
-
for (const v of value) {
|
|
92
|
-
const found = items.find((x) => x.value === v);
|
|
93
|
-
if (!found) break;
|
|
94
|
-
path.push(found);
|
|
95
|
-
items = found.children ?? [];
|
|
96
|
-
}
|
|
97
|
-
return path;
|
|
98
|
-
}
|
|
99
|
-
function BuCategoryDropdown({
|
|
100
|
-
data,
|
|
101
|
-
value = [],
|
|
102
|
-
onChange,
|
|
103
|
-
placeholder = "请选择分类",
|
|
104
|
-
disabled = false,
|
|
105
|
-
maxVisible = 6,
|
|
106
|
-
className,
|
|
107
|
-
style,
|
|
108
|
-
getPopupContainer,
|
|
109
|
-
dropdownStyle: customDropdownStyle
|
|
110
|
-
}) {
|
|
111
|
-
const [open, setOpen] = react.useState(false);
|
|
112
|
-
const [navValue, setNavValue] = react.useState(value);
|
|
113
|
-
const rootRef = react.useRef(null);
|
|
114
|
-
const dropdownRef = react.useRef(null);
|
|
115
|
-
const panelRef = react.useRef(null);
|
|
116
|
-
const wasOpenRef = react.useRef(false);
|
|
117
|
-
const [dropdownStyle, setDropdownStyle] = react.useState({});
|
|
118
|
-
const [colWidth, setColWidth] = react.useState();
|
|
119
|
-
const updatePosition = react.useCallback(() => {
|
|
120
|
-
var _a;
|
|
121
|
-
if (!rootRef.current) return;
|
|
122
|
-
const rect = rootRef.current.getBoundingClientRect();
|
|
123
|
-
let maxZ = 0;
|
|
124
|
-
let el = rootRef.current.parentElement;
|
|
125
|
-
while (el && el !== document.documentElement) {
|
|
126
|
-
const selfZ = parseInt(window.getComputedStyle(el).zIndex, 10);
|
|
127
|
-
if (!isNaN(selfZ) && selfZ > maxZ) maxZ = selfZ;
|
|
128
|
-
if (el.parentElement) {
|
|
129
|
-
for (const sibling of el.parentElement.children) {
|
|
130
|
-
if (sibling === el || !(sibling instanceof HTMLElement)) continue;
|
|
131
|
-
const sibZ = parseInt(window.getComputedStyle(sibling).zIndex, 10);
|
|
132
|
-
if (!isNaN(sibZ) && sibZ > maxZ) maxZ = sibZ;
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
|
-
el = el.parentElement;
|
|
136
|
-
}
|
|
137
|
-
const panelHeight = ((_a = panelRef.current) == null ? void 0 : _a.offsetHeight) ?? 0;
|
|
138
|
-
const spaceBelow = window.innerHeight - rect.bottom;
|
|
139
|
-
const spaceAbove = rect.top;
|
|
140
|
-
const flipToTop = panelHeight > 0 && spaceBelow < panelHeight + 4 && spaceAbove > spaceBelow;
|
|
141
|
-
setDropdownStyle({
|
|
142
|
-
position: "fixed",
|
|
143
|
-
top: flipToTop ? rect.top - panelHeight - 4 : rect.bottom + 4,
|
|
144
|
-
left: rect.left,
|
|
145
|
-
zIndex: maxZ > 0 ? maxZ + 10 : 1100,
|
|
146
|
-
...customDropdownStyle
|
|
147
|
-
});
|
|
148
|
-
}, [customDropdownStyle]);
|
|
149
|
-
react.useLayoutEffect(() => {
|
|
150
|
-
if (open) {
|
|
151
|
-
updatePosition();
|
|
152
|
-
}
|
|
153
|
-
}, [open, navValue, updatePosition]);
|
|
154
|
-
react.useLayoutEffect(() => {
|
|
155
|
-
const justOpened = open && !wasOpenRef.current;
|
|
156
|
-
wasOpenRef.current = open;
|
|
157
|
-
if (!open || !panelRef.current) return;
|
|
158
|
-
const cols = panelRef.current.querySelectorAll(".bu-category-dropdown__col");
|
|
159
|
-
cols.forEach((col) => {
|
|
160
|
-
col.style.width = "";
|
|
161
|
-
});
|
|
162
|
-
let max = 0;
|
|
163
|
-
cols.forEach((col) => {
|
|
164
|
-
if (col.offsetWidth > max) max = col.offsetWidth;
|
|
165
|
-
});
|
|
166
|
-
const next = justOpened ? max : Math.max(colWidth ?? 0, max);
|
|
167
|
-
cols.forEach((col) => {
|
|
168
|
-
col.style.width = next ? `${next}px` : "";
|
|
169
|
-
});
|
|
170
|
-
if (next !== colWidth) setColWidth(next || void 0);
|
|
171
|
-
}, [open, navValue]);
|
|
172
|
-
react.useEffect(() => {
|
|
173
|
-
if (!open) return;
|
|
174
|
-
function handleClickOutside(e) {
|
|
175
|
-
var _a, _b;
|
|
176
|
-
const target = e.target;
|
|
177
|
-
if (((_a = rootRef.current) == null ? void 0 : _a.contains(target)) || ((_b = dropdownRef.current) == null ? void 0 : _b.contains(target))) {
|
|
178
|
-
return;
|
|
179
|
-
}
|
|
180
|
-
setOpen(false);
|
|
181
|
-
}
|
|
182
|
-
function handleScroll() {
|
|
183
|
-
setOpen(false);
|
|
184
|
-
}
|
|
185
|
-
document.addEventListener("mousedown", handleClickOutside);
|
|
186
|
-
document.addEventListener("scroll", handleScroll, true);
|
|
187
|
-
window.addEventListener("resize", updatePosition);
|
|
188
|
-
return () => {
|
|
189
|
-
document.removeEventListener("mousedown", handleClickOutside);
|
|
190
|
-
document.removeEventListener("scroll", handleScroll, true);
|
|
191
|
-
window.removeEventListener("resize", updatePosition);
|
|
192
|
-
};
|
|
193
|
-
}, [open, updatePosition]);
|
|
194
|
-
const path = buildPath(data, value);
|
|
195
|
-
const hasValue = path.length > 0;
|
|
196
|
-
const triggerLabel = hasValue ? path.map((item) => item.label).join(" / ") : null;
|
|
197
|
-
const columns = buildColumns(data, navValue);
|
|
198
|
-
function handleSelect(colIndex, item) {
|
|
199
|
-
var _a;
|
|
200
|
-
if (item.disabled) return;
|
|
201
|
-
const newNavValue = navValue.slice(0, colIndex + 1);
|
|
202
|
-
newNavValue[colIndex] = item.value;
|
|
203
|
-
setNavValue(newNavValue);
|
|
204
|
-
if (!((_a = item.children) == null ? void 0 : _a.length)) {
|
|
205
|
-
const newPath = buildPath(data, newNavValue);
|
|
206
|
-
onChange == null ? void 0 : onChange(newNavValue, newPath);
|
|
207
|
-
setOpen(false);
|
|
208
|
-
}
|
|
209
|
-
}
|
|
210
|
-
function handleOpen() {
|
|
211
|
-
setNavValue(value);
|
|
212
|
-
setOpen(true);
|
|
213
|
-
}
|
|
214
|
-
const triggerClass = [
|
|
215
|
-
"bu-category-dropdown__trigger",
|
|
216
|
-
open ? "bu-category-dropdown__trigger--open" : "",
|
|
217
|
-
hasValue ? "bu-category-dropdown__trigger--has-value" : ""
|
|
218
|
-
].filter(Boolean).join(" ");
|
|
219
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
220
|
-
"div",
|
|
221
|
-
{
|
|
222
|
-
ref: rootRef,
|
|
223
|
-
className: `bu-category-dropdown${className ? ` ${className}` : ""}`,
|
|
224
|
-
style,
|
|
225
|
-
children: [
|
|
226
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
227
|
-
"button",
|
|
228
|
-
{
|
|
229
|
-
type: "button",
|
|
230
|
-
className: triggerClass,
|
|
231
|
-
disabled,
|
|
232
|
-
onClick: () => open ? setOpen(false) : handleOpen(),
|
|
233
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
234
|
-
TruncatedTooltip,
|
|
235
|
-
{
|
|
236
|
-
text: triggerLabel ?? placeholder,
|
|
237
|
-
spanClassName: `bu-category-dropdown__trigger-label${!hasValue ? " bu-category-dropdown__trigger-label--placeholder" : ""}`,
|
|
238
|
-
wrapperStyle: { flex: 1, minWidth: 0, display: "flex", alignItems: "center", gap: 8 },
|
|
239
|
-
getPopupContainer,
|
|
240
|
-
trailing: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `bu-category-dropdown__trigger-chevron${open ? " bu-category-dropdown__trigger-chevron--open" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {}) })
|
|
241
|
-
}
|
|
242
|
-
)
|
|
243
|
-
}
|
|
244
|
-
),
|
|
245
|
-
open && reactDom.createPortal(
|
|
246
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { ref: dropdownRef, style: dropdownStyle, className: "bu-category-dropdown__portal", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bu-category-dropdown__panel", ref: panelRef, children: columns.map((col, colIndex) => {
|
|
247
|
-
const isScrollable = col.length > maxVisible;
|
|
248
|
-
const isLast = colIndex === columns.length - 1;
|
|
249
|
-
const colClass = [
|
|
250
|
-
"bu-category-dropdown__col",
|
|
251
|
-
colIndex > 0 ? "bu-category-dropdown__col--indent" : "",
|
|
252
|
-
isScrollable ? "bu-category-dropdown__col--scrollable" : "",
|
|
253
|
-
isLast && colIndex > 0 ? "bu-category-dropdown__col--last" : ""
|
|
254
|
-
].filter(Boolean).join(" ");
|
|
255
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "contents" }, children: [
|
|
256
|
-
colIndex > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bu-category-dropdown__divider" }),
|
|
257
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
258
|
-
"div",
|
|
259
|
-
{
|
|
260
|
-
className: colClass,
|
|
261
|
-
style: colWidth ? { width: colWidth } : void 0,
|
|
262
|
-
onMouseEnter: isScrollable ? (e) => e.currentTarget.classList.add("bu-category-dropdown__col--scrollbar-visible") : void 0,
|
|
263
|
-
onMouseLeave: isScrollable ? (e) => e.currentTarget.classList.remove("bu-category-dropdown__col--scrollbar-visible") : void 0,
|
|
264
|
-
children: col.map((item) => {
|
|
265
|
-
var _a;
|
|
266
|
-
const isSelected = navValue[colIndex] === item.value;
|
|
267
|
-
const hasBranch = !!((_a = item.children) == null ? void 0 : _a.length);
|
|
268
|
-
const itemClass = [
|
|
269
|
-
"bu-category-dropdown__item",
|
|
270
|
-
isSelected && hasBranch ? "bu-category-dropdown__item--selected-branch" : "",
|
|
271
|
-
isSelected && !hasBranch ? "bu-category-dropdown__item--selected-leaf" : "",
|
|
272
|
-
item.disabled ? "bu-category-dropdown__item--disabled" : ""
|
|
273
|
-
].filter(Boolean).join(" ");
|
|
274
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
275
|
-
"button",
|
|
276
|
-
{
|
|
277
|
-
type: "button",
|
|
278
|
-
className: itemClass,
|
|
279
|
-
disabled: item.disabled,
|
|
280
|
-
onClick: () => handleSelect(colIndex, item),
|
|
281
|
-
children: [
|
|
282
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
283
|
-
TruncatedTooltip,
|
|
284
|
-
{
|
|
285
|
-
text: item.label,
|
|
286
|
-
spanClassName: "bu-category-dropdown__item-label",
|
|
287
|
-
wrapperStyle: { flex: 1, minWidth: 0, display: "block" },
|
|
288
|
-
getPopupContainer
|
|
289
|
-
}
|
|
290
|
-
),
|
|
291
|
-
hasBranch && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bu-category-dropdown__item-arrow", children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight, {}) })
|
|
292
|
-
]
|
|
293
|
-
},
|
|
294
|
-
item.value
|
|
295
|
-
);
|
|
296
|
-
})
|
|
297
|
-
}
|
|
298
|
-
)
|
|
299
|
-
] }, colIndex);
|
|
300
|
-
}) }) }),
|
|
301
|
-
document.body
|
|
302
|
-
)
|
|
303
|
-
]
|
|
304
|
-
}
|
|
305
|
-
);
|
|
306
|
-
}
|
|
307
|
-
module.exports = BuCategoryDropdown;
|
|
1
|
+
"use strict";const n=require("react/jsx-runtime"),i=require("react"),V=require("react-dom");;/* empty css */;/* empty css */const I=require("../Tooltip/ContentTooltip.js"),J=require("../Tooltip/TooltipWrapper.js");function z({text:d,spanClassName:p,wrapperStyle:u,placement:g="top",getPopupContainer:h,trailing:f}){const[a,y]=i.useState(!1),j=i.useRef(null),E=i.useRef(null),[o,b]=i.useState(null);function m(){var w;const _=E.current;_&&_.scrollWidth>_.offsetWidth&&(b(((w=j.current)==null?void 0:w.getBoundingClientRect())??null),y(!0))}return n.jsxs(J,{ref:j,style:u,children:[n.jsx("span",{ref:E,className:p,onMouseEnter:m,onMouseLeave:()=>y(!1),children:d}),f,a&&o&&V.createPortal(n.jsx("span",{style:{position:"fixed",top:o.top,left:o.left,width:o.width,height:o.height,display:"block",pointerEvents:"none",zIndex:9999999999},children:n.jsx(I,{content:d,placement:g,className:"bu-category-dropdown__tooltip"})}),(h==null?void 0:h())??document.body)]})}function K(){return n.jsx("svg",{viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:n.jsx("path",{d:"M5.57345 8.828C5.41074 8.66528 5.41074 8.40152 5.57345 8.2388C5.73617 8.07608 5.99993 8.07608 6.16265 8.2388L10.0323 12.1084L13.8349 8.24124C13.9963 8.0772 14.26 8.07503 14.4241 8.23636C14.5881 8.39771 14.5903 8.66149 14.429 8.82555L10.5282 12.7924C10.2576 13.0675 9.81477 13.0694 9.54196 12.7966L5.57345 8.828Z",fill:"#333333"})})}function P(){return n.jsx("svg",{class:"icon",viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","p-id":"55697",children:n.jsx("path",{d:"M451.854222 285.361778A21.333333 21.333333 0 1 0 421.688889 315.52l198.115555 198.122667-197.994666 194.702222a21.333333 21.333333 0 0 0 29.916444 30.414222l203.107556-199.722667a35.555556 35.555556 0 0 0 0.213333-50.488888L451.854222 285.354667z","p-id":"55698"})})}function Q(d,p){var h;const u=[d];let g=d;for(let f=0;f<p.length;f++){const a=g.find(y=>y.value===p[f]);if((h=a==null?void 0:a.children)!=null&&h.length)u.push(a.children),g=a.children;else break}return u}function O(d,p){const u=[];let g=d;for(const h of p){const f=g.find(a=>a.value===h);if(!f)break;u.push(f),g=f.children??[]}return u}function U({data:d,value:p=[],onChange:u,placeholder:g="请选择分类",disabled:h=!1,maxVisible:f=6,className:a,style:y,getPopupContainer:j,dropdownStyle:E}){const[o,b]=i.useState(!1),[m,_]=i.useState(p),w=i.useRef(null),T=i.useRef(null),R=i.useRef(null),W=i.useRef(!1),[$,A]=i.useState({}),[S,H]=i.useState(),L=i.useCallback(()=>{var v;if(!w.current)return;const r=w.current.getBoundingClientRect();let e=0,t=w.current.parentElement;for(;t&&t!==document.documentElement;){const N=parseInt(window.getComputedStyle(t).zIndex,10);if(!isNaN(N)&&N>e&&(e=N),t.parentElement)for(const x of t.parentElement.children){if(x===t||!(x instanceof HTMLElement))continue;const M=parseInt(window.getComputedStyle(x).zIndex,10);!isNaN(M)&&M>e&&(e=M)}t=t.parentElement}const s=((v=R.current)==null?void 0:v.offsetHeight)??0,l=window.innerHeight-r.bottom,c=r.top,C=s>0&&l<s+4&&c>l;A({position:"fixed",top:C?r.top-s-4:r.bottom+4,left:r.left,zIndex:e>0?e+10:1100,...E})},[E]);i.useLayoutEffect(()=>{o&&L()},[o,m,L]),i.useLayoutEffect(()=>{const r=o&&!W.current;if(W.current=o,!o||!R.current)return;const e=R.current.querySelectorAll(".bu-category-dropdown__col");e.forEach(l=>{l.style.width=""});let t=0;e.forEach(l=>{l.offsetWidth>t&&(t=l.offsetWidth)});const s=r?t:Math.max(S??0,t);e.forEach(l=>{l.style.width=s?`${s}px`:""}),s!==S&&H(s||void 0)},[o,m]),i.useEffect(()=>{if(!o)return;function r(t){var l,c;const s=t.target;(l=w.current)!=null&&l.contains(s)||(c=T.current)!=null&&c.contains(s)||b(!1)}function e(){b(!1)}return document.addEventListener("mousedown",r),document.addEventListener("scroll",e,!0),window.addEventListener("resize",L),()=>{document.removeEventListener("mousedown",r),document.removeEventListener("scroll",e,!0),window.removeEventListener("resize",L)}},[o,L]);const k=O(d,p),B=k.length>0,Z=B?k.map(r=>r.label).join(" / "):null,q=Q(d,m);function D(r,e){var s;if(e.disabled)return;const t=m.slice(0,r+1);if(t[r]=e.value,_(t),!((s=e.children)!=null&&s.length)){const l=O(d,t);u==null||u(t,l),b(!1)}}function F(){_(p),b(!0)}const G=["bu-category-dropdown__trigger",o?"bu-category-dropdown__trigger--open":"",B?"bu-category-dropdown__trigger--has-value":""].filter(Boolean).join(" ");return n.jsxs("div",{ref:w,className:`bu-category-dropdown${a?` ${a}`:""}`,style:y,children:[n.jsx("button",{type:"button",className:G,disabled:h,onClick:()=>o?b(!1):F(),children:n.jsx(z,{text:Z??g,spanClassName:`bu-category-dropdown__trigger-label${B?"":" bu-category-dropdown__trigger-label--placeholder"}`,wrapperStyle:{flex:1,minWidth:0,display:"flex",alignItems:"center",gap:8},getPopupContainer:j,trailing:n.jsx("span",{className:`bu-category-dropdown__trigger-chevron${o?" bu-category-dropdown__trigger-chevron--open":""}`,children:n.jsx(K,{})})})}),o&&V.createPortal(n.jsx("div",{ref:T,style:$,className:"bu-category-dropdown__portal",children:n.jsx("div",{className:"bu-category-dropdown__panel",ref:R,children:q.map((r,e)=>{const t=r.length>f,s=e===q.length-1,l=["bu-category-dropdown__col",e>0?"bu-category-dropdown__col--indent":"",t?"bu-category-dropdown__col--scrollable":"",s&&e>0?"bu-category-dropdown__col--last":""].filter(Boolean).join(" ");return n.jsxs("div",{style:{display:"contents"},children:[e>0&&n.jsx("div",{className:"bu-category-dropdown__divider"}),n.jsx("div",{className:l,style:S?{width:S}:void 0,onMouseEnter:t?c=>c.currentTarget.classList.add("bu-category-dropdown__col--scrollbar-visible"):void 0,onMouseLeave:t?c=>c.currentTarget.classList.remove("bu-category-dropdown__col--scrollbar-visible"):void 0,children:r.map(c=>{var x;const C=m[e]===c.value,v=!!((x=c.children)!=null&&x.length),N=["bu-category-dropdown__item",C&&v?"bu-category-dropdown__item--selected-branch":"",C&&!v?"bu-category-dropdown__item--selected-leaf":"",c.disabled?"bu-category-dropdown__item--disabled":""].filter(Boolean).join(" ");return n.jsxs("button",{type:"button",className:N,disabled:c.disabled,onClick:()=>D(e,c),children:[n.jsx(z,{text:c.label,spanClassName:"bu-category-dropdown__item-label",wrapperStyle:{flex:1,minWidth:0,display:"block"},getPopupContainer:j}),v&&n.jsx("span",{className:"bu-category-dropdown__item-arrow",children:n.jsx(P,{})})]},c.value)})})]},e)})})}),document.body)]})}module.exports=U;
|