@seedgrid/fe-components 2026.3.5 → 2026.3.11-1
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/buttons/SgButton.d.ts +2 -0
- package/dist/buttons/SgButton.d.ts.map +1 -1
- package/dist/buttons/SgButton.js +4 -3
- package/dist/buttons/SgFloatActionButton.d.ts +2 -3
- package/dist/buttons/SgFloatActionButton.d.ts.map +1 -1
- package/dist/buttons/SgFloatActionButton.js +3 -3
- package/dist/buttons/SgSplitButton.d.ts +1 -0
- package/dist/buttons/SgSplitButton.d.ts.map +1 -1
- package/dist/buttons/SgSplitButton.js +2 -2
- package/dist/commons/SgBadge.d.ts +2 -1
- package/dist/commons/SgBadge.d.ts.map +1 -1
- package/dist/commons/SgBadge.js +8 -7
- package/dist/commons/SgBadgeOverlay.d.ts +1 -0
- package/dist/commons/SgBadgeOverlay.d.ts.map +1 -1
- package/dist/commons/SgBadgeOverlay.js +2 -2
- package/dist/commons/SgToastHost.d.ts +17 -0
- package/dist/commons/SgToastHost.d.ts.map +1 -0
- package/dist/commons/SgToastHost.js +45 -0
- package/dist/commons/SgToaster.d.ts +3 -1
- package/dist/commons/SgToaster.d.ts.map +1 -1
- package/dist/commons/SgToaster.js +13 -0
- package/dist/commons/sgToastHostRegistry.d.ts +7 -0
- package/dist/commons/sgToastHostRegistry.d.ts.map +1 -0
- package/dist/commons/sgToastHostRegistry.js +41 -0
- package/dist/digits/segment-digit/SgSegmentDigit.d.ts +15 -0
- package/dist/digits/segment-digit/SgSegmentDigit.d.ts.map +1 -0
- package/dist/digits/segment-digit/SgSegmentDigit.js +96 -0
- package/dist/digits/segment-digit/index.d.ts +3 -0
- package/dist/digits/segment-digit/index.d.ts.map +1 -0
- package/dist/digits/segment-digit/index.js +1 -0
- package/dist/digits/seven-segment-digit/SgSevenSegmentDigit.d.ts +36 -0
- package/dist/digits/seven-segment-digit/SgSevenSegmentDigit.d.ts.map +1 -0
- package/dist/digits/seven-segment-digit/SgSevenSegmentDigit.js +123 -0
- package/dist/digits/seven-segment-digit/index.d.ts +3 -0
- package/dist/digits/seven-segment-digit/index.d.ts.map +1 -0
- package/dist/digits/seven-segment-digit/index.js +1 -0
- package/dist/gadgets/calendar/SgCalendar.d.ts +29 -0
- package/dist/gadgets/calendar/SgCalendar.d.ts.map +1 -0
- package/dist/gadgets/calendar/SgCalendar.js +248 -0
- package/dist/gadgets/calendar/index.d.ts +3 -0
- package/dist/gadgets/calendar/index.d.ts.map +1 -0
- package/dist/gadgets/calendar/index.js +1 -0
- package/dist/gadgets/clock/SgClock.d.ts +6 -2
- package/dist/gadgets/clock/SgClock.d.ts.map +1 -1
- package/dist/gadgets/clock/SgClock.js +84 -125
- package/dist/gadgets/string-animator/SgStringAnimator.d.ts +1 -1
- package/dist/gadgets/string-animator/SgStringAnimator.d.ts.map +1 -1
- package/dist/gadgets/string-animator/SgStringAnimator.js +1 -1
- package/dist/i18n/en-US.d.ts.map +1 -1
- package/dist/i18n/en-US.js +26 -1
- package/dist/i18n/es.d.ts.map +1 -1
- package/dist/i18n/es.js +26 -1
- package/dist/i18n/pt-BR.d.ts.map +1 -1
- package/dist/i18n/pt-BR.js +26 -1
- package/dist/i18n/pt-PT.d.ts.map +1 -1
- package/dist/i18n/pt-PT.js +26 -1
- package/dist/index.d.ts +22 -4
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +10 -1
- package/dist/inputs/SgCheckboxGroup.d.ts +46 -0
- package/dist/inputs/SgCheckboxGroup.d.ts.map +1 -0
- package/dist/inputs/SgCheckboxGroup.js +158 -0
- package/dist/inputs/SgDatatable.d.ts +104 -0
- package/dist/inputs/SgDatatable.d.ts.map +1 -0
- package/dist/inputs/SgDatatable.js +441 -0
- package/dist/inputs/{SgCurrencyEdit.d.ts → SgInputCurrency.d.ts} +5 -3
- package/dist/inputs/SgInputCurrency.d.ts.map +1 -0
- package/dist/inputs/{SgCurrencyEdit.js → SgInputCurrency.js} +7 -5
- package/dist/inputs/SgOrderList.d.ts +52 -0
- package/dist/inputs/SgOrderList.d.ts.map +1 -0
- package/dist/inputs/SgOrderList.js +316 -0
- package/dist/inputs/SgPickList.d.ts +71 -0
- package/dist/inputs/SgPickList.d.ts.map +1 -0
- package/dist/inputs/SgPickList.js +362 -0
- package/dist/inputs/SgRadioGroup.d.ts +1 -2
- package/dist/inputs/SgRadioGroup.d.ts.map +1 -1
- package/dist/inputs/SgRadioGroup.js +5 -49
- package/dist/inputs/SgRating.d.ts +2 -0
- package/dist/inputs/SgRating.d.ts.map +1 -1
- package/dist/inputs/SgRating.js +2 -2
- package/dist/inputs/SgTextEditor.d.ts +2 -0
- package/dist/inputs/SgTextEditor.d.ts.map +1 -1
- package/dist/inputs/SgTextEditor.js +2 -2
- package/dist/layout/SgCard.d.ts +13 -1
- package/dist/layout/SgCard.d.ts.map +1 -1
- package/dist/layout/SgCard.js +231 -15
- package/dist/layout/SgCarousel.d.ts +2 -0
- package/dist/layout/SgCarousel.d.ts.map +1 -1
- package/dist/layout/SgCarousel.js +2 -2
- package/dist/layout/SgDockLayout.d.ts +1 -0
- package/dist/layout/SgDockLayout.d.ts.map +1 -1
- package/dist/layout/SgDockLayout.js +2 -2
- package/dist/layout/SgDockZone.d.ts +1 -0
- package/dist/layout/SgDockZone.d.ts.map +1 -1
- package/dist/layout/SgDockZone.js +2 -2
- package/dist/layout/SgGroupBox.d.ts +1 -0
- package/dist/layout/SgGroupBox.d.ts.map +1 -1
- package/dist/layout/SgGroupBox.js +3 -2
- package/dist/layout/SgMenu.d.ts +2 -2
- package/dist/layout/SgMenu.d.ts.map +1 -1
- package/dist/layout/SgMenu.js +22 -22
- package/dist/layout/SgPageControl.d.ts +2 -1
- package/dist/layout/SgPageControl.d.ts.map +1 -1
- package/dist/layout/SgPageControl.js +4 -4
- package/dist/layout/SgToolBar.d.ts +2 -0
- package/dist/layout/SgToolBar.d.ts.map +1 -1
- package/dist/layout/SgToolBar.js +4 -3
- package/dist/layout/SgTreeView.d.ts +1 -0
- package/dist/layout/SgTreeView.d.ts.map +1 -1
- package/dist/layout/SgTreeView.js +2 -2
- package/dist/others/SgPlayground.d.ts +2 -0
- package/dist/others/SgPlayground.d.ts.map +1 -1
- package/dist/others/SgPlayground.js +4 -4
- package/dist/overlay/SgConfirmationDialog.d.ts +34 -0
- package/dist/overlay/SgConfirmationDialog.d.ts.map +1 -0
- package/dist/overlay/SgConfirmationDialog.js +81 -0
- package/dist/overlay/SgDialog.d.ts +6 -0
- package/dist/overlay/SgDialog.d.ts.map +1 -1
- package/dist/overlay/SgDialog.js +28 -3
- package/dist/sandbox.cjs +100 -82
- package/dist/wizard/SgWizard.d.ts +2 -0
- package/dist/wizard/SgWizard.d.ts.map +1 -1
- package/dist/wizard/SgWizard.js +2 -2
- package/package.json +1 -1
- package/dist/inputs/SgCurrencyEdit.d.ts.map +0 -1
|
@@ -0,0 +1,316 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import React from "react";
|
|
4
|
+
import { SgButton } from "../buttons/SgButton";
|
|
5
|
+
import { SgGroupBox } from "../layout/SgGroupBox";
|
|
6
|
+
import { t, useComponentsI18n } from "../i18n";
|
|
7
|
+
function cn(...parts) {
|
|
8
|
+
return parts.filter(Boolean).join(" ");
|
|
9
|
+
}
|
|
10
|
+
function uniqueValues(values) {
|
|
11
|
+
return Array.from(new Set(values));
|
|
12
|
+
}
|
|
13
|
+
function isSameValueList(a, b) {
|
|
14
|
+
if (a.length !== b.length)
|
|
15
|
+
return false;
|
|
16
|
+
for (let index = 0; index < a.length; index += 1) {
|
|
17
|
+
if (a[index] !== b[index])
|
|
18
|
+
return false;
|
|
19
|
+
}
|
|
20
|
+
return true;
|
|
21
|
+
}
|
|
22
|
+
function isSameOrder(a, b) {
|
|
23
|
+
if (a.length !== b.length)
|
|
24
|
+
return false;
|
|
25
|
+
for (let index = 0; index < a.length; index += 1) {
|
|
26
|
+
if (a[index] !== b[index])
|
|
27
|
+
return false;
|
|
28
|
+
}
|
|
29
|
+
return true;
|
|
30
|
+
}
|
|
31
|
+
function getMovableSelection(items, selection) {
|
|
32
|
+
const selectedValues = new Set(selection);
|
|
33
|
+
return new Set(items
|
|
34
|
+
.filter((item) => selectedValues.has(item.value) && !item.disabled)
|
|
35
|
+
.map((item) => item.value));
|
|
36
|
+
}
|
|
37
|
+
function moveSelectionTop(items, selected) {
|
|
38
|
+
if (items.length < 2 || selected.size === 0)
|
|
39
|
+
return items;
|
|
40
|
+
const picked = items.filter((item) => selected.has(item.value));
|
|
41
|
+
if (picked.length === 0)
|
|
42
|
+
return items;
|
|
43
|
+
const rest = items.filter((item) => !selected.has(item.value));
|
|
44
|
+
const next = [...picked, ...rest];
|
|
45
|
+
return isSameOrder(items, next) ? items : next;
|
|
46
|
+
}
|
|
47
|
+
function moveSelectionBottom(items, selected) {
|
|
48
|
+
if (items.length < 2 || selected.size === 0)
|
|
49
|
+
return items;
|
|
50
|
+
const picked = items.filter((item) => selected.has(item.value));
|
|
51
|
+
if (picked.length === 0)
|
|
52
|
+
return items;
|
|
53
|
+
const rest = items.filter((item) => !selected.has(item.value));
|
|
54
|
+
const next = [...rest, ...picked];
|
|
55
|
+
return isSameOrder(items, next) ? items : next;
|
|
56
|
+
}
|
|
57
|
+
function moveSelectionUp(items, selected) {
|
|
58
|
+
if (items.length < 2 || selected.size === 0)
|
|
59
|
+
return items;
|
|
60
|
+
const next = [...items];
|
|
61
|
+
let moved = false;
|
|
62
|
+
for (let index = 1; index < next.length; index += 1) {
|
|
63
|
+
const current = next[index];
|
|
64
|
+
const previous = next[index - 1];
|
|
65
|
+
if (!selected.has(current.value) || selected.has(previous.value))
|
|
66
|
+
continue;
|
|
67
|
+
next[index] = previous;
|
|
68
|
+
next[index - 1] = current;
|
|
69
|
+
moved = true;
|
|
70
|
+
}
|
|
71
|
+
return moved ? next : items;
|
|
72
|
+
}
|
|
73
|
+
function moveSelectionDown(items, selected) {
|
|
74
|
+
if (items.length < 2 || selected.size === 0)
|
|
75
|
+
return items;
|
|
76
|
+
const next = [...items];
|
|
77
|
+
let moved = false;
|
|
78
|
+
for (let index = next.length - 2; index >= 0; index -= 1) {
|
|
79
|
+
const current = next[index];
|
|
80
|
+
const nextItem = next[index + 1];
|
|
81
|
+
if (!selected.has(current.value) || selected.has(nextItem.value))
|
|
82
|
+
continue;
|
|
83
|
+
next[index] = nextItem;
|
|
84
|
+
next[index + 1] = current;
|
|
85
|
+
moved = true;
|
|
86
|
+
}
|
|
87
|
+
return moved ? next : items;
|
|
88
|
+
}
|
|
89
|
+
function moveSingleItem(items, fromIndex, toIndex) {
|
|
90
|
+
if (items.length < 2)
|
|
91
|
+
return items;
|
|
92
|
+
if (fromIndex < 0 || fromIndex >= items.length)
|
|
93
|
+
return items;
|
|
94
|
+
if (toIndex < 0 || toIndex > items.length)
|
|
95
|
+
return items;
|
|
96
|
+
if (fromIndex === toIndex || fromIndex + 1 === toIndex)
|
|
97
|
+
return items;
|
|
98
|
+
const next = [...items];
|
|
99
|
+
const [picked] = next.splice(fromIndex, 1);
|
|
100
|
+
if (!picked)
|
|
101
|
+
return items;
|
|
102
|
+
const targetIndex = fromIndex < toIndex ? toIndex - 1 : toIndex;
|
|
103
|
+
const insertAt = Math.max(0, Math.min(targetIndex, next.length));
|
|
104
|
+
next.splice(insertAt, 0, picked);
|
|
105
|
+
return isSameOrder(items, next) ? items : next;
|
|
106
|
+
}
|
|
107
|
+
function resolveMessage(translated, key, fallback) {
|
|
108
|
+
return translated === key ? fallback : translated;
|
|
109
|
+
}
|
|
110
|
+
function SgOrderListBase(props, imperativeRef) {
|
|
111
|
+
const i18n = useComponentsI18n();
|
|
112
|
+
const { id, title, source, value: controlledValue, onChange, selectedValues: controlledSelection, onSelectionChange, selectionMode = "multiple", showControls = true, controlsPosition = "left", draggable = true, disabled = false, readOnly = false, emptyMessage, itemTemplate, className = "", style, listClassName = "", itemClassName = "", groupBoxProps = {} } = props;
|
|
113
|
+
const [internalItems, setInternalItems] = React.useState(() => controlledValue ?? source);
|
|
114
|
+
const [internalSelection, setInternalSelection] = React.useState(() => uniqueValues(controlledSelection ?? []));
|
|
115
|
+
const [anchorValue, setAnchorValue] = React.useState(null);
|
|
116
|
+
const [draggingIndex, setDraggingIndex] = React.useState(null);
|
|
117
|
+
const [dropIndex, setDropIndex] = React.useState(null);
|
|
118
|
+
const isControlled = controlledValue !== undefined;
|
|
119
|
+
const isSelectionControlled = controlledSelection !== undefined;
|
|
120
|
+
React.useEffect(() => {
|
|
121
|
+
if (isControlled)
|
|
122
|
+
return;
|
|
123
|
+
setInternalItems(source);
|
|
124
|
+
}, [source, isControlled]);
|
|
125
|
+
const currentItems = isControlled ? controlledValue : internalItems;
|
|
126
|
+
const rawSelection = isSelectionControlled ? (controlledSelection ?? []) : internalSelection;
|
|
127
|
+
const currentSelection = React.useMemo(() => {
|
|
128
|
+
const validValues = new Set(currentItems.map((item) => item.value));
|
|
129
|
+
return uniqueValues(rawSelection.filter((value) => validValues.has(value)));
|
|
130
|
+
}, [rawSelection, currentItems]);
|
|
131
|
+
const selectedSet = React.useMemo(() => new Set(currentSelection), [currentSelection]);
|
|
132
|
+
React.useEffect(() => {
|
|
133
|
+
if (isSelectionControlled)
|
|
134
|
+
return;
|
|
135
|
+
setInternalSelection((previous) => {
|
|
136
|
+
const validValues = new Set(currentItems.map((item) => item.value));
|
|
137
|
+
const next = uniqueValues(previous.filter((value) => validValues.has(value)));
|
|
138
|
+
return isSameValueList(previous, next) ? previous : next;
|
|
139
|
+
});
|
|
140
|
+
}, [currentItems, isSelectionControlled]);
|
|
141
|
+
const canInteract = !disabled && !readOnly;
|
|
142
|
+
const allowDrag = draggable && canInteract;
|
|
143
|
+
const movableSelection = React.useMemo(() => getMovableSelection(currentItems, currentSelection), [currentItems, currentSelection]);
|
|
144
|
+
const commitItems = React.useCallback((nextItems) => {
|
|
145
|
+
if (!isControlled)
|
|
146
|
+
setInternalItems(nextItems);
|
|
147
|
+
onChange?.(nextItems);
|
|
148
|
+
}, [isControlled, onChange]);
|
|
149
|
+
const commitSelection = React.useCallback((nextSelection) => {
|
|
150
|
+
const normalized = uniqueValues(nextSelection);
|
|
151
|
+
if (!isSelectionControlled)
|
|
152
|
+
setInternalSelection(normalized);
|
|
153
|
+
onSelectionChange?.(normalized);
|
|
154
|
+
}, [isSelectionControlled, onSelectionChange]);
|
|
155
|
+
const applyMove = React.useCallback((direction) => {
|
|
156
|
+
if (!canInteract || movableSelection.size === 0)
|
|
157
|
+
return;
|
|
158
|
+
let nextItems = currentItems;
|
|
159
|
+
if (direction === "top")
|
|
160
|
+
nextItems = moveSelectionTop(currentItems, movableSelection);
|
|
161
|
+
if (direction === "up")
|
|
162
|
+
nextItems = moveSelectionUp(currentItems, movableSelection);
|
|
163
|
+
if (direction === "down")
|
|
164
|
+
nextItems = moveSelectionDown(currentItems, movableSelection);
|
|
165
|
+
if (direction === "bottom")
|
|
166
|
+
nextItems = moveSelectionBottom(currentItems, movableSelection);
|
|
167
|
+
if (nextItems !== currentItems)
|
|
168
|
+
commitItems(nextItems);
|
|
169
|
+
}, [canInteract, commitItems, currentItems, movableSelection]);
|
|
170
|
+
React.useImperativeHandle(imperativeRef, () => ({
|
|
171
|
+
getItems: () => currentItems,
|
|
172
|
+
setItems: (items) => commitItems(items),
|
|
173
|
+
getSelection: () => currentSelection,
|
|
174
|
+
setSelection: (values) => commitSelection(values),
|
|
175
|
+
moveTop: () => applyMove("top"),
|
|
176
|
+
moveUp: () => applyMove("up"),
|
|
177
|
+
moveDown: () => applyMove("down"),
|
|
178
|
+
moveBottom: () => applyMove("bottom"),
|
|
179
|
+
clearSelection: () => commitSelection([])
|
|
180
|
+
}), [applyMove, commitItems, commitSelection, currentItems, currentSelection]);
|
|
181
|
+
const handleItemSelection = React.useCallback((event, item, index) => {
|
|
182
|
+
if (!canInteract || item.disabled)
|
|
183
|
+
return;
|
|
184
|
+
const itemValue = item.value;
|
|
185
|
+
if (selectionMode === "single") {
|
|
186
|
+
commitSelection([itemValue]);
|
|
187
|
+
setAnchorValue(itemValue);
|
|
188
|
+
return;
|
|
189
|
+
}
|
|
190
|
+
if (event.shiftKey && anchorValue !== null) {
|
|
191
|
+
const anchorIndex = currentItems.findIndex((entry) => entry.value === anchorValue);
|
|
192
|
+
if (anchorIndex >= 0) {
|
|
193
|
+
const start = Math.min(anchorIndex, index);
|
|
194
|
+
const end = Math.max(anchorIndex, index);
|
|
195
|
+
const rangeValues = currentItems
|
|
196
|
+
.slice(start, end + 1)
|
|
197
|
+
.filter((entry) => !entry.disabled)
|
|
198
|
+
.map((entry) => entry.value);
|
|
199
|
+
if (event.metaKey || event.ctrlKey) {
|
|
200
|
+
commitSelection([...currentSelection, ...rangeValues]);
|
|
201
|
+
}
|
|
202
|
+
else {
|
|
203
|
+
commitSelection(rangeValues);
|
|
204
|
+
}
|
|
205
|
+
return;
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
const alreadySelected = selectedSet.has(itemValue);
|
|
209
|
+
const nextSelection = alreadySelected
|
|
210
|
+
? currentSelection.filter((value) => value !== itemValue)
|
|
211
|
+
: [...currentSelection, itemValue];
|
|
212
|
+
commitSelection(nextSelection);
|
|
213
|
+
setAnchorValue(itemValue);
|
|
214
|
+
}, [
|
|
215
|
+
anchorValue,
|
|
216
|
+
canInteract,
|
|
217
|
+
commitSelection,
|
|
218
|
+
currentItems,
|
|
219
|
+
currentSelection,
|
|
220
|
+
selectedSet,
|
|
221
|
+
selectionMode
|
|
222
|
+
]);
|
|
223
|
+
const clearDragState = React.useCallback(() => {
|
|
224
|
+
setDraggingIndex(null);
|
|
225
|
+
setDropIndex(null);
|
|
226
|
+
}, []);
|
|
227
|
+
const handleDragStart = React.useCallback((event, item, index) => {
|
|
228
|
+
if (!allowDrag || item.disabled) {
|
|
229
|
+
event.preventDefault();
|
|
230
|
+
return;
|
|
231
|
+
}
|
|
232
|
+
setDraggingIndex(index);
|
|
233
|
+
setDropIndex(index);
|
|
234
|
+
event.dataTransfer.effectAllowed = "move";
|
|
235
|
+
try {
|
|
236
|
+
event.dataTransfer.setData("text/plain", String(item.value));
|
|
237
|
+
}
|
|
238
|
+
catch {
|
|
239
|
+
// Ignore setData failures in restrictive browser contexts.
|
|
240
|
+
}
|
|
241
|
+
if (!selectedSet.has(item.value)) {
|
|
242
|
+
const nextSelection = selectionMode === "single" ? [item.value] : [item.value];
|
|
243
|
+
commitSelection(nextSelection);
|
|
244
|
+
setAnchorValue(item.value);
|
|
245
|
+
}
|
|
246
|
+
}, [allowDrag, commitSelection, selectedSet, selectionMode]);
|
|
247
|
+
const handleDragOver = React.useCallback((event, index) => {
|
|
248
|
+
if (!allowDrag || draggingIndex === null)
|
|
249
|
+
return;
|
|
250
|
+
event.preventDefault();
|
|
251
|
+
event.dataTransfer.dropEffect = "move";
|
|
252
|
+
setDropIndex(index);
|
|
253
|
+
}, [allowDrag, draggingIndex]);
|
|
254
|
+
const handleDrop = React.useCallback((event, index) => {
|
|
255
|
+
if (!allowDrag || draggingIndex === null)
|
|
256
|
+
return;
|
|
257
|
+
event.preventDefault();
|
|
258
|
+
const nextItems = moveSingleItem(currentItems, draggingIndex, index);
|
|
259
|
+
if (nextItems !== currentItems)
|
|
260
|
+
commitItems(nextItems);
|
|
261
|
+
clearDragState();
|
|
262
|
+
}, [allowDrag, clearDragState, commitItems, currentItems, draggingIndex]);
|
|
263
|
+
const handleItemKeyDown = React.useCallback((event, item, index) => {
|
|
264
|
+
if (event.key === " " || event.key === "Enter") {
|
|
265
|
+
event.preventDefault();
|
|
266
|
+
handleItemSelection(event, item, index);
|
|
267
|
+
return;
|
|
268
|
+
}
|
|
269
|
+
if ((event.ctrlKey || event.metaKey) && event.key === "ArrowUp") {
|
|
270
|
+
event.preventDefault();
|
|
271
|
+
applyMove("up");
|
|
272
|
+
return;
|
|
273
|
+
}
|
|
274
|
+
if ((event.ctrlKey || event.metaKey) && event.key === "ArrowDown") {
|
|
275
|
+
event.preventDefault();
|
|
276
|
+
applyMove("down");
|
|
277
|
+
return;
|
|
278
|
+
}
|
|
279
|
+
if ((event.ctrlKey || event.metaKey) && event.key === "Home") {
|
|
280
|
+
event.preventDefault();
|
|
281
|
+
applyMove("top");
|
|
282
|
+
return;
|
|
283
|
+
}
|
|
284
|
+
if ((event.ctrlKey || event.metaKey) && event.key === "End") {
|
|
285
|
+
event.preventDefault();
|
|
286
|
+
applyMove("bottom");
|
|
287
|
+
}
|
|
288
|
+
}, [applyMove, handleItemSelection]);
|
|
289
|
+
const moveTopLabel = resolveMessage(t(i18n, "components.orderlist.moveTop"), "components.orderlist.moveTop", "Move to top");
|
|
290
|
+
const moveUpLabel = resolveMessage(t(i18n, "components.orderlist.moveUp"), "components.orderlist.moveUp", "Move up");
|
|
291
|
+
const moveDownLabel = resolveMessage(t(i18n, "components.orderlist.moveDown"), "components.orderlist.moveDown", "Move down");
|
|
292
|
+
const moveBottomLabel = resolveMessage(t(i18n, "components.orderlist.moveBottom"), "components.orderlist.moveBottom", "Move to bottom");
|
|
293
|
+
const emptyLabel = emptyMessage ?? resolveMessage(t(i18n, "components.orderlist.empty"), "components.orderlist.empty", "No items available.");
|
|
294
|
+
const canMoveTop = canInteract && moveSelectionTop(currentItems, movableSelection) !== currentItems;
|
|
295
|
+
const canMoveUp = canInteract && moveSelectionUp(currentItems, movableSelection) !== currentItems;
|
|
296
|
+
const canMoveDown = canInteract && moveSelectionDown(currentItems, movableSelection) !== currentItems;
|
|
297
|
+
const canMoveBottom = canInteract && moveSelectionBottom(currentItems, movableSelection) !== currentItems;
|
|
298
|
+
const renderedList = (_jsxs("ul", { id: id, role: "listbox", "aria-multiselectable": selectionMode === "multiple" ? true : undefined, "aria-disabled": disabled || undefined, "aria-readonly": readOnly || undefined, className: cn("w-full min-w-0 overflow-y-auto rounded-lg border border-[rgb(var(--sg-border))] bg-white p-1", "max-h-[22rem]", listClassName), children: [currentItems.length === 0 ? (_jsx("li", { className: "list-none px-3 py-4 text-sm text-[rgb(var(--sg-muted))]", children: emptyLabel })) : (currentItems.map((item, index) => {
|
|
299
|
+
const isItemSelected = selectedSet.has(item.value);
|
|
300
|
+
const isItemDisabled = disabled || Boolean(item.disabled);
|
|
301
|
+
const isDropTarget = dropIndex === index && draggingIndex !== null && draggingIndex !== index;
|
|
302
|
+
const isDragging = draggingIndex === index;
|
|
303
|
+
return (_jsx("li", { className: "list-none", children: _jsxs("button", { type: "button", role: "option", "aria-selected": isItemSelected, draggable: allowDrag && !item.disabled, disabled: isItemDisabled, onClick: (event) => handleItemSelection(event, item, index), onKeyDown: (event) => handleItemKeyDown(event, item, index), onDragStart: (event) => handleDragStart(event, item, index), onDragOver: (event) => handleDragOver(event, index), onDrop: (event) => handleDrop(event, index), onDragEnd: clearDragState, className: cn("group flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sm transition-all", isItemSelected
|
|
304
|
+
? "bg-[rgb(var(--sg-primary-100))] text-[rgb(var(--sg-text))] ring-1 ring-[rgb(var(--sg-primary-300))]"
|
|
305
|
+
: "bg-white text-[rgb(var(--sg-text))] hover:bg-[rgb(var(--sg-primary-50))]", isItemDisabled ? "cursor-not-allowed opacity-60" : "cursor-pointer", allowDrag && !item.disabled ? "active:cursor-grabbing" : "", isDropTarget ? "ring-2 ring-[rgb(var(--sg-primary-400))]" : "", isDragging ? "opacity-50" : "", itemClassName), children: [_jsx("span", { className: "min-w-0 flex-1", children: itemTemplate ? (itemTemplate(item, {
|
|
306
|
+
index,
|
|
307
|
+
selected: isItemSelected,
|
|
308
|
+
disabled: isItemDisabled
|
|
309
|
+
})) : (_jsxs("span", { className: "flex items-center gap-2", children: [item.icon ? _jsx("span", { className: "shrink-0", children: item.icon }) : null, _jsx("span", { className: "truncate", children: item.label })] })) }), allowDrag && !item.disabled ? (_jsx("span", { "aria-hidden": "true", className: "shrink-0 text-xs tracking-wide text-[rgb(var(--sg-muted))]", children: "::" })) : null] }) }, `${item.value}-${index}`));
|
|
310
|
+
})), allowDrag && currentItems.length > 0 ? (_jsx("li", { className: "list-none", children: _jsx("div", { onDragOver: (event) => handleDragOver(event, currentItems.length), onDrop: (event) => handleDrop(event, currentItems.length), className: cn("mt-1 h-3 rounded-md border border-dashed border-transparent transition-colors", dropIndex === currentItems.length ? "border-[rgb(var(--sg-primary-400))] bg-[rgb(var(--sg-primary-100))]" : "") }) })) : null] }));
|
|
311
|
+
const controls = showControls ? (_jsxs("div", { className: "flex shrink-0 flex-col gap-2", children: [_jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canMoveTop, title: moveTopLabel, "aria-label": moveTopLabel, onClick: () => applyMove("top"), children: "Top" }), _jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canMoveUp, title: moveUpLabel, "aria-label": moveUpLabel, onClick: () => applyMove("up"), children: "Up" }), _jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canMoveDown, title: moveDownLabel, "aria-label": moveDownLabel, onClick: () => applyMove("down"), children: "Down" }), _jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canMoveBottom, title: moveBottomLabel, "aria-label": moveBottomLabel, onClick: () => applyMove("bottom"), children: "Bottom" })] })) : null;
|
|
312
|
+
const containerDirection = controlsPosition === "right" ? "flex-row-reverse" : "flex-row";
|
|
313
|
+
const resolvedTitle = (groupBoxProps.title ?? title ?? "").trim() || " ";
|
|
314
|
+
return (_jsx("div", { className: className, style: style, children: _jsx(SgGroupBox, { ...groupBoxProps, title: resolvedTitle, children: _jsxs("div", { className: cn("flex items-start gap-3", containerDirection), children: [controls, _jsx("div", { className: "min-w-0 flex-1", children: renderedList })] }) }) }));
|
|
315
|
+
}
|
|
316
|
+
export const SgOrderList = React.forwardRef((props, ref) => SgOrderListBase(props, ref));
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { type SgGroupBoxProps } from "../layout/SgGroupBox";
|
|
3
|
+
export interface SgPickListItem {
|
|
4
|
+
label: string;
|
|
5
|
+
value: string | number;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
icon?: React.ReactNode;
|
|
8
|
+
data?: unknown;
|
|
9
|
+
}
|
|
10
|
+
export type SgPickListListName = "source" | "target";
|
|
11
|
+
export type SgPickListSelectionMode = "single" | "multiple";
|
|
12
|
+
export type SgPickListFilterMatchMode = "contains" | "startsWith" | "endsWith";
|
|
13
|
+
export type SgPickListChangeType = "moveToTarget" | "moveAllToTarget" | "moveToSource" | "moveAllToSource" | "reorderSource" | "reorderTarget" | "dragdrop";
|
|
14
|
+
export type SgPickListValue = {
|
|
15
|
+
source: SgPickListItem[];
|
|
16
|
+
target: SgPickListItem[];
|
|
17
|
+
};
|
|
18
|
+
export type SgPickListChangeEvent = SgPickListValue & {
|
|
19
|
+
type: SgPickListChangeType;
|
|
20
|
+
};
|
|
21
|
+
export type SgPickListRef = {
|
|
22
|
+
getValue: () => SgPickListValue;
|
|
23
|
+
setValue: (value: SgPickListValue) => void;
|
|
24
|
+
moveToTarget: () => void;
|
|
25
|
+
moveAllToTarget: () => void;
|
|
26
|
+
moveToSource: () => void;
|
|
27
|
+
moveAllToSource: () => void;
|
|
28
|
+
clearSelection: () => void;
|
|
29
|
+
};
|
|
30
|
+
export interface SgPickListProps {
|
|
31
|
+
id?: string;
|
|
32
|
+
title?: string;
|
|
33
|
+
source: SgPickListItem[];
|
|
34
|
+
target: SgPickListItem[];
|
|
35
|
+
value?: SgPickListValue;
|
|
36
|
+
onChange?: (event: SgPickListChangeEvent) => void;
|
|
37
|
+
sourceSelection?: (string | number)[];
|
|
38
|
+
targetSelection?: (string | number)[];
|
|
39
|
+
onSourceSelectionChange?: (values: (string | number)[]) => void;
|
|
40
|
+
onTargetSelectionChange?: (values: (string | number)[]) => void;
|
|
41
|
+
selectionMode?: SgPickListSelectionMode;
|
|
42
|
+
sourceHeader?: string;
|
|
43
|
+
targetHeader?: string;
|
|
44
|
+
showTransferControls?: boolean;
|
|
45
|
+
showSourceControls?: boolean;
|
|
46
|
+
showTargetControls?: boolean;
|
|
47
|
+
showSourceFilter?: boolean;
|
|
48
|
+
showTargetFilter?: boolean;
|
|
49
|
+
sourceFilterPlaceholder?: string;
|
|
50
|
+
targetFilterPlaceholder?: string;
|
|
51
|
+
filterMatchMode?: SgPickListFilterMatchMode;
|
|
52
|
+
draggable?: boolean;
|
|
53
|
+
disabled?: boolean;
|
|
54
|
+
readOnly?: boolean;
|
|
55
|
+
emptyMessage?: string;
|
|
56
|
+
itemTemplate?: (item: SgPickListItem, state: {
|
|
57
|
+
index: number;
|
|
58
|
+
selected: boolean;
|
|
59
|
+
disabled: boolean;
|
|
60
|
+
list: SgPickListListName;
|
|
61
|
+
}) => React.ReactNode;
|
|
62
|
+
className?: string;
|
|
63
|
+
style?: React.CSSProperties;
|
|
64
|
+
listClassName?: string;
|
|
65
|
+
itemClassName?: string;
|
|
66
|
+
groupBoxProps?: Omit<Partial<SgGroupBoxProps>, "children" | "title"> & {
|
|
67
|
+
title?: string;
|
|
68
|
+
};
|
|
69
|
+
}
|
|
70
|
+
export declare const SgPickList: React.ForwardRefExoticComponent<SgPickListProps & React.RefAttributes<SgPickListRef>>;
|
|
71
|
+
//# sourceMappingURL=SgPickList.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SgPickList.d.ts","sourceRoot":"","sources":["../../src/inputs/SgPickList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAGxE,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,QAAQ,CAAC;AACrD,MAAM,MAAM,uBAAuB,GAAG,QAAQ,GAAG,UAAU,CAAC;AAC5D,MAAM,MAAM,yBAAyB,GAAG,UAAU,GAAG,YAAY,GAAG,UAAU,CAAC;AAC/E,MAAM,MAAM,oBAAoB,GAC5B,cAAc,GACd,iBAAiB,GACjB,cAAc,GACd,iBAAiB,GACjB,eAAe,GACf,eAAe,GACf,UAAU,CAAC;AAEf,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,cAAc,EAAE,CAAC;IACzB,MAAM,EAAE,cAAc,EAAE,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,eAAe,GAAG;IACpD,IAAI,EAAE,oBAAoB,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,EAAE,MAAM,eAAe,CAAC;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC3C,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,cAAc,EAAE,CAAC;IACzB,MAAM,EAAE,cAAc,EAAE,CAAC;IACzB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAElD,eAAe,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACtC,eAAe,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACtC,uBAAuB,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;IAChE,uBAAuB,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;IAEhE,aAAa,CAAC,EAAE,uBAAuB,CAAC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,eAAe,CAAC,EAAE,yBAAyB,CAAC;IAE5C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,YAAY,CAAC,EAAE,CACb,IAAI,EAAE,cAAc,EACpB,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,kBAAkB,CAAA;KAAE,KACrF,KAAK,CAAC,SAAS,CAAC;IAErB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAC3F;AAufD,eAAO,MAAM,UAAU,uFAEtB,CAAC"}
|