@audira/carbon-react-native
Version:
Build React Native apps with component and shared patterns using Carbon
72 lines (71 loc) • 2.27 kB
JavaScript
;
import { forwardRef, useContext } from 'react';
import { StyleSheet, View } from 'react-native';
import { Spacing } from '@audira/carbon-react-native-elements';
import { ButtonGroupContext, GlobalConfigContext } from "../../_internal/contexts/index.js";
import { CommonStyleSheet, FlexStyleSheet } from "../../_internal/style-sheets/index.js";
import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
export const ButtonGroup = /*#__PURE__*/forwardRef(function ButtonGroup({
button1,
button2,
button3,
oneAlone,
size = 'large_productive',
fluid,
vertical,
style,
dir,
...props
}, ref) {
const globalConfigContext = useContext(GlobalConfigContext),
styleFlexDir = mapStyleFlexDir[`${!!vertical}`],
styleFluid = mapStyleFluid[`${!!fluid}`],
rtlStyle = globalConfigContext.rtl && !vertical ? CommonStyleSheet.rtl : undefined;
return /*#__PURE__*/_jsx(ButtonGroupContext.Provider, {
value: {
size,
fluid,
vertical
},
children: /*#__PURE__*/_jsx(View, {
ref: ref,
...props,
dir: dir ?? globalConfigContext.rtl ? 'rtl' : undefined,
style: [styleFlexDir, styleFluid, oneAlone ? FlexStyleSheet.justify_between : undefined, rtlStyle, style],
children: !oneAlone || vertical ? /*#__PURE__*/_jsxs(_Fragment, {
children: [button1, button2, button3]
}) : /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(View, {
style: [styleSheet.firstButtonContainer],
children: button1
}), /*#__PURE__*/_jsxs(View, {
style: [styleFlexDir, styleFluid, styleSheet.lastTwoButttonContainer, FlexStyleSheet.justify_end, rtlStyle],
children: [button2, button3]
})]
})
})
});
});
const styleSheet = StyleSheet.create({
fixedGroup: {
gap: Spacing.spacing_05
},
fluidGroup: {
gap: 1
},
firstButtonContainer: {
width: '25%'
},
lastTwoButttonContainer: {
width: '50%'
}
}),
mapStyleFlexDir = {
false: FlexStyleSheet.flex_row,
true: FlexStyleSheet.flex_col_reverse
},
mapStyleFluid = {
false: styleSheet.fixedGroup,
true: styleSheet.fluidGroup
};
//# sourceMappingURL=ButtonGroup.js.map