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

🎨 styles: home subscribe

Browse Source 
:%s
This commit is contained in:
lytrankieio123
2021-08-26 16:13:11 +07:00
parent 4970dbe364
commit 3c09ad1770
12 changed files with 132 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,3 +1,4 @@
import classNames from 'classnames';
import React, { forwardRef, useImperativeHandle, useRef } from 'react';
import { KEY } from 'src/utils/constanst.utils';
import s from './InputCommon.module.scss';
@@ -9,14 +10,15 @@ interface Props {
children?: React.ReactNode,
value?: string | number,
placeholder?: string,
type?: 'text' | 'number',
type?: 'text' | 'number' | 'email',
styleType?: 'default' | 'custom',
backgroundTransparent?: boolean,
icon?: React.ReactNode,
onChange?: (value: string | number) => void,
onEnter?: (value: string | number) => void,
}
const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleType = 'default', icon,
const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleType = 'default', icon, backgroundTransparent = false,
onChange, onEnter }: Props, ref) => {
const inputElementRef = useRef<HTMLInputElement>(null);
@@ -24,6 +26,10 @@ const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleTyp
focus: () => {
inputElementRef.current?.focus();
},
getValue: () => {
const value = inputElementRef.current?.value || ''
return value
}
}));
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -32,6 +38,7 @@ const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleTyp
const handleKeyDown = (e: any) => {
if (e.key === KEY.ENTER && onEnter) {
console.log("on enter***")
const value = inputElementRef.current?.value || ''
onEnter(value)
}
@@ -49,7 +56,11 @@ const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleTyp
placeholder={placeholder}
onChange={handleChange}
onKeyDown={handleKeyDown}
className={`${s.inputCommon} ${s[styleType]}`}
className={classNames({
[s.inputCommon]: true,
[s[styleType]]: true,
[s.bgTransparent]: backgroundTransparent
})}
/>
</div>
)