contentoh-components-library 21.2.27 → 21.2.30

package/.env.development

@@ -18,6 +18,8 @@ REACT_APP_VERSIONS_ENDPOINT = https://lqrc8jfjqi.execute-api.us-east-1.amazonaws
 REACT_APP_RETAILER_ENDPOINT=https://lqrc8jfjqi.execute-api.us-east-1.amazonaws.com/dev/retailers
 REACT_APP_READ_ORDERS_BY_STATUS=https://lqrc8jfjqi.execute-api.us-east-1.amazonaws.com/dev/read-orders-by-status
 REACT_APP_READ_REQUIRED_ORDERS=https://lqrc8jfjqi.execute-api.us-east-1.amazonaws.com/dev/read-required-orders
+REACT_APP_CATEGORY_ENDPOINT=https://lqrc8jfjqi.execute-api.us-east-1.amazonaws.com/dev/categories
+REACT_APP_READ_PROVIDERS=https://lqrc8jfjqi.execute-api.us-east-1.amazonaws.com/dev/providers
 
 REACT_APP_IMAGES_BUCKET=content-management-images
 REACT_APP_KEY_UPLOAD_TO_S3=AKIA5CPHLQTT46EQ5TIK

package/.env.production

@@ -18,6 +18,8 @@ REACT_APP_VERSIONS_ENDPOINT = https://6jqnpjf841.execute-api.us-east-1.amazonaws
 REACT_APP_RETAILER_ENDPOINT=https://6jqnpjf841.execute-api.us-east-1.amazonaws.com/prod/retailers
 REACT_APP_READ_ORDERS_BY_STATUS=https://6jqnpjf841.execute-api.us-east-1.amazonaws.com/prod/read-orders-by-status
 REACT_APP_READ_REQUIRED_ORDERS=https://6jqnpjf841.execute-api.us-east-1.amazonaws.com/prod/read-required-orders
+REACT_APP_CATEGORY_ENDPOINT=https://6jqnpjf841.execute-api.us-east-1.amazonaws.com/prod/categories
+REACT_APP_READ_PROVIDERS=https://6jqnpjf841.execute-api.us-east-1.amazonaws.com/prod/providers
 
 REACT_APP_IMAGES_BUCKET=content-management-images-prod
 REACT_APP_KEY_UPLOAD_TO_S3=AKIA5CPHLQTT46EQ5TIK

package/dist/components/atoms/VerticalSideMenuMainPage/index.js

@@ -24,68 +24,61 @@ var _reactRouterDom = require("react-router-dom");
 var _jsxRuntime = require("react/jsx-runtime");
 
 var VerticalSideMenuMainPage = function VerticalSideMenuMainPage(_ref) {
-  var _ref$menuoption = _ref.menuoption,
-      menuoption = _ref$menuoption === void 0 ? [] : _ref$menuoption,
-      conteinerdash = _ref.conteinerdash;
+  var menuoption = _ref.menuoption;
 
   var _useState = (0, _react.useState)(),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       trueBar = _useState2[0],
       setTrueBar = _useState2[1];
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactRouterDom.BrowserRouter, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ContainerPrincipal, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-        bar: trueBar,
-        onMouseOver: function onMouseOver() {
-          return setTrueBar(true);
-        },
-        onMouseOut: function onMouseOut() {
-          return setTrueBar(false);
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "navbar-top",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-            src: trueBar ? _iconLogoContentoh.default : _iconLogo.default,
-            alt: "Logo",
-            className: "logo"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "option",
-            children: menuoption.map(function (item, index) {
-              var _item$suboption;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    className: trueBar,
+    bar: trueBar,
+    onMouseOver: function onMouseOver() {
+      return setTrueBar(true);
+    },
+    onMouseOut: function onMouseOut() {
+      return setTrueBar(false);
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "navbar-top",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        src: trueBar ? _iconLogoContentoh.default : _iconLogo.default,
+        alt: "Logo",
+        className: "logo"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "option",
+        children: menuoption.map(function (item, index) {
+          var _item$suboption;
 
-              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.RouterComponent, {
-                bar: trueBar,
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.NavLinkOption, {
-                  to: item.path,
-                  bar: trueBar,
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-                    src: item.icon,
-                    alt: item.title
-                  }), trueBar && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-                    children: item.title
-                  })]
-                }), item.suboption !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-                  children: item === null || item === void 0 ? void 0 : (_item$suboption = item.suboption) === null || _item$suboption === void 0 ? void 0 : _item$suboption.map(function (subitem) {
-                    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                      className: "sub-option",
-                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.NavLinkOption, {
-                        to: subitem.path,
-                        className: "sub-option-link",
-                        bar: trueBar,
-                        children: trueBar && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-                          children: subitem.title
-                        })
-                      })
-                    });
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactRouterDom.NavLink, {
+              to: item.path,
+              className: "option-link",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                src: item.icon,
+                alt: item.title
+              }), trueBar && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+                children: item.title
+              })]
+            }), item.suboption !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+              children: item === null || item === void 0 ? void 0 : (_item$suboption = item.suboption) === null || _item$suboption === void 0 ? void 0 : _item$suboption.map(function (subitem) {
+                return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  className: "sub-option",
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.NavLink, {
+                    to: subitem.path,
+                    className: "sub-option-link",
+                    children: trueBar && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+                      children: subitem.title
+                    })
                   })
