@audira/carbon-react-native
Version:
Build React Native apps with component and shared patterns using Carbon
78 lines (77 loc) • 2.5 kB
JavaScript
"use strict";
import { useContext } from 'react';
import { Color } from '@audira/carbon-react-native-elements';
import Icon from '@carbon/icons/svg/32/error--filled.svg';
import { CarbonStyleSheet } from "../../../../carbon-style-sheet/index.js";
import { ThemeContext } from "../../../../contexts/index.js";
import { useBase } from "../_base/index.js";
export function useError({
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_error_background,
borderTopColor: CarbonStyleSheet.color.notification_error_border,
borderRightColor: CarbonStyleSheet.color.notification_error_border,
borderBottomColor: CarbonStyleSheet.color.notification_error_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_error
},
high_contrast: {
backgroundColor: CarbonStyleSheet.color.support_error_inverse
}
}),
mapIconColor = {
gray_10: {
low_contrast: Color.Token.gray_10.support_error,
high_contrast: Color.Token.gray_10.support_error_inverse
},
gray_100: {
low_contrast: Color.Token.gray_100.support_error,
high_contrast: Color.Token.gray_100.support_error_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=useError.js.map