fix(striker-ui): allow wrapper 'type' in OutlinedInput

main
Tsu-ba-me 2 years ago
parent e31d4564ee
commit e73afffc55
  1. 19
      striker-ui/components/OutlinedInput/OutlinedInput.tsx

@ -37,18 +37,21 @@ const OutlinedInput: FC<OutlinedInputProps> = (outlinedInputProps) => {
onPasswordVisibilityAppend, onPasswordVisibilityAppend,
sx, sx,
inputProps: { type: baseType, ...inputRestProps } = {}, inputProps: { type: baseType, ...inputRestProps } = {},
// Input props that depend on other input props.
type: initialType = baseType,
...outlinedInputRestProps ...outlinedInputRestProps
} = outlinedInputProps; } = outlinedInputProps;
const [type, setType] = useState<string>(baseType); const [type, setType] = useState<string>(initialType);
const additionalEndAdornment = useMemo(() => { const passwordVisibilityButton = useMemo(() => {
const isBaseTypePassword = baseType === INPUT_TYPES.password; const isInitialTypePassword = initialType === INPUT_TYPES.password;
const isTypePassword = type === INPUT_TYPES.password; const isTypePassword = type === INPUT_TYPES.password;
return ( return (
<> <>
{isBaseTypePassword && ( {isInitialTypePassword && (
<MUIIconButton <MUIIconButton
onClick={(...args) => { onClick={(...args) => {
const newType = isTypePassword const newType = isTypePassword
@ -64,7 +67,7 @@ const OutlinedInput: FC<OutlinedInputProps> = (outlinedInputProps) => {
)} )}
</> </>
); );
}, [baseType, onPasswordVisibilityAppend, type]); }, [initialType, onPasswordVisibilityAppend, type]);
const combinedSx = useMemo( const combinedSx = useMemo(
() => ({ () => ({
color: GREY, color: GREY,
@ -104,11 +107,11 @@ const OutlinedInput: FC<OutlinedInputProps> = (outlinedInputProps) => {
props: { children: castedChildren = [], ...castedRestProps }, props: { children: castedChildren = [], ...castedRestProps },
} = casted; } = casted;
return cloneElement(casted, { result = cloneElement(casted, {
...castedRestProps, ...castedRestProps,
children: ( children: (
<> <>
{additionalEndAdornment} {passwordVisibilityButton}
{castedChildren} {castedChildren}
</> </>
), ),
@ -116,7 +119,7 @@ const OutlinedInput: FC<OutlinedInputProps> = (outlinedInputProps) => {
} }
return result; return result;
}, [additionalEndAdornment, endAdornment]); }, [passwordVisibilityButton, endAdornment]);
return ( return (
<MUIOutlinedInput <MUIOutlinedInput

Loading…
Cancel
Save