@audira/carbon-react-native 1.0.3 → 1.0.4

package/src/components/table-cell-header/_sort-icon/SortIcon.tsx

@@ -0,0 +1,136 @@
+import {
+	forwardRef,
+	useEffect,
+	useImperativeHandle,
+	useRef,
+} from "react"
+
+import {
+	Animated,
+	Easing,
+} from "react-native"
+
+import {
+	Motion,
+} from "@audira/carbon-react-native-elements"
+
+import IconArrowUp from "@carbon/icons/svg/32/arrow--up.svg"
+import IconArrowsVertical from "@carbon/icons/svg/32/arrows--vertical.svg"
+
+import {
+	TableCellIcon,
+} from "../../table-cell-icon/TableCellIcon"
+
+import type {
+	TableCellIconProps,
+} from "../../table-cell-icon/TableCellIconProps"
+
+import type {
+	SortIconProps,
+} from "./SortIconProps"
+
+import type {
+	SortIconRef,
+} from "./SortIconRef"
+
+export const SortIcon = forwardRef<SortIconRef, SortIconProps>(
+	function SortIcon(
+		{
+			type,
+			style,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			rotationValue =
+				useRef(new Animated.Value(0)),
+
+			opacityValue =
+				useRef(new Animated.Value(0))
+
+		useEffect(() => {
+			if(type == "none") {
+				Animated
+					.timing(
+						rotationValue.current,
+						{
+							toValue: 0,
+							duration: 0,
+							useNativeDriver: false,
+						},
+					)
+					.start()
+			} else if(type == "asc" || type == "desc") {
+				Animated
+					.timing(
+						rotationValue.current,
+						{
+							toValue: type == "asc" ? 0 : 1,
+							duration: Motion.Duration.moderate_02,
+							easing: Easing.bezier(
+								Motion.Easing.standard.productive.x1,
+								Motion.Easing.standard.productive.y1,
+								Motion.Easing.standard.productive.x2,
+								Motion.Easing.standard.productive.y2,
+							),
+							useNativeDriver: false,
+						},
+					)
+					.start()
+			}
+		}, [
+			type,
+		])
+
+		useImperativeHandle(ref, () => {
+			return {
+				setOpacity(value) {
+					Animated
+						.timing(
+							opacityValue.current,
+							{
+								toValue: value,
+								duration: Motion.Duration.fast_01,
+								easing: Easing.bezier(
+									Motion.Easing.entrance.productive.x1,
+									Motion.Easing.entrance.productive.y1,
+									Motion.Easing.entrance.productive.x2,
+									Motion.Easing.entrance.productive.y2,
+								),
+								useNativeDriver: true,
+							},
+						)
+						.start()
+				},
+			}
+		}, [])
+
+		return (
+			<AnimatedTableCellIcon
+				{ ...props }
+				Icon={ (type == "none" ? IconArrowsVertical : IconArrowUp) as TableCellIconProps["Icon"] }
+				style={ [
+					{
+						/* eslint-disable react-hooks/refs */
+						opacity: opacityValue.current,
+						transform: [{
+							rotateZ: rotationValue.current.interpolate({
+								inputRange: [0, 1],
+								outputRange: ["0deg", "180deg"],
+							}),
+						}],
+						/* eslint-enable react-hooks/refs */
+					},
+					style,
+				] }
+			/>
+		)
+
+	},
+)
+
+const
+	AnimatedTableCellIcon =
+		Animated.createAnimatedComponent(TableCellIcon)

package/src/components/table-cell-header/_sort-icon/SortIconProps.ts

@@ -0,0 +1,11 @@
+import type {
+	TableCellIconProps,
+} from "../../table-cell-icon/TableCellIconProps"
+
+import type {
+	TableCellHeaderSort,
+} from "../TableCellHeaderSort"
+
+export interface SortIconProps extends Omit<TableCellIconProps, "Icon"> {
+	type: TableCellHeaderSort,
+}

package/src/components/table-cell-header/_sort-icon/SortIconRef.ts

@@ -0,0 +1,3 @@
+export interface SortIconRef {
+	setOpacity: (value: number) => void,
+}

package/src/components/table-cell-header/_sort-icon/index.ts

@@ -0,0 +1,3 @@
+export * from "./SortIcon"
+export type * from "./SortIconProps"
+export type * from "./SortIconRef"

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

@@ -0,0 +1,4 @@
+export * from "./TableCellHeader"
+export type * from "./TableCellHeaderProps"
+export type * from "./TableCellHeaderRef"
+export type * from "./TableCellHeaderSort"

package/src/components/table-cell-icon/TableCellIcon.tsx

@@ -0,0 +1,54 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import {
+	Color,
+} from "@audira/carbon-react-native-elements"
+
+import {
+	ThemeContext,
+} from "../../contexts"
+
+import type {
+	TableCellIconProps,
+} from "./TableCellIconProps"
+
+import type {
+	TableCellIconRef,
+} from "./TableCellIconRef"
+
+export const TableCellIcon = forwardRef<TableCellIconRef, TableCellIconProps>(
+	function TableCellIcon(
+		{
+			Icon,
+			fill,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			themeContext =
+				useContext(ThemeContext)
+
+		return (
+			<Icon
+				ref={ ref }
+				{ ...props }
+				width={ 16 }
+				height={ 16 }
+				fill={ fill || mapFillColor[themeContext.colorScheme] }
+			/>
+		)
+
+	},
+)
+
+const
+	mapFillColor =
+		{
+			gray_10: Color.Token.gray_10.icon_primary,
+			gray_100: Color.Token.gray_100.icon_primary,
+		} as const satisfies Record<ThemeContext["colorScheme"], string>

package/src/components/table-cell-icon/TableCellIconProps.ts

@@ -0,0 +1,16 @@
+import type {
+	Svg,
+	SvgProps,
+} from "react-native-svg"
+
+export interface TableCellIconProps extends Omit<
+	SvgProps,
+	| "children"
+	| "width"
+	| "height"
+> {
+	Icon: React.ForwardRefExoticComponent<
+		& SvgProps
+		& React.RefAttributes<Svg>
+	>,
+}

package/src/components/table-cell-icon/TableCellIconRef.ts

@@ -0,0 +1,4 @@
+import type Svg from "react-native-svg"
+
+export interface TableCellIconRef extends Svg {
+}

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

@@ -0,0 +1,3 @@
+export * from "./TableCellIcon"
+export type * from "./TableCellIconProps"
+export type * from "./TableCellIconRef"

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 {
+}