@audira/carbon-react-native
Version:
Build React Native apps with component and shared patterns using Carbon
78 lines (77 loc) • 2.53 kB
JavaScript
"use strict";
import { useContext } from 'react';
import { Color } from '@audira/carbon-react-native-elements';
import Icon from '@carbon/icons/svg/32/warning--filled.svg';
import { CarbonStyleSheet } from "../../../../carbon-style-sheet/index.js";
import { ThemeContext } from "../../../../contexts/index.js";
import { useBase } from "../_base/index.js";
export function useWarning({
color,
transparentBorderColor
}) {
const themeContext = useContext(ThemeContext),
data = useBase({
color,
transparentBorderColor,
style: statusStyle,
titleStyle,
leftBarStyle,
iconColor: mapIconColor[themeContext.colorScheme],
iconCloseColor: mapIconCloseColor[themeContext.colorScheme]
});
return {
...data,
Icon
};
}
const statusStyle = CarbonStyleSheet.create({
low_contrast: {
backgroundColor: CarbonStyleSheet.color.notification_warning_background,
borderTopColor: CarbonStyleSheet.color.notification_warning_border,
borderRightColor: CarbonStyleSheet.color.notification_warning_border,
borderBottomColor: CarbonStyleSheet.color.notification_warning_border
},
high_contrast: {
backgroundColor: CarbonStyleSheet.color.background_inverse,
borderTopColor: CarbonStyleSheet.color.background_inverse,
borderRightColor: CarbonStyleSheet.color.background_inverse,
borderBottomColor: CarbonStyleSheet.color.background_inverse
}
}),
titleStyle = CarbonStyleSheet.create({
low_contrast: {
color: CarbonStyleSheet.color.text_primary
},
high_contrast: {
color: CarbonStyleSheet.color.text_inverse
}
}),
leftBarStyle = CarbonStyleSheet.create({
low_contrast: {
backgroundColor: CarbonStyleSheet.color.support_warning
},
high_contrast: {
backgroundColor: CarbonStyleSheet.color.support_warning_inverse
}
}),
mapIconColor = {
gray_10: {
low_contrast: Color.Token.gray_10.support_warning,
high_contrast: Color.Token.gray_10.support_warning_inverse
},
gray_100: {
low_contrast: Color.Token.gray_100.support_warning,
high_contrast: Color.Token.gray_100.support_warning_inverse
}
},
mapIconCloseColor = {
gray_10: {
low_contrast: Color.Token.gray_10.icon_primary,
high_contrast: Color.Token.gray_10.icon_inverse
},
gray_100: {
low_contrast: Color.Token.gray_100.icon_primary,
high_contrast: Color.Token.gray_100.icon_inverse
}
};
//# sourceMappingURL=useWarning.js.map