@audira/carbon-react-native 1.0.3 → 1.0.5

package/src/components/table-cell-header/TableCellHeader.tsx

@@ -0,0 +1,274 @@
+import {
+	forwardRef,
+	useCallback,
+	useContext,
+	useEffect,
+	useRef,
+	useState,
+} from "react"
+
+import {
+	Pressable,
+	type ViewStyle,
+} from "react-native"
+
+import type {
+	ColorLayerLevel,
+} from "@audira/carbon-react-native-elements"
+
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
+
+import {
+	LayerContext,
+} from "../layer/LayerContext"
+
+import {
+	TableCellText,
+} from "../table-cell-text/TableCellText"
+
+import {
+	TableRowHeaderContext,
+} from "../table-row-header/_TableRowHeaderContext"
+
+import type {
+	TableCellHeaderProps,
+} from "./TableCellHeaderProps"
+
+import type {
+	TableCellHeaderRef,
+} from "./TableCellHeaderRef"
+
+import {
+	SortIcon,
+	type SortIconRef,
+} from "./_sort-icon"
+
+/**
+ * Similar as the `TableCell`. `TableCellHeader` is also a View to render
+ * container with a correct horizontal padding, with additional
+ * sorting icon option and its coloring.
+ * 
+ * It's better to use the `TableCell` instead of `TableCellHeader`
+ * if a header cell is not using the sorting icon at all to save a bit of memory
+ * because `TableCellHeader` has bunch of Pressable logics and two icons loaded.
+ * 
+ * To ensure consistent column alignment across rows,
+ * you need to provide fixed `width` of the cell.
+ * Sets an explicit width for the cell (in pixels) and
+ * acts as a column constraint. This helps simulate
+ * table-like behavior, since React Native relies on
+ * flexbox and does not provide native table layout.
+ * Without this, cells in the same column may render
+ * with inconsistent widths across different rows.
+ */
+export const TableCellHeader = forwardRef<TableCellHeaderRef, TableCellHeaderProps>(
+	function TableCellHeader(
+		{
+			defaultSort,
+			sort: sortProp,
+			width,
+			children,
+			text,
+			textProps,
+			accessibilityLabel,
+			onChangeSort,
+			disabled,
+			onHoverIn: onHoverInProp,
+			onHoverOut: onHoverOutProp,
+			onPress: onPressProp,
+			style,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			layerContext =
+				useContext(LayerContext),
+
+			tableRowHeaderContext =
+				useContext(TableRowHeaderContext),
+
+			sortIconRef =
+				useRef<SortIconRef>(null),
+
+			allowOnChangeSortSelfEffect =
+				useRef(false),
+
+			[sortSelf, setSortSelf] =
+				useState(defaultSort),
+
+			sort =
+				sortProp ?? sortSelf,
+
+			[hovered, setHovered] =
+				useState(false)
+
+		const
+			onHoverIn: NonNullable<typeof onHoverInProp> =
+				useCallback(event => {
+					if(sortIconRef.current) {
+						setHovered(true)
+					}
+
+					onHoverInProp?.(event)
+				}, [
+					onHoverInProp,
+				]),
+
+			onHoverOut: NonNullable<typeof onHoverOutProp> =
+				useCallback(event => {
+					if(sortIconRef.current) {
+						setHovered(false)
+					}
+
+					onHoverOutProp?.(event)
+				}, [
+					onHoverOutProp,
+				]),
+
+			onPress: NonNullable<typeof onPressProp> =
+				useCallback(event => {
+					onPressProp?.(event)
+
+					if(defaultSort) {
+						allowOnChangeSortSelfEffect.current = true
+						setSortSelf(s => {
+							if(s == "none") {
+								return "asc"
+							} else if(s == "asc") {
+								return "desc"
+							} else {
+								return "none"
+							}
+						})
+					} else if(sortProp && onChangeSort) {
+						let nextSort: NonNullable<typeof sort> = "none"
+						if(sortProp == "none") {
+							nextSort = "asc"
+						} else if(sortProp == "asc") {
+							nextSort = "desc"
+						} else {
+							nextSort = "none"
+						}
+						onChangeSort(nextSort)
+					}
+				}, [
+					sortProp,
+					defaultSort,
+					onChangeSort,
+					onPressProp,
+				])
+
+		useEffect(() => {
+			if(sort) {
+				if(sort == "none") {
+					if(hovered) {
+						sortIconRef.current?.setOpacity(1)
+					} else {
+						sortIconRef.current?.setOpacity(0)
+					}
+				} else {
+					sortIconRef.current?.setOpacity(1)
+				}
+			}
+		}, [
+			hovered,
+			sort,
+		])
+
+		useEffect(() => {
+			if(allowOnChangeSortSelfEffect.current && sort) {
+				allowOnChangeSortSelfEffect.current = false
+				onChangeSort?.(sort)
+			}
+		}, [
+			sort,
+			onChangeSort,
+		])
+
+		CarbonStyleSheet.use()
+
+		return (
+			<Pressable
+				ref={ ref }
+				{ ...props }
+				accessibilityLabel={ accessibilityLabel || text }
+				disabled={ disabled ?? !sort }
+				onHoverIn={ onHoverIn }
+				onHoverOut={ onHoverOut }
+				onPress={ onPress }
+				style={ [
+					CarbonStyleSheet.g.flex_auto,
+					CarbonStyleSheet.g.px_05,
+
+					typeof width === "number" ? {
+						width,
+					} : undefined,
+
+					hovered || sort === "asc" || sort === "desc"
+						? styleSheetBG[`hovered_${layerContext}`]
+						: styleSheetBG[`normal_${layerContext}`],
+
+					tableRowHeaderContext.size == "extra_large"
+						? CarbonStyleSheet.g.pt_05
+						: sort
+							? CarbonStyleSheet.g.items_center
+							: CarbonStyleSheet.g.justify_center,
+					sort
+						? [
+							CarbonStyleSheet.g.flex_row,
+							CarbonStyleSheet.g.justify_between,
+						]
+						: undefined,
+					style,
+				] }
+			>
+				{ typeof children === "undefined" && !!text ? (
+					<TableCellText
+						{ ...textProps }
+					>
+						{ text }
+					</TableCellText>
+				) : children }
+
+				{ !!sort && (
+					<SortIcon
+						type={ sort }
+						ref={ sortIconRef }
+					/>
+				) }
+			</Pressable>
+		)
+
+	},
+)
+
+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_03,
+			},
+			hovered_1: {
+				backgroundColor: CarbonStyleSheet.color.layer_accent_hover_01,
+			},
+			hovered_2: {
+				backgroundColor: CarbonStyleSheet.color.layer_accent_hover_02,
+			},
+			hovered_3: {
+				backgroundColor: CarbonStyleSheet.color.layer_accent_hover_03,
+			},
+		} as const satisfies {
+			[Level in `${StateColor}_${ColorLayerLevel}`]: NonNullable<Pick<ViewStyle, "backgroundColor">>
+		})
+
+type StateColor =
+	| "normal"
+	| "hovered"

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

