🎨 styles: home subscribe

:%s

src/components/common/InputCommon/InputCommon.tsx

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