@audira/carbon-react-native 1.0.0-beta.2 → 1.0.0-beta.21

package/src/components/collapsible/Collapsible.tsx

@@ -0,0 +1,275 @@
+import {
+	forwardRef,
+	useCallback,
+	useEffect,
+	useImperativeHandle,
+	useRef,
+	useState,
+} from "react"
+
+import {
+	Animated,
+	Easing,
+	View,
+	type EasingFunction,
+	type ViewProps,
+} from "react-native"
+
+import {
+	Motion,
+} from "@audira/carbon-react-native-elements"
+
+import {
+	FlexStyleSheet,
+	OverflowStyleSheet,
+	WidthStyleSheet,
+} from "../../style-sheets"
+
+import type {
+	CollapsibleProps,
+} from "./CollapsibleProps"
+
+import type {
+	CollapsibleRef,
+} from "./CollapsibleRef"
+
+import type {
+	RefBase,
+} from "./_RefBase"
+
+export const Collapsible = forwardRef<CollapsibleRef, CollapsibleProps>(
+	function(
+		{
+			defaultOpen,
+			open: openProp,
+			motion = {
+				toOpen: {
+					duration: Motion.Duration.fast_02,
+					easing: Easing.bezier(
+						Motion.Easing.entrance.productive.x1,
+						Motion.Easing.entrance.productive.y1,
+						Motion.Easing.entrance.productive.x2,
+						Motion.Easing.entrance.productive.y2,
+					),
+				},
+				toClose: {
+					duration: Motion.Duration.fast_02,
+					easing: Easing.bezier(
+						Motion.Easing.exit.productive.x1,
+						Motion.Easing.exit.productive.y1,
+						Motion.Easing.exit.productive.x2,
+						Motion.Easing.exit.productive.y2,
+					),
+				},
+			},
+			children,
+			style,
+			contentContainerStyle,
+			onToggle,
+			onOpened,
+			onClosed,
+			...props
+		},
+		forwardedRef,
+	) {
+
+		const
+			viewRef =
+				useRef<View>(null),
+
+			ref =
+				useRef<{
+					/**
+					 * To compare `positionView` value to avoid unnecessary set state with the same value
+					 */
+					positionView: "absolute" | "relative",
+					contentHeight: number,
+					openSelf: boolean,
+				}>({
+					positionView: defaultOpen ?? openProp ? "relative" : "absolute",
+					contentHeight: 0,
+					openSelf: !!defaultOpen,
+				}),
+
+			[openSelf, setOpenSelf] =
+				useState(ref.current.openSelf),
+
+			/**
+			 * Absolute position is required to keep content being rendered as it is when the container is not open (zero height)  
+			 *
+			 * We need 'relative' position when the collapsible is initially opened due to heightAnimated initial value is zero and only will be calculated after content is rendered  
+			 *
+			 * This state will be changed once only from 'relative' to 'absolute'  
+			 */
+			[positionView, setPositionView] =
+				useState<"absolute" | "relative">(ref.current.positionView),
+
+			heightAnimated =
+				useRef(new Animated.Value(0)),
+
+			/**
+			 * - 0 -> Closed
+			 * - 1 -> Opened
+			 */
+			contentContainerAnimated =
+				useRef(new Animated.Value(0)),
+
+			controlled =
+				typeof openProp === "boolean",
+
+			open =
+				controlled ? !!openProp : openSelf,
+
+			setPositionViewToAbsolute =
+				useCallback(() => {
+					if(ref.current.positionView === "relative") {
+						ref.current.positionView = "absolute"
+						setPositionView("absolute")
+					}
+				}, []),
+
+			onLayoutContent: NonNullable<ViewProps["onLayout"]> =
+				useCallback(({ nativeEvent }) => {
+					if(ref.current.contentHeight !== nativeEvent.layout.height) {
+						ref.current.contentHeight = nativeEvent.layout.height
+						if(open) {
+							Animated.timing(
+								heightAnimated.current,
+								{
+									toValue: ref.current.contentHeight,
+									duration: 0,
+									useNativeDriver: false,
+								},
+							).start(setPositionViewToAbsolute)
+						}
+					}
+				}, [
+					heightAnimated,
+					open,
+					setPositionViewToAbsolute,
+				])
+
+		useEffect(() => {
+			if(ref.current.contentHeight) {
+				if(open) {
+					Animated.timing(
+						heightAnimated.current,
+						{
+							toValue: ref.current.contentHeight,
+							useNativeDriver: false,
+							duration: motion.toOpen.duration,
+							easing: motion.toOpen.easing as EasingFunction,
+						},
+					).start(onOpened)
+					Animated.timing(
+						contentContainerAnimated.current,
+						{
+							toValue: 1,
+							duration: motion.toOpen.duration,
+							easing: motion.toOpen.easing as EasingFunction,
+							useNativeDriver: false,
+						},
+					).start()
+				} else {
+					Animated.timing(
+						heightAnimated.current,
+						{
+							toValue: 0,
+							duration: motion.toClose.duration,
+							easing: motion.toClose.easing as EasingFunction,
+							useNativeDriver: false,
+						},
+					).start(onClosed)
+					Animated.timing(
+						contentContainerAnimated.current,
+						{
+							toValue: 0,
+							duration: motion.toClose.duration,
+							easing: motion.toClose.easing as EasingFunction,
+							useNativeDriver: false,
+						},
+					).start()
+				}
+				onToggle?.(open)
+			}
+		}, [
+			open,
+			heightAnimated,
+			contentContainerAnimated,
+			motion,
+			onToggle,
+			onOpened,
+			onClosed,
+		])
+
+		useImperativeHandle(forwardedRef, () => {
+			return Object.assign<View, RefBase>(
+				viewRef.current as View,
+				{
+					setOpen(value) {
+						if(!controlled) {
+							if(typeof value === "boolean") {
+								ref.current.openSelf = value
+							} else {
+								ref.current.openSelf = value(ref.current.openSelf)
+							}
+							setOpenSelf(ref.current.openSelf)
+						}
+					},
+				},
+			)
+		}, [
+			controlled,
+		])
+
+		return (
+			<Animated.View
+				{ ...props }
+				style={ [
+					OverflowStyleSheet.overflow_hidden,
+					positionView === "absolute"
+						? {
+							height: heightAnimated.current,
+						}
+						: null,
+					style,
+				] }
+				ref={ viewRef }
+			>
+				<View
+					style={ [
+						WidthStyleSheet.w_full,
+						{
+							position: positionView,
+						},
+					] }
+				>
+					<Animated.View
+						style={ [
+							FlexStyleSheet.flex_initial,
+							{
+								opacity: contentContainerAnimated.current.interpolate({
+									inputRange: contentContainerInterpolationRange as unknown as number[],
+									outputRange: [0, 1],
+								}),
+								transform: [{
+									translateY: contentContainerAnimated.current.interpolate({
+										inputRange: contentContainerInterpolationRange as unknown as number[],
+										outputRange: [-12, 0],
+									}),
+								}],
+							},
+							contentContainerStyle,
+						] }
+						onLayout={ onLayoutContent }
+					>
+						{ children }
+					</Animated.View>
+				</View>
+			</Animated.View>
+		)
+
+	},
+)
+
+const contentContainerInterpolationRange = [0, 1] as const

