|
|
@ -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 |
|
|
|