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

Salesforce Lightning Design System components built with React

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["className", "title", "tagline"],
  _excluded2 = ["className", "children"],
  _excluded3 = ["className", "directional", "children"],
  _excluded4 = ["className", "opened", "children", "size", "containerStyle", "onHide", "closeButton", "onClose"];
import React from 'react';
import classnames from 'classnames';
import { Button } from './Button';
import { Text } from './Text';
import { useEventCallback } from './hooks';

/**
 *
 */

/**
 *
 */
export var ModalHeader = function ModalHeader(props) {
  var className = props.className,
    title = props.title,
    tagline = props.tagline,
    rprops = _objectWithoutProperties(props, _excluded);
  var hdClassNames = classnames(className, 'slds-modal__header');
  return /*#__PURE__*/React.createElement("div", _extends({
    className: hdClassNames
  }, rprops), /*#__PURE__*/React.createElement(Text, {
    tag: "h2",
    category: "heading",
    type: "medium",
    tabIndex: -1
  }, title), tagline ? /*#__PURE__*/React.createElement("p", {
    className: "slds-m-top_x-small"
  }, tagline) : null);
};

/**
 *
 */

/**
 *
 */
export var ModalContent = function ModalContent(_ref) {
  var className = _ref.className,
    children = _ref.children,
    props = _objectWithoutProperties(_ref, _excluded2);
  var ctClassNames = classnames(className, 'slds-modal__content');
  return /*#__PURE__*/React.createElement("div", _extends({
    className: ctClassNames
  }, props), children);
};

/**
 *
 */

/**
 *
 */
export var ModalFooter = function ModalFooter(_ref2) {
  var className = _ref2.className,
    directional = _ref2.directional,
    children = _ref2.children,
    props = _objectWithoutProperties(_ref2, _excluded3);
  var ftClassNames = classnames(className, 'slds-modal__footer', {
    'slds-modal__footer_directional': directional
  });
  return /*#__PURE__*/React.createElement("div", _extends({
    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 = _objectWithoutProperties(props, _excluded4);
  var modalClassNames = classnames(className, 'slds-modal', {
    'slds-fade-in-open': opened,
    'slds-modal_large': size === 'large'
  });
  var backdropClassNames = classnames(className, 'slds-backdrop', {
    'slds-backdrop_open': opened
  });
  var onClose = useEventCallback(function () {
    onClose_ === null || onClose_ === void 0 || onClose_();
    onHide === null || onHide === void 0 || onHide();
  });
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("section", _extends({
    className: modalClassNames,
    "aria-hidden": !opened,
    role: "dialog",
    tabIndex: -1,
    "aria-modal": "true"
  }, rprops), /*#__PURE__*/React.createElement("div", {
    className: "slds-modal__container",
    style: containerStyle
  }, closeButton ? /*#__PURE__*/React.createElement(Button, {
    type: "icon",
    className: "slds-modal__close",
    icon: "close",
    iconSize: "large",
    alt: "Close",
    inverse: true,
    onClick: onClose
  }) : null, children)), /*#__PURE__*/React.createElement("div", {
    className: backdropClassNames,
    role: "presentation"
  }));
};
Modal_.Header = ModalHeader;
Modal_.Content = ModalContent;
Modal_.Footer = ModalFooter;
export var Modal = Modal_;
//# sourceMappingURL=Modal.js.map