contentoh-components-library 21.2.65 → 21.2.66

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

@@ -0,0 +1,410 @@
+import { CustomSelectItem } from ".";
+
+export default {
+  title: "Components/atoms/CustomSelectItem",
+  component: CustomSelectItem,
+};
+
+const Template = (args) => <CustomSelectItem {...args} />;
+export const CustomSelectItemDefault = Template.bind({});
+CustomSelectItemDefault.args = {
+  option: {
+    id: 0,
+    name: "Abarrotes",
+    subOptions: [
+      {
+        id: 0,
+        name: "Abarrotes Secos",
+        subOptions: [
+          {
+            id: 4,
+            name: "Alimentos Deshidratados",
+          },
+          {
+            id: 5,
+            name: "Avenas y Granolas",
+          },
+          {
+            id: 6,
+            name: "Azúcar, Endulzantes y Sustitutos",
+          },
+          {
+            id: 7,
+            name: "Café Grano",
+          },
+          {
+            id: 8,
+            name: "Café Soluble",
+          },
+          {
+            id: 9,
+            name: "Cereales y Barras",
+          },
+          {
+            id: 10,
+            name: "Despensas y Canastas",
+          },
+          {
+            id: 11,
+            name: "Frutos Secos",
+          },
+          {
+            id: 12,
+            name: "Galletas",
+          },
+          {
+            id: 13,
+            name: "Harinas y Repostería",
+          },
+          {
+            id: 14,
+            name: "Pan de Caja",
+          },
+          {
+            id: 15,
+            name: "Postres en Polvo",
+          },
+          {
+            id: 16,
+            name: "Saborizantes de Leche",
+          },
+          {
+            id: 17,
+            name: "Sopas y Pastas",
+          },
+          {
+            id: 18,
+            name: "Tortillas Empacadas",
+          },
+        ],
+      },
+      {
+        id: 1,
+        name: "Aceites y Vinagres",
+        subOptions: [
+          {
+            id: 20,
+            name: "Aceite de Oliva",
+          },
+          {
+            id: 21,
+            name: "Aceite en Aerosol",
+          },
+          {
+            id: 22,
+            name: "Aceites y Manteca",
+          },
+        ],
+      },
+      {
+        id: 2,
+        name: "Aderezos, Especias y Sazonadores",
+        subOptions: [
+          {
+            id: 24,
+            name: "Aderezos",
+          },
+          {
+            id: 25,
+            name: "Condimentos y Especias",
+          },
+          {
+            id: 26,
+            name: "Consomés",
+          },
+          {
+            id: 27,
+            name: "Mayonesas",
+          },
+          {
+            id: 28,
+            name: "Purés",
+          },
+          {
+            id: 29,
+            name: "Salsas",
+          },
+        ],
+      },
+      {
+        id: 3,
+        name: "Agua, Jugos y Bebidas",
+        subOptions: [
+          {
+            id: 31,
+            name: "Agua Embotellada",
+          },
+          {
+            id: 32,
+            name: "Bebidas Energizantes",
+          },
+          {
+            id: 33,
+            name: "Bebidas Isotónicas",
+          },
+          {
+            id: 34,
+            name: "Bebidas no Gasificadas",
+          },
+          {
+            id: 35,
+            name: "Bebidas y Concentrados en Polvo",
+          },
+          {
+            id: 36,
+            name: "Café, Té y Saborizantes",
+          },
+          {
+            id: 37,
+            name: "Jarabes para Agua",
+          },
+          {
+            id: 38,
+            name: "Jugos y Néctares",
+          },
+          {
+            id: 39,
+            name: "Refrescos y Sodas",
+          },
+        ],
+      },
+      {
+        id: 4,
+        name: "Botanas, Golosinas y Chocolates",
+        subOptions: [
+          {
+            id: 41,
+            name: "Botanas",
+          },
+          {
+            id: 42,
+            name: "Confitería",
+          },
+          {
+            id: 43,
+            name: "Dulces y Chocolates",
+          },
+          {
+            id: 44,
+            name: "Frituras Empacadas",
+          },
+        ],
+      },
+      {
+        id: 5,
+        name: "Cervezas, Vinos, Licores y Cigarros",
+        subOptions: [
+          {
+            id: 46,
+            name: "Accesorios Vinos",
+          },
+          {
+            id: 47,
+            name: "Aguardientes",
+          },
+          {
+            id: 48,
+            name: "Aperitivos",
+          },
+          {
+            id: 49,
+            name: "Brandy y Coñac",
+          },
+          {
+            id: 50,
+            name: "Cervezas",
+          },
+          {
+            id: 51,
+            name: "Cigarros Y Puros",
+          },
+          {
+            id: 52,
+            name: "Cockteles",
+          },
+          {
+            id: 53,
+            name: "Coolers y Bebidas Preparadas",
+          },
+          {
+            id: 54,
+            name: "Destilados",
+          },
+          {
+            id: 55,
+            name: "Digestivos",
+          },
+          {
+            id: 56,
+            name: "Mezcladores",
+          },
+          {
+            id: 57,
+            name: "Rompopes y Cremas",
+          },
+          {
+            id: 58,
+            name: "Ron",
+          },
+          {
+            id: 59,
+            name: "Tequila",
+          },
+          {
+            id: 60,
+            name: "Vinos Blancos",
+          },
+          {
+            id: 61,
+            name: "Vinos Espumosos",
+          },
+          {
+            id: 62,
+            name: "Vinos Rosados",
+          },
+          {
+            id: 63,
+            name: "Vinos Tintos",
+          },
+          {
+            id: 64,
+            name: "Vodka y Ginebra",
+          },
+          {
+            id: 65,
+            name: "Whisky",
+          },
+        ],
+      },
+      {
+        id: 6,
+        name: "Enlatados y Conservas",
+        subOptions: [
+          {
+            id: 67,
+            name: "Alimentos Preparados",
+          },
+          {
+            id: 68,
+            name: "Almíbares",
+          },
+          {
+            id: 69,
+            name: "Chiles Enlatados",
+          },
+          {
+            id: 70,
+            name: "Conservas Granel",
+          },
+          {
+            id: 71,
+            name: "Encurtidos",
+          },
+          {
+            id: 72,
+            name: "Frijoles Envasados",
+          },
+          {
+            id: 73,
+            name: "Legumbres Enlatados",
+          },
+          {
+            id: 74,
+            name: "Pescados y Mariscos Enlatados",
+          },
+          {
+            id: 75,
+            name: "Sopas Enlatadas",
+          },
+        ],
+      },
+      {
+        id: 7,
+        name: "Gourmet y Comida de Temporada",
+        subOptions: [
+          {
+            id: 77,
+            name: "Gourmet y Comida de Temporada",
+          },
+        ],
+      },
+      {
+        id: 8,
+        name: "Granos y Semillas",
+        subOptions: [
+          {
+            id: 79,
+            name: "Arroz",
+          },
+          {
+            id: 80,
+            name: "Frijol",
+          },
+          {
+            id: 81,
+            name: "Granos",
+          },
+          {
+            id: 82,
+            name: "Semillas",
+          },
+        ],
+      },
+      {
+        id: 9,
+        name: "Hielo",
+        subOptions: [
+          {
+            id: 84,
+            name: "Hielo",
+          },
+        ],
+      },
+      {
+        id: 10,
+        name: "Lácteos e Infusiones",
+        subOptions: [
+          {
+            id: 86,
+            name: "Condensadas y Evaporadas",
+          },
+          {
+            id: 87,
+            name: "Leche Líquida",
+          },
+          {
+            id: 88,
+            name: "Leche Polvo",
+          },
+          {
+            id: 89,
+            name: "Sustitutos de Crema",
+          },
+          {
+            id: 90,
+            name: "Té e Infusiones",
+          },
+        ],
+      },
+      {
+        id: 11,
+        name: "Untables y Mermeladas",
+        subOptions: [
+          {
+            id: 92,
+            name: "Cajetas y Untables",
+          },
+          {
+            id: 93,
+            name: "Mermeladas y Jaleas",
+          },
+          {
+            id: 94,
+            name: "Mieles",
+          },
+        ],
+      },
+    ],
+  },
+  className: "main-option",
+};

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

