└── AddDataInput.jsx


/AddDataInput.jsx:
--------------------------------------------------------------------------------
  1 | import { useMemo, useState } from 'react';
  2 | import { ReactComponent as WarningIcon } from '../../img/ui/warning_icon.svg';
  3 | import { ReactComponent as ConfirmIcon } from '../../img/ui/confirm_icon.svg';
  4 | import { ReactComponent as AddIcon } from '../../img/ui/add_icon.svg';
  5 | import { ReactComponent as RemoveIcon } from '../../img/ui/remove_icon.svg';
  6 | import { ReactComponent as CleanIcon } from '../../img/ui/clean_icon.svg';
  7 | import classes from './AddDataInput.module.css';
  8 | import { accentColor, alertMessages } from '../../utils/constants';
  9 | import { DataLoader } from '../Loaders/Loaders';
 10 | 
 11 | export const AddDataInput = ({
 12 |   placeholder,
 13 |   value,
 14 |   setValue,
 15 |   hasLoader,
 16 |   setAlert
 17 | }) => {
 18 |   const initValue = useMemo(() => (value ? value.split(',') : []), [value]);
 19 |   const [text, setText] = useState('');
 20 |   const [isActive, setActive] = useState(false);
 21 |   const [editIndex, setEditIndex] = useState(null);
 22 |   const [loading, setLoading] = useState(false);
 23 |   const showLoader = useMemo(() => hasLoader && loading, [hasLoader, loading]);
 24 | 
 25 |   const onChange = (e) => {
 26 |     setText(e.target.value);
 27 |   };
 28 | 
 29 |   const onClick = () => {
 30 |     setActive(true);
 31 |   };
 32 | 
 33 |   const removeValue = async () => {
 34 |     setLoading(true);
 35 |     const res = await setValue(
 36 |       initValue.filter((v, i) => i !== editIndex).join(',')
 37 |     );
 38 | 
 39 |     if (res) {
 40 |       setText('');
 41 |       setActive(false);
 42 |       setEditIndex(null);
 43 |     } else if (setAlert) {
 44 |       setAlert(alertMessages.somethingWrong, 'error');
 45 |     }
 46 |     setLoading(false);
 47 |   };
 48 |   const addValue = async () => {
 49 |     if (!text) {
 50 |       setActive(false);
 51 |       return;
 52 |     }
 53 |     let res = null;
 54 |     if (editIndex !== null) {
 55 |       if (initValue.includes(text)) {
 56 |         setActive(false);
 57 |         return;
 58 |       }
 59 |       setLoading(true);
 60 |       res = await setValue(
 61 |         initValue.map((v, i) => (i === editIndex ? text : v)).join(',')
 62 |       );
 63 |     } else {
 64 |       setLoading(true);
 65 |       res = await setValue(initValue.concat(text).join(','));
 66 |     }
 67 |     if (res) {
 68 |       setText('');
 69 |       setActive(false);
 70 |       setEditIndex(null);
 71 |     } else if (setAlert) {
 72 |       setAlert(alertMessages.somethingWrong, 'error');
 73 |     }
 74 |     setLoading(false);
 75 |   };
 76 | 
 77 |   const addMore = () => {
 78 |     setText('');
 79 |     setActive(true);
 80 |     setEditIndex(null);
 81 |   };
 82 | 
 83 |   const clearText = () => {
 84 |     setText('');
 85 |     setActive(false);
 86 |   };
 87 |   const changeValue = (v, i) => {
 88 |     setText(v);
 89 |     setActive(true);
 90 |     setEditIndex(i);
 91 |   };
 92 | 
 93 |   return (
 94 |     <div className={classes.container}>
 95 |       <div
 96 |         className={`${classes.valueBox} ${
 97 |           value && !isActive ? classes.valueBoxActive : ''
 98 |         }`}
 99 |       >
100 |         <ul>
101 |           {initValue.map((v, i) => (
102 |             <li
103 |               key={`data-row-${i}`}
104 |               className={classes.valueLine}
105 |               onClick={() => changeValue(v, i)}
106 |             >
107 |               {v}
108 |             </li>
109 |           ))}
110 |         </ul>
111 |         {initValue.length === 1 && (
112 |           <AddIcon
113 |             className={`${classes.activeIcon} ${classes.confirmIcon}`}
114 |             onClick={addMore}
115 |           />
116 |         )}
117 |       </div>
118 |       <div
119 |         className={`${classes.dataInputContainer} ${
120 |           isActive || !value ? classes.dataInputContainerActive : ''
121 |         }`}
122 |       >
123 |         <div
124 |           className={`${classes.dataInputBox} ${
125 |             isActive ? classes.dataInputBoxActive : ''
126 |           }`}
127 |         >
128 |           <input
129 |             value={text}
130 |             className={classes.dataInput}
131 |             onChange={onChange}
132 |             onClick={onClick}
133 |             placeholder={placeholder}
134 |           />
135 |           {isActive ? (
136 |             editIndex !== null ? (
137 |               <div className={classes.activeIconsBox}>
138 |                 <ConfirmIcon
139 |                   className={`${classes.activeIcon} ${classes.confirmIcon}`}
140 |                   onClick={addValue}
141 |                 />
142 |                 <RemoveIcon
143 |                   className={`${classes.activeIcon} ${classes.removeIcon}`}
144 |                   onClick={removeValue}
145 |                 />
146 |               </div>
147 |             ) : (
148 |               <div className={classes.activeIconsBox}>
149 |                 <AddIcon
150 |                   className={`${classes.activeIcon} ${classes.confirmIcon}`}
151 |                   onClick={addValue}
152 |                 />
153 |                 <CleanIcon onClick={clearText} className={classes.activeIcon} />
154 |               </div>
155 |             )
156 |           ) : (
157 |             <WarningIcon className={classes.inactiveIcon} />
158 |           )}
159 |         </div>
160 |         {showLoader && (
161 |           <div className={classes.loaderBox}>
162 |             <DataLoader size="20px" color={accentColor} />
163 |           </div>
164 |         )}
165 |       </div>
166 |     </div>
167 |   );
168 | };
169 | 


--------------------------------------------------------------------------------