react-cm-ui/core/surfaces/modal/modalActions.js

React UI for Healthy Church

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _lodash = require("lodash");

var _classnames = _interopRequireDefault(require("classnames"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _react = _interopRequireDefault(require("react"));

var _constants = require("../../global/constants");

var _makeStyles = _interopRequireDefault(require("../../styles/makeStyles"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var propTypes = {
  /**
   * Defines the `align-items` style property.
   * It's applied for all screen sizes.
   */
  alignItems: _propTypes["default"].oneOf(['baseline', 'center', 'flex-end', 'flex-start']),

  /**
   * The content of the ModalActions
   */
  children: _propTypes["default"].node,

  /**
   * Override or extend the styles applied to ModalActions.
   */
  classes: _propTypes["default"].shape({
    margin: _propTypes["default"].string,
    root: _propTypes["default"].string
  }),

  /**
   * Assign additional class names to ModalActions.
   */
  className: _propTypes["default"].string,

  /**
   * Defines the `flex-direction` style property.
   * It is applied for all screen sizes.
   */
  direction: _propTypes["default"].oneOf(['column-reverse', 'column', 'row-reverse', 'row']),

  /**
   * The `id` of the ModalActions.
   */
  id: _propTypes["default"].string
};
var defaultProps = {
  alignItems: 'flex-start',
  children: null,
  classes: null,
  className: null,
  direction: 'row',
  id: null
};
var useStyles = (0, _makeStyles["default"])(function (_ref) {
  var spacing = _ref.spacing;
  return {
    'alignItems-center': {
      alignItems: 'center'
    },
    'alignItems-flexStart': {
      alignItems: 'flex-start'
    },
    'alignItems-flexEnd': {
      alignItems: 'flex-end'
    },
    'alignItems-baseline': {
      alignItems: 'baseline'
    },
    'direction-column': {
      flexDirection: 'column'
    },
    'direction-columnReverse': {
      flexDirection: 'column-reverse'
    },
    'direction-rowReverse': {
      flexDirection: 'row-reverse'
    },
    'direction-row': {
      flexDirection: 'row'
    },
    margin: {},
    root: {
      display: 'flex',
      margin: [[spacing(5), 0, 0]]
    }
  };
});

function ModalActions(props) {
  var alignItems = props.alignItems,
      children = props.children,
      className = props.className,
      direction = props.direction,
      id = props.id;
  var classes = useStyles(props);
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _classnames["default"])(_constants.BEM_MODAL_ACTIONS, classes.root, className, classes.margin, classes["alignItems-".concat((0, _lodash.camelCase)(alignItems))], classes["direction-".concat((0, _lodash.camelCase)(direction))]),
    id: id
  }, children);
}

ModalActions.propTypes = propTypes;
ModalActions.defaultProps = defaultProps;
var _default = ModalActions;
exports["default"] = _default;