@razorpay/blade
Version:
The Design System that powers Razorpay
151 lines (147 loc) • 6 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default from 'react';
import styled from 'styled-components';
import { StyledButtonGroup } from './StyledButtonGroup.js';
import { ButtonGroupProvider } from './ButtonGroupContext.js';
import '../Box/BaseBox/index.js';
import '../Box/styledProps/index.js';
import '../../utils/metaAttribute/index.js';
import '../../utils/assignWithoutSideEffects/index.js';
import '../../utils/index.js';
import getIn from '../../utils/lodashButBetter/get.js';
import { getBackgroundColorToken } from '../Button/BaseButton/BaseButton.js';
import '../../utils/makeAnalyticsAttribute/index.js';
import '../../utils/useVerifyAllowedChildren/index.js';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { makeBorderSize } from '../../utils/makeBorderSize/makeBorderSize.js';
import { useVerifyAllowedChildren } from '../../utils/useVerifyAllowedChildren/useVerifyAllowedChildren.js';
import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
var _excluded = ["children", "isDisabled", "size", "color", "variant", "isFullWidth", "testID"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var getDividerColorToken = function getDividerColorToken(_ref) {
var color = _ref.color,
variant = _ref.variant,
isDisabled = _ref.isDisabled;
if (variant === 'primary') {
return 'surface.border.gray.subtle';
}
if (variant === 'secondary') {
return getBackgroundColorToken({
property: 'border',
variant: variant,
color: color,
state: isDisabled ? 'disabled' : 'default'
});
}
return 'surface.border.gray.muted';
};
var StyledDivider = /*#__PURE__*/styled(BaseBox).withConfig({
displayName: "ButtonGroupweb__StyledDivider",
componentId: "sc-1lc1evg-0"
})(function (_ref2) {
var theme = _ref2.theme,
color = _ref2.color,
variant = _ref2.variant,
isDisabled = _ref2.isDisabled;
return {
borderWidth: 0,
borderLeftStyle: 'solid',
borderLeftWidth: makeBorderSize(theme.border.width.thin),
alignSelf: 'stretch',
color: getIn(theme.colors, getDividerColorToken({
color: color,
variant: variant,
isDisabled: isDisabled
}))
};
});
var _ButtonGroup = function _ButtonGroup(_ref3, ref) {
var children = _ref3.children,
_ref3$isDisabled = _ref3.isDisabled,
isDisabled = _ref3$isDisabled === void 0 ? false : _ref3$isDisabled,
_ref3$size = _ref3.size,
size = _ref3$size === void 0 ? 'medium' : _ref3$size,
_ref3$color = _ref3.color,
color = _ref3$color === void 0 ? 'primary' : _ref3$color,
_ref3$variant = _ref3.variant,
variant = _ref3$variant === void 0 ? 'primary' : _ref3$variant,
_ref3$isFullWidth = _ref3.isFullWidth,
isFullWidth = _ref3$isFullWidth === void 0 ? false : _ref3$isFullWidth,
testID = _ref3.testID,
rest = _objectWithoutProperties(_ref3, _excluded);
var contextValue = {
isDisabled: isDisabled,
size: size,
color: color,
variant: variant,
isFullWidth: isFullWidth
};
useVerifyAllowedChildren({
allowedComponents: ['Button', 'Dropdown', 'Tooltip', 'Popover'],
componentName: 'ButtonGroup',
children: children
});
return /*#__PURE__*/jsx(ButtonGroupProvider, {
value: contextValue,
children: /*#__PURE__*/jsx(StyledButtonGroup, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
ref: ref,
color: color,
variant: variant,
isDisabled: isDisabled,
isFullWidth: isFullWidth
}, metaAttribute({
name: MetaConstants.ButtonGroup,
testID: testID
})), getStyledProps(rest)), makeAnalyticsAttribute(rest)), {}, {
role: "group",
children: React__default.Children.map(children, function (child, index) {
return /*#__PURE__*/jsxs(Fragment, {
children: [child, React__default.Children.count(children) - 1 !== index && /*#__PURE__*/jsx(StyledDivider, {
variant: variant,
color: color,
isDisabled: isDisabled
})]
});
})
}))
});
};
/**
* ### ButtonGroup Component
*
* The ButtonGroup component is used to group related buttons together.
*
* ---
*
* #### Usage
*
* ```jsx
const App = () => {
return (
<ButtonGroup>
<Button icon={RefreshIcon}>Sync</Button>
<Button icon={ShareIcon}>Share</Button>
<Button icon={DownloadIcon}>Download</Button>
</ButtonGroup>
);
}
* ```
*
* ---
*
* Checkout {@link https://blade.razorpay.com/?path=/docs/components-buttongroup FileUpload Documentation}
*
*/
var ButtonGroup = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.forwardRef(_ButtonGroup), {
displayName: 'ButtonGroup',
componentId: 'ButtonGroup'
});
export { ButtonGroup };
//# sourceMappingURL=ButtonGroup.web.js.map