package/src/components/collapsible/CollapsibleProps.ts

@@ -0,0 +1,17 @@
+import type {
+	EasingFunction,
+	ViewProps,
+} from "react-native"
+
+export interface CollapsibleProps extends ViewProps {
+	defaultOpen?: boolean,
+	open?: boolean,
+	motion?: Record<"toOpen" | "toClose", {
+		duration: number,
+		easing?: EasingFunction,
+	}>,
+	contentContainerStyle?: ViewProps["style"],
+	onToggle?: (value: boolean) => void,
+	onOpened?: () => void,
+	onClosed?: () => void,
+}

package/src/components/collapsible/CollapsibleRef.ts

@@ -0,0 +1,11 @@
+import type {
+	View,
+} from "react-native"
+
+import type {
+	RefBase,
+} from "./_RefBase"
+
+export interface CollapsibleRef extends View, RefBase {
+}
+

package/src/components/collapsible/_RefBase.ts

@@ -0,0 +1,6 @@
+export interface RefBase {
+	/**
+	 * This method does nothing when `controlled` prop is true
+	 */
+	setOpen: (value: boolean | ((value: boolean) => boolean)) => void,
+}

package/src/components/collapsible/index.ts

@@ -0,0 +1,3 @@
+export * from "./Collapsible"
+export * from "./CollapsibleProps"
+export * from "./CollapsibleRef"

