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

package/src/components/text-area-fluid/TextAreaFluid.tsx

@@ -0,0 +1,157 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import {
+	StyleSheet,
+} from "react-native"
+
+import {
+	Color,
+	Spacing,
+} from "@audira/carbon-react-native-elements"
+
+import IconWarningAltFilled16 from "@carbon/icons/svg/32/warning--alt--filled.svg"
+import IconWarningFilled16 from "@carbon/icons/svg/32/warning--filled.svg"
+
+import {
+	FlexStyleSheet,
+} from "../../_internal/style-sheets"
+
+import {
+	ThemeContext,
+} from "../../contexts"
+
+import type {
+	ThemeType,
+} from "../../types"
+
+import {
+	FormHelperText,
+} from "../form-helper-text"
+
+import {
+	FormLabel,
+} from "../form-label"
+
+import {
+	TextAreaField,
+} from "../text-area-field"
+
+import type {
+	TextAreaFluidProps,
+} from "./TextAreaFluidProps"
+
+import type {
+	TextAreaFluidRef,
+} from "./TextAreaFluidRef"
+
+export const TextAreaFluid = forwardRef<TextAreaFluidRef, TextAreaFluidProps>(
+	function TextAreaFluid(
+		{
+			label,
+			helperText,
+			interactiveState,
+			style,
+			textInputStyle,
+			...textInputFieldProps
+		},
+		ref,
+	) {
+
+		const
+			themeContext =
+				useContext(ThemeContext)
+
+		return (
+			<TextAreaField
+				ref={ ref }
+				{ ...textInputFieldProps }
+				interactiveState={ interactiveState }
+				hideInteractiveStateIcon
+				blockStartNode={
+					<FormLabel
+						label={ label }
+						style={ styleSheet.label }
+					/>
+				}
+				blockEndNode={
+					!!helperText?.length && (
+						<FormHelperText
+							text={ helperText }
+							style={ [
+								FlexStyleSheet.flex_initial,
+								styleSheet.helperText,
+							] }
+							textTrailing={
+								interactiveState === "invalid" ? (
+									<IconWarningFilled16
+										width={ 16 }
+										height={ 16 }
+										fill={ mapIconInvalidColor[themeContext.colorScheme] }
+									/>
+								) : interactiveState === "warning" ? (
+									<IconWarningAltFilled16
+										width={ 16 }
+										height={ 16 }
+										fill={ mapIconWarningColor[themeContext.colorScheme] }
+									/>
+								) : undefined
+							}
+						/>
+					)
+				}
+				style={ [
+					styleSheet.textAreaFluid,
+					style,
+				] }
+				textInputStyle={ [
+					helperText?.length
+						? styleSheet.rnTextInputNoBorderBottom
+						: undefined,
+					textInputStyle,
+				] }
+			/>
+		)
+
+	},
+)
+
+const
+	styleSheet =
+		StyleSheet.create({
+			textAreaFluid: {
+				paddingTop: 13,
+				minHeight: 64 + 11,
+			},
+			label: {
+				paddingLeft: Spacing.spacing_05,
+				paddingRight: Spacing.spacing_05,
+			},
+			rnTextInputNoBorderBottom: {
+				marginLeft: Spacing.spacing_05,
+				marginRight: Spacing.spacing_05,
+				paddingLeft: 0,
+				paddingRight: 0,
+			},
+			helperText: {
+				justifyContent: "space-between",
+				paddingTop: Spacing.spacing_03,
+				paddingBottom: Spacing.spacing_03,
+				paddingLeft: Spacing.spacing_05,
+				paddingRight: Spacing.spacing_05,
+			},
+		}),
+
+	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,
+		}

package/src/components/text-area-fluid/TextAreaFluidProps.ts

@@ -0,0 +1,13 @@
+import type {
+	TextAreaFieldProps,
+} from "../text-area-field/TextAreaFieldProps"
+
+export interface TextAreaFluidProps extends Omit<
+	TextAreaFieldProps,
+	| "hideInteractiveStateIcon"
+	| "blockStartNodes"
+	| "blockEndNodes"
+> {
+	label: string,
+	helperText?: string,
+}

package/src/components/text-area-fluid/TextAreaFluidRef.ts

@@ -0,0 +1,6 @@
+import type {
+	TextAreaFieldRef,
+} from "../text-area-field/TextAreaFieldRef"
+
+export interface TextAreaFluidRef extends TextAreaFieldRef {
+}

package/src/components/text-area-fluid/index.tsx

@@ -0,0 +1,3 @@
+export * from "./TextAreaFluid"
+export type * from "./TextAreaFluidProps"
+export type * from "./TextAreaFluidRef"

package/src/components/text-input/TextInput.tsx

