@smart-react-components/ui/components/Modal/ModalElement.js

SRC UI includes React and Styled components.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const Div_1 = __importDefault(require("@smart-react-components/core/Element/Div"));
const Svg_1 = __importDefault(require("@smart-react-components/core/Element/Svg"));
const styled_components_1 = __importDefault(require("styled-components"));
const ModalHeader_1 = __importDefault(require("../../Modal/ModalHeader"));
const ModalTitle_1 = __importDefault(require("../../Modal/ModalTitle"));
exports.default = (0, styled_components_1.default)(Div_1.default).attrs(({ isBlock, isFullScreen }) => ({
    getModalSize: (v, t) => `
    ${(!isBlock && !isFullScreen)
        ? `
        width: ${t.$.size.modal[v].width};
      `
        : ''}

    > * {
      padding: ${t.$.size.modal[v].padding.y} ${t.$.size.modal[v].padding.x};
    }

    ${ModalHeader_1.default} {
      ${ModalTitle_1.default} {
        font-size: ${t.$.size.modal[v].titleFontSize};
      }

      ${Svg_1.default} {
        margin: -${t.$.size.modal[v].padding.y} -${t.$.size.modal[v].padding.x} -${t.$.size.modal[v].padding.y} 0;
        padding: ${t.$.size.modal[v].padding.y} ${t.$.size.modal[v].padding.x};
        height: ${t.$.size.icon[v]};
        width: ${t.$.size.icon[v]};
      }
    }
  `,
}))(({ theme, hasBorder, isBlock, isCentered, isFullScreen, isStretched, shape }) => `
  background: ${theme.$.color.dynamic.background};
  box-sizing: border-box;
  color: ${theme.$.color.dynamic.bodyFont};
  display: flex;
  fill: currentcolor;
  flex-direction: column;
  max-height: 100%;
  min-width: 1px;

  ${(isBlock || isFullScreen)
    ? `
      width: 100%;
    `
    : ''}

  ${(isStretched || isFullScreen)
    ? `
      align-self: stretch;  
    `
    : `
      align-self: ${isCentered ? 'center' : 'flex-start'};
    `}

  ${!isFullScreen
    ? `
      border-radius: ${theme.$.radius.modal[shape]};

      ${hasBorder
        ? `
          border: solid 1px ${theme.$.color.dynamic.accent};
        `
        : ''}

      > *:first-child {
        border-top-left-radius: ${theme.$.radius.modal[shape]};
        border-top-right-radius: ${theme.$.radius.modal[shape]};
      }

      > *:last-child {
        border-bottom-left-radius: ${theme.$.radius.modal[shape]};
        border-bottom-right-radius: ${theme.$.radius.modal[shape]};
      }
    `
    : ''}
`);