react-cm-ui/core/surfaces/accordion/accordion.js

React UI for Healthy Church

"use strict";

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

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

var _lodash = _interopRequireDefault(require("lodash"));

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

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

var _reactDom = _interopRequireDefault(require("react-dom"));

var _domUtils = _interopRequireDefault(require("../../utils/domUtils"));

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

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 _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 AccordionItem = /*#__PURE__*/function (_React$Component) {
  _inherits(AccordionItem, _React$Component);

  var _super = _createSuper(AccordionItem);

  function AccordionItem(props) {
    var _this;

    _classCallCheck(this, AccordionItem);

    _this = _super.call(this, props);
    _this.state = {
      isSelected: props.isSelected
    };
    _this._onAnimationComplete = _this._onAnimationComplete.bind(_assertThisInitialized(_this));
    _this._onClick = _this._onClick.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(AccordionItem, [{
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      if (this.props.isSelected !== prevProps.isSelected) {
        this.setState({
          isSelected: this.props.isSelected
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          children = _this$props.children,
          className = _this$props.className,
          style = _this$props.style,
          subAccordion = _this$props.subAccordion,
          summary = _this$props.summary;
      var isSelected = this.state.isSelected;
      var containerClasses = (0, _classnames["default"])('accordion-item', className, {
        'accordion-item-is-active': isSelected,
        'accordion-item-sub-accordion': subAccordion,
        'accordion-item-no-summary': summary === false
      });
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: containerClasses,
        onClick: this._onClick,
        style: style
      }, children);
    }
  }, {
    key: "_animationProps",
    value: function _animationProps(el) {
      var a;
      var animations = {
        animation: 'animationend',
        OAnimation: 'oAnimationEnd',
        MozAnimation: 'animationend',
        WebkitAnimation: 'webkitAnimationEnd'
      };

      for (a in animations) {
        if (el.style[a] !== undefined) {
          return animations[a];
        }
      }
    }
  }, {
    key: "_onAnimationComplete",
    value: function _onAnimationComplete() {
      var itemElement = _reactDom["default"].findDOMNode(this);

      var animationEvent = this._animationProps(itemElement);

      itemElement.removeEventListener(animationEvent, this._onAnimationComplete);
      var _this$props2 = this.props,
          scrollContainer = _this$props2.scrollContainer,
          scrollContainerMarginHeight = _this$props2.scrollContainerMarginHeight;
      var scrollContainerEl = _lodash["default"].isString(scrollContainer) ? _reactDom["default"].findDOMNode(document.querySelector(scrollContainer)) : _lodash["default"].isObject(scrollContainer) ? scrollContainer : null;
      var containerHeight = scrollContainerEl ? scrollContainerEl.offsetHeight - (scrollContainerMarginHeight || 0) : window.innerHeight;

      var scrollPosition = _domUtils["default"].scrollPos(scrollContainerEl);

      var containerBottom = containerHeight + scrollPosition;
      var itemElHeight = itemElement.offsetHeight;
      var itemElTopYPosition = itemElement.offsetTop;
      var itemElBottomYPosition = itemElTopYPosition + itemElHeight;
      var belowFold = itemElBottomYPosition - (containerHeight + scrollPosition);

      if (containerBottom < itemElBottomYPosition) {
        _domUtils["default"].scrollTo(scrollPosition + belowFold, null, scrollContainerEl);
      }
    }
  }, {
    key: "_onClick",
    value: function _onClick() {
      var isSelected = this.state.isSelected;

      if (!isSelected) {
        var itemElement = _reactDom["default"].findDOMNode(this);

        var animationEvent = this._animationProps(itemElement);

        itemElement.addEventListener(animationEvent, this._onAnimationComplete);
      }
    }
  }]);

  return AccordionItem;
}(_react["default"].Component);

AccordionItem.propTypes = {
  className: _propTypes["default"].string,
  isSelected: _propTypes["default"].bool,
  scrollContainer: _propTypes["default"].oneOfType([_propTypes["default"].shape({}), _propTypes["default"].string]),
  scrollContainerMarginHeight: _propTypes["default"].number,
  style: _propTypes["default"].shape({}),
  subAccordion: _propTypes["default"].bool,
  summary: _propTypes["default"].bool
};

var AccordionSummary = /*#__PURE__*/function (_React$Component2) {
  _inherits(AccordionSummary, _React$Component2);

  var _super2 = _createSuper(AccordionSummary);

  function AccordionSummary() {
    var _this2;

    _classCallCheck(this, AccordionSummary);

    _this2 = _super2.call(this);
    _this2._onClick = _this2._onClick.bind(_assertThisInitialized(_this2));
    return _this2;
  }

  _createClass(AccordionSummary, [{
    key: "render",
    value: function render() {
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "accordion-item-summary",
        onClick: this._onClick
      }, this.props.children);
    }
  }, {
    key: "_onClick",
    value: function _onClick() {
      this.props.onClick();
    }
  }]);

  return AccordionSummary;
}(_react["default"].Component);