@@ -0,0 +1,34 @@
+import type {
+	PressableProps,
+} from "react-native"
+
+import type {
+	TableCellProps,
+} from "../table-cell/TableCellProps"
+
+import type {
+	TableCellHeaderSort,
+} from "./TableCellHeaderSort"
+
+export interface TableCellHeaderProps extends
+	Omit<
+		PressableProps,
+		| "children"
+		| "style"
+	>,
+	TableCellProps
+{
+	/**
+	 * Render the sort icon either ascending (arrow up), or descending (arrow up rotated), or none (arrows vertical).
+	 * 
+	 * This is just an icon rendering, you have to sort your actual data manually.
+	 */
+	defaultSort?: TableCellHeaderSort,
+	/**
+	 * Render the sort icon either ascending (arrow up), or descending (arrow up rotated), or none (arrows vertical).
+	 * 
+	 * This is just an icon rendering, you have to sort your actual data manually.
+	 */
+	sort?: TableCellHeaderSort,
+	onChangeSort?: (sort: TableCellHeaderSort) => void,
+}

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

@@ -0,0 +1,6 @@
+import type {
+	TableCellRef,
+} from "../table-cell/TableCellRef"
+
+export interface TableCellHeaderRef extends TableCellRef {
+}

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

@@ -0,0 +1,4 @@
+export type TableCellHeaderSort =
+	| "none"
+	| "asc"
+	| "desc"

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

@@ -0,0 +1,137 @@
+import {
+	forwardRef,
+	useEffect,
+	useImperativeHandle,
+	useRef,
+} from "react"
+
+import {
+	Animated,
+	Easing,
+	Platform,
+} 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: Platform.OS != "web",
+						},
+					)
+					.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: Platform.OS != "web",
+						},
+					)
+					.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: Platform.OS != "web",
+							},
+						)
+						.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"