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

Wulper Studio Library Components CMS

import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _NavDrawer, _span;
var _excluded = ["moreInfo"];
import React from 'react';
import { Icon } from '@iconify/react';
import { NavDrawer } from '../NavDrawer';
import { TabsDrawer } from '../TabsDrawer';
import { HeaderDrawer } from '../HeaderDrawer';
import { Button } from '../../components/Button';
import { DrawerSection } from '../DrawerSection';
import { DrawerAssetFixed } from '../DrawerAssetFixed';
import { DrawerAssetFloat } from '../DrawerAssetFloat';
import { TitleDrawer } from '../../components/TitleDrawer';
import { IconButtonComponent } from '../../components/IconButtonComponent';
import { ButtonContainer, Container, MoreInfo } from './styled';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var Drawer = function Drawer(_ref) {
  var _ref$moreInfo = _ref.moreInfo,
    moreInfo = _ref$moreInfo === void 0 ? 'float' : _ref$moreInfo,
    props = _objectWithoutProperties(_ref, _excluded);
  return /*#__PURE__*/_jsx("div", {
    style: {
      height: props.showHeightFull ? '100%' : 'auto',
      maxHeight: '100%'
    },
    children: /*#__PURE__*/_jsxs(MoreInfo, {
      background: props.background,
      moreInfo: moreInfo,
      headerOff: props.headerOff,
      responsiveMoreInfo: props.responsiveMoreInfo,
      position: props.positionDrawer,
      children: [!props.hideHeaderDrawer && /*#__PURE__*/_jsx(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__*/_jsxs(Container, {
        children: [props.showDrawerAssetFloat && /*#__PURE__*/_jsx(DrawerAssetFloat, {
          image: props.imageUrlDrawerSection,
          hideCloseICon: props.hideCloseIconImage
        }), props.showDrawerAssetFixed && /*#__PURE__*/_jsx(DrawerAssetFixed, {
          image: props.imageUrlDrawerSection,
          hideCloseIcon: props.hideIconClose,
          hideBackIcon: props.hideBackIcon,
          hideEditIcon: props.hideEditIcon,
          onClose: props.onClose,
          onEdit: props.onEdit
        }), props.showDrawerSection && /*#__PURE__*/_jsx(DrawerSection, {
          image: props.imageUrlDrawerSection,
          imageType: props.imageType,
          titleText: props.titleText,
          subtitleText: props.subtitleText,
          sizeAvatar: "100px"
        }), props.showTitleDrawer && /*#__PURE__*/_jsx(TitleDrawer, {
          title: props.titleText || ''
        }), props.showNavDrawer && (_NavDrawer || (_NavDrawer = /*#__PURE__*/_jsx(NavDrawer, {
          colorPrimary: "#fff",
          background: "#2751E9"
        }))), props.hideTabs ?
        // <Grid>
        props.children
        // </Grid>
        : /*#__PURE__*/_jsx(TabsDrawer, {
          stickyTabs: props.stickyTabs,
          tabs: props.tabs || [{
            label: 'Default',
            items: _span || (_span = /*#__PURE__*/_jsx("span", {
              children: "default"
            }))
          }]
        })]
      }), props.showButton && /*#__PURE__*/_jsxs(ButtonContainer, {
        footerDirection: props.footerDirection,
        children: [props.showSendIcon && /*#__PURE__*/_jsx(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__*/_jsx(Icon, {
            icon: "ic:baseline-send",
            style: {
              transform: 'rotate(315deg)'
            },
            color: props.colorIconButtonOutlined
          })
        }), props.showDeleteIcon && /*#__PURE__*/_jsx(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__*/_jsx(Icon, {
            icon: "ic:baseline-delete",
            color: props.colorIconButtonOutlined
          })
        }), props.showPreviewIcon && /*#__PURE__*/_jsx(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__*/_jsx(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'
        }))]
      })]
    })
  });
};