AccordionSummary.propTypes = {
  onClick: _propTypes["default"].func
};

var AccordionCheckbox = /*#__PURE__*/function (_React$Component3) {
  _inherits(AccordionCheckbox, _React$Component3);

  var _super3 = _createSuper(AccordionCheckbox);

  function AccordionCheckbox() {
    _classCallCheck(this, AccordionCheckbox);

    return _super3.apply(this, arguments);
  }

  _createClass(AccordionCheckbox, [{
    key: "render",
    value: function render() {
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "accordion-checkbox",
        style: {
          flex: '0 1 auto',
          minWidth: '44px'
        }
      }, this.props.children);
    }
  }]);

  return AccordionCheckbox;
}(_react["default"].Component);

AccordionCheckbox.propTypes = {
  className: _propTypes["default"].string,
  style: _propTypes["default"].shape({})
};

var AccordionContent = /*#__PURE__*/function (_React$Component4) {
  _inherits(AccordionContent, _React$Component4);

  var _super4 = _createSuper(AccordionContent);

  function AccordionContent() {
    _classCallCheck(this, AccordionContent);

    return _super4.apply(this, arguments);
  }

  _createClass(AccordionContent, [{
    key: "render",
    value: function render() {
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "accordion-item-content",
        style: this.props.style
      }, this.props.children);
    }
  }]);

  return AccordionContent;
}(_react["default"].Component);

AccordionContent.propTypes = {
  style: _propTypes["default"].shape({})
};