-                })]
-              }, index);
-            })
-          })]
+                });
+              })
+            })]
+          }, index);
         })
-      }), conteinerdash]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.GlobalStyle, {})]
+      })]
+    })
   });
 };
 

package/dist/components/atoms/VerticalSideMenuMainPage/styles.js

@@ -2,61 +2,50 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RouterComponent = exports.NavLinkOption = exports.GlobalStyle = exports.ContainerPrincipal = exports.Container = void 0;
+exports.Container = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _reactRouterDom = require("react-router-dom");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 98%;\n  box-sizing: border-box;\n  padding: 23px 10px 70px 10px;\n  flex-direction: column;\n  justify-content: space-between;\n  overflow: none;\n  width: ", "px;\n  border-radius: ", "px;\n  background: linear-gradient(180deg, #e33aa9 0%, #3b1366 100%);\n  scrollbar-width: none;\n  display: flex;\n  text-align: center;\n  transition: width 0.3s linear;\n  margin: 10px 0 10px 20px;\n  & + * {\n    margin-left: 30px;\n  }\n  .navbar-top {\n    transition: all 0.3s linear;\n    .option {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      margin-top: ", "%;\n      padding-left: ", "px;\n      .active {\n        background: #e33aa9;\n      }\n      & + div {\n        margin-top: 5px;\n      }\n      .sub-option {\n        display: flex;\n        flex-direction: column;\n        padding-left: ", "px;\n        height: auto;\n        width: auto;\n      }\n    }\n  }\n"])), function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 98%;\n  box-sizing: border-box;\n  padding: 23px 10px 70px 10px;\n  flex-direction: column;\n  justify-content: space-between;\n  overflow: auto;\n  width: ", "px;\n  border-radius: ", "px;\n  background: linear-gradient(180deg, #e33aa9 0%, #3b1366 100%);\n  scrollbar-width: none;\n  display: flex;\n  text-align: center;\n  transition: width 0.3s linear;\n  margin: 10px 0 10px 20px;\n  & + * {\n    margin-left: 30px;\n  }\n  .navbar-top {\n    transition: all 0.3s linear;\n    .option {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      margin-top: ", "%;\n      padding-left: ", "px;\n      .active {\n        background: #e33aa9;\n      }\n      & + div {\n        margin-top: 5px;\n      }\n      a {\n        height: ", "px;\n        display: flex;\n        justify-content: ", ";\n        border-radius: ", "px;\n        align-items: center;\n        font-family: sans-serif;\n        font-style: normal;\n        font-weight: 400;\n        font-size: 18px;\n        line-height: 21px;\n        letter-spacing: -0.015em;\n        color: #fafafa;\n        text-decoration: none;\n        &.option-link {\n          cursor: pointer;\n          width: ", "px;\n          margin: 5px 0;\n          padding-left: ", "px;\n        }\n        p {\n          cursor: pointer;\n          margin: 0%;\n          pointer-events: none;\n        }\n        img {\n          width: 22px;\n          & + * {\n            margin-left: 12px;\n          }\n        }\n      }\n      .option-link:hover {\n        background: #e33aa9;\n      }\n      .sub-option {\n        display: flex;\n        flex-direction: column;\n        padding-left: ", "px;\n        height: auto;\n        width: auto;\n        a {\n          display: flex;\n          justify-content: flex-start;\n          text-decoration: none;\n          position: relative;\n          font-size: 13px;\n          border-left: 1px solid #f0eef2;\n          border-radius: 0;\n          color: #f0eef2;\n          padding-top: 14px;\n          padding-left: 12px;\n          height: 25px;\n          &::before {\n            border-left: 1px solid #e33aa9;\n            width: 10px;\n            content: \"\";\n            border-radius: 50%;\n            height: 10px;\n            background-color: white;\n            position: absolute;\n            bottom: 0;\n            left: ", "%;\n          }\n          &.active {\n            background: none;\n            &::before {\n              background-color: #e33aa9;\n            }\n          }\n        }\n      }\n    }\n  }\n"])), function (_ref) {
   var bar = _ref.bar;
-  return bar ? 260 : 58;
+  return bar ? 270 : 58;
 }, function (_ref2) {
   var bar = _ref2.bar;
   return bar ? 20 : 50;
 }, function (_ref3) {
   var bar = _ref3.bar;
-  return bar === "" ? 145 : 40;
+  return bar === "" ? 145 : 50;
 }, function (_ref4) {
   var bar = _ref4.bar;
-  return bar ? 10 : 0;
+  return bar ? 5 : 0;
 }, function (_ref5) {
   var bar = _ref5.bar;
-  return bar ? 28 : 20;
-});
-
-exports.Container = Container;
-var RouterComponent = (0, _styledComponents.default)(_reactRouterDom.BrowserRouter)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)([""])));
-exports.RouterComponent = RouterComponent;
-var NavLinkOption = (0, _styledComponents.default)(_reactRouterDom.NavLink)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  height: ", "px;\n  display: flex;\n  justify-content: ", ";\n  border-radius: ", "px;\n  align-items: center;\n  font-family: sans-serif;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 18px;\n  line-height: 21px;\n  margin: 5px 0;\n  letter-spacing: -0.015em;\n  color: #fafafa;\n  text-decoration: none;\n  cursor: pointer;\n  width: ", "px;\n  padding: 0 17px;\n  &:hover {\n    background: #e33aa9;\n  }\n  p {\n    cursor: pointer;\n    margin: 0%;\n    pointer-events: none;\n  }\n  img {\n    width: 22px;\n    & + * {\n      margin-left: 12px;\n    }\n  }\n  &.sub-option-link {\n    display: flex;\n    justify-content: flex-start;\n    text-decoration: none;\n    position: relative;\n    font-size: 13px;\n    border-left: 1px solid #f0eef2;\n    border-radius: 0;\n    color: #f0eef2;\n    padding-top: 14px;\n    height: 25px;\n    margin: 0;\n    padding-left: 12px;\n    &::before {\n      border-left: 1px solid #e33aa9;\n      width: 10px;\n      content: \"\";\n      border-radius: 50%;\n      height: 10px;\n      background-color: white;\n      position: absolute;\n      bottom: 0;\n      left: ", "%;\n    }\n    &.active {\n      background: none;\n      &::before {\n        background-color: #e33aa9;\n      }\n    }\n    &:hover {\n      background: none;\n    }\n  }\n"])), function (_ref6) {
-  var bar = _ref6.bar;
   return bar ? 32 : 38;
