@audira/carbon-react-native 1.0.3 → 1.0.5

package/src/components/table-toolbar/TableToolbar.tsx

@@ -0,0 +1,165 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import {
+	StyleSheet,
+	type ViewStyle,
+} from "react-native"
+
+import type {
+	ColorLayerLevel,
+} from "@audira/carbon-react-native-elements"
+
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
+
+import {
+	Box,
+} from "../box/Box"
+
+import {
+	LayerContext,
+} from "../layer/LayerContext"
+
+import {
+	ScrollView,
+} from "../scroll-view/ScrollView"
+
+import {
+	TableContext,
+} from "../table/_TableContext"
+
+import type {
+	TableToolbarProps,
+} from "./TableToolbarProps"
+
+import type {
+	TableToolbarRef,
+} from "./TableToolbarRef"
+
+import type {
+	TableToolbarSize,
+} from "./TableToolbarSize"
+
+import {
+	TableToolbarContext,
+} from "./_TableToolbarContext"
+
+export const TableToolbar = forwardRef<TableToolbarRef, TableToolbarProps>(
+	function TableToolbar(
+		{
+			size: sizeProp,
+			buttons,
+			children,
+			horizontal = true,
+			role = "group",
+			"aria-label": ariaLabel = "table toolbar",
+			style,
+			contentContainerStyle,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			layerContext =
+				useContext(LayerContext),
+
+			tableContext =
+				useContext(TableContext),
+
+			size =
+				sizeProp ?? tableContext.rowSize
+
+		return (
+			<TableToolbarContext.Provider
+				value={{
+					size: sizeProp ?? mapRowSizeToToolbarSize[tableContext.rowSize],
+				}}
+			>
+				<ScrollView
+					ref={ ref }
+					{ ...props }
+					role={ role }
+					aria-label={ ariaLabel }
+					horizontal={ horizontal }
+					style={ [
+						// if users provide size prop manually
+						// they will still get the correct size style
+						// the `large` and `small` from `TableToolbarSize`
+						// are also used by `TableRowSize`
+						styleSheetSize[
+							mapRowSizeToToolbarSize[size]
+						],
+
+						styleSheetBGPerLayer[`bg_${layerContext}`],
+
+						style,
+					] }
+					contentContainerStyle={ [
+						CarbonStyleSheet.g.flex_row,
+						CarbonStyleSheet.g.flex_auto,
+						CarbonStyleSheet.g.justify_between,
+						contentContainerStyle,
+					] }
+				>
+					<Box
+						style={ [
+							CarbonStyleSheet.g.flex_auto,
+						] }
+					>
+						{ children }
+					</Box>
+
+					{ !!buttons && (
+						<Box
+							style={ [
+								CarbonStyleSheet.g.flex_row,
+								CarbonStyleSheet.g.self_stretch,
+							] }
+						>
+							{ buttons }
+						</Box>
+					) }
+				</ScrollView>
+			</TableToolbarContext.Provider>
+		)
+
+	},
+)
+
+const
+	styleSheetSize =
+		StyleSheet.create({
+			small: {
+				height: 32,
+			},
+			large: {
+				height: 48,
+			},
+		} as const satisfies Record<TableToolbarSize, NonNullable<Pick<ViewStyle, "height">>>),
+
+	mapRowSizeToToolbarSize =
+		{
+			extra_small: "small",
+			small: "small",
+			medium: "small",
+			large: "large",
+			extra_large: "large",
+		} as const satisfies Record<TableContext["rowSize"], TableToolbarSize>,
+
+	styleSheetBGPerLayer =
+		CarbonStyleSheet.create({
+			bg_1: {
+				backgroundColor: CarbonStyleSheet.color.layer_01,
+			},
+			bg_2: {
+				backgroundColor: CarbonStyleSheet.color.layer_02,
+			},
+			bg_3: {
+				backgroundColor: CarbonStyleSheet.color.layer_03,
+			},
+		} as const satisfies {
+			[Name in `bg_${ColorLayerLevel}`]: NonNullable<Pick<ViewStyle, "backgroundColor">>
+		})

package/src/components/table-toolbar/TableToolbarProps.ts

@@ -0,0 +1,27 @@
+import type {
+	ScrollViewProps,
+} from "react-native"
+
+import type {
+	TableToolbarSize,
+} from "./TableToolbarSize"
+
+export interface TableToolbarProps extends ScrollViewProps {
+	/**
+	 * Based on the IBM spec, the `large` toolbar is paired with the extra large and large row sizes.
+	 * The `small` toolbar is paired with the small and extra small row sizes.
+	 * 
+	 * You may don't want to set the toolbar size manually.
+	 * Prefer to opt `rowSize` in the `Table` prop instead,
+	 * and the toolbar size will be adjusted automatically based on what the row size is.
+	 * 
+	 * @default "large"
+	 */
+	size?: TableToolbarSize,
+	/**
+	 * Provide one or multiple `<TableToolbarButton>` in this prop.
+	 * 
+	 * To provide multiple buttons, you can start it with `<>` or `<Fragment>`
+	 */
+	buttons: React.ReactNode,
+}

package/src/components/table-toolbar/TableToolbarRef.ts

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

package/src/components/table-toolbar/TableToolbarSize.ts

@@ -0,0 +1,3 @@
+export type TableToolbarSize =
+	| "large"
+	| "small"

package/src/components/table-toolbar/_TableToolbarContext.ts

@@ -0,0 +1,15 @@
+import {
+	createContext,
+} from "react"
+
+import type {
+	TableToolbarSize,
+} from "./TableToolbarSize"
+
+export interface TableToolbarContext {
+	size: TableToolbarSize,
+}
+
+export const TableToolbarContext = createContext<TableToolbarContext>({
+	size: "large",
+})

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

@@ -0,0 +1,4 @@
+export * from "./TableToolbar"
+export type * from "./TableToolbarProps"
+export type * from "./TableToolbarRef"
+export type * from "./TableToolbarSize"

package/src/components/table-toolbar-button/_useSize.tsx

@@ -0,0 +1,28 @@
+import {
+	useContext,
+} from "react"
+
+import type {
+	Size,
+} from "../button/Size"
+
+import {
+	TableToolbarContext,
+} from "../table-toolbar/_TableToolbarContext"
+
+export function useSize(): Size {
+
+	const
+		tableToolbarContext =
+			useContext(TableToolbarContext)
+
+	return mapToolbarSizeToButtonSize[tableToolbarContext.size]
+
+}
+
+const
+	mapToolbarSizeToButtonSize =
+		{
+			small: "small",
+			large: "large_productive",
+		} as const satisfies Record<TableToolbarContext["size"], Size>

package/src/components/table-toolbar-button/ghost/Ghost.tsx

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

package/src/components/table-toolbar-button/ghost/GhostProps.ts

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

package/src/components/table-toolbar-button/ghost/GhostRef.ts

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

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

@@ -0,0 +1,3 @@
+export * from "./Ghost"
+export type * from "./GhostProps"
+export type * from "./GhostRef"

package/src/components/table-toolbar-button/ghost-icon/GhostIcon.tsx

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

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

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

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"