@audira/carbon-react-native
Version:
Build React Native apps with component and shared patterns using Carbon
289 lines (288 loc) • 9.14 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Modal = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _carbonReactNativeElements = require("@audira/carbon-react-native-elements");
var _close = _interopRequireDefault(require("@carbon/icons/svg/32/close.svg"));
var _index = require("../../_internal/contexts/index.js");
var _index2 = require("../../_internal/style-sheets/index.js");
var _index3 = require("../../carbon-style-sheet/index.js");
var _index4 = require("../../contexts/index.js");
var _index5 = require("../button/ghost-icon/index.js");
var _LayerContext = require("../layer/LayerContext.js");
var _index6 = require("../text/index.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
* This is a pure component of Carbon Modal. It's not including with the dialog or any alert utility.
* You can use `DialogContext`, call the `show` method, and then give this component to the method argument.
*
* You can also use this component with other libraries like `@gorhom/bottom-sheet`, `@lodev09/react-native-true-sheet`, and other libraries, even with the core `Modal` component of React Native
*/
const Modal = exports.Modal = /*#__PURE__*/(0, _react.forwardRef)(function Modal({
size = 'medium',
label: labelProp,
title,
children,
buttonCloseProps,
'aria-label': ariaLabel,
'aria-labelledby': ariaLabelledBy,
style,
dir,
...props
}, ref) {
const breakpoint = (0, _react.useContext)(_index4.BreakpointContext),
globalConfigContext = (0, _react.useContext)(_index.GlobalConfigContext),
/**
* Based on carbon modal spec, the background color is based on the current layer level.
* Should i follow this spec?
*/
layerContextLevel = (0, _react.useContext)(_LayerContext.LayerContext),
label = labelProp ?? ariaLabel ?? ariaLabelledBy,
styleSheetBySizeAndBreakpoint = (0, _react.useMemo)(() => {
return mapStyleSheetBySizeAndBreakpoint[size][breakpoint];
}, [size, breakpoint]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ModalContext.Provider, {
value: {
size
},
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
ref: ref,
...props,
"aria-label": ariaLabel ?? label,
"aria-labelledBy": ariaLabelledBy ?? label,
dir: dir ?? globalConfigContext.rtl ? 'rtl' : undefined,
style: [bgLayerStyleSheet[`bg_${layerContextLevel}`], styleSheetBySizeAndBreakpoint.modal, globalConfigContext.rtl ? _index2.CommonStyleSheet.rtl : undefined, style],
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: [styleSheet.headerText, styleSheetBySizeAndBreakpoint.headerTextContainer],
children: [!!label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index6.Text, {
type: "label_01",
children: label
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index6.Text, {
type: "heading_03",
children: title
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.GhostIcon, {
...buttonCloseProps,
Icon: _close.default,
style: [_index2.CommonStyleSheet.absolute, styleSheet.iconClose, globalConfigContext.rtl ? styleSheet.iconCloseRtl : styleSheet.iconCloseLtr, buttonCloseProps?.style]
}), children]
})
});
});
const styleSheet = _reactNative.StyleSheet.create({
headerText: {
paddingTop: _carbonReactNativeElements.Spacing.spacing_05,
marginBottom: _carbonReactNativeElements.Spacing.spacing_05,
rowGap: _carbonReactNativeElements.Spacing.spacing_02
},
iconClose: {
top: 0,
backgroundColor: 'transparent'
},
iconCloseLtr: {
right: 0
},
iconCloseRtl: {
left: 0
}
}),
mapStyleSheetBySizeAndBreakpoint = {
extra_small: {
small: _reactNative.StyleSheet.create({
modal: {
width: '100%',
height: '100%'
},
headerTextContainer: {
paddingHorizontal: _carbonReactNativeElements.Spacing.spacing_05
}
}),
medium: _reactNative.StyleSheet.create({
modal: {
width: '48%'
},
headerTextContainer: {
paddingHorizontal: _carbonReactNativeElements.Spacing.spacing_05
}
}),
large: _reactNative.StyleSheet.create({
modal: {
width: '32%'
},
headerTextContainer: {
paddingHorizontal: _carbonReactNativeElements.Spacing.spacing_05
}
}),
x_large: _reactNative.StyleSheet.create({
modal: {
width: '24%'
},
headerTextContainer: {
paddingHorizontal: _carbonReactNativeElements.Spacing.spacing_05
}
}),
max: _reactNative.StyleSheet.create({
modal: {
width: '24%'
},
headerTextContainer: {
paddingHorizontal: _carbonReactNativeElements.Spacing.spacing_05
}
})
},
small: {
small: _reactNative.StyleSheet.create({
modal: {
width: '100%',
height: '100%'
},
headerTextContainer: {
paddingHorizontal: _carbonReactNativeElements.Spacing.spacing_05
}
}),
medium: _reactNative.StyleSheet.create({
modal: {
width: '60%'
},
headerTextContainer: {
paddingHorizontal: _carbonReactNativeElements.Spacing.spacing_05
}
}),
large: _reactNative.StyleSheet.create({
modal: {
width: '42%'
},
headerTextContainer: {
paddingHorizontal: _carbonReactNativeElements.Spacing.spacing_05
}
}),
x_large: _reactNative.StyleSheet.create({
modal: {
width: '36%'
},
headerTextContainer: {
paddingStart: _carbonReactNativeElements.Spacing.spacing_05,
paddingEnd: '20%'
}
}),
max: _reactNative.StyleSheet.create({
modal: {
width: '36%'
},
headerTextContainer: {
paddingStart: _carbonReactNativeElements.Spacing.spacing_05,
paddingEnd: '20%'
}
})
},
medium: {
small: _reactNative.StyleSheet.create({
modal: {
width: '100%',
height: '100%'
},
headerTextContainer: {
paddingHorizontal: _carbonReactNativeElements.Spacing.spacing_05
}
}),
medium: _reactNative.StyleSheet.create({
modal: {
width: '84%'
},
headerTextContainer: {
paddingStart: _carbonReactNativeElements.Spacing.spacing_05,
paddingEnd: '20%'
}
}),
large: _reactNative.StyleSheet.create({
modal: {
width: '60%'
},
headerTextContainer: {
paddingStart: _carbonReactNativeElements.Spacing.spacing_05,
paddingEnd: '20%'
}
}),
x_large: _reactNative.StyleSheet.create({
modal: {
width: '48%'
},
headerTextContainer: {
paddingStart: _carbonReactNativeElements.Spacing.spacing_05,
paddingEnd: '20%'
}
}),
max: _reactNative.StyleSheet.create({
modal: {
width: '48%'
},
headerTextContainer: {
paddingStart: _carbonReactNativeElements.Spacing.spacing_05,
paddingEnd: '20%'
}
})
},
large: {
small: _reactNative.StyleSheet.create({
modal: {
width: '100%',
height: '100%'
},
headerTextContainer: {
paddingHorizontal: _carbonReactNativeElements.Spacing.spacing_05
}
}),
medium: _reactNative.StyleSheet.create({
modal: {
width: '96%'
},
headerTextContainer: {
paddingStart: _carbonReactNativeElements.Spacing.spacing_05,
paddingEnd: '20%'
}
}),
large: _reactNative.StyleSheet.create({
modal: {
width: '84%'
},
headerTextContainer: {
paddingStart: _carbonReactNativeElements.Spacing.spacing_05,
paddingEnd: '20%'
}
}),
x_large: _reactNative.StyleSheet.create({
modal: {
width: '72%'
},
headerTextContainer: {
paddingStart: _carbonReactNativeElements.Spacing.spacing_05,
paddingEnd: '20%'
}
}),
max: _reactNative.StyleSheet.create({
modal: {
width: '72%'
},
headerTextContainer: {
paddingStart: _carbonReactNativeElements.Spacing.spacing_05,
paddingEnd: '20%'
}
})
}
},
bgLayerStyleSheet = _index3.CarbonStyleSheet.create({
bg_1: {
backgroundColor: _index3.CarbonStyleSheet.color.layer_01
},
bg_2: {
backgroundColor: _index3.CarbonStyleSheet.color.layer_02
},
bg_3: {
backgroundColor: _index3.CarbonStyleSheet.color.layer_03
}
});
//# sourceMappingURL=Modal.js.map