@audira/carbon-react-native
Version:
Build React Native apps with component and shared patterns using Carbon
88 lines (87 loc) • 2.91 kB
JavaScript
"use strict";
import { forwardRef, useContext } from 'react';
import { Color } from '@audira/carbon-react-native-elements';
import { CarbonStyleSheet } from "../../../carbon-style-sheet/index.js";
import { ThemeContext } from "../../../contexts/index.js";
import { BaseColor } from "../base-color/index.js";
import { jsx as _jsx } from "react/jsx-runtime";
export const Primary = /*#__PURE__*/forwardRef(function Primary(props, ref) {
const themeContext = useContext(ThemeContext);
return /*#__PURE__*/_jsx(BaseColor, {
...props,
ref: ref,
android_rippleEffectColor: mapAndroidRippleEffectColor[themeContext.colorScheme],
colorStateStyle: {
background: {
default: backgroundStyleSheet.default,
focused: backgroundStyleSheet.focused,
hovered: backgroundStyleSheet.hovered,
pressed: backgroundStyleSheet.pressed,
disabled: backgroundStyleSheet.disabled
},
text: {
default: textStyleSheet.default,
focused: textStyleSheet.focused,
hovered: textStyleSheet.hovered,
pressed: textStyleSheet.pressed,
disabled: textStyleSheet.disabled
},
icon: mapIconColor[themeContext.colorScheme]
}
});
});
const backgroundStyleSheet = CarbonStyleSheet.create({
default: {
backgroundColor: CarbonStyleSheet.color.button_primary
},
focused: {
backgroundColor: CarbonStyleSheet.color.button_primary
},
hovered: {
backgroundColor: CarbonStyleSheet.color.button_primary_hover
},
pressed: {
backgroundColor: CarbonStyleSheet.color.button_primary_active
},
disabled: {
backgroundColor: CarbonStyleSheet.color.button_disabled
}
}),
textStyleSheet = CarbonStyleSheet.create({
default: {
color: CarbonStyleSheet.color.text_on_color
},
focused: {
color: CarbonStyleSheet.color.text_on_color
},
hovered: {
color: CarbonStyleSheet.color.text_on_color
},
pressed: {
color: CarbonStyleSheet.color.text_on_color
},
disabled: {
color: CarbonStyleSheet.color.text_on_color_disabled
}
}),
mapIconColor = {
gray_10: {
default: Color.Token.gray_10.icon_on_color,
focused: Color.Token.gray_10.icon_on_color,
hovered: Color.Token.gray_10.icon_on_color,
pressed: Color.Token.gray_10.icon_on_color,
disabled: Color.Token.gray_10.icon_on_color_disabled
},
gray_100: {
default: Color.Token.gray_100.icon_on_color,
focused: Color.Token.gray_100.icon_on_color,
hovered: Color.Token.gray_100.icon_on_color,
pressed: Color.Token.gray_100.icon_on_color,
disabled: Color.Token.gray_100.icon_on_color_disabled
}
},
mapAndroidRippleEffectColor = {
gray_10: Color.Token.gray_10.button_primary_active,
gray_100: Color.Token.gray_100.button_primary_active
};
//# sourceMappingURL=Primary.js.map