@audira/carbon-react-native 1.0.5 → 1.0.6

package/src/components/table-cell-checkbox/TableCellCheckbox.tsx

@@ -0,0 +1,168 @@
+import {
+	forwardRef,
+	useCallback,
+	useContext,
+	useEffect,
+	useImperativeHandle,
+	useRef,
+	useState,
+} from "react"
+
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
+
+import {
+	CheckboxInput,
+	type CheckboxInputProps,
+	type CheckboxInputRefBase,
+	type CheckboxInputState,
+} from "../checkbox-input"
+
+import {
+	TableCell,
+	type TableCellRef,
+} from "../table-cell"
+
+import {
+	TableRowContext,
+} from "../table-row/_TableRowContext"
+
+import type {
+	TableCellCheckboxProps,
+} from "./TableCellCheckboxProps"
+
+import type {
+	TableCellCheckboxRef,
+} from "./TableCellCheckboxRef"
+
+export const TableCellCheckbox = forwardRef<TableCellCheckboxRef, TableCellCheckboxProps>(
+	function TableCellCheckbox(
+		{
+			// +++ Picked CheckboxInput props +++
+			defaultChecked,
+			checked: checkedProp,
+			interactiveState,
+			onChange,
+			// --- Picked CheckboxInput props ---
+			width = 32,
+			invisible,
+			checkboxInputProps,
+			style,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			tableCellRef =
+				useRef<TableCellRef>(null),
+
+			tableRowContext =
+				useContext(TableRowContext),
+
+			checkedRef =
+				useRef({
+					onChangeEffect: false,
+					value: typeof checkedProp == "boolean" || typeof checkedProp == "object"
+						? checkedProp
+						: typeof defaultChecked == "boolean" || typeof defaultChecked == "object"
+							? defaultChecked
+							: false,
+				}),
+
+			[checkedSelf, setCheckedSelf] =
+				useState<CheckboxInputState>(() => {
+					if(typeof defaultChecked == "boolean" || typeof defaultChecked == "object") {
+						return defaultChecked
+					}
+					return false
+				}),
+
+			controlled =
+				typeof checkedProp !== "undefined",
+
+			checked =
+				controlled ? checkedProp : checkedSelf
+
+		const
+			onChangeCheckboxInput: NonNullable<CheckboxInputProps["onChange"]> =
+				useCallback(state => {
+					if(!controlled) {
+						checkedRef.current.onChangeEffect = true
+						checkedRef.current.value = state
+						setCheckedSelf(state)
+					} else {
+						onChange?.(state)
+					}
+				}, [
+					controlled,
+					onChange,
+				])
+
+		useEffect(() => {
+			if(!invisible) {
+				checkedRef.current.value = checked
+
+				tableRowContext.setSelected(checked !== false)
+
+				if(checkedRef.current.onChangeEffect) {
+					checkedRef.current.onChangeEffect = false
+					onChange?.(checked)
+				}
+			}
+		}, [
+			checked,
+			tableRowContext,
+			onChange,
+			invisible,
+		])
+
+		useImperativeHandle(ref, () => {
+			return Object.assign<TableCellRef, CheckboxInputRefBase>(
+				tableCellRef.current ?? {} as TableCellRef,
+				{
+					get checked() {
+						return checked
+					},
+					setChecked(val) {
+						if(!controlled && interactiveState != "read_only") {
+							checkedRef.current.onChangeEffect = true
+							if(typeof val == "function") {
+								checkedRef.current.value = val(checkedRef.current.value)
+							} else {
+								checkedRef.current.value = val
+							}
+							setCheckedSelf(checkedRef.current.value)
+						}
+					},
+				},
+			)
+		}, [
+			checked,
+			controlled,
+			interactiveState,
+		])
+
+		return (
+			<TableCell
+				ref={ tableCellRef }
+				{ ...props }
+				width={ width }
+				invisible={ invisible }
+				style={ [
+					CarbonStyleSheet.g.flex_initial,
+					style,
+				] }
+			>
+				{ !invisible && (
+					<CheckboxInput
+						{ ...checkboxInputProps }
+						interactiveState={ interactiveState ?? tableRowContext.interactiveState }
+						checked={ checked }
+						onChange={ onChangeCheckboxInput }
+					/>
+				) }
+			</TableCell>
+		)
+
+	},
+)

package/src/components/table-cell-checkbox/TableCellCheckboxInteractiveState.ts

@@ -0,0 +1,13 @@
+import type {
+	CheckboxInputInteractiveState,
+} from "../checkbox-input/CheckboxInputInteractiveState"
+
+import type {
+	TableRowInteractiveState,
+} from "../table-row/TableRowInteractiveState"
+
+export type TableCellCheckboxInteractiveState =
+	Exclude<
+		CheckboxInputInteractiveState,
+		TableRowInteractiveState
+	>

package/src/components/table-cell-checkbox/TableCellCheckboxProps.ts

@@ -0,0 +1,26 @@
+import type {
+	CheckboxInputProps,
+} from "../checkbox-input/CheckboxInputProps"
+
+import type {
+	TableCellProps,
+} from "../table-cell/TableCellProps"
+
+import type {
+	TableCellCheckboxInteractiveState,
+} from "./TableCellCheckboxInteractiveState"
+
+type PickedCheckboxInputProps = Pick<
+	CheckboxInputProps,
+	| "defaultChecked"
+	| "checked"
+	| "onChange"
+>
+
+export interface TableCellCheckboxProps extends Omit<TableCellProps, "children">, PickedCheckboxInputProps {
+	/**
+	 * For `normal` and `disabled`, pass it from the `TableRow`, or `TableRowCollapsible`
+	 */
+	interactiveState?: TableCellCheckboxInteractiveState,
+	checkboxInputProps?: Omit<CheckboxInputProps, keyof PickedCheckboxInputProps>,
+}

package/src/components/table-cell-checkbox/TableCellCheckboxRef.ts

@@ -0,0 +1,10 @@
+import type {
+	CheckboxInputRefBase,
+} from "../checkbox-input/CheckboxInputRefBase"
+
+import type {
+	TableRowRef,
+} from "../table-row/TableRowRef"
+
+export interface TableCellCheckboxRef extends TableRowRef, CheckboxInputRefBase {
+}

package/src/components/table-cell-checkbox/index.ts

@@ -0,0 +1,4 @@
+export * from "./TableCellCheckbox"
+export type * from "./TableCellCheckboxInteractiveState"
+export type * from "./TableCellCheckboxProps"
+export type * from "./TableCellCheckboxRef"

package/src/components/table-cell-text/TableCellText.tsx

@@ -60,6 +60,7 @@ export const TableCellText = forwardRef<TableCellTextRef, TableCellTextProps>(
 					getStyleSheetInteractiveState({
 						rowInteractiveState: tableRowContext.interactiveState,
 						rowHovered: tableRowContext.hovered,
+						rowSelected: tableRowContext.selected,
 						inRowHeader: tableRowHeaderContext.inRowHeader,
 					}),
 					style,
@@ -81,15 +82,12 @@ const
 			disabled: {
 				color: CarbonStyleSheet.color.text_disabled,
 			},
-			selected: {
-				color: CarbonStyleSheet.color.text_primary,
-			},
-			normal_header: {
+			in_header: {
 				color: CarbonStyleSheet.color.text_primary,
 			},
 		} as const satisfies Record<
 			| TableRowContext["interactiveState"]
-			| "normal_header",
+			| "in_header",
 			TextStyle
 		>)
 
@@ -97,15 +95,16 @@ function getStyleSheetInteractiveState(
 	data: {
 		rowInteractiveState: TableRowContext["interactiveState"],
 		rowHovered: boolean,
+		rowSelected: boolean,
 		inRowHeader: boolean,
 	},
 ) {
 	if(!data.inRowHeader) {
-		if(data.rowHovered) {
-			return styleSheetInteractiveState.selected // same style as the `selected`
+		if(data.rowHovered || data.rowSelected) {
+			return styleSheetInteractiveState.in_header // even it's not in header, it has same style like the header
 		}
 		return styleSheetInteractiveState[data.rowInteractiveState]
 	}
 
-	return styleSheetInteractiveState.normal_header
+	return styleSheetInteractiveState.in_header
 }

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

@@ -11,6 +11,8 @@ import {
 	Pressable,
 	StyleSheet,
 	type PressableProps,
+	type View,
+	type ViewProps,
 	type ViewStyle,
 } from "react-native"
 
@@ -45,6 +47,10 @@ import {
 	TableRowContext,
 } from "./_TableRowContext"
 
+import {
+	TableRowContextProvider,
+} from "./_TableRowContextProvider"
+
 import {
 	StyleSheetHeight,
 } from "./_style-sheet-height"
@@ -53,35 +59,18 @@ export const TableRow = forwardRef<TableRowRef, TableRowProps>(
 	function TableRow(
 		{
 			interactiveState = "normal",
-			size: sizeProp,
+			size,
 			zebra,
+			defaultSelected,
 			onHoverIn: onHoverInProp,
 			onHoverOut: onHoverOutProp,
 			role = "row",
-			style,
-			children,
 			...props
 		},
 		ref,
 	) {
 
-		CarbonStyleSheet.use()
-
 		const
-			layerContext =
-				useContext(LayerContext),
-
-			tableContext =
-				useContext(TableContext),
-
-			size =
-				useMemo(() => {
-					return sizeProp ?? tableContext.rowSize
-				}, [
-					sizeProp,
-					tableContext.rowSize,
-				]),
-
 			[hovered, setHovered] =
 				useState(false)
 
@@ -103,40 +92,90 @@ export const TableRow = forwardRef<TableRowRef, TableRowProps>(
 				])
 
 		return (
-			<TableRowContext.Provider
-				value={{
-					interactiveState,
-					hovered,
-				}}
+			<TableRowContextProvider
+				interactiveState={ interactiveState }
+				hovered={ hovered }
+				defaultSelected={ defaultSelected }
 			>
-				<Pressable
+				<Content
 					ref={ ref }
 					{ ...props }
+					interactiveState={ interactiveState }
+					size={ size }
+					zebra={ zebra }
 					role={ role }
 					onHoverIn={ onHoverIn }
 					onHoverOut={ onHoverOut }
-					style={ [
-						styleSheet.tableRow,
-						CarbonStyleSheet.g.flex_auto,
-						CarbonStyleSheet.g.flex_row,
-						StyleSheetHeight[size],
-						getInteractiveStateStyle(
-							interactiveState,
-							{
-								layer: layerContext,
-								hovered,
-								zebra,
-							},
-						),
-						size === "extra_large"
-							? CarbonStyleSheet.g.pt_05
-							: CarbonStyleSheet.g.items_center,
-						style,
-					] }
-				>
-					{ children }
-				</Pressable>
-			</TableRowContext.Provider>
+				/>
+			</TableRowContextProvider>
+		)
+
+	},
+)
+
+interface ContentProps extends Omit<PressableProps, "style"> {
+	interactiveState: NonNullable<TableRowProps["interactiveState"]>,
+	size?: TableRowProps["size"],
+	zebra?: TableRowProps["zebra"],
+	style?: ViewProps["style"],
+}
+
+const Content = forwardRef<View, ContentProps>(
+	function Content(
+		{
+			interactiveState,
+			size: sizeProp,
+			zebra,
+			style,
+			...props
+		},
+		ref,
+	) {
+
+		CarbonStyleSheet.use()
+
+		const
+			layerContext =
+				useContext(LayerContext),
+
+			tableContext =
+				useContext(TableContext),
+
+			size =
+				useMemo(() => {
+					return sizeProp ?? tableContext.rowSize
+				}, [
+					sizeProp,
+					tableContext.rowSize,
+				]),
+
+			tableRowContext =
+				useContext(TableRowContext)
+
+		return (
+			<Pressable
+				ref={ ref }
+				{ ...props }
+				style={ [
+					styleSheet.tableRow,
+					CarbonStyleSheet.g.flex_auto,
+					CarbonStyleSheet.g.flex_row,
+					StyleSheetHeight[size],
+					getInteractiveStateStyle(
+						interactiveState,
+						{
+							layer: layerContext,
+							hovered: tableRowContext.hovered,
+							selected: tableRowContext.selected,
+							zebra,
+						},
+					),
+					size === "extra_large"
+						? CarbonStyleSheet.g.pt_05
+						: CarbonStyleSheet.g.items_center,
+					style,
+				] }
+			/>
 		)
 
 	},
@@ -153,6 +192,7 @@ const
 						transitionProperty: "background-color, border-bottom-color",
 						transitionDuration: `${Motion.Duration.fast_01}ms`,
 						transitionTimingFunction: `cubic-bezier(${Motion.Easing.entrance.productive.x1},${Motion.Easing.entrance.productive.y1},${Motion.Easing.entrance.productive.x2},${Motion.Easing.entrance.productive.y2})`,
+						cursor: "auto",
 					},
 				}),
 			},
