contentoh-components-library 21.5.32 → 21.5.34

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

@@ -1,150 +1,150 @@
-import { Container } from "./styles";
-import { CheckBox } from "../CheckBox";
-import { useState } from "react";
-
-export const CustomSelectItem = ({
-  option,
-  activeFilters = {},
-  parameterArray,
-  globalFilters,
-  setActiveFilters,
-  setParameterArray,
-  className,
-  route = "",
-  id = "",
-}) => {
-  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-" + (id ? id + "-" : "") + option.id + "-" + option.name
-          }
-          label={option.name}
-          checked={activeFilters[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 + (id ? id + "-" : "") + subOption.name}
-              option={subOption}
-              id={id}
-              className={"sub-option"}
-              route={`${filterRoute}|${subOption.name}`}
-              activeFilters={activeFilters[option.name]}
-              parameterArray={parameterArray}
-              globalFilters={globalFilters}
-              setActiveFilters={setActiveFilters}
-              setParameterArray={setParameterArray}
-            />
-          ))}
-        </div>
-      )}
-    </Container>
-  );
-};
+import { Container } from "./styles";
+import { CheckBox } from "../CheckBox";
+import { useState } from "react";
+
+export const CustomSelectItem = ({
+  option,
+  activeFilters = {},
+  parameterArray,
+  globalFilters,
+  setActiveFilters,
+  setParameterArray,
+  className,
+  route = "",
+  id = "",
+}) => {
+  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-" + (id ? id + "-" : "") + option.id + "-" + option.name
+          }
+          label={option.name}
+          checked={activeFilters[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 + (id ? id + "-" : "") + subOption.name}
+              option={subOption}
+              id={id}
+              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

@@ -1,32 +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;
-    }
-  }
-`;
+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/CustomerTypeImage/CustomerTypeImage.stories.js

@@ -1,10 +1,10 @@
-import { CustomerTypeImages } from "./index";
-
-export default {
-  title: "Components/atoms/CustomerTypeImages",
-  component: CustomerTypeImages,
-};
-const Template = (args) => <CustomerTypeImages {...args} />;
-export const CustomerTypeImagesDefault = Template.bind({});
-
-CustomerTypeImagesDefault.args = {};
+import { CustomerTypeImages } from "./index";
+
+export default {
+  title: "Components/atoms/CustomerTypeImages",
+  component: CustomerTypeImages,
+};
+const Template = (args) => <CustomerTypeImages {...args} />;
+export const CustomerTypeImagesDefault = Template.bind({});
+
+CustomerTypeImagesDefault.args = {};

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

@@ -1,14 +1,14 @@
-import { Container } from "./styles";
-import Cadena from "../../../assets/images/providerAndCadena/Cadena.svg";
-import Proveedor from "../../../assets/images/providerAndCadena/Proveedor.svg";
-
-export const CustomerTypeImages = ({ imageType = "retailer" }) => {
-  return (
-    <Container imageType={imageType} key={`image-${imageType}`}>
-      <img
-        src={imageType === "retailer" ? Cadena : Proveedor}
-        alt={imageType === "retailer" ? "Cadena" : "Proveedor"}
-      />
-    </Container>
-  );
-};
+import { Container } from "./styles";
+import Cadena from "../../../assets/images/providerAndCadena/Cadena.svg";
+import Proveedor from "../../../assets/images/providerAndCadena/Proveedor.svg";
+
+export const CustomerTypeImages = ({ imageType = "retailer" }) => {
+  return (
+    <Container imageType={imageType} key={`image-${imageType}`}>
+      <img
+        src={imageType === "retailer" ? Cadena : Proveedor}
+        alt={imageType === "retailer" ? "Cadena" : "Proveedor"}
+      />
+    </Container>
+  );
+};

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

@@ -1,14 +1,14 @@
-import styled from "styled-components";
-
-export const Container = styled.div`
-  display: flex;
-  background-color: transparent;
-
-  img {
-    width: ${({ imageType }) => (imageType === "retailer" ? 100 : 70)}%;
-    margin: auto;
-  }
-  & + * {
-    margin-top: 20px;
-  }
-`;
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  background-color: transparent;
+
+  img {
+    width: ${({ imageType }) => (imageType === "retailer" ? 100 : 70)}%;
+    margin: auto;
+  }
+  & + * {
+    margin-top: 20px;
+  }
+`;

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