@@ -0,0 +1,144 @@
+import { Container } from "./styles";
+import { CheckBox } from "../CheckBox";
+import { useState } from "react";
+
+export const CustomSelectItem = ({
+  option,
+  activeFilters = {},
+  parameterArray,
+  globalFilters,
+  setActiveFilters,
+  setParameterArray,
+  className,
+  route = "",
+}) => {
+  const [showSubOptions, setShowSubOptions] = useState(false);
+  const filterRoute = route;
+
+  const returnFilterId = (object) => {
+    const { subOptions, id } = object;
+    if (subOptions) return subOptions.map(returnFilterId);
+    else return id;
+  };
+
+  const oneDimensionArray = (arr) => {
+    var array = [];
+    arr.forEach((element) => {
+      if (typeof element == "object") array.push(...oneDimensionArray(element));
+      else array.push(element);
+    });
+    return array;
+  };
+
+  const setFilter = (object, newObject = {}) => {
+    const { subOptions } = object;
+    if (subOptions) {
+      subOptions.forEach((option) => {
+        newObject[option.name] = setFilter(option);
+      });
+      return newObject;
+    } else return (newObject[object.name] = 1);
+  };
+
+  const createFilter = (rout, option, filters) => {
+    const levelsArray = rout.includes("|") ? rout.split("|").reverse() : [rout];
+    if (levelsArray.length === 1) {
+      return { [levelsArray[0]]: setFilter(option) };
+    } else if (levelsArray.length === 2) {
+      const newObject = {};
+      newObject[levelsArray[1]] = { ...filters };
+      newObject[levelsArray[1]][levelsArray[0]] = {
+        ...setFilter(option),
+      };
+      return { ...newObject };
+    } else if (levelsArray.length === 3) {
+      let newObject = globalFilters;
+      if (newObject[levelsArray[2]]) {
+        newObject[levelsArray[2]][levelsArray[1]] = {
+          ...newObject[levelsArray[2]][levelsArray[1]],
+          ...filters,
+        };
+      } else {
+        newObject = {
+          [levelsArray[2]]: { [levelsArray[1]]: { ...filters } },
+        };
+      }
+      newObject[levelsArray[2]][levelsArray[1]][levelsArray[0]] = 1;
+      return { ...newObject };
+    }
+  };
+
+  const deleteFilter = (rout) => {
+    const levelsArray = rout.includes("|") ? rout.split("|").reverse() : [rout];
+    const newObject = { ...globalFilters };
+    if (levelsArray.length === 1) delete newObject[levelsArray[0]];
+    else if (levelsArray.length === 2)
+      delete newObject[levelsArray[1]][levelsArray[0]];
+    else if (levelsArray.length === 3)
+      delete newObject[levelsArray[2]][levelsArray[1]][levelsArray[0]];
+    return newObject;
+  };
+
+  const onChangeChk = (e, object) => {
+    let idsFilter = returnFilterId(object);
+    if (typeof idsFilter === "object") {
+      idsFilter = oneDimensionArray(idsFilter);
+    } else {
+      idsFilter = [idsFilter];
+    }
+    let tempArray = parameterArray.slice();
+    if (e.target.checked) {
+      const newFilter = createFilter(route, option, activeFilters);
+      tempArray.push(...idsFilter);
+      setActiveFilters((current) => {
+        return {
+          ...current,
+          ...newFilter,
+        };
+      });
+    } else {
+      tempArray = tempArray.filter((element) => !idsFilter.includes(element));
+      const remainFilters = deleteFilter(route, globalFilters);
+      setActiveFilters((current) => remainFilters);
+    }
+    setParameterArray(tempArray);
+  };
+
+  return (
+    <Container mainDivClass={className}>
+      <div className={className}>
+        <CheckBox
+          id={"main-item-" + option.name}
+          label={option.name}
+          defaultChecked={activeFilters[option.name]}
+          onChange={(e) => onChangeChk(e, option)}
+        />
+        {option.subOptions && (
+          <div
+            onClick={() => setShowSubOptions(!showSubOptions)}
+            className="arrow-item"
+          >
+            &#9664;
+          </div>
+        )}
+      </div>
+      {showSubOptions && (
+        <div className="sub-options">
+          {option.subOptions.map((subOption, index) => (
+            <CustomSelectItem
+              key={index + "-" + subOption.name}
+              option={subOption}
+              className={"sub-option"}
+              route={`${filterRoute}|${subOption.name}`}
+              activeFilters={activeFilters[option.name]}
+              parameterArray={parameterArray}
+              globalFilters={globalFilters}
+              setActiveFilters={setActiveFilters}
+              setParameterArray={setParameterArray}
+            />
+          ))}
+        </div>
+      )}
+    </Container>
+  );
+};

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