package/src/components/form-helper-text/FormHelperText.tsx

@@ -0,0 +1,100 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import {
+	StyleSheet,
+} from "react-native"
+
+import {
+	CarbonStyleSheet,
+} from "../../carbon-style-sheet"
+
+import {
+	ThemeContext,
+} from "../../contexts"
+
+import {
+	FlexStyleSheet,
+} from "../../style-sheets"
+
+import {
+	Box,
+} from "../box"
+
+import {
+	Text,
+} from "../text"
+
+import type {
+	FormHelperTextProps,
+} from "./FormHelperTextProps"
+
+import type {
+	FormHelperTextRef,
+} from "./FormHelperTextRef"
+
+export const FormHelperText = forwardRef<FormHelperTextRef, FormHelperTextProps>(
+	function FormHelperText(
+		{
+			error,
+			text,
+			textLeading,
+			textTrailing,
+			textProps,
+			style,
+			...props
+		},
+		ref,
+	) {
+
+		useContext(ThemeContext)
+
+		return (
+			<Box
+				{ ...props }
+				ref={ ref }
+				style={ [
+					FlexStyleSheet.flex_row,
+					baseStyle.container,
+					style,
+				] }
+			>
+				{ textLeading }
+
+				<Text
+					{ ...textProps }
+					type={ textProps?.type || "helper_text_01" }
+					style={ [
+						error ? carbonStyle.textError : carbonStyle.text,
+						textProps?.style,
+					] }
+				>
+					{ text }
+				</Text>
+
+				{ textTrailing }
+			</Box>
+		)
+
+	},
+)
+
+const
+	baseStyle =
+		StyleSheet.create({
+			container: {
+				gap: 8,
+			},
+		}),
+
+	carbonStyle =
+		CarbonStyleSheet.create({
+			text: {
+				color: CarbonStyleSheet.color.text_primary,
+			},
+			textError: {
+				color: CarbonStyleSheet.color.text_error,
+			},
+		})

package/src/components/form-helper-text/FormHelperTextProps.ts

@@ -0,0 +1,15 @@
+import type {
+	BoxProps,
+} from "../box"
+
+import type {
+	TextProps,
+} from "../text"
+
+export interface FormHelperTextProps extends Omit<BoxProps, "children"> {
+	error?: boolean,
+	text: string,
+	textLeading?: React.ReactNode,
+	textTrailing?: React.ReactNode,
+	textProps?: Omit<TextProps, "children">,
+}

package/src/components/form-helper-text/FormHelperTextRef.ts

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

package/src/components/form-helper-text/index.tsx

@@ -0,0 +1,3 @@
+export * from "./FormHelperText"
+export * from "./FormHelperTextProps"
+export * from "./FormHelperTextRef"

package/src/components/form-label/FormLabel.tsx

@@ -0,0 +1,75 @@
+import {
+	forwardRef,
+} from "react"
+
+import {
+	StyleSheet,
+} from "react-native"
+
+import {
+	FlexStyleSheet,
+} from "../../style-sheets"
+
+import {
+	Box,
+} from "../box"
+
+import {
+	Text,
+} from "../text"
+
+import type {
+	FormLabelProps,
+} from "./FormLabelProps"
+
+import type {
+	FormLabelRef,
+} from "./FormLabelRef"
+
+export const FormLabel = forwardRef<FormLabelRef, FormLabelProps>(
+	function FormLabel(
+		{
+			label,
+			labelLeading,
+			labelTrailing,
+			textProps,
+			style,
+			...props
+		},
+		ref,
+	) {
+
+		return (
+			<Box
+				{ ...props }
+				ref={ ref }
+				style={ [
+					FlexStyleSheet.flex_row,
+					baseStyle.gap,
+					style,
+				] }
+			>
+				{ labelLeading }
+
+				<Text
+					{ ...textProps }
+					type={ textProps?.type || "label_01" }
+					aria-label={ label }
+				>
+					{ label }
+				</Text>
+
+				{ labelTrailing }
+			</Box>
+		)
+
+	},
+)
+
+const
+	baseStyle =
+		StyleSheet.create({
+			gap: {
+				columnGap: 8,
+			},
+		})

