sc-react-ions/lib/components/Dropdown/Dropdown.js

An open source set of React components that implement Ambassador's Design and UX patterns.

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Dropdown = undefined;

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactClickOutside = require('react-click-outside');

var _reactClickOutside2 = _interopRequireDefault(_reactClickOutside);

var _Button = require('../Button/Button');

var _Button2 = _interopRequireDefault(_Button);

var _StyledDiv = require('../StyledDiv');

var _StyledDiv2 = _interopRequireDefault(_StyledDiv);

var _styles = require('./styles.css');

var _styles2 = _interopRequireDefault(_styles);

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

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

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

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

var Dropdown = exports.Dropdown = function (_React$Component) {
  _inherits(Dropdown, _React$Component);

  function Dropdown(props) {
    _classCallCheck(this, Dropdown);

    var _this = _possibleConstructorReturn(this, (Dropdown.__proto__ || Object.getPrototypeOf(Dropdown)).call(this, props));

    _this.state = {
      isOpened: _this.props.isOpened,
      clickedItem: null
    };

    _this.componentWillReceiveProps = function (nextProps) {
      if (nextProps.isOpened !== _this.state.isOpened) {
        _this.setState({ isOpened: !!nextProps.isOpened });
      }
    };

    _this.componentDidMount = function () {
      _this.getTriggerRect();
    };

    _this.toggleDropdown = function (e) {
      e.preventDefault();

      _this.setState({ isOpened: !_this.state.isOpened }, function () {
        if (typeof _this.props.changeCallback === 'function') {
          _this.props.changeCallback(_this.state.isOpened);
        }
      });
    };

    _this.handleClickOutside = function () {
      if (!_this.state.isOpened) return;

      _this.setState({ isOpened: false, confirmationOverlayOpen: false, clickedItem: null }, function () {
        if (typeof _this.props.changeCallback === 'function') {
          _this.props.changeCallback(_this.state.isOpened);
        }
      });
    };

    _this.listItemCallback = function (item) {
      _this.setState({ isOpened: false, confirmationOverlayOpen: false, clickedItem: null });

      if (typeof item.callback === 'function') {
        item.callback(item.name);
      }
    };

    _this.handleConfirmation = function (confirm, e) {
      // Since the dropdown is contained within the trigger, stop the click event
      // from propagating up (which causes toggleDropdown to be called unnecessarily)
      e.stopPropagation();

      if (confirm) {
        _this.listItemCallback(_this.state.clickedItem);
      } else {
        _this.setState({ confirmationOverlayOpen: false, clickedItem: null });
      }
    };

    _this.handleItemClick = function (item, e) {
      // Since the dropdown is contained within the trigger, stop the click event
      // from propagating up (which causes toggleDropdown to be called unnecessarily)
      e.stopPropagation();

      if (item.callbackConfirmation) {
        _this.setState({ confirmationOverlayOpen: true, clickedItem: item });
      } else {
        _this.listItemCallback(item);
      }
    };

    _this.handleDropdownClick = function (e) {
      e.stopPropagation();
    };

    _this.getTriggerRect = function () {
      _this._triggerRect = _this._trigger && _this._trigger.getBoundingClientRect();
    };

    _this.render = function () {
      var listItems = _this.props.listItems;
      var listItemNodes = listItems instanceof Array ? listItems.map(function (item, index) {
        return _react2.default.createElement(
          'li',
          { key: index, onClick: _this.handleItemClick.bind(_this, item) },
          item.name
        );
      }) : [];

      return _react2.default.createElement(
        _StyledDiv2.default,
        {
          css: (0, _styles2.default)(_extends({}, _this.props, { isOpened: _this.state.isOpened, triggerRect: _this._triggerRect })),
          className: [_this.props.optClass, _this.props.className].join(' ').trim() },
        _react2.default.createElement(
          'span',
          { ref: function ref(c) {
              return _this._trigger = c;
            }, className: 'trigger', onClick: _this.toggleDropdown },
          _this.props.trigger,
          _react2.default.createElement(
            'div',
            { className: 'dropdown-wrapper', onClick: _this.handleDropdownClick.bind(_this) },
            listItemNodes.length > 0 && !_this.state.confirmationOverlayOpen ? _react2.default.createElement(
              'ul',
              { className: 'list-wrapper' },
              listItemNodes
            ) : _this.props.children,
            _this.state.confirmationOverlayOpen && _react2.default.createElement(
              'div',
              { className: 'overlay' },
              _react2.default.createElement(
                'span',
                null,
                'Are you sure?'
              ),
              _react2.default.createElement(
                'div',
                { className: 'button-wrapper' },
                _react2.default.createElement(
                  _Button2.default,
                  { onClick: _this.handleConfirmation.bind(_this, false), optClass: 'danger-alt' },
                  'Cancel'
                ),
                _react2.default.createElement(
                  _Button2.default,
                  { onClick: _this.handleConfirmation.bind(_this, true) },
                  'Yes'
                )
              )
            )
          )
        )
      );
    };

    if (props.optClass && process.env.NODE_ENV !== 'production') {
      console.warn('Dropdown: Use of optClass will be deprecated as of react-ions 6.0.0, please use `className` instead');
    }
    return _this;
  }

  return Dropdown;
}(_react2.default.Component);

Dropdown.defaultProps = {
  isOpened: false
};
Dropdown.propTypes = {
  /**
   * A callback function to be called when dropdown isOpen state changes.
   */
  changeCallback: _propTypes2.default.func,
  /**
   * Whether the dropdown is visible.
   */
  isOpened: _propTypes2.default.bool,
  /**
   * The alignment of the dropdown with respect to the trigger.
   */
  alignment: _propTypes2.default.oneOf(['left', 'right']),
  /**
   * Optional styles to add to the button. (DEPRECATED in react-ions 6.0.0, please use className instead)
   */
  optClass: _propTypes2.default.string,
  /**
   * An element to pass as a target (number, string, node).
   */
  trigger: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string, _propTypes2.default.node]),
  /**
   * Optional array of items used in a dropdown list
   */
  listItems: _propTypes2.default.array,
  /**
   * Optional class to add to the popover.
   */
  className: _propTypes2.default.string
};
Dropdown.defaultProps = {
  alignment: 'left',
  isOpened: false
};
exports.default = (0, _reactClickOutside2.default)(Dropdown);