+}, function (_ref6) {
+  var bar = _ref6.bar;
+  return bar ? "flex-start" : "center";
 }, function (_ref7) {
   var bar = _ref7.bar;
-  return bar ? "flex-start" : "center";
+  return bar ? 18 : 100;
 }, function (_ref8) {
   var bar = _ref8.bar;
-  return bar ? 18 : 100;
+  return bar ? "160" : "38";
 }, function (_ref9) {
   var bar = _ref9.bar;
-  return bar ? "160" : "38";
+  return bar ? 15 : 0;
 }, function (_ref10) {
   var bar = _ref10.bar;
-  return bar ? -4 : -16;
+  return bar ? 28 : 20;
+}, function (_ref11) {
+  var bar = _ref11.bar;
+  return bar ? -4 : -34;
 });
-exports.NavLinkOption = NavLinkOption;
-
-var ContainerPrincipal = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: flex;\n  height: 100vh;\n  justify-content: space-between;\n"])));
 
-exports.ContainerPrincipal = ContainerPrincipal;
-var GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n@font-face {\n  font-family: 'Avenir Next';\n  font-style: normal;\n  font-weight: normal;\n  src:\n    url('../../assets/fonts/AvenirNextLTPro-Bold.otf') format('otf'),\n    url('../../assets/fonts/AvenirNextLTPro-Regular.otf') format('otf');\n}\n\nhtml, body, div, span, applet, object, iframe,\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\na, abbr, acronym, address, big, cite, code,\ndel, dfn, em, font, img, ins, kbd, q, s, samp,\nsmall, strike, strong, sub, sup, tt, var,\nb, u, i, center,\ndl, dt, dd, ol, ul, li,\nfieldset, figure, form, label, legend,\ntable, caption, tbody, tfoot, thead, tr, th, td {\n  margin: 0;\n  padding: 0;\n  border: 0;\n  outline: 0;\n  font-size: 100%;\n  vertical-align: baseline;\n  background: transparent;\n}\nbody {\n  line-height: 1;\n}\nol, ul {\n  list-style: none;\n}\nblockquote, q {\n  quotes: none;\n}\nblockquote:before, blockquote:after,\nq:before, q:after {\n  content: '';\n  content: none;\n}\n:focus {\n  outline: 0;\n}\nins {\n  text-decoration: none;\n}\ndel {\n  text-decoration: line-through;\n}\ntable {\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n\n"])));
-exports.GlobalStyle = GlobalStyle;
+exports.Container = Container;

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

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CustomSelectDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/molecules/CustomSelect",
+  component: _index.CustomSelect
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.CustomSelect, (0, _objectSpread2.default)({}, args));
+};
+
+var CustomSelectDefault = Template.bind({});
+exports.CustomSelectDefault = CustomSelectDefault;
+CustomSelectDefault.args = {
+  selectLabel: "Todos los departamentos",
+  defaultOption: "Todos los departamentos",
+  options: [{
+    id: 1,
+    value: "Decoración",
+    subOptions: [{
+      id: 1,
+      value: "Espejos"
+    }, {
+      id: 2,
+      value: "Persianas"
+    }]
+  }, {
+    id: 2,
+    value: "Eléctrico"
+  }, {
+    id: 3,
+    value: "Ferretería"
+  }, {
+    id: 4,
+    value: "Herramientas"
+  }, {
+    id: 5,
+    value: "Iluminación"
+  }]
+};

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

