@6thquake/react-material/ButtonGroup/ButtonGroup.js

React components that implement Google's Material Design.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

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

var _withStyles = _interopRequireDefault(require("../styles/withStyles"));

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

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

var _helpers = require("../utils/helpers");

var styles = function styles(theme) {
  return {
    sizeSmall: {
      '@global button': {
        padding: "".concat(theme.spacing(1) - 1, "px ").concat(theme.spacing(1), "px"),
        minWidth: theme.spacing(8),
        minHeight: 32,
        fontSize: theme.typography.pxToRem(13)
      }
    },
    sizeLarge: {
      '@global button': {
        padding: "".concat(theme.spacing(1), "px ").concat(theme.spacing(3), "px"),
        minWidth: theme.spacing(14),
        minHeight: 40,
        fontSize: theme.typography.pxToRem(15)
      }
    },
    horizontal: {
      '@global button:first-child': {
        borderTopLeftRadius: 4,
        borderBottomLeftRadius: 4
      },
      '@global button:last-child': {
        borderTopRightRadius: 4,
        borderBottomRightRadius: 4
      }
    },
    vertical: {
      display: 'inline-block',
      verticalAlign: 'middle',
      '@global button:first-child': {
        borderTopLeftRadius: 4,
        borderTopRightRadius: 4
      },
      '@global button:last-child': {
        borderBottomLeftRadius: 4,
        borderBottomRightRadius: 4
      },
      '@global button': {
        width: '100%',
        maxWidth: '100%',
        display: 'block'
      }
    },
    horizontalCircularSmall: {
      '@global button:first-child': {
        borderTopLeftRadius: 16,
        borderBottomLeftRadius: 16
      },
      '@global button:last-child': {
        borderTopRightRadius: 16,
        borderBottomRightRadius: 16
      }
    },
    horizontalCircularMedium: {
      '@global button:first-child': {
        borderTopLeftRadius: 18,
        borderBottomLeftRadius: 18
      },
      '@global button:last-child': {
        borderTopRightRadius: 18,
        borderBottomRightRadius: 18
      }
    },
    horizontalCircularLarge: {
      '@global button:first-child': {
        borderTopLeftRadius: 20,
        borderBottomLeftRadius: 20
      },
      '@global button:last-child': {
        borderTopRightRadius: 20,
        borderBottomRightRadius: 20
      }
    },
    verticalCircularSmall: {
      '@global button:first-child': {
        borderTopLeftRadius: theme.spacing(4),
        borderTopRightRadius: theme.spacing(4)
      },
      '@global button:last-child': {
        borderBottomLeftRadius: theme.spacing(4),
        borderBottomRightRadius: theme.spacing(4)
      }
    },
    verticalCircularMedium: {
      '@global button:first-child': {
        borderTopLeftRadius: theme.spacing(5.5),
        borderTopRightRadius: theme.spacing(5.5)
      },
      '@global button:last-child': {
        borderBottomLeftRadius: theme.spacing(5.5),
        borderBottomRightRadius: theme.spacing(5.5)
      }
    },
    verticalCircularLarge: {
      '@global button:first-child': {
        borderTopLeftRadius: theme.spacing(7),
        borderTopRightRadius: theme.spacing(7)
      },
      '@global button:last-child': {
        borderBottomLeftRadius: theme.spacing(7),
        borderBottomRightRadius: theme.spacing(7)
      }
    },
    group: {
      '@global button': {
        borderRadius: 0,
        transition: 'all .5s cubic-bezier(0.4, 0, 0.2, 1) 0ms'
      }
    }
  };
};

var Group =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(Group, _Component);

  function Group() {
    (0, _classCallCheck2.default)(this, Group);
    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Group).apply(this, arguments));
  }

  (0, _createClass2.default)(Group, [{
    key: "render",
    value: function render() {
      var _classNames,
          _this = this;

      var _this$props = this.props,
          children = _this$props.children,
          position = _this$props.position,
          classNamePro = _this$props.className,
          classes = _this$props.classes,
          size = _this$props.size,
          circular = _this$props.circular;
      var sizePostfix = (0, _helpers.capitalize)(size);
      var className = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.group, true), (0, _defineProperty2.default)(_classNames, classes.vertical, position === 'vertical'), (0, _defineProperty2.default)(_classNames, classes.horizontal, position === 'horizontal'), (0, _defineProperty2.default)(_classNames, classes["size".concat(sizePostfix)], size !== 'medium'), (0, _defineProperty2.default)(_classNames, classes["".concat(position, "Circular").concat(sizePostfix)], circular), _classNames), classNamePro);
      return _react.default.createElement("div", {
        className: className,
        ref: function ref(e) {
          return _this.group = e;
        }
      }, children);
    }
  }]);
  return Group;
}(_react.Component);

Group.propTypes = {
  /**
   * 是否显示圆角
   */
  circular: _propTypes.default.bool,

  /**
   * 横向或纵向排列
   */
  position: _propTypes.default.oneOf(['vertical', 'horizontal']),

  /**
   * 设置按钮大小
   */
  size: _propTypes.default.oneOf(['small', 'medium', 'large'])
};
Group.defaultProps = {
  circular: false,
  position: 'horizontal',
  size: 'medium'
};

var _default = (0, _withStyles.default)(styles, {
  name: 'RMButtonGroup'
})(Group);

exports.default = _default;