@cfxjs/react-ui/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 = {
  ghost: false,
  disabled: false,
  vertical: false,
  size: 'medium',
  className: '',
  variant: 'line',
  color: 'default'
};

var getGroupBorderColors = function getGroupBorderColors(palette, props) {
  var color = props.color,
      variant = props.variant;
  if (variant === 'solid') return palette.cNeutral8;
  var colors = {
    "default": palette.cNeutral2,
    primary: palette.cTheme5,
    secondary: palette.cNeutral7,
    success: palette.success,
    error: palette.error,
    warning: palette.warning
  };
  var withoutLightType = color.replace('-light', '');
  return colors[withoutLightType] || colors["default"];
};

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

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

  var initialValue = useMemo(function () {
    return {
      disabled: disabled,
      size: size,
      variant: variant === 'solid' ? variant : 'line',
      color: color,
      ghost: ghost,
      isButtonGroup: true
    };
  }, [disabled, size, color]);
  var border = useMemo(function () {
    return getGroupBorderColors(theme.palette, groupProps);
  }, [theme, color, disabled, ghost]);
  return /*#__PURE__*/React.createElement(ButtonGroupContext.Provider, {
    value: initialValue
  }, /*#__PURE__*/React.createElement("div", _extends({}, props, {
    className: _JSXStyle.dynamic([["4258922295", [theme.expressiveness.R2, theme.layout.gapQuarter, theme.expressiveness.L1, theme.expressiveness.cLineStyle1, border, theme.expressiveness.L1, theme.expressiveness.cLineStyle1, border, theme.expressiveness.L1, theme.expressiveness.cLineStyle1, border]]]) + " " + (props && props.className != null && props.className || "btn-group ".concat(vertical ? 'vertical' : 'horizontal', " ").concat(className))
  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "4258922295",
    dynamic: [theme.expressiveness.R2, theme.layout.gapQuarter, theme.expressiveness.L1, theme.expressiveness.cLineStyle1, border, theme.expressiveness.L1, theme.expressiveness.cLineStyle1, border, theme.expressiveness.L1, theme.expressiveness.cLineStyle1, 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.expressiveness.R2, ";margin:").concat(theme.layout.gapQuarter, ";border:").concat(theme.expressiveness.L1, " ").concat(theme.expressiveness.cLineStyle1, " ").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:").concat(theme.expressiveness.L1, " ").concat(theme.expressiveness.cLineStyle1, " ").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:").concat(theme.expressiveness.L1, " ").concat(theme.expressiveness.cLineStyle1, " ").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);