@audira/carbon-react-native
Version:
Build React Native apps with component and shared patterns using Carbon
284 lines (283 loc) • 7.85 kB
JavaScript
"use strict";
import { forwardRef, useContext, useMemo } from 'react';
import { StyleSheet, View } from 'react-native';
import { Spacing } from '@audira/carbon-react-native-elements';
import IconClose from '@carbon/icons/svg/32/close.svg';
import { GlobalConfigContext, ModalContext } from "../../_internal/contexts/index.js";
import { CommonStyleSheet } from "../../_internal/style-sheets/index.js";
import { CarbonStyleSheet } from "../../carbon-style-sheet/index.js";
import { BreakpointContext } from "../../contexts/index.js";
import { GhostIcon as ButtonGhostIcon } from "../button/ghost-icon/index.js";
import { LayerContext } from "../layer/LayerContext.js";
import { Text } from "../text/index.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* 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
*/
export const Modal = /*#__PURE__*/forwardRef(function Modal({
size = 'medium',
label: labelProp,
title,
children,
buttonCloseProps,
'aria-label': ariaLabel,
'aria-labelledby': ariaLabelledBy,
style,
dir,
...props
}, ref) {
const breakpoint = useContext(BreakpointContext),
globalConfigContext = useContext(GlobalConfigContext),
/**
* Based on carbon modal spec, the background color is based on the current layer level.
* Should i follow this spec?
*/
layerContextLevel = useContext(LayerContext),
label = labelProp ?? ariaLabel ?? ariaLabelledBy,
styleSheetBySizeAndBreakpoint = useMemo(() => {
return mapStyleSheetBySizeAndBreakpoint[size][breakpoint];
}, [size, breakpoint]);
return /*#__PURE__*/_jsx(ModalContext.Provider, {
value: {
size
},
children: /*#__PURE__*/_jsxs(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 ? CommonStyleSheet.rtl : undefined, style],
children: [/*#__PURE__*/_jsxs(View, {
style: [styleSheet.headerText, styleSheetBySizeAndBreakpoint.headerTextContainer],
children: [!!label && /*#__PURE__*/_jsx(Text, {
type: "label_01",
children: label
}), /*#__PURE__*/_jsx(Text, {
type: "heading_03",
children: title
})]
}), /*#__PURE__*/_jsx(ButtonGhostIcon, {
...buttonCloseProps,
Icon: IconClose,
style: [CommonStyleSheet.absolute, styleSheet.iconClose, globalConfigContext.rtl ? styleSheet.iconCloseRtl : styleSheet.iconCloseLtr, buttonCloseProps?.style]
}), children]
})
});
});
const styleSheet = StyleSheet.create({
headerText: {
paddingTop: Spacing.spacing_05,
marginBottom: Spacing.spacing_05,
rowGap: Spacing.spacing_02
},
iconClose: {
top: 0,
backgroundColor: 'transparent'
},
iconCloseLtr: {
right: 0
},
iconCloseRtl: {
left: 0
}
}),
mapStyleSheetBySizeAndBreakpoint = {
extra_small: {
small: StyleSheet.create({
modal: {
width: '100%',
height: '100%'
},
headerTextContainer: {
paddingHorizontal: Spacing.spacing_05
}
}),
medium: StyleSheet.create({
modal: {
width: '48%'
},
headerTextContainer: {
paddingHorizontal: Spacing.spacing_05
}
}),
large: StyleSheet.create({
modal: {
width: '32%'
},
headerTextContainer: {
paddingHorizontal: Spacing.spacing_05
}
}),
x_large: StyleSheet.create({
modal: {
width: '24%'
},
headerTextContainer: {
paddingHorizontal: Spacing.spacing_05
}
}),
max: StyleSheet.create({
modal: {
width: '24%'
},
headerTextContainer: {
paddingHorizontal: Spacing.spacing_05
}
})
},
small: {
small: StyleSheet.create({
modal: {
width: '100%',
height: '100%'
},
headerTextContainer: {
paddingHorizontal: Spacing.spacing_05
}
}),
medium: StyleSheet.create({
modal: {
width: '60%'
},
headerTextContainer: {
paddingHorizontal: Spacing.spacing_05
}
}),
large: StyleSheet.create({
modal: {
width: '42%'
},
headerTextContainer: {
paddingHorizontal: Spacing.spacing_05
}
}),
x_large: StyleSheet.create({
modal: {
width: '36%'
},
headerTextContainer: {
paddingStart: Spacing.spacing_05,
paddingEnd: '20%'
}
}),
max: StyleSheet.create({
modal: {
width: '36%'
},
headerTextContainer: {
paddingStart: Spacing.spacing_05,
paddingEnd: '20%'
}
})
},
medium: {
small: StyleSheet.create({
modal: {
width: '100%',
height: '100%'
},
headerTextContainer: {
paddingHorizontal: Spacing.spacing_05
}
}),
medium: StyleSheet.create({
modal: {
width: '84%'
},
headerTextContainer: {
paddingStart: Spacing.spacing_05,
paddingEnd: '20%'
}
}),
large: StyleSheet.create({
modal: {
width: '60%'
},
headerTextContainer: {
paddingStart: Spacing.spacing_05,
paddingEnd: '20%'
}
}),
x_large: StyleSheet.create({
modal: {
width: '48%'
},
headerTextContainer: {
paddingStart: Spacing.spacing_05,
paddingEnd: '20%'
}
}),
max: StyleSheet.create({
modal: {
width: '48%'
},
headerTextContainer: {
paddingStart: Spacing.spacing_05,
paddingEnd: '20%'
}
})
},
large: {
small: StyleSheet.create({
modal: {
width: '100%',
height: '100%'
},
headerTextContainer: {
paddingHorizontal: Spacing.spacing_05
}
}),
medium: StyleSheet.create({
modal: {
width: '96%'
},
headerTextContainer: {
paddingStart: Spacing.spacing_05,
paddingEnd: '20%'
}
}),
large: StyleSheet.create({
modal: {
width: '84%'
},
headerTextContainer: {
paddingStart: Spacing.spacing_05,
paddingEnd: '20%'
}
}),
x_large: StyleSheet.create({
modal: {
width: '72%'
},
headerTextContainer: {
paddingStart: Spacing.spacing_05,
paddingEnd: '20%'
}
}),
max: StyleSheet.create({
modal: {
width: '72%'
},
headerTextContainer: {
paddingStart: Spacing.spacing_05,
paddingEnd: '20%'
}
})
}
},
bgLayerStyleSheet = CarbonStyleSheet.create({
bg_1: {
backgroundColor: CarbonStyleSheet.color.layer_01
},
bg_2: {
backgroundColor: CarbonStyleSheet.color.layer_02
},
bg_3: {
backgroundColor: CarbonStyleSheet.color.layer_03
}
});
//# sourceMappingURL=Modal.js.map