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

package/src/providers/dialog/_controller/Controller.tsx

@@ -0,0 +1,223 @@
+import {
+	forwardRef,
+	useCallback,
+	useEffect,
+	useImperativeHandle,
+	useRef,
+	useState,
+} from "react"
+
+import {
+	Pressable,
+	StyleSheet,
+} from "react-native"
+
+import {
+	DialogAnimationConfigs,
+} from "../../../const"
+
+import type {
+	DialogData,
+} from "../../../contexts/dialog/DialogData"
+
+import type {
+	DialogProviderAnimationConfig,
+} from "../DialogProviderAnimationConfig"
+
+import type {
+	ControllerProps,
+} from "./ControllerProps"
+
+import type {
+	ControllerRef,
+} from "./ControllerRef"
+
+import {
+	Modal,
+	type ModalRef,
+} from "./_modal"
+
+import {
+	Overlay,
+	type OverlayRef,
+} from "./_overlay"
+
+export const Controller = forwardRef<ControllerRef, ControllerProps>(
+	function Controller(
+		{
+			animationConfig,
+			modalProps,
+			overlayProps,
+			overlayTouchDismiss,
+			onEmpty,
+		},
+		ref,
+	) {
+
+		const
+			[data, setData] =
+				useState<DialogDataState[]>([]),
+
+			modalRefs =
+				useRef<ModalRef[]>([]),
+
+			overlayRef =
+				useRef<OverlayRef>(null),
+
+			initialRender =
+				useRef(false),
+
+			setModalRef =
+				useCallback((
+					modalRef: ModalRef | null,
+					index: number,
+				) => {
+					if(modalRef && !modalRefs.current[index]) {
+						modalRefs.current[index] = modalRef
+					}
+				}, []),
+
+			dismissAllHandler: ControllerRef["dismissAll"] =
+				useCallback(() => {
+					if(modalRefs.current.length) {
+						return new Promise(resolve => {
+							Promise
+								.all([
+									overlayRef.current?.animateUnmount() ?? Promise.resolve(),
+									modalRefs.current[modalRefs.current.length - 1]?.toState(2) ?? Promise.resolve(),
+								])
+								.then(() => {
+									setData([])
+									// modalRefs.current = []
+									resolve()
+								})
+						})
+					}
+					return Promise.resolve()
+				}, []),
+
+			dismissHandler: ControllerRef["dismiss"] =
+				useCallback(() => {
+					if(modalRefs.current.length) {
+						return new Promise(resolve => {
+							if(modalRefs.current.length == 1) {
+								dismissAllHandler()
+							} else {
+								modalRefs.current[modalRefs.current.length - 1]?.toState(2).then(() => {
+									modalRefs.current.splice(modalRefs.current.length - 1, 1)
+									modalRefs.current[modalRefs.current.length - 1]?.fromToState(0, 1).then(() => {
+										setData(curr => {
+											const nextData = curr.slice()
+											nextData.splice(nextData.length - 1, 1)
+											return nextData
+										})
+										resolve()
+									})
+								})
+							}
+						})
+					}
+
+					return Promise.resolve()
+				}, [
+					dismissAllHandler,
+				])
+
+		useEffect(() => {
+			if(!initialRender.current) {
+				initialRender.current = true
+			} else {
+				if(!data.length) {
+					onEmpty()
+				}
+			}
+		}, [
+			onEmpty,
+			data.length,
+		])
+
+		useImperativeHandle(ref, () => {
+			return {
+				show({
+					stack,
+					...restData
+				}) {
+					if(!modalRefs.current.length) {
+						setData([{ ...restData }])
+					} else {
+						modalRefs.current[modalRefs.current.length - 1]?.toState(2).then(() => {
+							if(stack) {
+								setData(curr => {
+									return [
+										...curr,
+										{ ...restData },
+									]
+								})
+							} else {
+								modalRefs.current.splice(modalRefs.current.length - 1, 1)
+								setData([{ ...restData }])
+							}
+						})
+					}
+				},
+				dismiss: dismissHandler,
+				dismissAll: dismissAllHandler,
+			}
+		}, [
+			dismissHandler,
+			dismissAllHandler,
+		])
+
+		return (
+			<Overlay
+				ref={ overlayRef }
+				{ ...overlayProps }
+				animationConfig={{
+					duration:
+						getSingleAnimationConfigDuration(animationConfig?.duration) ??
+						DialogAnimationConfigs.CarbonReact.duration,
+				}}
+			>
+				{ data.map((item, index) => {
+					return (
+						<Modal
+							{ ...modalProps }
+							key={ index }
+							animationConfig={ animationConfig }
+							ref={ modalRef => setModalRef(modalRef, index) }
+						>
+							{ (item.overlayTouchDismiss ?? overlayTouchDismiss) && (
+								<Pressable
+									onPress={ dismissHandler as () => void }
+									style={ StyleSheet.absoluteFill }
+								/>
+							) }
+
+							{ item.component }
+						</Modal>
+					)
+				}) }
+			</Overlay>
+		)
+
+	},
+)
+
+type DialogDataState =
+	Omit<
+		DialogData,
+		// | 'type'
+		| "stack"
+	>
+
+function getSingleAnimationConfigDuration(duration: DialogProviderAnimationConfig["duration"]) {
+	if(typeof duration === "number") {
+		return duration
+	}
+
+	if(duration) {
+		return duration[0]
+	}
+
+	return undefined
+}