@@ -242,6 +282,7 @@ const
 			[Layer in ColorLayerLevel]: Record<
 				| TableRowInteractiveState
 				| "hovered"
+				| "selected"
 				| "selected_hover"
 				| "zebra",
 				ViewStyle
@@ -250,22 +291,26 @@ const
 
 function getInteractiveStateStyle(
 	interactiveState: TableRowInteractiveState,
-	data: {
+	modifier: {
 		layer: ColorLayerLevel,
+		selected: boolean,
 		hovered: boolean,
 		zebra?: boolean,
 	},
 ) {
-	if(!data.hovered) {
-		if(data.zebra && interactiveState == "normal") {
-			return styleSheetInteractiveStatePerLayer[data.layer].zebra
+	if(!modifier.hovered) {
+		if(modifier.zebra && interactiveState == "normal") {
+			return styleSheetInteractiveStatePerLayer[modifier.layer].zebra
+		}
+		if(modifier.selected) {
+			return styleSheetInteractiveStatePerLayer[modifier.layer].selected
 		}
-		return styleSheetInteractiveStatePerLayer[data.layer][interactiveState]
+		return styleSheetInteractiveStatePerLayer[modifier.layer][interactiveState]
 	}
 
-	if(interactiveState == "selected") {
-		return styleSheetInteractiveStatePerLayer[data.layer].selected_hover
+	if(modifier.selected) {
+		return styleSheetInteractiveStatePerLayer[modifier.layer].selected_hover
 	}
 
-	return styleSheetInteractiveStatePerLayer[data.layer].hovered
+	return styleSheetInteractiveStatePerLayer[modifier.layer].hovered
 }

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

@@ -1,4 +1,3 @@
 export type TableRowInteractiveState =
 	| "normal"
 	| "disabled"
-	| "selected"

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

@@ -11,7 +11,7 @@ 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.
@@ -40,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: {