@audira/carbon-react-native
Version:
Build React Native apps with component and shared patterns using Carbon
91 lines (90 loc) • 3.82 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TextInputFluid = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _carbonReactNativeElements = require("@audira/carbon-react-native-elements");
var _warningAltFilled = _interopRequireDefault(require("@carbon/icons/svg/32/warning--alt--filled.svg"));
var _warningFilled = _interopRequireDefault(require("@carbon/icons/svg/32/warning--filled.svg"));
var _index = require("../../_internal/style-sheets/index.js");
var _index2 = require("../../contexts/index.js");
var _index3 = require("../form-helper-text/index.js");
var _index4 = require("../form-label/index.js");
var _index5 = require("../text-input-field/index.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const TextInputFluid = exports.TextInputFluid = /*#__PURE__*/(0, _react.forwardRef)(function TextInputFluid({
label,
helperText,
interactiveState,
style,
textInputStyle,
...textInputFieldProps
}, ref) {
const themeContext = (0, _react.useContext)(_index2.ThemeContext);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.TextInputField, {
ref: ref,
...textInputFieldProps,
size: "medium",
interactiveState: interactiveState,
hideInteractiveStateIcon: true,
blockStartNode: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.FormLabel, {
label: label,
style: styleSheet.label
}),
blockEndNode: !!helperText?.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.FormHelperText, {
text: helperText,
style: [_index.FlexStyleSheet.flex_initial, styleSheet.helperText],
textTrailing: interactiveState === 'invalid' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_warningFilled.default, {
width: 16,
height: 16,
fill: mapIconInvalidColor[themeContext.colorScheme]
}) : interactiveState === 'warning' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_warningAltFilled.default, {
width: 16,
height: 16,
fill: mapIconWarningColor[themeContext.colorScheme]
}) : undefined
}),
style: [styleSheet.textInputFluid, helperText?.length ? styleSheet.textInputFieldHeight96 : styleSheet.textInputFieldHeight64, style],
textInputStyle: [helperText?.length ? styleSheet.rnTextInputNoBorderBottom : undefined, textInputStyle]
});
});
const styleSheet = _reactNative.StyleSheet.create({
textInputFluid: {
paddingTop: 13
},
textInputFieldHeight64: {
height: _carbonReactNativeElements.Spacing.spacing_10
},
textInputFieldHeight96: {
minHeight: _carbonReactNativeElements.Spacing.spacing_12
},
label: {
paddingLeft: _carbonReactNativeElements.Spacing.spacing_05,
paddingRight: _carbonReactNativeElements.Spacing.spacing_05
},
rnTextInputNoBorderBottom: {
marginLeft: _carbonReactNativeElements.Spacing.spacing_05,
marginRight: _carbonReactNativeElements.Spacing.spacing_05,
paddingLeft: 0,
paddingRight: 0
},
helperText: {
justifyContent: 'space-between',
paddingTop: _carbonReactNativeElements.Spacing.spacing_03,
paddingBottom: _carbonReactNativeElements.Spacing.spacing_03,
paddingLeft: _carbonReactNativeElements.Spacing.spacing_05,
paddingRight: _carbonReactNativeElements.Spacing.spacing_05
}
}),
mapIconInvalidColor = {
gray_10: _carbonReactNativeElements.Color.Token.gray_10.support_error,
gray_100: _carbonReactNativeElements.Color.Token.gray_100.support_error
},
mapIconWarningColor = {
gray_10: _carbonReactNativeElements.Color.Token.gray_10.support_warning,
gray_100: _carbonReactNativeElements.Color.Token.gray_100.support_warning
};
//# sourceMappingURL=TextInputFluid.js.map