Combine valueState and valueStateSetter into a single object (#9)

Author: xuhdev

src/demo/App.tsx

@@ -25,8 +25,10 @@ export default function App(): JSX.Element {
       <AutoNumericInput />
 
       <AutoNumericInput
-        valueState={controlledInputState}
-        valueStateSetter={setControlledInputState}
+        valueState={{
+          state: controlledInputState,
+          stateSetter: setControlledInputState,
+        }}
       />
       <button
         onClick={() => {

src/lib/AutoNumericInput.tsx

@@ -25,23 +25,6 @@ export type InputProps = Omit<
   "ref"
 >;
 
-/** React {@link JSX!IntrinsicElements.input} component integrated with {@link !AutoNumeric}.
- *
- * @param options - Options of the component.
- * @param options.inputProps - Options passed to {@link JSX!IntrinsicElements.input}. Same as {@link
- * JSX!IntrinsicElements.input.props} excluding the `ref` property.
- * @param options.autoNumericOptions - Options passed to {@link !AutoNumeric}. Same as {@link
- * AutoNumeric!Options}.
- * @returns The React component.
- */
-export function AutoNumericInput({
-  inputProps,
-  autoNumericOptions,
-}: {
-  inputProps?: InputProps;
-  autoNumericOptions?: CallbackOptions;
-}): JSX.Element;
-
 /** React {@link JSX!IntrinsicElements.input} component integrated with {@link !AutoNumeric} and
  * permits interaction with a React state.
  *
@@ -50,48 +33,31 @@ export function AutoNumericInput({
  * JSX!IntrinsicElements.input.props}.
  * @param options.autoNumericOptions - Options passed to {@link !AutoNumeric}. Same as {@link
  * AutoNumeric!Options}.
- * @param options.valueState - The state from the parent component to be passed in.
- * @param options.valueStateSetter - The callback function that sets `options.valueState`.
+ * @param options.valueState - The state and state setter from the parent component.
+ * @param options.valueState.state - The state from the parent component to be passed in.
+ * @param options.valueState.stateSetter - The callback function that sets
+ * `options.valueState.state`.
  * @returns The React component.
  */
-// eslint-disable-next-line @typescript-eslint/unified-signatures
 export function AutoNumericInput({
   inputProps,
   autoNumericOptions,
   valueState,
-  valueStateSetter,
 }: {
   inputProps?: InputProps;
   autoNumericOptions?: CallbackOptions;
-  valueState: string;
-  valueStateSetter: React.Dispatch<React.SetStateAction<string>>;
-}): JSX.Element;
-
-export function AutoNumericInput({
-  inputProps,
-  autoNumericOptions,
-  valueState,
-  valueStateSetter,
-}:
-  | {
-      inputProps?: InputProps;
-      autoNumericOptions?: CallbackOptions;
-      valueState: string;
-      valueStateSetter: React.Dispatch<React.SetStateAction<string>>;
-    }
-  | {
-      inputProps?: InputProps;
-      autoNumericOptions?: CallbackOptions;
-      valueState?: undefined;
-      valueStateSetter?: undefined;
-    }): JSX.Element {
+  valueState?: {
+    state: string;
+    stateSetter: React.Dispatch<React.SetStateAction<string>>;
+  };
+}): JSX.Element {
   const stateProps =
     valueState !== undefined
       ? {
-          value: valueState,
+          value: valueState.state,
           onChange: (e: ChangeEvent<HTMLInputElement>): void => {
             // For input, it is required set value in onChange.
-            valueStateSetter(e.currentTarget.value);
+            valueState.stateSetter(e.currentTarget.value);
             if (inputProps?.onChange !== undefined) {
               inputProps.onChange(e);
             }
@@ -104,7 +70,7 @@ export function AutoNumericInput({
       refKey="ref"
       props={{ ...inputProps, ...stateProps }}
       autoNumericOptions={autoNumericOptions}
-      state={valueState}
+      state={valueState?.state}
     />
   );
 }

src/test/AutoNumericInput.test.tsx

@@ -35,8 +35,7 @@ function ControlledAutoNumericInputWrapper({
     <AutoNumericInput
       inputProps={inputProps}
       autoNumericOptions={autoNumericOptions}
-      valueState={state}
-      valueStateSetter={setState}
+      valueState={{ state, stateSetter: setState }}
     />
   );
 }
@@ -98,7 +97,7 @@ test("Controlled AutoNumericInput changes the input state", async () => {
   }): JSX.Element {
     const [state, setState] = useState("");
     stateParent.state = state;
-    return <AutoNumericInput valueState={state} valueStateSetter={setState} />;
+    return <AutoNumericInput valueState={{ state, stateSetter: setState }} />;
   }
 
   const stateParent = { state: "" };
@@ -120,7 +119,7 @@ test("ControlledAutoNumericInput changes the input state", async () => {
   }): JSX.Element {
     const [state, setState] = useState("");
     stateParent.state = state;
-    return <AutoNumericInput valueState={state} valueStateSetter={setState} />;
+    return <AutoNumericInput valueState={{ state, stateSetter: setState }} />;
   }
 
   const stateParent = { state: "" };
@@ -144,7 +143,7 @@ test("Changing the input state of AutoNumericInput changes the display value", a
             setState("1111");
           }}
         />
-        <AutoNumericInput valueState={state} valueStateSetter={setState} />
+        <AutoNumericInput valueState={{ state, stateSetter: setState }} />
       </>
     );
   }