react-cm-ui/core/surfaces/actionBar/actionBar.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 _gridConstants = require("../../layout/grid/gridConstants");

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

var _actionBarActionsButton = _interopRequireDefault(require("./actionBarActionsButton"));

var _actionBarSearch = _interopRequireDefault(require("./actionBarSearch"));

var _button = _interopRequireDefault(require("../../inputs/button"));

var _dropdownButton = _interopRequireDefault(require("../../inputs/dropdownButton"));

var _grid = _interopRequireDefault(require("../../layout/grid"));

var _icon = _interopRequireDefault(require("../../dataDisplay/icon"));

var _list = _interopRequireDefault(require("../../dataDisplay/list"));

var _utils = _interopRequireDefault(require("../../utils/utils"));

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

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

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; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

var searchPropTypes = _propTypes["default"].shape({
  autoFocus: _propTypes["default"].bool,
  onFocus: _propTypes["default"].func
});

var propTypes = {
  children: _propTypes["default"].element,
  className: _propTypes["default"].string,
  columns: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    button: _propTypes["default"].shape({}),
    dropdownButton: _propTypes["default"].shape({
      className: _propTypes["default"].string,
      color: _propTypes["default"].oneOf(_utils["default"].colorEnums()),
      disable: _propTypes["default"].bool,
      iconType: _propTypes["default"].oneOf(['chevron-down', 'plus']),
      id: _propTypes["default"].string,
      onClick: _propTypes["default"].func,
      style: _propTypes["default"].shape({}),
      title: _propTypes["default"].string
    }),
    jsx: _propTypes["default"].node,
    lg: _propTypes["default"].oneOf(_gridConstants.GRID_SIZES),
    list: _propTypes["default"].arrayOf(_propTypes["default"].shape({
      actionsButton: _propTypes["default"].shape({}),
      divide: _propTypes["default"].bool,
      jsx: _propTypes["default"].node,
      iconBack: _propTypes["default"].shape({}),
      iconFilter: _propTypes["default"].shape({}),
      iconGrid: _propTypes["default"].shape({}),
      iconSearch: searchPropTypes,
      iconTable: _propTypes["default"].shape({})
    })),
    md: _propTypes["default"].oneOf(_gridConstants.GRID_SIZES),
    search: searchPropTypes,
    sm: _propTypes["default"].oneOf(_gridConstants.GRID_SIZES),
    xl: _propTypes["default"].oneOf(_gridConstants.GRID_SIZES)
  })),

  /**
   * Used for DOM testing. https://testing-library.com/docs/queries/bytestid/
   */
  dataTestId: _propTypes["default"].string,
  id: _propTypes["default"].string,

  /**
   * Defines the `justify-content` style property.
   * It is applied for all screen sizes.
   */
  justifyContent: _propTypes["default"].oneOf(['center', 'flex-end', 'flex-start', 'space-around', 'space-between', 'space-evenly']),
  moduleType: _propTypes["default"].oneOf(['drawer', 'page']),
  style: _propTypes["default"].shape({}) // eslint-disable-line react/forbid-prop-types

};
var defaultProps = {
  children: undefined,
  className: undefined,
  columns: [],
  dataTestId: "".concat(_constants.UI_CLASS_NAME, "-action_bar"),
  id: undefined,
  justifyContent: 'flex-start',
  moduleType: undefined,
  style: {}
};
var HAS_DRAWER_ACTION_BAR_CLASS_NAME = 'drawer-has_action_bar';
var HAS_PAGE_ACTION_BAR_CLASS_NAME = 'page-has_action_bar';
var HAS_DRAWER_CONTENT_ACTION_BAR_MOBILE_SEARCH_VISIBLE_CLASS_NAME = 'drawer--content-has_action_bar_mobile_search_visible';
var HAS_PAGE_CONTAINER_ACTION_BAR_MOBILE_SEARCH_VISIBLE_CLASS_NAME = 'page--container-has_action_bar_mobile_search_visible';

