@wulperstudio/cms/node/organisms/Drawer/Drawer.js

Wulper Studio Library Components CMS

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Drawer = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@iconify/react");
var _NavDrawer2 = require("../NavDrawer");
var _TabsDrawer = require("../TabsDrawer");
var _HeaderDrawer = require("../HeaderDrawer");
var _Button = require("../../components/Button");
var _DrawerSection = require("../DrawerSection");
var _DrawerAssetFixed = require("../DrawerAssetFixed");
var _DrawerAssetFloat = require("../DrawerAssetFloat");
var _TitleDrawer = require("../../components/TitleDrawer");
var _IconButtonComponent = require("../../components/IconButtonComponent");
var _styled = require("./styled");
var _jsxRuntime = require("react/jsx-runtime");
var _NavDrawer, _span;
var _excluded = ["moreInfo"];
var Drawer = exports.Drawer = function Drawer(_ref) {
  var _ref$moreInfo = _ref.moreInfo,
    moreInfo = _ref$moreInfo === void 0 ? 'float' : _ref$moreInfo,
    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    style: {
      height: props.showHeightFull ? '100%' : 'auto',
      maxHeight: '100%'
    },
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styled.MoreInfo, {
      background: props.background,
      moreInfo: moreInfo,
      headerOff: props.headerOff,
      responsiveMoreInfo: props.responsiveMoreInfo,
      position: props.positionDrawer,
      children: [!props.hideHeaderDrawer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_HeaderDrawer.HeaderDrawer, {
        titleHeader: props.titleHeaderDrawer || 'header title',
        hideCloseIcon: props.hideIconClose,
        hideBackIcon: props.hideBackIcon,
        hideTitleHeader: props.hideTitleHeader,
        onClose: props.onClose,
        onEdit: props.onEdit,
        onBack: props.onBack,
        hideEditIcon: props.hideEditIcon
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styled.Container, {
        children: [props.showDrawerAssetFloat && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerAssetFloat.DrawerAssetFloat, {
          image: props.imageUrlDrawerSection,
          hideCloseICon: props.hideCloseIconImage
        }), props.showDrawerAssetFixed && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerAssetFixed.DrawerAssetFixed, {
          image: props.imageUrlDrawerSection,
          hideCloseIcon: props.hideIconClose,
          hideBackIcon: props.hideBackIcon,
          hideEditIcon: props.hideEditIcon,
          onClose: props.onClose,
          onEdit: props.onEdit
        }), props.showDrawerSection && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerSection.DrawerSection, {
          image: props.imageUrlDrawerSection,
          imageType: props.imageType,
          titleText: props.titleText,
          subtitleText: props.subtitleText,
          sizeAvatar: "100px"
        }), props.showTitleDrawer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TitleDrawer.TitleDrawer, {
          title: props.titleText || ''
        }), props.showNavDrawer && (_NavDrawer || (_NavDrawer = /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavDrawer2.NavDrawer, {
          colorPrimary: "#fff",
          background: "#2751E9"
        }))), props.hideTabs ?
        // <Grid>
        props.children
        // </Grid>
        : /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabsDrawer.TabsDrawer, {
          stickyTabs: props.stickyTabs,
          tabs: props.tabs || [{
            label: 'Default',
            items: _span || (_span = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
              children: "default"
            }))
          }]
        })]
      }), props.showButton && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styled.ButtonContainer, {
        footerDirection: props.footerDirection,
        children: [props.showSendIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButtonComponent.IconButtonComponent, {
          iconProps: {
            sx: {
              borderRadius: '15px',
              boxShadow: 'none',
              border: "1px solid ".concat(props.colorIconButtonOutlined),
              minWidth: '52px',
              minHeight: '52px'
            },
            onClick: function onClick() {
              return props.onClickSendIcon && props.onClickSendIcon();
            }
          },
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
            icon: "ic:baseline-send",
            style: {
              transform: 'rotate(315deg)'
            },
            color: props.colorIconButtonOutlined
          })
        }), props.showDeleteIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButtonComponent.IconButtonComponent, {
          iconProps: {
            sx: {
              borderRadius: '15px',
              boxShadow: 'none',
              border: "1px solid ".concat(props.colorIconButtonOutlined),
              minWidth: '52px',
              minHeight: '52px'
            },
            onClick: function onClick() {
              return props.onClickDeleteIcon && props.onClickDeleteIcon();
            }
          },
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
            icon: "ic:baseline-delete",
            color: props.colorIconButtonOutlined
          })
        }), props.showPreviewIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButtonComponent.IconButtonComponent, {
          iconProps: {
            sx: {
              borderRadius: '15px',
              boxShadow: 'none',
              border: "1px solid ".concat(props.colorIconButtonOutlined),
              minWidth: '52px',
              minHeight: '52px'
            },
            onClick: function onClick() {
              return props.onClickPreviewIcon && props.onClickPreviewIcon();
            }
          },
          children: props.iconButtonFooterDrawer
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, Object.assign({}, props.buttonProps, {
          color: "primary",
          size: "large",
          variant: props.variantButton,
          fullWidth: true,
          type: "submit",
          sx: {
            borderRadius: props.radiusButton || '50px'
          },
          onClick: function onClick() {
            return props.onClickButton && props.onClickButton();
          },
          children: props.textButton || 'Save'
        }))]
      })]
    })
  });
};