@audira/carbon-react-native 1.0.2 → 1.0.4

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

@@ -0,0 +1,111 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import type {
+	TextStyle,
+} from "react-native"
+
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
+
+import {
+	TableRowContext,
+} from "../table-row/_TableRowContext"
+
+import {
+	TableRowHeaderContext,
+} from "../table-row-header/_TableRowHeaderContext"
+
+import {
+	Text,
+} from "../text"
+
+import type {
+	TableCellTextProps,
+} from "./TableCellTextProps"
+
+import type {
+	TableCellTextRef,
+} from "./TableCellTextRef"
+
+/**
+ * `TableCellText` is a `Text` component as wrapper to get correct text color style based by row's interactive state, including hovering the row
+ */
+export const TableCellText = forwardRef<TableCellTextRef, TableCellTextProps>(
+	function TableCellText(
+		{
+			children,
+			style,
+			...props
+		},
+		ref,
+	) {
+
+		CarbonStyleSheet.use()
+
+		const
+			tableRowContext =
+				useContext(TableRowContext),
+
+			tableRowHeaderContext =
+				useContext(TableRowHeaderContext)
+
+		return (
+			<Text
+				ref={ ref }
+				{ ...props }
+				type={ tableRowHeaderContext.inRowHeader ? "heading_compact_01" : "body_compact_01" }
+				style={ [
+					getStyleSheetInteractiveState({
+						rowInteractiveState: tableRowContext.interactiveState,
+						rowHovered: tableRowContext.hovered,
+						inRowHeader: tableRowHeaderContext.inRowHeader,
+					}),
+					style,
+				] }
+			>
+				{ children }
+			</Text>
+		)
+
+	},
+)
+
+const
+	styleSheetInteractiveState =
+		CarbonStyleSheet.create({
+			normal: {
+				color: CarbonStyleSheet.color.text_secondary,
+			},
+			disabled: {
+				color: CarbonStyleSheet.color.text_disabled,
+			},
+			selected: {
+				color: CarbonStyleSheet.color.text_primary,
+			},
+			normal_header: {
+				color: CarbonStyleSheet.color.text_primary,
+			},
+		} as const satisfies Record<
+			| TableRowContext["interactiveState"]
+			| "normal_header",
+			TextStyle
+		>)
+
+function getStyleSheetInteractiveState(
+	data: {
+		rowInteractiveState: TableRowContext["interactiveState"],
+		rowHovered: boolean,
+		inRowHeader: boolean,
+	},
+) {
+	if(!data.inRowHeader) {
+		if(data.rowHovered) {
+			return styleSheetInteractiveState.selected // same style as the `selected`
+		}
+		return styleSheetInteractiveState[data.rowInteractiveState]
+	}
+
+	return styleSheetInteractiveState.normal_header
+}

package/src/components/table-cell-text/TableCellTextProps.ts

@@ -0,0 +1,9 @@
+import type {
+	TextProps,
+} from "../text/TextProps"
+
+export interface TableCellTextProps extends Omit<
+	TextProps,
+	| "type"
+> {
+}

package/src/components/table-cell-text/TableCellTextRef.ts

@@ -0,0 +1,6 @@
+import type {
+	TextRef,
+} from "../text/TextRef"
+
+export interface TableCellTextRef extends TextRef {
+}

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

@@ -0,0 +1,3 @@
+export * from "./TableCellText"
+export type * from "./TableCellTextProps"
+export type * from "./TableCellTextRef"

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