var ActionBar = /*#__PURE__*/function (_React$PureComponent) {
  _inherits(ActionBar, _React$PureComponent);

  var _super = _createSuper(ActionBar);

  function ActionBar() {
    var _this;

    _classCallCheck(this, ActionBar);

    _this = _super.call(this);
    _this.state = {
      isMobileSearchVisible: false
    };
    _this.onMobileSearchIconToggle = _this.onMobileSearchIconToggle.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(ActionBar, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var moduleType = this.props.moduleType;

      if (this.actionBarRef) {
        var closestDrawer = this.actionBarRef.closest('.ui.drawer');

        if (moduleType === 'drawer' && closestDrawer) {
          closestDrawer.classList.add(HAS_DRAWER_ACTION_BAR_CLASS_NAME);
        }

        var closestPage = this.actionBarRef.closest('.ui.page');

        if (moduleType === 'page' && closestPage) {
          closestPage.classList.add(HAS_PAGE_ACTION_BAR_CLASS_NAME);
        }

        this.setMobileSearchAutoFocus();
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      var moduleType = this.props.moduleType;

      if (this.actionBarRef) {
        var closestDrawer = this.actionBarRef.closest('.ui.drawer');

        if (moduleType === 'drawer' && closestDrawer) {
          closestDrawer.classList.remove(HAS_DRAWER_ACTION_BAR_CLASS_NAME);
        }
      }
    }
  }, {
    key: "onMobileSearchIconToggle",
    value: function onMobileSearchIconToggle() {
      var _this2 = this;

      this.setState(function (prevState) {
        return {
          isMobileSearchVisible: !prevState.isMobileSearchVisible
        };
      }, function () {
        var moduleType = _this2.props.moduleType;
        var isMobileSearchVisible = _this2.state.isMobileSearchVisible;

        if (_this2.actionBarRef) {
          var closestDrawer = _this2.actionBarRef.closest('.ui.drawer');

          if (moduleType === 'drawer' && closestDrawer) {
            if (isMobileSearchVisible) {
              closestDrawer.querySelector('.ui.drawer--content').classList.add(HAS_DRAWER_CONTENT_ACTION_BAR_MOBILE_SEARCH_VISIBLE_CLASS_NAME);
            } else {
              closestDrawer.querySelector('.ui.drawer--content').classList.remove(HAS_DRAWER_CONTENT_ACTION_BAR_MOBILE_SEARCH_VISIBLE_CLASS_NAME);
            }
          }

          var closestPage = _this2.actionBarRef.closest('.ui.page');

          if (moduleType === 'page' && closestPage) {
            if (isMobileSearchVisible) {
              closestPage.querySelector('.ui.page--container').classList.add(HAS_PAGE_CONTAINER_ACTION_BAR_MOBILE_SEARCH_VISIBLE_CLASS_NAME);
            } else {
              closestPage.querySelector('.ui.page--container').classList.remove(HAS_PAGE_CONTAINER_ACTION_BAR_MOBILE_SEARCH_VISIBLE_CLASS_NAME);
            }
          }
        }
      });
    }
  }, {
    key: "setMobileSearchAutoFocus",
    value: function setMobileSearchAutoFocus() {
      var _this3 = this;

      var columns = this.props.columns;
      var hasEventBeenCalled = false;
      (0, _lodash.forEach)(columns, function (c) {
        if (c.list) {
          (0, _lodash.forEach)(c.list, function (l) {
            var _l$iconSearch;

            if (!hasEventBeenCalled && ((_l$iconSearch = l.iconSearch) === null || _l$iconSearch === void 0 ? void 0 : _l$iconSearch.autoFocus)) {
              _this3.onMobileSearchIconToggle();

              hasEventBeenCalled = true;
            }
          });
        }
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this4 = this;

      var _this$props = this.props,
          children = _this$props.children,
          className = _this$props.className,
          columns = _this$props.columns,
          dataTestId = _this$props.dataTestId,
          id = _this$props.id,
          justifyContent = _this$props.justifyContent,
          moduleType = _this$props.moduleType,
          style = _this$props.style;
      var isMobileSearchVisible = this.state.isMobileSearchVisible;
      var containerClasses = (0, _classnames["default"])('ui', "".concat(moduleType, "--action_bar"), 'action_bar', className);
      var searchDataForMobile = null;
      var gridColumnKeyNum = 1;
      var gridColumnListItemKeyNum = 1;
      return /*#__PURE__*/_react["default"].createElement("header", {
        className: containerClasses,
        "data-testid": dataTestId,
        id: id,
        ref: function ref(_ref) {
          _this4.actionBarRef = _ref;
        },
        style: style
      }, /*#__PURE__*/_react["default"].createElement("div", {
        style: {
          width: '100%'
        }
      }, !(0, _lodash.isEmpty)(columns) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_grid["default"], {
        alignItems: "center",
        className: "action_bar--grid",
        flexWrap: "nowrap",
        justifyContent: justifyContent,
        spacing: 2
      }, (0, _lodash.map)(columns, function (column) {
        var button = column.button,
            dropdownButton = column.dropdownButton,
            columns = column.columns,
            jsx = column.jsx,
            search = column.search;
        var list = column.list;
        var gridColumnClasses = (0, _classnames["default"])('action_bar--grid_column', column.className);
        var gridColumnKey = "action_bar--grid_column-".concat(gridColumnKeyNum++); // eslint-disable-line no-plusplus

        if (columns) {
          console.warn('ActionsBar\'s columns.columns is deprecated. Please use columns.list instead.'); // eslint-disable-line no-console

          list = _toConsumableArray(columns);
        }

        if (!button && !dropdownButton && !jsx && !list && !search) {
          console.warn( // eslint-disable-line no-console
          "".concat('<Page.ActionsBar>\'s column object must have one of the ' + 'following properties: button, jsx, or list.' + 'Please check this column object ').concat(JSON.stringify(column)));
          return false;
        }

        var dropdownButtonOptionKeyNum = 1;
        return /*#__PURE__*/_react["default"].createElement(_grid["default"].Column, {
          className: gridColumnClasses,
          key: gridColumnKey,
          lg: column.lg,
          md: column.md,
          sm: column.sm
          /**
           * NOTE: Remove `flexBasis`, `flexGrow`, `flexShrink`,
           * and `width` when we finally remove the deprecated
           * style prop.
           */
          ,
          style: _objectSpread({
            flexBasis: column.flexBasis || null,
            flexGrow: column.flexGrow || null,
            flexShrink: column.flexShrink || null,
            width: 'auto'
          }, column.style),
          xl: column.xl
        }, button && /*#__PURE__*/_react["default"].createElement(_button["default"], {
          color: button.color,
          designVersion: 1,
          disable: !!button.disable || !!button.disabled,
          icon: button.iconType && !button.label,
          id: button.id,
          onClick: button.onClick,
          style: button.style
        }, button.iconType && /*#__PURE__*/_react["default"].createElement(_icon["default"], {
          type: button.iconType
        }), button.label && /*#__PURE__*/_react["default"].createElement("span", null, button.label)), dropdownButton && /*#__PURE__*/_react["default"].createElement(_dropdownButton["default"], {
          className: dropdownButton.className,
          color: dropdownButton.color,
          designVersion: 1,
          disable: dropdownButton.disable,
          iconType: dropdownButton.iconType,
          id: dropdownButton.id,
          label: dropdownButton.label,
          onClick: dropdownButton.onClick,
          style: dropdownButton.style,
          title: dropdownButton.title
        }, (0, _lodash.map)(dropdownButton.options, function (option) {
          dropdownButtonOptionKeyNum += 1;
          return /*#__PURE__*/_react["default"].createElement(_dropdownButton["default"].Option, {
            className: option.className,
            disable: !!option.disable || !!option.disabled,
            id: option.id,
            key: "action_bar_dropdown_button_option-".concat(dropdownButtonOptionKeyNum),
            label: option.label,
            onClick: option.onClick,
            onKeyDown: option.onKeyDown,
            style: option.style,
            tabIndex: option.tabIndex
          });
        })), (0, _lodash.isArray)(list) && /*#__PURE__*/_react["default"].createElement(_list["default"], {
          className: "action_bar--list",
          horizontal: true
        }, (0, _lodash.map)(list, function (item) {
          var actionsButton = item.actionsButton,
              divide = item.divide,
              listJsx = item.jsx,
              iconBack = item.iconBack,
              iconFilter = item.iconFilter,
              iconGrid = item.iconGrid,
              iconSearch = item.iconSearch,
              iconTable = item.iconTable;
          var listItemClassName = (0, _classnames["default"])('action_bar--list_item', {
            'action_bar--list_item-jsx': listJsx,
            'action_bar--list_item-icon_filter': iconFilter,
            'action_bar--list_item-icon_grid': iconGrid,
            'action_bar--list_item-icon_table': iconTable
          });
          var itemKey = "action_bar--list_item-".concat(gridColumnListItemKeyNum++); // eslint-disable-line no-plusplus

          if (!actionsButton && !listJsx && !iconBack && !iconFilter && !iconGrid && !iconSearch && !iconTable) {
            console.warn( // eslint-disable-line no-console, max-len
            "".concat('<Page.ActionsBar>\'s column.list object must have one of the ' + 'following properties: actionsButton, iconBack, iconFilter, iconGrid, or iconTable.' + 'Please check this column.list object ').concat(JSON.stringify(item)));
            return false;
          }

          if (iconSearch) {
            /* eslint-disable max-len */

            /* eslint-disable react/jsx-props-no-spreading */
            searchDataForMobile = /*#__PURE__*/_react["default"].createElement(_actionBarSearch["default"], _extends({}, iconSearch, {
              isMobileSearch: true,
              isMobileSearchVisible: isMobileSearchVisible,
              type: "mobileSearch"
            }));
            /* eslint-enable react/jsx-props-no-spreading */

            /* eslint-enable max-len */
          }

          return /*#__PURE__*/_react["default"].createElement(_list["default"].Item, {
            className: listItemClassName,
            divide: !!divide,
            key: itemKey,
            style: _objectSpread({
              alignItems: item.alignItems || 'flex-start',
              flexBasis: item.flexBasis || 'auto',
              flexGrow: item.flexGrow || 0,
              flexShrink: item.flexShrink || 0,
              width: 'auto'
            }, list.style)
          }, actionsButton && /*#__PURE__*/_react["default"].createElement(_actionBarActionsButton["default"], {
            className: actionsButton.className,
            iconBackgroundColor: actionsButton.iconBackgroundColor,
            iconBackgroundActiveColor: actionsButton.iconBackgroundActiveColor,
            iconType: actionsButton.iconType,
            id: actionsButton.id,
            isMobileSearchVisible: isMobileSearchVisible,
            header: actionsButton.header,
            moduleType: moduleType,
            options: actionsButton.options,
            style: actionsButton.style
          }), iconBack && /*#__PURE__*/_react["default"].createElement(_icon["default"], {
            color: iconBack.selected ? 'highlight' : null,
            id: iconBack.id,
            onClick: iconBack.onClick,
            title: iconBack.title || 'Back',
            type: "chevron-left"
          }), iconFilter && /*#__PURE__*/_react["default"].createElement(_icon["default"], {
            color: iconFilter.selected || iconFilter.isFiltering ? 'highlight' : null,
            id: iconFilter.id,
            onClick: iconFilter.onClick,
            title: iconFilter.title || 'Filter',
            type: "filter"
          }), iconGrid && /*#__PURE__*/_react["default"].createElement(_icon["default"], {
            color: iconGrid.selected ? 'highlight' : null,
            id: iconGrid.id,
            onClick: iconGrid.onClick,
            title: iconGrid.title || 'Grid View',
            type: "grid"
          }), iconSearch && /*#__PURE__*/_react["default"].createElement(_icon["default"], {
            className: "action_bar--search_icon",
            color: isMobileSearchVisible ? 'highlight' : null,
            id: iconSearch.id,
            onClick: _this4.onMobileSearchIconToggle,
            title: iconSearch.title || 'Search',
            type: "search"
          }), iconTable && /*#__PURE__*/_react["default"].createElement(_icon["default"], {
            color: iconTable.selected ? 'highlight' : null,
            id: iconTable.id,
            onClick: iconTable.onClick,
            title: iconTable.title || 'Table View',
            type: "list"
          }), listJsx);
        })), search && /*#__PURE__*/_react["default"].createElement(_actionBarSearch["default"], {
          autoFocus: search.autoFocus,
          id: search.id,
          onChange: search.onChange,
          onClearClick: search.onClearClick,
          onFocus: search.onFocus,
          onKeyDown: search.onKeyDown,
          placeholder: search.placeholder,
          value: search.value
        }), jsx);
      })), searchDataForMobile), children));
    }
  }]);

  return ActionBar;
}(_react["default"].PureComponent);

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