@audira/carbon-react-native
Version:
Build React Native apps with component and shared patterns using Carbon
102 lines (101 loc) • 4.21 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.RNTextInput = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _carbonReactNativeElements = require("@audira/carbon-react-native-elements");
var _index = require("../../../_internal/contexts/index.js");
var _index2 = require("../../../_internal/style-sheets/index.js");
var _index3 = require("../../../contexts/index.js");
var _jsxRuntime = require("react/jsx-runtime");
const RNTextInput = exports.RNTextInput = /*#__PURE__*/(0, _react.forwardRef)(function RNTextInput({
interactiveState,
editable,
style,
placeholderTextColor,
dir,
...props
}, ref) {
const themeContext = (0, _react.useContext)(_index3.ThemeContext),
globalConfigContext = (0, _react.useContext)(_index.GlobalConfigContext);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
ref: ref,
...props,
editable: interactiveState === 'disabled' || interactiveState === 'read_only' ? false : editable,
placeholderTextColor: placeholderTextColor ?? mapPlaceholderTextColor[themeContext.colorScheme],
dir: dir ?? globalConfigContext.rtl ? 'rtl' : undefined,
style: [styleSheet.rnTextInput,
// FIXME: i don't know the correct type
mapStateStyleSheet[themeContext.colorScheme][interactiveState], globalConfigContext.rtl ? _index2.CommonStyleSheet.rtl : undefined, style]
});
});
const styleSheet = _reactNative.StyleSheet.create({
rnTextInput: {
flexGrow: 1,
paddingLeft: _carbonReactNativeElements.Spacing.spacing_05,
paddingRight: _carbonReactNativeElements.Spacing.spacing_05,
backgroundColor: 'transparent',
borderBottomWidth: _reactNative.StyleSheet.hairlineWidth,
borderStyle: 'solid',
fontFamily: 'IBMPlexSans-Regular',
fontSize: _carbonReactNativeElements.Typography.TypeSets.body_compact_01.fontSize,
lineHeight: _carbonReactNativeElements.Typography.TypeSets.body_compact_01.lineHeight,
..._reactNative.Platform.select({
web: {
outlineStyle: 'none'
}
})
}
}),
/**
* The text color in the TextInput is not reactive with the `CarbonStyleSheet.create()`. So i have to map it manually.
*/
stateStyleSheet = _reactNative.StyleSheet.create({
gray_10__normal: {
color: _carbonReactNativeElements.Color.Token.gray_10.text_primary,
borderBlockEndColor: _carbonReactNativeElements.Color.Token.gray_10.border_strong_01
},
gray_10__disabled: {
color: _carbonReactNativeElements.Color.Token.gray_10.text_disabled,
borderBlockEndColor: 'transparent'
},
gray_10__read_only: {
color: _carbonReactNativeElements.Color.Token.gray_10.text_primary,
borderBlockEndColor: _carbonReactNativeElements.Color.Token.gray_10.border_subtle_00
},
gray_100__normal: {
color: _carbonReactNativeElements.Color.Token.gray_100.text_primary,
borderBlockEndColor: _carbonReactNativeElements.Color.Token.gray_100.border_strong_01
},
gray_100__disabled: {
color: _carbonReactNativeElements.Color.Token.gray_100.text_disabled,
borderBlockEndColor: 'transparent'
},
gray_100__read_only: {
color: _carbonReactNativeElements.Color.Token.gray_100.text_primary,
borderBlockEndColor: _carbonReactNativeElements.Color.Token.gray_100.border_subtle_00
}
}),
mapPlaceholderTextColor = {
gray_10: _carbonReactNativeElements.Color.Token.gray_10.text_placeholder,
gray_100: _carbonReactNativeElements.Color.Token.gray_100.text_placeholder
},
mapStateStyleSheet = {
gray_10: {
normal: stateStyleSheet.gray_10__normal,
disabled: stateStyleSheet.gray_10__disabled,
read_only: stateStyleSheet.gray_10__read_only,
invalid: stateStyleSheet.gray_10__normal,
warning: stateStyleSheet.gray_10__normal
},
gray_100: {
normal: stateStyleSheet.gray_100__normal,
disabled: stateStyleSheet.gray_100__disabled,
read_only: stateStyleSheet.gray_100__read_only,
invalid: stateStyleSheet.gray_100__normal,
warning: stateStyleSheet.gray_100__normal
}
};
//# sourceMappingURL=RNTextInput.js.map