cinnecta-ui/lib/components/ComboButton.js

"use strict";

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

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

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

var _Dropdown = _interopRequireDefault(require("./Dropdown"));

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

var _Loader = _interopRequireDefault(require("./Loader"));

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

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

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

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 propTypes = _objectSpread({}, _reactWithStyles.withStylesPropTypes, {
  mainOption: _propTypes.default.object,
  disabled: _propTypes.default.bool,
  loading: _propTypes.default.bool,
  options: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
  children: _propTypes.default.any,
  onClick: _propTypes.default.func,
  fullWidth: _propTypes.default.bool,
  block: _propTypes.default.bool,
  compact: _propTypes.default.bool,
  inverse: _propTypes.default.bool,
  mono: _propTypes.default.bool,
  noSpacing: _propTypes.default.bool,
  shimmer: _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,
  closeOnSelect: _propTypes.default.bool
});

var defaultProps = {
  mainOption: {
    label: '',
    value: null
  },
  options: []
};

var ComboButton = function ComboButton(_ref) {
  var styles = _ref.styles,
      css = _ref.css,
      theme = _ref.theme,
      mainOption = _ref.mainOption,
      disabled = _ref.disabled,
      loading = _ref.loading,
      options = _ref.options,
      className = _ref.className,
      children = _ref.children,
      _onClick = _ref.onClick,
      fullWidth = _ref.fullWidth,
      block = _ref.block,
      compact = _ref.compact,
      inverse = _ref.inverse,
      mono = _ref.mono,
      noSpacing = _ref.noSpacing,
      shimmer = _ref.shimmer,
      soft = _ref.soft,
      primary = _ref.primary,
      rectangular = _ref.rectangular,
      secondary = _ref.secondary,
      transparent = _ref.transparent,
      closeOnSelect = _ref.closeOnSelect,
      props = _objectWithoutProperties(_ref, ["styles", "css", "theme", "mainOption", "disabled", "loading", "options", "className", "children", "onClick", "fullWidth", "block", "compact", "inverse", "mono", "noSpacing", "shimmer", "soft", "primary", "rectangular", "secondary", "transparent", "closeOnSelect"]);

  return _react.default.createElement("div", _extends({}, props, css(styles.comboButton, loading && styles.comboButton_loading, disabled && styles.comboButton_disabled, fullWidth && styles.comboButton_fullWidth, block && styles.comboButton_block, inverse && styles.comboButton_inverse, mono && styles.comboButton_mono, noSpacing && styles.comboButton_noSpacing, shimmer && styles.comboButton_soft, soft && styles.comboButton_soft, primary && styles.comboButton_primary, rectangular && styles.comboButton_rectangular, secondary && styles.comboButton_secondary, transparent && styles.comboButton_transparent)), _react.default.createElement("div", css(styles.comboButton__content, loading && styles.comboButton__content_loading, shimmer && styles.comboButton__content_shimmer, rectangular && styles.comboButton__content_rectangular), _react.default.createElement(_Button.default, {
    noSpacing: true,
    short: true,
    fullWidth: block || fullWidth,
    compact: compact,
    mono: mono,
    soft: soft,
    primary: primary,
    rectangular: rectangular,
    secondary: secondary,
    transparent: transparent,
    inverse: inverse,
    noBorder: mono || secondary || inverse,
    onClick: function onClick() {
      return _onClick && _onClick(mainOption.value);
    }
  }, mainOption.label), _react.default.createElement("div", css(styles.comboButton__separator, (inverse || transparent || soft) && styles.comboButton__separator_dark, mono && styles.comboButton__separator_mono, secondary && styles.comboButton__separator_secondary)), _react.default.createElement(_Dropdown.default, {
    combo: true,
    button: true,
    noSpacing: true,
    short: true,
    compact: true,
    mono: mono,
    soft: soft,
    primary: primary,
    rectangular: rectangular,
    secondary: secondary,
    transparent: transparent,
    inverse: inverse,
    noBorder: mono || secondary || inverse,
    onSelectOption: function onSelectOption(option) {
      return _onClick && _onClick(option.value);
    },
    options: options,
    closeOnSelect: closeOnSelect
  }, children)), loading && _react.default.createElement("div", css(styles.comboButton__loader, shimmer && styles.comboButton__loader_shimmer, rectangular && styles.comboButton__content_rectangular), !shimmer && _react.default.createElement(_Loader.default, {
    small: true,
    primary: inverse && soft,
    secondary: secondary,
    mono: mono
  })));
};

ComboButton.propTypes = propTypes;
ComboButton.defaultProps = defaultProps;
var ComboButtonWithStyles = (0, _withStyles.withStyles)(function (_ref2) {
  var color = _ref2.color,
      units = _ref2.units,
      animation = _ref2.animation,
      radius = _ref2.radius;
  return {
    comboButton: {
      height: units(2.5),
      borderRadius: radius,
      display: 'inline-block',
      position: 'relative',
      backgroundColor: color.secondary,
      paddingTop: units(0.25),
      paddingRight: units(0.125),
      paddingBottom: units(0.25),
      paddingLeft: units(0.125),
      marginTop: 0,
      marginRight: units(0.125),
      marginBottom: units(0.5),
      marginLeft: units(0.125),
      boxSizing: 'border-box'
    },
    comboButton_loading: {
      opacity: 1
    },
    comboButton__content: {
      display: 'flex',
      alignItems: 'center',
      overflow: 'hidden',
      borderRadius: radius
    },
    comboButton__content_shimmer: {
      minWidth: units(6)
    },
    comboButton__content_loading: {
      opacity: 0
    },
    comboButton__content_rectangular: {
      borderRadius: 0
    },
    comboButton__separator: {
      width: 1,
      height: units(1.5),
      marginRight: units(0.125),
      marginLeft: units(0.125),
      backgroundColor: color.fogStrong
    },
    comboButton__separator_dark: {
      backgroundColor: color.shadow
    },
    comboButton__separator_mono: {
      backgroundColor: color.black
    },
    comboButton__separator_secondary: {
      backgroundColor: color.secondary
    },
    comboButton__loader: {
      position: 'absolute',
      top: 0,
      right: 0,
      bottom: 0,
      left: 0,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      borderRadius: radius
    },
    comboButton__loader_shimmer: {
      backgroundColor: color.shimmer.from,
      animationDirection: 'alternate',
      animationDuration: '1s',
      animationFillMode: 'forwards',
      animationIterationCount: 'infinite',
      animationName: animation.shimmer,
      animationTimingFunction: 'ease-in-out'
    },
    comboButton_disabled: {
      opacity: .5,
      pointerEvents: 'none'
    },
    comboButton_soft: {
      backgroundColor: color.blueGrayLighter
    },
    comboButton_fullWidth: {
      width: '100%'
    },
    comboButton_block: {
      width: '100%',
      textAlign: 'left',
      marginRight: 0,
      marginLeft: 0
    },
    comboButton_inverse: {
      backgroundColor: color.white
    },
    comboButton_mono: {
      backgroundColor: color.transparent,
      borderColor: color.black,
      borderWidth: 1,
      borderStyle: 'solid'
    },
    comboButton_noSpacing: {
      marginBottom: 0
    },
    comboButton_primary: {
      backgroundColor: color.primary
    },
    comboButton_secondary: {
      backgroundColor: color.transparent,
      borderColor: color.secondary,
      borderWidth: 1,
      borderStyle: 'solid'
    },
    comboButton_transparent: {
      backgroundColor: color.transparent
    },
    comboButton_rectangular: {
      borderRadius: 0
    }
  };
})(ComboButton);
var _default = ComboButtonWithStyles;
exports.default = _default;