@audira/carbon-react-native
Version:
Build React Native apps with component and shared patterns using Carbon
298 lines (294 loc) • 9.05 kB
JavaScript
"use strict";
import { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
import { Animated, Easing, StyleSheet } from 'react-native';
import { Color, Motion, Spacing } from '@audira/carbon-react-native-elements';
import IconWarningAltFilled from '@carbon/icons/svg/32/warning--alt--filled.svg';
import IconWarningFilled from '@carbon/icons/svg/32/warning--filled.svg';
import { CarbonStyleSheet } from "../../carbon-style-sheet/index.js";
import { ThemeContext } from "../../contexts/index.js";
import { LayerContext } from "../layer/index.js";
import { RNTextInput } from "./_rn-text-input/index.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const TextInputField = /*#__PURE__*/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 = useContext(ThemeContext),
layerContextLevel = useContext(LayerContext),
viewRef = useRef(null),
textInputRef = useRef(null),
/**
* 0 = Blurred
* 1 = Focused
*/
focusAnimatedValue = useRef(new Animated.Value(0)),
focusHandler = event => {
Animated.timing(focusAnimatedValue.current, {
toValue: 1,
...timingConfig
}).start();
onFocusProp?.(event);
},
blurHandler = event => {
Animated.timing(focusAnimatedValue.current, {
toValue: 0,
...timingConfig
}).start();
onBlurProp?.(event);
};
useImperativeHandle(ref, () => {
return Object.assign(viewRef.current ?? {}, {
get textInput() {
return textInputRef.current ?? undefined;
}
});
}, []);
return /*#__PURE__*/_jsxs(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__*/_jsx(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__*/_jsx(IconWarningFilled, {
width: 16,
height: 16,
fill: mapIconInvalidColor[themeContext.colorScheme],
style: [styleSheet.icon, iconBySizeStyleSheet[size]]
}) : !hideInteractiveStateIcon && interactiveState === 'warning' ? /*#__PURE__*/_jsx(IconWarningAltFilled, {
width: 16,
height: 16,
fill: mapIconWarningColor[themeContext.colorScheme],
style: [styleSheet.icon, iconBySizeStyleSheet[size]]
}) : undefined, blockEndNode]
});
});
const styleSheet = StyleSheet.create({
textInputField: {
outlineWidth: 2,
outlineOffset: -2,
outlineStyle: 'solid'
},
icon: {
pointerEvents: 'none',
position: 'absolute',
right: Spacing.spacing_05
}
}),
textInputFieldSizeStyleSheet = StyleSheet.create({
small: {
height: 32
},
medium: {
height: 40
},
large: {
height: 48
}
}),
iconBySizeStyleSheet = StyleSheet.create({
small: {
top: 32 / 2 - 8
},
medium: {
top: 40 / 2 - 8
},
large: {
top: 48 / 2 - 8
}
}),
carbonStyleSheet = CarbonStyleSheet.create({
textInputField: {
backgroundColor: CarbonStyleSheet.color.field_02
},
invalidOutlineColor: {
outlineColor: CarbonStyleSheet.color.support_error
}
}),
textInputFieldByLayerStyleSheet = CarbonStyleSheet.create({
1: {
backgroundColor: CarbonStyleSheet.color.field_01
},
2: {
backgroundColor: CarbonStyleSheet.color.field_02
},
3: {
backgroundColor: CarbonStyleSheet.color.field_03
}
}),
mapIconInvalidColor = {
gray_10: Color.Token.gray_10.support_error,
gray_100: Color.Token.gray_100.support_error
},
mapIconWarningColor = {
gray_10: Color.Token.gray_10.support_warning,
gray_100: Color.Token.gray_100.support_warning
},
mapOutlineColorFocus = {
gray_10: Color.Token.gray_10.focus,
gray_100: Color.Token.gray_100.focus
},
timingConfig = {
duration: Motion.Duration.fast_01,
easing: Easing.bezier(Motion.Easing.standard.productive.x1, Motion.Easing.standard.productive.y1, Motion.Easing.standard.productive.x2, Motion.Easing.standard.productive.y2),
useNativeDriver: false // outlineColor doesn't support native driver
};
//# sourceMappingURL=TextInputField.js.map