@audira/carbon-react-native
Version:
Build React Native apps with component and shared patterns using Carbon
303 lines (299 loc) • 9.86 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TextInputField = 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("../../carbon-style-sheet/index.js");
var _index2 = require("../../contexts/index.js");
var _index3 = require("../layer/index.js");
var _index4 = require("./_rn-text-input/index.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const TextInputField = exports.TextInputField = /*#__PURE__*/(0, _react.forwardRef)(function TextInputField({
size = 'medium',
interactiveState = 'normal',
hideInteractiveStateIcon,
blockStartNode,
blockEndNode,
style,
textInputStyle,
// hoist TextInputProps of React Native
allowFontScaling,
autoCapitalize,
autoComplete,
autoCorrect,
autoFocus,
blurOnSubmit,
submitBehavior,
caretHidden,
contextMenuHidden,
defaultValue,
value,
editable,
keyboardType,
inputMode,
maxLength,
multiline,
onBlur: onBlurProp,
onChange,
onChangeText,
onContentSizeChange,
onEndEditing,
onPress,
onPressIn,
onPressOut,
onFocus: onFocusProp,
onSelectionChange,
onSubmitEditing,
onScroll,
onKeyPress,
placeholder,
placeholderTextColor,
readOnly,
returnKeyType,
enterKeyHint,
secureTextEntry,
selectTextOnFocus,
selection,
selectionColor,
textAlign,
inputAccessoryViewID,
inputAccessoryViewButtonLabel,
maxFontSizeMultiplier,
// -----
// hoist TextInputAndroidProps
cursorColor,
selectionHandleColor,
importantForAutofill,
disableFullscreenUI,
inlineImageLeft,
inlineImagePadding,
numberOfLines,
returnKeyLabel,
textBreakStrategy,
underlineColorAndroid,
textAlignVertical,
showSoftInputOnFocus,
verticalAlign,
// -----
// hoist TextInputIOSProps
disableKeyboardShortcuts,
clearButtonMode,
clearTextOnFocus,
dataDetectorTypes,
enablesReturnKeyAutomatically,
keyboardAppearance,
passwordRules,
rejectResponderTermination,
selectionState,
spellCheck,
textContentType,
scrollEnabled,
lineBreakStrategyIOS,
lineBreakModeIOS,
smartInsertDelete,
// -----
...viewProps
}, ref) {
const themeContext = (0, _react.useContext)(_index2.ThemeContext),
layerContextLevel = (0, _react.useContext)(_index3.LayerContext),
viewRef = (0, _react.useRef)(null),
textInputRef = (0, _react.useRef)(null),
/**
* 0 = Blurred
* 1 = Focused
*/
focusAnimatedValue = (0, _react.useRef)(new _reactNative.Animated.Value(0)),
focusHandler = event => {
_reactNative.Animated.timing(focusAnimatedValue.current, {
toValue: 1,
...timingConfig
}).start();
onFocusProp?.(event);
},
blurHandler = event => {
_reactNative.Animated.timing(focusAnimatedValue.current, {
toValue: 0,
...timingConfig
}).start();
onBlurProp?.(event);
};
(0, _react.useImperativeHandle)(ref, () => {
return Object.assign(viewRef.current ?? {}, {
get textInput() {
return textInputRef.current ?? undefined;
}
});
}, []);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
ref: ref,
...viewProps,
style: [styleSheet.textInputField, carbonStyleSheet.textInputField, textInputFieldSizeStyleSheet[size], textInputFieldByLayerStyleSheet[layerContextLevel], interactiveState === 'invalid' ? carbonStyleSheet.invalidOutlineColor : {
outlineColor: focusAnimatedValue.current.interpolate({
inputRange: [0, 1],
outputRange: ['transparent', mapOutlineColorFocus[themeContext.colorScheme]]
})
}, style],
children: [blockStartNode, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.RNTextInput, {
ref: textInputRef,
interactiveState: interactiveState,
style: textInputStyle,
allowFontScaling: allowFontScaling,
autoCapitalize: autoCapitalize,
autoComplete: autoComplete,
autoCorrect: autoCorrect,
autoFocus: autoFocus,
blurOnSubmit: blurOnSubmit,
submitBehavior: submitBehavior,
caretHidden: caretHidden,
contextMenuHidden: contextMenuHidden,
defaultValue: defaultValue,
value: value,
editable: interactiveState === 'disabled' || interactiveState === 'read_only' ? false : editable,
keyboardType: keyboardType,
inputMode: inputMode,
maxLength: maxLength,
multiline: multiline,
onBlur: blurHandler,
onChange: onChange,
onChangeText: onChangeText,
onContentSizeChange: onContentSizeChange,
onEndEditing: onEndEditing,
onPress: onPress,
onPressIn: onPressIn,
onPressOut: onPressOut,
onFocus: focusHandler,
onSelectionChange: onSelectionChange,
onSubmitEditing: onSubmitEditing,
onScroll: onScroll,
onKeyPress: onKeyPress,
placeholder: placeholder,
placeholderTextColor: placeholderTextColor,
readOnly: readOnly,
returnKeyType: returnKeyType,
enterKeyHint: enterKeyHint,
secureTextEntry: secureTextEntry,
selectTextOnFocus: selectTextOnFocus,
selection: selection,
selectionColor: selectionColor,
textAlign: textAlign,
inputAccessoryViewID: inputAccessoryViewID,
inputAccessoryViewButtonLabel: inputAccessoryViewButtonLabel,
maxFontSizeMultiplier: maxFontSizeMultiplier,
cursorColor: cursorColor,
selectionHandleColor: selectionHandleColor,
importantForAutofill: importantForAutofill,
disableFullscreenUI: disableFullscreenUI,
inlineImageLeft: inlineImageLeft,
inlineImagePadding: inlineImagePadding,
numberOfLines: numberOfLines,
returnKeyLabel: returnKeyLabel,
textBreakStrategy: textBreakStrategy,
underlineColorAndroid: underlineColorAndroid,
textAlignVertical: textAlignVertical,
showSoftInputOnFocus: showSoftInputOnFocus,
verticalAlign: verticalAlign,
disableKeyboardShortcuts: disableKeyboardShortcuts,
clearButtonMode: clearButtonMode,
clearTextOnFocus: clearTextOnFocus,
dataDetectorTypes: dataDetectorTypes,
enablesReturnKeyAutomatically: enablesReturnKeyAutomatically,
keyboardAppearance: keyboardAppearance,
passwordRules: passwordRules,
rejectResponderTermination: rejectResponderTermination,
selectionState: selectionState,
spellCheck: spellCheck,
textContentType: textContentType,
scrollEnabled: scrollEnabled,
lineBreakStrategyIOS: lineBreakStrategyIOS,
lineBreakModeIOS: lineBreakModeIOS,
smartInsertDelete: smartInsertDelete
}), !hideInteractiveStateIcon && interactiveState === 'invalid' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_warningFilled.default, {
width: 16,
height: 16,
fill: mapIconInvalidColor[themeContext.colorScheme],
style: [styleSheet.icon, iconBySizeStyleSheet[size]]
}) : !hideInteractiveStateIcon && interactiveState === 'warning' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_warningAltFilled.default, {
width: 16,
height: 16,
fill: mapIconWarningColor[themeContext.colorScheme],
style: [styleSheet.icon, iconBySizeStyleSheet[size]]
}) : undefined, blockEndNode]
});
});
const styleSheet = _reactNative.StyleSheet.create({
textInputField: {
outlineWidth: 2,
outlineOffset: -2,
outlineStyle: 'solid'
},
icon: {
pointerEvents: 'none',
position: 'absolute',
right: _carbonReactNativeElements.Spacing.spacing_05
}
}),
textInputFieldSizeStyleSheet = _reactNative.StyleSheet.create({
small: {
height: 32
},
medium: {
height: 40
},
large: {
height: 48
}
}),
iconBySizeStyleSheet = _reactNative.StyleSheet.create({
small: {
top: 32 / 2 - 8
},
medium: {
top: 40 / 2 - 8
},
large: {
top: 48 / 2 - 8
}
}),
carbonStyleSheet = _index.CarbonStyleSheet.create({
textInputField: {
backgroundColor: _index.CarbonStyleSheet.color.field_02
},
invalidOutlineColor: {
outlineColor: _index.CarbonStyleSheet.color.support_error
}
}),
textInputFieldByLayerStyleSheet = _index.CarbonStyleSheet.create({
1: {
backgroundColor: _index.CarbonStyleSheet.color.field_01
},
2: {
backgroundColor: _index.CarbonStyleSheet.color.field_02
},
3: {
backgroundColor: _index.CarbonStyleSheet.color.field_03
}
}),
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
},
mapOutlineColorFocus = {
gray_10: _carbonReactNativeElements.Color.Token.gray_10.focus,
gray_100: _carbonReactNativeElements.Color.Token.gray_100.focus
},
timingConfig = {
duration: _carbonReactNativeElements.Motion.Duration.fast_01,
easing: _reactNative.Easing.bezier(_carbonReactNativeElements.Motion.Easing.standard.productive.x1, _carbonReactNativeElements.Motion.Easing.standard.productive.y1, _carbonReactNativeElements.Motion.Easing.standard.productive.x2, _carbonReactNativeElements.Motion.Easing.standard.productive.y2),
useNativeDriver: false // outlineColor doesn't support native driver
};
//# sourceMappingURL=TextInputField.js.map