@audira/carbon-react-native 1.0.0-beta.15 → 1.0.0-beta.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@audira/carbon-react-native",
-  "version": "1.0.0-beta.15",
+  "version": "1.0.0-beta.17",
   "license": "MIT",
   "homepage": "https://rakadoank.github.io/carbon-react-native",
   "repository": "https://github.com/RakaDoank/carbon-react-native",

package/src/_internal/hooks/index.ts

@@ -0,0 +1,5 @@
+import * as SecureTextEntryControlHook from "./secure-text-entry-control"
+
+export {
+	SecureTextEntryControlHook,
+}

package/src/_internal/hooks/secure-text-entry-control/UseProps.ts

@@ -0,0 +1,4 @@
+/**
+ * The `secureTextEntry`
+ */
+export type UseProps = boolean

package/src/_internal/hooks/secure-text-entry-control/index.ts

@@ -0,0 +1,2 @@
+export type * from "./UseProps"
+export * from "./use"

package/src/_internal/hooks/secure-text-entry-control/use.tsx

@@ -0,0 +1,26 @@
+import {
+	useCallback,
+	useState,
+} from "react"
+
+import type {
+	UseProps,
+} from "./UseProps"
+
+export function use(secureTextEntryProp?: UseProps) {
+
+	const
+		[secureTextEntrySelf, setSecureTextEntrySelf] =
+			useState(true),
+
+		secureTextEntry =
+			secureTextEntryProp ?? secureTextEntrySelf,
+
+		toggleSecureTextEntrySelf =
+			useCallback(() => {
+				setSecureTextEntrySelf(bool => !bool)
+			}, [])
+
+	return [secureTextEntry, toggleSecureTextEntrySelf] as const
+
+}

package/src/components/index.tsx

@@ -22,6 +22,9 @@ export * from "./layer"
 export * from "./loading"
 export * from "./modal"
 export * from "./modal-content"
+export * from "./password-input"
+export * from "./password-input-field"
+export * from "./password-input-fluid"
 export * from "./radio-button"
 export * from "./radio-button-group"
 export * from "./radio-button-input"

package/src/components/password-input/PasswordInput.tsx

