@audira/carbon-react-native 1.0.4 → 1.0.6

package/src/components/table-row/TableRowProps.ts

@@ -11,8 +11,11 @@ import type {
 	TableRowSize,
 } from "./TableRowSize"
 
-export interface TableRowProps extends Omit<PressableProps, "style"> {
+export interface TableRowProps extends Omit<PressableProps, "style" | "children"> {
 	/**
+	 * You may don't want to set the row size each row individually.
+	 * Prefer to opt `rowSize` in the `Table` prop instead.
+	 * 
 	 * @default "large"
 	 * @see https://carbondesignsystem.com/components/data-table/style/#rows
 	 */
@@ -37,9 +40,15 @@ export interface TableRowProps extends Omit<PressableProps, "style"> {
 	 * ===== Table =====
 	 */
 	zebra?: boolean,
+	/**
+	 * Help this component to render it initially with selected style,
+	 * if you have `TableCellCheckbox` that checked by default.
+	 */
+	defaultSelected?: boolean,
 	/**
 	 * @default "normal"
 	 */
 	interactiveState?: TableRowInteractiveState,
+	children?: ViewProps["children"],
 	style?: ViewProps["style"],
 }

package/src/components/table-row/_TableRowContext.ts

@@ -8,10 +8,16 @@ import type {
 
 export interface TableRowContext {
 	interactiveState: TableRowInteractiveState,
-	hovered: boolean,
+	readonly selected: boolean,
+	readonly hovered: boolean,
+	setSelected: (value: boolean) => void,
 }
 
 export const TableRowContext = createContext<TableRowContext>({
 	interactiveState: "normal",
+	selected: false,
 	hovered: false,
+	setSelected() {
+		// set it later
+	},
 })

package/src/components/table-row/_TableRowContextProvider.tsx

@@ -0,0 +1,38 @@
+import {
+	useState,
+} from "react"
+
+import {
+	TableRowContext,
+} from "./_TableRowContext"
+
+export function TableRowContextProvider({
+	interactiveState,
+	hovered,
+	defaultSelected,
+	children,
+}: TableRowContextProviderProps) {
+
+	const
+		[selected, setSelected] =
+			useState(!!defaultSelected)
+
+	return (
+		<TableRowContext.Provider
+			value={{
+				interactiveState,
+				hovered,
+				selected,
+				setSelected,
+			}}
+		>
+			{ children }
+		</TableRowContext.Provider>
+	)
+
+}
+
+interface TableRowContextProviderProps extends Omit<TableRowContext, "selected" | "setSelected"> {
+	defaultSelected?: boolean,
+	children?: React.ReactNode,
+}

package/src/components/table-row/_style-sheet-height.ts

@@ -7,6 +7,9 @@ import type {
 	TableRowSize,
 } from "./TableRowSize"
 
+/**
+ * Shared style sheet for `TableRow` and `TableRowHeader`
+ */
 export const StyleSheetHeight =
 	StyleSheet.create({
 		extra_small: {

package/src/components/table-row-collapsible/TableRowCollapsible.tsx

@@ -0,0 +1,415 @@
+import {
+	forwardRef,
+	useCallback,
+	useContext,
+	useEffect,
+	useImperativeHandle,
+	useMemo,
+	useRef,
+	useState,
+} from "react"
+
+import {
+	StyleSheet,
+	View,
+	type PressableProps,
+	type ViewProps,
+	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"
+
+import {
+	Collapsible,
+	type CollapsibleProps,
+} from "../collapsible"
+
+import {
+	LayerContext,
+} from "../layer"
+
+import {
+	TableContext,
+} from "../table/_TableContext"
+
+import {
+	TableCell,
+} from "../table-cell"
+
+import {
+	TableRow,
+	type TableRowInteractiveState,
+	type TableRowRef,
+} from "../table-row"
+
+import {
+	TableRowContext,
+} from "../table-row/_TableRowContext"
+
+import {
+	StyleSheetHeight as TableRowStyleSheetHeight,
+} from "../table-row/_style-sheet-height"
+
+import type {
+	TableRowCollapsibleProps,
+} from "./TableRowCollapsibleProps"
+
+import type {
+	TableRowCollapsibleRef,
+} from "./TableRowCollapsibleRef"
+
+import type {
+	TableRowCollapsibleRefBase,
+} from "./TableRowCollapsibleRefBase"
+
+import {
+	TableCellChevron,
+} from "./_table-cell-chevron"
+
+export const TableRowCollapsible = forwardRef<TableRowCollapsibleRef, TableRowCollapsibleProps>(
+	function TableRowCollapsible(
+		{
+			// +++ Picked CollapsibleProps +++
+			defaultOpen,
+			open: openProp,
+			motion,
+			onToggle,
+			onOpened,
+			onClosed,
+			// --- Picked CollapsibleProps ---
+			size: sizeProp,
+			content,
+			contentContainerProps,
+			collapsibleProps,
+			tableCellChevronProps,
+			onPressChevron,
+			children,
+			style,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			tableContext =
+				useContext(TableContext),
+
+			tableRowRef =
+				useRef<TableRowRef>(null),
+
+			size =
+				useMemo(() => {
+					return sizeProp ?? tableContext.rowSize
+				}, [
+					sizeProp,
+					tableContext.rowSize,
+				]),
+
+			[openSelf, setOpenSelf] =
+				useState(!!defaultOpen),
+
+			controlled =
+				typeof openProp !== "undefined",
+
+			open =
+				controlled ? !!openProp : openSelf,
+
+			[expanded, setExpanded] =
+				useState(!!open)
+
+		const
+			onPress: PressableProps["onPress"] =
+				useCallback(event => {
+					if(tableCellChevronProps?.pressableProps?.onPress) {
+						tableCellChevronProps.pressableProps.onPress(event)
+					} else if(onPressChevron) {
+						onPressChevron(event)
+					}
+
+					if(!controlled) {
+						setOpenSelf(s => !s)
+					}
+				}, [
+					tableCellChevronProps?.pressableProps,
+					onPressChevron,
+					controlled,
+				]),
+
+			onClosedHandler: NonNullable<CollapsibleProps["onClosed"]> =
+				useCallback(() => {
+					onClosed?.()
+					setExpanded(false)
+				}, [
+					onClosed,
+				])
+
+		useImperativeHandle(ref, () => {
+			return Object.assign<TableRowRef, TableRowCollapsibleRefBase>(
+				tableRowRef.current ?? {} as TableRowRef,
+				{
+					get open() {
+						return open
+					},
+					setOpen(value) {
+						if(!controlled) {
+							setOpenSelf(value)
+						}
+					},
+				},
+			)
+		}, [
+			open,
+			controlled,
+		])
+
+		useEffect(() => {
+			if(open) {
+				setExpanded(true)
+			}
+		}, [
+			open,
+		])
+
+		return (
+			<TableRow
+				ref={ tableRowRef }
+				{ ...props }
+				style={ [
+					CarbonStyleSheet.g.flex_col, // override the row flex direction since TableRow is not directly the parent of children
+					CarbonStyleSheet.g.items_stretch,
+					expanded
+						? CarbonStyleSheet.g.h_auto
+						: undefined,
+					styleSheet.tableRowCollapsible,
+					style,
+				] }
+			>
+				<Box
+					style={ [
+						CarbonStyleSheet.g.flex_auto,
+						CarbonStyleSheet.g.flex_row,
+						size === "extra_large"
+							? CarbonStyleSheet.g.pt_05
+							: CarbonStyleSheet.g.items_center,
+						expanded ? TableRowStyleSheetHeight[size] : undefined,
+					] }
+				>
+					<TableCellChevron
+						{ ...tableCellChevronProps }
+						open={ open }
+						invisible={ !content }
+						pressableProps={{
+							...tableCellChevronProps?.pressableProps,
+							onPress,
+						}}
+					/>
+
+					{ children }
+				</Box>
+
+				{ !!content && (
+					<Collapsible
+						{ ...collapsibleProps }
+						role={ collapsibleProps?.role ?? "table" }
+						open={ open }
+						motion={ motion }
+						onToggle={ onToggle }
+						onOpened={ onOpened }
+						onClosed={ onClosedHandler }
+						contentContainerProps={{
+							...contentContainerProps,
+							role: contentContainerProps?.role ?? "row",
+							style: [
+								CarbonStyleSheet.g.flex_auto,
+								CarbonStyleSheet.g.flex_row,
+								CarbonStyleSheet.g.items_stretch,
+								TableRowStyleSheetHeight[size],
+								size === "extra_large"
+									? CarbonStyleSheet.g.pt_05
+									: CarbonStyleSheet.g.items_center,
+								collapsibleProps?.contentContainerProps?.style,
+							],
+						}}
+					>
+						<ContentContainerBorder
+							style={ [
+								CarbonStyleSheet.g.absolute,
+								styleSheet.contentContainerBorder,
+								{
+									left: tableCellChevronProps?.width ?? (36 + 16),
+								},
+							] }
+						/>
+
+						{ /* empty cell */ }
+						<TableCell
+							width={ tableCellChevronProps?.width ?? 36 }
+							style={ [
+								CarbonStyleSheet.g.flex_initial,
+							] }
+						/>
+
+						{/* <Box
+							{ ...contentContainerProps }
+							style={ [
+								CarbonStyleSheet.g.pe_05,
+								CarbonStyleSheet.g.flex_auto,
+								size === "extra_large"
+									? CarbonStyleSheet.g.pt_05
+									: CarbonStyleSheet.g.justify_center,
+								styleSheet.contentContainer,
+								contentContainerBorderStyleSheet[layerContext][interactiveState],
+								contentContainerProps?.style,
+							] }
+						> */}
+						{ content }
+						{/* </Box> */}
+					</Collapsible>
+				) }
+			</TableRow>
+		)
+
+	},
+)
+
+interface ContentContainerBorderProps extends Omit<ViewProps, "children"> {
+}
+
+function ContentContainerBorder({
+	style,
+	...props
+}: ContentContainerBorderProps) {
+
+	const
+		layerContext =
+			useContext(LayerContext),
+
+		tableRowContext =
+			useContext(TableRowContext)
+
+	return (
+		<View
+			{ ...props }
+			style={ [
+				getContentContainerBorderStyleSheet(
+					tableRowContext.interactiveState,
+					{
+						layer: layerContext,
+						hovered: tableRowContext.hovered,
+						selected: tableRowContext.selected,
+					},
+				),
+				style,
+			] }
+		/>
+	)
+
+}
+
+const
+	styleSheet =
+		StyleSheet.create({
+			tableRowCollapsible: {
+				paddingTop: 0,
+			},
+			contentContainerBorder: {
+				height: 1,
+				top: 0,
+				right: 0,
+			},
+			contentContainer: {
+				borderTopWidth: 1,
+				borderStyle: "solid",
+			},
+		}),
+
+	contentContainerBorderStyleSheet =
+		{
+			"1": CarbonStyleSheet.create({
+				normal: {
+					backgroundColor: CarbonStyleSheet.color.border_subtle_01,
+				},
+				hovered: {
+					backgroundColor: CarbonStyleSheet.color.border_subtle_01,
+				},
+				disabled: {
+					backgroundColor: CarbonStyleSheet.color.border_subtle_01,
+				},
+				selected: {
+					backgroundColor: CarbonStyleSheet.color.border_subtle_selected_01,
+				},
+				zebra: {
+					backgroundColor: CarbonStyleSheet.color.layer_accent_01,
+				},
+			}),
+			"2": CarbonStyleSheet.create({
+				normal: {
+					backgroundColor: CarbonStyleSheet.color.border_subtle_02,
+				},
+				hovered: {
+					backgroundColor: CarbonStyleSheet.color.border_subtle_02,
+				},
+				disabled: {
+					backgroundColor: CarbonStyleSheet.color.border_subtle_02,
+				},
+				selected: {
+					backgroundColor: CarbonStyleSheet.color.border_subtle_selected_02,
+				},
+				zebra: {
+					backgroundColor: CarbonStyleSheet.color.layer_accent_02,
+				},
+			}),
+			"3": CarbonStyleSheet.create({
+				normal: {
+					backgroundColor: CarbonStyleSheet.color.border_subtle_03,
+				},
+				hovered: {
+					backgroundColor: CarbonStyleSheet.color.border_subtle_03,
+				},
+				disabled: {
+					backgroundColor: CarbonStyleSheet.color.border_subtle_03,
+				},
+				selected: {
+					backgroundColor: CarbonStyleSheet.color.border_subtle_selected_03,
+				},
+				zebra: {
+					backgroundColor: CarbonStyleSheet.color.layer_accent_03,
+				},
+			}),
+		} as const satisfies {
+			[Layer in ColorLayerLevel]: Record<
+				| TableRowInteractiveState
+				| "hovered"
+				| "selected"
+				| "zebra",
+				ViewStyle
+			>
+		}
+
+function getContentContainerBorderStyleSheet(
+	interactiveState: TableRowInteractiveState,
+	modifier: {
+		layer: ColorLayerLevel,
+		selected: boolean,
+		hovered: boolean,
+		zebra?: boolean,
+	},
+) {
+	if(modifier.selected || modifier.hovered) {
+		return contentContainerBorderStyleSheet[modifier.layer].selected
+	}
+
+	if(modifier.zebra) {
+		return contentContainerBorderStyleSheet[modifier.layer].zebra
+	}
+
+	return contentContainerBorderStyleSheet[modifier.layer][interactiveState]
+}

package/src/components/table-row-collapsible/TableRowCollapsibleProps.ts

@@ -0,0 +1,44 @@
+import type {
+	PressableProps,
+} from "react-native"
+
+import type {
+	BoxProps,
+} from "../box/BoxProps"
+
+import type {
+	CollapsibleProps,
+} from "../collapsible/CollapsibleProps"
+
+import type {
+	TableRowProps,
+} from "../table-row/TableRowProps"
+
+import type {
+	TableCellChevronProps,
+} from "./_table-cell-chevron/TableCellChevronProps"
+
+type PickedCollapsibleProps = Pick<
+	CollapsibleProps,
+	| "open"
+	| "motion"
+	| "onToggle"
+	| "onClosed"
+	| "onOpened"
+>
+
+export interface TableRowCollapsibleProps extends TableRowProps, PickedCollapsibleProps {
+	defaultOpen?: boolean,
+	/**
+	 * Render your views as collapsible content
+	 */
+	content?: React.ReactNode,
+	contentContainerProps?: Omit<BoxProps, "children">,
+	collapsibleProps?: Omit<CollapsibleProps, keyof PickedCollapsibleProps>,
+	tableCellChevronProps?: TableCellChevronProps,
+	/**
+	 * This is shortcut of `tableCellChevronProps.pressableProps.onPress`.
+	 * The `tableCellChevronProps.pressableProps.onPress` takes precedence over this prop.
+	 */
+	onPressChevron?: PressableProps["onPress"],
+}

package/src/components/table-row-collapsible/TableRowCollapsibleRef.ts

@@ -0,0 +1,10 @@
+import type {
+	TableRowRef,
+} from "../table-row/TableRowRef"
+
+import type {
+	TableRowCollapsibleRefBase,
+} from "./TableRowCollapsibleRefBase"
+
+export interface TableRowCollapsibleRef extends TableRowRef, TableRowCollapsibleRefBase {
+}

package/src/components/table-row-collapsible/TableRowCollapsibleRefBase.ts

@@ -0,0 +1,10 @@
+import type {
+	CollapsibleRefBase,
+} from "../collapsible/CollapsibleRefBase"
+
+export interface TableRowCollapsibleRefBase extends CollapsibleRefBase {
+	/**
+	 * This method does nothing if `open` component prop is defined
+	 */
+	setOpen: (value: boolean | ((value: boolean) => boolean)) => void,
+}

package/src/components/table-row-collapsible/_table-cell-chevron/TableCellChevron.tsx

@@ -0,0 +1,140 @@
+import {
+	useContext,
+} from "react"
+
+import {
+	Pressable,
+	StyleSheet,
+} from "react-native"
+
+import {
+	Color,
+} from "@audira/carbon-react-native-elements"
+
+import {
+	AnimatedCollapsibleChevron,
+} from "../../../_internal/components"
+
+import * as CarbonStyleSheet from "../../../carbon-style-sheet"
+
+import {
+	ThemeContext,
+} from "../../../contexts"
+
+import type {
+	ThemeType,
+} from "../../../types"
+
+import {
+	TableCell,
+} from "../../table-cell"
+
+import {
+	TableRowContext,
+} from "../../table-row/_TableRowContext"
+
+import type {
+	TableCellChevronProps,
+} from "./TableCellChevronProps"
+
+export function TableCellChevron({
+	width = 36,
+	open,
+	invisible,
+	pressableProps,
+	style,
+	...props
+}: TableCellChevronProps) {
+
+	const
+		themeContext =
+			useContext(ThemeContext),
+
+		tableRowContext =
+			useContext(TableRowContext)
+
+	return (
+		<TableCell
+			{ ...props }
+			width={ width }
+			style={ [
+				styleSheet.tableCellChevron,
+				invisible ? styleSheet.tableCellChevronInvisible : undefined,
+				CarbonStyleSheet.g.flex_initial,
+				style,
+			] }
+		>
+			<Pressable
+				{ ...pressableProps }
+				style={ [
+					styleSheet.pressable,
+					CarbonStyleSheet.g.ms_03,
+					CarbonStyleSheet.g.items_center,
+				] }
+			>
+				{ !invisible && (
+					<AnimatedCollapsibleChevron
+						color={ resolveIconColor(
+							tableRowContext.interactiveState,
+							{
+								colorScheme: themeContext.colorScheme,
+								hovered: tableRowContext.hovered,
+								selected: tableRowContext.selected,
+							},
+						) }
+						open={ open }
+						size={ 16 }
+					/>
+				) }
+			</Pressable>
+		</TableCell>
+	)
+
+}
+
+const
+	styleSheet =
+		StyleSheet.create({
+			tableCellChevron: {
+				paddingHorizontal: 0,
+			},
+			tableCellChevronInvisible: {
+				opacity: 0,
+			},
+			pressable: {
+				width: 32,
+			},
+		}),
+
+	mapIconColor =
+		{
+			normal: {
+				gray_10: Color.Token.gray_10.icon_secondary,
+				gray_100: Color.Token.gray_100.icon_secondary,
+			},
+			disabled: {
+				gray_10: Color.Token.gray_10.icon_disabled,
+				gray_100: Color.Token.gray_100.icon_disabled,
+			},
+			selected: {
+				gray_10: Color.Token.gray_10.icon_primary,
+				gray_100: Color.Token.gray_100.icon_primary,
+			},
+		} as const satisfies Record<
+			TableRowContext["interactiveState"] | "selected",
+			Record<ThemeType.ColorScheme, string>
+		>
+
+function resolveIconColor(
+	interactiveState: TableRowContext["interactiveState"],
+	modifier: {
+		colorScheme: ThemeContext["colorScheme"],
+		hovered: boolean,
+		selected: boolean,
+	},
+) {
+	if(modifier.hovered || modifier.selected) {
+		return mapIconColor.selected[modifier.colorScheme]
+	}
+	return mapIconColor[interactiveState][modifier.colorScheme]
+}