contentoh-components-library 21.5.35 → 21.5.36

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

@@ -1,16 +1,16 @@
-import { RangeCalendar } from ".";
-
-export default {
-  title: "Components/organisms/RangeCalendar",
-  component: RangeCalendar,
-};
-
-const Template = (args) => <RangeCalendar {...args} />;
-
-export const DefaultRangeCalendar = Template.bind({});
-DefaultRangeCalendar.args = {
-  currentDates: {
-    start: "2022-12-15T00:00:00.000Z",
-    end: "2022-12-25T00:00:00.000Z",
-  },
-};
+import { RangeCalendar } from ".";
+
+export default {
+  title: "Components/organisms/RangeCalendar",
+  component: RangeCalendar,
+};
+
+const Template = (args) => <RangeCalendar {...args} />;
+
+export const DefaultRangeCalendar = Template.bind({});
+DefaultRangeCalendar.args = {
+  currentDates: {
+    start: "2022-12-15T00:00:00.000Z",
+    end: "2022-12-25T00:00:00.000Z",
+  },
+};

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

@@ -1,121 +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>
-  );
-};
+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>
+  );
+};