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

fix(striker-ui): relocate messages, toggle submit disabled prop in GateForm

Browse Source
This commit is contained in:
Tsu-ba-me 2022-11-16 23:19:03 -05:00
parent 4781a5a158
commit 1c22604f3c
1 changed files with 21 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
striker-ui/components/GateForm.tsx
View File

@ -72,9 +72,11 @@ const GateForm = forwardRef<GateFormForwardedRefContent, GateFormProps>(
const inputPassphraseRef = useRef<InputForwardedRefContent<'string'>>({}); const inputPassphraseRef = useRef<InputForwardedRefContent<'string'>>({});
const messageGroupRef = useRef<MessageGroupForwardedRefContent>({}); const messageGroupRef = useRef<MessageGroupForwardedRefContent>({});
const [isSubmitting, setIsSubmitting] = useState<boolean>(false); const [isInputIdentifierValid, setIsInputIdentifierValid] =
const [isShowMessageGroup, setIsShowMessageGroup] =
useState<boolean>(false); useState<boolean>(false);
const [isInputPassphraseValid, setIsInputPassphraseValid] =
useState<boolean>(false);
const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
const setAccessErrorMessage: GateFormMessageSetter = useCallback( const setAccessErrorMessage: GateFormMessageSetter = useCallback(
(message?) => { (message?) => {
@ -156,10 +158,6 @@ const GateForm = forwardRef<GateFormForwardedRefContent, GateFormProps>(
setPassphraseInputErrorMessage, setPassphraseInputErrorMessage,
], ],
); );
const messageGroupSxDisplay = useMemo(
() => (isShowMessageGroup ? undefined : 'none'),
[isShowMessageGroup],
);
const submitHandler: ContainedButtonProps['onClick'] = useMemo( const submitHandler: ContainedButtonProps['onClick'] = useMemo(
() => () =>
onSubmit ?? onSubmit ??
@ -184,12 +182,21 @@ const GateForm = forwardRef<GateFormForwardedRefContent, GateFormProps>(
<Spinner sx={{ marginTop: 0 }} /> <Spinner sx={{ marginTop: 0 }} />
) : ( ) : (
<FlexBox row sx={{ justifyContent: 'flex-end' }}> <FlexBox row sx={{ justifyContent: 'flex-end' }}>
<ContainedButton onClick={submitHandler}> <ContainedButton
disabled={isInputIdentifierValid && isInputPassphraseValid}
onClick={submitHandler}
>
{submitLabel} {submitLabel}
</ContainedButton> </ContainedButton>
</FlexBox> </FlexBox>
), ),
[isSubmitting, submitHandler, submitLabel], [
isInputIdentifierValid,
isInputPassphraseValid,
isSubmitting,
submitHandler,
submitLabel,
],
); );
const submitGrid = useMemo( const submitGrid = useMemo(
() => () =>
@ -240,9 +247,10 @@ const GateForm = forwardRef<GateFormForwardedRefContent, GateFormProps>(
target: { value }, target: { value },
} = event; } = event;
testInput({ const valid = testInput({
inputs: { [IT_IDS.identifier]: { value } }, inputs: { [IT_IDS.identifier]: { value } },
}); });
setIsInputIdentifierValid(valid);
onIdentifierBlurAppend?.call(null, event); onIdentifierBlurAppend?.call(null, event);
}, },
@ -271,9 +279,10 @@ const GateForm = forwardRef<GateFormForwardedRefContent, GateFormProps>(
id="credential-passphrase-input" id="credential-passphrase-input"
inputProps={{ inputProps={{
onBlur: ({ target: { value } }) => { onBlur: ({ target: { value } }) => {
testInput({ const valid = testInput({
inputs: { [IT_IDS.passphrase]: { value } }, inputs: { [IT_IDS.passphrase]: { value } },
}); });
setIsInputPassphraseValid(valid);
}, },
onFocus: () => { onFocus: () => {
setPassphraseInputErrorMessage(); setPassphraseInputErrorMessage();
@ -289,20 +298,11 @@ const GateForm = forwardRef<GateFormForwardedRefContent, GateFormProps>(
/> />
), ),
}, },
'credential-submit': submitGrid,
'credential-message-group': { 'credential-message-group': {
children: ( children: <MessageGroup count={1} ref={messageGroupRef} />,
<MessageGroup
count={1}
onSet={(length) => {
setIsShowMessageGroup(length > 0);
}}
ref={messageGroupRef}
/>
),
sm: 2, sm: 2,
sx: { display: messageGroupSxDisplay },
}, },
'credential-submit': submitGrid,
}} }}
spacing={gridSpacing} spacing={gridSpacing}
{...restGridProps} {...restGridProps}