package/src/providers/dialog/_controller/ControllerProps.ts

@@ -0,0 +1,11 @@
+import type {
+	DialogProviderProps,
+} from "../DialogProviderProps"
+
+export interface ControllerProps extends Omit<
+	DialogProviderProps,
+	| "children"
+	| "defaultLazy"
+> {
+	onEmpty: () => void,
+}

package/src/providers/dialog/_controller/ControllerRef.ts

@@ -0,0 +1,6 @@
+import type {
+	DialogProviderRef,
+} from "../DialogProviderRef"
+
+export interface ControllerRef extends DialogProviderRef {
+}

package/src/providers/dialog/_controller/_modal/Modal.tsx

@@ -0,0 +1,148 @@
+import {
+	forwardRef,
+	useEffect,
+	useImperativeHandle,
+	useRef,
+} from "react"
+
+import {
+	Animated,
+	StyleSheet,
+} from "react-native"
+
+import {
+	FlexStyleSheet,
+} from "../../../../_internal/style-sheets"
+
+import {
+	DialogAnimationConfigs,
+} from "../../../../const"
+
+import type {
+	ModalProps,
+} from "./ModalProps"
+
+import type {
+	ModalRef,
+} from "./ModalRef"
+
+export const Modal = forwardRef<ModalRef, ModalProps>(
+	function(
+		{
+			animationConfig = DialogAnimationConfigs.CarbonReact,
+			style,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			initialAnimation =
+				useRef(false),
+
+			/**
+			 * - 0 = unmounted
+			 * - 1 = mounted
+			 * - 2 = hidden behind of next dialog
+			 */
+			interpolation =
+				useRef(new Animated.Value(0))
+
+		useEffect(() => {
+			if(!initialAnimation.current) {
+				initialAnimation.current = true
+				Animated.timing(
+					interpolation.current,
+					{
+						toValue: 1,
+						duration: Array.isArray(animationConfig.duration)
+							? animationConfig.duration[1]
+							: animationConfig.duration,
+						easing: Array.isArray(animationConfig.modalEasing)
+							? animationConfig.modalEasing[1]
+							: animationConfig.modalEasing,
+						useNativeDriver: true,
+					},
+				).start()
+			}
+		}, [
+			animationConfig,
+			interpolation,
+		])
+
+		useImperativeHandle(ref, () => {
+			return {
+				toState(value) {
+					return new Promise(resolve => {
+						Animated
+							.timing(
+								interpolation.current,
+								{
+									toValue: value,
+									duration: Array.isArray(animationConfig.duration)
+										? animationConfig.duration[value]
+										: animationConfig.duration,
+									easing: Array.isArray(animationConfig.modalEasing)
+										? animationConfig.modalEasing[value]
+										: animationConfig.modalEasing,
+									useNativeDriver: true,
+								},
+							)
+							.start(({ finished }) => {
+								if(finished) {
+									resolve()
+								}
+							})
+					})
+				},
+				fromToState(from, to) {
+					return new Promise(resolve => {
+						Animated
+							.sequence([
+								Animated.timing(interpolation.current, { toValue: from, duration: 0, useNativeDriver: true }),
+								Animated.timing(
+									interpolation.current,
+									{
+										toValue: to,
+										duration: Array.isArray(animationConfig.duration)
+											? animationConfig.duration[to]
+											: animationConfig.duration,
+										easing: Array.isArray(animationConfig.modalEasing)
+											? animationConfig.modalEasing[to]
+											: animationConfig.modalEasing,
+										useNativeDriver: true,
+									},
+								),
+							])
+							.start(({ finished }) => {
+								if(finished) {
+									resolve()
+								}
+							})
+					})
+				},
+			}
+		}, [
+			animationConfig,
+			interpolation,
+		])
+
+		return (
+			<Animated.View
+				{ ...props }
+				style={ [
+					StyleSheet.absoluteFill,
+					FlexStyleSheet.items_center,
+					FlexStyleSheet.justify_center,
+					animationConfig.modalStyleFactory(interpolation.current, interpolationInputRange),
+					style,
+				] }
+			/>
+		)
+
+	},
+)
+
+const
+	interpolationInputRange =
+		[0, 1, 2]

package/src/providers/dialog/_controller/_modal/ModalProps.ts

@@ -0,0 +1,11 @@
+import type {
+	ViewProps,
+} from "react-native"
+
+import type {
+	DialogProviderAnimationConfig,
+} from "../../DialogProviderAnimationConfig"
+
+export interface ModalProps extends ViewProps {
+	animationConfig?: DialogProviderAnimationConfig,
+}

package/src/providers/dialog/_controller/_modal/ModalRef.ts

@@ -0,0 +1,8 @@
+import type {
+	Interpolation,
+} from "./_Interpolation"
+
+export interface ModalRef {
+	toState: (value: Interpolation) => Promise<void>,
+	fromToState: (from: Interpolation, to: Interpolation) => Promise<void>
+}

package/src/providers/dialog/_controller/_modal/_Interpolation.ts

@@ -0,0 +1,9 @@
+/**
+ * 0 = unmounted
+ * 1 = mounted
+ * 2 = unmounted (behind of next dialog)
+ */
+export type Interpolation =
+	| 0
+	| 1
+	| 2

package/src/providers/dialog/_controller/_modal/index.ts

@@ -0,0 +1,3 @@
+export * from "./Modal"
+export type * from "./ModalProps"
+export type * from "./ModalRef"

package/src/providers/dialog/_controller/_overlay/Overlay.tsx

@@ -0,0 +1,132 @@
+import {
+	forwardRef,
+	useEffect,
+	useImperativeHandle,
+	useRef,
+} from "react"
+
+import {
+	Animated,
+	type View,
+} from "react-native"
+
+import {
+	CarbonStyleSheet,
+} from "../../../../carbon-style-sheet"
+
+import type {
+	OverlayProps,
+} from "./OverlayProps"
+
+import type {
+	OverlayRef,
+} from "./OverlayRef"
+
+import type {
+	OverlayRefBase,
+} from "./_OverlayRefBase"
+
+export const Overlay = forwardRef<OverlayRef, OverlayProps>(
+	function(
+		{
+			// type,
+			animationConfig,
+			style,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			viewRef =
+				useRef<View>(null),
+
+			opacityRef =
+				useRef(0),
+
+			/**
+			 * 0 = unmounted
+			 * 1 = mounted
+			 */
+			opacity =
+				useRef(new Animated.Value(0))
+
+		useEffect(() => {
+			if(opacityRef.current == 0) {
+				opacityRef.current = 1
+				Animated
+					.timing(
+						opacity.current,
+						{
+							toValue: 1,
+							duration: animationConfig.duration,
+							useNativeDriver: true,
+						},
+					)
+					.start()
+			}
+		}, [
+			animationConfig,
+			opacity,
+		])
+
+		useImperativeHandle(ref, () => {
+			return Object.assign<View, OverlayRefBase>(
+				viewRef.current ?? {} as View,
+				{
+					animateUnmount() {
+						return new Promise(resolve => {
+							opacityRef.current = 0
+							Animated
+								.timing(
+									opacity.current,
+									{
+										toValue: 0,
+										duration: animationConfig.duration,
+										useNativeDriver: true,
+									},
+								)
+								.start(({ finished }) => {
+									if(finished) {
+										resolve()
+									}
+								})
+						})
+					},
+				},
+			)
+		}, [
+			animationConfig,
+			opacity,
+		])
+
+		return (
+			<Animated.View
+				ref={ viewRef }
+				{ ...props }
+				style={ [
+					styleSheet.overlay,
+					{
+						opacity: opacity.current,
+					},
+					style,
+				] }
+			/>
+		)
+
+	},
+)
+
+const
+	styleSheet =
+		CarbonStyleSheet.create({
+			overlay: {
+				backgroundColor: CarbonStyleSheet.color.overlay,
+				position: "absolute",
+				top: 0,
+				right: 0,
+				bottom: 0,
+				left: 0,
+				overflow: "hidden",
+			},
+		})

package/src/providers/dialog/_controller/_overlay/OverlayProps.ts

@@ -0,0 +1,9 @@
+import type {
+	ViewProps,
+} from "react-native"
+
+export interface OverlayProps extends ViewProps {
+	animationConfig: {
+		duration?: number,
+	},
+}

package/src/providers/dialog/_controller/_overlay/OverlayRef.ts

@@ -0,0 +1,10 @@
+import type {
+	View,
+} from "react-native"
+
+import type {
+	OverlayRefBase,
+} from "./_OverlayRefBase"
+
+export interface OverlayRef extends View, OverlayRefBase {
+}

package/src/providers/dialog/_controller/_overlay/_OverlayRefBase.ts

@@ -0,0 +1,3 @@
+export interface OverlayRefBase {
+	animateUnmount: () => Promise<void>,
+}

package/src/providers/dialog/_controller/_overlay/index.ts

@@ -0,0 +1,3 @@
+export * from "./Overlay"
+export type * from "./OverlayProps"
+export type * from "./OverlayRef"

package/src/providers/dialog/_controller/index.ts

@@ -0,0 +1,3 @@
+export * from "./Controller"
+export type * from "./ControllerProps"
+export type * from "./ControllerRef"

package/src/providers/dialog/index.ts

@@ -0,0 +1,4 @@
+export * from "./DialogProvider"
+export type * from "./DialogProviderAnimationConfig"
+export type * from "./DialogProviderProps"
+export type * from "./DialogProviderRef"

package/src/providers/index.ts

@@ -0,0 +1,2 @@
+export * from "./dialog"
+export * from "./toast"

package/src/providers/toast/ToastProvider.tsx

@@ -0,0 +1,73 @@
+import {
+	forwardRef,
+	useCallback,
+	useImperativeHandle,
+	useRef,
+} from "react"
+
+import {
+	ToastContext,
+} from "../../contexts"
+
+
+import type {
+	ToastProviderProps,
+} from "./ToastProviderProps"
+
+import type {
+	ToastRef,
+} from "./ToastRef"
+import {
+	Overlay,
+	type OverlayRef,
+} from "./_overlay"
+
+export const ToastProvider = forwardRef<ToastRef, ToastProviderProps>(
+	function ToastProvider(
+		{
+			children,
+		},
+		ref,
+	) {
+
+		const
+			overlayRef =
+				useRef<OverlayRef>(null),
+
+			show: ToastContext["show"] =
+				useCallback((...args) => {
+					overlayRef.current?.show(...args)
+				}, []),
+
+			dismiss: ToastContext["dismiss"] =
+				useCallback((...args) => {
+					overlayRef.current?.dismiss(...args)
+				}, [])
+
+		useImperativeHandle(ref, () => {
+			return {
+				show,
+				dismiss,
+			}
+		}, [
+			show,
+			dismiss,
+		])
+
+		return (
+			<ToastContext.Provider
+				value={{
+					show,
+					dismiss,
+				}}
+			>
+				{ children }
+
+				<Overlay
+					ref={ overlayRef }
+				/>
+			</ToastContext.Provider>
+		)
+
+	},
+)

package/src/providers/toast/ToastProviderProps.ts

@@ -0,0 +1,3 @@
+export interface ToastProviderProps {
+	children?: React.ReactNode,
+}

package/src/providers/toast/ToastRef.ts

@@ -0,0 +1,6 @@
+import type {
+	ToastContext,
+} from "../../contexts/toast"
+
+export interface ToastRef extends ToastContext {
+}