@audira/carbon-react-native 1.0.3 → 1.0.4

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"