package/src/components/form-label/FormLabelProps.ts

@@ -0,0 +1,17 @@
+import type {
+	BoxProps,
+} from "../box"
+
+import type {
+	TextProps,
+} from "../text"
+
+export interface FormLabelProps extends Omit<BoxProps, "children"> {
+	label: string,
+	labelLeading?: React.ReactNode,
+	labelTrailing?: React.ReactNode,
+	textProps?: Omit<
+		TextProps,
+		| "aria-label"
+	>,
+}

package/src/components/form-label/FormLabelRef.ts

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

package/src/components/form-label/index.ts

@@ -0,0 +1,3 @@
+export * from "./FormLabel"
+export * from "./FormLabelProps"
+export * from "./FormLabelRef"

package/src/components/icon/Icon.tsx

@@ -0,0 +1,48 @@
+import {
+	Component,
+} from "react"
+
+import * as IconHelper from "@carbon/icon-helpers"
+
+import {
+	SvgXml,
+} from "react-native-svg"
+
+import type {
+	IconProps,
+} from "./IconProps"
+
+/**
+ * Icon component is intentionally written in the form of React Class Component to support `Animated.createAnimatedComponent` API from React Native Reanimated
+ */
+export class Icon extends Component<IconProps> {
+
+	override render() {
+		try {
+			return (
+				<SvgXml
+					{ ...this.props }
+					xml={ IconHelper.toString(this.props.src as never) }
+					width={ this.props.width || "100%" }
+					height={ this.props.height || "100%" }
+				/>
+			)
+		} catch {
+			return (
+				<SvgXml
+					{ ...this.props }
+					xml={ backupIcon }
+					width={ this.props.width || "100%" }
+					height={ this.props.height || "100%" }
+				/>
+			)
+		}
+	}
+
+}
+
+/**
+ * Copied from  
+ * https://github.com/carbon-design-system/carbon-react-native/blob/main/src/helpers/index.tsx
+ */
+const backupIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 13.17 13.69\"><line x1=\"0.71\" y1=\"0.97\" x2=\"12.46\" y2=\"12.72\" fill=\"currentColor\" stroke=\"currentColor\" stroke-miterlimit=\"10\" stroke-width=\"2\"/><line x1=\"1.02\" y1=\"13.02\" x2=\"12.15\" y2=\"0.67\" fill=\"currentColor\" stroke=\"currentColor\" stroke-miterlimit=\"10\" stroke-width=\"2\"/></svg>"

package/src/components/icon/IconProps.ts

@@ -0,0 +1,11 @@
+import type {
+	XmlProps,
+} from "react-native-svg"
+
+import type {
+	SharedType,
+} from "../../types"
+
+export interface IconProps extends Omit<XmlProps, "xml"> {
+	src: SharedType.CarbonIcon,
+}

package/src/components/icon/index.tsx

@@ -0,0 +1,2 @@
+export * from "./Icon"
+export * from "./IconProps"

package/src/components/index.ts

@@ -0,0 +1,38 @@
+import * as Button from "./button"
+import * as Notification from "./notification"
+import * as Toggle from "./toggle"
+
+export {
+	Button,
+	Notification,
+	Toggle,
+}
+
+export * from "./accordion"
+export * from "./button-group"
+export * from "./checkbox"
+export * from "./checkbox-group"
+export * from "./checkbox-input"
+export * from "./collapsible"
+export * from "./form-helper-text"
+export * from "./form-label"
+export * from "./icon"
+export * from "./inline-loading"
+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"
+export * from "./switch"
+export * from "./text"
+export * from "./text-area"
+export * from "./text-area-field"
+export * from "./text-area-fluid"
+export * from "./text-input"
+export * from "./text-input-field"
+export * from "./text-input-fluid"