@@ -1,20 +1,20 @@
-import { DropDownButton } from "./index";
-
-export default {
-  title: "Components/atoms/DropDownButton",
-  component: DropDownButton,
-  argTypes: {
-    active: {
-      options: [true, false],
-      control: { type: "boolean" },
-    },
-  },
-};
-
-const Template = (args) => <DropDownButton {...args} />;
-
-export const DropDownButtonGeneral = Template.bind({});
-
-DropDownButtonGeneral.args = {
-  active: false,
-};
+import { DropDownButton } from "./index";
+
+export default {
+  title: "Components/atoms/DropDownButton",
+  component: DropDownButton,
+  argTypes: {
+    active: {
+      options: [true, false],
+      control: { type: "boolean" },
+    },
+  },
+};
+
+const Template = (args) => <DropDownButton {...args} />;
+
+export const DropDownButtonGeneral = Template.bind({});
+
+DropDownButtonGeneral.args = {
+  active: false,
+};

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

@@ -1,10 +1,10 @@
-import { Container } from "./styles";
-import dropDownArrowButton from "../../../assets/images/dropDownButton/dropDownArrowButton.svg";
-
-export const DropDownButton = ({ active }) => {
-  return (
-    <Container className={active && "active"}>
-      <img src={dropDownArrowButton} alt="V" />
-    </Container>
-  );
-};
+import { Container } from "./styles";
+import dropDownArrowButton from "../../../assets/images/dropDownButton/dropDownArrowButton.svg";
+
+export const DropDownButton = ({ active }) => {
+  return (
+    <Container className={active && "active"}>
+      <img src={dropDownArrowButton} alt="V" />
+    </Container>
+  );
+};

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

@@ -1,19 +1,19 @@
-import styled from "styled-components";
-
-export const Container = styled.div`
-  height: 22px;
-  width: 10px;
-  border-left: 1px solid #342b3f;
-  padding-left: 3px;
-
-  img {
-    width: 7px;
-    vertical-align: middle;
-  }
-
-  &.active {
-    img {
-      transform: rotate(180deg);
-    }
-  }
-`;
+import styled from "styled-components";
+
+export const Container = styled.div`
+  height: 22px;
+  width: 10px;
+  border-left: 1px solid #342b3f;
+  padding-left: 3px;
+
+  img {
+    width: 7px;
+    vertical-align: middle;
+  }
+
+  &.active {
+    img {
+      transform: rotate(180deg);
+    }
+  }
+`;

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

@@ -1,13 +1,13 @@
-import { EditField } from "./index";
-
-export default {
-  title: "Components/atoms/EditField",
-  component: EditField,
-};
-
-const Template = (args) => <EditField {...args} />;
-export const EditFieldDefault = Template.bind({});
-
-EditFieldDefault.args = {
-  placeHolder: "Text to edit",
-};
+import { EditField } from "./index";
+
+export default {
+  title: "Components/atoms/EditField",
+  component: EditField,
+};
+
+const Template = (args) => <EditField {...args} />;
+export const EditFieldDefault = Template.bind({});
+
+EditFieldDefault.args = {
+  placeHolder: "Text to edit",
+};

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

@@ -1,15 +1,15 @@
-import { Container } from "./styles";
-import editField from "../../../assets/images/editField/editField.svg";
-
-export const EditField = ({ placeHolder, value }) => {
-  return (
-    <Container>
-      <input type="text" placeHolder={placeHolder} value={value} />
-      <div className="button-container">
-        <button>
-          <img src={editField} alt="save changes icon" />
-        </button>
-      </div>
-    </Container>
-  );
-};
+import { Container } from "./styles";
+import editField from "../../../assets/images/editField/editField.svg";
+
+export const EditField = ({ placeHolder, value }) => {
+  return (
+    <Container>
+      <input type="text" placeHolder={placeHolder} value={value} />
+      <div className="button-container">
+        <button>
+          <img src={editField} alt="save changes icon" />
+        </button>
+      </div>
+    </Container>
+  );
+};