refactor(striker-ui): repair types in InputWithRef

main
Tsu-ba-me 2 years ago
parent abc7fdf54c
commit f9c9855462
  1. 42
      striker-ui/components/InputWithRef.tsx
  2. 32
      striker-ui/lib/createInputOnChangeHandler.ts
  3. 15
      striker-ui/types/CreateInputOnChangeHandlerFunction.d.ts

@ -4,23 +4,19 @@ import {
ForwardedRef,
forwardRef,
ReactElement,
useCallback,
useEffect,
useImperativeHandle,
useMemo,
useState,
} from 'react';
import createInputOnChangeHandler, {
CreateInputOnChangeHandlerOptions,
MapToStateSetter,
} from '../lib/createInputOnChangeHandler';
import createInputOnChangeHandler from '../lib/createInputOnChangeHandler';
import { createTestInputFunction } from '../lib/test_input';
import useIsFirstRender from '../hooks/useIsFirstRender';
type InputWithRefTypeMap = Pick<MapToType, 'number' | 'string'>;
type InputWithRefOptionalPropsWithDefault<
TypeName extends keyof InputWithRefTypeMap,
TypeName extends keyof MapToInputType,
> = {
createInputOnChangeHandlerOptions?: CreateInputOnChangeHandlerOptions<TypeName>;
required?: boolean;
@ -31,26 +27,26 @@ type InputWithRefOptionalPropsWithoutDefault = {
onFirstRender?: (args: { isRequired: boolean }) => void;
};
type InputWithRefOptionalProps<TypeName extends keyof InputWithRefTypeMap> =
type InputWithRefOptionalProps<TypeName extends keyof MapToInputType> =
InputWithRefOptionalPropsWithDefault<TypeName> &
InputWithRefOptionalPropsWithoutDefault;
type InputWithRefProps<
TypeName extends keyof InputWithRefTypeMap,
TypeName extends keyof MapToInputType,
InputComponent extends ReactElement,
> = InputWithRefOptionalProps<TypeName> & {
input: InputComponent;
};
type InputForwardedRefContent<TypeName extends keyof InputWithRefTypeMap> = {
type InputForwardedRefContent<TypeName extends keyof MapToInputType> = {
getIsChangedByUser?: () => boolean;
getValue?: () => InputWithRefTypeMap[TypeName];
getValue?: () => MapToInputType[TypeName];
isValid?: () => boolean;
setValue?: MapToStateSetter[TypeName];
setValue?: StateSetter;
};
const INPUT_TEST_ID = 'input';
const MAP_TO_INITIAL_VALUE: InputWithRefTypeMap = {
const MAP_TO_INITIAL_VALUE: MapToInputType = {
number: 0,
string: '',
};
@ -65,10 +61,7 @@ const INPUT_WITH_REF_DEFAULT_PROPS: Required<
};
const InputWithRef = forwardRef(
<
TypeName extends keyof InputWithRefTypeMap,
InputComponent extends ReactElement,
>(
<TypeName extends keyof MapToInputType, InputComponent extends ReactElement>(
{
createInputOnChangeHandlerOptions: {
postSet: postSetAppend,
@ -94,12 +87,15 @@ const InputWithRef = forwardRef(
const isFirstRender = useIsFirstRender();
const [inputValue, setInputValue] = useState<InputWithRefTypeMap[TypeName]>(
initValue,
) as [InputWithRefTypeMap[TypeName], MapToStateSetter[TypeName]];
const [inputValue, setInputValue] =
useState<MapToInputType[TypeName]>(initValue);
const [isChangedByUser, setIsChangedByUser] = useState<boolean>(false);
const [isInputValid, setIsInputValid] = useState<boolean>(false);
const setValue: StateSetter = useCallback((value) => {
setInputValue(value as MapToInputType[TypeName]);
}, []);
const testInput: TestInputFunction | undefined = useMemo(() => {
let result;
@ -143,7 +139,7 @@ const InputWithRef = forwardRef(
initOnChange?.call(null, ...args);
postSetAppend?.call(null, ...args);
},
set: setInputValue,
set: setValue,
setType: valueType,
...restCreateInputOnChangeHandlerOptions,
});
@ -160,9 +156,9 @@ const InputWithRef = forwardRef(
getIsChangedByUser: () => isChangedByUser,
getValue: () => inputValue,
isValid: () => isInputValid,
setValue: setInputValue,
setValue,
}),
[inputValue, isChangedByUser, isInputValid],
[inputValue, isChangedByUser, isInputValid, setValue],
);
return cloneElement(input, {

@ -1,31 +1,9 @@
import { InputProps as MUIInputProps } from '@mui/material';
import { Dispatch, SetStateAction } from 'react';
import MAP_TO_VALUE_CONVERTER from './consts/MAP_TO_VALUE_CONVERTER';
type CreateInputOnChangeHandlerTypeMap = Pick<MapToType, 'number' | 'string'>;
type InputOnChangeParameters = Parameters<
Exclude<MUIInputProps['onChange'], undefined>
>;
type MapToStateSetter = {
[TypeName in keyof CreateInputOnChangeHandlerTypeMap]: Dispatch<
SetStateAction<CreateInputOnChangeHandlerTypeMap[TypeName]>
>;
};
type CreateInputOnChangeHandlerOptions<
TypeName extends keyof CreateInputOnChangeHandlerTypeMap,
> = {
postSet?: (...args: InputOnChangeParameters) => void;
preSet?: (...args: InputOnChangeParameters) => void;
set?: MapToStateSetter[TypeName];
setType?: TypeName;
};
const createInputOnChangeHandler =
<TypeName extends keyof CreateInputOnChangeHandlerTypeMap>({
<TypeName extends keyof MapToInputType>({
postSet,
preSet,
set,
@ -37,17 +15,11 @@ const createInputOnChangeHandler =
} = event;
const postConvertValue = MAP_TO_VALUE_CONVERTER[setType](
value,
) as CreateInputOnChangeHandlerTypeMap[TypeName];
) as MapToInputType[TypeName];
preSet?.call(null, event);
set?.call(null, postConvertValue);
postSet?.call(null, event);
};
export type {
CreateInputOnChangeHandlerOptions,
InputOnChangeParameters,
MapToStateSetter,
};
export default createInputOnChangeHandler;

@ -0,0 +1,15 @@
type MapToInputType = Pick<MapToType, 'number' | 'string'>;
type InputOnChangeParameters = Parameters<
Exclude<import('@mui/material').InputBaseProps['onChange'], undefined>
>;
type StateSetter = (value: unknown) => void;
type CreateInputOnChangeHandlerOptions<TypeName extends keyof MapToInputType> =
{
postSet?: (...args: InputOnChangeParameters) => void;
preSet?: (...args: InputOnChangeParameters) => void;
set?: StateSetter;
setType?: TypeName;
};
Loading…
Cancel
Save