└── LastDaysPicker.jsx


/LastDaysPicker.jsx:
--------------------------------------------------------------------------------
 1 | import { useMemo, useState } from 'react';
 2 | import classes from './LastDaysPicker.module.css';
 3 | 
 4 | const LastDaysPicker = ({
 5 |   values,
 6 |   leftText,
 7 |   rightText,
 8 |   defaultValue,
 9 |   forwardedRef,
10 |   onChange,
11 |   containerClassName
12 | }) => {
13 |   const valuesList = useMemo(
14 |     () => (Array.isArray(values) ? values : [30, 60, 90, 180]),
15 |     [values]
16 |   );
17 |   const firstValue = useMemo(
18 |     () => (defaultValue !== undefined ? defaultValue : 30),
19 |     [defaultValue]
20 |   );
21 |   const [days, setDaysSelector] = useState(firstValue);
22 | 
23 |   const setDays = (e) => {
24 |     let value = +e.target.textContent;
25 |     if (isNaN(value)) {
26 |       value = e.target.textContent;
27 |     }
28 |     onChange(value);
29 |     setDaysSelector(value);
30 |   };
31 | 
32 |   return (
33 |     <div
34 |       className={containerClassName ? containerClassName : ''}
35 |       ref={forwardedRef}
36 |     >
37 |       <span className={classes.daysText}>{leftText ? leftText : 'LAST'}</span>
38 |       {valuesList.map((value, i) => (
39 |         <span
40 |           key={`value-${i}`}
41 |           className={`${classes.days} ${
42 |             days === value ? classes.selected : ''
43 |           }`}
44 |           onClick={setDays}
45 |         >
46 |           {value}
47 |         </span>
48 |       ))}
49 |       <span className={classes.daysText}>{rightText ? rightText : 'DAYS'}</span>
50 |     </div>
51 |   );
52 | };
53 | 
54 | export default LastDaysPicker;
55 | 


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