contentoh-components-library 21.2.93 → 21.2.95

package/src/components/atoms/Image/index.js

@@ -13,6 +13,7 @@ export const Image = (props) => {
     src, // imagen a cargar (string)
     componentDefault, // componente a mostrar en caso de que no cargue src (JSX)
     classNameImg, // string
+    borderType, // "rectangle" | "circle" -> por default none
   } = props;
   const [imgLoad, setImgLoad] = useState();
   const [loading, setLoading] = useState(false);
@@ -25,7 +26,7 @@ export const Image = (props) => {
   }, []); */
 
   return (
-    <Container className={className} width={width}>
+    <Container className={className} width={width} borderType={borderType}>
       {src && (imgLoad === undefined || loading) && (
         <ContainerLoading
           className={classNameLoading}

package/src/components/atoms/Image/styles.js

@@ -6,6 +6,14 @@ export const Container = styled.div`
   place-items: center;
   width: ${({ width }) => (width ? width : "min-content")};
   min-width: min-content;
+  overflow: hidden;
+  border-radius: ${({ borderType }) => {
+    return borderType?.toLowerCase() === "rectangle"
+      ? "6px"
+      : borderType?.toLowerCase() === "circle"
+      ? "50%"
+      : "0px"; // default none
+  }};
 `;
 
 export const ContainerLoading = styled.div`
@@ -22,4 +30,5 @@ export const Img = styled.img`
   display: ${({ show }) => (show ? "grid" : "none")};
   width: 100%;
   object-fit: contain;
+  border-radius: inherit;
 `;

package/src/components/atoms/SelectItemV2/SelectItemV2.stories.js

@@ -0,0 +1,26 @@
+import { SelectItemV2 } from "./index";
+
+export default {
+  title: "Components/atoms/SelectItemV2",
+  component: SelectItemV2,
+  argTypes: {
+    checkbox: {
+      options: [undefined, true, false],
+      control: { type: "select" },
+    },
+  },
+};
+
+const Template = (args) => <SelectItemV2 {...args} />;
+
+export const SelectItemV2Test = Template.bind({});
+SelectItemV2Test.args = {
+  label: "Label del item",
+  value: 1,
+  checkbox: true,
+  selected: false,
+  onClick: (isSelected, value) => {
+    console.log("isSelected:", isSelected);
+    console.log("value:", value);
+  },
+};

package/src/components/atoms/SelectItemV2/index.js

@@ -0,0 +1,45 @@
+import { useEffect, useRef, useState } from "react";
+import { Checkbox } from "@mui/material";
+import { Container } from "./styles";
+import React from "react";
+import { isStringEmpty } from "../../../global-files/utils";
+
+export const SelectItemV2 = (props) => {
+  const {
+    id,
+    keyId,
+    className, // (string) clase del container
+    label, // (string) texto visible del item
+    value, // valor del item
+    checkbox /* (boolean)
+			true -> item con checkbox 
+			false -> item sin checkbox pero respeta el espacio del checkbox
+			undefined -> item sin checkbox
+		*/,
+    selected, // (boolean) item seleccionado??
+    onClick, // (isSelected , value) => {}
+  } = props;
+
+  return (
+    <Container
+      className={
+        "selectItemV2" +
+        (isStringEmpty(className) ? "" : " " + className) +
+        (!checkbox && selected ? " selectedItem" : "")
+      }
+      id={id}
+      key={keyId}
+      checkbox={checkbox}
+      onClick={(event) => onClick && onClick(!selected, value)}
+    >
+      {checkbox !== undefined && (
+        <Checkbox
+          className={"checkbox" + (checkbox ? "" : " hidden")}
+          checked={selected}
+        />
+      )}
+
+      <label className="label">{label}</label>
+    </Container>
+  );
+};

package/src/components/atoms/SelectItemV2/styles.js

@@ -0,0 +1,55 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  width: fit-content;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: 11px;
+  justify-content: flex-start;
+  align-items: center;
+  cursor: pointer;
+  padding: 8px;
+  transition: background 0.25s;
+  //border: 1px solid lightgray;
+
+  &:hover {
+    background-color: #f0f0f0;
+  }
+
+  .checkbox {
+    padding: 3px;
+
+    &.hidden {
+      visibility: hidden;
+    }
+
+    &.Mui-checked {
+      color: #808080;
+    }
+
+    .MuiSvgIcon-root {
+      font-size: 16px;
+    }
+  }
+
+  .label {
+    cursor: inherit;
+    font-family: ${FontFamily.RobotoRegular}, sans-serif;
+    font-size: 12px;
+    text-align: left;
+    color: #262626;
+    line-height: 1.25;
+    padding: ${({ checkbox }) => (checkbox === undefined ? "3" : "0")}px;
+  }
+
+  // para item sin checkbox seleccionado
+  &.selectedItem {
+    background-color: #8e8e8e;
+    .label {
+      font-family: ${FontFamily.RobotoMedium}, sans-serif;
+      color: white;
+    }
+  }
+`;

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

@@ -0,0 +1,114 @@
+import { SelectV2 } from "./index";
+
+export default {
+  title: "Components/molecules/SelectV2",
+  component: SelectV2,
+  argTypes: {
+    positionDropdown: {
+      options: [
+        undefined,
+        "topStart",
+        "topEnd",
+        "topCenter",
+        "rightStart",
+        "rightEnd",
+        "rightCenter",
+        "bottomStart",
+        "bottomEnd",
+        "bottomCenter",
+        "leftStart",
+        "leftEnd",
+        "leftCenter",
+      ],
+      control: { type: "select" },
+    },
+    triggerType: {
+      options: [undefined, "hover", "click"],
+      control: { type: "select" },
+    },
+    typeSelectItems: {
+      options: [undefined, "checkbox", "marginCheckbox", "labelOnly"],
+      control: { type: "select" },
+    },
+    borderType: {
+      options: [undefined, "rectangle", "oval"],
+      control: { type: "select" },
+    },
+    alignmentItemsOverflow: {
+      options: [undefined, "columns", "rows"],
+      control: { type: "select" },
+    },
+  },
+};
+
+const Template = (args) => <SelectV2 {...args} />;
+
+export const SelectV2Test = Template.bind({});
+SelectV2Test.args = {
+  items: [
+    {
+      label: "Palomitas de maiz",
+      value: 1,
+      selected: false,
+    },
+    {
+      label: "Sabritas",
+      value: 2,
+      selected: true,
+    },
+    {
+      label: "sabritas Doritos",
+      value: 3,
+      selected: false,
+    },
+    {
+      label:
+        "Este es un texto muy largo que deberia llegar al limite establecido para el width",
+      value: 4,
+      selected: true,
+    },
+    {
+      label: "galletas",
+      value: 5,
+      selected: false,
+    },
+    {
+      label: "jugo de uva",
+      value: 6,
+      selected: false,
+    },
+  ],
+  triggerType: "hover",
+  selectButton: {
+    className: "btnSelectPrueba",
+    type: "whiteS3",
+    transparent: undefined,
+    disabled: false,
+    label: "select de prueba",
+    size: 12,
+    borderType: "oval",
+  },
+  defaultItem: {
+    label: "Ningun filtro",
+    itemType: undefined,
+    showLabelInSelect: true,
+  },
+  inputSearch: {
+    className: "inputBusqueda",
+    defaultText: "hola",
+  },
+  typeSelectItems: undefined,
+  borderType: undefined,
+  maxWidthSelect: "150px",
+  maxWidthDropdown: "300px",
+  maxHeightDropdown: "300px",
+  maxWidthItems: "100px",
+  alignmentItemsOverflow: undefined,
+  multiple: true,
+  classNameSelect: "selectPrueba",
+  classNameDropdown: "dropdownSelectPrueba",
+  positionDropdown: undefined,
+  onChange: (selectedItems) => {
+    console.log("selectedItems:", selectedItems);
+  },
+};

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

@@ -0,0 +1,332 @@
+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, 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,
+				selected: (boolean) true -> item seleccionado al inicio
+			} , 
+			...
+		] */,
+    triggerType, // (string) "hover" | "click"
+    selectButton /* {
+			className: string,
+			type:	(string) tipos validos de ButtonV2,
+			transparent: boolean,
+			disabled: boolean,
+			label: string ,
+			size: number ,
+		} */,
+    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: []) = {}  array 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)) {
+      setSelectedItems({});
+      return;
+    }
+    // items iniciales seleccionados
+    let initialSelectedItems = {};
+    items.forEach((item) => {
+      if (item.selected) {
+        if (multiple) initialSelectedItems[item.value] = item.value;
+        else initialSelectedItems = { [item.value]: item.value };
+      }
+    });
+    setSelectedItems(initialSelectedItems);
+  }, [items]);
+
+  // cada que cambien los items seleccionados
+  useEffect(() => {
+    if (!selectedItems) return;
+    renderItems();
+    renderLabelSelect();
+    onChange && onChange(Object.values(selectedItems));
+  }, [selectedItems]);
+
+  // evento click de cada item de la lista
+  const onClickItem = (isSelected, value) => {
+    let selectedItemsCopy = { ...selectedItems };
+    if (isSelected) {
+      multiple
+        ? (selectedItemsCopy[value] = value)
+        : (selectedItemsCopy = { [value]: value });
+    } else delete selectedItemsCopy[value];
+    setSelectedItems(selectedItemsCopy);
+  };
+
+  const onClickSearch = () => {
+    setTextInputSearch(textInputSearch.trim());
+    refInputTextSearch?.current && refInputTextSearch.current.blur();
+    renderItems(textInputSearch.trim());
+  };
+
+  const renderLabelSelect = () => {
+    if (!selectedItems) return;
+    const selectedItemsCopy = Object.values(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={selectedItems && selectedItems[item.value] ? true : false}
+            onClick={onClickItem}
+          />
+        );
+      })
+    );
+  };
+
+  return (
+    <ClickAwayListener
+      onClickAway={(event) => {
+        if (triggerType !== "hover") setShowDropdown(false);
+      }}
+    >
+      <Container
+        className={!isStringEmpty(classNameSelect) ? classNameSelect : ""}
+        borderType={borderType}
+        maxWidthSelect={maxWidthSelect}
+        maxWidthDropdown={maxWidthDropdown}
+        maxHeightDropdown={maxHeightDropdown}
+        alignmentItemsOverflow={alignmentItemsOverflow}
+        maxWidthItems={maxWidthItems}
+      >
+        <TooltipMUI
+          {...props}
+          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"}
+          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={
+                    selectedItems && Object.keys(selectedItems).length
+                      ? false
+                      : true
+                  }
+                  onClick={(isSelected, value) => {
+                    selectedItems &&
+                      Object.keys(selectedItems).length &&
+                      setSelectedItems({});
+                  }}
+                />
+              )}
+
+              {/* lista de items */}
+              <div className="container-items">{customItems}</div>
+            </>
+          }
+        >
+          <ContainerSelect className={"container-buttonSelect"}>
+            <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="end"
+              onClick={(event) => {
+                if (triggerType !== "hover") setShowDropdown((prev) => !prev);
+              }}
+            />
+          </ContainerSelect>
+        </TooltipMUI>
+      </Container>
+    </ClickAwayListener>
+  );
+};