contentoh-components-library 21.5.35 → 21.5.37

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

@@ -1,357 +1,357 @@
-import { useEffect, useRef, useState } from "react";
-import {
-  ClickAwayListener,
-  Fade,
-  Grow,
-  Popper,
-  Tooltip as TooltipMUI,
-  Zoom,
-} from "@mui/material";
-import { Container, ContainerSelect } from "./styles";
-import React from "react";
-import { ButtonV2 } from "../../atoms/ButtonV2";
-import {
-  faCaretDown as IconDownArrow,
-  faSearch as IconSearch,
-} from "@fortawesome/free-solid-svg-icons";
-import {
-  isArrayEmpty,
-  isObject,
-  isStringEmpty,
-} from "../../../global-files/utils";
-import { SelectItemV2 } from "../../atoms/SelectItemV2";
-import { InputText } from "../../atoms/InputText";
-
-export const SelectV2 = (props) => {
-  const {
-    items /* [
-			{
-				label: string,
-				value: string | number,
-			} , 
-			...
-		] */,
-    initialSelectedItems, // { value: null , ... }  -> value = string | number
-    triggerType, // (string) "hover" | "click"
-    selectButton /* {
-			className: string,
-			type:	(string) tipos validos de ButtonV2,
-			transparent: boolean,
-			disabled: boolean,
-			label: string ,
-			size: number ,
-      iconPosition: string (por default "right")
-		} */,
-    defaultItem /* {
-      label: string,
-      itemType: (string) "checkbox" | "marginCheckbox" | "labelOnly"
-      showLabelInSelect: boolean, cuando esta seleccionado ver label en el btnSelect??
-    } */,
-    inputSearch /* {
-      className: string,
-      defaultText: string ,
-    } */,
-    maxWidthSelect, // string
-    maxWidthDropdown, // string
-    maxHeightDropdown, // string
-    maxWidthItems, // string
-    alignmentItemsOverflow, // (string) "columns" | "rows" -> por default "rows"
-    typeSelectItems, // (string) "checkbox" | "marginCheckbox" | "labelOnly"
-    multiple, // (boolean) se permite multiple seleccion??
-    borderType, // (string) "rectangle" | "oval" -> por default oval
-    classNameSelect, // (string) clase del container select
-    classNameDropdown, // (string) clase del contenedor tooltip
-    positionDropdown, // (string) posicion del contenedor tooltip (values en object positions)
-    onChange, // (selectedItems: {}) = {}  obj con los values de los items seleccionados
-  } = props;
-  const positions = {
-    topStart: "top-start",
-    topEnd: "top-end",
-    topCenter: "top",
-
-    rightStart: "right-start",
-    rightEnd: "right-end",
-    rightCenter: "right",
-
-    bottomStart: "bottom-start",
-    bottomEnd: "bottom-end",
-    bottomCenter: "bottom",
-
-    leftStart: "left-start",
-    leftEnd: "left-end",
-    leftCenter: "left",
-  };
-  const [selectedItems, setSelectedItems] = useState(); // { .. }
-  const [customItems, setCustomItems] = useState([]);
-  const [showDropdown, setShowDropdown] = useState(false);
-  const [labelSelect, setLabelSelect] = useState("Sin titulo");
-  const [textInputSearch, setTextInputSearch] = useState("");
-
-  const refInputTextSearch = useRef();
-
-  // cada que cambie la lista de items
-  useEffect(() => {
-    if (isArrayEmpty(items) || !isObject(initialSelectedItems)) {
-      setSelectedItems({});
-      renderItems();
-      renderLabelSelect();
-      return;
-    }
-    // items iniciales seleccionados
-    if (!multiple) {
-      const values = Object.keys(initialSelectedItems);
-      if (values.length) setSelectedItems({ [values[0]]: null });
-      else setSelectedItems({});
-    } else {
-      setSelectedItems(initialSelectedItems);
-    }
-    renderItems();
-    renderLabelSelect();
-  }, [items]);
-
-  // cada que cambien los items seleccionados
-  useEffect(() => {
-    if (!isObject(selectedItems)) return;
-    renderItems();
-    renderLabelSelect();
-  }, [selectedItems]);
-
-  // evento click de cada item de la lista
-  const onClickItem = (isSelected, value) => {
-    let selectedItemsCopy = { ...selectedItems };
-    if (isSelected) {
-      multiple
-        ? (selectedItemsCopy[value] = null)
-        : (selectedItemsCopy = { [value]: null });
-    } else delete selectedItemsCopy[value];
-    setSelectedItems(selectedItemsCopy);
-    onChange && onChange(selectedItemsCopy);
-  };
-
-  const onClickSearch = () => {
-    setTextInputSearch(textInputSearch.trim());
-    refInputTextSearch?.current && refInputTextSearch.current.blur();
-    renderItems(textInputSearch.trim());
-  };
-
-  const renderLabelSelect = () => {
-    if (!isObject(selectedItems)) return;
-    const selectedItemsCopy = Object.keys(selectedItems);
-    if (selectedItemsCopy.length > 1) {
-      setLabelSelect("Personalizado");
-    } else if (selectedItemsCopy.length === 1) {
-      let labelItem = undefined;
-      for (const item of items) {
-        if (item.value === selectedItemsCopy[0]) {
-          labelItem = item.label;
-          break;
-        }
-      }
-      !isStringEmpty(labelItem)
-        ? setLabelSelect(labelItem)
-        : setLabelSelect("Sin titulo");
-    } else {
-      if (
-        !isStringEmpty(defaultItem?.label) &&
-        defaultItem?.showLabelInSelect
-      ) {
-        setLabelSelect(defaultItem.label);
-      } else if (!isStringEmpty(selectButton?.label)) {
-        setLabelSelect(selectButton.label);
-      } else {
-        setLabelSelect("Sin titulo");
-      }
-    }
-  };
-
-  const renderItems = (textSearch = "") => {
-    if (isArrayEmpty(items)) setCustomItems([]);
-    setCustomItems(
-      items.map((item, index) => {
-        if (
-          !isStringEmpty(textSearch) &&
-          !item.label
-            .trim()
-            .toLowerCase()
-            .includes(textSearch.trim().toLowerCase())
-        ) {
-          return null;
-        }
-        return (
-          <SelectItemV2
-            key={classNameSelect + "_item" + index}
-            label={item.label}
-            value={item.value}
-            checkbox={
-              typeSelectItems === "checkbox"
-                ? true
-                : typeSelectItems === "marginCheckbox"
-                ? false
-                : undefined
-            }
-            selected={
-              isObject(selectedItems) && selectedItems[item.value] !== undefined
-                ? true
-                : false
-            }
-            onClick={onClickItem}
-          />
-        );
-      })
-    );
-  };
-
-  return (
-    <ClickAwayListener
-      onClickAway={(event) => {
-        if (triggerType !== "hover") setShowDropdown(false);
-      }}
-    >
-      <Container
-        className={!isStringEmpty(classNameSelect) ? classNameSelect : ""}
-        borderType={borderType}
-        maxWidthSelect={maxWidthSelect}
-      >
-        <TooltipMUI
-          placement={positions[positionDropdown] ?? positions.bottomCenter}
-          open={triggerType !== "hover" ? showDropdown : undefined}
-          arrow={false}
-          componentsProps={{
-            tooltip: {
-              className:
-                "dropdownSelect" +
-                (isStringEmpty(classNameDropdown)
-                  ? ""
-                  : " " + classNameDropdown),
-            },
-            popper: { disablePortal: true },
-            transition: { timeout: 300 },
-          }}
-          TransitionComponent={Fade}
-          enterDelay={100}
-          followCursor={false}
-          disableFocusListener
-          disableTouchListener
-          disableHoverListener={
-            triggerType !== "hover" || selectButton?.disabled
-          }
-          title={
-            <>
-              {/* input search */}
-              {inputSearch && (
-                <div
-                  className={
-                    "container-inputSearch" +
-                    (!isStringEmpty(inputSearch?.className)
-                      ? " " + inputSearch.className
-                      : "")
-                  }
-                >
-                  <ButtonV2
-                    className="buttonSearch"
-                    type={"gray"}
-                    transparent
-                    size={14}
-                    icon={IconSearch}
-                    onClick={(event) => {
-                      if (
-                        isStringEmpty(textInputSearch) &&
-                        refInputTextSearch?.current
-                      ) {
-                        setTextInputSearch("");
-                        refInputTextSearch.current.focus();
-                      } else {
-                        onClickSearch();
-                      }
-                    }}
-                  />
-
-                  <InputText
-                    className="inputSearch"
-                    type="black"
-                    transparent
-                    size={12}
-                    placeHolder={
-                      isStringEmpty(inputSearch?.defaultText)
-                        ? "Texto a buscar"
-                        : inputSearch.defaultText
-                    }
-                    text={textInputSearch}
-                    onChangeText={(newValue) => setTextInputSearch(newValue)}
-                    onEnter={(event) => onClickSearch()}
-                    refInputText={refInputTextSearch}
-                  />
-                </div>
-              )}
-
-              {/* item por default */}
-              {defaultItem && (
-                <SelectItemV2
-                  label={defaultItem.label}
-                  value={null}
-                  checkbox={
-                    defaultItem.itemType === "checkbox"
-                      ? true
-                      : defaultItem.itemType === "marginCheckbox"
-                      ? false
-                      : undefined
-                  }
-                  selected={
-                    isObject(selectedItems) && Object.keys(selectedItems).length
-                      ? false
-                      : true
-                  }
-                  onClick={(isSelected, value) => {
-                    if (
-                      isObject(selectedItems) &&
-                      Object.keys(selectedItems).length
-                    ) {
-                      setSelectedItems({});
-                      onChange && onChange({});
-                    }
-                  }}
-                />
-              )}
-
-              {/* lista de items */}
-              <div className="container-items">{customItems}</div>
-            </>
-          }
-        >
-          <ContainerSelect
-            className={"container-buttonSelect"}
-            maxWidthDropdown={maxWidthDropdown}
-            maxHeightDropdown={maxHeightDropdown}
-            alignmentItemsOverflow={alignmentItemsOverflow}
-            maxWidthItems={maxWidthItems}
-          >
-            <ButtonV2
-              className={
-                "buttonSelect" +
-                (!isStringEmpty(selectButton?.className)
-                  ? " " + selectButton.className
-                  : "")
-              }
-              disabled={selectButton?.disabled}
-              type={selectButton?.type}
-              transparent={selectButton?.transparent}
-              label={labelSelect}
-              size={selectButton?.size}
-              icon={IconDownArrow}
-              iconPosition={
-                ["left", "right", "top", "bottom"].includes(
-                  selectButton?.iconPosition
-                )
-                  ? selectButton.iconPosition
-                  : "right"
-              }
-              onClick={(event) => {
-                if (triggerType !== "hover") setShowDropdown((prev) => !prev);
-              }}
-            />
-          </ContainerSelect>
-        </TooltipMUI>
-      </Container>
-    </ClickAwayListener>
-  );
-};
+import { useEffect, useRef, useState } from "react";
+import {
+  ClickAwayListener,
+  Fade,
+  Grow,
+  Popper,
+  Tooltip as TooltipMUI,
+  Zoom,
+} from "@mui/material";
+import { Container, ContainerSelect } from "./styles";
+import React from "react";
+import { ButtonV2 } from "../../atoms/ButtonV2";
+import {
+  faCaretDown as IconDownArrow,
+  faSearch as IconSearch,
+} from "@fortawesome/free-solid-svg-icons";
+import {
+  isArrayEmpty,
+  isObject,
+  isStringEmpty,
+} from "../../../global-files/utils";
+import { SelectItemV2 } from "../../atoms/SelectItemV2";
+import { InputText } from "../../atoms/InputText";
+
+export const SelectV2 = (props) => {
+  const {
+    items /* [
+			{
+				label: string,
+				value: string | number,
+			} , 
+			...
+		] */,
+    initialSelectedItems, // { value: null , ... }  -> value = string | number
+    triggerType, // (string) "hover" | "click"
+    selectButton /* {
+			className: string,
+			type:	(string) tipos validos de ButtonV2,
+			transparent: boolean,
+			disabled: boolean,
+			label: string ,
+			size: number ,
+      iconPosition: string (por default "right")
+		} */,
+    defaultItem /* {
+      label: string,
+      itemType: (string) "checkbox" | "marginCheckbox" | "labelOnly"
+      showLabelInSelect: boolean, cuando esta seleccionado ver label en el btnSelect??
+    } */,
+    inputSearch /* {
+      className: string,
+      defaultText: string ,
+    } */,
+    maxWidthSelect, // string
+    maxWidthDropdown, // string
+    maxHeightDropdown, // string
+    maxWidthItems, // string
+    alignmentItemsOverflow, // (string) "columns" | "rows" -> por default "rows"
+    typeSelectItems, // (string) "checkbox" | "marginCheckbox" | "labelOnly"
+    multiple, // (boolean) se permite multiple seleccion??
+    borderType, // (string) "rectangle" | "oval" -> por default oval
+    classNameSelect, // (string) clase del container select
+    classNameDropdown, // (string) clase del contenedor tooltip
+    positionDropdown, // (string) posicion del contenedor tooltip (values en object positions)
+    onChange, // (selectedItems: {}) = {}  obj con los values de los items seleccionados
+  } = props;
+  const positions = {
+    topStart: "top-start",
+    topEnd: "top-end",
+    topCenter: "top",
+
+    rightStart: "right-start",
+    rightEnd: "right-end",
+    rightCenter: "right",
+
+    bottomStart: "bottom-start",
+    bottomEnd: "bottom-end",
+    bottomCenter: "bottom",
+
+    leftStart: "left-start",
+    leftEnd: "left-end",
+    leftCenter: "left",
+  };
+  const [selectedItems, setSelectedItems] = useState(); // { .. }
+  const [customItems, setCustomItems] = useState([]);
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [labelSelect, setLabelSelect] = useState("Sin titulo");
+  const [textInputSearch, setTextInputSearch] = useState("");
+
+  const refInputTextSearch = useRef();
+
+  // cada que cambie la lista de items
+  useEffect(() => {
+    if (isArrayEmpty(items) || !isObject(initialSelectedItems)) {
+      setSelectedItems({});
+      renderItems();
+      renderLabelSelect();
+      return;
+    }
+    // items iniciales seleccionados
+    if (!multiple) {
+      const values = Object.keys(initialSelectedItems);
+      if (values.length) setSelectedItems({ [values[0]]: null });
+      else setSelectedItems({});
+    } else {
+      setSelectedItems(initialSelectedItems);
+    }
+    renderItems();
+    renderLabelSelect();
+  }, [items]);
+
+  // cada que cambien los items seleccionados
+  useEffect(() => {
+    if (!isObject(selectedItems)) return;
+    renderItems();
+    renderLabelSelect();
+  }, [selectedItems]);
+
+  // evento click de cada item de la lista
+  const onClickItem = (isSelected, value) => {
+    let selectedItemsCopy = { ...selectedItems };
+    if (isSelected) {
+      multiple
+        ? (selectedItemsCopy[value] = null)
+        : (selectedItemsCopy = { [value]: null });
+    } else delete selectedItemsCopy[value];
+    setSelectedItems(selectedItemsCopy);
+    onChange && onChange(selectedItemsCopy);
+  };
+
+  const onClickSearch = () => {
+    setTextInputSearch(textInputSearch.trim());
+    refInputTextSearch?.current && refInputTextSearch.current.blur();
+    renderItems(textInputSearch.trim());
+  };
+
+  const renderLabelSelect = () => {
+    if (!isObject(selectedItems)) return;
+    const selectedItemsCopy = Object.keys(selectedItems);
+    if (selectedItemsCopy.length > 1) {
+      setLabelSelect("Personalizado");
+    } else if (selectedItemsCopy.length === 1) {
+      let labelItem = undefined;
+      for (const item of items) {
+        if (item.value === selectedItemsCopy[0]) {
+          labelItem = item.label;
+          break;
+        }
+      }
+      !isStringEmpty(labelItem)
+        ? setLabelSelect(labelItem)
+        : setLabelSelect("Sin titulo");
+    } else {
+      if (
+        !isStringEmpty(defaultItem?.label) &&
+        defaultItem?.showLabelInSelect
+      ) {
+        setLabelSelect(defaultItem.label);
+      } else if (!isStringEmpty(selectButton?.label)) {
+        setLabelSelect(selectButton.label);
+      } else {
+        setLabelSelect("Sin titulo");
+      }
+    }
+  };
+
+  const renderItems = (textSearch = "") => {
+    if (isArrayEmpty(items)) setCustomItems([]);
+    setCustomItems(
+      items.map((item, index) => {
+        if (
+          !isStringEmpty(textSearch) &&
+          !item.label
+            .trim()
+            .toLowerCase()
+            .includes(textSearch.trim().toLowerCase())
+        ) {
+          return null;
+        }
+        return (
+          <SelectItemV2
+            key={classNameSelect + "_item" + index}
+            label={item.label}
+            value={item.value}
+            checkbox={
+              typeSelectItems === "checkbox"
+                ? true
+                : typeSelectItems === "marginCheckbox"
+                ? false
+                : undefined
+            }
+            selected={
+              isObject(selectedItems) && selectedItems[item.value] !== undefined
+                ? true
+                : false
+            }
+            onClick={onClickItem}
+          />
+        );
+      })
+    );
+  };
+
+  return (
+    <ClickAwayListener
+      onClickAway={(event) => {
+        if (triggerType !== "hover") setShowDropdown(false);
+      }}
+    >
+      <Container
+        className={!isStringEmpty(classNameSelect) ? classNameSelect : ""}
+        borderType={borderType}
+        maxWidthSelect={maxWidthSelect}
+      >
+        <TooltipMUI
+          placement={positions[positionDropdown] ?? positions.bottomCenter}
+          open={triggerType !== "hover" ? showDropdown : undefined}
+          arrow={false}
+          componentsProps={{
+            tooltip: {
+              className:
+                "dropdownSelect" +
+                (isStringEmpty(classNameDropdown)
+                  ? ""
+                  : " " + classNameDropdown),
+            },
+            popper: { disablePortal: true },
+            transition: { timeout: 300 },
+          }}
+          TransitionComponent={Fade}
+          enterDelay={100}
+          followCursor={false}
+          disableFocusListener
+          disableTouchListener
+          disableHoverListener={
+            triggerType !== "hover" || selectButton?.disabled
+          }
+          title={
+            <>
+              {/* input search */}
+              {inputSearch && (
+                <div
+                  className={
+                    "container-inputSearch" +
+                    (!isStringEmpty(inputSearch?.className)
+                      ? " " + inputSearch.className
+                      : "")
+                  }
+                >
+                  <ButtonV2
+                    className="buttonSearch"
+                    type={"gray"}
+                    transparent
+                    size={14}
+                    icon={IconSearch}
+                    onClick={(event) => {
+                      if (
+                        isStringEmpty(textInputSearch) &&
+                        refInputTextSearch?.current
+                      ) {
+                        setTextInputSearch("");
+                        refInputTextSearch.current.focus();
+                      } else {
+                        onClickSearch();
+                      }
+                    }}
+                  />
+
+                  <InputText
+                    className="inputSearch"
+                    type="black"
+                    transparent
+                    size={12}
+                    placeHolder={
+                      isStringEmpty(inputSearch?.defaultText)
+                        ? "Texto a buscar"
+                        : inputSearch.defaultText
+                    }
+                    text={textInputSearch}
+                    onChangeText={(newValue) => setTextInputSearch(newValue)}
+                    onEnter={(event) => onClickSearch()}
+                    refInputText={refInputTextSearch}
+                  />
+                </div>
+              )}
+
+              {/* item por default */}
+              {defaultItem && (
+                <SelectItemV2
+                  label={defaultItem.label}
+                  value={null}
+                  checkbox={
+                    defaultItem.itemType === "checkbox"
+                      ? true
+                      : defaultItem.itemType === "marginCheckbox"
+                      ? false
+                      : undefined
+                  }
+                  selected={
+                    isObject(selectedItems) && Object.keys(selectedItems).length
+                      ? false
+                      : true
+                  }
+                  onClick={(isSelected, value) => {
+                    if (
+                      isObject(selectedItems) &&
+                      Object.keys(selectedItems).length
+                    ) {
+                      setSelectedItems({});
+                      onChange && onChange({});
+                    }
+                  }}
+                />
+              )}
+
+              {/* lista de items */}
+              <div className="container-items">{customItems}</div>
+            </>
+          }
+        >
+          <ContainerSelect
+            className={"container-buttonSelect"}
+            maxWidthDropdown={maxWidthDropdown}
+            maxHeightDropdown={maxHeightDropdown}
+            alignmentItemsOverflow={alignmentItemsOverflow}
+            maxWidthItems={maxWidthItems}
+          >
+            <ButtonV2
+              className={
+                "buttonSelect" +
+                (!isStringEmpty(selectButton?.className)
+                  ? " " + selectButton.className
+                  : "")
+              }
+              disabled={selectButton?.disabled}
+              type={selectButton?.type}
+              transparent={selectButton?.transparent}
+              label={labelSelect}
+              size={selectButton?.size}
+              icon={IconDownArrow}
+              iconPosition={
+                ["left", "right", "top", "bottom"].includes(
+                  selectButton?.iconPosition
+                )
+                  ? selectButton.iconPosition
+                  : "right"
+              }
+              onClick={(event) => {
+                if (triggerType !== "hover") setShowDropdown((prev) => !prev);
+              }}
+            />
+          </ContainerSelect>
+        </TooltipMUI>
+      </Container>
+    </ClickAwayListener>
+  );
+};