odaptos_design_system 2.0.5 → 2.0.7

package/src/Atoms/NumbersCode/NumbersCode.tsx

@@ -1,224 +1,224 @@
-import React from 'react';
-import { TextField } from '@mui/material';
-import styles from './NumbersCode.modules.scss';
-import { useState } from 'react';
-import { styled } from '@mui/material/styles';
-
-const CssTextField = styled(TextField)({
-  '& .MuiInputBase-input': {
-    color: '#26292E',
-    height: '2.75rem',
-    border: '1px',
-    borderColor: '#BCBDBE',
-    borderRadius: '0.5rem',
-    width: '2.25rem',
-    textAlign: 'center',
-    fontFamily: 'Poppins !important',
-    fontSize: '1rem',
-    fontWeight: '400',
-    padding: '0',
-  },
-  '& .MuiInputBase-input.Mui-disabled': {
-    color: '#26292E',
-    borderColor: '#BCBDBE',
-    border: '1px',
-    borderRadius: '0.5rem',
-    height: '2.75rem',
-    width: '2.25rem',
-    textAlign: 'center',
-    fontFamily: 'Poppins !important',
-    fontSize: '1rem',
-    fontWeight: '400',
-    padding: '0',
-  },
-  '& .Mui-error': {
-    color: '#26292E',
-  },
-  '& .MuiFormHelperText-root': {
-    color: '#F54C4C',
-  },
-  '& .MuiFormLabel-asterisk': {
-    color: '#F54C4C',
-  },
-  '& .MuiOutlinedInput-root.Mui-disabled': {
-    cursor: 'not-allowed',
-    color: '#26292E',
-    fieldset: {
-      borderColor: '#BCBDBE',
-    },
-    '&:hover fieldset': {
-      borderColor: '#BCBDBE',
-    },
-  },
-  '& label': {
-    color: '#26292E',
-    fontFamily: 'OpenSans !important',
-    fontSize: '1rem',
-  },
-  '& label.Mui-disabled.Mui-error': {
-    color: '#26292E',
-    opacity: 0.5,
-    fontFamily: 'OpenSans !important',
-    fontSize: '1rem',
-  },
-  '& label.Mui-focused': {
-    color: '#26292E',
-    fontFamily: 'OpenSans',
-    fontSize: '1rem',
-    backgroundColor: '#fff',
-    marginRight: 5,
-    paddingRight: 5,
-  },
-  '& .MuiOutlinedInput-root': {
-    fontFamily: 'OpenSans',
-    '& fieldset': {
-      borderColor: '#BCBDBE',
-      borderRadius: '0.5rem',
-    },
-    '& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button': {
-      display: 'none',
-    },
-    '& input[type=number]': {
-      MozAppearance: 'textfield',
-    },
-    '& input::placeholder': {
-      color: '#26292E',
-      opacity: "1",
-    },
-    '&:hover fieldset': {
-      borderColor: '#0077FF',
-      borderRadius: '0.5rem',
-    },
-    '&.Mui-focused fieldset': {
-      borderColor: '#0077FF',
-      borderRadius: '0.5rem',
-    },
-    '&.Mui-error fieldset': {
-      borderColor: '#F54C4C',
-      borderRadius: '0.5rem',
-    },
-    '&.Mui-disabled .Mui-focused fieldset': {
-      borderColor: 'rgba(0, 119, 255, 0.5)',
-      borderRadius: '0.5rem',
-    },
-    '& .MuiAutocomplete-endAdornment': {
-      height: '99%',
-      marginTop: '-0.20rem',
-      '& .MuiButtonBase-root': {
-        height: '99%',
-        '&:hover': {
-          background: 'transparent',
-        },
-      },
-    },
-  },
-});
-
-export interface NumbersCodeProps {
-  number?: number;
-  code: string;
-  isValid: boolean[];
-  setIsValid: (isValid: boolean[]) => void;
-  userValue: string[];
-  setUserValue: (newValue: string[]) => void;
-  placeholder?: string;
-  containerClassname?: string;
-  className?: string;
-}
-
-export interface InputElementProps {
-  inputNumber: number;
-  inputCode: string;
-  isValid: boolean[];
-  userValue: string[];
-  setUserValue: (newValue: string[]) => void;
-  setIsValid: (isValid: boolean[]) => void;
-  maxElement: number;
-  placeholder?: string;
-  className?: string;
-}
-
-const NumberInput = ({
-  className,
-  inputCode,
-  inputNumber,
-  isValid,
-  userValue,
-  setUserValue,
-  setIsValid,
-  maxElement,
-  placeholder,
-  ...props
-}: InputElementProps) => {
-  const [value, setValue] = useState('');
-
-  return (
-    <CssTextField
-      value={value}
-      onKeyDown={(event) => {
-        if (event.key === "Backspace") {
-          let newValidity = [...isValid];
-          setValue("");
-          let newUserValue = [...userValue];
-          newUserValue[inputNumber] = "";
-          setUserValue(newUserValue);
-          setIsValid([...newValidity]);
-        }
-        if (Number(event.key) || Number(event.key) === 0) {
-          let newValidity = [...isValid];
-          setValue(event.key);
-          newValidity[inputNumber] = event.key === inputCode;
-          let newUserValue = [...userValue];
-          newUserValue[inputNumber] = event.key;
-          setUserValue(newUserValue);
-          setIsValid([...newValidity]);
-          if (inputNumber < maxElement - 1) {
-            const nextInput = document.getElementById(
-              `NumberInput#${inputNumber + 1}`
-            );
-            if (nextInput) {
-              nextInput.focus();
-            }
-          }
-        }
-      }}
-      id={`NumberInput#${inputNumber}`}
-      placeholder={placeholder}
-      className={`${styles.input_number} ${className ?? ''}`}
-      {...props}
-    />
-  );
-};
-
-/** Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=131-253&mode=dev */
-export const NumbersCode = ({
-  className,
-  code,
-  userValue,
-  setUserValue,
-  isValid,
-  setIsValid,
-  containerClassname,
-  placeholder = "_",
-  number = 6
-}: NumbersCodeProps) => {
-
-  const children: React.JSX.Element[] = [];
-  for (let i = 0; i < number; i += 1) {
-    children.push(
-      <NumberInput
-        userValue={userValue}
-        setUserValue={setUserValue}
-        setIsValid={setIsValid}
-        isValid={isValid}
-        inputCode={code ? code.charAt(i): ''}
-        className={className}
-        inputNumber={i}
-        placeholder={placeholder}
-        maxElement={number} />
-    );
-  }
-  return (
-    <div className={`${containerClassname ?? ''} ${styles.blockList}`}>{children}</div>
-  );
-};
+import React from 'react';
+import { TextField } from '@mui/material';
+import styles from './NumbersCode.modules.scss';
+import { useState } from 'react';
+import { styled } from '@mui/material/styles';
+
+const CssTextField = styled(TextField)({
+  '& .MuiInputBase-input': {
+    color: '#26292E',
+    height: '2.75rem',
+    border: '1px',
+    borderColor: '#BCBDBE',
+    borderRadius: '0.5rem',
+    width: '2.25rem',
+    textAlign: 'center',
+    fontFamily: 'Poppins !important',
+    fontSize: '1rem',
+    fontWeight: '400',
+    padding: '0',
+  },
+  '& .MuiInputBase-input.Mui-disabled': {
+    color: '#26292E',
+    borderColor: '#BCBDBE',
+    border: '1px',
+    borderRadius: '0.5rem',
+    height: '2.75rem',
+    width: '2.25rem',
+    textAlign: 'center',
+    fontFamily: 'Poppins !important',
+    fontSize: '1rem',
+    fontWeight: '400',
+    padding: '0',
+  },
+  '& .Mui-error': {
+    color: '#26292E',
+  },
+  '& .MuiFormHelperText-root': {
+    color: '#F54C4C',
+  },
+  '& .MuiFormLabel-asterisk': {
+    color: '#F54C4C',
+  },
+  '& .MuiOutlinedInput-root.Mui-disabled': {
+    cursor: 'not-allowed',
+    color: '#26292E',
+    fieldset: {
+      borderColor: '#BCBDBE',
+    },
+    '&:hover fieldset': {
+      borderColor: '#BCBDBE',
+    },
+  },
+  '& label': {
+    color: '#26292E',
+    fontFamily: 'OpenSans !important',
+    fontSize: '1rem',
+  },
+  '& label.Mui-disabled.Mui-error': {
+    color: '#26292E',
+    opacity: 0.5,
+    fontFamily: 'OpenSans !important',
+    fontSize: '1rem',
+  },
+  '& label.Mui-focused': {
+    color: '#26292E',
+    fontFamily: 'OpenSans',
+    fontSize: '1rem',
+    backgroundColor: '#fff',
+    marginRight: 5,
+    paddingRight: 5,
+  },
+  '& .MuiOutlinedInput-root': {
+    fontFamily: 'OpenSans',
+    '& fieldset': {
+      borderColor: '#BCBDBE',
+      borderRadius: '0.5rem',
+    },
+    '& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button': {
+      display: 'none',
+    },
+    '& input[type=number]': {
+      MozAppearance: 'textfield',
+    },
+    '& input::placeholder': {
+      color: '#26292E',
+      opacity: "1",
+    },
+    '&:hover fieldset': {
+      borderColor: '#0077FF',
+      borderRadius: '0.5rem',
+    },
+    '&.Mui-focused fieldset': {
+      borderColor: '#0077FF',
+      borderRadius: '0.5rem',
+    },
+    '&.Mui-error fieldset': {
+      borderColor: '#F54C4C',
+      borderRadius: '0.5rem',
+    },
+    '&.Mui-disabled .Mui-focused fieldset': {
+      borderColor: 'rgba(0, 119, 255, 0.5)',
+      borderRadius: '0.5rem',
+    },
+    '& .MuiAutocomplete-endAdornment': {
+      height: '99%',
+      marginTop: '-0.20rem',
+      '& .MuiButtonBase-root': {
+        height: '99%',
+        '&:hover': {
+          background: 'transparent',
+        },
+      },
+    },
+  },
+});
+
+export interface NumbersCodeProps {
+  number?: number;
+  code: string;
+  isValid: boolean[];
+  setIsValid: (isValid: boolean[]) => void;
+  userValue: string[];
+  setUserValue: (newValue: string[]) => void;
+  placeholder?: string;
+  containerClassname?: string;
+  className?: string;
+}
+
+export interface InputElementProps {
+  inputNumber: number;
+  inputCode: string;
+  isValid: boolean[];
+  userValue: string[];
+  setUserValue: (newValue: string[]) => void;
+  setIsValid: (isValid: boolean[]) => void;
+  maxElement: number;
+  placeholder?: string;
+  className?: string;
+}
+
+const NumberInput = ({
+  className,
+  inputCode,
+  inputNumber,
+  isValid,
+  userValue,
+  setUserValue,
+  setIsValid,
+  maxElement,
+  placeholder,
+  ...props
+}: InputElementProps) => {
+  const [value, setValue] = useState('');
+
+  return (
+    <CssTextField
+      value={value}
+      onKeyDown={(event) => {
+        if (event.key === "Backspace") {
+          let newValidity = [...isValid];
+          setValue("");
+          let newUserValue = [...userValue];
+          newUserValue[inputNumber] = "";
+          setUserValue(newUserValue);
+          setIsValid([...newValidity]);
+        }
+        if (Number(event.key) || Number(event.key) === 0) {
+          let newValidity = [...isValid];
+          setValue(event.key);
+          newValidity[inputNumber] = event.key === inputCode;
+          let newUserValue = [...userValue];
+          newUserValue[inputNumber] = event.key;
+          setUserValue(newUserValue);
+          setIsValid([...newValidity]);
+          if (inputNumber < maxElement - 1) {
+            const nextInput = document.getElementById(
+              `NumberInput#${inputNumber + 1}`
+            );
+            if (nextInput) {
+              nextInput.focus();
+            }
+          }
+        }
+      }}
+      id={`NumberInput#${inputNumber}`}
+      placeholder={placeholder}
+      className={`${styles.input_number} ${className ?? ''}`}
+      {...props}
+    />
+  );
+};
+
+/** Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=131-253&mode=dev */
+export const NumbersCode = ({
+  className,
+  code,
+  userValue,
+  setUserValue,
+  isValid,
+  setIsValid,
+  containerClassname,
+  placeholder = "_",
+  number = 6
+}: NumbersCodeProps) => {
+
+  const children: React.JSX.Element[] = [];
+  for (let i = 0; i < number; i += 1) {
+    children.push(
+      <NumberInput
+        userValue={userValue}
+        setUserValue={setUserValue}
+        setIsValid={setIsValid}
+        isValid={isValid}
+        inputCode={code ? code.charAt(i): ''}
+        className={className}
+        inputNumber={i}
+        placeholder={placeholder}
+        maxElement={number} />
+    );
+  }
+  return (
+    <div className={`${containerClassname ?? ''} ${styles.blockList}`}>{children}</div>
+  );
+};