@@ -0,0 +1,132 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelecItem = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = require("react");
+
+var _CheckBox = require("../../atoms/CheckBox");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var SelecItem = function SelecItem(_ref) {
+  var _option$subOptions;
+
+  var option = _ref.option,
+      customSelectId = _ref.customSelectId,
+      setParameterArray = _ref.setParameterArray,
+      activeFilters = _ref.activeFilters,
+      setActiveFilters = _ref.setActiveFilters;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showSubOptions = _useState2[0],
+      setShowSubOptions = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      chkGlobal = _useState4[0],
+      setChkGlobal = _useState4[1];
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "option-container",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "main-item",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBox.CheckBox, {
+        id: "main-item-" + option.id,
+        label: option.name,
+        onChange: function onChange(e) {
+          var subOptions = option.subOptions;
+          var filtersCopy = (0, _objectSpread2.default)({}, activeFilters);
+
+          if (subOptions) {
+            setChkGlobal(e.target.checked);
+
+            if (e.target.checked) {
+              subOptions.forEach(function (element) {
+                if (!filtersCopy[option.name]) filtersCopy[option.name] = {};
+                filtersCopy[option.name][element.name] = 1;
+              });
+              setParameterArray(function (current) {
+                return [].concat((0, _toConsumableArray2.default)(current), (0, _toConsumableArray2.default)(subOptions.map(function (element) {
+                  return element.id;
+                })));
+              });
+            } else {
+              setParameterArray(function (current) {
+                return current.filter(function (item) {
+                  return !subOptions.map(function (opt) {
+                    return opt.id;
+                  }).includes(item);
+                });
+              });
+              delete filtersCopy[option.name];
+            }
+          } else {
+            if (e.target.checked) {
+              filtersCopy[option.name] = 1;
+              setParameterArray(function (current) {
+                return [].concat((0, _toConsumableArray2.default)(current), [option.id]);
+              });
+            } else {
+              delete filtersCopy[option.name];
+              setParameterArray(function (current) {
+                return current.filter(function (item) {
+                  return option.id !== item;
+                });
+              });
+            }
+          }
+
+          setActiveFilters(filtersCopy);
+        },
+        defaultChecked: activeFilters[option.name]
+      }), option.subOptions && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        onClick: function onClick() {
+          return setShowSubOptions(!showSubOptions);
+        },
+        className: "arrow-item",
+        children: "\u25C0"
+      })]
+    }), showSubOptions && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "sub-menu",
+      children: option === null || option === void 0 ? void 0 : (_option$subOptions = option.subOptions) === null || _option$subOptions === void 0 ? void 0 : _option$subOptions.map(function (sub) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "sub-filter",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBox.CheckBox, {
+            id: "sub-item-" + sub.id,
+            label: sub.name,
+            defaultChecked: activeFilters[option.name] && activeFilters[option.name][sub.name],
+            onChange: function onChange(e) {
+              if (e.target.checked) {
+                setParameterArray(function (current) {
+                  return [].concat((0, _toConsumableArray2.default)(current), [sub.id]).sort(function (a, b) {
+                    return a - b;
+                  });
+                });
+              } else {
+                setParameterArray(function (current) {
+                  return current.filter(function (item) {
+                    return sub.id !== item;
+                  });
+                });
+              }
+            }
+          })
+        }, customSelectId + "-" + option.id + "-" + sub.id);
+      })
+    })]
+  }, customSelectId + option.id);
+};
+
+exports.SelecItem = SelecItem;

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