@@ -0,0 +1,32 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  & > .${(props) => props.mainDivClass} {
+    display: flex;
+    justify-content: space-between;
+    padding: 5px;
+    flex-wrap: nowrap;
+    white-space: nowrap;
+
+    .arrow-item {
+      transform: rotate(-90deg);
+      cursor: pointer;
+      font-size: 10px;
+    }
+
+    &:hover {
+      background-color: #f0f0f0;
+    }
+
+    input {
+      & + label {
+        cursor: pointer;
+      }
+    }
+  }
+  .sub-options {
+    & > * {
+      padding-left: 15px;
+    }
+  }
+`;

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

@@ -0,0 +1,15 @@
+import { CustomTooltip } from "./index";
+
+export default {
+  title: "Components/atoms/CustomTooltip",
+  component: CustomTooltip
+};
+
+const Template = (args) => <CustomTooltip {...args} />;
+
+export const TooltipDefault = Template.bind({});
+TooltipDefault.args = {
+	componentTooltip: (<p> hola soy tooltip </p>) ,
+	children: (<button> abrir tooltip </button>) ,
+	className: "container-tooltip"
+};

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

@@ -0,0 +1,35 @@
+import { useEffect, useState } from "react";
+import { Tooltip } from "@mui/material";
+import { Container } from "./styles";
+import React from "react";
+
+export const CustomTooltip = ({
+	componentTooltip ,
+	children ,
+	className ,
+	...props
+}) => {
+
+	const MyComponent = React.forwardRef(function MyComponent(props, ref) {
+		return (
+		  <div {...props} ref={ref}>
+			Bin
+		  </div>
+		);
+	  });
+  
+  return (
+  <Tooltip
+	{...props}
+	arrow
+	placement="top"
+	componentsProps={{
+		tooltip: {className: className} ,
+		popper: {disablePortal: true}
+	}}
+	title={ componentTooltip }
+  >
+	{children}
+  </Tooltip>
+  )
+};

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

@@ -0,0 +1,5 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+	border: 1px solid red;
+`;

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

