cinnecta-ui/lib/components/Dropdown.js

"use strict";

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

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

var _reactOutsideClickHandler = _interopRequireDefault(require("react-outside-click-handler"));

var _Transition = _interopRequireDefault(require("react-transition-group/Transition"));

var _Button = _interopRequireDefault(require("./Button"));

var _Icon = _interopRequireDefault(require("./Icon"));

var _withStyles = require("../helpers/withStyles");

var _reactWithStyles = require("react-with-styles");

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

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

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _typeof(obj) { 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 _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 _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 _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

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 _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, 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; }

var dropdownPropTypes = _objectSpread({}, _reactWithStyles.withStylesPropTypes, {
  disabled: _propTypes.default.bool,
  loading: _propTypes.default.bool,
  fullWidth: _propTypes.default.bool,
  block: _propTypes.default.bool,
  combo: _propTypes.default.bool,
  compact: _propTypes.default.bool,
  icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
  inverse: _propTypes.default.bool,
  mono: _propTypes.default.bool,
  noBorder: _propTypes.default.bool,
  noSpacing: _propTypes.default.bool,
  shade: _propTypes.default.bool,
  soft: _propTypes.default.bool,
  primary: _propTypes.default.bool,
  rectangular: _propTypes.default.bool,
  secondary: _propTypes.default.bool,
  short: _propTypes.default.bool,
  transparent: _propTypes.default.bool,
  children: _propTypes.default.node,
  button: _propTypes.default.bool,
  label: _propTypes.default.string,
  only: _propTypes.default.bool,
  relative: _propTypes.default.bool,
  left: _propTypes.default.bool,
  options: _propTypes.default.arrayOf(_propTypes.default.object),
  onSelectOption: _propTypes.default.func,
  closeOnSelect: _propTypes.default.bool
});

var dropdownMenuPropTypes = _objectSpread({}, _reactWithStyles.withStylesPropTypes, {
  children: _propTypes.default.any.isRequired,
  left: _propTypes.default.bool,
  isOpen: _propTypes.default.bool,
  insideAButton: _propTypes.default.bool
});

var dropdownDefaultProps = {
  options: []
};

