@audira/carbon-react-native 1.0.0-beta.7 → 1.0.0-beta.8

package/src/components/text-input-field/TextInputField.tsx

@@ -0,0 +1,435 @@
+import {
+	forwardRef,
+	useContext,
+	useImperativeHandle,
+	useRef,
+} from "react"
+
+import {
+	Animated,
+	Easing,
+	StyleSheet,
+	TextInput,
+	type View,
+	type ViewStyle,
+} from "react-native"
+
+import {
+	Color,
+	Motion,
+	Spacing,
+	type ColorLayerLevel,
+} 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"
+
+import {
+	ThemeContext,
+} from "../../contexts"
+
+import type {
+	ThemeType,
+} from "../../types"
+
+import {
+	LayerContext,
+} from "../layer"
+
+import type {
+	TextInputFieldProps,
+} from "./TextInputFieldProps"
+
+import type {
+	TextInputFieldRef,
+} from "./TextInputFieldRef"
+
+import type {
+	TextInputFieldSize,
+} from "./TextInputFieldSize"
+
+import {
+	RNTextInput,
+} from "./_rn-text-input"
+
+export const TextInputField = forwardRef<TextInputFieldRef, TextInputFieldProps>(
+	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<View>(null),
+
+			textInputRef =
+				useRef<TextInput>(null),
+			/**
+			 * 0 = Blurred
+			 * 1 = Focused
+			 */
+			focusAnimatedValue =
+				useRef(new Animated.Value(0)),
+
+			focusHandler: TextInputFieldProps["onFocus"] =
+				event => {
+					Animated
+						.timing(
+							focusAnimatedValue.current,
+							{
+								toValue: 1,
+								...timingConfig,
+							},
+						)
+						.start()
+					onFocusProp?.(event)
+				},
+
+			blurHandler: TextInputFieldProps["onBlur"] =
+				event => {
+					Animated
+						.timing(
+							focusAnimatedValue.current,
+							{
+								toValue: 0,
+								...timingConfig,
+							},
+						)
+						.start()
+					onBlurProp?.(event)
+				}
+
+		useImperativeHandle(ref, () => {
+			return Object.assign(
+				viewRef.current ?? {
+				} as View,
+				{
+					get textInput() {
+						return textInputRef.current ?? undefined
+					},
+				},
+			)
+		}, [])
+
+		return (
+			<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,
+				] }
+			>
+				{ blockStartNode }
+
+				<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" ? (
+					<IconWarningFilled
+						width={ 16 }
+						height={ 16 }
+						fill={ mapIconInvalidColor[themeContext.colorScheme] }
+						style={ [
+							styleSheet.icon,
+							iconBySizeStyleSheet[size],
+						] }
+					/>
+				) : !hideInteractiveStateIcon && interactiveState === "warning" ? (
+					<IconWarningAltFilled
+						width={ 16 }
+						height={ 16 }
+						fill={ mapIconWarningColor[themeContext.colorScheme] }
+						style={ [
+							styleSheet.icon,
+							iconBySizeStyleSheet[size],
+						] }
+					/>
+				) : undefined }
+
+				{ blockEndNode }
+			</Animated.View>
+		)
+
+	},
+)
+
+const
+	styleSheet =
+		StyleSheet.create({
+			textInputField: {
+				outlineWidth: 2,
+				outlineOffset: -2,
+				outlineStyle: "solid",
+			},
+			icon: {
+				pointerEvents: "none",
+				position: "absolute",
+				right: Spacing.spacing_05,
+			},
+		}),
+
+	textInputFieldSizeStyleSheet =
+		StyleSheet.create<Record<TextInputFieldSize, ViewStyle>>({
+			small: {
+				height: 32,
+			},
+			medium: {
+				height: 40,
+			},
+			large: {
+				height: 48,
+			},
+		}),
+
+	iconBySizeStyleSheet =
+		StyleSheet.create<Record<TextInputFieldSize, ViewStyle>>({
+			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<Record<ColorLayerLevel, ViewStyle>>({
+			1: {
+				backgroundColor: CarbonStyleSheet.color.field_01,
+			},
+			2: {
+				backgroundColor: CarbonStyleSheet.color.field_02,
+			},
+			3: {
+				backgroundColor: CarbonStyleSheet.color.field_03,
+			},
+		}),
+
+	mapIconInvalidColor: Record<ThemeType.ColorScheme, string> =
+		{
+			gray_10: Color.Token.gray_10.support_error,
+			gray_100: Color.Token.gray_100.support_error,
+		},
+
+	mapIconWarningColor: Record<ThemeType.ColorScheme, string> =
+		{
+			gray_10: Color.Token.gray_10.support_warning,
+			gray_100: Color.Token.gray_100.support_warning,
+		},
+
+	mapOutlineColorFocus: Record<ThemeType.ColorScheme, string> =
+		{
+			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
+		} as const satisfies Omit<Animated.TimingAnimationConfig, "toValue">

package/src/components/text-input-field/TextInputFieldInteractiveState.ts

@@ -0,0 +1,6 @@
+export type TextInputFieldInteractiveState =
+	| "normal"
+	| "disabled"
+	| "invalid"
+	| "read_only"
+	| "warning"

package/src/components/text-input-field/TextInputFieldProps.ts

@@ -0,0 +1,31 @@
+import type {
+	TextInputProps,
+	ViewProps,
+} from "react-native"
+
+import type {
+	TextInputFieldInteractiveState,
+} from "./TextInputFieldInteractiveState"
+
+import type {
+	TextInputFieldSize,
+} from "./TextInputFieldSize"
+
+export interface TextInputFieldProps extends Omit<TextInputProps, "style"> {
+	/**
+	 * @default 'medium'
+	 */
+	size?: TextInputFieldSize,
+	/**
+	 * @default 'normal'
+	 */
+	interactiveState?: TextInputFieldInteractiveState,
+	hideInteractiveStateIcon?: boolean,
+	blockStartNode?: React.ReactNode,
+	blockEndNode?: React.ReactNode,
+	style?: ViewProps["style"],
+	/**
+	 * The actual style prop of RN's TextInput
+	 */
+	textInputStyle?: TextInputProps["style"],
+}

package/src/components/text-input-field/TextInputFieldRef.ts

@@ -0,0 +1,8 @@
+import type {
+	TextInput,
+	View,
+} from "react-native"
+
+export interface TextInputFieldRef extends View {
+	readonly textInput?: TextInput,
+}

package/src/components/text-input-field/TextInputFieldSize.ts

@@ -0,0 +1,4 @@
+export type TextInputFieldSize =
+	| "small"
+	| "medium"
+	| "large"

package/src/components/text-input-field/_rn-text-input/RNTextInput.tsx

@@ -0,0 +1,161 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import {
+	Platform,
+	StyleSheet,
+	TextInput,
+	type TextStyle,
+} from "react-native"
+
+import {
+	Color,
+	Spacing,
+	Typography,
+} from "@audira/carbon-react-native-elements"
+
+import {
+	GlobalConfigContext,
+} from "../../../_internal/contexts"
+
+import {
+	CommonStyleSheet,
+} from "../../../_internal/style-sheets"
+
+import {
+	ThemeContext,
+} from "../../../contexts"
+
+import type {
+	ThemeType,
+} from "../../../types"
+
+import type {
+	TextInputFieldInteractiveState,
+} from "../TextInputFieldInteractiveState"
+
+import type {
+	RNTextInputProps,
+} from "./RNTextInputProps"
+
+import type {
+	RNTextInputRef,
+} from "./RNTextInputRef"
+
+export const RNTextInput = forwardRef<RNTextInputRef, RNTextInputProps>(
+	function RNTextInput(
+		{
+			interactiveState,
+			editable,
+			style,
+			placeholderTextColor,
+			dir,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			themeContext =
+				useContext(ThemeContext),
+
+			globalConfigContext =
+				useContext(GlobalConfigContext)
+
+		return (
+			<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 as unknown as never, // FIXME: i don't know the correct type
+					mapStateStyleSheet[themeContext.colorScheme][interactiveState],
+					globalConfigContext.rtl ? CommonStyleSheet.rtl : undefined,
+					style,
+				] }
+			/>
+		)
+
+	},
+)
+
+const
+	styleSheet =
+		StyleSheet.create({
+			rnTextInput: {
+				flexGrow: 1,
+				paddingLeft: Spacing.spacing_05,
+				paddingRight: Spacing.spacing_05,
+				backgroundColor: "transparent",
+				borderBottomWidth: StyleSheet.hairlineWidth,
+				borderStyle: "solid",
+				fontFamily: "IBMPlexSans-Regular",
+				fontSize: Typography.TypeSets.body_compact_01.fontSize,
+				lineHeight: Typography.TypeSets.body_compact_01.lineHeight,
+				...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 =
+		StyleSheet.create<Record<`${ThemeType.ColorScheme}__${Exclude<TextInputFieldInteractiveState, "invalid" | "warning">}`, TextStyle>>({
+			gray_10__normal: {
+				color: Color.Token.gray_10.text_primary,
+				borderBlockEndColor: Color.Token.gray_10.border_strong_01,
+			},
+			gray_10__disabled: {
+				color: Color.Token.gray_10.text_disabled,
+				borderBlockEndColor: "transparent",
+			},
+			gray_10__read_only: {
+				color: Color.Token.gray_10.text_primary,
+				borderBlockEndColor: Color.Token.gray_10.border_subtle_00,
+			},
+
+			gray_100__normal: {
+				color: Color.Token.gray_100.text_primary,
+				borderBlockEndColor: Color.Token.gray_100.border_strong_01,
+			},
+			gray_100__disabled: {
+				color: Color.Token.gray_100.text_disabled,
+				borderBlockEndColor: "transparent",
+			},
+			gray_100__read_only: {
+				color: Color.Token.gray_100.text_primary,
+				borderBlockEndColor: Color.Token.gray_100.border_subtle_00,
+			},
+		}),
+
+	mapPlaceholderTextColor: Record<ThemeType.ColorScheme, string> =
+		{
+			gray_10: Color.Token.gray_10.text_placeholder,
+			gray_100: Color.Token.gray_100.text_placeholder,
+		},
+
+	mapStateStyleSheet: Record<ThemeType.ColorScheme, Record<TextInputFieldInteractiveState, TextStyle>> =
+		{
+			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,
+			},
+		}

package/src/components/text-input-field/_rn-text-input/RNTextInputProps.ts

@@ -0,0 +1,11 @@
+import type {
+	TextInputProps,
+} from "react-native"
+
+import type {
+	TextInputFieldInteractiveState,
+} from "../TextInputFieldInteractiveState"
+
+export interface RNTextInputProps extends TextInputProps {
+	interactiveState: TextInputFieldInteractiveState,
+}

package/src/components/text-input-field/_rn-text-input/RNTextInputRef.ts

@@ -0,0 +1,6 @@
+import type {
+	TextInput,
+} from "react-native"
+
+export interface RNTextInputRef extends TextInput {
+}

package/src/components/text-input-field/_rn-text-input/index.ts

@@ -0,0 +1,3 @@
+export * from "./RNTextInput"
+export type * from "./RNTextInputProps"
+export type * from "./RNTextInputRef"

package/src/components/text-input-field/index.tsx

@@ -0,0 +1,5 @@
+export * from "./TextInputField"
+export type * from "./TextInputFieldInteractiveState"
+export type * from "./TextInputFieldProps"
+export type * from "./TextInputFieldRef"
+export type * from "./TextInputFieldSize"