wix-style-react/dist/es/src/CustomModalLayout/CustomModalLayout.js

wix-style-react

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["children", "removeContentPadding", "showHeaderDivider", "showFooterDivider", "hideContentDividers", "width", "height", "maxHeight", "className", "style", "overflowY"],
    _excluded2 = ["dataHook"],
    _excluded3 = ["dataHook"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

import React from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './CustomModalLayout.st.css';
import BaseModalLayout from '../BaseModalLayout';
import Button from '../Button';
import deprecationLog from '../utils/deprecationLog';
import { TooltipCommonProps } from '../common/PropTypes/TooltipCommon';
/** CustomModalLayout */

var CustomModalLayout = function CustomModalLayout(_ref) {
  var children = _ref.children,
      removeContentPadding = _ref.removeContentPadding,
      showHeaderDivider = _ref.showHeaderDivider,
      showFooterDivider = _ref.showFooterDivider,
      hideContentDividers = _ref.hideContentDividers,
      width = _ref.width,
      height = _ref.height,
      maxHeight = _ref.maxHeight,
      className = _ref.className,
      style = _ref.style,
      overflowY = _ref.overflowY,
      restProps = _objectWithoutProperties(_ref, _excluded);

  if (hideContentDividers) {
    deprecationLog('<CustomModalLayout/> - hideContentDividers prop is deprecated and will be removed in next major release, please use showHeaderDivider and showFooterDivider instead');
  }

  return /*#__PURE__*/React.createElement(BaseModalLayout, _extends({}, restProps, {
    className: st(classes.root, {
      removeContentPadding: removeContentPadding,
      showHeaderDivider: showHeaderDivider === true,
      showFooterDivider: showFooterDivider === true
    }, className),
    style: _objectSpread(_objectSpread({}, style), {}, {
      width: width !== undefined ? width : style.width,
      height: height !== undefined ? height : style.height,
      maxHeight: maxHeight !== undefined ? maxHeight : style.maxHeight
    }),
    "data-contentpadding": !removeContentPadding
  }), /*#__PURE__*/React.createElement(BaseModalLayout.Header, {
    showHeaderDivider: showHeaderDivider === true
  }), /*#__PURE__*/React.createElement(BaseModalLayout.Content, {
    overflowY: overflowY,
    hideTopScrollDivider: hideContentDividers || showHeaderDivider !== 'auto',
    hideBottomScrollDivider: hideContentDividers || showFooterDivider !== 'auto'
  }, children), /*#__PURE__*/React.createElement(BaseModalLayout.Footer, {
    showFooterDivider: showFooterDivider === true
  }), /*#__PURE__*/React.createElement(BaseModalLayout.Footnote, null));
};

CustomModalLayout.Title = BaseModalLayout.Header.Title;
CustomModalLayout.displayName = 'CustomModalLayout';
CustomModalLayout.propTypes = {
  /** ...BaseModalLayout.propTypes, */

  /** additional css classes */
  className: PropTypes.string,

  /** data hook for testing */
  dataHook: PropTypes.string,

  /** callback for when the close button is clicked */
  onCloseButtonClick: PropTypes.func,

  /** callback for when the help button is clicked */
  onHelpButtonClick: PropTypes.func,

  /** a global theme for the modal, will be applied as stylable state and will affect footer buttons skin */
  theme: PropTypes.oneOf(['standard', 'premium', 'destructive']),

  /** ...Header.propTypes, */

  /** The modal's title */
  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),

  /** The modal's subtitle */
  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),

  /** ...Content.propTypes, */

  /** the content you want to render in the modal, children passed directly will be treated as `content` as well */
  content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),

  /** ...Footer.propTypes, */

  /** will determine the action buttons size*/
  actionsSize: Button.propTypes.size,

  /** a text for the primary action button */
  primaryButtonText: PropTypes.string,

  /** a callback for when the primary action button is clicked */
  primaryButtonOnClick: PropTypes.func,

  /** Passed to the primary action button as props without any filter / mutation */
  primaryButtonProps: function () {
    var _Button$propTypes = Button.propTypes,
        dataHook = _Button$propTypes.dataHook,
        buttonProps = _objectWithoutProperties(_Button$propTypes, _excluded2);

    return PropTypes.shape(buttonProps);
  }(),

  /** Allows to pass all common tooltip props. Check `<Tooltip/>` for a full API. */
  primaryButtonTooltipProps: PropTypes.shape(_objectSpread({
    content: PropTypes.string
  }, TooltipCommonProps)),

  /** a text for the secondary action button */
  secondaryButtonText: PropTypes.string,

  /** callback for when the secondary action button is clicked */
  secondaryButtonOnClick: PropTypes.func,

  /** Passed to the secondary button as props without any filter / mutation */
  secondaryButtonProps: function () {
    var _Button$propTypes2 = Button.propTypes,
        dataHook = _Button$propTypes2.dataHook,
        buttonProps = _objectWithoutProperties(_Button$propTypes2, _excluded3);

    return PropTypes.shape(buttonProps);
  }(),

  /** side actions node, to be rendered as the first element on the same row as the action buttons */
  sideActions: PropTypes.node,

  /** ...Footnote.propTypes, */

  /** a footnote node, to be rendered at the very bottom of the modal */
  footnote: PropTypes.node,

  /** CustomModalLayout */

  /** When set to true, there will be no content padding */
  removeContentPadding: PropTypes.bool,

  /** Modal desired width */
  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

  /** Modal desired height */
  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

  /** Modal desired max-height */
  maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

  /** whether to show divider above content (default: 'auto')
   * when set to 'auto' - shows top divider when scroll position is greater than 0
   * when set to true - top divider is always shown
   * when set to false - top divider is never shown
   */
  showHeaderDivider: PropTypes.oneOf(['auto', true, false]),

  /** whether to show divider below content (default: 'auto')
   * when set to 'auto' - shows bottom divider until content is scrolled to the boottom
   * when set to true - bottom divider is always shown
   * when set to false - bottom divider is never shown
   */
  showFooterDivider: PropTypes.oneOf(['auto', true, false]),

  /**
   * Hides dividers that shows above/below the content
   * @deprecated
   */
  hideContentDividers: PropTypes.bool,

  /** Inline style */
  style: PropTypes.object,

  /**
   * Sets content overflow value
   * @default 'auto'
   */
  overflowY: PropTypes.string
};
CustomModalLayout.defaultProps = {
  theme: 'standard',
  actionsSize: 'small',
  removeContentPadding: false,
  showHeaderDivider: 'auto',
  showFooterDivider: 'auto',
  hideContentDividers: false,
  overflowY: 'auto',
  style: {}
};
export default CustomModalLayout;