react-lightning-design-system/lib/scripts/Modal.js

Salesforce Lightning Design System components built with React

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ModalHeader = exports.ModalFooter = exports.ModalContent = exports.Modal = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _Button = require("./Button");
var _Text = require("./Text");
var _hooks = require("./hooks");
var _excluded = ["className", "title", "tagline"],
  _excluded2 = ["className", "children"],
  _excluded3 = ["className", "directional", "children"],
  _excluded4 = ["className", "opened", "children", "size", "containerStyle", "onHide", "closeButton", "onClose"];
/**
 *
 */

/**
 *
 */
var ModalHeader = exports.ModalHeader = function ModalHeader(props) {
  var className = props.className,
    title = props.title,
    tagline = props.tagline,
    rprops = (0, _objectWithoutProperties2["default"])(props, _excluded);
  var hdClassNames = (0, _classnames["default"])(className, 'slds-modal__header');
  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
    className: hdClassNames
  }, rprops), /*#__PURE__*/_react["default"].createElement(_Text.Text, {
    tag: "h2",
    category: "heading",
    type: "medium",
    tabIndex: -1
  }, title), tagline ? /*#__PURE__*/_react["default"].createElement("p", {
    className: "slds-m-top_x-small"
  }, tagline) : null);
};

/**
 *
 */

/**
 *
 */
var ModalContent = exports.ModalContent = function ModalContent(_ref) {
  var className = _ref.className,
    children = _ref.children,
    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded2);
  var ctClassNames = (0, _classnames["default"])(className, 'slds-modal__content');
  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
    className: ctClassNames
  }, props), children);
};

/**
 *
 */

/**
 *
 */
var ModalFooter = exports.ModalFooter = function ModalFooter(_ref2) {
  var className = _ref2.className,
    directional = _ref2.directional,
    children = _ref2.children,
    props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded3);
  var ftClassNames = (0, _classnames["default"])(className, 'slds-modal__footer', {
    'slds-modal__footer_directional': directional
  });
  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
    className: ftClassNames
  }, props), children);
};

/**
 *
 */

/**
 *
 */
var Modal_ = function Modal_(props) {
  var className = props.className,
    opened = props.opened,
    children = props.children,
    size = props.size,
    containerStyle = props.containerStyle,
    onHide = props.onHide,
    closeButton = props.closeButton,
    onClose_ = props.onClose,
    rprops = (0, _objectWithoutProperties2["default"])(props, _excluded4);
  var modalClassNames = (0, _classnames["default"])(className, 'slds-modal', {
    'slds-fade-in-open': opened,
    'slds-modal_large': size === 'large'
  });
  var backdropClassNames = (0, _classnames["default"])(className, 'slds-backdrop', {
    'slds-backdrop_open': opened
  });
  var onClose = (0, _hooks.useEventCallback)(function () {
    onClose_ === null || onClose_ === void 0 || onClose_();
    onHide === null || onHide === void 0 || onHide();
  });
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("section", (0, _extends2["default"])({
    className: modalClassNames,
    "aria-hidden": !opened,
    role: "dialog",
    tabIndex: -1,
    "aria-modal": "true"
  }, rprops), /*#__PURE__*/_react["default"].createElement("div", {
    className: "slds-modal__container",
    style: containerStyle
  }, closeButton ? /*#__PURE__*/_react["default"].createElement(_Button.Button, {
    type: "icon",
    className: "slds-modal__close",
    icon: "close",
    iconSize: "large",
    alt: "Close",
    inverse: true,
    onClick: onClose
  }) : null, children)), /*#__PURE__*/_react["default"].createElement("div", {
    className: backdropClassNames,
    role: "presentation"
  }));
};
Modal_.Header = ModalHeader;
Modal_.Content = ModalContent;
Modal_.Footer = ModalFooter;
var Modal = exports.Modal = Modal_;
//# sourceMappingURL=Modal.js.map