@audira/carbon-react-native 1.0.4 → 1.0.6

package/src/components/table-cell/TableCellProps.ts

@@ -26,6 +26,11 @@ export interface TableCellProps extends ViewProps {
 	 * `children` prop takes over precedence over this prop.
 	 */
 	text?: string,
+	/**
+	 * You may need this to make the checkbox cell invisible,
+	 * but consist its width
+	 */
+	invisible?: boolean,
 	/**
 	 * Only applies if you use the `text` prop instead of `children`
 	 */

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-header/_sort-icon/SortIcon.tsx

@@ -8,6 +8,7 @@ import {
 import {
 	Animated,
 	Easing,
+	Platform,
 } from "react-native"
 
 import {
@@ -58,7 +59,7 @@ export const SortIcon = forwardRef<SortIconRef, SortIconProps>(
 						{
 							toValue: 0,
 							duration: 0,
-							useNativeDriver: false,
+							useNativeDriver: Platform.OS != "web",
 						},
 					)
 					.start()
@@ -75,7 +76,7 @@ export const SortIcon = forwardRef<SortIconRef, SortIconProps>(
 								Motion.Easing.standard.productive.x2,
 								Motion.Easing.standard.productive.y2,
 							),
-							useNativeDriver: false,
+							useNativeDriver: Platform.OS != "web",
 						},
 					)
 					.start()
@@ -99,7 +100,7 @@ export const SortIcon = forwardRef<SortIconRef, SortIconProps>(
 									Motion.Easing.entrance.productive.x2,
 									Motion.Easing.entrance.productive.y2,
 								),
-								useNativeDriver: true,
+								useNativeDriver: Platform.OS != "web",
 							},
 						)
 						.start()

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-header/TableHeader.tsx

@@ -0,0 +1,110 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import type {
+	TextStyle,
+	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 {
+	Text,
+} from "../text/Text"
+
+import type {
+	TableHeaderProps,
+} from "./TableHeaderProps"
+
+import type {
+	TableHeaderRef,
+} from "./TableHeaderRef"
+
+export const TableHeader = forwardRef<TableHeaderRef, TableHeaderProps>(
+	function TableHeader(
+		{
+			title,
+			description,
+			titleProps,
+			descriptionProps,
+			style,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			layerContext =
+				useContext(LayerContext)
+
+		return (
+			<Box
+				ref={ ref }
+				{ ...props }
+				style={ [
+					CarbonStyleSheet.g.pt_05,
+					CarbonStyleSheet.g.pb_06,
+					CarbonStyleSheet.g.px_05,
+					carbonStyleSheet[`bg_${layerContext}`],
+					style,
+				] }
+			>
+				<Text
+					{ ...titleProps }
+					type="heading_03"
+				>
+					{ title }
+				</Text>
+
+				{ !!description && (
+					<Text
+						{ ...descriptionProps }
+						type="body_compact_01"
+						style={ [
+							carbonStyleSheet.description,
+							descriptionProps?.style,
+						] }
+					>
+						{ description }
+					</Text>
+				) }
+			</Box>
+		)
+
+	},
+)
+
+const
+	carbonStyleSheet =
+		CarbonStyleSheet.create({
+			bg_1: {
+				backgroundColor: CarbonStyleSheet.color.layer_01,
+			},
+			bg_2: {
+				backgroundColor: CarbonStyleSheet.color.layer_02,
+			},
+			bg_3: {
+				backgroundColor: CarbonStyleSheet.color.layer_03,
+			},
+			description: {
+				color: CarbonStyleSheet.color.text_secondary,
+			},
+		} as const satisfies {
+			[Layer in `bg_${ColorLayerLevel}`]: Pick<ViewStyle, "backgroundColor">
+		} & {
+			description: Pick<TextStyle, "color">,
+		})

package/src/components/table-header/TableHeaderProps.ts

@@ -0,0 +1,22 @@
+import type {
+	BoxProps,
+} from "../box/BoxProps"
+
+import type {
+	TextProps,
+} from "../text/TextProps"
+
+export interface TableHeaderProps extends Omit<BoxProps, "children"> {
+	title: string,
+	description?: string,
+	titleProps?: Omit<
+		TextProps,
+		| "type"
+		| "children"
+	>,
+	descriptionProps?: Omit<
+		TextProps,
+		| "type"
+		| "children"
+	>,
+}

package/src/components/table-header/TableHeaderRef.ts

@@ -0,0 +1,6 @@
+import type {
+	BoxRef,
+} from "../box/BoxRef"
+
+export interface TableHeaderRef extends BoxRef {
+}

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

@@ -0,0 +1,3 @@
+export * from "./TableHeader"
+export type * from "./TableHeaderProps"
+export type * from "./TableHeaderRef"

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"