var Accordion = /*#__PURE__*/function (_React$Component5) {
  _inherits(Accordion, _React$Component5);

  var _super5 = _createSuper(Accordion);

  function Accordion(props) {
    var _this3;

    _classCallCheck(this, Accordion);

    _this3 = _super5.call(this, props);
    var newSelected;

    if (props.exclusive === false) {
      newSelected = props.selected || [];
    } else {
      newSelected = _lodash["default"].isNil(props.selected) ? -1 : props.selected;
    }

    _this3.state = {
      selected: newSelected
    };
    return _this3;
  }

  _createClass(Accordion, [{
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps, prevState) {
      var prevSelectedProp = prevProps.selected;
      var _this$props3 = this.props,
          exclusive = _this$props3.exclusive,
          nextSelectedProp = _this$props3.selected;

      if (!_lodash["default"].isEqual(prevSelectedProp, nextSelectedProp)) {
        var nextSelectedState;

        if (exclusive === false) {
          nextSelectedState = nextSelectedProp || [];
        } else {
          nextSelectedState = _lodash["default"].isNil(nextSelectedProp) ? -1 : nextSelectedProp;
        }

        this.setState({
          selected: nextSelectedState
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this4 = this;

      var _this$props4 = this.props,
          basic = _this$props4.basic,
          children = _this$props4.children,
          className = _this$props4.className,
          exclusive = _this$props4.exclusive,
          id = _this$props4.id,
          inverse = _this$props4.inverse,
          scrollContainer = _this$props4.scrollContainer,
          scrollContainerMarginHeight = _this$props4.scrollContainerMarginHeight,
          style = _this$props4.style;
      var selected = this.state.selected;
      var containerClasses = (0, _classnames["default"])('ui', 'accordion', className, {
        'accordion-basic': basic,
        'accordion-inverse': inverse,
        'accordion-inclusive': exclusive === false
      });
      var convertedChildren = _lodash["default"].isArray(children) ? children : [children];

      var items = _lodash["default"].map(convertedChildren, function (child, index) {
        var _child$props = child.props,
            children = _child$props.children,
            onClick = _child$props.onClick,
            style = _child$props.style,
            subTitle = _child$props.subTitle,
            subAccordion = _child$props.subAccordion,
            summary = _child$props.summary,
            title = _child$props.title;
        var isSelected = exclusive === false ? _lodash["default"].includes(selected, index) : selected === index;

        if (title) {
          return /*#__PURE__*/_react["default"].createElement(AccordionItem, {
            isSelected: isSelected,
            key: "accordion-item-".concat(index),
            scrollContainer: scrollContainer,
            scrollContainerMarginHeight: scrollContainerMarginHeight,
            style: style,
            subAccordion: subAccordion,
            summary: summary
          }, /*#__PURE__*/_react["default"].createElement("div", {
            className: "accordion-item-title",
            onClick: _this4._onSummaryClick.bind(_this4, index, onClick)
          }, /*#__PURE__*/_react["default"].createElement("span", {
            className: "copy"
          }, title, subTitle ? /*#__PURE__*/_react["default"].createElement("span", {
            className: "padding-left"
          }, subTitle) : null), /*#__PURE__*/_react["default"].createElement(_icon["default"], {
            compact: true,
            inverse: inverse,
            rotate: isSelected ? 135 : 0,
            title: isSelected ? 'Collapse' : 'Expand',
            type: "plus"
          })), /*#__PURE__*/_react["default"].createElement(AccordionContent, null, children));
        }

        if (summary === false) {
          return /*#__PURE__*/_react["default"].createElement(AccordionItem, {
            isSelected: isSelected,
            key: "accordion-item-".concat(index),
            scrollContainer: scrollContainer,
            scrollContainerMarginHeight: scrollContainerMarginHeight,
            style: style,
            subAccordion: subAccordion,
            summary: summary
          }, /*#__PURE__*/_react["default"].createElement(AccordionContent, null, children));
        }

        return /*#__PURE__*/_react["default"].createElement(AccordionItem, {
          isSelected: isSelected,
          key: "accordion-item-".concat(index),
          scrollContainer: scrollContainer,
          scrollContainerMarginHeight: scrollContainerMarginHeight,
          style: style,
          subAccordion: subAccordion,
          summary: summary
        }, _react["default"].Children.map(children, function (c, i) {
          if (i === 0) {
            return /*#__PURE__*/_react["default"].createElement(AccordionSummary, {
              onClick: _this4._onSummaryClick.bind(_this4, index, c.props.onClick)
            }, c.props.children);
          }

          return c;
        }));
      });

      return /*#__PURE__*/_react["default"].createElement("div", {
        className: containerClasses,
        id: id,
        style: style
      }, items);
    }
  }, {
    key: "_onSummaryClick",
    value: function _onSummaryClick(index, onClick) {
      var exclusive = this.props.exclusive;
      var selected = this.state.selected;
      var newSelected;

      if (exclusive === false) {
        var isSelected = _lodash["default"].includes(selected, index);

        newSelected = isSelected ? _lodash["default"].pull(selected, index) : _lodash["default"].union(selected, [index]);
      } else {
        newSelected = selected === index ? -1 : index;
      }

      if (_lodash["default"].isFunction(onClick)) {
        onClick(newSelected);
      }

      this.setState({
        selected: newSelected
      });
    }
  }]);

  return Accordion;
}(_react["default"].Component);

Accordion.Content = AccordionContent;
Accordion.Checkbox = AccordionCheckbox;
Accordion.Item = AccordionItem;
Accordion.Summary = AccordionSummary;
Accordion.propTypes = {
  basic: _propTypes["default"].bool,
  className: _propTypes["default"].string,
  exclusive: _propTypes["default"].bool,
  id: _propTypes["default"].string,
  inverse: _propTypes["default"].bool,
  scrollContainer: _propTypes["default"].oneOfType([_propTypes["default"].shape({}), _propTypes["default"].string]),
  scrollContainerMarginHeight: _propTypes["default"].number,
  selected: _propTypes["default"].oneOfType([_propTypes["default"].array, _propTypes["default"].number]),
  style: _propTypes["default"].shape({})
};
var _default = Accordion;
exports["default"] = _default;