@plaudit/gutenberg-api-extensions 2.77.3 → 2.77.4
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/build/controls/BaseSortableItemsControl.js +3 -3
- package/build/controls/BaseSortableItemsControl.js.map +1 -1
- package/build/controls/hooks/useSortableItemsModel.d.ts +19 -15
- package/build/controls/hooks/useSortableItemsModel.js +116 -112
- package/build/controls/hooks/useSortableItemsModel.js.map +1 -1
- package/package.json +1 -1
|
@@ -10,13 +10,13 @@ export function BaseSortableItemsControl({ value, onChange, onRemove, onReorder,
|
|
|
10
10
|
const addDisabled = max !== undefined && listLength >= max;
|
|
11
11
|
const removeDisabled = min !== undefined && listLength <= min;
|
|
12
12
|
const { baseControlProps, controlProps } = useBaseControlProps({ ...wrapperProps, label: Label ? _jsx(Label, {}) : label });
|
|
13
|
-
return _jsxs(BaseControl, { ...baseControlProps, children: [_jsx("div", { ...controlProps, className: "plaudit-sortable-items-container", children: _jsx(Reorder.Group, { axis: "y", onReorder: commit, values: keyedValues, children: keyedValues.map((datum, index) => _jsx(SortableItemsListNode, { addDisabled: addDisabled, datum: datum, index: index, listLength: listLength, makeChild: makeChild, makeIndexedItemActions: makeIndexedItemActions, removeDisabled: removeDisabled }, datum
|
|
13
|
+
return _jsxs(BaseControl, { ...baseControlProps, children: [_jsx("div", { ...controlProps, className: "plaudit-sortable-items-container", children: _jsx(Reorder.Group, { axis: "y", onReorder: commit, values: keyedValues, children: keyedValues.map((datum, index) => _jsx(SortableItemsListNode, { addDisabled: addDisabled, datum: datum, index: index, listLength: listLength, makeChild: makeChild, makeIndexedItemActions: makeIndexedItemActions, removeDisabled: removeDisabled }, datum.key)) }) }), buttonsArea({ addHandler, disabled: addDisabled }), Messages && _jsx(Messages, {})] });
|
|
14
14
|
}
|
|
15
15
|
function SortableItemsListNode({ datum, index, listLength, makeChild, makeIndexedItemActions, removeDisabled }) {
|
|
16
|
-
const { remove, moveUp, moveDown, change } = makeIndexedItemActions(index);
|
|
16
|
+
const { remove, moveUp, moveDown, change } = makeIndexedItemActions(index, datum.key);
|
|
17
17
|
//TODO: If used, implement addBefore and addAfter the same way as moveUp and moveDown
|
|
18
18
|
const dragControls = useDragControls();
|
|
19
19
|
const dragStartHandler = useCallback((event) => dragControls.start(event), [dragControls]);
|
|
20
|
-
return _jsxs(Reorder.Item, { className: "plaudit-sortable-items-row", "data-index": index, dragListener: false, dragControls: dragControls, layout: "position", value: datum, children: [_jsxs("div", { className: "plaudit-sortable-items-ordering-controls", children: [_jsx("div", { className: "plaudit-sortable-items-ordering-control", children: _jsx(Icon, { icon: dragHandle, onPointerDown: dragStartHandler }) }), _jsxs("div", { className: "plaudit-sortable-items-ordering-control", children: [_jsx(Button, { icon: "arrow-up", "aria-label": "Move Up", disabled: index < 1, onClick: moveUp }), _jsx(Button, { icon: "arrow-down", "aria-label": "Move Down", disabled: index >= listLength - 1, onClick: moveDown })] })] }), _jsx("div", { className: "plaudit-sortable-items-inputs plaudit-sortable-items-padded", children: makeChild(datum
|
|
20
|
+
return _jsxs(Reorder.Item, { className: "plaudit-sortable-items-row", "data-index": index, dragListener: false, dragControls: dragControls, layout: "position", value: datum, children: [_jsxs("div", { className: "plaudit-sortable-items-ordering-controls", children: [_jsx("div", { className: "plaudit-sortable-items-ordering-control", children: _jsx(Icon, { icon: dragHandle, onPointerDown: dragStartHandler }) }), _jsxs("div", { className: "plaudit-sortable-items-ordering-control", children: [_jsx(Button, { icon: "arrow-up", "aria-label": "Move Up", disabled: index < 1, onClick: moveUp }), _jsx(Button, { icon: "arrow-down", "aria-label": "Move Down", disabled: index >= listLength - 1, onClick: moveDown })] })] }), _jsx("div", { className: "plaudit-sortable-items-inputs plaudit-sortable-items-padded", children: makeChild(datum.value, change, index) }), _jsx("div", { className: "plaudit-sortable-items-presence-controls plaudit-sortable-items-padded", children: _jsx(Button, { icon: "remove", disabled: removeDisabled, onClick: remove, "aria-label": "Remove" }) })] });
|
|
21
21
|
}
|
|
22
22
|
//# sourceMappingURL=BaseSortableItemsControl.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseSortableItemsControl.js","sourceRoot":"","sources":["../../src/controls/BaseSortableItemsControl.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,WAAW,EAAE,MAAM,EAAE,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAE/E,OAAO,EAAC,WAAW,EAAC,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAC,UAAU,EAAE,IAAI,EAAC,MAAM,kBAAkB,CAAC;AAIlD,OAAO,EAAC,OAAO,EAAE,eAAe,EAAC,MAAM,eAAe,CAAC;AAEvD,OAAO,
|
|
1
|
+
{"version":3,"file":"BaseSortableItemsControl.js","sourceRoot":"","sources":["../../src/controls/BaseSortableItemsControl.tsx"],"names":[],"mappings":"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"}
|
|
@@ -8,20 +8,24 @@ type SortableItemsModelArgs<D> = Listeners<D> & {
|
|
|
8
8
|
emptyValue?: D;
|
|
9
9
|
value?: D[];
|
|
10
10
|
};
|
|
11
|
-
export
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
11
|
+
export type SortableItemsModelKey = ReturnType<typeof crypto.randomUUID>;
|
|
12
|
+
export type KeyedValue<D> = {
|
|
13
|
+
value: D;
|
|
14
|
+
key: SortableItemsModelKey;
|
|
15
|
+
};
|
|
16
|
+
export type KeyedValues<D> = KeyedValue<D>[];
|
|
17
|
+
export type IndexedItemActions<D> = {
|
|
18
|
+
add(value: D): void;
|
|
19
|
+
remove(): void;
|
|
20
|
+
moveUp(): void;
|
|
21
|
+
moveDown(): void;
|
|
22
|
+
change(value: D): void;
|
|
23
|
+
};
|
|
24
|
+
export type IndexedItemActionsMaker<D> = (index: number, key: SortableItemsModelKey) => IndexedItemActions<D>;
|
|
25
|
+
export declare function useSortableItemsModel<D>(args: SortableItemsModelArgs<D>): {
|
|
26
|
+
keyedValues: KeyedValues<D>;
|
|
27
|
+
add(value: D, index?: number): void;
|
|
28
|
+
commit(keyedValues: KeyedValues<D>): void;
|
|
29
|
+
makeIndexedItemActions: IndexedItemActionsMaker<D>;
|
|
26
30
|
};
|
|
27
31
|
export {};
|
|
@@ -1,136 +1,42 @@
|
|
|
1
|
-
import { useEffect, useMemo,
|
|
1
|
+
import { useEffect, useMemo, useState } from "@wordpress/element";
|
|
2
2
|
import { Immer } from "immer";
|
|
3
3
|
import { clone } from "../../lib/helpers";
|
|
4
|
-
export function useSortableItemsModel(
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
case "add": {
|
|
8
|
-
const newItemIndex = action.index ?? prevState.value?.length ?? 0;
|
|
9
|
-
const newValue = prevState.value?.toSpliced(newItemIndex, 0, action.value) ?? [action.value];
|
|
10
|
-
const nextItemKey = prevState.nextItemKey + 1;
|
|
11
|
-
onAdd?.(newItemIndex, action.value);
|
|
12
|
-
onChange?.(newValue);
|
|
13
|
-
return {
|
|
14
|
-
...prevState,
|
|
15
|
-
value: newValue,
|
|
16
|
-
keyedValues: prevState.keyedValues.concat([[action.value, nextItemKey]]),
|
|
17
|
-
nextItemKey
|
|
18
|
-
};
|
|
19
|
-
}
|
|
20
|
-
case "remove": {
|
|
21
|
-
const newValue = prevState.value?.toSpliced(action.index, 1) ?? [];
|
|
22
|
-
onRemove?.(action.index);
|
|
23
|
-
onChange?.(newValue);
|
|
24
|
-
return {
|
|
25
|
-
...prevState,
|
|
26
|
-
value: newValue,
|
|
27
|
-
keyedValues: prevState.keyedValues.toSpliced(action.index, 1)
|
|
28
|
-
};
|
|
29
|
-
}
|
|
30
|
-
case "move": {
|
|
31
|
-
const { newIndex, oldIndex } = action;
|
|
32
|
-
if (newIndex === oldIndex) {
|
|
33
|
-
return prevState;
|
|
34
|
-
}
|
|
35
|
-
const newValue = swap(prevState.value ?? [], newIndex, oldIndex);
|
|
36
|
-
const changesStart = Math.min(newIndex, oldIndex);
|
|
37
|
-
newValue.splice(changesStart, newValue.length, ...newValue.slice(changesStart).map(v => clone(v)));
|
|
38
|
-
onReorder?.(oldIndex, newIndex);
|
|
39
|
-
onChange?.(newValue);
|
|
40
|
-
return {
|
|
41
|
-
...prevState,
|
|
42
|
-
value: newValue,
|
|
43
|
-
keyedValues: swap(prevState.keyedValues, newIndex, oldIndex).map(([_, k], i) => [newValue[i], k])
|
|
44
|
-
};
|
|
45
|
-
}
|
|
46
|
-
case "change": {
|
|
47
|
-
const newValue = (prevState.value ?? []).toSpliced(action.index, 1, action.value);
|
|
48
|
-
onChange?.(newValue);
|
|
49
|
-
return {
|
|
50
|
-
...prevState,
|
|
51
|
-
value: newValue,
|
|
52
|
-
keyedValues: prevState.keyedValues.map((v, i) => i === action.index ? [action.value, v[1]] : v)
|
|
53
|
-
};
|
|
54
|
-
}
|
|
55
|
-
case "commit":
|
|
56
|
-
const newValue = action.keyedValues.map(([v]) => v);
|
|
57
|
-
onChange?.(newValue);
|
|
58
|
-
return {
|
|
59
|
-
...prevState,
|
|
60
|
-
value: newValue,
|
|
61
|
-
keyedValues: action.keyedValues
|
|
62
|
-
};
|
|
63
|
-
case "refresh":
|
|
64
|
-
const nextState = (new Immer({ autoFreeze: false })).produce(prevState, (draft) => {
|
|
65
|
-
for (const [key, value] of Object.entries(action.listeners)) {
|
|
66
|
-
draft.listeners[key] = value;
|
|
67
|
-
}
|
|
68
|
-
if (prevState.value !== action.value) {
|
|
69
|
-
draft.value = action.value;
|
|
70
|
-
if (action.value !== undefined && action.value.length !== prevState.keyedValues.length) {
|
|
71
|
-
draft.keyedValues = action.value.map((v, i) => [v,
|
|
72
|
-
prevState.keyedValues[i] !== undefined && prevState.keyedValues[i][0] === v ? prevState.keyedValues[i][1] : draft.nextItemKey++]);
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
});
|
|
76
|
-
if (prevState.value !== action.value && action.value !== undefined && action.value.length === prevState.keyedValues.length) {
|
|
77
|
-
for (let i = 0; i < action.value.length; i++) {
|
|
78
|
-
nextState.keyedValues[i][0] = action.value[i];
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
return nextState;
|
|
82
|
-
default:
|
|
83
|
-
return prevState;
|
|
84
|
-
}
|
|
85
|
-
}, { keyedValues: [], listeners: {}, nextItemKey: 0 });
|
|
86
|
-
useEffect(() => {
|
|
87
|
-
dispatch({ type: "refresh", listeners: { onAdd, onChange, onRemove, onReorder }, value });
|
|
88
|
-
}, [value, onAdd, onChange, onRemove, onReorder, dispatch]);
|
|
4
|
+
export function useSortableItemsModel(args) {
|
|
5
|
+
const { mutators, state } = usePseudoReducerBasedStateManagement(args);
|
|
6
|
+
const { emptyValue } = args;
|
|
89
7
|
// We use a separate memo for the actions because dispatch should change significantly less-often than state
|
|
90
8
|
const actions = useMemo(() => {
|
|
91
|
-
|
|
9
|
+
return ({
|
|
92
10
|
add: (value, index) => {
|
|
93
|
-
|
|
11
|
+
mutators.add({ value, index });
|
|
12
|
+
},
|
|
13
|
+
commit: (keyedValues) => {
|
|
14
|
+
mutators.commit({ keyedValues });
|
|
94
15
|
},
|
|
95
16
|
addEmptyValue: emptyValue !== undefined && emptyValue !== null ? (index) => {
|
|
96
|
-
|
|
17
|
+
mutators.add({ value: typeof emptyValue === 'object' ? { ...emptyValue } : emptyValue, index });
|
|
97
18
|
} : undefined,
|
|
98
|
-
|
|
99
|
-
dispatch({ type: "remove", index });
|
|
100
|
-
},
|
|
101
|
-
move: (oldIndex, newIndex) => {
|
|
102
|
-
dispatch({ type: "move", oldIndex, newIndex });
|
|
103
|
-
},
|
|
104
|
-
change: (value, index) => {
|
|
105
|
-
dispatch({ type: "change", value, index });
|
|
106
|
-
},
|
|
107
|
-
commit: (keyedValues) => {
|
|
108
|
-
dispatch({ type: "commit", keyedValues });
|
|
109
|
-
}
|
|
110
|
-
};
|
|
111
|
-
return ({
|
|
112
|
-
...outer,
|
|
113
|
-
makeIndexedItemActions(index) {
|
|
19
|
+
makeIndexedItemActions(index, key) {
|
|
114
20
|
return useMemo(() => ({
|
|
115
21
|
add: (value) => {
|
|
116
|
-
|
|
22
|
+
mutators.add({ value, index });
|
|
117
23
|
},
|
|
118
24
|
remove: () => {
|
|
119
|
-
|
|
25
|
+
mutators.remove({ key });
|
|
120
26
|
},
|
|
121
27
|
moveUp: () => {
|
|
122
|
-
|
|
28
|
+
mutators.move({ oldIndex: index, newIndex: index - 1 });
|
|
123
29
|
},
|
|
124
30
|
moveDown: () => {
|
|
125
|
-
|
|
31
|
+
mutators.move({ oldIndex: index, newIndex: index + 1 });
|
|
126
32
|
},
|
|
127
33
|
change: (value) => {
|
|
128
|
-
|
|
34
|
+
mutators.change({ value, index });
|
|
129
35
|
}
|
|
130
|
-
}), [index,
|
|
36
|
+
}), [index, key, mutators]);
|
|
131
37
|
}
|
|
132
38
|
});
|
|
133
|
-
}, [
|
|
39
|
+
}, [emptyValue, mutators]);
|
|
134
40
|
return { ...actions, keyedValues: state.keyedValues };
|
|
135
41
|
}
|
|
136
42
|
function swap(value, newIndex, oldIndex) {
|
|
@@ -144,4 +50,102 @@ function swap(value, newIndex, oldIndex) {
|
|
|
144
50
|
}
|
|
145
51
|
return splicedValue;
|
|
146
52
|
}
|
|
53
|
+
function usePseudoReducerBasedStateManagement({ value, onAdd, onChange, onRemove, onReorder }) {
|
|
54
|
+
const [state, setState] = useState({ keyedValues: [], listeners: {} });
|
|
55
|
+
const mutators = useMemo(() => {
|
|
56
|
+
return {
|
|
57
|
+
add({ value, index }) {
|
|
58
|
+
const newItemIndex = index ?? state.value?.length ?? 0;
|
|
59
|
+
const newValue = state.value?.toSpliced(newItemIndex, 0, value) ?? [value];
|
|
60
|
+
onAdd?.(newItemIndex, value);
|
|
61
|
+
onChange?.(newValue);
|
|
62
|
+
setState({
|
|
63
|
+
...state,
|
|
64
|
+
value: newValue,
|
|
65
|
+
keyedValues: state.keyedValues.toSpliced(newItemIndex, 0, { value: value, key: crypto.randomUUID() })
|
|
66
|
+
});
|
|
67
|
+
},
|
|
68
|
+
remove({ key }) {
|
|
69
|
+
const actionIndex = state.keyedValues?.findIndex(({ key: k }) => k === key) ?? -1;
|
|
70
|
+
if (actionIndex === -1) {
|
|
71
|
+
return;
|
|
72
|
+
}
|
|
73
|
+
const newValue = state.value?.toSpliced(actionIndex, 1) ?? [];
|
|
74
|
+
onRemove?.(actionIndex);
|
|
75
|
+
onChange?.(newValue);
|
|
76
|
+
setState({
|
|
77
|
+
...state,
|
|
78
|
+
value: newValue,
|
|
79
|
+
keyedValues: state.keyedValues.toSpliced(actionIndex, 1)
|
|
80
|
+
});
|
|
81
|
+
},
|
|
82
|
+
move({ oldIndex, newIndex }) {
|
|
83
|
+
if (newIndex === oldIndex) {
|
|
84
|
+
return;
|
|
85
|
+
}
|
|
86
|
+
const newValue = swap(state.value ?? [], newIndex, oldIndex);
|
|
87
|
+
const changesStart = Math.min(newIndex, oldIndex);
|
|
88
|
+
newValue.splice(changesStart, newValue.length, ...newValue.slice(changesStart).map(v => clone(v)));
|
|
89
|
+
onReorder?.(oldIndex, newIndex);
|
|
90
|
+
onChange?.(newValue);
|
|
91
|
+
setState({
|
|
92
|
+
...state,
|
|
93
|
+
value: newValue,
|
|
94
|
+
keyedValues: swap(state.keyedValues, newIndex, oldIndex).map(({ key }, i) => ({
|
|
95
|
+
value: newValue[i],
|
|
96
|
+
key
|
|
97
|
+
}))
|
|
98
|
+
});
|
|
99
|
+
},
|
|
100
|
+
change({ value, index }) {
|
|
101
|
+
const newValue = (state.value ?? []).toSpliced(index, 1, value);
|
|
102
|
+
onChange?.(newValue);
|
|
103
|
+
setState({
|
|
104
|
+
...state,
|
|
105
|
+
value: newValue,
|
|
106
|
+
keyedValues: state.keyedValues.toSpliced(index, 1, { ...state.keyedValues[index], value })
|
|
107
|
+
});
|
|
108
|
+
},
|
|
109
|
+
commit({ keyedValues }) {
|
|
110
|
+
const newValue = keyedValues.map(({ value }) => value);
|
|
111
|
+
onChange?.(newValue);
|
|
112
|
+
setState({
|
|
113
|
+
...state,
|
|
114
|
+
value: newValue,
|
|
115
|
+
keyedValues
|
|
116
|
+
});
|
|
117
|
+
},
|
|
118
|
+
refresh(args) {
|
|
119
|
+
const prevState = state;
|
|
120
|
+
setState((new Immer({ autoFreeze: false })).produce(prevState, (draft) => {
|
|
121
|
+
for (const [key, value] of Object.entries(args.listeners)) {
|
|
122
|
+
draft.listeners[key] = value;
|
|
123
|
+
}
|
|
124
|
+
if (prevState.value !== args.value) {
|
|
125
|
+
draft.value = args.value;
|
|
126
|
+
if (args.value !== undefined) {
|
|
127
|
+
if (args.value.length !== prevState.keyedValues.length) {
|
|
128
|
+
draft.keyedValues = args.value.map((v, i) => {
|
|
129
|
+
return {
|
|
130
|
+
value: v,
|
|
131
|
+
key: prevState.keyedValues[i] !== undefined && prevState.keyedValues[i].value === v ? prevState.keyedValues[i].key : crypto.randomUUID()
|
|
132
|
+
};
|
|
133
|
+
});
|
|
134
|
+
}
|
|
135
|
+
else {
|
|
136
|
+
for (let i = 0; i < args.value.length; i++) {
|
|
137
|
+
draft.keyedValues[i].value = args.value[i];
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
}));
|
|
143
|
+
}
|
|
144
|
+
};
|
|
145
|
+
}, [state, onAdd, onChange, onRemove, onReorder]);
|
|
146
|
+
useEffect(() => {
|
|
147
|
+
mutators.refresh({ listeners: { onAdd, onChange, onRemove, onReorder }, value });
|
|
148
|
+
}, [value, onAdd, onChange, onRemove, onReorder, mutators]);
|
|
149
|
+
return { mutators, state };
|
|
150
|
+
}
|
|
147
151
|
//# sourceMappingURL=useSortableItemsModel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSortableItemsModel.js","sourceRoot":"","sources":["../../../src/controls/hooks/useSortableItemsModel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"useSortableItemsModel.js","sourceRoot":"","sources":["../../../src/controls/hooks/useSortableItemsModel.ts"],"names":[],"mappings":"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"}
|