sag_components 1.0.85 → 1.0.86-7.2

package/dist/stories/components/Popup/Popup.js

@@ -0,0 +1,172 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactHookForm = require("react-hook-form");
+var _MenuItemClosedIcon = require("../../icons/MenuItemClosedIcon");
+var _MenuItemOpenIcon = require("../../icons/MenuItemOpenIcon");
+var _PopupContent = _interopRequireDefault(require("../PopupContent/PopupContent"));
+var _SagButton = _interopRequireDefault(require("../SagButton/SagButton"));
+var _Button = _interopRequireDefault(require("../Button/Button"));
+var _Popup = require("./Popup.style");
+const Popup = props => {
+  const {
+    title,
+    popupItemsData,
+    isPopupOpen,
+    width,
+    height,
+    borderColor,
+    subtitleTextColor,
+    onOverlayClick,
+    children,
+    onChange
+  } = props;
+  const [IsPopupOpen, setIsPopupOpen] = (0, _react.useState)(isPopupOpen);
+  const useFormMethods = (0, _reactHookForm.useForm)({
+    mode: 'onChange'
+  });
+  const divRef = (0, _react.useRef)(null);
+  const [divHeight, setDivHeight] = (0, _react.useState)(0);
+  (0, _react.useEffect)(() => {
+    if (divRef.current) {
+      const {
+        top,
+        bottom
+      } = divRef.current.getBoundingClientRect();
+      const height = bottom - top;
+      setDivHeight(height);
+    }
+  }, [height]);
+  (0, _react.useEffect)(() => {
+    setIsPopupOpen(isPopupOpen);
+  }, [isPopupOpen]);
+  const openPopup = () => {
+    setIsPopupOpen(true);
+  };
+  const closePopup = e => {
+    setIsPopupOpen(false);
+    onOverlayClick(e);
+  };
+  const AccordionItem = _ref => {
+    var _children$props, _children$props2;
+    let {
+      title,
+      rowsData,
+      children
+    } = _ref;
+    const [IsItemOpen, setIsItemOpen] = (0, _react.useState)(false);
+    const handleToggle = () => {
+      setIsItemOpen(!IsItemOpen);
+    };
+    return /*#__PURE__*/_react.default.createElement(_Popup.AccordionItemMainContainer, {
+      id: "AccordionItemMainContainer",
+      borderColor: borderColor
+    }, /*#__PURE__*/_react.default.createElement(_Popup.AccordionItemContainer, {
+      id: "AccordionItemContainer",
+      onClick: handleToggle,
+      style: {
+        cursor: 'pointer'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Popup.AccordionItemIconContainer, {
+      id: "AccordionItemIconContainer"
+    }, IsItemOpen ? /*#__PURE__*/_react.default.createElement(_MenuItemOpenIcon.MenuItemOpenIcon, null) : /*#__PURE__*/_react.default.createElement(_MenuItemClosedIcon.MenuItemClosedIcon, null)), /*#__PURE__*/_react.default.createElement(_Popup.AccordionItemTitle, {
+      id: "AccordionItemTitle",
+      subtitleTextColor: subtitleTextColor
+    }, title)), IsItemOpen && /*#__PURE__*/_react.default.createElement(_Popup.AccordionContentContainer, {
+      id: "AccordionContentContainer"
+    }, title === 'Campaigns' ? children === null || children === void 0 ? void 0 : (_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.children[0] : title === 'Products' ? children === null || children === void 0 ? void 0 : (_children$props2 = children.props) === null || _children$props2 === void 0 ? void 0 : _children$props2.children[1] : '', /*#__PURE__*/_react.default.createElement(_PopupContent.default, {
+      id: "PopupContent",
+      width: "100%",
+      height: "100%",
+      rowsData: rowsData,
+      borderColor: borderColor,
+      onClick: () => {},
+      onChange: onChange
+    })));
+  };
+  const Accordion = _ref2 => {
+    let {
+      items,
+      children
+    } = _ref2;
+    return /*#__PURE__*/_react.default.createElement(_Popup.AccordionContainer, {
+      id: "AccordionContainer",
+      maxHeight: divHeight ? (divHeight - 190).toString().concat('', 'px') : null
+    }, items.map((item, index) => {
+      var _item$rowsData;
+      return /*#__PURE__*/_react.default.createElement(AccordionItem, {
+        key: index,
+        title: item.title,
+        rowsData: ((_item$rowsData = item.rowsData) === null || _item$rowsData === void 0 ? void 0 : _item$rowsData.length) > 0 ? item.rowsData : []
+      }, children);
+    }));
+  };
+  return /*#__PURE__*/_react.default.createElement(_Popup.MainContainer, {
+    id: "MainContainer"
+  }, IsPopupOpen && /*#__PURE__*/_react.default.createElement(_reactHookForm.FormProvider, useFormMethods, /*#__PURE__*/_react.default.createElement("form", {
+    onSubmit: useFormMethods.handleSubmit(submittedValues => console.log('submittedValues', submittedValues))
+  }, /*#__PURE__*/_react.default.createElement(_Popup.ModalOverlay, {
+    id: "ModalOverlay",
+    className: "modal-overlay",
+    onClick: e => closePopup(e)
+  }, /*#__PURE__*/_react.default.createElement(_Popup.ModalContent, {
+    id: "ModalContent",
+    ref: divRef,
+    className: "modal-content",
+    height: height,
+    width: width,
+    onClick: e => e.stopPropagation()
+  }, /*#__PURE__*/_react.default.createElement(_Popup.TitleContainer, {
+    id: "TitleContainer"
+  }, /*#__PURE__*/_react.default.createElement(_Popup.Title, null, title), /*#__PURE__*/_react.default.createElement(_Popup.Close, {
+    id: "Close",
+    className: "close",
+    onClick: e => closePopup(e)
+  }, "\xD7")), /*#__PURE__*/_react.default.createElement(Accordion, {
+    items: popupItemsData
+  }, children), /*#__PURE__*/_react.default.createElement(_Popup.ButtonsContainer, {
+    id: "ButtonsContainer"
+  }, /*#__PURE__*/_react.default.createElement(_Popup.InputCommit, {
+    value: "Save",
+    type: "submit",
+    style: {
+      backgroundColor: '#BCC6DA',
+      color: 'white',
+      transition: 'background-color 0.3s, color 0.3s'
+    },
+    borderColor: borderColor
+  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    text: "Save",
+    type: "primary",
+    size: "medium",
+    isSubmitButton: true
+  }), /*#__PURE__*/_react.default.createElement(_SagButton.default, {
+    textColor: "#212121",
+    backgroundColor: "#ffffff",
+    borderColor: borderColor,
+    onClickColor: "#B1B1B1",
+    radius: "8px",
+    text: "Cancel",
+    height: "40px",
+    width: "100px",
+    fontSize: "14px",
+    fontWeight: "500",
+    disabled: false,
+    onClick: e => closePopup(e)
+  })))))));
+};
+var _default = exports.default = Popup;
+Popup.defaultProps = {
+  isPopupOpen: true,
+  width: '800px',
+  height: '600px',
+  onSaveClick: () => {},
+  onCancelClick: () => {},
+  onOverlayClick: () => {}
+};