crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-23 04:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

styles: input common

Browse Source
This commit is contained in:
lytrankieio123
2021-08-24 13:45:30 +07:00
parent 2db3f97bbb
commit 71eaa424ec
9 changed files with 88 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/common/InputCommon/InputCommon.tsx
View File

@@ -11,11 +11,14 @@ interface Props {
value?: string | number,
placeholder?: string,
type?: 'text' | 'number',
styleType?: 'default' | 'custom',
icon?: React.ReactNode,
onChange?: (value: string | number) => void,
onEnter?: (value: string | number) => void,
}
const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, onChange, onEnter }: Props, ref) => {
const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleType = 'default', icon,
onChange, onEnter }: Props, ref) => {
const inputElementRef = useRef<HTMLInputElement>(null);
useImperativeHandle(ref, () => ({
@@ -36,15 +39,20 @@ const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, onChange
}
return (
<input
ref={inputElementRef}
value={value}
type={type}
placeholder={placeholder}
onChange={handleChange}
onKeyDown={handleKeyDown}
className={s.inputCommon}
/>
<div className={s.inputWrap}>
{
icon && <span className={s.icon}>{icon}</span>
}
<input
ref={inputElementRef}
value={value}
type={type}
placeholder={placeholder}
onChange={handleChange}
onKeyDown={handleKeyDown}
className={`${s.inputCommon} ${s[styleType]}`}
/>
</div>
)
})