Merge branch 'feature/input' into main

Adopta-Un-Abuelo · Sep 27, 2023 · 0e9b789 · 0e9b789
2 parents f70d9c1 + 204a17a
commit 0e9b789
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 22 deletions.
diff --git a/src/components/Input/Input.stories.tsx b/src/components/Input/Input.stories.tsx
@@ -260,6 +260,27 @@ export const InputDate = {
 	}
 };
 
+export const InputDateWithCalendar = {
+    args: {
+        design: 'secondary',
+        type:'date',
+        showCalendar: true,
+        defaultValue: undefined
+    },
+	play: async ({canvasElement, step}: any) =>{
+		const canvas = within(canvasElement);
+		const input = canvas.getByRole('input');
+        const placeholder = canvas.getByRole('placeholder');
+        await step('render', async () =>{
+            expect(input).toBeInTheDocument();
+            expect(placeholder).toBeInTheDocument();
+        });
+        await step('typing', async () =>{
+            userEvent.type(input, '23052023', { delay: 100 });
+        });
+	}
+};
+
 export const InputPassword = {
     args: {
         design: 'secondary',

diff --git a/src/components/Input/InputDate.tsx b/src/components/Input/InputDate.tsx
@@ -10,19 +10,25 @@ const InputDate = (props: InputDatePrimaryProps | InputDateSecondaryProps) =>{
 
     const onChange = (e: any) =>{
         const value = e.target.value;
-        if(value.length === 2 || value.length === 5){
-            if(text && value.length < text.length){
-                //Remove
-                setText(value.slice(0, -1));
-            }
-            else setText(value+'/');
-        }
-        else if(value.length === 10){
-            setText(value);
-            const date:any  = moment(value, 'DD/MM/YYYY').toDate();
+        if(props.showCalendar){
+            const date:any  = moment(value, 'YYYY-MM-DD').toDate();
             props.onChange && props.onChange(date);
         }
-        else setText(value);
+        else{
+            if(value.length === 2 || value.length === 5){
+                if(text && value.length < text.length){
+                    //Remove
+                    setText(value.slice(0, -1));
+                }
+                else setText(value+'/');
+            }
+            else if(value.length === 10){
+                setText(value);
+                const date:any  = moment(value, 'DD/MM/YYYY').toDate();
+                props.onChange && props.onChange(date);
+            }
+            else setText(value);
+        }
     }
 
 
@@ -31,7 +37,7 @@ const InputDate = (props: InputDatePrimaryProps | InputDateSecondaryProps) =>{
             value={text}
             containerStyle={{flex: 1, ...props.containerStyle}}
             {...props}
-            type='text'
+            type={props.showCalendar ? 'date' : 'text'}
             maxLength={10}
             onChange={onChange}
         />
@@ -40,7 +46,7 @@ const InputDate = (props: InputDatePrimaryProps | InputDateSecondaryProps) =>{
             value={text}
             containerStyle={{flex: 1, ...props.containerStyle}}
             {...props}
-            type='text'
+            type={props.showCalendar ? 'date' : 'text'}
             maxLength={10}
             onChange={onChange}
         />
@@ -49,9 +55,9 @@ const InputDate = (props: InputDatePrimaryProps | InputDateSecondaryProps) =>{
 export default InputDate;
 export interface InputDatePrimaryProps extends InputPrimaryProps {
     design?: 'primary',
-
+    showCalendar?: boolean
 }
 export interface InputDateSecondaryProps extends InputSecondaryProps {
     design?: 'secondary',
-
+    showCalendar?: boolean
 }
diff --git a/src/components/Input/InputStyled.tsx b/src/components/Input/InputStyled.tsx
@@ -15,13 +15,6 @@ const Input = styled.input<{hideCalendar?: boolean}>`
     &::placeholder{
         color: ${Color.text.neutralMedium}
     }
-    &::-webkit-calendar-picker-indicator {
-        display: ${props => props.hideCalendar && 'none'};
-        -webkit-appearance: ${props => props.hideCalendar && 'none'};
-    }
-    &::-webkit-calendar-picker-indicator {
-        background: none;
-    }
 `
 const InputStyled = forwardRef((props: InputStyledProps, ref: any) =>{