checklist field: use reducer for state

This commit is contained in:
f0x 2023-01-30 20:05:34 +01:00
parent c577348edf
commit 204a4c02d1
2 changed files with 84 additions and 73 deletions

View file

@ -66,7 +66,7 @@ skulk({
], ],
}, },
settings: { settings: {
debug: false, debug: true,
entryFile: "settings", entryFile: "settings",
outputFile: "settings.js", outputFile: "settings.js",
prodCfg: prodCfg, prodCfg: prodCfg,

View file

@ -20,47 +20,50 @@
const React = require("react"); const React = require("react");
const syncpipe = require("syncpipe"); const syncpipe = require("syncpipe");
const { createSlice } = require("@reduxjs/toolkit");
function createState(entries, uniqueKey, oldState, defaultValue) { const { reducer, actions } = createSlice({
return syncpipe(entries, [ name: "checklist",
(_) => _.map((entry) => { initialState: {},
let key = entry[uniqueKey]; reducers: {
return [ create: (state, { payload }) => {
key, const { entries, uniqueKey, defaultValue } = payload;
{ return syncpipe(entries, [
(_) => _.map((entry) => {
let key = entry[uniqueKey];
return [
key,
{
...entry,
key,
checked: state[key]?.checked ?? entry.checked ?? defaultValue
}
];
}),
(_) => Object.fromEntries(_)
]);
},
updateAll: (state, { payload: value }) => {
return syncpipe(state, [
(_) => Object.values(_),
(_) => _.map((entry) => [entry.key, {
...entry, ...entry,
key, checked: value
checked: oldState[key]?.checked ?? entry.checked ?? defaultValue }]),
} (_) => Object.fromEntries(_)
]; ]);
}), },
(_) => Object.fromEntries(_) update: (state, { payload: { key, value } }) => {
]); state[key] = {
} ...state[key],
...value
function updateAllState(state, newValue) { };
return syncpipe(state, [
(_) => Object.values(_),
(_) => _.map((entry) => [entry.key, {
...entry,
checked: newValue
}]),
(_) => Object.fromEntries(_)
]);
}
function updateState(state, key, newValue) {
return {
...state,
[key]: {
...state[key],
...newValue
} }
}; }
} });
module.exports = function useCheckListInput({ name }, { entries, uniqueKey = "key", defaultValue = false }) { module.exports = function useCheckListInput({ name }, { entries, uniqueKey = "key", defaultValue = false }) {
const [state, setState] = React.useState({}); const [state, dispatch] = React.useReducer(reducer, {});
const [someSelected, setSomeSelected] = React.useState(false); const [someSelected, setSomeSelected] = React.useState(false);
const [toggleAllState, setToggleAllState] = React.useState(0); const [toggleAllState, setToggleAllState] = React.useState(0);
@ -71,11 +74,13 @@ module.exports = function useCheckListInput({ name }, { entries, uniqueKey = "ke
entries changed, update state, entries changed, update state,
re-using old state if available for key re-using old state if available for key
*/ */
setState(createState(entries, uniqueKey, state, defaultValue)); dispatch(actions.create({ entries, uniqueKey, defaultValue }));
/* eslint-disable-next-line react-hooks/exhaustive-deps */ /* eslint-disable-next-line react-hooks/exhaustive-deps */
}, [entries]); }, [entries]);
console.log(state);
React.useEffect(() => { React.useEffect(() => {
/* Updates (un)check all checkbox, based on shortcode checkboxes /* Updates (un)check all checkbox, based on shortcode checkboxes
Can be 0 (not checked), 1 (checked) or 2 (indeterminate) Can be 0 (not checked), 1 (checked) or 2 (indeterminate)
@ -105,43 +110,49 @@ module.exports = function useCheckListInput({ name }, { entries, uniqueKey = "ke
} }
}, [state, toggleAllRef]); }, [state, toggleAllRef]);
function toggleAll(e) { return React.useMemo(() => {
let selectAll = e.target.checked; function toggleAll(e) {
let selectAll = e.target.checked;
if (toggleAllState == 2) { // indeterminate if (toggleAllState == 2) { // indeterminate
selectAll = false; selectAll = false;
}
dispatch(actions.updateAll(selectAll));
setToggleAllState(selectAll);
} }
setState(updateAllState(state, selectAll)); function reset() {
setToggleAllState(selectAll); dispatch(actions.updateAll(defaultValue));
}
function reset() {
setState(updateAllState(state, defaultValue));
}
function selectedValues() {
return syncpipe(state, [
(_) => Object.values(_),
(_) => _.filter((entry) => entry.checked)
]);
}
return Object.assign([
state,
reset,
{ name }
], {
name,
value: state,
onChange: (key, newValue) => setState(updateState(state, key, newValue)),
selectedValues,
reset,
someSelected,
toggleAll: {
ref: toggleAllRef,
value: toggleAllState,
onChange: toggleAll
} }
});
function onChange(key, value) {
dispatch(actions.update({ key, value }));
}
function selectedValues() {
return syncpipe(state, [
(_) => Object.values(_),
(_) => _.filter((entry) => entry.checked)
]);
}
return Object.assign([
state,
reset,
{ name }
], {
name,
value: state,
onChange,
selectedValues,
reset,
someSelected,
toggleAll: {
ref: toggleAllRef,
value: toggleAllState,
onChange: toggleAll
}
});
}, [defaultValue, name, someSelected, state, toggleAllState]);
}; };