contentoh-components-library 21.3.30 → 21.3.32

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

@@ -0,0 +1,121 @@
+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";
+import { getFormatedDate } from "../../../global-files/utils";
+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) {
+      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: getFormatedDate(new Date(start), "-"),
+            estimatedDate: getFormatedDate(new Date(end), "-"),
+          };
+        });
+    }
+  };
+  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>
+  );
+};