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

package/src/providers/toast/_overlay/Overlay.tsx

@@ -0,0 +1,208 @@
+import {
+	Fragment,
+	forwardRef,
+	useCallback,
+	useContext,
+	useImperativeHandle,
+	useRef,
+	useState,
+} from "react"
+
+import {
+	Platform,
+	type LayoutChangeEvent,
+} from "react-native"
+
+import {
+	Spacing,
+} from "@audira/carbon-react-native-elements"
+
+import {
+	GlobalConfigContext,
+} from "../../../_internal/contexts"
+
+import type {
+	ToastContextShowConfig,
+} from "../../../contexts/toast/ToastContextShowConfig"
+
+import type {
+	OverlayRef,
+} from "./OverlayRef"
+
+import {
+	ComponentWrapper,
+	type ComponentWrapperRef,
+} from "./_component-wrapper"
+
+export const Overlay = forwardRef<OverlayRef>(
+	function(
+		___props,
+		ref,
+	) {
+
+		const
+			globalConfigContext =
+				useContext(GlobalConfigContext),
+
+			componentsConfig =
+				useRef<ComponentConfig[]>([]),
+
+			componentWrappersRef =
+				useRef<ComponentWrapperRef[]>([]),
+
+			[components, setComponents] =
+				useState<React.ReactNode[]>([]),
+
+			setComponentWrapperRef =
+				useCallback((ref: ComponentWrapperRef | null, index: number) => {
+					if(ref && !componentWrappersRef.current[index]) {
+						componentWrappersRef.current[index] = ref
+					}
+				}, []),
+
+			show: OverlayRef["show"] =
+				useCallback((
+					fn,
+					config,
+				) => {
+					const id = Date.now()
+					componentsConfig.current.push({
+						...config,
+						id,
+						state: 0,
+						width: 0,
+						height: 0,
+					})
+					const component = fn(id)
+					setComponents(_components => [
+						..._components,
+						component,
+					])
+				}, []),
+
+			dismiss: OverlayRef["dismiss"] =
+				useCallback(id => {
+					const index = componentsConfig.current.findIndex(c => c.id == id)
+
+					if(
+						index > -1 &&
+						componentWrappersRef.current[index] &&
+						componentsConfig.current[index]
+					) {
+						componentWrappersRef.current[index].cancelX() // cancel the current delay first
+						componentWrappersRef.current[index].shiftX(
+							componentsConfig.current[index].width + Spacing.spacing_03,
+						)
+						if(index > 0) {
+							for(let i = 0; i < index; i++) {
+								componentWrappersRef.current[i]?.shiftY(
+									-componentsConfig.current[index].height - Spacing.spacing_03,
+								)
+							}
+						}
+					}
+				}, []),
+
+			onLayoutComponent =
+				useCallback((
+					event: LayoutChangeEvent,
+					index: number,
+				) => {
+					if(
+						componentsConfig.current[index] &&
+						componentWrappersRef.current[index]
+					) {
+						if(Platform.OS == "web") {
+							// @ts-expect-error Web DOM
+							const target = event.nativeEvent.target as HTMLDivElement
+
+							// @ts-expect-error Web DOM
+							componentsConfig.current[index].width = target.children?.[0]?.clientWidth
+							// @ts-expect-error Web DOM
+							componentsConfig.current[index].height = target.children?.[0]?.clientHeight
+
+						} else {
+							componentsConfig.current[index].width = event.nativeEvent.layout.width
+							componentsConfig.current[index].height = event.nativeEvent.layout.height
+						}
+
+						componentWrappersRef.current[index].shiftX(
+							-componentsConfig.current[index].width - Spacing.spacing_03,
+						)
+
+						if(componentWrappersRef.current.length > 1) {
+							for(let i = 0; i < componentWrappersRef.current.length - 1; i++) {
+								componentWrappersRef.current[i]?.shiftY(
+									// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion, @typescript-eslint/no-extra-non-null-assertion
+									componentsConfig.current[0]!!.height + Spacing.spacing_03,
+								)
+							}
+						}
+					}
+				}, []),
+
+			onShiftedXComponent =
+				useCallback((
+					index: number,
+				) => {
+					if(componentsConfig.current[index]) {
+						componentsConfig.current[index].state++
+					}
+
+					if(componentsConfig.current[index]?.state === 1) {
+						componentWrappersRef.current[index]?.shiftX(
+							componentsConfig.current[index].width + Spacing.spacing_03,
+							componentsConfig.current[index].duration ?? globalConfigContext.toastDuration,
+						)
+					} else if(
+						componentsConfig.current[index]?.state === 2 &&
+						!componentsConfig.current.some(config => config.state < 2) // somehow, the state may increase to "3" when it's dismissed by click/press. only god knows it.
+					) {
+						// Delete all componentsConfig, componentWrappersRef, and components (react state) when it's all done
+						componentsConfig.current.splice(0, componentsConfig.current.length)
+						componentWrappersRef.current.splice(0, componentWrappersRef.current.length)
+						setComponents([])
+					}
+				}, [
+					globalConfigContext.toastDuration,
+				])
+
+		useImperativeHandle(ref, () => {
+			return {
+				show,
+				dismiss,
+			}
+		}, [
+			show,
+			dismiss,
+		])
+
+		return (
+			<Fragment>
+				{ components.map((component, index) => (
+					<ComponentWrapper
+						key={ componentsConfig.current[index]?.id }
+						onLayout={ event => onLayoutComponent(event, index) }
+						onShiftedX={ () => onShiftedXComponent(index) }
+						ref={ ref => setComponentWrapperRef(ref, index) }
+					>
+						{ component }
+					</ComponentWrapper>
+				)) }
+			</Fragment>
+		)
+
+	},
+)
+
+type ComponentConfig = ToastContextShowConfig & {
+	/**
+	 * - 0 = mounted and still hidden from screen  
+	 * - 1 = showed
+	 * - 2 = hidden
+	*/
+	state: 0 | 1 | 2,
+	id: number,
+	width: number,
+	height: number,
+}

