contentoh-components-library 21.5.32 → 21.5.34

package/src/components/molecules/CustomSelect/SelectItem.js

@@ -1,104 +1,104 @@
-import { useState } from "react";
-import { CheckBox } from "../../atoms/CheckBox";
-
-export const SelecItem = ({
-  option,
-  customSelectId,
-  setParameterArray,
-  activeFilters,
-  setActiveFilters,
-  onClickItem,
-}) => {
-  const [showSubOptions, setShowSubOptions] = useState(false);
-  const [chkGlobal, setChkGlobal] = useState(false);
-  return (
-    <div className="option-container" key={customSelectId + option.id}>
-      <div className="main-item">
-        <CheckBox
-          id={"main-item-" + option.id}
-          label={option.name}
-          onChange={(e) => {
-            if (onClickItem) {
-              onClickItem(e.target.checked, option.id)
-            }
-            const subOptions = option.subOptions;
-            const filtersCopy = { ...activeFilters };
-            if (subOptions) {
-              setChkGlobal(e.target.checked);
-              if (e.target.checked) {
-                subOptions.forEach((element) => {
-                  if (!filtersCopy[option.name]) filtersCopy[option.name] = {};
-                  filtersCopy[option.name][element.name] = 1;
-                });
-                setParameterArray((current) => [
-                  ...current,
-                  ...subOptions.map((element) => element.id),
-                ]);
-              } else {
-                setParameterArray((current) =>
-                  current.filter(
-                    (item) => !subOptions.map((opt) => opt.id).includes(item)
-                  )
-                );
-                delete filtersCopy[option.name];
-              }
-            } else {
-              if (e.target.checked) {
-                filtersCopy[option.name] = 1;
-                setParameterArray((current) => [...current, option.id]);
-              } else {
-                delete filtersCopy[option.name];
-                setParameterArray((current) =>
-                  current.filter((item) => option.id !== item)
-                );
-              }
-            }
-            setActiveFilters(filtersCopy);
-          }}
-          defaultChecked={activeFilters[option.name]}
-        />
-        {option.subOptions && (
-          <div
-            onClick={() => setShowSubOptions(!showSubOptions)}
-            className="arrow-item"
-          >
-            &#9664;
-          </div>
-        )}
-      </div>
-      {showSubOptions && (
-        <div className="sub-menu">
-          {option?.subOptions?.map((sub) => (
-            <div
-              className="sub-filter"
-              key={customSelectId + "-" + option.id + "-" + sub.id}
-            >
-              <CheckBox
-                id={"sub-item-" + sub.id}
-                label={sub.name}
-                defaultChecked={
-                  activeFilters[option.name] &&
-                  activeFilters[option.name][sub.name]
-                }
-                onChange={(e) => {
-                  if (onClickItem) {
-                    onClickItem(e.target.checked, sub.id)
-                  }
-                  if (e.target.checked) {
-                    setParameterArray((current) =>
-                      [...current, sub.id].sort((a, b) => a - b)
-                    );
-                  } else {
-                    setParameterArray((current) =>
-                      current.filter((item) => sub.id !== item)
-                    );
-                  }
-                }}
-              />
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};
+import { useState } from "react";
+import { CheckBox } from "../../atoms/CheckBox";
+
+export const SelecItem = ({
+  option,
+  customSelectId,
+  setParameterArray,
+  activeFilters,
+  setActiveFilters,
+  onClickItem,
+}) => {
+  const [showSubOptions, setShowSubOptions] = useState(false);
+  const [chkGlobal, setChkGlobal] = useState(false);
+  return (
+    <div className="option-container" key={customSelectId + option.id}>
+      <div className="main-item">
+        <CheckBox
+          id={"main-item-" + option.id}
+          label={option.name}
+          onChange={(e) => {
+            if (onClickItem) {
+              onClickItem(e.target.checked, option.id)
+            }
+            const subOptions = option.subOptions;
+            const filtersCopy = { ...activeFilters };
+            if (subOptions) {
+              setChkGlobal(e.target.checked);
+              if (e.target.checked) {
+                subOptions.forEach((element) => {
+                  if (!filtersCopy[option.name]) filtersCopy[option.name] = {};
+                  filtersCopy[option.name][element.name] = 1;
+                });
+                setParameterArray((current) => [
+                  ...current,
+                  ...subOptions.map((element) => element.id),
+                ]);
+              } else {
+                setParameterArray((current) =>
+                  current.filter(
+                    (item) => !subOptions.map((opt) => opt.id).includes(item)
+                  )
+                );
+                delete filtersCopy[option.name];
+              }
+            } else {
+              if (e.target.checked) {
+                filtersCopy[option.name] = 1;
+                setParameterArray((current) => [...current, option.id]);
+              } else {
+                delete filtersCopy[option.name];
+                setParameterArray((current) =>
+                  current.filter((item) => option.id !== item)
+                );
+              }
+            }
+            setActiveFilters(filtersCopy);
+          }}
+          defaultChecked={activeFilters[option.name]}
+        />
+        {option.subOptions && (
+          <div
+            onClick={() => setShowSubOptions(!showSubOptions)}
+            className="arrow-item"
+          >
+            &#9664;
+          </div>
+        )}
+      </div>
+      {showSubOptions && (
+        <div className="sub-menu">
+          {option?.subOptions?.map((sub) => (
+            <div
+              className="sub-filter"
+              key={customSelectId + "-" + option.id + "-" + sub.id}
+            >
+              <CheckBox
+                id={"sub-item-" + sub.id}
+                label={sub.name}
+                defaultChecked={
+                  activeFilters[option.name] &&
+                  activeFilters[option.name][sub.name]
+                }
+                onChange={(e) => {
+                  if (onClickItem) {
+                    onClickItem(e.target.checked, sub.id)
+                  }
+                  if (e.target.checked) {
+                    setParameterArray((current) =>
+                      [...current, sub.id].sort((a, b) => a - b)
+                    );
+                  } else {
+                    setParameterArray((current) =>
+                      current.filter((item) => sub.id !== item)
+                    );
+                  }
+                }}
+              />
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/molecules/CustomSelect/index.js

@@ -1,194 +1,194 @@
-import { Container } from "./styles";
-import { useEffect, useState } from "react";
-import searchIcon from "../../../assets/images/customSelect/searchIcon.png";
-import { useCloseModal } from "../../../global-files/customHooks";
-import { Calendar } from "../../organisms/Calendar";
-import { CustomSelectItem } from "../../atoms/CustomSelectItem";
-
-export const CustomSelect = ({
-  options,
-  showSearchBar,
-  placeHolder = "Buscar departamento",
-  selectLabel = "",
-  customSelectId = "defaultSelectId",
-  defaultOption,
-  parameterArray,
-  setParameterArray,
-  onClickItem,
-  icon,
-  customOptions,
-  isSingleSelect = false,
-}) => {
-  const [filters, setFilters] = useState([]);
-  const [showList, setShowList] = useCloseModal(customSelectId);
-  const [text, setText] = useState("");
-  const [showDatePicker, setShowDatePicker] = useCloseModal(customSelectId);
-  const [startDate, setStartDate] = useState(new Date());
-  const [endDate, setEndDate] = useState(new Date());
-  const [activeFilters, setActiveFilters] = useState({});
-  const [filtersString, setFiltersString] = useState(selectLabel);
-  const [filtersCounter, setFiltersCounter] = useState(0);
-
-  const onChange = (evt) => {
-    setText(evt.target.value);
-  };
-
-  useEffect(() => {
-    const today = new Date();
-    const diff = today.getDate() - today.getDay();
-    const start = new Date(today.setDate(diff));
-    const end = new Date();
-    setStartDate(start);
-    setEndDate(end);
-    const obj = {};
-    options.forEach((o) => {
-      const { name, isSelected, subOptions } = o;
-      if (isSelected) obj[name] = {};
-      subOptions?.forEach((so) => {
-        const { name: nameSO, isSelected: isSelectedSO } = so;
-        if (isSelectedSO) {
-          if (!obj[name]) obj[name] = {};
-          obj[name][nameSO] = true;
-        }
-      });
-    });
-    setActiveFilters(obj);
-    setFilters(options);
-  }, [options]);
-
-  const onChangeDatePicker = (dates) => {
-    const [start, end] = dates;
-    setStartDate(start);
-    setEndDate(end);
-    if (end)
-      setParameterArray((current) => {
-        return {
-          ...current,
-          startDate: `${start.getFullYear()}-${
-            start.getMonth() + 1
-          }-${start.getDate()}`,
-          endDate: `${end.getFullYear()}-${
-            end.getMonth() + 1
-          }-${end.getDate()}`,
-        };
-      });
-  };
-
-  useEffect(() => {
-    let filteredArray = options?.slice() || [];
-    if (text.length > 0) {
-      filteredArray = filteredArray.filter((option) =>
-        option?.name.toLowerCase().includes(text.toLocaleLowerCase())
-      );
-    }
-    setFilters(filteredArray);
-  }, [text]);
-
-  useEffect(async () => {
-    let newFiltersString = selectLabel;
-    let counter = 0;
-    const filtersArray = Object.keys(activeFilters);
-    filtersArray.length &&
-      filtersArray.forEach((key, index) => {
-        if (index === 0) newFiltersString = key;
-        else {
-          counter++;
-        }
-      });
-    setFiltersCounter(counter);
-    setFiltersString(newFiltersString);
-  }, [activeFilters]);
-
-  return (
-    <Container
-      id={customSelectId}
-      selectLabel={selectLabel}
-      filterActive={
-        Object.keys(activeFilters).length > 0 ||
-        (customSelectId === "dates-select" &&
-          filtersString !== "Todo el tiempo")
-      }
-    >
-      <div className="button-list" onClick={() => setShowList(!showList)}>
-        <p>{filtersString} </p>
-        <p>{filtersCounter > 0 && `+${filtersCounter}`}</p>
-        {icon ? (
-          <img src={icon} alt="Favorite" width={"20px"} />
-        ) : (
-          <div className="arrow-item">&#9664;</div>
-        )}
-      </div>
-      {showList &&
-        (customOptions ? (
-          customOptions
-        ) : (
-          <div className="select-container">
-            {showSearchBar && (
-              <div className="search-bar-filter">
-                <img src={searchIcon} alt="search icon" />
-                <input
-                  type="text"
-                  placeholder={placeHolder}
-                  value={text}
-                  onChange={onChange}
-                />
-              </div>
-            )}
-            {defaultOption && (
-              <div
-                className="default-option"
-                onClick={() => {
-                  setParameterArray && setParameterArray([]);
-                  setActiveFilters({});
-                  setShowList(false);
-                  setFiltersString(selectLabel);
-                  setFiltersCounter(0);
-                }}
-              >
-                <p>{defaultOption}</p>
-              </div>
-            )}
-            <div className="filters-container">
-              {filters?.map((option) =>
-                isSingleSelect ? (
-                  <div
-                    className="dates-select-item"
-                    key={customSelectId + option.id}
-                    onClick={() => {
-                      option.function
-                        ? option.function(setShowDatePicker)
-                        : setShowDatePicker(true);
-                      setFiltersString(option.name);
-                    }}
-                  >
-                    <p>{option.name}</p>
-                  </div>
-                ) : (
-                  <CustomSelectItem
-                    className={"main-option"}
-                    key={customSelectId + option.id}
-                    option={option}
-                    customSelectId={customSelectId}
-                    setParameterArray={setParameterArray}
-                    activeFilters={activeFilters}
-                    globalFilters={activeFilters}
-                    parameterArray={parameterArray}
-                    setActiveFilters={setActiveFilters}
-                    onClickItem={onClickItem}
-                    route={option.name}
-                  />
-                )
-              )}
-            </div>
-          </div>
-        ))}
-      {showDatePicker && (
-        <Calendar
-          onChange={onChangeDatePicker}
-          startDate={startDate}
-          endDate={endDate}
-        />
-      )}
-    </Container>
-  );
-};
+import { Container } from "./styles";
+import { useEffect, useState } from "react";
+import searchIcon from "../../../assets/images/customSelect/searchIcon.png";
+import { useCloseModal } from "../../../global-files/customHooks";
+import { Calendar } from "../../organisms/Calendar";
+import { CustomSelectItem } from "../../atoms/CustomSelectItem";
+
+export const CustomSelect = ({
+  options,
+  showSearchBar,
+  placeHolder = "Buscar departamento",
+  selectLabel = "",
+  customSelectId = "defaultSelectId",
+  defaultOption,
+  parameterArray,
+  setParameterArray,
+  onClickItem,
+  icon,
+  customOptions,
+  isSingleSelect = false,
+}) => {
+  const [filters, setFilters] = useState([]);
+  const [showList, setShowList] = useCloseModal(customSelectId);
+  const [text, setText] = useState("");
+  const [showDatePicker, setShowDatePicker] = useCloseModal(customSelectId);
+  const [startDate, setStartDate] = useState(new Date());
+  const [endDate, setEndDate] = useState(new Date());
+  const [activeFilters, setActiveFilters] = useState({});
+  const [filtersString, setFiltersString] = useState(selectLabel);
+  const [filtersCounter, setFiltersCounter] = useState(0);
+
+  const onChange = (evt) => {
+    setText(evt.target.value);
+  };
+
+  useEffect(() => {
+    const today = new Date();
+    const diff = today.getDate() - today.getDay();
+    const start = new Date(today.setDate(diff));
+    const end = new Date();
+    setStartDate(start);
+    setEndDate(end);
+    const obj = {};
+    options.forEach((o) => {
+      const { name, isSelected, subOptions } = o;
+      if (isSelected) obj[name] = {};
+      subOptions?.forEach((so) => {
+        const { name: nameSO, isSelected: isSelectedSO } = so;
+        if (isSelectedSO) {
+          if (!obj[name]) obj[name] = {};
+          obj[name][nameSO] = true;
+        }
+      });
+    });
+    setActiveFilters(obj);
+    setFilters(options);
+  }, [options]);
+
+  const onChangeDatePicker = (dates) => {
+    const [start, end] = dates;
+    setStartDate(start);
+    setEndDate(end);
+    if (end)
+      setParameterArray((current) => {
+        return {
+          ...current,
+          startDate: `${start.getFullYear()}-${
+            start.getMonth() + 1
+          }-${start.getDate()}`,
+          endDate: `${end.getFullYear()}-${
+            end.getMonth() + 1
+          }-${end.getDate()}`,
+        };
+      });
+  };
+
+  useEffect(() => {
+    let filteredArray = options?.slice() || [];
+    if (text.length > 0) {
+      filteredArray = filteredArray.filter((option) =>
+        option?.name.toLowerCase().includes(text.toLocaleLowerCase())
+      );
+    }
+    setFilters(filteredArray);
+  }, [text]);
+
+  useEffect(async () => {
+    let newFiltersString = selectLabel;
+    let counter = 0;
+    const filtersArray = Object.keys(activeFilters);
+    filtersArray.length &&
+      filtersArray.forEach((key, index) => {
+        if (index === 0) newFiltersString = key;
+        else {
+          counter++;
+        }
+      });
+    setFiltersCounter(counter);
+    setFiltersString(newFiltersString);
+  }, [activeFilters]);
+
+  return (
+    <Container
+      id={customSelectId}
+      selectLabel={selectLabel}
+      filterActive={
+        Object.keys(activeFilters).length > 0 ||
+        (customSelectId === "dates-select" &&
+          filtersString !== "Todo el tiempo")
+      }
+    >
+      <div className="button-list" onClick={() => setShowList(!showList)}>
+        <p>{filtersString} </p>
+        <p>{filtersCounter > 0 && `+${filtersCounter}`}</p>
+        {icon ? (
+          <img src={icon} alt="Favorite" width={"20px"} />
+        ) : (
+          <div className="arrow-item">&#9664;</div>
+        )}
+      </div>
+      {showList &&
+        (customOptions ? (
+          customOptions
+        ) : (
+          <div className="select-container">
+            {showSearchBar && (
+              <div className="search-bar-filter">
+                <img src={searchIcon} alt="search icon" />
+                <input
+                  type="text"
+                  placeholder={placeHolder}
+                  value={text}
+                  onChange={onChange}
+                />
+              </div>
+            )}
+            {defaultOption && (
+              <div
+                className="default-option"
+                onClick={() => {
+                  setParameterArray && setParameterArray([]);
+                  setActiveFilters({});
+                  setShowList(false);
+                  setFiltersString(selectLabel);
+                  setFiltersCounter(0);
+                }}
+              >
+                <p>{defaultOption}</p>
+              </div>
+            )}
+            <div className="filters-container">
+              {filters?.map((option) =>
+                isSingleSelect ? (
+                  <div
+                    className="dates-select-item"
+                    key={customSelectId + option.id}
+                    onClick={() => {
+                      option.function
+                        ? option.function(setShowDatePicker)
+                        : setShowDatePicker(true);
+                      setFiltersString(option.name);
+                    }}
+                  >
+                    <p>{option.name}</p>
+                  </div>
+                ) : (
+                  <CustomSelectItem
+                    className={"main-option"}
+                    key={customSelectId + option.id}
+                    option={option}
+                    customSelectId={customSelectId}
+                    setParameterArray={setParameterArray}
+                    activeFilters={activeFilters}
+                    globalFilters={activeFilters}
+                    parameterArray={parameterArray}
+                    setActiveFilters={setActiveFilters}
+                    onClickItem={onClickItem}
+                    route={option.name}
+                  />
+                )
+              )}
+            </div>
+          </div>
+        ))}
+      {showDatePicker && (
+        <Calendar
+          onChange={onChangeDatePicker}
+          startDate={startDate}
+          endDate={endDate}
+        />
+      )}
+    </Container>
+  );
+};