cinnecta-ui/lib/components/ButtonGroup.js

"use strict";

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

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

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

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

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

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 _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, {
  disabled: _propTypes.default.bool,
  loading: _propTypes.default.bool,
  fullWidth: _propTypes.default.bool,
  block: _propTypes.default.bool,
  compact: _propTypes.default.bool,
  inverse: _propTypes.default.bool,
  mono: _propTypes.default.bool,
  noSpacing: _propTypes.default.bool,
  soft: _propTypes.default.bool,
  primary: _propTypes.default.bool,
  rectangular: _propTypes.default.bool,
  secondary: _propTypes.default.bool,
  shade: _propTypes.default.bool,
  shimmer: _propTypes.default.bool,
  short: _propTypes.default.bool,
  transparent: _propTypes.default.bool,
  type: _propTypes.default.string,
  noBorder: _propTypes.default.bool,
  children: _propTypes.default.node
});

var defaultProps = {
  type: 'button'
};

var ButtonGroup = function ButtonGroup(_ref) {
  var styles = _ref.styles,
      children = _ref.children,
      disabled = _ref.disabled,
      loading = _ref.loading,
      fullWidth = _ref.fullWidth,
      block = _ref.block,
      compact = _ref.compact,
      inverse = _ref.inverse,
      grouped = _ref.grouped,
      groupedFirst = _ref.groupedFirst,
      groupedLast = _ref.groupedLast,
      mono = _ref.mono,
      noSpacing = _ref.noSpacing,
      shade = _ref.shade,
      soft = _ref.soft,
      primary = _ref.primary,
      rectangular = _ref.rectangular,
      secondary = _ref.secondary,
      shimmer = _ref.shimmer,
      short = _ref.short,
      transparent = _ref.transparent,
      type = _ref.type,
      underlined = _ref.underlined,
      noBorder = _ref.noBorder,
      theme = _ref.theme,
      css = _ref.css,
      href = _ref.href,
      large = _ref.large,
      noWrap = _ref.noWrap,
      shadowLevel = _ref.shadowLevel,
      small = _ref.small,
      props = _objectWithoutProperties(_ref, ["styles", "children", "disabled", "loading", "fullWidth", "block", "compact", "inverse", "grouped", "groupedFirst", "groupedLast", "mono", "noSpacing", "shade", "soft", "primary", "rectangular", "secondary", "shimmer", "short", "transparent", "type", "underlined", "noBorder", "theme", "css", "href", "large", "noWrap", "shadowLevel", "small"]);

  return _react.default.createElement("div", css(styles.buttonGroup, loading && styles.button_loading, fullWidth && styles.button_fullWidth, block && styles.button_block, grouped && styles.button_grouped, groupedFirst && styles.button_groupedFirst, groupedLast && styles.button_groupedLast, noSpacing && styles.button_noSpacing), _react.Children.map(children, function (child, i) {
    var button = _react.default.cloneElement(child, {
      compact: compact,
      disabled: disabled,
      inverse: inverse,
      rectangular: rectangular || i > 0 && i < children.length - 1,
      grouped: true,
      groupedFirst: i === 0,
      groupedLast: i === children.length - 1,
      fullWidth: fullWidth,
      mono: mono,
      primary: primary,
      secondary: secondary,
      shade: shade,
      short: short,
      soft: soft,
      transparent: transparent,
      underlined: underlined
    });

    return fullWidth ? _react.default.createElement("div", css(styles.buttonContainer), button) : button;
  }));
};

ButtonGroup.propTypes = propTypes;
ButtonGroup.defaultProps = defaultProps;
var ButtonGroupWithStyles = (0, _withStyles.withStyles)(function (_ref2) {
  var color = _ref2.color,
      units = _ref2.units,
      font = _ref2.font,
      animation = _ref2.animation,
      radius = _ref2.radius;
  return {
    buttonGroup: {
      marginBottom: units(0.5),
      boxSizing: 'border-box',
      display: 'flex'
    },
    button_soft: {
      backgroundColor: color.blueGrayLighter,
      color: color.primary,
      ':hover': {
        backgroundColor: color.blueGrayLight
      },
      ':active': {
        backgroundColor: color.blueGray
      }
    },
    button_fullWidth: {
      width: '100%'
    },
    button_loading: {
      opacity: 1,
      pointerEvents: 'none'
    },
    button_block: {
      width: '100%',
      textAlign: 'left',
      marginRight: 0,
      marginLeft: 0
    },
    button_compact: {
      paddingRight: units(0.75),
      paddingLeft: units(0.75)
    },
    button_shade: {
      background: color.shadowWeakest,
      ':hover': {
        background: color.shadowWeaker
      },
      ':active': {
        background: color.shadowWeak
      }
    },
    button_short: {
      height: units(2)
    },
    button_grouped: {
      marginRight: 1,
      marginBottom: 0,
      marginLeft: 1
    },
    button_groupedFirst: {
      borderRadius: "0 0 ".concat(radius, "px ").concat(radius, "px")
    },
    button_disabled: {
      opacity: .5,
      pointerEvents: 'none'
    },
    button_mono: {
      backgroundColor: color.transparent,
      borderColor: color.black,
      borderWidth: 1,
      borderStyle: 'solid',
      color: color.black,
      ':hover': {
        background: 'none'
      },
      ':active': {
        backgroundColor: color.grayLighter
      }
    },
    button_noSpacing: {
      marginBottom: 0
    },
    button_primary: {
      backgroundColor: color.primary,
      ':hover': {
        background: color.primarySaturated
      },
      ':active': {
        background: color.primaryDarker
      }
    },
    button_secondary: {
      backgroundColor: color.transparent,
      borderColor: color.secondary,
      borderWidth: 1,
      borderStyle: 'solid',
      color: color.secondary,
      ':hover': {
        color: color.secondarySaturated,
        backgroundColor: color.grayLightest
      },
      ':active': {
        borderColor: color.secondaryDarker,
        backgroundColor: color.grayLighter
      }
    },
    button_inverse: {
      backgroundColor: color.white,
      color: color.primary,
      borderWidth: 0,
      ':hover': {
        backgroundColor: color.blueGrayLight
      },
      ':active': {
        backgroundColor: color.blueGray
      }
    },
    button_transparent: {
      backgroundColor: color.transparent,
      color: color.primary,
      ':hover': {
        background: color.shadowWeakest
      },
      ':active': {
        background: color.shadowWeaker
      }
    },
    button_rectangular: {
      borderRadius: 0
    },
    button_noBorder: {
      border: 'none',
      borderWidth: 0
    },
    button__content: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'flex-start',
      opacity: 1,
      transition: 'opacity .2s',
      whiteSpace: 'nowrap',
      userSelect: 'none'
    },
    button__content_loading: {
      opacity: 0
    },
    button__content_fullWidth: {
      justifyContent: 'center'
    },
    button__loader: {
      position: 'absolute',
      top: 0,
      right: 0,
      bottom: 0,
      left: 0,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center'
    },
    buttonContainer: {
      flex: 1
    },
    shimmer: {
      position: 'absolute',
      width: '100%',
      height: '100%',
      top: 0,
      right: 0,
      bottom: 0,
      left: 0
    }
  };
})(ButtonGroup);
var _default = ButtonGroupWithStyles;
exports.default = _default;