@@ -0,0 +1,178 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CustomSelect = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _react = require("react");
+
+var _searchIcon = _interopRequireDefault(require("../../../assets/images/customSelect/searchIcon.png"));
+
+var _customHooks = require("../../../global-files/customHooks");
+
+var _SelectItem = require("./SelectItem");
+
+var _Calendar = require("../../organisms/Calendar");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var CustomSelect = function CustomSelect(_ref) {
+  var options = _ref.options,
+      showSearchBar = _ref.showSearchBar,
+      _ref$placeHolder = _ref.placeHolder,
+      placeHolder = _ref$placeHolder === void 0 ? "Buscar departamento" : _ref$placeHolder,
+      _ref$selectLabel = _ref.selectLabel,
+      selectLabel = _ref$selectLabel === void 0 ? "" : _ref$selectLabel,
+      _ref$customSelectId = _ref.customSelectId,
+      customSelectId = _ref$customSelectId === void 0 ? "defaultSelectId" : _ref$customSelectId,
+      defaultOption = _ref.defaultOption,
+      setParameterArray = _ref.setParameterArray;
+
+  var _useState = (0, _react.useState)(options || []),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      filters = _useState2[0],
+      setFilters = _useState2[1];
+
+  var _useCloseModal = (0, _customHooks.useCloseModal)(customSelectId),
+      _useCloseModal2 = (0, _slicedToArray2.default)(_useCloseModal, 2),
+      showList = _useCloseModal2[0],
+      setShowList = _useCloseModal2[1];
+
+  var _useState3 = (0, _react.useState)(""),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      text = _useState4[0],
+      setText = _useState4[1];
+
+  var _useCloseModal3 = (0, _customHooks.useCloseModal)(customSelectId),
+      _useCloseModal4 = (0, _slicedToArray2.default)(_useCloseModal3, 2),
+      showDatePicker = _useCloseModal4[0],
+      setShowDatePicker = _useCloseModal4[1];
+
+  var _useState5 = (0, _react.useState)(new Date()),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      startDate = _useState6[0],
+      setStartDate = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(new Date()),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      endDate = _useState8[0],
+      setEndDate = _useState8[1];
+
+  var _useState9 = (0, _react.useState)({}),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      activeFilters = _useState10[0],
+      setActiveFilters = _useState10[1];
+
+  var onChange = function onChange(evt) {
+    setText(evt.target.value);
+  };
+
+  (0, _react.useEffect)(function () {
+    var today = new Date();
+    var diff = today.getDate() - today.getDay();
+    var start = new Date(today.setDate(diff));
+    var end = new Date();
+    setStartDate(start);
+    setEndDate(end);
+  }, []);
+
+  var onChangeDatePicker = function onChangeDatePicker(dates) {
+    var _dates = (0, _slicedToArray2.default)(dates, 2),
+        start = _dates[0],
+        end = _dates[1];
+
+    setStartDate(start);
+    setEndDate(end);
+    if (end) setParameterArray(function (current) {
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, current), {}, {
+        startDate: "".concat(start.getFullYear(), "-").concat(start.getMonth() + 1, "-").concat(start.getDate()),
+        endDate: "".concat(end.getFullYear(), "-").concat(end.getMonth() + 1, "-").concat(end.getDate())
+      });
+    });
+  };
+
+  (0, _react.useEffect)(function () {
+    var filteredArray = (options === null || options === void 0 ? void 0 : options.slice()) || [];
+
+    if (text.length > 0) {
+      filteredArray = filteredArray.filter(function (option) {
+        return option === null || option === void 0 ? void 0 : option.name.toLowerCase().includes(text.toLocaleLowerCase());
+      });
+    }
+
+    setFilters(filteredArray);
+  }, [text]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    id: customSelectId,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "button-list",
+      onClick: function onClick() {
+        return setShowList(true);
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: selectLabel
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "arrow-item",
+        children: "\u25C0"
+      })]
+    }), showList && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "select-container",
+      children: [showSearchBar && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "search-bar-filter",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          src: _searchIcon.default,
+          alt: "search icon"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          type: "text",
+          placeholder: placeHolder,
+          value: text,
+          onChange: onChange
+        })]
+      }), defaultOption && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "default-option",
+        onClick: function onClick() {
+          setParameterArray([]);
+          setActiveFilters({});
+          setShowList(false);
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: defaultOption
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "filters-container",
+        children: filters === null || filters === void 0 ? void 0 : filters.map(function (option) {
+          return customSelectId === "dates-select" ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "dates-select-item",
+            onClick: function onClick() {
+              option.function ? option.function(setShowDatePicker) : setShowDatePicker(true);
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+              children: option.name
+            })
+          }, customSelectId + option.id) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectItem.SelecItem, {
+            option: option,
+            customSelectId: customSelectId,
+            setParameterArray: setParameterArray,
+            activeFilters: activeFilters,
+            setActiveFilters: setActiveFilters
+          }, customSelectId + option.id);
+        })
+      })]
+    }), showDatePicker && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Calendar.Calendar, {
+      onChange: onChangeDatePicker,
+      startDate: startDate,
+      endDate: endDate
+    })]
+  });
+};
+
+exports.CustomSelect = CustomSelect;