@@ -0,0 +1,271 @@
+import {
+	forwardRef,
+	useCallback,
+	useContext,
+	useMemo,
+	useState,
+} from "react"
+
+import {
+	Platform,
+	Pressable,
+	StyleSheet,
+	type PressableProps,
+	type ViewStyle,
+} from "react-native"
+
+import {
+	Motion,
+	type ColorLayerLevel,
+} from "@audira/carbon-react-native-elements"
+
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
+
+import {
+	LayerContext,
+} from "../layer"
+
+import {
+	TableContext,
+} from "../table/_TableContext"
+
+import type {
+	TableRowInteractiveState,
+} from "./TableRowInteractiveState"
+
+import type {
+	TableRowProps,
+} from "./TableRowProps"
+
+import type {
+	TableRowRef,
+} from "./TableRowRef"
+
+import {
+	TableRowContext,
+} from "./_TableRowContext"
+
+import {
+	StyleSheetHeight,
+} from "./_style-sheet-height"
+
+export const TableRow = forwardRef<TableRowRef, TableRowProps>(
+	function TableRow(
+		{
+			interactiveState = "normal",
+			size: sizeProp,
+			zebra,
+			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)
+
+		const
+			onHoverIn: NonNullable<PressableProps["onHoverIn"]> =
+				useCallback(event => {
+					setHovered(true)
+					onHoverInProp?.(event)
+				}, [
+					onHoverInProp,
+				]),
+
+			onHoverOut: NonNullable<PressableProps["onHoverOut"]> =
+				useCallback(event => {
+					setHovered(false)
+					onHoverOutProp?.(event)
+				}, [
+					onHoverOutProp,
+				])
+
+		return (
+			<TableRowContext.Provider
+				value={{
+					interactiveState,
+					hovered,
+				}}
+			>
+				<Pressable
+					ref={ ref }
+					{ ...props }
+					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>
+		)
+
+	},
+)
+
+const
+	styleSheet =
+		StyleSheet.create({
+			tableRow: {
+				borderBottomWidth: 1,
+				borderStyle: "solid",
+				...Platform.select({
+					web: {
+						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})`,
+					},
+				}),
+			},
+		}),
+
+	styleSheetInteractiveStatePerLayer =
+		{
+			"1": CarbonStyleSheet.create({
+				normal: {
+					backgroundColor: CarbonStyleSheet.color.layer_01,
+					borderBottomColor: CarbonStyleSheet.color.border_subtle_01,
+				},
+				hovered: {
+					backgroundColor: CarbonStyleSheet.color.layer_hover_01,
+					borderBottomColor: CarbonStyleSheet.color.border_subtle_01,
+				},
+				disabled: {
+					backgroundColor: CarbonStyleSheet.color.layer_01,
+					borderBottomColor: CarbonStyleSheet.color.border_subtle_01,
+				},
+				selected: {
+					backgroundColor: CarbonStyleSheet.color.layer_selected_01,
+					borderBottomColor: CarbonStyleSheet.color.border_subtle_selected_01,
+				},
+				selected_hover: {
+					backgroundColor: CarbonStyleSheet.color.layer_selected_hover_01,
+					borderBottomColor: CarbonStyleSheet.color.border_subtle_selected_01,
+				},
+				zebra: {
+					backgroundColor: CarbonStyleSheet.color.layer_accent_01,
+					borderBottomColor: CarbonStyleSheet.color.layer_accent_01,
+				},
+			}),
+			"2": CarbonStyleSheet.create({
+				normal: {
+					backgroundColor: CarbonStyleSheet.color.layer_02,
+					borderBottomColor: CarbonStyleSheet.color.border_subtle_02,
+				},
+				hovered: {
+					backgroundColor: CarbonStyleSheet.color.layer_hover_02,
+					borderBottomColor: CarbonStyleSheet.color.border_subtle_02,
+				},
+				disabled: {
+					backgroundColor: CarbonStyleSheet.color.layer_02,
+					borderBottomColor: CarbonStyleSheet.color.border_subtle_02,
+				},
+				selected: {
+					backgroundColor: CarbonStyleSheet.color.layer_selected_02,
+					borderBottomColor: CarbonStyleSheet.color.border_subtle_selected_02,
+				},
+				selected_hover: {
+					backgroundColor: CarbonStyleSheet.color.layer_selected_hover_02,
+					borderBottomColor: CarbonStyleSheet.color.border_subtle_selected_02,
+				},
+				zebra: {
+					backgroundColor: CarbonStyleSheet.color.layer_accent_02,
+					borderBottomColor: CarbonStyleSheet.color.layer_accent_02,
+				},
+			}),
+			"3": CarbonStyleSheet.create({
+				normal: {
+					backgroundColor: CarbonStyleSheet.color.layer_03,
+					borderBottomColor: CarbonStyleSheet.color.border_subtle_03,
+				},
+				hovered: {
+					backgroundColor: CarbonStyleSheet.color.layer_hover_03,
+					borderBottomColor: CarbonStyleSheet.color.border_subtle_03,
+				},
+				disabled: {
+					backgroundColor: CarbonStyleSheet.color.layer_03,
+					borderBottomColor: CarbonStyleSheet.color.border_subtle_03,
+				},
+				selected: {
+					backgroundColor: CarbonStyleSheet.color.layer_selected_03,
+					borderBottomColor: CarbonStyleSheet.color.border_subtle_selected_03,
+				},
+				selected_hover: {
+					backgroundColor: CarbonStyleSheet.color.layer_selected_hover_03,
+					borderBottomColor: CarbonStyleSheet.color.border_subtle_selected_03,
+				},
+				zebra: {
+					backgroundColor: CarbonStyleSheet.color.layer_accent_03,
+					borderBottomColor: CarbonStyleSheet.color.layer_accent_03,
+				},
+			}),
+		} as const satisfies {
+			[Layer in ColorLayerLevel]: Record<
+				| TableRowInteractiveState
+				| "hovered"
+				| "selected_hover"
+				| "zebra",
+				ViewStyle
+			>
+		}
+
+function getInteractiveStateStyle(
+	interactiveState: TableRowInteractiveState,
+	data: {
+		layer: ColorLayerLevel,
+		hovered: boolean,
+		zebra?: boolean,
+	},
+) {
+	if(!data.hovered) {
+		if(data.zebra && interactiveState == "normal") {
+			return styleSheetInteractiveStatePerLayer[data.layer].zebra
+		}
+		return styleSheetInteractiveStatePerLayer[data.layer][interactiveState]
+	}
+
+	if(interactiveState == "selected") {
+		return styleSheetInteractiveStatePerLayer[data.layer].selected_hover
+	}
+
+	return styleSheetInteractiveStatePerLayer[data.layer].hovered
+}

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

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

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

@@ -0,0 +1,45 @@
+import type {
+	PressableProps,
+	ViewProps,
+} from "react-native"
+
+import type {
+	TableRowInteractiveState,
+} from "./TableRowInteractiveState"
+
+import type {
+	TableRowSize,
+} from "./TableRowSize"
+
+export interface TableRowProps extends Omit<PressableProps, "style"> {
+	/**
+	 * @default "large"
+	 * @see https://carbondesignsystem.com/components/data-table/style/#rows
+	 */
+	size?: TableRowSize,
+	/**
+	 * A row can use a zebra stripe modifier to style
+	 * with alternating colors to make scanning
+	 * horizontal information easier for the user.
+	 * 
+	 * If you want to use zebra stripe,
+	 * ensure you are giving this prop true
+	 * to every second row (even) started after header row
+	 * 
+	 * ===== Table =====
+	 * 
+	 * - Header Row
+	 * - Row 1
+	 * - Row 2 (zebra)
+	 * - Row 3
+	 * - Row 4 (zebra)
+	 * 
+	 * ===== Table =====
+	 */
+	zebra?: boolean,
+	/**
+	 * @default "normal"
+	 */
+	interactiveState?: TableRowInteractiveState,
+	style?: ViewProps["style"],
+}

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

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

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

@@ -0,0 +1,9 @@
+/**
+ * @see https://carbondesignsystem.com/components/data-table/style/#rows
+ */
+export type TableRowSize =
+	| "extra_small"
+	| "small"
+	| "medium"
+	| "large"
+	| "extra_large"

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

@@ -0,0 +1,17 @@
+import {
+	createContext,
+} from "react"
+
+import type {
+	TableRowInteractiveState,
+} from "./TableRowInteractiveState"
+
+export interface TableRowContext {
+	interactiveState: TableRowInteractiveState,
+	hovered: boolean,
+}
+
+export const TableRowContext = createContext<TableRowContext>({
+	interactiveState: "normal",
+	hovered: false,
+})

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

@@ -0,0 +1,27 @@
+import {
+	StyleSheet,
+	type ViewStyle,
+} from "react-native"
+
+import type {
+	TableRowSize,
+} from "./TableRowSize"
+
+export const StyleSheetHeight =
+	StyleSheet.create({
+		extra_small: {
+			height: 24,
+		},
+		small: {
+			height: 32,
+		},
+		medium: {
+			height: 40,
+		},
+		large: {
+			height: 48,
+		},
+		extra_large: {
+			height: 64,
+		},
+	} as const satisfies Record<TableRowSize, Pick<ViewStyle, "height">>)

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

@@ -0,0 +1,5 @@
+export * from "./TableRow"
+export type * from "./TableRowInteractiveState"
+export type * from "./TableRowProps"
+export type * from "./TableRowRef"
+export type * from "./TableRowSize"

package/src/components/table-row-header/TableRowHeader.tsx

@@ -0,0 +1,115 @@
+import {
+	forwardRef,
+	useContext,
+	useMemo,
+} from "react"
+
+import 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 {
+	LayerContext,
+} from "../layer"
+
+import {
+	TableContext,
+} from "../table/_TableContext"
+
+import {
+	StyleSheetHeight,
+} from "../table-row/_style-sheet-height"
+
+import type {
+	TableRowHeaderProps,
+} from "./TableRowHeaderProps"
+
+import type {
+	TableRowHeaderRef,
+} from "./TableRowHeaderRef"
+
+import {
+	TableRowHeaderContext,
+} from "./_TableRowHeaderContext"
+
+export const TableRowHeader = forwardRef<TableRowHeaderRef, TableRowHeaderProps>(
+	function TableRowHeader(
+		{
+			size: sizeProp,
+			role = "row",
+			style,
+			children,
+			...props
+		},
+		ref,
+	) {
+
+		CarbonStyleSheet.use()
+
+		const
+			layerContext =
+				useContext(LayerContext),
+
+			tableContext =
+				useContext(TableContext),
+
+			size =
+				useMemo(() => {
+					return sizeProp ?? tableContext.rowSize
+				}, [
+					sizeProp,
+					tableContext.rowSize,
+				])
+
+		return (
+			<TableRowHeaderContext.Provider
+				value={{
+					inRowHeader: true,
+					size,
+				}}
+			>
+				<Box
+					ref={ ref }
+					{ ...props }
+					role={ role }
+					style={ [
+						CarbonStyleSheet.g.flex_auto,
+						CarbonStyleSheet.g.flex_row,
+						StyleSheetHeight[size],
+						styleSheetBG[`normal_${layerContext}`],
+						style,
+					] }
+				>
+					{ children }
+				</Box>
+			</TableRowHeaderContext.Provider>
+		)
+
+	},
+)
+
+const
+	styleSheetBG =
+		CarbonStyleSheet.create({
+			normal_1: {
+				backgroundColor: CarbonStyleSheet.color.layer_accent_01,
+			},
+			normal_2: {
+				backgroundColor: CarbonStyleSheet.color.layer_accent_02,
+			},
+			normal_3: {
+				backgroundColor: CarbonStyleSheet.color.layer_accent_02,
+			},
+		} as const satisfies {
+			[Layer in `${"normal"}_${ColorLayerLevel}`]: Pick<ViewStyle, "backgroundColor">
+		})

package/src/components/table-row-header/TableRowHeaderProps.ts

@@ -0,0 +1,13 @@
+import type {
+	BoxProps,
+} from "../box/BoxProps"
+
+import type {
+	TableRowProps,
+} from "../table-row/TableRowProps"
+
+export interface TableRowHeaderProps extends
+	BoxProps,
+	Pick<TableRowProps, "size">
+{
+}

package/src/components/table-row-header/TableRowHeaderRef.ts

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

package/src/components/table-row-header/_TableRowHeaderContext.ts

@@ -0,0 +1,19 @@
+import {
+	createContext,
+} from "react"
+
+import type {
+	TableRowSize,
+} from "../table-row/TableRowSize"
+
+export interface TableRowHeaderContext {
+	inRowHeader: boolean,
+	size: TableRowSize,
+}
+
+export const TableRowHeaderContext = createContext<TableRowHeaderContext>({
+	// Have to provide false as initial value
+	// to tell the `TableCellText` that it is not used inside of `TableRowHeader`
+	inRowHeader: false,
+	size: "large",
+})

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

@@ -0,0 +1,3 @@
+export * from "./TableRowHeader"
+export type * from "./TableRowHeaderProps"
+export type * from "./TableRowHeaderRef"