seasharp
/
anvil
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(striker-ui): simplify form message setting by removing message setter list

Browse Source
main
Tsu-ba-me 2 years ago
parent fa2f68574e
commit d22b11bb90
8 changed files with 78 additions and 115 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      striker-ui/components/ManageManifest/AnHostInputGroup.tsx
  2. 20
      striker-ui/components/ManageManifest/AnIdInputGroup.tsx
  3. 14
      striker-ui/components/ManageManifest/AnNetworkConfigInputGroup.tsx
  4. 16
      striker-ui/components/ManageManifest/AnNetworkInputGroup.tsx
  5. 16
      striker-ui/components/ManageManifest/RunManifestInputGroup.tsx
  6. 14
      striker-ui/components/ManageUps/CommonUpsInputGroup.tsx
  7. 87
      striker-ui/hooks/useFormUtils.ts
  8. 10
      striker-ui/types/FormUtils.d.ts

14
striker-ui/components/ManageManifest/AnHostInputGroup.tsx
Unescape View File

@ -109,7 +109,7 @@ const AnHostInputGroup = <M extends MapToInputTestID>({
formUtils: { formUtils: {
buildFinishInputTestBatchFunction, buildFinishInputTestBatchFunction,
buildInputFirstRenderFunction, buildInputFirstRenderFunction,
msgSetters, setMessage,
}, },
hostId, hostId,
hostNumber, hostNumber,
@ -170,11 +170,11 @@ const AnHostInputGroup = <M extends MapToInputTestID>({
inputTestBatch={buildPeacefulStringTestBatch( inputTestBatch={buildPeacefulStringTestBatch(
inputLabel, inputLabel,
() => { () => {
msgSetters[inputId](); setMessage(inputId);
}, },
{ onFinishBatch: buildFinishInputTestBatchFunction(inputId) }, { onFinishBatch: buildFinishInputTestBatchFunction(inputId) },
(message) => { (message) => {
msgSetters[inputId]({ children: message }); setMessage(inputId, { children: message });
}, },
)} )}
onFirstRender={buildInputFirstRenderFunction(inputId)} onFirstRender={buildInputFirstRenderFunction(inputId)}
@ -192,7 +192,7 @@ const AnHostInputGroup = <M extends MapToInputTestID>({
buildInputFirstRenderFunction, buildInputFirstRenderFunction,
fenceListEntries, fenceListEntries,
hostId, hostId,
msgSetters, setMessage,
], ],
); );
@ -225,11 +225,11 @@ const AnHostInputGroup = <M extends MapToInputTestID>({
inputTestBatch={buildIPAddressTestBatch( inputTestBatch={buildIPAddressTestBatch(
inputLabel, inputLabel,
() => { () => {
msgSetters[inputId](); setMessage(inputId);
}, },
{ onFinishBatch: buildFinishInputTestBatchFunction(inputId) }, { onFinishBatch: buildFinishInputTestBatchFunction(inputId) },
(message) => { (message) => {
msgSetters[inputId]({ children: message }); setMessage(inputId, { children: message });
}, },
)} )}
onFirstRender={buildInputFirstRenderFunction(inputId)} onFirstRender={buildInputFirstRenderFunction(inputId)}
@ -247,7 +247,7 @@ const AnHostInputGroup = <M extends MapToInputTestID>({
hostId, hostId,
buildFinishInputTestBatchFunction, buildFinishInputTestBatchFunction,
buildInputFirstRenderFunction, buildInputFirstRenderFunction,
msgSetters, setMessage,
], ],
); );

20
striker-ui/components/ManageManifest/AnIdInputGroup.tsx
Unescape View File

@ -29,7 +29,7 @@ const AnIdInputGroup = <
formUtils: { formUtils: {
buildFinishInputTestBatchFunction, buildFinishInputTestBatchFunction,
buildInputFirstRenderFunction, buildInputFirstRenderFunction,
msgSetters, setMessage,
}, },
previous: { previous: {
domain: previousDomain, domain: previousDomain,
@ -53,16 +53,14 @@ const AnIdInputGroup = <
inputTestBatch={buildPeacefulStringTestBatch( inputTestBatch={buildPeacefulStringTestBatch(
INPUT_LABEL_AI_PREFIX, INPUT_LABEL_AI_PREFIX,
() => { () => {
msgSetters[INPUT_ID_AI_PREFIX](); setMessage(INPUT_ID_AI_PREFIX);
}, },
{ {
onFinishBatch: onFinishBatch:
buildFinishInputTestBatchFunction(INPUT_ID_AI_PREFIX), buildFinishInputTestBatchFunction(INPUT_ID_AI_PREFIX),
}, },
(message) => { (message) => {
msgSetters[INPUT_ID_AI_PREFIX]({ setMessage(INPUT_ID_AI_PREFIX, { children: message });
children: message,
});
}, },
)} )}
onFirstRender={buildInputFirstRenderFunction(INPUT_ID_AI_PREFIX)} onFirstRender={buildInputFirstRenderFunction(INPUT_ID_AI_PREFIX)}
@ -83,16 +81,14 @@ const AnIdInputGroup = <
inputTestBatch={buildPeacefulStringTestBatch( inputTestBatch={buildPeacefulStringTestBatch(
INPUT_LABEL_AI_DOMAIN, INPUT_LABEL_AI_DOMAIN,
() => { () => {
msgSetters[INPUT_ID_AI_DOMAIN](); setMessage(INPUT_ID_AI_DOMAIN);
}, },
{ {
onFinishBatch: onFinishBatch:
buildFinishInputTestBatchFunction(INPUT_ID_AI_DOMAIN), buildFinishInputTestBatchFunction(INPUT_ID_AI_DOMAIN),
}, },
(message) => { (message) => {
msgSetters[INPUT_ID_AI_DOMAIN]({ setMessage(INPUT_ID_AI_DOMAIN, { children: message });
children: message,
});
}, },
)} )}
onFirstRender={buildInputFirstRenderFunction(INPUT_ID_AI_DOMAIN)} onFirstRender={buildInputFirstRenderFunction(INPUT_ID_AI_DOMAIN)}
@ -113,16 +109,14 @@ const AnIdInputGroup = <
inputTestBatch={buildNumberTestBatch( inputTestBatch={buildNumberTestBatch(
INPUT_LABEL_AI_SEQUENCE, INPUT_LABEL_AI_SEQUENCE,
() => { () => {
msgSetters[INPUT_ID_AI_SEQUENCE](); setMessage(INPUT_ID_AI_SEQUENCE);
}, },
{ {
onFinishBatch: onFinishBatch:
buildFinishInputTestBatchFunction(INPUT_ID_AI_SEQUENCE), buildFinishInputTestBatchFunction(INPUT_ID_AI_SEQUENCE),
}, },
(message) => { (message) => {
msgSetters[INPUT_ID_AI_SEQUENCE]({ setMessage(INPUT_ID_AI_SEQUENCE, { children: message });
children: message,
});
}, },
)} )}
onFirstRender={buildInputFirstRenderFunction(INPUT_ID_AI_SEQUENCE)} onFirstRender={buildInputFirstRenderFunction(INPUT_ID_AI_SEQUENCE)}

14
striker-ui/components/ManageManifest/AnNetworkConfigInputGroup.tsx
Unescape View File

@ -50,8 +50,8 @@ const AnNetworkConfigInputGroup = <
const { const {
buildFinishInputTestBatchFunction, buildFinishInputTestBatchFunction,
buildInputFirstRenderFunction, buildInputFirstRenderFunction,
msgSetters, setMessage,
setValidityRe, unsetKeyRe,
} = formUtils; } = formUtils;
const getNetworkNumber = useCallback( const getNetworkNumber = useCallback(
@ -186,7 +186,7 @@ const AnNetworkConfigInputGroup = <
if (networkId === rmId) { if (networkId === rmId) {
isIdMatch = true; isIdMatch = true;
setValidityRe(RegExp(rmId)); unsetKeyRe(RegExp(rmId));
} else { } else {
const { networkType } = networkValue; const { networkType } = networkValue;
@ -206,7 +206,7 @@ const AnNetworkConfigInputGroup = <
setNetworkList(newList); setNetworkList(newList);
}, },
[networkListEntries, setNetworkList, setValidityRe], [networkListEntries, setNetworkList, unsetKeyRe],
); );
const networksGridLayout = useMemo<GridLayout>(() => { const networksGridLayout = useMemo<GridLayout>(() => {
@ -333,16 +333,14 @@ const AnNetworkConfigInputGroup = <
inputTestBatch={buildNumberTestBatch( inputTestBatch={buildNumberTestBatch(
INPUT_LABEL_ANC_MTU, INPUT_LABEL_ANC_MTU,
() => { () => {
msgSetters[INPUT_ID_ANC_MTU](); setMessage(INPUT_ID_ANC_MTU);
}, },
{ {
onFinishBatch: onFinishBatch:
buildFinishInputTestBatchFunction(INPUT_ID_ANC_MTU), buildFinishInputTestBatchFunction(INPUT_ID_ANC_MTU),
}, },
(message) => { (message) => {
msgSetters[INPUT_ID_ANC_MTU]({ setMessage(INPUT_ID_ANC_MTU, { children: message });
children: message,
});
}, },
)} )}
onFirstRender={buildInputFirstRenderFunction(INPUT_ID_ANC_MTU)} onFirstRender={buildInputFirstRenderFunction(INPUT_ID_ANC_MTU)}

16
striker-ui/components/ManageManifest/AnNetworkInputGroup.tsx
Unescape View File

@ -80,7 +80,7 @@ const AnNetworkInputGroup = <M extends MapToInputTestID>({
formUtils: { formUtils: {
buildFinishInputTestBatchFunction, buildFinishInputTestBatchFunction,
buildInputFirstRenderFunction, buildInputFirstRenderFunction,
msgSetters, setMessage,
}, },
inputGatewayLabel = 'Gateway', inputGatewayLabel = 'Gateway',
inputMinIpLabel = 'IP address', inputMinIpLabel = 'IP address',
@ -185,15 +185,13 @@ const AnNetworkInputGroup = <M extends MapToInputTestID>({
inputTestBatch={buildIPAddressTestBatch( inputTestBatch={buildIPAddressTestBatch(
`${networkName} ${inputGatewayLabel}`, `${networkName} ${inputGatewayLabel}`,
() => { () => {
msgSetters[inputIdGateway](); setMessage(inputIdGateway);
}, },
{ {
onFinishBatch: buildFinishInputTestBatchFunction(inputIdGateway), onFinishBatch: buildFinishInputTestBatchFunction(inputIdGateway),
}, },
(message) => { (message) => {
msgSetters[inputIdGateway]({ setMessage(inputIdGateway, { children: message });
children: message,
});
}, },
)} )}
onFirstRender={buildInputFirstRenderFunction(inputIdGateway)} onFirstRender={buildInputFirstRenderFunction(inputIdGateway)}
@ -212,7 +210,7 @@ const AnNetworkInputGroup = <M extends MapToInputTestID>({
networkName, networkName,
buildFinishInputTestBatchFunction, buildFinishInputTestBatchFunction,
buildInputFirstRenderFunction, buildInputFirstRenderFunction,
msgSetters, setMessage,
]); ]);
return ( return (
@ -269,16 +267,14 @@ const AnNetworkInputGroup = <M extends MapToInputTestID>({
inputTestBatch={buildIPAddressTestBatch( inputTestBatch={buildIPAddressTestBatch(
`${networkName} ${inputMinIpLabel}`, `${networkName} ${inputMinIpLabel}`,
() => { () => {
msgSetters[inputIdMinIp](); setMessage(inputIdMinIp);
}, },
{ {
onFinishBatch: onFinishBatch:
buildFinishInputTestBatchFunction(inputIdMinIp), buildFinishInputTestBatchFunction(inputIdMinIp),
}, },
(message) => { (message) => {
msgSetters[inputIdMinIp]({ setMessage(inputIdMinIp, { children: message });
children: message,
});
}, },
)} )}
onFirstRender={buildInputFirstRenderFunction(inputIdMinIp)} onFirstRender={buildInputFirstRenderFunction(inputIdMinIp)}

16
striker-ui/components/ManageManifest/RunManifestInputGroup.tsx
Unescape View File

@ -35,7 +35,7 @@ const RunManifestInputGroup = <M extends MapToInputTestID>({
formUtils: { formUtils: {
buildFinishInputTestBatchFunction, buildFinishInputTestBatchFunction,
buildInputFirstRenderFunction, buildInputFirstRenderFunction,
msgSetters, setMessage,
}, },
knownFences = {}, knownFences = {},
knownHosts = {}, knownHosts = {},
@ -117,11 +117,11 @@ const RunManifestInputGroup = <M extends MapToInputTestID>({
inputTestBatch={buildPeacefulStringTestBatch( inputTestBatch={buildPeacefulStringTestBatch(
inputLabel, inputLabel,
() => { () => {
msgSetters[inputId](); setMessage(inputId);
}, },
{ onFinishBatch: buildFinishInputTestBatchFunction(inputId) }, { onFinishBatch: buildFinishInputTestBatchFunction(inputId) },
(message) => { (message) => {
msgSetters[inputId]({ children: message }); setMessage(inputId, { children: message });
}, },
)} )}
onFirstRender={buildInputFirstRenderFunction(inputId)} onFirstRender={buildInputFirstRenderFunction(inputId)}
@ -162,7 +162,7 @@ const RunManifestInputGroup = <M extends MapToInputTestID>({
buildInputFirstRenderFunction, buildInputFirstRenderFunction,
hostListEntries, hostListEntries,
hostOptionList, hostOptionList,
msgSetters, setMessage,
], ],
); );
@ -289,7 +289,7 @@ const RunManifestInputGroup = <M extends MapToInputTestID>({
inputTestBatch={buildPeacefulStringTestBatch( inputTestBatch={buildPeacefulStringTestBatch(
INPUT_LABEL_RM_AN_DESCRIPTION, INPUT_LABEL_RM_AN_DESCRIPTION,
() => { () => {
msgSetters[INPUT_ID_RM_AN_DESCRIPTION](); setMessage(INPUT_ID_RM_AN_DESCRIPTION);
}, },
{ {
onFinishBatch: buildFinishInputTestBatchFunction( onFinishBatch: buildFinishInputTestBatchFunction(
@ -297,7 +297,7 @@ const RunManifestInputGroup = <M extends MapToInputTestID>({
), ),
}, },
(message) => { (message) => {
msgSetters[INPUT_ID_RM_AN_DESCRIPTION]({ setMessage(INPUT_ID_RM_AN_DESCRIPTION, {
children: message, children: message,
}); });
}, },
@ -323,7 +323,7 @@ const RunManifestInputGroup = <M extends MapToInputTestID>({
inputTestBatch={buildPeacefulStringTestBatch( inputTestBatch={buildPeacefulStringTestBatch(
INPUT_LABEL_RM_AN_PASSWORD, INPUT_LABEL_RM_AN_PASSWORD,
() => { () => {
msgSetters[INPUT_ID_RM_AN_PASSWORD](); setMessage(INPUT_ID_RM_AN_PASSWORD);
}, },
{ {
onFinishBatch: buildFinishInputTestBatchFunction( onFinishBatch: buildFinishInputTestBatchFunction(
@ -331,7 +331,7 @@ const RunManifestInputGroup = <M extends MapToInputTestID>({
), ),
}, },
(message) => { (message) => {
msgSetters[INPUT_ID_RM_AN_PASSWORD]({ children: message }); setMessage(INPUT_ID_RM_AN_PASSWORD, { children: message });
}, },
)} )}
onFirstRender={buildInputFirstRenderFunction( onFirstRender={buildInputFirstRenderFunction(

14
striker-ui/components/ManageUps/CommonUpsInputGroup.tsx
Unescape View File

@ -22,7 +22,7 @@ const CommonUpsInputGroup = <
formUtils: { formUtils: {
buildFinishInputTestBatchFunction, buildFinishInputTestBatchFunction,
buildInputFirstRenderFunction, buildInputFirstRenderFunction,
msgSetters, setMessage,
}, },
previous: { upsIPAddress: previousIpAddress, upsName: previousUpsName } = {}, previous: { upsIPAddress: previousIpAddress, upsName: previousUpsName } = {},
}: CommonUpsInputGroupProps<M>): ReactElement => ( }: CommonUpsInputGroupProps<M>): ReactElement => (
@ -42,16 +42,14 @@ const CommonUpsInputGroup = <
inputTestBatch={buildPeacefulStringTestBatch( inputTestBatch={buildPeacefulStringTestBatch(
INPUT_LABEL_UPS_NAME, INPUT_LABEL_UPS_NAME,
() => { () => {
msgSetters[INPUT_ID_UPS_NAME](); setMessage(INPUT_ID_UPS_NAME);
}, },
{ {
onFinishBatch: onFinishBatch:
buildFinishInputTestBatchFunction(INPUT_ID_UPS_NAME), buildFinishInputTestBatchFunction(INPUT_ID_UPS_NAME),
}, },
(message) => { (message) => {
msgSetters[INPUT_ID_UPS_NAME]({ setMessage(INPUT_ID_UPS_NAME, { children: message });
children: message,
});
}, },
)} )}
onFirstRender={buildInputFirstRenderFunction(INPUT_ID_UPS_NAME)} onFirstRender={buildInputFirstRenderFunction(INPUT_ID_UPS_NAME)}
@ -72,16 +70,14 @@ const CommonUpsInputGroup = <
inputTestBatch={buildIPAddressTestBatch( inputTestBatch={buildIPAddressTestBatch(
INPUT_LABEL_UPS_IP, INPUT_LABEL_UPS_IP,
() => { () => {
msgSetters[INPUT_ID_UPS_IP](); setMessage(INPUT_ID_UPS_IP);
}, },
{ {
onFinishBatch: onFinishBatch:
buildFinishInputTestBatchFunction(INPUT_ID_UPS_IP), buildFinishInputTestBatchFunction(INPUT_ID_UPS_IP),
}, },
(message) => { (message) => {
msgSetters[INPUT_ID_UPS_IP]({ setMessage(INPUT_ID_UPS_IP, { children: message });
children: message,
});
}, },
)} )}
onFirstRender={buildInputFirstRenderFunction(INPUT_ID_UPS_IP)} onFirstRender={buildInputFirstRenderFunction(INPUT_ID_UPS_IP)}

87
striker-ui/hooks/useFormUtils.ts
Unescape View File

@ -1,11 +1,9 @@
import { MutableRefObject, useCallback, useMemo, useState } from 'react'; import { MutableRefObject, useCallback, useMemo, useState } from 'react';
import buildMapToMessageSetter, {
buildMessageSetter,
} from '../lib/buildMapToMessageSetter';
import buildObjectStateSetterCallback, { import buildObjectStateSetterCallback, {
buildProtectedObjectStateSetterCallback, buildRegExpObjectStateSetterCallback,
} from '../lib/buildObjectStateSetterCallback'; } from '../lib/buildObjectStateSetterCallback';
import { Message } from '../components/MessageBox';
import { MessageGroupForwardedRefContent } from '../components/MessageGroup'; import { MessageGroupForwardedRefContent } from '../components/MessageGroup';
const useFormUtils = < const useFormUtils = <
@ -17,8 +15,19 @@ const useFormUtils = <
messageGroupRef: MutableRefObject<MessageGroupForwardedRefContent>, messageGroupRef: MutableRefObject<MessageGroupForwardedRefContent>,
): FormUtils<M> => { ): FormUtils<M> => {
const [formValidity, setFormValidity] = useState<FormValidity<M>>({}); const [formValidity, setFormValidity] = useState<FormValidity<M>>({});
const [msgSetterList, setMsgSetterList] = useState<MapToMessageSetter<M>>(
() => buildMapToMessageSetter<U, I, M>(ids, messageGroupRef), const setMessage = useCallback(
(key: keyof M, message?: Message) => {
messageGroupRef.current.setMessage?.call(null, String(key), message);
},
[messageGroupRef],
);
const setMessageRe = useCallback(
(re: RegExp, message?: Message) => {
messageGroupRef.current.setMessageRe?.call(null, re, message);
},
[messageGroupRef],
); );
const setValidity = useCallback((key: keyof M, value?: boolean) => { const setValidity = useCallback((key: keyof M, value?: boolean) => {
@ -28,54 +37,25 @@ const useFormUtils = <
}, []); }, []);
const setValidityRe = useCallback((re: RegExp, value?: boolean) => { const setValidityRe = useCallback((re: RegExp, value?: boolean) => {
setFormValidity((previous) => { setFormValidity(
const result: FormValidity<M> = {}; buildRegExpObjectStateSetterCallback<FormValidity<M>>(re, value),
);
Object.keys(previous).forEach((key) => {
const id = key as keyof M;
if (re.test(key)) {
if (value !== undefined) {
result[id] = value;
}
} else {
result[id] = previous[id];
}
});
return result;
});
}, []); }, []);
const setMsgSetter = useCallback( const unsetKey = useCallback(
( (key: keyof M) => {
id: keyof M, setMessage(key);
setter?: MessageSetter, setValidity(key);
{
isOverwrite,
isUseFallback = true,
}: { isOverwrite?: boolean; isUseFallback?: boolean } = {},
) => {
const fallbackSetter: ObjectStatePropSetter<MapToMessageSetter<M>> = (
result,
key,
value = buildMessageSetter<M>(String(id), messageGroupRef),
) => {
result[key] = value;
};
setMsgSetterList(
buildProtectedObjectStateSetterCallback<MapToMessageSetter<M>>(
id,
setter,
{
isOverwrite,
set: isUseFallback ? fallbackSetter : undefined,
}, },
), [setMessage, setValidity],
); );
const unsetKeyRe = useCallback(
(re: RegExp) => {
setMessageRe(re);
setValidityRe(re);
}, },
[messageGroupRef], [setMessageRe, setValidityRe],
); );
const buildFinishInputTestBatchFunction = useCallback( const buildFinishInputTestBatchFunction = useCallback(
@ -88,10 +68,9 @@ const useFormUtils = <
const buildInputFirstRenderFunction = useCallback( const buildInputFirstRenderFunction = useCallback(
(key: keyof M) => (key: keyof M) =>
({ isValid }: InputFirstRenderFunctionArgs) => { ({ isValid }: InputFirstRenderFunctionArgs) => {
setMsgSetter(key);
setValidity(key, isValid); setValidity(key, isValid);
}, },
[setMsgSetter, setValidity], [setValidity],
); );
const isFormInvalid = useMemo( const isFormInvalid = useMemo(
@ -104,11 +83,13 @@ const useFormUtils = <
buildInputFirstRenderFunction, buildInputFirstRenderFunction,
formValidity, formValidity,
isFormInvalid, isFormInvalid,
msgSetters: msgSetterList,
setFormValidity, setFormValidity,
setMsgSetter, setMessage,
setMessageRe,
setValidity, setValidity,
setValidityRe, setValidityRe,
unsetKey,
unsetKeyRe,
}; };
}; };

10
striker-ui/types/FormUtils.d.ts vendored
Unescape View File

@ -19,15 +19,13 @@ type FormUtils<M extends MapToInputTestID> = {
buildInputFirstRenderFunction: InputFirstRenderFunctionBuilder<M>; buildInputFirstRenderFunction: InputFirstRenderFunctionBuilder<M>;
formValidity: FormValidity<M>; formValidity: FormValidity<M>;
isFormInvalid: boolean; isFormInvalid: boolean;
msgSetters: MapToMessageSetter<M>;
setFormValidity: import('react').Dispatch< setFormValidity: import('react').Dispatch<
import('react').SetStateAction<FormValidity<M>> import('react').SetStateAction<FormValidity<M>>
>; >;
setMsgSetter: ( setMessage: (key: keyof M, message?: Message) => void;
id: keyof M, setMessageRe: (re: RegExp, message?: Message) => void;
setter?: MessageSetter,
options?: { isOverwrite?: boolean },
) => void;
setValidity: (key: keyof M, value?: boolean) => void; setValidity: (key: keyof M, value?: boolean) => void;
setValidityRe: (re: RegExp, value?: boolean) => void; setValidityRe: (re: RegExp, value?: boolean) => void;
unsetKey: (key: keyof M) => void;
unsetKeyRe: (re: RegExp) => void;
}; };

Write Preview
Loading…
Cancel
Save