fix(striker-ui): don't create functions on re-render

striker-ui/components/GeneralInitForm.tsx

@@ -1,11 +1,12 @@
 import { Box as MUIBox } from '@mui/material';
-import { forwardRef, useImperativeHandle, useRef } from 'react';
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 
-import createFunction from '../lib/createFunction';
 import FlexBox from './FlexBox';
 import InputWithRef, { InputForwardedRefContent } from './InputWithRef';
 import isEmpty from '../lib/isEmpty';
-import OutlinedInputWithLabel from './OutlinedInputWithLabel';
+import OutlinedInputWithLabel, {
+  OutlinedInputWithLabelProps,
+} from './OutlinedInputWithLabel';
 import pad from '../lib/pad';
 import SuggestButton from './SuggestButton';
 
@@ -19,6 +20,11 @@ type GeneralInitFormForwardRefContent = {
   };
 };
 
+type OutlinedInputWithLabelOnBlur = Exclude<
+  OutlinedInputWithLabelProps['inputProps'],
+  undefined
+>['onBlur'];
+
 const MAX_ORGANIZATION_PREFIX_LENGTH = 5;
 const MIN_ORGANIZATION_PREFIX_LENGTH = 2;
 const MAX_HOST_NUMBER_LENGTH = 2;
@@ -60,6 +66,13 @@ const buildHostName = ({
 
 const GeneralInitForm = forwardRef<GeneralInitFormForwardRefContent>(
   (generalInitFormProps, ref) => {
+    const [
+      isShowOrganizationPrefixSuggest,
+      setIsShowOrganizationPrefixSuggest,
+    ] = useState<boolean>(false);
+    const [isShowHostNameSuggest, setIsShowHostNameSuggest] =
+      useState<boolean>(false);
+
     const organizationNameInputRef = useRef<InputForwardedRefContent<'string'>>(
       {},
     );
@@ -99,51 +112,48 @@ const GeneralInitForm = forwardRef<GeneralInitFormForwardRefContent>(
 
       return hostName;
     };
-    const populateOrganizationPrefixInputOnBlur = createFunction(
+    const isOrganizationPrefixPrereqFilled = () =>
-      {
+      isEmpty([organizationNameInputRef.current.getValue?.call(null)], {
-        condition:
+        not: true,
-          !organizationPrefixInputRef.current.getIsChangedByUser?.call(null),
+      });
-      },
+    const isHostNamePrereqFilled = () =>
-      populateOrganizationPrefixInput,
+      isEmpty(
-    );
+        [
-    const populateHostNameInputOnBlur = createFunction(
+          organizationPrefixInputRef.current.getValue?.call(null),
-      { condition: !hostNameInputRef.current.getIsChangedByUser?.call(null) },
+          hostNumberInputRef.current.getValue?.call(null),
-      populateHostNameInput,
+          domainNameInputRef.current.getValue?.call(null),
-    );
+        ],
-    const handleOrganizationPrefixSuggest = createFunction(
+        {
-      {
+          not: true,
-        conditionFn: () =>
+        },
-          organizationPrefixInputRef.current.getIsChangedByUser?.call(null) ===
+      );
-            true &&
+    const populateOrganizationPrefixInputOnBlur: OutlinedInputWithLabelOnBlur =
-          isEmpty([organizationNameInputRef.current.getValue?.call(null)], {
-            not: true,
-          }),
-      },
       () => {
-        const organizationPrefix = populateOrganizationPrefixInput();
+        if (organizationPrefixInputRef.current.getIsChangedByUser?.call(null)) {
-
+          setIsShowOrganizationPrefixSuggest(
-        if (!hostNameInputRef.current.getIsChangedByUser?.call(null)) {
+            isOrganizationPrefixPrereqFilled(),
-          populateHostNameInput({ organizationPrefix });
+          );
+        } else {
+          populateOrganizationPrefixInput();
         }
-      },
+      };
-    );
+    const populateHostNameInputOnBlur: OutlinedInputWithLabelOnBlur = () => {
-    const handlerHostNameSuggest = createFunction(
+      if (hostNameInputRef.current.getIsChangedByUser?.call(null)) {
-      {
+        setIsShowHostNameSuggest(isHostNamePrereqFilled());
-        conditionFn: () =>
+      } else {
-          hostNameInputRef.current.getIsChangedByUser?.call(null) === true &&
+        populateHostNameInput();
-          isEmpty(
+      }
-            [
+    };
-              organizationPrefixInputRef.current.getValue?.call(null),
+    const handleOrganizationPrefixSuggest = () => {
-              hostNumberInputRef.current.getValue?.call(null),
+      const organizationPrefix = populateOrganizationPrefixInput();
-              domainNameInputRef.current.getValue?.call(null),
+
-            ],
+      if (!hostNameInputRef.current.getIsChangedByUser?.call(null)) {
-            {
+        populateHostNameInput({ organizationPrefix });
-              not: true,
+      }
-            },
+    };
-          ),
+    const handlerHostNameSuggest = () => {
-      },
+      populateHostNameInput();
-      populateHostNameInput,
+    };
-    );
 
     useImperativeHandle(ref, () => ({
       get: () => ({
@@ -188,32 +198,62 @@ const GeneralInitForm = forwardRef<GeneralInitFormForwardRefContent>(
             }
             ref={organizationNameInputRef}
           />
-          <InputWithRef
+          <FlexBox row>
-            input={
+            <InputWithRef
-              <OutlinedInputWithLabel
+              input={
-                helpMessageBoxProps={{
+                <OutlinedInputWithLabel
-                  text: "Alphanumberic short-form of the organization name. It's used as the prefix for host names.",
+                  helpMessageBoxProps={{
-                }}
+                    text: "Alphanumberic short-form of the organization name. It's used as the prefix for host names.",
-                id="striker-init-general-organization-prefix"
+                  }}
-                inputProps={{
+                  id="striker-init-general-organization-prefix"
-                  endAdornment: (
+                  inputProps={{
-                    <SuggestButton onClick={handleOrganizationPrefixSuggest} />
+                    endAdornment: (
-                  ),
+                      <SuggestButton
-                  inputProps: {
+                        show={isShowOrganizationPrefixSuggest}
-                    maxLength: MAX_ORGANIZATION_PREFIX_LENGTH,
+                        onClick={handleOrganizationPrefixSuggest}
-                    style: { width: '2.5em' },
+                      />
-                  },
+                    ),
-                  onBlur: populateHostNameInputOnBlur,
+                    inputProps: {
-                  sx: {
+                      maxLength: MAX_ORGANIZATION_PREFIX_LENGTH,
-                    minWidth: 'min-content',
+                      style: { width: '2.5em' },
-                    width: 'fit-content',
+                    },
-                  },
+                    onBlur: populateHostNameInputOnBlur,
-                }}
+                    sx: {
-                label="Prefix"
+                      minWidth: 'min-content',
-              />
+                      width: 'fit-content',
-            }
+                    },
-            ref={organizationPrefixInputRef}
+                  }}
-          />
+                  label="Prefix"
+                  onChange={() => {
+                    setIsShowOrganizationPrefixSuggest(
+                      isOrganizationPrefixPrereqFilled(),
+                    );
+                  }}
+                />
+              }
+              ref={organizationPrefixInputRef}
+            />
+            <InputWithRef
+              input={
+                <OutlinedInputWithLabel
+                  helpMessageBoxProps={{
+                    text: "Number or count of this striker; this should be '1' for the first striker, '2' for the second striker, and such.",
+                  }}
+                  id="striker-init-general-host-number"
+                  inputProps={{
+                    inputProps: { maxLength: MAX_HOST_NUMBER_LENGTH },
+                    onBlur: populateHostNameInputOnBlur,
+                    sx: {
+                      width: '5em',
+                    },
+                  }}
+                  label="Host #"
+                />
+              }
+              ref={hostNumberInputRef}
+              valueType="number"
+            />
+          </FlexBox>
         </FlexBox>
         <FlexBox>
           <InputWithRef
@@ -227,7 +267,6 @@ const GeneralInitForm = forwardRef<GeneralInitFormForwardRefContent>(
                   onBlur: populateHostNameInputOnBlur,
                   sx: {
                     minWidth: { sm: '16em' },
-                    width: { xs: '100%', sm: '50%' },
                   },
                 }}
                 label="Domain name"
@@ -235,26 +274,7 @@ const GeneralInitForm = forwardRef<GeneralInitFormForwardRefContent>(
             }
             ref={domainNameInputRef}
           />
-          <InputWithRef
+
-            input={
-              <OutlinedInputWithLabel
-                helpMessageBoxProps={{
-                  text: "Number or count of this striker; this should be '1' for the first striker, '2' for the second striker, and such.",
-                }}
-                id="striker-init-general-host-number"
-                inputProps={{
-                  inputProps: { maxLength: MAX_HOST_NUMBER_LENGTH },
-                  onBlur: populateHostNameInputOnBlur,
-                  sx: {
-                    width: '5em',
-                  },
-                }}
-                label="Host #"
-              />
-            }
-            ref={hostNumberInputRef}
-            valueType="number"
-          />
           <InputWithRef
             input={
               <OutlinedInputWithLabel
@@ -264,7 +284,10 @@ const GeneralInitForm = forwardRef<GeneralInitFormForwardRefContent>(
                 id="striker-init-general-host-name"
                 inputProps={{
                   endAdornment: (
-                    <SuggestButton onClick={handlerHostNameSuggest} />
+                    <SuggestButton
+                      show={isShowHostNameSuggest}
+                      onClick={handlerHostNameSuggest}
+                    />
                   ),
                   inputProps: {
                     style: {
@@ -276,6 +299,9 @@ const GeneralInitForm = forwardRef<GeneralInitFormForwardRefContent>(
                   },
                 }}
                 label="Host name"
+                onChange={() => {
+                  setIsShowHostNameSuggest(isHostNamePrereqFilled());
+                }}
               />
             }
             ref={hostNameInputRef}

striker-ui/components/InputWithRef.tsx

@@ -66,6 +66,7 @@ const InputWithRef = forwardRef(
     const onChange = createInputOnChangeHandler<TypeName>({
       postSet: (...args) => {
         setIsChangedByUser(true);
+        input.props.onChange?.call(null, ...args);
         postSetAppend?.call(null, ...args);
       },
       set: setValue,

striker-ui/components/SuggestButton.tsx

@@ -2,8 +2,22 @@ import { FC } from 'react';
 
 import ContainedButton, { ContainedButtonProps } from './ContainedButton';
 
-const SuggestButton: FC<ContainedButtonProps> = ({ onClick, ...restProps }) =>
+type SuggestButtonOptionalProps = {
-  onClick ? (
+  show?: boolean;
+};
+
+type SuggestButtonProps = ContainedButtonProps & SuggestButtonOptionalProps;
+
+const SUGGEST_BUTTON_DEFAULT_PROPS: Required<SuggestButtonOptionalProps> = {
+  show: true,
+};
+
+const SuggestButton: FC<SuggestButtonProps> = ({
+  onClick,
+  show: isShow = SUGGEST_BUTTON_DEFAULT_PROPS.show,
+  ...restProps
+}) =>
+  isShow ? (
     <ContainedButton {...{ onClick, tabIndex: -1, ...restProps }}>
       Suggest
     </ContainedButton>
@@ -11,4 +25,6 @@ const SuggestButton: FC<ContainedButtonProps> = ({ onClick, ...restProps }) =>
     <></>
   );
 
+SuggestButton.defaultProps = SUGGEST_BUTTON_DEFAULT_PROPS;
+
 export default SuggestButton;