feat(input): show eye icon if input type is password (#632)

logicalclocks · May 15, 2024 · 4a4a6a7 · 4a4a6a7
1 parent 0c0160c
commit 4a4a6a7
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 5 deletions.
diff --git a/src/components/input/index.tsx b/src/components/input/index.tsx
@@ -1,14 +1,15 @@
 import { Box, Flex } from 'rebass';
-import { forwardRef } from 'react';
+import { forwardRef, useState } from 'react';
 import { InputProps as RebassInputProps } from 'rebass__forms';
 
 import Label, { LabelProps } from '../label';
 import InputInfo from '../input-info';
 import { Intents } from '../intents';
-import getStyles, { getIconStyle } from './input.styles';
+import getStyles, { getIconStyle, passwordStyles } from './input.styles';
 import Labeling from '../typography/labeling';
 import Tooltip from '../tooltip';
 import { GetIcon, IconName } from '../icon';
+import TooltipPositions from '../tooltip/positions';
 
 export interface InputProps extends Omit<RebassInputProps, 'css'> {
   variant?: 'primary' | 'white';
@@ -55,6 +56,7 @@ const Input = forwardRef(
     ref,
   ) => {
     const isTextArea = type === 'textarea';
+    const [isShowPassword, setIsShow] = useState(false);
 
     const actions = (labelAction || tooltipInfo || optional) && (
       <Flex>
@@ -82,7 +84,7 @@ const Input = forwardRef(
           <Box
             ref={ref}
             as={isTextArea ? 'textarea' : 'input'}
-            type={type}
+            type={isShowPassword ? 'text' : type}
             tx="inputs"
             rows={rows}
             minHeight="32px"
@@ -99,6 +101,21 @@ const Input = forwardRef(
             <GetIcon icon={icon} color="gray" size="sm" sx={getIconStyle} />
           )}
           {rightIcon && rightIcon}
+          {type === 'password' && (
+            <Box
+              onMouseDown={() => setIsShow(true)}
+              onMouseUp={() => setIsShow(false)}
+              onMouseOut={() => setIsShow(false)}
+              sx={passwordStyles(isShowPassword, !props.value)}
+            >
+              <Tooltip
+                mainText="show password"
+                position={TooltipPositions.right}
+              >
+                <GetIcon icon={IconName.eye} size="lg" />
+              </Tooltip>
+            </Box>
+          )}
           {suffix && (
             <Box sx={{ position: 'absolute', right: '8px', top: '9px' }}>
               <Labeling fontSize="9px" bold gray>

diff --git a/src/components/input/input.styles.ts b/src/components/input/input.styles.ts
@@ -29,11 +29,39 @@ const getStyles = (intent: Intents, isTextArea: boolean): SxStyleProp => ({
   ...(isTextArea && { resize: 'vertical' }),
 });
 
+export default getStyles;
+
 export const getIconStyle = {
   left: '8px',
   position: 'absolute',
   top: '8px',
   fontSize: '14px',
 };
 
-export default getStyles;
+export const passwordStyles = (isShow: boolean, disabled: boolean) => ({
+  border: 'none',
+  right: '5px',
+  position: 'absolute',
+  top: '16px',
+  transform: 'translateY(-50%)',
+  fontSize: '14px',
+  userSelect: 'none',
+
+  cursor: 'pointer',
+
+  div: {
+    ': hover': {
+      backgroundColor: 'grayShade2',
+    },
+    height: '25px',
+    border: 'none',
+    backgroundColor: 'grayShade3',
+
+    svg: {
+      path: {
+        // eslint-disable-next-line no-nested-ternary
+        fill: disabled ? 'gray' : isShow ? 'primary' : 'black',
+      },
+    },
+  },
+});
diff --git a/src/components/input/stories.tsx b/src/components/input/stories.tsx
@@ -59,9 +59,9 @@ const meta: Meta<typeof Input> = {
       description: 'Input intent (error border)',
     },
     type: {
+      options: ['textarea', 'text', 'number', 'password'],
       control: {
         type: 'select',
-        options: ['textarea', 'text', 'number'],
       },
       required: false,
     },