@@ -0,0 +1,61 @@
+import {
+	forwardRef,
+} from "react"
+
+import {
+	SecureTextEntryControlHook,
+} from "../../_internal/hooks"
+
+import {
+	GhostIcon,
+} from "../password-input-field/_ghost-icon"
+
+import {
+	TextInput,
+} from "../text-input"
+
+import type {
+	PasswordInputProps,
+} from "./PasswordInputProps"
+
+import type {
+	PasswordInputRef,
+} from "./PasswordInputRef"
+
+export const PasswordInput = forwardRef<PasswordInputRef, PasswordInputProps>(
+	function PasswordInput(
+		{
+			autoComplete = "current-password",
+			size = "medium",
+			secureTextEntry: secureTextEntryProp,
+			blockEndNode,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			[secureTextEntry, toggleSecureTextEntrySelf] =
+				SecureTextEntryControlHook.use(secureTextEntryProp)
+
+		return (
+			<TextInput
+				ref={ ref }
+				{ ...props }
+				autoComplete={ autoComplete }
+				size={ size }
+				secureTextEntry={ secureTextEntry }
+				blockEndNode={ (<>
+					<GhostIcon
+						inputSize={ size }
+						secureTextEntry={ secureTextEntry }
+						onPress={ toggleSecureTextEntrySelf }
+					/>
+
+					{ blockEndNode }
+				</>) }
+			/>
+		)
+
+	},
+)

package/src/components/password-input/PasswordInputProps.ts

@@ -0,0 +1,6 @@
+import type {
+	TextInputProps,
+} from "../text-input/TextInputProps"
+
+export interface PasswordInputProps extends TextInputProps {
+}

package/src/components/password-input/PasswordInputRef.ts

@@ -0,0 +1,6 @@
+import type {
+	TextInputRef,
+} from "../text-input/TextInputRef"
+
+export interface PasswordInputRef extends TextInputRef {
+}

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

@@ -0,0 +1,3 @@
+export * from "./PasswordInput"
+export type * from "./PasswordInputProps"
+export type * from "./PasswordInputRef"

package/src/components/password-input-field/PasswordInputField.tsx

@@ -0,0 +1,61 @@
+import {
+	forwardRef,
+} from "react"
+
+import {
+	SecureTextEntryControlHook,
+} from "../../_internal/hooks"
+
+import {
+	TextInputField,
+} from "../text-input-field"
+
+import type {
+	PasswordInputFieldProps,
+} from "./PasswordInputFieldProps"
+
+import type {
+	PasswordInputFieldRef,
+} from "./PasswordInputFieldRef"
+
+import {
+	GhostIcon,
+} from "./_ghost-icon"
+
+export const PasswordInputField = forwardRef<PasswordInputFieldRef, PasswordInputFieldProps>(
+	function PasswordInputField(
+		{
+			autoComplete = "current-password",
+			size = "medium",
+			secureTextEntry: secureTextEntryProp,
+			blockEndNode,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			[secureTextEntry, toggleSecureTextEntrySelf] =
+				SecureTextEntryControlHook.use(secureTextEntryProp)
+
+		return (
+			<TextInputField
+				ref={ ref }
+				{ ...props }
+				autoComplete={ autoComplete }
+				size={ size }
+				secureTextEntry={ secureTextEntry }
+				blockEndNode={ (<>
+					<GhostIcon
+						inputSize={ size }
+						secureTextEntry={ secureTextEntry }
+						onPress={ toggleSecureTextEntrySelf }
+					/>
+
+					{ blockEndNode }
+				</>) }
+			/>
+		)
+
+	},
+)

package/src/components/password-input-field/PasswordInputFieldProps.ts

@@ -0,0 +1,6 @@
+import type {
+	TextInputFieldProps,
+} from "../text-input-field/TextInputFieldProps"
+
+export interface PasswordInputFieldProps extends TextInputFieldProps {
+}

package/src/components/password-input-field/PasswordInputFieldRef.tsx

@@ -0,0 +1,6 @@
+import type {
+	TextInputFieldRef,
+} from "../text-input-field/TextInputFieldRef"
+
+export interface PasswordInputFieldRef extends TextInputFieldRef {
+}

package/src/components/password-input-field/_ghost-icon/GhostIcon.tsx

@@ -0,0 +1,71 @@
+import {
+	forwardRef,
+} from "react"
+
+import {
+	StyleSheet,
+} from "react-native"
+
+import IconViewOff from "@carbon/icons/svg/32/view--off.svg"
+import IconView from "@carbon/icons/svg/32/view.svg"
+
+import {
+	CommonStyleSheet,
+} from "../../../_internal/style-sheets"
+
+import {
+	GhostIcon as ButtonGhostIcon,
+	type GhostIconProps as ButtonGhostIconProps,
+} from "../../button/ghost-icon"
+
+import type {
+	GhostIconProps,
+} from "./GhostIconProps"
+
+import type {
+	GhostIconRef,
+} from "./GhostIconRef"
+
+export const GhostIcon = forwardRef<GhostIconRef, GhostIconProps>(
+	function GhostIcon(
+		{
+			inputSize,
+			secureTextEntry,
+			style,
+			...props
+		},
+		ref,
+	) {
+
+		return (
+			<ButtonGhostIcon
+				ref={ ref }
+				{ ...props }
+				size={ mapInputSizeToButtonSize[inputSize] }
+				Icon={ secureTextEntry ? IconView : IconViewOff }
+				style={ [
+					CommonStyleSheet.absolute,
+					styleSheet.ghostIcon,
+					style,
+				] }
+			/>
+		)
+
+	},
+)
+
+const
+	styleSheet =
+		StyleSheet.create({
+			ghostIcon: {
+				top: 0,
+				right: 0,
+			},
+		}),
+
+	mapInputSizeToButtonSize: Record<GhostIconProps["inputSize"], ButtonGhostIconProps["size"]> =
+		{
+			small: "small",
+			medium: "medium",
+			large: "large_productive",
+		}

package/src/components/password-input-field/_ghost-icon/GhostIconProps.ts

@@ -0,0 +1,12 @@
+import type {
+	GhostIconProps as Props,
+} from "../../button/ghost-icon/GhostIconProps"
+
+import type {
+	PasswordInputFieldProps,
+} from "../PasswordInputFieldProps"
+
+export interface GhostIconProps extends Omit<Props, "Icon" | "size"> {
+	inputSize: NonNullable<PasswordInputFieldProps["size"]>,
+	secureTextEntry: boolean,
+}

package/src/components/password-input-field/_ghost-icon/GhostIconRef.ts

@@ -0,0 +1,6 @@
+import type {
+	GhostIconRef as Ref,
+} from "../../button/ghost-icon/GhostIconRef"
+
+export interface GhostIconRef extends Ref {
+}

package/src/components/password-input-field/_ghost-icon/index.ts

@@ -0,0 +1,3 @@
+export * from "./GhostIcon"
+export type * from "./GhostIconProps"
+export type * from "./GhostIconRef"

package/src/components/password-input-field/index.ts

@@ -0,0 +1,3 @@
+export * from "./PasswordInputField"
+export type * from "./PasswordInputFieldProps"
+export type * from "./PasswordInputFieldRef"

package/src/components/password-input-fluid/PasswordInputFluid.tsx

@@ -0,0 +1,59 @@
+import {
+	forwardRef,
+} from "react"
+
+import {
+	SecureTextEntryControlHook,
+} from "../../_internal/hooks"
+
+import {
+	GhostIcon,
+} from "../password-input-field/_ghost-icon"
+
+import {
+	TextInputFluid,
+} from "../text-input-fluid"
+
+import type {
+	PasswordInputFluidProps,
+} from "./PasswordInputFluidProps"
+
+import type {
+	PasswordInputFluidRef,
+} from "./PasswordInputFluidRef"
+
+export const PasswordInputFluid = forwardRef<PasswordInputFluidRef, PasswordInputFluidProps>(
+	function PasswordInputFluid(
+		{
+			autoComplete = "current-password",
+			secureTextEntry: secureTextEntryProp,
+			blockEndNode,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			[secureTextEntry, toggleSecureTextEntrySelf] =
+				SecureTextEntryControlHook.use(secureTextEntryProp)
+
+		return (
+			<TextInputFluid
+				ref={ ref }
+				{ ...props }
+				autoComplete={ autoComplete }
+				secureTextEntry={ secureTextEntry }
+				blockEndNode={ (<>
+					<GhostIcon
+						inputSize="medium"
+						secureTextEntry={ secureTextEntry }
+						onPress={ toggleSecureTextEntrySelf }
+					/>
+
+					{ blockEndNode }
+				</>) }
+			/>
+		)
+
+	},
+)

package/src/components/password-input-fluid/PasswordInputFluidProps.ts

@@ -0,0 +1,6 @@
+import type {
+	TextInputFluidProps,
+} from "../text-input-fluid/TextInputFluidProps"
+
+export interface PasswordInputFluidProps extends TextInputFluidProps {
+}

package/src/components/password-input-fluid/PasswordInputFluidRef.ts

@@ -0,0 +1,6 @@
+import type {
+	TextInputFluidRef,
+} from "../text-input-fluid/TextInputFluidRef"
+
+export interface PasswordInputFluidRef extends TextInputFluidRef {
+}

package/src/components/password-input-fluid/index.ts

@@ -0,0 +1,3 @@
+export * from "./PasswordInputFluid"
+export type * from "./PasswordInputFluidProps"
+export type * from "./PasswordInputFluidRef"

package/src/components/text-area/TextArea.tsx

@@ -83,7 +83,6 @@ export const TextArea = forwardRef<TextAreaRef, TextAreaProps>(
 			readOnly,
 			returnKeyType,
 			enterKeyHint,
-			secureTextEntry,
 			selectTextOnFocus,
 			selection,
 			selectionColor,
@@ -201,7 +200,6 @@ export const TextArea = forwardRef<TextAreaRef, TextAreaProps>(
 					readOnly={ readOnly }
 					returnKeyType={ returnKeyType }
 					enterKeyHint={ enterKeyHint }
-					secureTextEntry={ secureTextEntry }
 					selectTextOnFocus={ selectTextOnFocus }
 					selection={ selection }
 					selectionColor={ selectionColor }

package/src/components/text-area-field/TextAreaFieldProps.ts

@@ -2,5 +2,5 @@ import type {
 	TextInputFieldProps,
 } from "../text-input-field/TextInputFieldProps"
 
-export interface TextAreaFieldProps extends Omit<TextInputFieldProps, "size" | "multiline"> {
+export interface TextAreaFieldProps extends Omit<TextInputFieldProps, "size" | "multiline" | "secureTextEntry"> {
 }

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

@@ -45,6 +45,8 @@ export const TextInput = forwardRef<TextInputRef, TextInputProps>(
 			helperText,
 
 			// hoist the `TextInputFieldProps`
+			blockStartNode,
+			blockEndNode,
 			size = "medium",
 			interactiveState = "normal",
 			textInputStyle,
@@ -167,6 +169,8 @@ export const TextInput = forwardRef<TextInputRef, TextInputProps>(
 
 				<TextInputField
 					ref={ textInputFieldRef }
+					blockStartNode={ blockStartNode }
+					blockEndNode={ blockEndNode }
 					size={ size }
 					interactiveState={ interactiveState }
 					textInputStyle={ textInputStyle }

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

@@ -5,8 +5,6 @@ import type {
 export interface TextInputProps extends Omit<
 	TextInputFieldProps,
 	| "hideInteractiveStateIcon"
-	| "blockStartNodes"
-	| "blockEndNodes"
 > {
 	label: string,
 	helperText?: string,

package/src/components/text-input-fluid/TextInputFluid.tsx

@@ -55,6 +55,8 @@ export const TextInputFluid = forwardRef<TextInputFluidRef, TextInputFluidProps>
 			interactiveState,
 			style,
 			textInputStyle,
+			blockStartNode,
+			blockEndNode,
 			...textInputFieldProps
 		},
 		ref,
@@ -71,14 +73,15 @@ export const TextInputFluid = forwardRef<TextInputFluidRef, TextInputFluidProps>
 				size="medium"
 				interactiveState={ interactiveState }
 				hideInteractiveStateIcon
-				blockStartNode={
+				blockStartNode={ (<>
 					<FormLabel
 						label={ label }
 						style={ styleSheet.label }
 					/>
-				}
-				blockEndNode={
-					!!helperText?.length && (
+					{ blockStartNode }
+				</>) }
+				blockEndNode={ (<>
+					{ !!helperText && (
 						<FormHelperText
 							text={ helperText }
 							style={ [
@@ -101,8 +104,9 @@ export const TextInputFluid = forwardRef<TextInputFluidRef, TextInputFluidProps>
 								) : undefined
 							}
 						/>
-					)
-				}
+					) }
+					{ blockEndNode }
+				</>) }
 				style={ [
 					styleSheet.textInputFluid,
 					helperText?.length

package/src/components/text-input-fluid/TextInputFluidProps.ts

@@ -6,8 +6,6 @@ export interface TextInputFluidProps extends Omit<
 	TextInputFieldProps,
 	| "size"
 	| "hideInteractiveStateIcon"
-	| "blockStartNodes"
-	| "blockEndNodes"
 > {
 	label: string,
 	helperText?: string,