contentoh-components-library 21.3.3 → 21.3.5

package/src/components/organisms/RangeCalendar/index.js

@@ -1,121 +0,0 @@
-import { Container, CalendarContainer } from "./styles";
-import { useState } from "react";
-import DatePicker, { registerLocale, setDefaultLocale } from "react-datepicker";
-import es from "date-fns/locale/es";
-import { useCloseModal } from "../../../global-files/customHooks";
-import { useEffect } from "react";
-registerLocale("es", es);
-
-export const RangeCalendar = ({
-  setParameterArray,
-  minDate = new Date(),
-  currentDates,
-  label = "Elige las fechas",
-  calendarId = "calendar-id",
-}) => {
-  const [startDate, setStartDate] = useState(new Date());
-  const [endDate, setEndDate] = useState(new Date());
-  const [showCalendar, setShowCalendar] = useCloseModal(calendarId);
-  useEffect(() => {
-    if (currentDates) {
-      console.log(currentDates);
-      setStartDate(new Date(currentDates.start));
-      setEndDate(new Date(currentDates.end));
-    }
-  }, [currentDates]);
-  const onChange = (dates) => {
-    const [start, end] = dates;
-    setStartDate(start);
-    setEndDate(end);
-    if (end) {
-      setParameterArray &&
-        setParameterArray((current) => {
-          return {
-            ...current,
-            estimatedStartDate: start.toISOString().substring(0, 10),
-            estimatedDate: end.toISOString().substring(0, 10),
-          };
-        });
-    }
-  };
-  return (
-    <Container>
-      <div
-        className="calendar-dropdown"
-        onClick={(e) => {
-          e.stopPropagation();
-          setShowCalendar(true);
-        }}
-      >
-        <p>{label}</p>
-        <div className="arrow-item">&#9664;</div>
-      </div>
-      {showCalendar && (
-        <CalendarContainer id={calendarId}>
-          <DatePicker
-            selected={startDate}
-            onChange={onChange}
-            startDate={startDate}
-            endDate={endDate}
-            renderCustomHeader={({
-              monthDate,
-              customHeaderCount,
-              decreaseMonth,
-              increaseMonth,
-            }) => (
-              <div>
-                <button
-                  aria-label="Previous Month"
-                  className={
-                    "react-datepicker__navigation react-datepicker__navigation--previous"
-                  }
-                  style={
-                    customHeaderCount === 1 ? { visibility: "hidden" } : null
-                  }
-                  onClick={decreaseMonth}
-                >
-                  <span
-                    className={
-                      "react-datepicker__navigation-icon react-datepicker__navigation-icon--previous"
-                    }
-                  >
-                    {"<"}
-                  </span>
-                </button>
-                <span className="react-datepicker__current-month">
-                  {monthDate.toLocaleString("es-Es", {
-                    month: "long",
-                    year: "numeric",
-                  })}
-                </span>
-                <button
-                  aria-label="Next Month"
-                  className={
-                    "react-datepicker__navigation react-datepicker__navigation--next"
-                  }
-                  style={
-                    customHeaderCount === 0 ? { visibility: "hidden" } : null
-                  }
-                  onClick={increaseMonth}
-                >
-                  <span
-                    className={
-                      "react-datepicker__navigation-icon react-datepicker__navigation-icon--next"
-                    }
-                  >
-                    {">"}
-                  </span>
-                </button>
-              </div>
-            )}
-            monthsShown={2}
-            selectsRange
-            inline
-            minDate={minDate}
-            locale="es"
-          />
-        </CalendarContainer>
-      )}
-    </Container>
-  );
-};