var Dropdown =
/*#__PURE__*/
function (_Component) {
  _inherits(Dropdown, _Component);

  function Dropdown(props) {
    var _this;

    _classCallCheck(this, Dropdown);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(Dropdown).call(this, props));
    _this.state = {
      isOpen: false,
      closedByOutsideClick: false
    };
    return _this;
  }

  _createClass(Dropdown, [{
    key: "toggleMenu",
    value: function toggleMenu() {
      this.setState(function (_ref) {
        var isOpen = _ref.isOpen,
            closedByOutsideClick = _ref.closedByOutsideClick;
        return closedByOutsideClick && !isOpen ? {
          closedByOutsideClick: false
        } : {
          isOpen: !isOpen
        };
      });
    }
  }, {
    key: "onClickOutsideMenu",
    value: function onClickOutsideMenu() {
      this.setState(function (state) {
        return {
          isOpen: false,
          closedByOutsideClick: state.isOpen
        };
      });
    }
  }, {
    key: "onSelectOption",
    value: function onSelectOption(option) {
      this.props.onSelectOption && this.props.onSelectOption(option);
      this.props.closeOnSelect && this.toggleMenu();
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props = this.props,
          styles = _this$props.styles,
          button = _this$props.button,
          label = _this$props.label,
          children = _this$props.children,
          only = _this$props.only,
          relative = _this$props.relative,
          left = _this$props.left,
          options = _this$props.options,
          disabled = _this$props.disabled,
          loading = _this$props.loading,
          fullWidth = _this$props.fullWidth,
          block = _this$props.block,
          combo = _this$props.combo,
          compact = _this$props.compact,
          icon = _this$props.icon,
          inverse = _this$props.inverse,
          mono = _this$props.mono,
          noBorder = _this$props.noBorder,
          noSpacing = _this$props.noSpacing,
          shade = _this$props.shade,
          soft = _this$props.soft,
          shimmer = _this$props.shimmer,
          primary = _this$props.primary,
          rectangular = _this$props.rectangular,
          secondary = _this$props.secondary,
          short = _this$props.short,
          transparent = _this$props.transparent;
      return _react.default.createElement("div", (0, _withStyles.css)(styles.dropdown__container, button && styles.dropdown__container_asAButton, noSpacing && styles.dropdown__container_noSpacing, !combo && (button || only || relative) && styles.dropdown__container_relative), button ? _react.default.createElement(_Button.default, _extends({
        noSpacing: true,
        disabled: disabled,
        loading: loading,
        shimmer: shimmer,
        fullWidth: fullWidth,
        block: block,
        compact: compact,
        inverse: inverse,
        mono: mono,
        noBorder: noBorder,
        soft: soft,
        primary: primary,
        rectangular: rectangular,
        secondary: secondary,
        shade: shade,
        short: short,
        transparent: transparent,
        type: "button",
        onClick: function onClick() {
          return _this2.toggleMenu();
        }
      }, (0, _withStyles.css)(styles.dropdown, styles.dropdown_asAButton)), label, icon ? typeof label === 'string' ? _react.default.createElement(_Icon.default, {
        name: icon,
        primary: true,
        smaller: true,
        noPadding: true
      }) : icon : _react.default.createElement("svg", _extends({}, (0, _withStyles.css)(styles.dropdown__arrow, label && styles.dropdown__arrow_leftMarged, mono && styles.dropdown__arrow_mono, (soft || inverse || transparent) && styles.dropdown__arrow_primary, secondary && styles.dropdown__arrow_secondary), {
        xmlns: "http://www.w3.org/2000/svg",
        viewBox: "0 0 10.4 6.3"
      }), _react.default.createElement("path", {
        d: "M5.2,6.3A.91.91,0,0,1,4.5,6L.3,1.8A1,1,0,0,1,.3.4,1,1,0,0,1,1.7.4L5.2,3.9,8.7.3a1,1,0,0,1,1.4,0,1,1,0,0,1,0,1.4L5.9,6a4.88,4.88,0,0,1-.7.3Z"
      }))) : _react.default.createElement("button", _extends({
        type: "button",
        onClick: function onClick() {
          return _this2.toggleMenu();
        }
      }, (0, _withStyles.css)(styles.dropdown, only && styles.dropdown_only)), _react.default.createElement("svg", _extends({}, (0, _withStyles.css)(styles.dropdown__arrow, mono && styles.dropdown__arrow_mono, (soft || inverse || transparent || primary) && styles.dropdown__arrow_primary, secondary && styles.dropdown__arrow_secondary), {
        xmlns: "http://www.w3.org/2000/svg",
        viewBox: "0 0 10.4 6.3"
      }), _react.default.createElement("path", {
        d: "M5.2,6.3A.91.91,0,0,1,4.5,6L.3,1.8A1,1,0,0,1,.3.4,1,1,0,0,1,1.7.4L5.2,3.9,8.7.3a1,1,0,0,1,1.4,0,1,1,0,0,1,0,1.4L5.9,6a4.88,4.88,0,0,1-.7.3Z"
      }))), _react.default.createElement(DropdownMenuWithStyles, {
        isOpen: this.state.isOpen,
        onClickOutside: function onClickOutside() {
          return _this2.onClickOutsideMenu();
        },
        left: left,
        insideAButton: button,
        combo: combo
      }, children ? children : _react.default.createElement("ul", (0, _withStyles.css)(styles.dropdown__list), options.map(function (option) {
        return _react.default.createElement("li", _extends({
          key: option.value
        }, (0, _withStyles.css)(styles.dropdown__list__item)), _react.default.createElement(_Button.default, {
          short: true,
          compact: true,
          inverse: true,
          noSpacing: true,
          block: true,
          onClick: function onClick() {
            return _this2.onSelectOption(option);
          }
        }, option.label));
      }))));
    }
  }]);

  return Dropdown;
}(_react.Component);

