🎨 styles: input common with icon, input password

:%s
This commit is contained in:
lytrankieio123
2021-08-30 12:49:23 +07:00
parent f94aded113
commit 0337e10b6a
12 changed files with 229 additions and 60 deletions

View File

@@ -1,5 +1,6 @@
import classNames from 'classnames';
import React, { forwardRef, useImperativeHandle, useRef } from 'react';
import React, { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react';
import { IconCheck, IconError, IconPassword, IconPasswordCross } from 'src/components/icons';
import { KEY } from 'src/utils/constanst.utils';
import s from './InputCommon.module.scss';
@@ -14,14 +15,29 @@ interface Props {
styleType?: 'default' | 'custom',
backgroundTransparent?: boolean,
icon?: React.ReactNode,
isIconSuffix?: boolean,
isShowIconSuccess?: boolean,
error?: string,
onChange?: (value: string | number) => void,
onEnter?: (value: string | number) => void,
}
const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleType = 'default', icon, backgroundTransparent = false,
isIconSuffix, isShowIconSuccess, error,
onChange, onEnter }: Props, ref) => {
const inputElementRef = useRef<HTMLInputElement>(null);
const iconElement = useMemo(() => {
if (error) {
return <span className={s.icon}><IconError /> </span>
} else if (isShowIconSuccess) {
return <span className={s.icon}><IconCheck /> </span>
} else if (icon) {
return <span className={s.icon}>{icon} </span>
}
return <></>
}, [icon, error, isShowIconSuccess])
useImperativeHandle(ref, () => ({
focus: () => {
inputElementRef.current?.focus();
@@ -44,23 +60,33 @@ const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleTyp
}
return (
<div className={s.inputWrap}>
<div className={classNames({
[s.inputWrap]: true,
})}>
<div className={classNames({
[s.inputInner]: true,
[s.preserve]: isIconSuffix,
[s.success]: isShowIconSuccess,
[s.error]: !!error,
})}>
{iconElement}
<input
ref={inputElementRef}
value={value}
type={type}
placeholder={placeholder}
onChange={handleChange}
onKeyDown={handleKeyDown}
className={classNames({
[s.inputCommon]: true,
[s[styleType]]: true,
[s.bgTransparent]: backgroundTransparent
})}
/>
</div>
{
icon && <span className={s.icon}>{icon}</span>
error && <div className={s.errorMessage}>{error}</div>
}
<input
ref={inputElementRef}
value={value}
type={type}
placeholder={placeholder}
onChange={handleChange}
onKeyDown={handleKeyDown}
className={classNames({
[s.inputCommon]: true,
[s[styleType]]: true,
[s.bgTransparent]: backgroundTransparent
})}
/>
</div>
)