package/src/providers/toast/_overlay/OverlayRef.ts

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

package/src/providers/toast/_overlay/_component-wrapper/ComponentWrapper.tsx

@@ -0,0 +1,168 @@
+import {
+	forwardRef,
+	useEffect,
+	useImperativeHandle,
+	useRef,
+} from "react"
+
+import {
+	Animated,
+	Easing,
+	Platform,
+	StyleSheet,
+} from "react-native"
+
+import {
+	Motion,
+	Spacing,
+} from "@audira/carbon-react-native-elements"
+
+import type {
+	ComponentWrapperProps,
+} from "./ComponentWrapperProps"
+
+import type {
+	ComponentWrapperRef,
+} from "./ComponentWrapperRef"
+
+export const ComponentWrapper = forwardRef<ComponentWrapperRef, ComponentWrapperProps>(
+	function(
+		{
+			children,
+			onLayout,
+			onShiftedX,
+			onShiftedY,
+		},
+		ref,
+	) {
+
+		const
+			translateX =
+				useRef(new Animated.Value(0)),
+
+			translateXValueJS =
+				useRef(0),
+
+			translateY =
+				useRef(new Animated.Value(0)),
+
+			translateYValueJS =
+				useRef(0)
+
+		useEffect(() => {
+			const
+				translateX_ =
+					translateX.current,
+
+				translateY_ =
+					translateY.current,
+
+				translateXListenerID =
+					translateX_.addListener(({ value }) => {
+						translateXValueJS.current = value
+					}),
+
+				translateYListenerID =
+					translateY_.addListener(({ value }) => {
+						translateYValueJS.current = value
+					})
+
+			return () => {
+				translateX_.removeListener(translateXListenerID)
+				translateY_.removeListener(translateYListenerID)
+			}
+		}, [])
+
+		useImperativeHandle(ref, () => {
+			return {
+				cancelX() {
+					translateX.current?.stopAnimation()
+				},
+				cancelY() {
+					translateY.current?.stopAnimation()
+				},
+				shiftX(px, delayMs = 0) {
+					Animated.sequence([
+						Animated.delay(delayMs),
+						Animated.timing(
+							translateX.current,
+							{
+								toValue: translateXValueJS.current + px,
+								duration: Motion.Duration.moderate_01,
+								easing,
+								useNativeDriver: true,
+							},
+						),
+					]).start(({ finished }) => {
+						if(finished && onShiftedX) {
+							onShiftedX()
+						}
+					})
+				},
+				shiftY(px) {
+					Animated.timing(
+						translateY.current,
+						{
+							toValue: translateYValueJS.current + px,
+							duration: Motion.Duration.moderate_01,
+							easing,
+							useNativeDriver: true,
+						},
+					).start(({ finished }) => {
+						if(finished && onShiftedY) {
+							onShiftedY()
+						}
+					})
+				},
+			}
+		}, [
+			translateX,
+			translateY,
+			onShiftedX,
+			onShiftedY,
+		])
+
+		return (
+			<Animated.View
+				onLayout={ onLayout as never }
+				style={ [
+					styleSheet.componentWrapper,
+					{
+						transform: [{
+							translateX: translateX.current,
+						}, {
+							translateY: translateY.current,
+						}],
+					},
+				] }
+			>
+				{ children }
+			</Animated.View>
+		)
+
+	},
+)
+
+const
+	styleSheet =
+		StyleSheet.create({
+			componentWrapper: {
+				position: "absolute",
+				top: Spacing.spacing_03,
+				left: "100%",
+				width: "auto",
+				...Platform.select({
+					web: {
+						flexDirection: "row",
+					},
+				}),
+			},
+		}),
+
+	easing =
+		Easing.bezier(
+			Motion.Easing.entrance.productive.x1,
+			Motion.Easing.entrance.productive.y1,
+			Motion.Easing.entrance.productive.x2,
+			Motion.Easing.entrance.productive.y2,
+		)