var DropdownMenu =
/*#__PURE__*/
function (_Component2) {
  _inherits(DropdownMenu, _Component2);

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

    return _possibleConstructorReturn(this, _getPrototypeOf(DropdownMenu).apply(this, arguments));
  }

  _createClass(DropdownMenu, [{
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
          children = _this$props2.children,
          combo = _this$props2.combo,
          left = _this$props2.left,
          isOpen = _this$props2.isOpen,
          insideAButton = _this$props2.insideAButton,
          styles = _this$props2.styles,
          onClickOutside = _this$props2.onClickOutside;
      return _react.default.createElement(_reactOutsideClickHandler.default, {
        onOutsideClick: function onOutsideClick() {
          return onClickOutside();
        }
      }, _react.default.createElement(_Transition.default, {
        in: isOpen,
        timeout: 300,
        mountOnEnter: true,
        unmountOnExit: true,
        onEnter: function onEnter(node) {
          return node.scrollTop;
        }
      }, function (state) {
        return _react.default.createElement("div", (0, _withStyles.css)(styles.dropdownMenu, !combo && insideAButton && styles.dropdownMenu_insideAButton, left ? styles.dropdownMenu_left : styles.dropdownMenu_right, (state === 'entering' || state === 'entered') && styles.dropdownMenu_entering, (state === 'exiting' || state === 'exited') && styles.dropdownMenu_exiting), children);
      }));
    }
  }]);

  return DropdownMenu;
}(_react.Component);

Dropdown.propTypes = dropdownPropTypes;
Dropdown.defaultProps = dropdownDefaultProps;
DropdownMenu.propTypes = dropdownMenuPropTypes;
var DropDownWithStyles = (0, _withStyles.withStyles)(function (_ref2) {
  var color = _ref2.color,
      units = _ref2.units;
  return {
    dropdown: {
      minWidth: units(1.5),
      minHeight: units(1.5),
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      outline: 'none',
      cursor: 'pointer',
      borderWidth: 0,
      background: color.transparent
    },
    dropdown_asAButton: {
      margin: 0
    },
    dropdown_only: {
      minWidth: units(2.5),
      height: units(2.5)
    },
    dropdown__arrow: {
      width: units(.5),
      fill: color.white
    },
    dropdown__arrow_leftMarged: {
      marginLeft: units(.75)
    },
    dropdown__arrow_rightMarged: {
      marginRight: units(.75)
    },
    dropdown__arrow_mono: {
      fill: color.black
    },
    dropdown__arrow_primary: {
      fill: color.primary
    },
    dropdown__arrow_secondary: {
      fill: color.secondary
    },
    dropdown_disabled: {
      opacity: .5,
      pointerEvents: 'none'
    },
    dropdown__container: {
      display: 'inline-block',
      boxSizing: 'border-box'
    },
    dropdown__container_relative: {
      position: 'relative'
    },
    dropdown__container_asAButton: {
      marginTop: 0,
      marginBottom: units(.5)
    },
    dropdown__container_noSpacing: {
      marginBottom: 0
    },
    dropdown__list: {
      margin: 0,
      padding: 0,
      listStyle: 'none'
    },
    dropdown__list__item: {}
  };
})(Dropdown);
var DropdownMenuWithStyles = (0, _withStyles.withStyles)(function (_ref3) {
  var color = _ref3.color,
      units = _ref3.units,
      radius = _ref3.radius;
  return {
    dropdownMenu: {
      position: 'absolute',
      marginTop: units(.25),
      top: '100%',
      backgroundColor: color.white,
      boxShadow: "0 ".concat(units(0.5), " ").concat(units(0.75), " ").concat(units(-0.45), " ").concat(color.shadow),
      padding: units(0.5),
      borderRadius: radius,
      borderWidth: 1,
      borderStyle: 'solid',
      borderColor: color.blueGrayLight,
      zIndex: 50,
      opacity: 0.01,
      transform: 'translate(0, -10%)',
      transition: 'opacity 200ms ease-out, transform 300ms ease-out'
    },
    dropdownMenu_left: {
      left: 0
    },
    dropdownMenu_right: {
      right: 0
    },
    dropdownMenu_insideAButton: {
      marginRight: units(0.125),
      marginLeft: units(0.125)
    },
    //transitions
    dropdownMenu_entering: {
      opacity: 1,
      transform: 'translate(0, 0)',
      transition: 'opacity 200ms ease-out, transform 300ms ease-out'
    },
    dropdownMenu_exiting: {
      opacity: 0.01,
      transform: 'translate(0, -10%)',
      transition: 'opacity 200ms ease-out, transform 300ms ease-out'
    }
  };
}, {
  flushBefore: true
})(DropdownMenu);
var _default = DropDownWithStyles;
exports.default = _default;