package/dist/components/molecules/CustomSelect/styles.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n  position: relative;\n\n  .button-list {\n    font-family: ", ";\n    font-size: 13px;\n    display: flex;\n    padding: 10px 15px;\n    justify-content: space-between;\n    border-radius: 50px;\n    background-color: #fff;\n    border: 1px solid #f0f0f0;\n    cursor: pointer;\n\n    .arrow-item {\n      transform: rotate(-90deg);\n      cursor: pointer;\n      font-size: 10px;\n    }\n    & + * {\n      margin-top: 10px;\n    }\n  }\n\n  .select-container {\n    box-shadow: 0px 2px 4px #00000040;\n    border-radius: 5px;\n    background-color: #fff;\n    padding-bottom: 10px;\n    position: absolute;\n    z-index: 10;\n    .search-bar-filter {\n      display: flex;\n      align-items: center;\n      border: 1px solid #f0f0f0;\n      padding-left: 10px;\n\n      img {\n        width: 15px;\n        height: 15px;\n      }\n\n      input {\n        background-color: transparent;\n        padding: 10px 10px;\n        outline: none;\n        border: none;\n      }\n    }\n    .default-option {\n      padding-top: 5px;\n      cursor: pointer;\n      padding: 5px 10px;\n      color: #817393;\n      font-family: Avenir Next;\n      font-weight: 500;\n      font-size: 13px;\n      line-height: 21px;\n      &:hover {\n        background-color: #f0f0f0;\n      }\n    }\n    .filters-container {\n      overflow: auto;\n      max-height: 500px;\n      .option-container,\n      .default-option {\n        cursor: pointer;\n        padding: 5px 10px;\n        .main-item {\n          display: flex;\n          justify-content: space-between;\n\n          .arrow-item {\n            transform: rotate(-90deg);\n            cursor: pointer;\n            font-size: 10px;\n          }\n        }\n        .sub-menu {\n          padding-left: 20px;\n          .sub-filter {\n            & + * {\n              margin-top: 10px;\n            }\n          }\n        }\n\n        &:hover {\n          background-color: #f0f0f0;\n        }\n        label {\n          white-space: nowrap;\n        }\n      }\n\n      .dates-select-item {\n        cursor: pointer;\n        padding: 5px 10px;\n        color: #817393;\n        font-family: Avenir Next;\n        font-weight: 500;\n        font-size: 13px;\n        line-height: 21px;\n        &:hover {\n          background-color: #f0f0f0;\n        }\n      }\n    }\n  }\n"])), _variables.FontFamily.Raleway);
+
+exports.Container = Container;