package/src/providers/toast/_overlay/_component-wrapper/ComponentWrapperProps.ts

@@ -0,0 +1,8 @@
+import type {
+	ViewProps,
+} from "react-native"
+
+export interface ComponentWrapperProps extends ViewProps {
+	onShiftedX?: () => void,
+	onShiftedY?: () => void,
+}

package/src/providers/toast/_overlay/_component-wrapper/ComponentWrapperRef.ts

@@ -0,0 +1,6 @@
+export interface ComponentWrapperRef {
+	cancelX(): void,
+	cancelY(): void,
+	shiftX(px: number, delayMs?: number): void,
+	shiftY(px: number): void,
+}

package/src/providers/toast/_overlay/_component-wrapper/index.ts

@@ -0,0 +1,3 @@
+export * from "./ComponentWrapper"
+export type * from "./ComponentWrapperProps"
+export type * from "./ComponentWrapperRef"

package/src/providers/toast/_overlay/index.ts

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

package/src/providers/toast/index.tsx

@@ -0,0 +1,3 @@
+export * from "./ToastProvider"
+export * from "./ToastProviderProps"
+export * from "./ToastRef"

package/src/types/index.ts

@@ -0,0 +1,7 @@
+import type * as SharedType from "./shared"
+import type * as ThemeType from "./theme"
+
+export type {
+	SharedType,
+	ThemeType,
+}

package/src/types/shared.ts

@@ -0,0 +1 @@
+export type CarbonIcon = unknown

package/src/types/theme/ColorScheme.ts

@@ -0,0 +1 @@
+export type ColorScheme = "gray_10" | "gray_100"

package/src/types/theme/index.ts

@@ -0,0 +1 @@
+export type * from "./ColorScheme"