@@ -0,0 +1,270 @@
+import {
+	forwardRef,
+	useImperativeHandle,
+	useRef,
+} from "react"
+
+import {
+	StyleSheet,
+	View,
+} from "react-native"
+
+import {
+	Spacing,
+} from "@audira/carbon-react-native-elements"
+
+import {
+	FormHelperText,
+} from "../form-helper-text"
+
+import {
+	FormLabel,
+} from "../form-label"
+
+import {
+	TextInputField,
+	type TextInputFieldRef,
+} from "../text-input-field"
+
+import type {
+	TextInputProps,
+} from "./TextInputProps"
+
+import type {
+	TextInputRef,
+} from "./TextInputRef"
+
+import type {
+	TextInputRefBase,
+} from "./_TextInputRefBase"
+
+export const TextInput = forwardRef<TextInputRef, TextInputProps>(
+	function TextInput(
+		{
+			label,
+			helperText,
+
+			// hoist the `TextInputFieldProps`
+			size = "medium",
+			interactiveState = "normal",
+			textInputStyle,
+			// -----
+
+			// hoist TextInputProps of React Native
+			allowFontScaling,
+			autoCapitalize,
+			autoComplete,
+			autoCorrect,
+			autoFocus,
+			blurOnSubmit,
+			submitBehavior,
+			caretHidden,
+			contextMenuHidden,
+			defaultValue,
+			value,
+			editable,
+			keyboardType,
+			inputMode,
+			maxLength,
+			multiline,
+			onBlur,
+			onChange,
+			onChangeText,
+			onContentSizeChange,
+			onEndEditing,
+			onPress,
+			onPressIn,
+			onPressOut,
+			onFocus,
+			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,
+			// -----
+
+			style: viewStyleProp,
+			...viewProps
+		},
+		ref,
+	) {
+
+		const
+			viewRef =
+				useRef<View>(null),
+
+			textInputFieldRef =
+				useRef<TextInputFieldRef>(null)
+
+		useImperativeHandle(ref, () => {
+			return Object.assign<View, TextInputRefBase>(
+				viewRef.current ?? {
+				} as View,
+				{
+					get textInputField() {
+						return textInputFieldRef.current ?? undefined
+					},
+				},
+			)
+		}, [])
+
+		return (
+			<View
+				{ ...viewProps }
+				ref={ viewRef }
+				style={ viewStyleProp }
+			>
+				<FormLabel
+					label={ label }
+					style={ styleSheet.label }
+				/>
+
+				<TextInputField
+					ref={ textInputFieldRef }
+					size={ size }
+					interactiveState={ interactiveState }
+					textInputStyle={ textInputStyle }
+
+					allowFontScaling={ allowFontScaling }
+					autoCapitalize={ autoCapitalize }
+					autoComplete={ autoComplete }
+					autoCorrect={ autoCorrect }
+					autoFocus={ autoFocus }
+					blurOnSubmit={ blurOnSubmit }
+					submitBehavior={ submitBehavior }
+					caretHidden={ caretHidden }
+					contextMenuHidden={ contextMenuHidden }
+					defaultValue={ defaultValue }
+					value={ value }
+					editable={ editable }
+					keyboardType={ keyboardType }
+					inputMode={ inputMode }
+					maxLength={ maxLength }
+					multiline={ multiline }
+					onBlur={ onBlur }
+					onChange={ onChange }
+					onChangeText={ onChangeText }
+					onContentSizeChange={ onContentSizeChange }
+					onEndEditing={ onEndEditing }
+					onPress={ onPress }
+					onPressIn={ onPressIn }
+					onPressOut={ onPressOut }
+					onFocus={ onFocus }
+					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 }
+				/>
+
+				{ !!helperText?.length && (
+					<FormHelperText
+						text={ helperText }
+						error={ interactiveState === "invalid" }
+						style={ styleSheet.helperText }
+					/>
+				) }
+			</View>
+		)
+
+	},
+)
+
+const
+	styleSheet =
+		StyleSheet.create({
+			label: {
+				marginBottom: Spacing.spacing_03,
+			},
+			helperText: {
+				marginTop: Spacing.spacing_02,
+			},
+		})

package/src/components/text-input/TextInputProps.ts

@@ -0,0 +1,13 @@
+import type {
+	TextInputFieldProps,
+} from "../text-input-field/TextInputFieldProps"
+
+export interface TextInputProps extends Omit<
+	TextInputFieldProps,
+	| "hideInteractiveStateIcon"
+	| "blockStartNodes"
+	| "blockEndNodes"
+> {
+	label: string,
+	helperText?: string,
+}

package/src/components/text-input/TextInputRef.ts

@@ -0,0 +1,10 @@
+import type {
+	View,
+} from "react-native"
+
+import type {
+	TextInputRefBase,
+} from "./_TextInputRefBase"
+
+export interface TextInputRef extends View, TextInputRefBase {
+}

package/src/components/text-input/TextInputSize.ts

@@ -0,0 +1,5 @@
+import type {
+	TextInputFieldSize,
+} from "../text-input-field/TextInputFieldSize"
+
+export type TextInputSize = TextInputFieldSize

package/src/components/text-input/_TextInputRefBase.ts

@@ -0,0 +1,7 @@
+import type {
+	TextInputFieldRef,
+} from "../text-input-field/TextInputFieldRef"
+
+export interface TextInputRefBase {
+	readonly textInputField?: TextInputFieldRef,
+}

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

@@ -0,0 +1,4 @@
+export * from "./TextInput"
+export type * from "./TextInputProps"
+export type * from "./TextInputRef"
+export type * from "./TextInputSize"