@audira/carbon-react-native 1.0.4 → 1.0.5

package/src/components/table-toolbar-button/ghost-icon/GhostIconRef.ts

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

package/src/components/table-toolbar-button/ghost-icon/index.ts

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

package/src/components/table-toolbar-button/index.ts

@@ -0,0 +1,3 @@
+export * from "./ghost"
+export * from "./ghost-icon"
+export * from "./primary"

package/src/components/table-toolbar-button/primary/Primary.tsx

@@ -0,0 +1,43 @@
+import {
+	forwardRef,
+} from "react"
+
+import {
+	Primary as Button,
+} from "../../button/primary/Primary"
+
+import {
+	useSize,
+} from "../_useSize"
+
+import type {
+	PrimaryProps,
+} from "./PrimaryProps"
+
+import type {
+	PrimaryRef,
+} from "./PrimaryRef"
+
+export const Primary = forwardRef<PrimaryRef, PrimaryProps>(
+	function Primary(
+		{
+			size: sizeProp,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			size =
+				useSize()
+
+		return (
+			<Button
+				ref={ ref }
+				{ ...props }
+				size={ sizeProp ?? size }
+			/>
+		)
+
+	},
+)

package/src/components/table-toolbar-button/primary/PrimaryProps.ts

@@ -0,0 +1,6 @@
+import type {
+	PrimaryProps as Props,
+} from "../../button/primary/PrimaryProps"
+
+export interface PrimaryProps extends Props {
+}

package/src/components/table-toolbar-button/primary/PrimaryRef.ts

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

package/src/components/table-toolbar-button/primary/index.ts

@@ -0,0 +1,3 @@
+export * from "./Primary"
+export type * from "./PrimaryProps"
+export type * from "./PrimaryRef"

package/src/components/table-toolbar-switcher/TableToolbarSwitcher.tsx

@@ -0,0 +1,110 @@
+import {
+	forwardRef,
+	useImperativeHandle,
+	useRef,
+	useState,
+} from "react"
+
+import {
+	View,
+} from "react-native"
+
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
+
+import type {
+	TableToolbarSwitcherProps,
+} from "./TableToolbarSwitcherProps"
+
+import type {
+	TableToolbarSwitcherRef,
+} from "./TableToolbarSwitcherRef"
+
+import type {
+	TableToolbarSwitcherRefBase,
+} from "./TableToolbarSwitcherRefBase"
+
+import {
+	AnimatedNextContent,
+} from "./_animated-next-content"
+
+import {
+	AnimatedToolbar,
+	type AnimatedToolbarRef,
+} from "./_animated-toolbar"
+
+/**
+ * Render `TableToolbar` and switch to other view if some events happened.
+ * 
+ * This is useful if you want to use both `TableToolbar` and `TableBatchActionBar`,
+ * but only show `TableBatchActionBar` and hide `TableToolbar` if some events occured, e.g. a row has been selected.
+ */
+export const TableToolbarSwitcher = forwardRef<TableToolbarSwitcherRef, TableToolbarSwitcherProps>(
+	function TableToolbarSwitcher(
+		{
+			defaultNext,
+			next: nextProp,
+			nextContent,
+			...props
+		},
+		ref,
+	) {
+
+
+		const
+			animatedToolbarRef =
+				useRef<AnimatedToolbarRef>(null),
+
+			[nextSelf, setNextSelf] =
+				useState(!!defaultNext),
+
+			next =
+				nextProp ?? nextSelf
+
+		useImperativeHandle(ref, () => {
+			return Object.assign<AnimatedToolbarRef, TableToolbarSwitcherRefBase>(
+				animatedToolbarRef.current ?? {} as AnimatedToolbarRef,
+				{
+					next() {
+						if(typeof nextProp === "undefined") {
+							setNextSelf(true)
+						}
+					},
+					prev() {
+						if(typeof nextProp === "undefined") {
+							setNextSelf(false)
+						}
+					},
+					switch() {
+						if(typeof nextProp === "undefined") {
+							setNextSelf(s => !s)
+						}
+					},
+				},
+			)
+		}, [
+			nextProp,
+		])
+
+		return (
+			<View
+				style={ [
+					CarbonStyleSheet.g.flex_auto,
+				] }
+			>
+				<AnimatedToolbar
+					ref={ animatedToolbarRef }
+					{ ...props }
+					visible={ !next }
+				/>
+
+				<AnimatedNextContent
+					visible={ next }
+				>
+					{ nextContent }
+				</AnimatedNextContent>
+			</View>
+		)
+
+	},
+)
+

package/src/components/table-toolbar-switcher/TableToolbarSwitcherProps.ts

@@ -0,0 +1,18 @@
+import type {
+	TableToolbarProps,
+} from "../table-toolbar/TableToolbarProps"
+
+export interface TableToolbarSwitcherProps extends TableToolbarProps {
+	/**
+	 * true indicates the `nextContent` will be showed and the `TableToolbar` will be hidden
+	 */
+	defaultNext?: boolean,
+	/**
+	 * true indicates the `nextContent` will be showed and the `TableToolbar` will be hidden
+	 */
+	next?: boolean,
+	/**
+	 * This is other views that you want to render if `defaultNext` or `next` is true.
+	 */
+	nextContent: React.ReactNode,
+}

package/src/components/table-toolbar-switcher/TableToolbarSwitcherRef.ts

@@ -0,0 +1,10 @@
+import type {
+	TableToolbarRef,
+} from "../table-toolbar/TableToolbarRef"
+
+import type {
+	TableToolbarSwitcherRefBase,
+} from "./TableToolbarSwitcherRefBase"
+
+export interface TableToolbarSwitcherRef extends TableToolbarRef, TableToolbarSwitcherRefBase {
+}

package/src/components/table-toolbar-switcher/TableToolbarSwitcherRefBase.ts

@@ -0,0 +1,16 @@
+export interface TableToolbarSwitcherRefBase {
+	/**
+	 * Does nothing if `next` prop is boolean
+	 */
+	next: () => void,
+	/**
+	 * Does nothing if `next` prop is boolean
+	 */
+	prev: () => void,
+	/**
+	 * Run either next or prev.
+	 * 
+	 * Does nothing if `next` prop is boolean
+	 */
+	switch: () => void,
+}

package/src/components/table-toolbar-switcher/_AnimatedContentProps.ts

@@ -0,0 +1,3 @@
+export interface AnimatedContentProps {
+	visible: boolean,
+}

package/src/components/table-toolbar-switcher/_animated-next-content/AnimatedNextContent.tsx

@@ -0,0 +1,33 @@
+import {
+	Animated,
+} from "react-native"
+
+import {
+	useAnimatedContent,
+} from "../_useAnimatedContent"
+
+import type {
+	AnimatedNextContentProps,
+} from "./AnimatedNextContentProps"
+
+export function AnimatedNextContent({
+	visible,
+	style,
+	...props
+}: AnimatedNextContentProps) {
+
+	const
+		animatedContent =
+			useAnimatedContent({ visible })
+
+	return (
+		<Animated.View
+			{ ...props }
+			style={ [
+				animatedContent.style,
+				style,
+			] }
+		/>
+	)
+
+}

package/src/components/table-toolbar-switcher/_animated-next-content/AnimatedNextContentProps.ts

@@ -0,0 +1,10 @@
+import type {
+	ViewProps,
+} from "react-native"
+
+import type {
+	AnimatedContentProps,
+} from "../_AnimatedContentProps"
+
+export interface AnimatedNextContentProps extends ViewProps, AnimatedContentProps {
+}

package/src/components/table-toolbar-switcher/_animated-next-content/index.ts

@@ -0,0 +1,2 @@
+export * from "./AnimatedNextContent"
+export type * from "./AnimatedNextContentProps"

package/src/components/table-toolbar-switcher/_animated-toolbar/AnimatedToolbar.tsx

@@ -0,0 +1,59 @@
+import {
+	forwardRef,
+} from "react"
+
+import {
+	Animated,
+} from "react-native"
+
+import {
+	TableToolbar,
+} from "../../table-toolbar/TableToolbar"
+
+import {
+	useAnimatedContent,
+} from "../_useAnimatedContent"
+
+import type {
+	AnimatedToolbarProps,
+} from "./AnimatedToolbarProps"
+
+import type {
+	AnimatedToolbarRef,
+} from "./AnimatedToolbarRef"
+
+export const AnimatedToolbar = forwardRef<AnimatedToolbarRef, AnimatedToolbarProps>(
+	function AnimatedToolbar(
+		{
+			visible,
+			size,
+			style,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			animatedContent =
+				useAnimatedContent({
+					visible,
+					size,
+				})
+
+		return (
+			<AnimatedTableToolbar
+				ref={ ref }
+				{ ...props }
+				style={ [
+					animatedContent.style,
+					style,
+				] }
+			/>
+		)
+
+	},
+)
+
+const
+	AnimatedTableToolbar =
+		Animated.createAnimatedComponent(TableToolbar)

package/src/components/table-toolbar-switcher/_animated-toolbar/AnimatedToolbarProps.ts

@@ -0,0 +1,10 @@
+import type {
+	TableToolbarProps,
+} from "../../table-toolbar/TableToolbarProps"
+
+import type {
+	AnimatedContentProps,
+} from "../_AnimatedContentProps"
+
+export interface AnimatedToolbarProps extends TableToolbarProps, AnimatedContentProps {
+}

package/src/components/table-toolbar-switcher/_animated-toolbar/AnimatedToolbarRef.ts

@@ -0,0 +1,6 @@
+import type {
+	TableToolbarRef,
+} from "../../table-toolbar/TableToolbarRef"
+
+export interface AnimatedToolbarRef extends TableToolbarRef {
+}

package/src/components/table-toolbar-switcher/_animated-toolbar/index.ts

@@ -0,0 +1,3 @@
+export * from "./AnimatedToolbar"
+export type * from "./AnimatedToolbarProps"
+export type * from "./AnimatedToolbarRef"

package/src/components/table-toolbar-switcher/_useAnimatedContent.tsx

@@ -0,0 +1,179 @@
+import {
+	useContext,
+	useEffect,
+	useMemo,
+	useRef,
+} from "react"
+
+import {
+	Animated,
+	Easing,
+	Platform,
+	type View,
+} from "react-native"
+
+import {
+	Motion,
+} from "@audira/carbon-react-native-elements"
+
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
+
+import {
+	TableContext,
+} from "../table/_TableContext"
+
+import type {
+	TableToolbarSwitcherProps,
+} from "./TableToolbarSwitcherProps"
+
+import type {
+	AnimatedContentProps,
+} from "./_AnimatedContentProps"
+
+interface UseAnimatedContentProps extends AnimatedContentProps {
+	size?: TableToolbarSwitcherProps["size"],
+}
+
+export function useAnimatedContent({
+	size: sizeProp,
+	visible,
+}: UseAnimatedContentProps) {
+
+	const
+		tableContext =
+			useContext(TableContext),
+
+		heightPx =
+			useMemo(() => {
+				return mapHeightBySize[
+					mapRowSizeToToolbarSize[sizeProp ?? tableContext.rowSize]
+				]
+			}, [
+				sizeProp,
+				tableContext.rowSize,
+			]),
+
+		ref =
+			useRef({
+				visible,
+				heightPx,
+			}),
+
+		translateYAnimated =
+			useRef(new Animated.Value(visible ? 0 : heightPx))
+
+	useEffect(() => {
+		if(ref.current.visible != visible) {
+			ref.current.visible = visible
+
+			const timingConfig = {
+				duration: Motion.Duration.fast_02,
+				easing: Easing.bezier(
+					Motion.Easing.standard.productive.x1,
+					Motion.Easing.standard.productive.y1,
+					Motion.Easing.standard.productive.x2,
+					Motion.Easing.standard.productive.y2,
+				),
+				useNativeDriver: Platform.OS != "web",
+			}
+
+			if(!visible) {
+				Animated
+					.timing(
+						translateYAnimated.current,
+						{
+							toValue: heightPx,
+							...timingConfig,
+						},
+					)
+					.start()
+			} else {
+				Animated
+					.sequence([
+						Animated.timing(
+							translateYAnimated.current,
+							{
+								toValue: heightPx,
+								duration: 0,
+								useNativeDriver: true,
+							},
+						),
+						Animated.timing(
+							translateYAnimated.current,
+							{
+								toValue: 0,
+								...timingConfig,
+							},
+						),
+					])
+					.start()
+			}
+		}
+	}, [
+		heightPx,
+		visible,
+	])
+
+	useEffect(() => {
+		if(ref.current.heightPx != heightPx) {
+			Animated
+				.timing(
+					translateYAnimated.current,
+					{
+						toValue: 1,
+						duration: Motion.Duration.fast_02,
+						easing: Easing.bezier(
+							Motion.Easing.standard.productive.x1,
+							Motion.Easing.standard.productive.y1,
+							Motion.Easing.standard.productive.x2,
+							Motion.Easing.standard.productive.y2,
+						),
+						useNativeDriver: Platform.OS != "web",
+					},
+				)
+				.start()
+		}
+	}, [
+		heightPx,
+	])
+
+	return {
+
+		style: [
+			!visible ? [CarbonStyleSheet.g.absolute, CarbonStyleSheet.g.w_full] : undefined,
+			{
+				transform: [{
+					// eslint-disable-next-line react-hooks/refs
+					translateY: translateYAnimated.current,
+				}],
+				// eslint-disable-next-line react-hooks/refs
+				opacity: translateYAnimated.current.interpolate({
+					inputRange: [0, heightPx],
+					outputRange: [1, 0],
+				}),
+			},
+		],
+
+	} as const satisfies {
+
+		style: Animated.ComponentProps<View>["style"],
+
+	}
+
+}
+
+const
+	mapHeightBySize =
+		{
+			small: 32,
+			large: 48,
+		} as const satisfies Record<NonNullable<UseAnimatedContentProps["size"]>, number>,
+
+	mapRowSizeToToolbarSize =
+		{
+			extra_small: "small",
+			small: "small",
+			medium: "small",
+			large: "large",
+			extra_large: "large",
+		} as const satisfies Record<TableContext["rowSize"], NonNullable<UseAnimatedContentProps["size"]>>

package/src/components/table-toolbar-switcher/index.ts

@@ -0,0 +1,4 @@
+export * from "./TableToolbarSwitcher"
+export type * from "./TableToolbarSwitcherProps"
+export type * from "./TableToolbarSwitcherRef"
+export type * from "./TableToolbarSwitcherRefBase"