@@ -1,4 +1,5 @@
 import { CustomSelect } from "./index";
+import iconStar from "../../../assets/images/customSelect/starIcon.svg";
 
 export default {
   title: "Components/molecules/CustomSelect",
@@ -8,20 +9,27 @@ export default {
 const Template = (args) => <CustomSelect {...args} />;
 export const CustomSelectDefault = Template.bind({});
 CustomSelectDefault.args = {
-  selectLabel: "Todos los departamentos",
+  // selectLabel: "Todos los departamentos",
   defaultOption: "Todos los departamentos",
   options: [
     {
-      id: 1,
-      value: "Decoración",
-      subOptions: [
-        { id: 1, value: "Espejos" },
-        { id: 2, value: "Persianas" },
-      ],
+      id: 47,
+      name: "Enero 2023",
+      isSelected: true,
+    },
+    {
+      id: 49,
+      name: "Mis Favoritos",
     },
-    { id: 2, value: "Eléctrico" },
-    { id: 3, value: "Ferretería" },
-    { id: 4, value: "Herramientas" },
-    { id: 5, value: "Iluminación" },
   ],
+  onClickItem: (v, id) => {
+    if (v) {
+      console.log("Agregar a la lista", id);
+    } else {
+      console.log("Eliminar a la lista", id);
+    }
+  },
+  icon: iconStar,
+  showSearchBar: true,
+  customOptions: <p>Esto es un customOptions</p>
 };

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

@@ -7,6 +7,7 @@ export const SelecItem = ({
   setParameterArray,
   activeFilters,
   setActiveFilters,
+  onClickItem,
 }) => {
   const [showSubOptions, setShowSubOptions] = useState(false);
   const [chkGlobal, setChkGlobal] = useState(false);
@@ -17,6 +18,9 @@ export const SelecItem = ({
           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) {
@@ -77,6 +81,9 @@ export const SelecItem = ({
                   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)