@sia.soul/sia-react-ui 0.1.77 → 0.1.78
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/chart.js +2 -3
- package/dist/{chunk-Q4FDV6KP.js → chunk-BDS42FR3.js} +2 -4
- package/dist/{chunk-JNZXYBGM.js → chunk-GODBVCIQ.js} +2 -2
- package/dist/chunk-JZWTTSOZ.js +131 -0
- package/dist/{chunk-QDZXP2UO.js → chunk-NK2FZWKM.js} +8 -10
- package/dist/{chunk-TKCXP6RZ.js → chunk-WXERMWTW.js} +113 -436
- package/dist/{chunk-YMOOL62S.js → chunk-XHLIIDD2.js} +407 -21
- package/dist/{chunk-K5OU5NOT.js → chunk-Y4Y2NVBM.js} +2 -2
- package/dist/{core-CBLT4Vfl.d.ts → core-0ml74Q-C.d.ts} +7 -0
- package/dist/{core-Bx07vzrr.d.cts → core-vGTHkzIa.d.cts} +7 -0
- package/dist/core.cjs +336 -275
- package/dist/core.css +19 -0
- package/dist/core.d.cts +1 -1
- package/dist/core.d.ts +1 -1
- package/dist/core.js +5 -6
- package/dist/index.cjs +1006 -943
- package/dist/index.css +19 -0
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +13 -15
- package/dist/rich-text-editor.cjs +522 -74
- package/dist/rich-text-editor.js +3 -3
- package/dist/select-date-range.cjs +305 -178
- package/dist/select-date-range.js +4 -4
- package/package.json +1 -1
- package/dist/chunk-IKAMZNCK.js +0 -65
- package/dist/chunk-SMCYEPBL.js +0 -73
package/dist/core.cjs
CHANGED
|
@@ -3208,7 +3208,7 @@ function useFloatingPlaceholder({ mode, placeholder, filled, active = false }) {
|
|
|
3208
3208
|
}
|
|
3209
3209
|
|
|
3210
3210
|
// src/components/Select.tsx
|
|
3211
|
-
var
|
|
3211
|
+
var import_react24 = require("react");
|
|
3212
3212
|
|
|
3213
3213
|
// src/components/Modal.tsx
|
|
3214
3214
|
var import_react19 = require("react");
|
|
@@ -3451,9 +3451,75 @@ var Modal2 = Object.assign(ModalRoot, {
|
|
|
3451
3451
|
});
|
|
3452
3452
|
|
|
3453
3453
|
// src/components/Input.tsx
|
|
3454
|
+
var import_react21 = require("react");
|
|
3455
|
+
|
|
3456
|
+
// src/components/TextArea.tsx
|
|
3454
3457
|
var import_react20 = require("react");
|
|
3455
3458
|
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
3456
|
-
var
|
|
3459
|
+
var TextArea = (0, import_react20.forwardRef)(function TextArea2({
|
|
3460
|
+
label,
|
|
3461
|
+
hint,
|
|
3462
|
+
status = "default",
|
|
3463
|
+
size: sizeProp,
|
|
3464
|
+
showCount = false,
|
|
3465
|
+
placeholder,
|
|
3466
|
+
placeholderMode,
|
|
3467
|
+
className = "",
|
|
3468
|
+
id,
|
|
3469
|
+
disabled,
|
|
3470
|
+
value,
|
|
3471
|
+
defaultValue,
|
|
3472
|
+
maxLength,
|
|
3473
|
+
onChange,
|
|
3474
|
+
...props
|
|
3475
|
+
}, ref) {
|
|
3476
|
+
const size = useControlSize(sizeProp);
|
|
3477
|
+
const fallbackId = (0, import_react20.useId)();
|
|
3478
|
+
const textAreaId = id ?? fallbackId;
|
|
3479
|
+
const [uncontrolledValue, setUncontrolledValue] = (0, import_react20.useState)(() => defaultValue === void 0 ? "" : String(defaultValue));
|
|
3480
|
+
const currentText = value !== void 0 ? String(value) : uncontrolledValue;
|
|
3481
|
+
const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: currentText.length > 0 });
|
|
3482
|
+
const hintId = `${textAreaId}-hint`;
|
|
3483
|
+
const describedBy = [props["aria-describedby"], hint ? hintId : null].filter(Boolean).join(" ") || void 0;
|
|
3484
|
+
function handleChange(event) {
|
|
3485
|
+
setUncontrolledValue(event.target.value);
|
|
3486
|
+
onChange?.(event);
|
|
3487
|
+
}
|
|
3488
|
+
const control = /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: `sia-textarea-control sia-textarea-control--${size} sia-textarea-control--${status}${floating.className}${disabled ? " is-disabled" : ""}`, children: [
|
|
3489
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3490
|
+
"textarea",
|
|
3491
|
+
{
|
|
3492
|
+
...withTitleTooltip(props),
|
|
3493
|
+
ref,
|
|
3494
|
+
id: textAreaId,
|
|
3495
|
+
className: "sia-textarea",
|
|
3496
|
+
disabled,
|
|
3497
|
+
value,
|
|
3498
|
+
defaultValue,
|
|
3499
|
+
maxLength,
|
|
3500
|
+
placeholder,
|
|
3501
|
+
"aria-describedby": describedBy,
|
|
3502
|
+
"aria-invalid": status === "error" || void 0,
|
|
3503
|
+
onChange: handleChange
|
|
3504
|
+
}
|
|
3505
|
+
),
|
|
3506
|
+
floating.label,
|
|
3507
|
+
showCount ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: `sia-textarea-control__count${maxLength !== void 0 && currentText.length >= maxLength ? " is-limit" : ""}`, "aria-live": "polite", children: [
|
|
3508
|
+
currentText.length,
|
|
3509
|
+
maxLength !== void 0 ? `/${maxLength}` : null
|
|
3510
|
+
] }) : null
|
|
3511
|
+
] });
|
|
3512
|
+
if (!label && !hint) return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: `sia-field ${className}`.trim(), children: control });
|
|
3513
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: `sia-field ${className}`.trim(), children: [
|
|
3514
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { className: "sia-field__label", htmlFor: textAreaId, children: label }) : null,
|
|
3515
|
+
control,
|
|
3516
|
+
hint ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { id: hintId, className: `sia-field__hint sia-field__hint--${status}`, children: hint }) : null
|
|
3517
|
+
] });
|
|
3518
|
+
});
|
|
3519
|
+
|
|
3520
|
+
// src/components/Input.tsx
|
|
3521
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
3522
|
+
var Input = (0, import_react21.forwardRef)(function Input2({
|
|
3457
3523
|
label,
|
|
3458
3524
|
hint,
|
|
3459
3525
|
status = "default",
|
|
@@ -3472,15 +3538,18 @@ var Input = (0, import_react20.forwardRef)(function Input2({
|
|
|
3472
3538
|
defaultValue,
|
|
3473
3539
|
maxLength,
|
|
3474
3540
|
onChange,
|
|
3541
|
+
expandable = false,
|
|
3475
3542
|
...props
|
|
3476
3543
|
}, forwardedRef) {
|
|
3477
3544
|
const size = useControlSize(sizeProp);
|
|
3478
|
-
const fallbackId = (0,
|
|
3545
|
+
const fallbackId = (0, import_react21.useId)();
|
|
3479
3546
|
const inputId = id ?? fallbackId;
|
|
3480
|
-
const localRef = (0,
|
|
3481
|
-
const [uncontrolledValue, setUncontrolledValue] = (0,
|
|
3547
|
+
const localRef = (0, import_react21.useRef)(null);
|
|
3548
|
+
const [uncontrolledValue, setUncontrolledValue] = (0, import_react21.useState)(() => defaultValue === void 0 ? "" : String(defaultValue));
|
|
3482
3549
|
const currentText = value !== void 0 ? String(value) : uncontrolledValue;
|
|
3483
3550
|
const hasValue = currentText.length > 0;
|
|
3551
|
+
const [expanded, setExpanded] = (0, import_react21.useState)(false);
|
|
3552
|
+
const [expandedDraft, setExpandedDraft] = (0, import_react21.useState)("");
|
|
3484
3553
|
const floatingPlaceholder = usePlaceholderMode(placeholderMode) === "floating" && Boolean(placeholder);
|
|
3485
3554
|
const hintId = `${inputId}-hint`;
|
|
3486
3555
|
const describedBy = [props["aria-describedby"], hint ? hintId : null].filter(Boolean).join(" ") || void 0;
|
|
@@ -3516,7 +3585,7 @@ var Input = (0, import_react20.forwardRef)(function Input2({
|
|
|
3516
3585
|
event.preventDefault();
|
|
3517
3586
|
localRef.current?.focus({ preventScroll: true });
|
|
3518
3587
|
}
|
|
3519
|
-
const input = /* @__PURE__ */ (0,
|
|
3588
|
+
const input = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
3520
3589
|
"input",
|
|
3521
3590
|
{
|
|
3522
3591
|
...withTitleTooltip(props),
|
|
@@ -3533,30 +3602,88 @@ var Input = (0, import_react20.forwardRef)(function Input2({
|
|
|
3533
3602
|
onChange: handleChange
|
|
3534
3603
|
}
|
|
3535
3604
|
);
|
|
3536
|
-
const control = /* @__PURE__ */ (0,
|
|
3537
|
-
prefix ? /* @__PURE__ */ (0,
|
|
3538
|
-
floatingPlaceholder ? /* @__PURE__ */ (0,
|
|
3605
|
+
const control = /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { onMouseDown: handleControlMouseDown, className: `sia-input-control sia-input-control--${size} sia-input-control--${status}${floatingPlaceholder ? " sia-input-control--floating" : ""}${floatingPlaceholder && hasValue ? " is-filled" : ""}${disabled ? " is-disabled" : ""}`, children: [
|
|
3606
|
+
prefix ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "sia-input-control__affix", children: prefix }) : null,
|
|
3607
|
+
floatingPlaceholder ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "sia-input-control__input-wrap", children: [
|
|
3539
3608
|
input,
|
|
3540
|
-
/* @__PURE__ */ (0,
|
|
3609
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "sia-input-control__floating-placeholder", "aria-hidden": "true", children: placeholder })
|
|
3541
3610
|
] }) : input,
|
|
3542
|
-
allowClear && hasValue && !disabled ? /* @__PURE__ */ (0,
|
|
3543
|
-
suffix ? /* @__PURE__ */ (0,
|
|
3544
|
-
|
|
3611
|
+
allowClear && hasValue && !disabled ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { className: "sia-input-control__clear", type: "button", "aria-label": "\u6E05\u7A7A\u8F93\u5165", onClick: clearValue, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
|
|
3612
|
+
suffix ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "sia-input-control__affix", children: suffix }) : null,
|
|
3613
|
+
expandable && !disabled && !props.readOnly && (!props.type || props.type === "text") ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
3614
|
+
"button",
|
|
3615
|
+
{
|
|
3616
|
+
type: "button",
|
|
3617
|
+
className: "sia-input-control__expand",
|
|
3618
|
+
"aria-label": "\u5C55\u5F00\u7F16\u8F91",
|
|
3619
|
+
title: "\u5C55\u5F00\u7F16\u8F91",
|
|
3620
|
+
onClick: () => {
|
|
3621
|
+
if (localRef.current?.matches(":disabled")) return;
|
|
3622
|
+
setExpandedDraft(currentText);
|
|
3623
|
+
setExpanded(true);
|
|
3624
|
+
},
|
|
3625
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "expand", size: 15 })
|
|
3626
|
+
}
|
|
3627
|
+
) : null,
|
|
3628
|
+
showCount ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: `sia-input-control__count${maxLength !== void 0 && currentText.length >= maxLength ? " is-limit" : ""}`, "aria-live": "polite", children: [
|
|
3545
3629
|
currentText.length,
|
|
3546
3630
|
maxLength !== void 0 ? `/${maxLength}` : null
|
|
3547
3631
|
] }) : null
|
|
3548
3632
|
] });
|
|
3549
|
-
|
|
3550
|
-
|
|
3551
|
-
|
|
3552
|
-
|
|
3553
|
-
|
|
3633
|
+
const editor = expandable ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
3634
|
+
Modal2,
|
|
3635
|
+
{
|
|
3636
|
+
open: expanded,
|
|
3637
|
+
title: "\u5C55\u5F00\u7F16\u8F91",
|
|
3638
|
+
okText: "\u786E\u5B9A",
|
|
3639
|
+
cancelText: "\u53D6\u6D88",
|
|
3640
|
+
onCancel: () => setExpanded(false),
|
|
3641
|
+
afterOpenChange: (open) => {
|
|
3642
|
+
if (!open) setExpandedDraft("");
|
|
3643
|
+
},
|
|
3644
|
+
onOk: () => {
|
|
3645
|
+
const target = localRef.current;
|
|
3646
|
+
if (!target || target.matches(":disabled") || props.readOnly) return false;
|
|
3647
|
+
const normalized = expandedDraft.replace(/\r\n|[\r\n]/g, " ");
|
|
3648
|
+
const next = maxLength !== void 0 && maxLength >= 0 ? normalized.slice(0, maxLength) : normalized;
|
|
3649
|
+
Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set?.call(target, next);
|
|
3650
|
+
target.dispatchEvent(new Event("input", { bubbles: true }));
|
|
3651
|
+
setUncontrolledValue(next);
|
|
3652
|
+
setExpanded(false);
|
|
3653
|
+
},
|
|
3654
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
3655
|
+
TextArea,
|
|
3656
|
+
{
|
|
3657
|
+
"aria-label": "\u5C55\u5F00\u7F16\u8F91\u5185\u5BB9",
|
|
3658
|
+
value: expandedDraft,
|
|
3659
|
+
onChange: (event) => setExpandedDraft(event.target.value),
|
|
3660
|
+
maxLength,
|
|
3661
|
+
showCount,
|
|
3662
|
+
placeholder,
|
|
3663
|
+
rows: 8,
|
|
3664
|
+
disabled,
|
|
3665
|
+
readOnly: props.readOnly
|
|
3666
|
+
}
|
|
3667
|
+
)
|
|
3668
|
+
}
|
|
3669
|
+
) : null;
|
|
3670
|
+
if (!label && !hint) return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
|
|
3671
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: `sia-field ${className}`.trim(), children: control }),
|
|
3672
|
+
editor
|
|
3673
|
+
] });
|
|
3674
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
|
|
3675
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: `sia-field ${className}`.trim(), children: [
|
|
3676
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { className: "sia-field__label", htmlFor: inputId, children: label }) : null,
|
|
3677
|
+
control,
|
|
3678
|
+
hint ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { id: hintId, className: `sia-field__hint sia-field__hint--${status}`, children: hint }) : null
|
|
3679
|
+
] }),
|
|
3680
|
+
editor
|
|
3554
3681
|
] });
|
|
3555
3682
|
});
|
|
3556
3683
|
|
|
3557
3684
|
// src/components/SelectionPanel.tsx
|
|
3558
|
-
var
|
|
3559
|
-
var
|
|
3685
|
+
var import_react22 = require("react");
|
|
3686
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
3560
3687
|
function SelectionPanel({
|
|
3561
3688
|
options,
|
|
3562
3689
|
value,
|
|
@@ -3577,26 +3704,26 @@ function SelectionPanel({
|
|
|
3577
3704
|
maxHeight = 250,
|
|
3578
3705
|
autoFocusSearch = false
|
|
3579
3706
|
}) {
|
|
3580
|
-
const [localSearch, setLocalSearch] = (0,
|
|
3707
|
+
const [localSearch, setLocalSearch] = (0, import_react22.useState)("");
|
|
3581
3708
|
const search = searchValue ?? localSearch;
|
|
3582
|
-
const [scrollTop, setScrollTop] = (0,
|
|
3583
|
-
const [active, setActive] = (0,
|
|
3584
|
-
const [keyboardActive, setKeyboardActive] = (0,
|
|
3585
|
-
const [deselectedHover, setDeselectedHover] = (0,
|
|
3586
|
-
const listRef = (0,
|
|
3587
|
-
const id = (0,
|
|
3588
|
-
const selected = (0,
|
|
3709
|
+
const [scrollTop, setScrollTop] = (0, import_react22.useState)(0);
|
|
3710
|
+
const [active, setActive] = (0, import_react22.useState)();
|
|
3711
|
+
const [keyboardActive, setKeyboardActive] = (0, import_react22.useState)(false);
|
|
3712
|
+
const [deselectedHover, setDeselectedHover] = (0, import_react22.useState)();
|
|
3713
|
+
const listRef = (0, import_react22.useRef)(null);
|
|
3714
|
+
const id = (0, import_react22.useId)();
|
|
3715
|
+
const selected = (0, import_react22.useMemo)(() => new Set(value), [value]);
|
|
3589
3716
|
const count = Math.max(1, Math.floor(columns));
|
|
3590
|
-
const allOptions = (0,
|
|
3717
|
+
const allOptions = (0, import_react22.useMemo)(() => {
|
|
3591
3718
|
if (!includeUnknownValues) return [...options];
|
|
3592
3719
|
const known = new Set(options.filter((option) => option.optionType !== "divider").map((option) => option.value));
|
|
3593
3720
|
return [...value.filter((item) => !known.has(item)).map((item) => ({ value: item, label: String(item), group: "\u81EA\u5B9A\u4E49\u503C" })), ...options];
|
|
3594
3721
|
}, [options, value, includeUnknownValues]);
|
|
3595
|
-
const filtered = (0,
|
|
3722
|
+
const filtered = (0, import_react22.useMemo)(
|
|
3596
3723
|
() => allOptions.filter((option) => (!selectedOnly || selected.has(option.value)) && (!search || option.optionType !== "divider" && [option.label, option.value].some((text) => String(text ?? "").toLowerCase().includes(search.toLowerCase())))),
|
|
3597
3724
|
[allOptions, selectedOnly, selected, search]
|
|
3598
3725
|
);
|
|
3599
|
-
const rows = (0,
|
|
3726
|
+
const rows = (0, import_react22.useMemo)(() => {
|
|
3600
3727
|
const groups = /* @__PURE__ */ new Map();
|
|
3601
3728
|
filtered.forEach((option) => {
|
|
3602
3729
|
const items = groups.get(option.group) ?? [];
|
|
@@ -3622,7 +3749,7 @@ function SelectionPanel({
|
|
|
3622
3749
|
const virtual = filtered.length > 100;
|
|
3623
3750
|
const renderedRows = virtual ? rows.filter((row) => row.top + row.height >= scrollTop - 100 && row.top <= scrollTop + maxHeight + 100) : rows;
|
|
3624
3751
|
const enabled = filtered.filter((option) => !option.disabled && option.optionType !== "divider");
|
|
3625
|
-
(0,
|
|
3752
|
+
(0, import_react22.useEffect)(() => {
|
|
3626
3753
|
setScrollTop(0);
|
|
3627
3754
|
if (listRef.current) listRef.current.scrollTop = 0;
|
|
3628
3755
|
setActive(void 0);
|
|
@@ -3645,9 +3772,9 @@ function SelectionPanel({
|
|
|
3645
3772
|
const add = enabled.filter((option) => operation === "all" || !selected.has(option.value)).map((option) => option.value);
|
|
3646
3773
|
onChange([...retained, ...add]);
|
|
3647
3774
|
}
|
|
3648
|
-
return /* @__PURE__ */ (0,
|
|
3649
|
-
/* @__PURE__ */ (0,
|
|
3650
|
-
showSearch && /* @__PURE__ */ (0,
|
|
3775
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "sia-selection-panel", children: [
|
|
3776
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(FloatingScrollbarProvider, { targetRef: listRef }),
|
|
3777
|
+
showSearch && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
3651
3778
|
Input,
|
|
3652
3779
|
{
|
|
3653
3780
|
"aria-label": "\u641C\u7D22\u9009\u9879",
|
|
@@ -3661,17 +3788,17 @@ function SelectionPanel({
|
|
|
3661
3788
|
}
|
|
3662
3789
|
}
|
|
3663
3790
|
),
|
|
3664
|
-
multiple && showActions && /* @__PURE__ */ (0,
|
|
3665
|
-
/* @__PURE__ */ (0,
|
|
3666
|
-
/* @__PURE__ */ (0,
|
|
3667
|
-
/* @__PURE__ */ (0,
|
|
3668
|
-
/* @__PURE__ */ (0,
|
|
3791
|
+
multiple && showActions && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "sia-selection-panel__actions", children: [
|
|
3792
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { variant: "link", size: "small", disabled: disabled || loading || !enabled.length, onClick: () => batch("all"), children: "\u5168\u9009" }),
|
|
3793
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { variant: "link", size: "small", disabled: disabled || loading || !enabled.length, onClick: () => batch("invert"), children: "\u53CD\u9009" }),
|
|
3794
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { variant: "link", size: "small", disabled: disabled || loading || !value.length, onClick: () => batch("clear"), children: "\u6E05\u7A7A" }),
|
|
3795
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { children: [
|
|
3669
3796
|
"\u5DF2\u9009 ",
|
|
3670
3797
|
value.length,
|
|
3671
3798
|
" \u9879"
|
|
3672
3799
|
] })
|
|
3673
3800
|
] }),
|
|
3674
|
-
/* @__PURE__ */ (0,
|
|
3801
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
3675
3802
|
"div",
|
|
3676
3803
|
{
|
|
3677
3804
|
ref: listRef,
|
|
@@ -3708,12 +3835,12 @@ function SelectionPanel({
|
|
|
3708
3835
|
toggle(enabled[index], true);
|
|
3709
3836
|
}
|
|
3710
3837
|
},
|
|
3711
|
-
children: loading ? /* @__PURE__ */ (0,
|
|
3838
|
+
children: loading ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { role: "status", children: "\u52A0\u8F7D\u4E2D\u2026" }) : !rows.length ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "sia-selection-panel__empty", children: "\u6682\u65E0\u5339\u914D\u9009\u9879" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { height: totalHeight, position: "relative" }, children: renderedRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
3712
3839
|
"div",
|
|
3713
3840
|
{
|
|
3714
3841
|
className: row.title !== void 0 ? "sia-selection-panel__group" : "sia-selection-panel__row",
|
|
3715
3842
|
style: { position: "absolute", top: row.top, height: row.height, width: "100%", gridTemplateColumns: `repeat(${count}, minmax(0, 1fr))` },
|
|
3716
|
-
children: row.title ?? row.items?.map((option, index) => option.optionType === "divider" ? /* @__PURE__ */ (0,
|
|
3843
|
+
children: row.title ?? row.items?.map((option, index) => option.optionType === "divider" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { role: "separator", className: "sia-selection-panel__divider" }, `divider-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Tooltip, { title: option.disabled ? option.disabledTip : void 0, placement: "right", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
3717
3844
|
"div",
|
|
3718
3845
|
{
|
|
3719
3846
|
role: "option",
|
|
@@ -3729,12 +3856,12 @@ function SelectionPanel({
|
|
|
3729
3856
|
onClick: (event) => {
|
|
3730
3857
|
if (!event.target.closest(".sia-checkbox")) toggle(option);
|
|
3731
3858
|
},
|
|
3732
|
-
children: multiple ? /* @__PURE__ */ (0,
|
|
3733
|
-
/* @__PURE__ */ (0,
|
|
3734
|
-
showValue && /* @__PURE__ */ (0,
|
|
3735
|
-
] }) }) : /* @__PURE__ */ (0,
|
|
3736
|
-
/* @__PURE__ */ (0,
|
|
3737
|
-
showValue && /* @__PURE__ */ (0,
|
|
3859
|
+
children: multiple ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Checkbox2, { checked: selected.has(option.value), disabled: disabled || loading || option.disabled, tabIndex: -1, onChange: () => toggle(option), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "sia-selection-panel__text", children: [
|
|
3860
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "sia-selection-panel__label", children: showValue || displayField === "label" ? option.label : String(option.value) }),
|
|
3861
|
+
showValue && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("small", { children: String(option.value) })
|
|
3862
|
+
] }) }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "sia-selection-panel__text", children: [
|
|
3863
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "sia-selection-panel__label", children: showValue || displayField === "label" ? option.label : String(option.value) }),
|
|
3864
|
+
showValue && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("small", { children: String(option.value) })
|
|
3738
3865
|
] })
|
|
3739
3866
|
}
|
|
3740
3867
|
) }, `${typeof option.value}-${option.value}`))
|
|
@@ -3747,14 +3874,14 @@ function SelectionPanel({
|
|
|
3747
3874
|
}
|
|
3748
3875
|
|
|
3749
3876
|
// src/components/OverflowTags.tsx
|
|
3750
|
-
var
|
|
3751
|
-
var
|
|
3877
|
+
var import_react23 = require("react");
|
|
3878
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
3752
3879
|
function OverflowTags({ items, maxCount: maxCount2, className = "", tagClassName, restClassName = "" }) {
|
|
3753
|
-
const rootRef = (0,
|
|
3754
|
-
const measureRef = (0,
|
|
3880
|
+
const rootRef = (0, import_react23.useRef)(null);
|
|
3881
|
+
const measureRef = (0, import_react23.useRef)(null);
|
|
3755
3882
|
const limit = Math.min(items.length, Math.max(0, Math.floor(maxCount2) || 0));
|
|
3756
|
-
const [visibleCount, setVisibleCount] = (0,
|
|
3757
|
-
(0,
|
|
3883
|
+
const [visibleCount, setVisibleCount] = (0, import_react23.useState)(0);
|
|
3884
|
+
(0, import_react23.useLayoutEffect)(() => {
|
|
3758
3885
|
const root = rootRef.current;
|
|
3759
3886
|
const measure = measureRef.current;
|
|
3760
3887
|
if (!root || !measure) return;
|
|
@@ -3777,15 +3904,15 @@ function OverflowTags({ items, maxCount: maxCount2, className = "", tagClassName
|
|
|
3777
3904
|
return () => observer.disconnect();
|
|
3778
3905
|
}, [items, limit]);
|
|
3779
3906
|
const count = Math.min(visibleCount, limit);
|
|
3780
|
-
return /* @__PURE__ */ (0,
|
|
3781
|
-
items.slice(0, count).map((item) => /* @__PURE__ */ (0,
|
|
3782
|
-
items.length > count ? /* @__PURE__ */ (0,
|
|
3907
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { ref: rootRef, className: `sia-overflow-tags ${className}`.trim(), children: [
|
|
3908
|
+
items.slice(0, count).map((item) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: tagClassName, children: item.label }, item.key)),
|
|
3909
|
+
items.length > count ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: `${tagClassName} sia-overflow-tags__rest ${restClassName}`.trim(), children: [
|
|
3783
3910
|
"+",
|
|
3784
3911
|
items.length - count
|
|
3785
3912
|
] }) : null,
|
|
3786
|
-
/* @__PURE__ */ (0,
|
|
3787
|
-
items.slice(0, limit).map((item) => /* @__PURE__ */ (0,
|
|
3788
|
-
Array.from({ length: limit + 1 }, (_, index) => /* @__PURE__ */ (0,
|
|
3913
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { ref: measureRef, className: "sia-overflow-tags__measure", "aria-hidden": "true", children: [
|
|
3914
|
+
items.slice(0, limit).map((item) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: tagClassName, children: item.label }, item.key)),
|
|
3915
|
+
Array.from({ length: limit + 1 }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: `${tagClassName} ${restClassName}`.trim(), children: [
|
|
3789
3916
|
"+",
|
|
3790
3917
|
items.length - index
|
|
3791
3918
|
] }, `rest-${index}`))
|
|
@@ -3794,12 +3921,12 @@ function OverflowTags({ items, maxCount: maxCount2, className = "", tagClassName
|
|
|
3794
3921
|
}
|
|
3795
3922
|
|
|
3796
3923
|
// src/components/Select.tsx
|
|
3797
|
-
var
|
|
3924
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
3798
3925
|
function defaultFilterOption(query, option) {
|
|
3799
3926
|
const keyword = query.toLowerCase();
|
|
3800
3927
|
return [option.label, option.value].some((value) => String(value).toLowerCase().includes(keyword));
|
|
3801
3928
|
}
|
|
3802
|
-
var Select = (0,
|
|
3929
|
+
var Select = (0, import_react24.forwardRef)(function Select2({
|
|
3803
3930
|
options,
|
|
3804
3931
|
mode = "single",
|
|
3805
3932
|
popupMode: popupModeProp,
|
|
@@ -3838,27 +3965,27 @@ var Select = (0, import_react23.forwardRef)(function Select2({
|
|
|
3838
3965
|
}, forwardedRef) {
|
|
3839
3966
|
const showSearch = showSearchProp ?? options.length > 15;
|
|
3840
3967
|
const size = useControlSize(sizeProp);
|
|
3841
|
-
const fallbackId = (0,
|
|
3968
|
+
const fallbackId = (0, import_react24.useId)();
|
|
3842
3969
|
const selectId = id ?? fallbackId;
|
|
3843
3970
|
const listboxId = `${selectId}-listbox`;
|
|
3844
|
-
const rootRef = (0,
|
|
3845
|
-
const popupRef = (0,
|
|
3846
|
-
const searchRef = (0,
|
|
3847
|
-
const listRef = (0,
|
|
3848
|
-
const [open, setOpen] = (0,
|
|
3971
|
+
const rootRef = (0, import_react24.useRef)(null);
|
|
3972
|
+
const popupRef = (0, import_react24.useRef)(null);
|
|
3973
|
+
const searchRef = (0, import_react24.useRef)(null);
|
|
3974
|
+
const listRef = (0, import_react24.useRef)(null);
|
|
3975
|
+
const [open, setOpen] = (0, import_react24.useState)(false);
|
|
3849
3976
|
const automaticMode = popupModeProp ?? (options.length > modalThreshold ? "modal" : "dropdown");
|
|
3850
|
-
const [openedMode, setOpenedMode] = (0,
|
|
3977
|
+
const [openedMode, setOpenedMode] = (0, import_react24.useState)(automaticMode);
|
|
3851
3978
|
const popupMode = open ? openedMode : automaticMode;
|
|
3852
|
-
const [modalValues, setModalValues] = (0,
|
|
3853
|
-
const [modalSubmitting, setModalSubmitting] = (0,
|
|
3854
|
-
const modalSubmitLock = (0,
|
|
3855
|
-
const [selectedOnly, setSelectedOnly] = (0,
|
|
3856
|
-
const [query, setQuery] = (0,
|
|
3857
|
-
const [activeIndex, setActiveIndex] = (0,
|
|
3858
|
-
const [scrollTop, setScrollTop] = (0,
|
|
3859
|
-
const [dropdownFontSize, setDropdownFontSize] = (0,
|
|
3860
|
-
const pendingSelectedScroll = (0,
|
|
3861
|
-
const deferredQuery = (0,
|
|
3979
|
+
const [modalValues, setModalValues] = (0, import_react24.useState)([]);
|
|
3980
|
+
const [modalSubmitting, setModalSubmitting] = (0, import_react24.useState)(false);
|
|
3981
|
+
const modalSubmitLock = (0, import_react24.useRef)(false);
|
|
3982
|
+
const [selectedOnly, setSelectedOnly] = (0, import_react24.useState)(false);
|
|
3983
|
+
const [query, setQuery] = (0, import_react24.useState)("");
|
|
3984
|
+
const [activeIndex, setActiveIndex] = (0, import_react24.useState)(-1);
|
|
3985
|
+
const [scrollTop, setScrollTop] = (0, import_react24.useState)(0);
|
|
3986
|
+
const [dropdownFontSize, setDropdownFontSize] = (0, import_react24.useState)();
|
|
3987
|
+
const pendingSelectedScroll = (0, import_react24.useRef)(false);
|
|
3988
|
+
const deferredQuery = (0, import_react24.useDeferredValue)(query.trim());
|
|
3862
3989
|
const initialValue = defaultValue === void 0 ? mode === "multiple" ? [] : null : defaultValue;
|
|
3863
3990
|
const [currentValue, setCurrentValue] = useControllableState({
|
|
3864
3991
|
value,
|
|
@@ -3873,20 +4000,20 @@ var Select = (0, import_react23.forwardRef)(function Select2({
|
|
|
3873
4000
|
}
|
|
3874
4001
|
}
|
|
3875
4002
|
});
|
|
3876
|
-
const selectedValues = (0,
|
|
4003
|
+
const selectedValues = (0, import_react24.useMemo)(() => {
|
|
3877
4004
|
if (currentValue == null || currentValue === "" && !options.some((option) => option.value === "")) return [];
|
|
3878
4005
|
if (mode === "multiple") return Array.isArray(currentValue) ? currentValue : currentValue === null ? [] : [currentValue];
|
|
3879
4006
|
return Array.isArray(currentValue) ? currentValue.slice(0, 1) : currentValue === null ? [] : [currentValue];
|
|
3880
4007
|
}, [currentValue, mode, options]);
|
|
3881
|
-
const selectedValueSet = (0,
|
|
3882
|
-
const availableOptions = (0,
|
|
4008
|
+
const selectedValueSet = (0, import_react24.useMemo)(() => new Set(selectedValues), [selectedValues]);
|
|
4009
|
+
const availableOptions = (0, import_react24.useMemo)(() => {
|
|
3883
4010
|
if (!allowInput) return options;
|
|
3884
4011
|
const optionValueSet = new Set(options.map((option) => option.value));
|
|
3885
4012
|
const selectedCustomOptions = selectedValues.filter((selectedValue) => !optionValueSet.has(selectedValue)).map((selectedValue) => ({ label: String(selectedValue), value: selectedValue }));
|
|
3886
4013
|
return selectedCustomOptions.length ? [...selectedCustomOptions, ...options] : options;
|
|
3887
4014
|
}, [allowInput, options, selectedValues]);
|
|
3888
|
-
const selectedOptions = (0,
|
|
3889
|
-
const filteredOptions = (0,
|
|
4015
|
+
const selectedOptions = (0, import_react24.useMemo)(() => selectedValues.map((selectedValue) => availableOptions.find((option) => option.value === selectedValue)).filter((option) => option !== void 0), [availableOptions, selectedValues]);
|
|
4016
|
+
const filteredOptions = (0, import_react24.useMemo)(() => deferredQuery ? availableOptions.filter((option) => filterOption(deferredQuery, option)) : availableOptions, [availableOptions, deferredQuery, filterOption]);
|
|
3890
4017
|
const inputValue = query.trim();
|
|
3891
4018
|
const exactInputOption = inputValue ? availableOptions.find((option) => String(option.value).toLowerCase() === inputValue.toLowerCase() || typeof option.label === "string" && option.label.toLowerCase() === inputValue.toLowerCase()) : void 0;
|
|
3892
4019
|
const canSubmitInput = allowInput && Boolean(inputValue) && !exactInputOption;
|
|
@@ -3900,7 +4027,7 @@ var Select = (0, import_react23.forwardRef)(function Select2({
|
|
|
3900
4027
|
const renderedOptions = virtualEnabled ? filteredOptions.slice(virtualStart, virtualEnd) : filteredOptions;
|
|
3901
4028
|
const enabledFilteredOptions = filteredOptions.filter((option) => !option.disabled);
|
|
3902
4029
|
const allFilteredSelected = enabledFilteredOptions.length > 0 && enabledFilteredOptions.every((option) => selectedValueSet.has(option.value));
|
|
3903
|
-
(0,
|
|
4030
|
+
(0, import_react24.useEffect)(() => {
|
|
3904
4031
|
if (!open || popupMode === "modal") return void 0;
|
|
3905
4032
|
function closeFromOutside(event) {
|
|
3906
4033
|
const target = event.target;
|
|
@@ -3909,13 +4036,13 @@ var Select = (0, import_react23.forwardRef)(function Select2({
|
|
|
3909
4036
|
document.addEventListener("mousedown", closeFromOutside);
|
|
3910
4037
|
return () => document.removeEventListener("mousedown", closeFromOutside);
|
|
3911
4038
|
}, [open, popupMode]);
|
|
3912
|
-
(0,
|
|
4039
|
+
(0, import_react24.useEffect)(() => {
|
|
3913
4040
|
if (open && (showSearch || allowInput)) searchRef.current?.focus();
|
|
3914
4041
|
}, [allowInput, open, showSearch]);
|
|
3915
|
-
(0,
|
|
4042
|
+
(0, import_react24.useEffect)(() => {
|
|
3916
4043
|
if (disabled || loading) closeDropdown();
|
|
3917
4044
|
}, [disabled, loading]);
|
|
3918
|
-
(0,
|
|
4045
|
+
(0, import_react24.useEffect)(() => {
|
|
3919
4046
|
if (!open || popupMode !== "dropdown" || !pendingSelectedScroll.current || query) return;
|
|
3920
4047
|
const index = filteredOptions.findIndex((option) => selectedValueSet.has(option.value));
|
|
3921
4048
|
if (index < 0) return;
|
|
@@ -3930,7 +4057,7 @@ var Select = (0, import_react23.forwardRef)(function Select2({
|
|
|
3930
4057
|
});
|
|
3931
4058
|
return () => cancelAnimationFrame(frame);
|
|
3932
4059
|
}, [open, popupMode, filteredOptions, selectedValueSet, virtualEnabled, optionHeight, query]);
|
|
3933
|
-
(0,
|
|
4060
|
+
(0, import_react24.useLayoutEffect)(() => {
|
|
3934
4061
|
if (!open || popupMode !== "dropdown") return;
|
|
3935
4062
|
const trigger = rootRef.current?.querySelector(".sia-select__trigger");
|
|
3936
4063
|
if (trigger) setDropdownFontSize(getComputedStyle(trigger).fontSize);
|
|
@@ -4081,7 +4208,7 @@ var Select = (0, import_react23.forwardRef)(function Select2({
|
|
|
4081
4208
|
function renderOption(option, renderedIndex) {
|
|
4082
4209
|
const optionIndex = virtualEnabled ? virtualStart + renderedIndex : renderedIndex;
|
|
4083
4210
|
const selected = selectedValueSet.has(option.value);
|
|
4084
|
-
return /* @__PURE__ */ (0,
|
|
4211
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
4085
4212
|
"div",
|
|
4086
4213
|
{
|
|
4087
4214
|
id: `${listboxId}-${optionIndex}`,
|
|
@@ -4094,11 +4221,11 @@ var Select = (0, import_react23.forwardRef)(function Select2({
|
|
|
4094
4221
|
onMouseDown: (event) => event.preventDefault(),
|
|
4095
4222
|
onClick: () => selectOption(option),
|
|
4096
4223
|
children: [
|
|
4097
|
-
/* @__PURE__ */ (0,
|
|
4098
|
-
/* @__PURE__ */ (0,
|
|
4099
|
-
showValue ? /* @__PURE__ */ (0,
|
|
4224
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "sia-select__option-content", children: [
|
|
4225
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "sia-select__option-label", children: option.label }),
|
|
4226
|
+
showValue ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("small", { className: "sia-select__option-value", children: String(option.value) }) : null
|
|
4100
4227
|
] }),
|
|
4101
|
-
selected ? /* @__PURE__ */ (0,
|
|
4228
|
+
selected ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "check", size: 15 }) : null
|
|
4102
4229
|
]
|
|
4103
4230
|
},
|
|
4104
4231
|
`${typeof option.value}-${option.value}`
|
|
@@ -4112,8 +4239,8 @@ var Select = (0, import_react23.forwardRef)(function Select2({
|
|
|
4112
4239
|
setModalValues([...modalValues.filter((value2) => !editable.has(value2)), ...modalEnabled.filter((option) => operation === "all" || operation === "invert" && !modalValues.includes(option.value)).map((option) => option.value)]);
|
|
4113
4240
|
}
|
|
4114
4241
|
const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: hasValue, active: open });
|
|
4115
|
-
return /* @__PURE__ */ (0,
|
|
4116
|
-
/* @__PURE__ */ (0,
|
|
4242
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { ref: rootRef, className: `sia-select sia-select--${size} sia-select--${status}${open ? " is-open" : ""}${disabled ? " is-disabled" : ""}${multiple ? " sia-select--multiple" : ""} ${className}`.trim(), style, children: [
|
|
4243
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
4117
4244
|
"button",
|
|
4118
4245
|
{
|
|
4119
4246
|
...withTitleTooltip(props),
|
|
@@ -4131,29 +4258,29 @@ var Select = (0, import_react23.forwardRef)(function Select2({
|
|
|
4131
4258
|
onClick: () => open ? closeDropdown() : openDropdown(),
|
|
4132
4259
|
onKeyDown: handleTriggerKeyDown,
|
|
4133
4260
|
children: [
|
|
4134
|
-
multiple && hasValue ? /* @__PURE__ */ (0,
|
|
4135
|
-
loading ? /* @__PURE__ */ (0,
|
|
4261
|
+
multiple && hasValue ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(OverflowTags, { className: "sia-select__tags", tagClassName: "sia-select__tag", restClassName: "sia-select__tag--rest", maxCount: maxTagCount, items: selectedOptions.map((option) => ({ key: `${typeof option.value}-${option.value}`, label: option.label })) }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: `sia-select__value${hasValue ? "" : " is-placeholder"}`, children: selectedOptions[0]?.label ?? placeholder }),
|
|
4262
|
+
loading ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "sia-select__spinner", "aria-hidden": "true" }) : null,
|
|
4136
4263
|
floating.label,
|
|
4137
|
-
/* @__PURE__ */ (0,
|
|
4264
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { className: "sia-select__arrow", name: "chevron-down", size: 15 })
|
|
4138
4265
|
]
|
|
4139
4266
|
}
|
|
4140
4267
|
),
|
|
4141
|
-
allowClear && hasValue && !disabled && !loading ? /* @__PURE__ */ (0,
|
|
4142
|
-
/* @__PURE__ */ (0,
|
|
4143
|
-
/* @__PURE__ */ (0,
|
|
4144
|
-
showSearch || allowInput ? /* @__PURE__ */ (0,
|
|
4145
|
-
/* @__PURE__ */ (0,
|
|
4146
|
-
/* @__PURE__ */ (0,
|
|
4268
|
+
allowClear && hasValue && !disabled && !loading ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { className: "sia-select__clear", type: "button", "aria-label": "\u6E05\u7A7A\u9009\u62E9", onClick: clearValue, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
|
|
4269
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(PopupPortal, { ref: popupRef, anchorRef: rootRef, open: open && popupMode === "dropdown", style: { fontSize: dropdownFontSize }, className: `sia-select__dropdown${filteredOptions.length === 0 && !canSubmitInput ? " sia-select__dropdown--empty" : ""}`, children: [
|
|
4270
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(FloatingScrollbarProvider, { targetRef: listRef }),
|
|
4271
|
+
showSearch || allowInput ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { className: "sia-select__search", children: [
|
|
4272
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "search", size: 15 }),
|
|
4273
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("input", { ref: searchRef, value: query, maxLength: inputMaxLength, onChange: handleSearchChange, onKeyDown: (event) => handleInteractionKeyDown(event, true), placeholder: searchPlaceholder, "aria-label": searchPlaceholder })
|
|
4147
4274
|
] }) : null,
|
|
4148
|
-
canSubmitInput ? /* @__PURE__ */ (0,
|
|
4149
|
-
/* @__PURE__ */ (0,
|
|
4150
|
-
/* @__PURE__ */ (0,
|
|
4275
|
+
canSubmitInput ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("button", { type: "button", className: "sia-select__input-option", onMouseDown: (event) => event.preventDefault(), onClick: submitInputValue, children: [
|
|
4276
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "plus", size: 14 }),
|
|
4277
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { children: [
|
|
4151
4278
|
"\u4F7F\u7528\u201C",
|
|
4152
4279
|
inputValue,
|
|
4153
4280
|
"\u201D"
|
|
4154
4281
|
] })
|
|
4155
4282
|
] }) : null,
|
|
4156
|
-
/* @__PURE__ */ (0,
|
|
4283
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
4157
4284
|
"div",
|
|
4158
4285
|
{
|
|
4159
4286
|
ref: listRef,
|
|
@@ -4164,23 +4291,23 @@ var Select = (0, import_react23.forwardRef)(function Select2({
|
|
|
4164
4291
|
"aria-multiselectable": multiple || void 0,
|
|
4165
4292
|
style: { maxHeight: listHeight },
|
|
4166
4293
|
onScroll: handleListScroll,
|
|
4167
|
-
children: filteredOptions.length > 0 ? virtualEnabled ? /* @__PURE__ */ (0,
|
|
4294
|
+
children: filteredOptions.length > 0 ? virtualEnabled ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "sia-select__virtual-space", style: { height: filteredOptions.length * optionHeight }, children: renderedOptions.map(renderOption) }) : renderedOptions.map(renderOption) : canSubmitInput ? null : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "sia-select__empty", children: notFoundContent })
|
|
4168
4295
|
}
|
|
4169
4296
|
),
|
|
4170
|
-
showActions ? /* @__PURE__ */ (0,
|
|
4171
|
-
/* @__PURE__ */ (0,
|
|
4297
|
+
showActions ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "sia-select__actions", children: [
|
|
4298
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { children: [
|
|
4172
4299
|
"\u5171 ",
|
|
4173
4300
|
filteredOptions.length,
|
|
4174
4301
|
" \u6761"
|
|
4175
4302
|
] }),
|
|
4176
|
-
multiple && showSelectAll ? /* @__PURE__ */ (0,
|
|
4177
|
-
/* @__PURE__ */ (0,
|
|
4178
|
-
/* @__PURE__ */ (0,
|
|
4303
|
+
multiple && showSelectAll ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
|
|
4304
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { variant: "link", size: "small", disabled: allFilteredSelected || !enabledFilteredOptions.length, onClick: selectAllFiltered, children: "\u5168\u9009" }),
|
|
4305
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { variant: "link", size: "small", disabled: !enabledFilteredOptions.length, onClick: invertFiltered, children: "\u53CD\u9009" })
|
|
4179
4306
|
] }) : null,
|
|
4180
|
-
multiple || allowClear ? /* @__PURE__ */ (0,
|
|
4307
|
+
multiple || allowClear ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { variant: "link", size: "small", danger: true, disabled: !hasValue, onClick: clearSelection, children: "\u6E05\u7A7A" }) : null
|
|
4181
4308
|
] }) : null
|
|
4182
4309
|
] }),
|
|
4183
|
-
popupMode === "modal" ? /* @__PURE__ */ (0,
|
|
4310
|
+
popupMode === "modal" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
4184
4311
|
Modal2,
|
|
4185
4312
|
{
|
|
4186
4313
|
className: "sia-select-modal",
|
|
@@ -4192,30 +4319,30 @@ var Select = (0, import_react23.forwardRef)(function Select2({
|
|
|
4192
4319
|
if (!next) closeDropdown();
|
|
4193
4320
|
},
|
|
4194
4321
|
onCancel: closeDropdown,
|
|
4195
|
-
footer: /* @__PURE__ */ (0,
|
|
4196
|
-
/* @__PURE__ */ (0,
|
|
4197
|
-
/* @__PURE__ */ (0,
|
|
4198
|
-
/* @__PURE__ */ (0,
|
|
4199
|
-
/* @__PURE__ */ (0,
|
|
4322
|
+
footer: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "sia-select-modal__footer", children: [
|
|
4323
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: modalConfig?.footerExtra }),
|
|
4324
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
|
|
4325
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { disabled: modalSubmitting, onClick: closeDropdown, children: "\u53D6\u6D88" }),
|
|
4326
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { variant: "primary", loading: modalSubmitting, disabled: disabled || loading, onClick: confirmModalSelection, children: "\u786E\u5B9A" })
|
|
4200
4327
|
] })
|
|
4201
4328
|
] }),
|
|
4202
|
-
children: open ? /* @__PURE__ */ (0,
|
|
4203
|
-
modalConfig?.headerExtra != null && modalConfig.headerExtra !== false ? /* @__PURE__ */ (0,
|
|
4204
|
-
/* @__PURE__ */ (0,
|
|
4205
|
-
/* @__PURE__ */ (0,
|
|
4206
|
-
/* @__PURE__ */ (0,
|
|
4207
|
-
/* @__PURE__ */ (0,
|
|
4329
|
+
children: open ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
|
|
4330
|
+
modalConfig?.headerExtra != null && modalConfig.headerExtra !== false ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "sia-select-modal__header-extra", children: modalConfig.headerExtra }) : null,
|
|
4331
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "sia-select-modal__heading", children: [
|
|
4332
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { role: "tablist", "aria-label": "\u9009\u9879\u8303\u56F4", children: [
|
|
4333
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { role: "tab", "aria-selected": !selectedOnly, variant: "link", onClick: () => setSelectedOnly(false), children: "\u5168\u90E8" }),
|
|
4334
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Button, { role: "tab", "aria-selected": selectedOnly, variant: "link", onClick: () => setSelectedOnly(true), children: [
|
|
4208
4335
|
"\u5DF2\u9009\u9879(",
|
|
4209
4336
|
modalValues.length,
|
|
4210
4337
|
")"
|
|
4211
4338
|
] })
|
|
4212
4339
|
] }),
|
|
4213
|
-
/* @__PURE__ */ (0,
|
|
4340
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
4214
4341
|
Input,
|
|
4215
4342
|
{
|
|
4216
4343
|
"aria-label": searchPlaceholder,
|
|
4217
4344
|
placeholder: searchPlaceholder,
|
|
4218
|
-
prefix: /* @__PURE__ */ (0,
|
|
4345
|
+
prefix: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "search", size: 14 }),
|
|
4219
4346
|
value: query,
|
|
4220
4347
|
allowClear: true,
|
|
4221
4348
|
onChange: (event) => {
|
|
@@ -4225,8 +4352,8 @@ var Select = (0, import_react23.forwardRef)(function Select2({
|
|
|
4225
4352
|
}
|
|
4226
4353
|
)
|
|
4227
4354
|
] }),
|
|
4228
|
-
multiple && showSelectAll ? /* @__PURE__ */ (0,
|
|
4229
|
-
/* @__PURE__ */ (0,
|
|
4355
|
+
multiple && showSelectAll ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "sia-select-modal__actions", children: [
|
|
4356
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
4230
4357
|
Checkbox2,
|
|
4231
4358
|
{
|
|
4232
4359
|
checked: modalEnabled.length > 0 && modalEnabled.every((option) => modalValues.includes(option.value)),
|
|
@@ -4236,10 +4363,10 @@ var Select = (0, import_react23.forwardRef)(function Select2({
|
|
|
4236
4363
|
children: "\u5168\u9009"
|
|
4237
4364
|
}
|
|
4238
4365
|
),
|
|
4239
|
-
/* @__PURE__ */ (0,
|
|
4240
|
-
/* @__PURE__ */ (0,
|
|
4366
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { variant: "link", size: "small", disabled: !modalEnabled.length, onClick: () => modalBatch("invert"), children: "\u53CD\u9009" }),
|
|
4367
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { variant: "link", size: "small", danger: true, disabled: !modalValues.length, onClick: () => setModalValues([]), children: "\u6E05\u7A7A" })
|
|
4241
4368
|
] }) : null,
|
|
4242
|
-
allowInput && canSubmitInput ? /* @__PURE__ */ (0,
|
|
4369
|
+
allowInput && canSubmitInput ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Button, { variant: "link", onClick: () => {
|
|
4243
4370
|
setModalValues(multiple ? [.../* @__PURE__ */ new Set([...modalValues, inputValue])] : [inputValue]);
|
|
4244
4371
|
setQuery("");
|
|
4245
4372
|
}, children: [
|
|
@@ -4247,7 +4374,7 @@ var Select = (0, import_react23.forwardRef)(function Select2({
|
|
|
4247
4374
|
inputValue,
|
|
4248
4375
|
"\u201D"
|
|
4249
4376
|
] }) : null,
|
|
4250
|
-
/* @__PURE__ */ (0,
|
|
4377
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
4251
4378
|
SelectionPanel,
|
|
4252
4379
|
{
|
|
4253
4380
|
options: modalFiltered,
|
|
@@ -4271,7 +4398,7 @@ var Select = (0, import_react23.forwardRef)(function Select2({
|
|
|
4271
4398
|
});
|
|
4272
4399
|
|
|
4273
4400
|
// src/components/Upload.tsx
|
|
4274
|
-
var
|
|
4401
|
+
var import_react25 = require("react");
|
|
4275
4402
|
|
|
4276
4403
|
// src/components/uploadFiles.ts
|
|
4277
4404
|
function acceptsUploadFile(file, accept) {
|
|
@@ -4403,7 +4530,7 @@ function isUploadImage(file, accept) {
|
|
|
4403
4530
|
|
|
4404
4531
|
// src/components/Message.tsx
|
|
4405
4532
|
var import_client4 = require("react-dom/client");
|
|
4406
|
-
var
|
|
4533
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
4407
4534
|
var messageSeed = 0;
|
|
4408
4535
|
var messageRoot = null;
|
|
4409
4536
|
var messageContainer = null;
|
|
@@ -4412,11 +4539,11 @@ var defaultDuration = 3;
|
|
|
4412
4539
|
var maxCount = 5;
|
|
4413
4540
|
var messageTimers = /* @__PURE__ */ new Map();
|
|
4414
4541
|
var messageIcons = {
|
|
4415
|
-
info: /* @__PURE__ */ (0,
|
|
4416
|
-
success: /* @__PURE__ */ (0,
|
|
4417
|
-
warning: /* @__PURE__ */ (0,
|
|
4418
|
-
error: /* @__PURE__ */ (0,
|
|
4419
|
-
loading: /* @__PURE__ */ (0,
|
|
4542
|
+
info: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "info", size: 18 }),
|
|
4543
|
+
success: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "circle-check", size: 18 }),
|
|
4544
|
+
warning: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "warning", size: 18 }),
|
|
4545
|
+
error: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "circle-close", size: 18 }),
|
|
4546
|
+
loading: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "loader", size: 18, spin: true })
|
|
4420
4547
|
};
|
|
4421
4548
|
function ensureMessageRoot() {
|
|
4422
4549
|
if (typeof document === "undefined") return false;
|
|
@@ -4430,10 +4557,10 @@ function ensureMessageRoot() {
|
|
|
4430
4557
|
}
|
|
4431
4558
|
function renderMessages() {
|
|
4432
4559
|
if (!ensureMessageRoot()) return;
|
|
4433
|
-
messageRoot.render(/* @__PURE__ */ (0,
|
|
4434
|
-
/* @__PURE__ */ (0,
|
|
4435
|
-
/* @__PURE__ */ (0,
|
|
4436
|
-
item.closable ? /* @__PURE__ */ (0,
|
|
4560
|
+
messageRoot.render(/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "sia-message-list", "aria-live": "polite", children: messageItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: `sia-message sia-message--${item.type}`, role: item.type === "loading" ? "status" : "alert", children: [
|
|
4561
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "sia-message__icon", "aria-hidden": "true", children: messageIcons[item.type] }),
|
|
4562
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "sia-message__content", children: item.content }),
|
|
4563
|
+
item.closable ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { type: "button", className: "sia-message__close", "aria-label": "\u5173\u95ED\u63D0\u793A", onClick: () => closeMessage(item.key), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "close", size: 14 }) }) : null
|
|
4437
4564
|
] }, item.key)) }));
|
|
4438
4565
|
}
|
|
4439
4566
|
function closeMessage(key) {
|
|
@@ -4507,11 +4634,11 @@ var message = {
|
|
|
4507
4634
|
};
|
|
4508
4635
|
|
|
4509
4636
|
// src/components/Upload.tsx
|
|
4510
|
-
var
|
|
4637
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
4511
4638
|
var LIST_IGNORE = /* @__PURE__ */ Symbol("SIA_UPLOAD_LIST_IGNORE");
|
|
4512
4639
|
function useThumbnail(file, accept) {
|
|
4513
|
-
const [local, setLocal] = (0,
|
|
4514
|
-
(0,
|
|
4640
|
+
const [local, setLocal] = (0, import_react25.useState)();
|
|
4641
|
+
(0, import_react25.useEffect)(() => {
|
|
4515
4642
|
if (!file?.thumbUrl && file?.originFileObj?.type.startsWith("image/")) {
|
|
4516
4643
|
const url = URL.createObjectURL(file.originFileObj);
|
|
4517
4644
|
setLocal(url);
|
|
@@ -4523,9 +4650,9 @@ function useThumbnail(file, accept) {
|
|
|
4523
4650
|
}
|
|
4524
4651
|
function UploadItem({ file, files, props, actions }) {
|
|
4525
4652
|
const source = useThumbnail(file, props.accept);
|
|
4526
|
-
const [failed, setFailed] = (0,
|
|
4527
|
-
const [downloading, setDownloading] = (0,
|
|
4528
|
-
const downloadingRef = (0,
|
|
4653
|
+
const [failed, setFailed] = (0, import_react25.useState)(false);
|
|
4654
|
+
const [downloading, setDownloading] = (0, import_react25.useState)(false);
|
|
4655
|
+
const downloadingRef = (0, import_react25.useRef)(false);
|
|
4529
4656
|
const canPreview = !!(source || file.url || file.originFileObj || props.onPreview);
|
|
4530
4657
|
const canDownload = !!(file.url || file.originFileObj || props.downloadRequest);
|
|
4531
4658
|
async function download() {
|
|
@@ -4541,29 +4668,29 @@ function UploadItem({ file, files, props, actions }) {
|
|
|
4541
4668
|
setDownloading(false);
|
|
4542
4669
|
}
|
|
4543
4670
|
}
|
|
4544
|
-
(0,
|
|
4545
|
-
const node = /* @__PURE__ */ (0,
|
|
4546
|
-
props.listType !== "text" ? /* @__PURE__ */ (0,
|
|
4547
|
-
/* @__PURE__ */ (0,
|
|
4548
|
-
/* @__PURE__ */ (0,
|
|
4549
|
-
/* @__PURE__ */ (0,
|
|
4550
|
-
/* @__PURE__ */ (0,
|
|
4551
|
-
/* @__PURE__ */ (0,
|
|
4671
|
+
(0, import_react25.useEffect)(() => setFailed(false), [source]);
|
|
4672
|
+
const node = /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: `sia-upload__item sia-upload__item--${file.status ?? "ready"}`, children: [
|
|
4673
|
+
props.listType !== "text" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { variant: "text", className: "sia-upload__thumbnail", "aria-label": `\u9884\u89C8\u7F29\u7565\u56FE ${file.name}`, onClick: actions.preview, disabled: !canPreview, children: source && !failed ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("img", { src: source, alt: file.name, onError: () => setFailed(true) }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { name: file.type?.startsWith("image/") ? "image" : "file", size: 28 }) }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "sia-upload__file-icon", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { name: file.status === "done" ? "circle-check" : "file", size: 24 }) }),
|
|
4674
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "sia-upload__name", ...withTitleTooltip({ title: file.relativePath || file.name }), children: file.url ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("a", { href: file.url, target: "_blank", rel: "noreferrer", children: file.name }) : file.name }),
|
|
4675
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "sia-upload__actions", children: [
|
|
4676
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { variant: "text", title: "\u9884\u89C8", "aria-label": `\u9884\u89C8 ${file.name}`, disabled: !canPreview, onClick: actions.preview, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { name: "eye", size: 14 }) }),
|
|
4677
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { variant: "text", title: "\u4E0B\u8F7D", "aria-label": `\u4E0B\u8F7D ${file.name}`, disabled: !canDownload, loading: downloading, onClick: () => void download(), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { name: "download", size: 14 }) }),
|
|
4678
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { variant: "text", title: "\u79FB\u9664", className: "sia-upload__remove", disabled: props.disabled, "aria-label": `\u79FB\u9664 ${file.name}`, onClick: () => void actions.remove(), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { name: "close", size: 14 }) })
|
|
4552
4679
|
] }),
|
|
4553
|
-
file.status === "uploading" && /* @__PURE__ */ (0,
|
|
4554
|
-
/* @__PURE__ */ (0,
|
|
4680
|
+
file.status === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "sia-upload__uploading", children: [
|
|
4681
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { children: [
|
|
4555
4682
|
"\u4E0A\u4F20\u4E2D ",
|
|
4556
4683
|
Math.round(file.percent ?? 0),
|
|
4557
4684
|
"%"
|
|
4558
4685
|
] }),
|
|
4559
|
-
/* @__PURE__ */ (0,
|
|
4686
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "sia-upload__progress", role: "progressbar", "aria-label": `${file.name} \u4E0A\u4F20\u8FDB\u5EA6`, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": file.percent ?? 0, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { style: { width: `${file.percent ?? 0}%` } }) })
|
|
4560
4687
|
] }),
|
|
4561
|
-
file.status === "error" && /* @__PURE__ */ (0,
|
|
4562
|
-
props.listType === "text" && (file.status === void 0 || file.status === "ready" || file.status === "done") && /* @__PURE__ */ (0,
|
|
4688
|
+
file.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "sia-upload__error", children: "\u4E0A\u4F20\u5931\u8D25" }),
|
|
4689
|
+
props.listType === "text" && (file.status === void 0 || file.status === "ready" || file.status === "done") && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "sia-upload__status", children: file.status === "done" ? "\u4E0A\u4F20\u5B8C\u6210" : "\u5DF2\u9009\u62E9" })
|
|
4563
4690
|
] });
|
|
4564
|
-
return /* @__PURE__ */ (0,
|
|
4691
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, { children: props.itemRender ? props.itemRender(node, file, files, actions) : node });
|
|
4565
4692
|
}
|
|
4566
|
-
var UploadRoot = (0,
|
|
4693
|
+
var UploadRoot = (0, import_react25.forwardRef)(function UploadRoot2({
|
|
4567
4694
|
accept,
|
|
4568
4695
|
multiple = false,
|
|
4569
4696
|
directory = false,
|
|
@@ -4602,19 +4729,19 @@ var UploadRoot = (0, import_react24.forwardRef)(function UploadRoot2({
|
|
|
4602
4729
|
const cardWidth = cardDimension(typeof cardSize === "number" ? cardSize : cardSize?.width);
|
|
4603
4730
|
const cardHeight = cardDimension(typeof cardSize === "number" ? cardSize : cardSize?.height);
|
|
4604
4731
|
const compactCard = listType === "picture-card" && (cardWidth < 88 || cardHeight < 88);
|
|
4605
|
-
const inputRef = (0,
|
|
4606
|
-
const [internalFiles, setInternalFiles] = (0,
|
|
4732
|
+
const inputRef = (0, import_react25.useRef)(null);
|
|
4733
|
+
const [internalFiles, setInternalFiles] = (0, import_react25.useState)(defaultFileList);
|
|
4607
4734
|
const files = fileList ?? internalFiles;
|
|
4608
|
-
const filesRef = (0,
|
|
4735
|
+
const filesRef = (0, import_react25.useRef)(files);
|
|
4609
4736
|
filesRef.current = files;
|
|
4610
|
-
const tasks = (0,
|
|
4611
|
-
const mounted = (0,
|
|
4612
|
-
const [dragging, setDragging] = (0,
|
|
4613
|
-
const [preview, setPreview] = (0,
|
|
4737
|
+
const tasks = (0, import_react25.useRef)(/* @__PURE__ */ new Map());
|
|
4738
|
+
const mounted = (0, import_react25.useRef)(true);
|
|
4739
|
+
const [dragging, setDragging] = (0, import_react25.useState)(false);
|
|
4740
|
+
const [preview, setPreview] = (0, import_react25.useState)();
|
|
4614
4741
|
const previewSource = useThumbnail(preview, accept);
|
|
4615
4742
|
const limit = maxCount2 === void 0 || !Number.isFinite(maxCount2) ? Infinity : Math.max(0, Math.floor(maxCount2));
|
|
4616
4743
|
const full = files.length >= limit;
|
|
4617
|
-
const current = (0,
|
|
4744
|
+
const current = (0, import_react25.useRef)({ disabled, directory, recursive });
|
|
4618
4745
|
current.current = { disabled, directory, recursive };
|
|
4619
4746
|
function cancel(uid) {
|
|
4620
4747
|
const task = tasks.current.get(uid);
|
|
@@ -4626,14 +4753,14 @@ var UploadRoot = (0, import_react24.forwardRef)(function UploadRoot2({
|
|
|
4626
4753
|
}
|
|
4627
4754
|
task?.finish();
|
|
4628
4755
|
}
|
|
4629
|
-
(0,
|
|
4756
|
+
(0, import_react25.useEffect)(() => {
|
|
4630
4757
|
mounted.current = true;
|
|
4631
4758
|
return () => {
|
|
4632
4759
|
mounted.current = false;
|
|
4633
4760
|
[...tasks.current.keys()].forEach(cancel);
|
|
4634
4761
|
};
|
|
4635
4762
|
}, []);
|
|
4636
|
-
(0,
|
|
4763
|
+
(0, import_react25.useEffect)(() => {
|
|
4637
4764
|
for (const uid of tasks.current.keys()) if (!files.some((file) => file.uid === uid)) cancel(uid);
|
|
4638
4765
|
if (preview && !files.some((file) => file.uid === preview.uid)) setPreview(void 0);
|
|
4639
4766
|
}, [files, preview]);
|
|
@@ -4739,7 +4866,7 @@ var UploadRoot = (0, import_react24.forwardRef)(function UploadRoot2({
|
|
|
4739
4866
|
} catch {
|
|
4740
4867
|
}
|
|
4741
4868
|
}
|
|
4742
|
-
(0,
|
|
4869
|
+
(0, import_react25.useImperativeHandle)(ref, () => ({
|
|
4743
4870
|
upload: async (uid) => {
|
|
4744
4871
|
await Promise.all(filesRef.current.filter((file) => (!uid || file.uid === uid) && file.status !== "done").map(start));
|
|
4745
4872
|
},
|
|
@@ -4791,16 +4918,16 @@ var UploadRoot = (0, import_react24.forwardRef)(function UploadRoot2({
|
|
|
4791
4918
|
event.preventDefault();
|
|
4792
4919
|
ingest(selected.map((file) => ({ file, path: file.name })));
|
|
4793
4920
|
}
|
|
4794
|
-
const trigger = !(listType === "picture-card" && full) && /* @__PURE__ */ (0,
|
|
4921
|
+
const trigger = !(listType === "picture-card" && full) && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "sia-upload__trigger", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { className: "sia-upload__choose", "aria-label": compactCard ? directory ? "\u9009\u62E9\u6587\u4EF6\u5939" : "\u9009\u62E9\u6587\u4EF6" : void 0, disabled: disabled || full, onClick: () => {
|
|
4795
4922
|
if (!disabled && !full && onChoose?.() !== false) inputRef.current?.click();
|
|
4796
|
-
}, children: children ?? (listType === "picture-card" ? /* @__PURE__ */ (0,
|
|
4797
|
-
/* @__PURE__ */ (0,
|
|
4798
|
-
/* @__PURE__ */ (0,
|
|
4799
|
-
] }) : /* @__PURE__ */ (0,
|
|
4800
|
-
/* @__PURE__ */ (0,
|
|
4923
|
+
}, children: children ?? (listType === "picture-card" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
|
|
4924
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { name: "plus", size: 24 }),
|
|
4925
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: "\u4E0A\u4F20\u56FE\u7247" })
|
|
4926
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
|
|
4927
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { name: "upload", size: 16 }),
|
|
4801
4928
|
directory ? "\u9009\u62E9\u6587\u4EF6\u5939" : "\u9009\u62E9\u6587\u4EF6"
|
|
4802
4929
|
] })) }) });
|
|
4803
|
-
return /* @__PURE__ */ (0,
|
|
4930
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
4804
4931
|
"div",
|
|
4805
4932
|
{
|
|
4806
4933
|
...withTitleTooltip(props),
|
|
@@ -4821,7 +4948,7 @@ var UploadRoot = (0, import_react24.forwardRef)(function UploadRoot2({
|
|
|
4821
4948
|
},
|
|
4822
4949
|
onDrop: (event) => void handleDrop(event),
|
|
4823
4950
|
children: [
|
|
4824
|
-
/* @__PURE__ */ (0,
|
|
4951
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
4825
4952
|
"input",
|
|
4826
4953
|
{
|
|
4827
4954
|
ref: inputRef,
|
|
@@ -4838,12 +4965,12 @@ var UploadRoot = (0, import_react24.forwardRef)(function UploadRoot2({
|
|
|
4838
4965
|
}
|
|
4839
4966
|
),
|
|
4840
4967
|
listType !== "picture-card" && trigger,
|
|
4841
|
-
showUploadList && listType === "text" && files.length > 0 && /* @__PURE__ */ (0,
|
|
4968
|
+
showUploadList && listType === "text" && files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "sia-upload__list-heading", role: "status", children: [
|
|
4842
4969
|
"\u5DF2\u9009\u6587\u4EF6 ",
|
|
4843
|
-
/* @__PURE__ */ (0,
|
|
4970
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "sia-upload__count", children: files.length })
|
|
4844
4971
|
] }),
|
|
4845
|
-
/* @__PURE__ */ (0,
|
|
4846
|
-
showUploadList && files.map((file) => /* @__PURE__ */ (0,
|
|
4972
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "sia-upload__list", children: [
|
|
4973
|
+
showUploadList && files.map((file) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(UploadItem, { file, files, props: { listType, disabled, itemRender, onPreview, downloadRequest, accept }, actions: {
|
|
4847
4974
|
upload: () => start(file),
|
|
4848
4975
|
abort: () => abort(file.uid),
|
|
4849
4976
|
remove: () => remove(file.uid),
|
|
@@ -4860,23 +4987,23 @@ var UploadRoot = (0, import_react24.forwardRef)(function UploadRoot2({
|
|
|
4860
4987
|
} }, file.uid)),
|
|
4861
4988
|
listType === "picture-card" && trigger
|
|
4862
4989
|
] }),
|
|
4863
|
-
/* @__PURE__ */ (0,
|
|
4990
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ImagePreview, { open: !!preview && !!(preview.url || previewSource), src: preview?.url || previewSource, alt: preview?.name, onOpenChange: (open) => {
|
|
4864
4991
|
if (!open) setPreview(void 0);
|
|
4865
4992
|
} })
|
|
4866
4993
|
]
|
|
4867
4994
|
}
|
|
4868
4995
|
);
|
|
4869
4996
|
});
|
|
4870
|
-
var UploadDragger = (0,
|
|
4871
|
-
return /* @__PURE__ */ (0,
|
|
4872
|
-
/* @__PURE__ */ (0,
|
|
4873
|
-
/* @__PURE__ */ (0,
|
|
4997
|
+
var UploadDragger = (0, import_react25.forwardRef)(function UploadDragger2({ hint = "\u652F\u6301\u5355\u4E2A\u6216\u6279\u91CF\u4E0A\u4F20", children, className = "", ...props }, ref) {
|
|
4998
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(UploadRoot, { ...props, ref, className: `sia-upload-dragger ${className}`.trim(), children: children ?? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "sia-upload-dragger__content", children: [
|
|
4999
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { name: "upload", size: 32 }),
|
|
5000
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("strong", { children: [
|
|
4874
5001
|
"\u70B9\u51FB\u6216\u62D6\u62FD",
|
|
4875
5002
|
props.directory ? "\u6587\u4EF6\u5939" : "\u6587\u4EF6",
|
|
4876
5003
|
"\u5230\u6B64\u533A\u57DF\u4E0A\u4F20"
|
|
4877
5004
|
] }),
|
|
4878
|
-
/* @__PURE__ */ (0,
|
|
4879
|
-
props.pastable && /* @__PURE__ */ (0,
|
|
5005
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: hint }),
|
|
5006
|
+
props.pastable && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: "\u805A\u7126\u6B64\u533A\u57DF\u540E\u6309 Ctrl / \u2318 + V \u7C98\u8D34\u6587\u4EF6\u6216\u622A\u56FE" })
|
|
4880
5007
|
] }) });
|
|
4881
5008
|
});
|
|
4882
5009
|
var Upload = Object.assign(UploadRoot, {
|
|
@@ -4887,94 +5014,28 @@ var Upload = Object.assign(UploadRoot, {
|
|
|
4887
5014
|
});
|
|
4888
5015
|
|
|
4889
5016
|
// src/components/Breadcrumb.tsx
|
|
4890
|
-
var
|
|
5017
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
4891
5018
|
function Breadcrumb({ items, separator = "/", itemRender, className = "", ...props }) {
|
|
4892
|
-
return /* @__PURE__ */ (0,
|
|
5019
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("nav", { "aria-label": "\u9762\u5305\u5C51\u5BFC\u822A", ...withTitleTooltip(props), className: `sia-breadcrumb ${className}`.trim(), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("ol", { className: "sia-breadcrumb__list", children: items.map((item, index) => {
|
|
4893
5020
|
const current = index === items.length - 1;
|
|
4894
|
-
const content = /* @__PURE__ */ (0,
|
|
4895
|
-
item.icon ? /* @__PURE__ */ (0,
|
|
4896
|
-
/* @__PURE__ */ (0,
|
|
5021
|
+
const content = /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
|
|
5022
|
+
item.icon ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "sia-breadcrumb__icon", "aria-hidden": "true", children: item.icon }) : null,
|
|
5023
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "sia-breadcrumb__title", children: item.title })
|
|
4897
5024
|
] });
|
|
4898
5025
|
const custom = itemRender?.(item, index, items);
|
|
4899
|
-
const label = item.disabled ? /* @__PURE__ */ (0,
|
|
4900
|
-
return /* @__PURE__ */ (0,
|
|
4901
|
-
/* @__PURE__ */ (0,
|
|
5026
|
+
const label = item.disabled ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "sia-breadcrumb__label", "aria-disabled": "true", children: content }) : custom !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "sia-breadcrumb__label", children: custom }) : item.href ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("a", { className: "sia-breadcrumb__label", href: item.href, target: item.target, rel: item.target === "_blank" ? "noopener noreferrer" : void 0, onClick: item.onClick, children: content }) : item.onClick ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button, { className: "sia-breadcrumb__label", variant: "text", onClick: item.onClick, children: content }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "sia-breadcrumb__label", children: content });
|
|
5027
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("li", { className: `sia-breadcrumb__item${current ? " is-current" : ""}${item.disabled ? " is-disabled" : ""}`, children: [
|
|
5028
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "sia-breadcrumb__entry", "aria-current": current ? "page" : void 0, children: [
|
|
4902
5029
|
label,
|
|
4903
|
-
item.menu?.items.length ? /* @__PURE__ */ (0,
|
|
5030
|
+
item.menu?.items.length ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Dropdown, { menu: item.menu, trigger: ["click"], disabled: item.disabled, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button, { className: "sia-breadcrumb__menu-trigger", variant: "text", size: "small", disabled: item.disabled, "aria-label": `\u5C55\u5F00${typeof item.title === "string" ? item.title : "\u5C42\u7EA7"}\u83DC\u5355`, icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { name: "chevron-down", size: 12 }) }) }) : null
|
|
4904
5031
|
] }),
|
|
4905
|
-
!current ? /* @__PURE__ */ (0,
|
|
5032
|
+
!current ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "sia-breadcrumb__separator", "aria-hidden": "true", children: item.separator === void 0 ? separator : item.separator }) : null
|
|
4906
5033
|
] }, item.key ?? index);
|
|
4907
5034
|
}) }) });
|
|
4908
5035
|
}
|
|
4909
5036
|
|
|
4910
5037
|
// src/components/Typography.tsx
|
|
4911
5038
|
var import_react26 = require("react");
|
|
4912
|
-
|
|
4913
|
-
// src/components/TextArea.tsx
|
|
4914
|
-
var import_react25 = require("react");
|
|
4915
|
-
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
4916
|
-
var TextArea = (0, import_react25.forwardRef)(function TextArea2({
|
|
4917
|
-
label,
|
|
4918
|
-
hint,
|
|
4919
|
-
status = "default",
|
|
4920
|
-
size: sizeProp,
|
|
4921
|
-
showCount = false,
|
|
4922
|
-
placeholder,
|
|
4923
|
-
placeholderMode,
|
|
4924
|
-
className = "",
|
|
4925
|
-
id,
|
|
4926
|
-
disabled,
|
|
4927
|
-
value,
|
|
4928
|
-
defaultValue,
|
|
4929
|
-
maxLength,
|
|
4930
|
-
onChange,
|
|
4931
|
-
...props
|
|
4932
|
-
}, ref) {
|
|
4933
|
-
const size = useControlSize(sizeProp);
|
|
4934
|
-
const fallbackId = (0, import_react25.useId)();
|
|
4935
|
-
const textAreaId = id ?? fallbackId;
|
|
4936
|
-
const [uncontrolledValue, setUncontrolledValue] = (0, import_react25.useState)(() => defaultValue === void 0 ? "" : String(defaultValue));
|
|
4937
|
-
const currentText = value !== void 0 ? String(value) : uncontrolledValue;
|
|
4938
|
-
const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: currentText.length > 0 });
|
|
4939
|
-
const hintId = `${textAreaId}-hint`;
|
|
4940
|
-
const describedBy = [props["aria-describedby"], hint ? hintId : null].filter(Boolean).join(" ") || void 0;
|
|
4941
|
-
function handleChange(event) {
|
|
4942
|
-
setUncontrolledValue(event.target.value);
|
|
4943
|
-
onChange?.(event);
|
|
4944
|
-
}
|
|
4945
|
-
const control = /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: `sia-textarea-control sia-textarea-control--${size} sia-textarea-control--${status}${floating.className}${disabled ? " is-disabled" : ""}`, children: [
|
|
4946
|
-
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
4947
|
-
"textarea",
|
|
4948
|
-
{
|
|
4949
|
-
...withTitleTooltip(props),
|
|
4950
|
-
ref,
|
|
4951
|
-
id: textAreaId,
|
|
4952
|
-
className: "sia-textarea",
|
|
4953
|
-
disabled,
|
|
4954
|
-
value,
|
|
4955
|
-
defaultValue,
|
|
4956
|
-
maxLength,
|
|
4957
|
-
placeholder,
|
|
4958
|
-
"aria-describedby": describedBy,
|
|
4959
|
-
"aria-invalid": status === "error" || void 0,
|
|
4960
|
-
onChange: handleChange
|
|
4961
|
-
}
|
|
4962
|
-
),
|
|
4963
|
-
floating.label,
|
|
4964
|
-
showCount ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: `sia-textarea-control__count${maxLength !== void 0 && currentText.length >= maxLength ? " is-limit" : ""}`, "aria-live": "polite", children: [
|
|
4965
|
-
currentText.length,
|
|
4966
|
-
maxLength !== void 0 ? `/${maxLength}` : null
|
|
4967
|
-
] }) : null
|
|
4968
|
-
] });
|
|
4969
|
-
if (!label && !hint) return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: `sia-field ${className}`.trim(), children: control });
|
|
4970
|
-
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: `sia-field ${className}`.trim(), children: [
|
|
4971
|
-
label ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("label", { className: "sia-field__label", htmlFor: textAreaId, children: label }) : null,
|
|
4972
|
-
control,
|
|
4973
|
-
hint ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { id: hintId, className: `sia-field__hint sia-field__hint--${status}`, children: hint }) : null
|
|
4974
|
-
] });
|
|
4975
|
-
});
|
|
4976
|
-
|
|
4977
|
-
// src/components/Typography.tsx
|
|
4978
5039
|
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
4979
5040
|
function TypographyContent({
|
|
4980
5041
|
as: Tag2 = "span",
|