Add reordering option to list component arguments ui
This commit is contained in:
parent
2b40bf9b81
commit
1417ac75a6
8
package-lock.json
generated
8
package-lock.json
generated
@ -14,7 +14,7 @@
|
||||
"@koa/router": "^12.0.1",
|
||||
"@sealcode/file-manager": "^1.0.2",
|
||||
"@sealcode/jdd": "^0.5.1",
|
||||
"@sealcode/sealgen": "^0.15.46",
|
||||
"@sealcode/sealgen": "^0.15.47",
|
||||
"@sealcode/ts-predicates": "^0.6.2",
|
||||
"@types/kill-port": "^2.0.0",
|
||||
"@types/leaflet": "^1.9.8",
|
||||
@ -1249,9 +1249,9 @@
|
||||
"integrity": "sha512-EZI7e8EY8gI1pw2bKdevjl+fBJbcSlpNkCZ8XoEOV3cHakPujiT6M4l775RDkfxJSbLX7jhOBkhgPNDfmCpZbg=="
|
||||
},
|
||||
"node_modules/@sealcode/sealgen": {
|
||||
"version": "0.15.46",
|
||||
"resolved": "https://registry.npmjs.org/@sealcode/sealgen/-/sealgen-0.15.46.tgz",
|
||||
"integrity": "sha512-cXB+tzYKSgZbe2m/rTLiHgrZaxYFRq8LmzbPLYQRm9qslePTnCUaZADXg7w8WolfdKTBhumH8EaQwoPxRdxu5Q==",
|
||||
"version": "0.15.47",
|
||||
"resolved": "https://registry.npmjs.org/@sealcode/sealgen/-/sealgen-0.15.47.tgz",
|
||||
"integrity": "sha512-cAmV2UMURIweoMilxCL+MZWNYZ2yEoV7En3vDJNzm/rkR8eTZ4ahOIClr55GrxOlBt1ryN0Gn1vKLubHUKVTJw==",
|
||||
"dependencies": {
|
||||
"@koa/router": "^12.0.1",
|
||||
"@sealcode/file-manager": "^1.0.2",
|
||||
|
@ -45,7 +45,7 @@
|
||||
"@koa/router": "^12.0.1",
|
||||
"@sealcode/file-manager": "^1.0.2",
|
||||
"@sealcode/jdd": "^0.5.1",
|
||||
"@sealcode/sealgen": "^0.15.46",
|
||||
"@sealcode/sealgen": "^0.15.47",
|
||||
"@sealcode/ts-predicates": "^0.6.2",
|
||||
"@types/kill-port": "^2.0.0",
|
||||
"@types/leaflet": "^1.9.8",
|
||||
|
@ -31,7 +31,7 @@ export async function ComponentInputList<
|
||||
return (
|
||||
<fieldset>
|
||||
<legend>{arg_path.at(-1)}</legend>
|
||||
{value.map((value, i) => (
|
||||
{value.map((value, i, all_values) => (
|
||||
<div style="display: flex">
|
||||
<ComponentInput
|
||||
{...{
|
||||
@ -43,6 +43,23 @@ export async function ComponentInputList<
|
||||
page,
|
||||
}}
|
||||
/>
|
||||
{page.makeActionButton(
|
||||
state,
|
||||
{
|
||||
action: "move_array_item_down",
|
||||
label: "↓",
|
||||
disabled: i == all_values.length - 1,
|
||||
},
|
||||
arg_path,
|
||||
i
|
||||
)}
|
||||
{page.makeActionButton(
|
||||
state,
|
||||
{ action: "move_array_item_up", label: "↑", disabled: i == 0 },
|
||||
arg_path,
|
||||
i
|
||||
)}
|
||||
|
||||
{page.makeActionButton(
|
||||
state,
|
||||
{ action: "remove_array_item", label: "❌" },
|
||||
|
@ -86,6 +86,7 @@ export const ComponentPreviewActions = <const>{
|
||||
);
|
||||
return state;
|
||||
},
|
||||
|
||||
remove_array_item: (
|
||||
_ctx: BaseContext,
|
||||
state: JDDPageState,
|
||||
@ -97,6 +98,40 @@ export const ComponentPreviewActions = <const>{
|
||||
return state;
|
||||
},
|
||||
|
||||
move_array_item_up: async (
|
||||
_ctx: BaseContext,
|
||||
state: JDDPageState,
|
||||
_inputs: Record<string, string>,
|
||||
arg_path: string[],
|
||||
element_index: number
|
||||
): Promise<JDDPageState> => {
|
||||
const array_values = objectPath.get(state, arg_path);
|
||||
const curr = array_values[element_index];
|
||||
const prev = array_values[element_index - 1];
|
||||
if (!prev || !curr) {
|
||||
throw new Error("No element at such index or cannot move it up");
|
||||
}
|
||||
[array_values[element_index - 1], array_values[element_index]] = [curr, prev];
|
||||
return state;
|
||||
},
|
||||
|
||||
move_array_item_down: async (
|
||||
_ctx: BaseContext,
|
||||
state: JDDPageState,
|
||||
_inputs: Record<string, string>,
|
||||
arg_path: string[],
|
||||
element_index: number
|
||||
): Promise<JDDPageState> => {
|
||||
const array_values = objectPath.get(state, arg_path);
|
||||
const curr = array_values[element_index];
|
||||
const next = array_values[element_index + 1];
|
||||
if (!next || !curr) {
|
||||
throw new Error("No element at such index or cannot move it up");
|
||||
}
|
||||
[array_values[element_index], array_values[element_index + 1]] = [next, curr];
|
||||
return state;
|
||||
},
|
||||
|
||||
change_component: async (
|
||||
ctx: BaseContext,
|
||||
_state: JDDPageState,
|
||||
@ -249,6 +284,7 @@ export const ComponentPreviewActions = <const>{
|
||||
objectPath.del(state, [...arg_path, "rows", row_index]);
|
||||
return state;
|
||||
},
|
||||
|
||||
move_table_column_right: (
|
||||
_ctx: BaseContext,
|
||||
state: JDDPageState,
|
||||
@ -375,6 +411,7 @@ export const ComponentPreviewActions = <const>{
|
||||
[newComps[component_index], newComps[component_index + 1]] = [next, curr];
|
||||
return { ...state, components: newComps };
|
||||
},
|
||||
|
||||
remove_file: async (
|
||||
_ctx: BaseContext,
|
||||
state: JDDPageState,
|
||||
|
Loading…
x
Reference in New Issue
Block a user