@audira/carbon-react-native 1.0.3 → 1.0.5

package/src/components/table-batch-action-bar/TableBatchActionBar.tsx

@@ -0,0 +1,156 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import {
+	StyleSheet,
+	type ViewStyle,
+} from "react-native"
+
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
+
+import {
+	Box,
+} from "../box/Box"
+
+import {
+	ScrollView,
+} from "../scroll-view/ScrollView"
+
+import {
+	TableContext,
+} from "../table/_TableContext"
+
+import {
+	Text,
+} from "../text/Text"
+
+import type {
+	TableBatchActionBarProps,
+} from "./TableBatchActionBarProps"
+
+import type {
+	TableBatchActionBarRef,
+} from "./TableBatchActionBarRef"
+
+import type {
+	TableBatchActionBarSize,
+} from "./TableBatchActionBarSize"
+
+import {
+	TableBatchActionBarContext,
+} from "./_TableBatchActionBarContext"
+
+export const TableBatchActionBar = forwardRef<TableBatchActionBarRef, TableBatchActionBarProps>(
+	function TableBatchActionBar(
+		{
+			size: sizeProp,
+			horizontal = true,
+			text,
+			textProps,
+			buttons,
+			style,
+			contentContainerStyle,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			tableContext =
+				useContext(TableContext),
+
+			size =
+				sizeProp ?? tableContext.rowSize,
+
+			batchActionBarSize =
+				mapRowSizeToBatchActionBarSize[size]
+
+		return (
+			<TableBatchActionBarContext.Provider
+				value={{
+					size: batchActionBarSize,
+				}}
+			>
+				<ScrollView
+					ref={ ref }
+					{ ...props }
+					horizontal={ horizontal }
+					style={ [
+						carbonStyleSheet.tableBatchActionBar,
+						// if users provide size prop manually
+						// they will still get the correct size style
+						// the `large` and `small` from `TableBatchActionBarSize`
+						// are also used by `TableRowSize`
+						styleSheetSize[batchActionBarSize],
+						style,
+					] }
+					contentContainerStyle={ [
+						CarbonStyleSheet.g.flex_auto,
+						CarbonStyleSheet.g.flex_row,
+						CarbonStyleSheet.g.justify_between,
+						contentContainerStyle,
+					] }
+				>
+					<Text
+						{ ...textProps }
+						type="body_compact_01"
+						style={ [
+							CarbonStyleSheet.g.flex_auto,
+							CarbonStyleSheet.g.self_center,
+							CarbonStyleSheet.g.px_05,
+							carbonStyleSheet.text,
+							textProps?.style,
+						] }
+					>
+						{ text }
+					</Text>
+
+					{ !!buttons && (
+						<Box
+							style={ [
+								CarbonStyleSheet.g.flex_row,
+								CarbonStyleSheet.g.self_stretch,
+							] }
+						>
+							{ buttons }
+						</Box>
+					) }
+				</ScrollView>
+			</TableBatchActionBarContext.Provider>
+		)
+
+	},
+)
+
+const
+	styleSheetSize =
+		StyleSheet.create({
+			small: {
+				height: 32,
+			},
+			large: {
+				height: 48,
+			},
+		} as const satisfies Record<TableBatchActionBarSize, NonNullable<Pick<ViewStyle, "height">>>),
+
+	mapRowSizeToBatchActionBarSize =
+		{
+			extra_small: "small",
+			small: "small",
+			medium: "small",
+			large: "large",
+			extra_large: "large",
+		} as const satisfies Record<TableContext["rowSize"], TableBatchActionBarSize>,
+
+	carbonStyleSheet =
+		CarbonStyleSheet.create({
+			tableBatchActionBar: {
+				backgroundColor: CarbonStyleSheet.color.background_brand,
+			},
+			text: {
+				textWrap: "nowrap",
+				color: CarbonStyleSheet.color.text_on_color,
+			},
+		})

package/src/components/table-batch-action-bar/TableBatchActionBarProps.ts

@@ -0,0 +1,42 @@
+import type {
+	ScrollViewProps,
+} from "react-native"
+
+import type {
+	TextProps,
+} from "../text/TextProps"
+
+import type {
+	TableBatchActionBarSize,
+} from "./TableBatchActionBarSize"
+
+export interface TableBatchActionBarProps extends Omit<ScrollViewProps, "children"> {
+	/**
+	 * Based on the IBM spec, the `large` batch action bar is paired with the extra large and large row sizes.
+	 * The `small` batch action bar is paired with the small and extra small row sizes.
+	 * 
+	 * You may don't want to set the batch action bar size manually.
+	 * Prefer to opt `rowSize` in the `Table` prop instead,
+	 * and the batch action bar size will be adjusted automatically based on what the row size is.
+	 * 
+	 * @default "large"
+	 */
+	size?: TableBatchActionBarSize,
+	/**
+	 * Provide descriptive text after one or multiple items selected,
+	 * 
+	 * e.g. "0 items selected", "3 products selected", etc.
+	 */
+	text: string,
+	textProps?: Omit<
+		TextProps,
+		| "children"
+		| "type"
+	>,
+	/**
+	 * Provide one or multiple `<TableBatchActionBarButton>` in this prop.
+	 * 
+	 * To provide multiple buttons, you can start it with `<>` or `<Fragment>`
+	 */
+	buttons: React.ReactNode,
+}

package/src/components/table-batch-action-bar/TableBatchActionBarRef.ts

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

package/src/components/table-batch-action-bar/TableBatchActionBarSize.ts

@@ -0,0 +1,3 @@
+export type TableBatchActionBarSize =
+	| "large"
+	| "small"

package/src/components/table-batch-action-bar/_TableBatchActionBarContext.ts

@@ -0,0 +1,15 @@
+import {
+	createContext,
+} from "react"
+
+import type {
+	TableBatchActionBarSize,
+} from "./TableBatchActionBarSize"
+
+export interface TableBatchActionBarContext {
+	size: TableBatchActionBarSize,
+}
+
+export const TableBatchActionBarContext = createContext<TableBatchActionBarContext>({
+	size: "large",
+})

package/src/components/table-batch-action-bar/index.ts

@@ -0,0 +1,4 @@
+export * from "./TableBatchActionBar"
+export type * from "./TableBatchActionBarProps"
+export type * from "./TableBatchActionBarRef"
+export type * from "./TableBatchActionBarSize"

package/src/components/table-batch-action-bar-button/TableBatchActionBarButton.tsx

@@ -0,0 +1,74 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
+
+import {
+	Primary as ButtonPrimary,
+	type PrimaryProps as ButtonPrimaryProps,
+} from "../button/primary"
+
+import type {
+	TableBatchActionBarSize,
+} from "../table-batch-action-bar/TableBatchActionBarSize"
+
+import {
+	TableBatchActionBarContext,
+} from "../table-batch-action-bar/_TableBatchActionBarContext"
+
+import type {
+	TableBatchActionBarButtonProps,
+} from "./TableBatchActionBarButtonProps"
+
+import type {
+	TableBatchActionBarButtonRef,
+} from "./TableBatchActionBarButtonRef"
+
+export const TableBatchActionBarButton = forwardRef<TableBatchActionBarButtonRef, TableBatchActionBarButtonProps>(
+	function TableBatchActionBarButton(
+		{
+			Icon,
+			iconProps,
+			style,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			tableBatchActionBarContext =
+				useContext(TableBatchActionBarContext)
+
+		return (
+			<ButtonPrimary
+				ref={ ref }
+				{ ...props }
+				size={ mapBatchActionBarSizeToButtonSize[tableBatchActionBarContext.size] }
+				Icon={ Icon }
+				iconProps={{
+					...iconProps,
+					style: [
+						CarbonStyleSheet.g.ms_03, // override the gap between text and icon
+						iconProps?.style,
+					],
+				}}
+				style={ [
+					Icon
+						? undefined
+						: CarbonStyleSheet.g.pe_05,
+					style,
+				] }
+			/>
+		)
+
+	},
+)
+
+const
+	mapBatchActionBarSizeToButtonSize =
+		{
+			small: "small",
+			large: "large_productive",
+		} as const satisfies Record<TableBatchActionBarSize, NonNullable<ButtonPrimaryProps["size"]>>

package/src/components/table-batch-action-bar-button/TableBatchActionBarButtonProps.ts

@@ -0,0 +1,6 @@
+import type {
+	PrimaryProps,
+} from "../button/primary/PrimaryProps"
+
+export interface TableBatchActionBarButtonProps extends Omit<PrimaryProps, "size"> {
+}

package/src/components/table-batch-action-bar-button/TableBatchActionBarButtonRef.ts

@@ -0,0 +1,6 @@
+import type {
+	PrimaryRef,
+} from "../button/primary/PrimaryRef"
+
+export interface TableBatchActionBarButtonRef extends PrimaryRef {
+}

package/src/components/table-batch-action-bar-button/index.ts

@@ -0,0 +1,3 @@
+export * from "./TableBatchActionBarButton"
+export type * from "./TableBatchActionBarButtonProps"
+export type * from "./TableBatchActionBarButtonRef"

package/src/components/table-cell/TableCell.tsx

@@ -0,0 +1,93 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import {
+	View,
+} from "react-native"
+
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
+
+import {
+	TableCellText,
+} from "../table-cell-text/TableCellText"
+
+import {
+	TableRowHeaderContext,
+} from "../table-row-header/_TableRowHeaderContext"
+
+import type {
+	TableCellProps,
+} from "./TableCellProps"
+
+import type {
+	TableCellRef,
+} from "./TableCellRef"
+
+/**
+ * `TableCell` is a pure React Native View to render
+ * container with a correct horizontal padding.
+ * 
+ * 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 TableCell = forwardRef<TableCellRef, TableCellProps>(
+	function TableCell(
+		{
+			children,
+			text,
+			textProps,
+			width,
+			role = "cell",
+			accessibilityLabel,
+			style,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			tableRowHeaderContext =
+				useContext(TableRowHeaderContext)
+
+		return (
+			<View
+				ref={ ref }
+				{ ...props }
+				role={ role }
+				accessibilityLabel={ accessibilityLabel || text }
+				style={ [
+					CarbonStyleSheet.g.flex_auto,
+					CarbonStyleSheet.g.px_05,
+
+					tableRowHeaderContext.inRowHeader
+						? tableRowHeaderContext.size == "extra_large"
+							? CarbonStyleSheet.g.pt_05
+							: CarbonStyleSheet.g.self_center
+						: undefined,
+
+					typeof width === "number" ? {
+						width,
+					} : undefined,
+					style,
+				] }
+			>
+				{ typeof children === "undefined" && !!text ? (
+					<TableCellText
+						{ ...textProps }
+					>
+						{ text }
+					</TableCellText>
+				) : children }
+			</View>
+		)
+
+	},
+)

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

@@ -0,0 +1,33 @@
+import type {
+	ViewProps,
+} from "react-native"
+
+import type {
+	TableCellTextProps,
+} from "../table-cell-text/TableCellTextProps"
+
+export interface TableCellProps extends ViewProps {
+	/**
+	 * Fixed width of the cell used to ensure consistent column alignment across rows.
+	 * 
+	 * 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.
+	 */
+	width?: number,
+	/**
+	 * Provide text to the cell.
+	 * 
+	 * As an alternative, you can use `TableCellText` as a child of this component.
+	 * 
+	 * `children` prop takes over precedence over this prop.
+	 */
+	text?: string,
+	/**
+	 * Only applies if you use the `text` prop instead of `children`
+	 */
+	textProps?: Omit<TableCellTextProps, "children">,
+}

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

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

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

@@ -0,0 +1,3 @@
+export * from "./TableCell"
+export type * from "./TableCellProps"
+export type * from "./TableCellRef"