@audira/carbon-react-native
Version:
Build React Native apps with component and shared patterns using Carbon
205 lines (199 loc) • 6.21 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Base = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _carbonReactNativeElements = require("@audira/carbon-react-native-elements");
var _index = require("../../../_internal/contexts/index.js");
var _index2 = require("../../../_internal/style-sheets/index.js");
var _index3 = require("../../text/index.js");
var _jsxRuntime = require("react/jsx-runtime");
const Base = exports.Base = /*#__PURE__*/(0, _react.forwardRef)(function Base({
size: sizeProp,
text,
textProps,
Icon,
iconProps,
iconNode,
backgroundNode,
InlineLoading,
inlineLoadingProps,
style,
role = 'button',
'aria-label': ariaLabel,
dir,
...props
}, ref) {
const globalConfigContext = (0, _react.useContext)(_index.GlobalConfigContext),
buttonGroupContext = (0, _react.useContext)(_index.ButtonGroupContext),
size = sizeProp ?? buttonGroupContext.size ?? 'large_productive',
iconSize = getIconSize(size),
iconMarginStyle = mapIconMarginStyle[`${!!globalConfigContext.rtl}`][`${!!text}`];
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
...props,
role: role,
"aria-label": ariaLabel ?? text,
dir: dir ?? globalConfigContext.rtl ? 'rtl' : undefined,
style: [_index2.FlexStyleSheet.flex_row, _index2.FlexStyleSheet.justify_between, baseStyle.container, globalConfigContext.rtl ? baseStyle.containerRtl : undefined, mapContainerStyle[`${!!text}`][`${!!Icon || !!iconNode}`], sizeStyle[size], mapStyleInButtonGroup[`${!!buttonGroupContext.vertical}`][`${!!buttonGroupContext.fluid}`], style],
ref: ref,
children: [backgroundNode, !InlineLoading || inlineLoadingProps?.state === 'inactive' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [!!text && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: baseStyle.textContainer,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Text, {
...textProps,
type: getTextType(size),
children: text
})
}), !!Icon && !iconNode ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
...iconProps,
width: iconProps?.width ?? iconSize,
height: iconProps?.height ?? iconSize,
dir: globalConfigContext.rtl ? 'rtl' : undefined,
style: [getIconMarginTopStyle(size), iconMarginStyle, iconProps?.style]
}) : iconNode?.(iconSize, [getIconMarginTopStyle(size), iconMarginStyle])]
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(InlineLoading, {
...inlineLoadingProps,
text: inlineLoadingProps?.text || text || '',
style: [baseStyle.inlineLoading, inlineLoadingProps?.style]
})]
});
});
const baseStyle = _reactNative.StyleSheet.create({
container: {
overflow: 'hidden'
},
containerRtl: {
direction: 'rtl'
},
/**
* Start Padding
*/
containerPaddingStart: {
paddingStart: _carbonReactNativeElements.Spacing.spacing_05
},
/**
* End Padding with icon
*/
containerPaddingEnd05: {
paddingEnd: _carbonReactNativeElements.Spacing.spacing_05
},
/**
* End Padding without icon
*/
containerPaddingEnd10: {
paddingEnd: _carbonReactNativeElements.Spacing.spacing_10
},
textContainer: {
justifyContent: 'center',
height: '100%',
maxHeight: 48
},
iconMarginLTR: {
marginLeft: _carbonReactNativeElements.Spacing.spacing_07
},
iconMarginRTL: {
marginRight: _carbonReactNativeElements.Spacing.spacing_07
},
inlineLoading: {
height: '100%',
maxHeight: 48
}
}),
sizeStyle = _reactNative.StyleSheet.create({
small: {
height: 32
},
medium: {
height: 40
},
large_productive: {
height: 48
},
large_expressive: {
height: 48
},
extra_large: {
height: 64
},
'2xl': {
height: 80
}
}),
mapContainerStyle = {
false: {
false: [baseStyle.containerPaddingEnd05, baseStyle.containerPaddingStart],
true: [baseStyle.containerPaddingEnd05, baseStyle.containerPaddingStart]
},
true: {
false: [baseStyle.containerPaddingEnd10, baseStyle.containerPaddingStart],
true: [baseStyle.containerPaddingEnd05, baseStyle.containerPaddingStart]
}
},
/**
* https://carbondesignsystem.com/components/button/style/#typography
*/
mapTextTypeByExpressive = {
false: 'body_compact_01',
true: 'body_compact_02'
},
mapIconSizeByExpressive = {
false: 16,
true: 20
},
mapIconMarginStyle = {
false: {
false: null,
true: baseStyle.iconMarginLTR
},
true: {
false: null,
true: baseStyle.iconMarginRTL
}
},
mapStyleInButtonGroup = {
false: {
false: _index2.FlexStyleSheet.self_start,
true: _index2.FlexStyleSheet.flex_1
},
true: {
false: _index2.FlexStyleSheet.self_stretch,
true: _index2.FlexStyleSheet.self_stretch
}
};
/**
* Expressive only when button size is LARGE_EXPRESSIVE. You can see this link
* https://carbondesignsystem.com/components/button/style/#sizes
*/
function isExpressiveStr(Size) {
return `${Size === 'large_expressive'}`;
}
// function getContainerPaddingRight(
// text: boolean,
// icon: boolean,
// ) {
// return mapContainerEndPR[`${text}`][`${icon}`]
// }
/**
* Expressive only when button size is LARGE_EXPRESSIVE. You can see this link
* https://carbondesignsystem.com/components/button/style/#sizes
*/
function getTextType(size) {
return mapTextTypeByExpressive[isExpressiveStr(size)];
}
/**
* Expressive only when button size is LARGE_EXPRESSIVE. You can see this link
* https://carbondesignsystem.com/components/button/style/#sizes
*/
function getIconSize(size) {
return mapIconSizeByExpressive[isExpressiveStr(size)];
}
function getIconMarginTopStyle(size) {
const iconSize = mapIconSizeByExpressive[isExpressiveStr(size)],
height = Math.min(sizeStyle[size].height, sizeStyle.large_productive.height); // 48 at max
return {
marginTop: height / 2 - iconSize / 2
};
}
//# sourceMappingURL=Base.js.map