@confi/conflux-react-ui-test-package/esm/button-group/button-group.js

Modern and minimalist React UI library.

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _JSXStyle from "styled-jsx/style";
import React, { useMemo } from 'react';
import useTheme from '../styles/use-theme';
import withDefaults from '../utils/with-defaults';
import { ButtonGroupContext } from './button-group-context';
var defaultProps = {
  disabled: false,
  vertical: false,
  ghost: false,
  size: 'medium',
  type: 'default',
  className: ''
};

var getGroupBorderColors = function getGroupBorderColors(palette, props) {
  var ghost = props.ghost,
      type = props.type;
  if (!ghost && type !== 'default') return palette.background;
  var colors = {
    "default": palette.border,
    success: palette.success,
    secondary: palette.secondary,
    error: palette.error,
    warning: palette.warning
  };
  var withoutLightType = type.replace('-light', '');
  return colors[withoutLightType] || colors["default"];
};

var ButtonGroup = function ButtonGroup(groupProps) {
  var theme = useTheme();

  var disabled = groupProps.disabled,
      size = groupProps.size,
      type = groupProps.type,
      ghost = groupProps.ghost,
      vertical = groupProps.vertical,
      children = groupProps.children,
      className = groupProps.className,
      props = _objectWithoutProperties(groupProps, ["disabled", "size", "type", "ghost", "vertical", "children", "className"]);

  var initialValue = useMemo(function () {
    return {
      disabled: disabled,
      size: size,
      type: type,
      ghost: ghost,
      isButtonGroup: true
    };
  }, [disabled, size, type]);
  var border = useMemo(function () {
    return getGroupBorderColors(theme.palette, groupProps);
  }, [theme, type, disabled, ghost]);
  return /*#__PURE__*/React.createElement(ButtonGroupContext.Provider, {
    value: initialValue
  }, /*#__PURE__*/React.createElement("div", _extends({}, props, {
    className: _JSXStyle.dynamic([["2226639113", [theme.layout.radius, theme.layout.gapQuarter, border, border, border]]]) + " " + (props && props.className != null && props.className || "btn-group ".concat(vertical ? 'vertical' : 'horizontal', " ").concat(className))
  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "2226639113",
    dynamic: [theme.layout.radius, theme.layout.gapQuarter, border, border, border]
  }, ".btn-group.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;border-radius:".concat(theme.layout.radius, ";margin:").concat(theme.layout.gapQuarter, ";border:1px solid ").concat(border, ";background-color:transparent;overflow:hidden;height:-webkit-min-content;height:-moz-min-content;height:min-content;}.vertical.__jsx-style-dynamic-selector{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.btn-group.__jsx-style-dynamic-selector .btn{border:none;}.btn-group.__jsx-style-dynamic-selector .btn .text{top:0;}.horizontal.__jsx-style-dynamic-selector .btn:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid ").concat(border, ";}.horizontal.__jsx-style-dynamic-selector .btn:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0;}.vertical.__jsx-style-dynamic-selector .btn:not(:first-child){border-top-left-radius:0;border-top-right-radius:0;border-top:1px solid ").concat(border, ";}.vertical.__jsx-style-dynamic-selector .btn:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0;}"))));
};

var MemoButtonGroup = React.memo(ButtonGroup);
export default withDefaults(MemoButtonGroup, defaultProps);