@audira/carbon-react-native 1.0.0-beta.7 → 1.0.0-beta.8

package/src/components/button/base/Base.tsx

@@ -0,0 +1,328 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import {
+	Pressable,
+	StyleSheet,
+	View,
+	type ViewProps,
+} from "react-native"
+
+import {
+	Spacing,
+} from "@audira/carbon-react-native-elements"
+
+import {
+	ButtonGroupContext,
+	GlobalConfigContext,
+} from "../../../_internal/contexts"
+
+import {
+	FlexStyleSheet,
+} from "../../../_internal/style-sheets"
+
+import {
+	Text,
+	type TextProps,
+} from "../../text"
+
+import type {
+	Size,
+} from "../Size"
+
+import type {
+	BaseProps,
+} from "./BaseProps"
+
+import type {
+	BaseRef,
+} from "./BaseRef"
+
+export const Base = forwardRef<BaseRef, BaseProps>(
+	function Base(
+		{
+			size: sizeProp,
+			text,
+			textProps,
+			Icon,
+			iconProps,
+			iconNode,
+			backgroundNode,
+			InlineLoading,
+			inlineLoadingProps,
+			style,
+			role = "button",
+			"aria-label": ariaLabel,
+			dir,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			globalConfigContext =
+				useContext(GlobalConfigContext),
+
+			buttonGroupContext =
+				useContext(ButtonGroupContext),
+
+			size =
+				sizeProp ?? buttonGroupContext.size ?? "large_productive",
+
+			iconSize =
+				getIconSize(size),
+
+			iconMarginStyle =
+				mapIconMarginStyle[`${!!globalConfigContext.rtl}`][`${!!text}`]
+
+		return (
+			<Pressable
+				{ ...props }
+				role={ role }
+				aria-label={ ariaLabel ?? text }
+				dir={ dir ?? globalConfigContext.rtl ? "rtl" : undefined }
+				style={ [
+					FlexStyleSheet.flex_row,
+					FlexStyleSheet.justify_between,
+					baseStyle.container,
+					globalConfigContext.rtl ? baseStyle.containerRtl : undefined,
+					mapContainerStyle[`${!!text}`][`${!!Icon || !!iconNode}`],
+					sizeStyle[size],
+					mapStyleInButtonGroup[`${!!buttonGroupContext.vertical}`][`${!!buttonGroupContext.fluid}`],
+					style,
+				] }
+				ref={ ref }
+			>
+				{ backgroundNode }{/* only for base-color button, and this is not valid HTML per se (?) */}
+
+				{ !InlineLoading || inlineLoadingProps?.state === "inactive" ? (<>
+					{ !!text && (
+						<View
+							style={ baseStyle.textContainer }
+						>
+							<Text
+								{ ...textProps }
+								type={ getTextType(size) }
+							>
+								{ text }
+							</Text>
+						</View>
+					) }
+
+					{ (!!Icon && !iconNode) ? (
+						<Icon
+							{ ...iconProps }
+							width={ iconProps?.width ?? iconSize }
+							height={ iconProps?.height ?? iconSize }
+							dir={ globalConfigContext.rtl ? "rtl" : undefined }
+							style={ [
+								getIconMarginTopStyle(size),
+								iconMarginStyle,
+								iconProps?.style,
+							] }
+						/>
+					) : iconNode?.(
+						iconSize,
+						[
+							getIconMarginTopStyle(size),
+							iconMarginStyle,
+						],
+					) }
+				</>) : (
+					<InlineLoading
+						{ ...inlineLoadingProps }
+						text={ inlineLoadingProps?.text || text || "" }
+						style={ [
+							baseStyle.inlineLoading,
+							inlineLoadingProps?.style,
+						] }
+					/>
+				) }
+			</Pressable>
+		)
+
+	},
+)
+
+const
+	baseStyle =
+		StyleSheet.create({
+			container: {
+				overflow: "hidden",
+			},
+			containerRtl: {
+				direction: "rtl",
+			},
+
+			/**
+			 * Start Padding
+			 */
+			containerPaddingStart: {
+				paddingStart: Spacing.spacing_05,
+			},
+			/**
+			 * End Padding with icon
+			 */
+			containerPaddingEnd05: {
+				paddingEnd: Spacing.spacing_05,
+			},
+			/**
+			 * End Padding without icon
+			 */
+			containerPaddingEnd10: {
+				paddingEnd: Spacing.spacing_10,
+			},
+
+			textContainer: {
+				justifyContent: "center",
+				height: "100%",
+				maxHeight: 48,
+			},
+
+			iconMarginLTR: {
+				marginLeft: Spacing.spacing_07,
+			},
+			iconMarginRTL: {
+				marginRight: Spacing.spacing_07,
+			},
+
+			inlineLoading: {
+				height: "100%",
+				maxHeight: 48,
+			},
+		}),
+
+	sizeStyle =
+		StyleSheet.create<Record<Size, {
+			height: number
+		}>>({
+			small: {
+				height: 32,
+			},
+			medium: {
+				height: 40,
+			},
+			large_productive: {
+				height: 48,
+			},
+			large_expressive: {
+				height: 48,
+			},
+			extra_large: {
+				height: 64,
+			},
+			"2xl": {
+				height: 80,
+			},
+		}),
+
+	mapContainerStyle: {
+		[HasText in `${boolean}`]: {
+			[HasIcon in `${boolean}`]: BaseProps["style"]
+		}
+	} =
+		{
+			false: {
+				false:	[baseStyle.containerPaddingEnd05, baseStyle.containerPaddingStart],
+				true:	[baseStyle.containerPaddingEnd05, baseStyle.containerPaddingStart],
+			},
+			true: {
+				false:	[baseStyle.containerPaddingEnd10, baseStyle.containerPaddingStart],
+				true:	[baseStyle.containerPaddingEnd05, baseStyle.containerPaddingStart],
+			},
+		},
+
+	/**
+	 * https://carbondesignsystem.com/components/button/style/#typography
+	 */
+	mapTextTypeByExpressive: Record<"true" | "false", NonNullable<TextProps["type"]>> =
+		{
+			false: "body_compact_01",
+			true: "body_compact_02",
+		},
+
+	mapIconSizeByExpressive: Record<"true" | "false", number> =
+		{
+			false: 16,
+			true: 20,
+		},
+
+	mapIconMarginStyle: {
+		[RTL in `${boolean}`]: {
+			[HasText in `${boolean}`]: ViewProps["style"]
+		}
+	} =
+		{
+			false: {
+				false: null,
+				true: baseStyle.iconMarginLTR,
+			},
+			true: {
+				false: null,
+				true: baseStyle.iconMarginRTL,
+			},
+		},
+
+	mapStyleInButtonGroup: {
+		[IsVertical in `${boolean}`]: {
+			[IsFluid in `${boolean}`]: ViewProps["style"]
+		}
+	} =
+		{
+			false: {
+				false: FlexStyleSheet.self_start,
+				true: FlexStyleSheet.flex_1,
+			},
+			true: {
+				false: FlexStyleSheet.self_stretch,
+				true: FlexStyleSheet.self_stretch,
+			},
+		}
+
+/**
+ * Expressive only when button size is LARGE_EXPRESSIVE. You can see this link  
+ * https://carbondesignsystem.com/components/button/style/#sizes
+ */
+function isExpressiveStr(
+	Size: BaseProps["size"],
+): "true" | "false" {
+	return `${Size === "large_expressive"}`
+}
+
+// function getContainerPaddingRight(
+// 	text: boolean,
+// 	icon: boolean,
+// ) {
+// 	return mapContainerEndPR[`${text}`][`${icon}`]
+// }
+
+/**
+ * Expressive only when button size is LARGE_EXPRESSIVE. You can see this link  
+ * https://carbondesignsystem.com/components/button/style/#sizes
+ */
+function getTextType(size: BaseProps["size"]) {
+	return mapTextTypeByExpressive[isExpressiveStr(size)]
+}
+
+/**
+ * Expressive only when button size is LARGE_EXPRESSIVE. You can see this link  
+ * https://carbondesignsystem.com/components/button/style/#sizes
+ */
+function getIconSize(size: BaseProps["size"]) {
+	return mapIconSizeByExpressive[isExpressiveStr(size)]
+}
+
+function getIconMarginTopStyle(size: NonNullable<BaseProps["size"]>) {
+	const
+		iconSize =
+			mapIconSizeByExpressive[isExpressiveStr(size)],
+
+		height =
+			Math.min(sizeStyle[size].height, sizeStyle.large_productive.height) // 48 at max
+
+	return {
+		marginTop: (height / 2) - (iconSize / 2),
+	}
+}

package/src/components/button/base/BaseProps.ts

@@ -0,0 +1,60 @@
+import type {
+	PressableProps,
+	ViewProps,
+} from "react-native"
+
+import type {
+	SvgProps,
+} from "react-native-svg"
+
+import type {
+	InlineLoadingProps,
+} from "../../inline-loading/InlineLoadingProps"
+
+import type {
+	TextProps,
+} from "../../text/TextProps"
+
+import type {
+	Size,
+} from "../Size"
+
+export interface BaseProps extends Omit<PressableProps, "children" | "style"> {
+	/**
+	 * Refer to https://carbondesignsystem.com/components/button/style/#sizes  
+	 * Default is `large_productive`
+	 */
+	size?: Size,
+	text?: string,
+	textProps?: Omit<TextProps, "type" | "children">,
+	Icon?: React.FunctionComponent<SvgProps>,
+	iconProps?: Omit<SvgProps, "children">,
+	/**
+	 * This prop is useful to custom render at the icon position.  
+	 * `iconNode` takes precedence even if {@linkcode icon} prop is present.
+	 */
+	iconNode?: (
+		/**
+		 * Use this param to resize icon view correctly according to each size of button
+		 */
+		iconSize: number,
+		/**
+		 * Use this style to keep icon style nicely center aligned vertically with text
+		 */
+		iconStyle: SvgProps["style"],
+	) => React.ReactNode,
+	/**
+	 * Only for base-color button for Focus state UI purposes
+	 */
+	backgroundNode?: React.ReactNode,
+	/**
+	 * Pass this `InlineLoading` component to render the loading inside of button.  
+	 * The Text of Button will be used if `inlineLoadingProps.text` is empty.  
+	 * If you pass `inlineLoadingProps.state` with `inactive` value, the `InlineLoading` component will not be rendered.
+	 */
+	InlineLoading?: React.FunctionComponent<InlineLoadingProps>,
+	inlineLoadingProps?: Omit<InlineLoadingProps, "text"> & {
+		text?: string,
+	},
+	style?: ViewProps["style"],
+}

package/src/components/button/base/BaseRef.ts

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

package/src/components/button/base/index.tsx

@@ -0,0 +1,3 @@
+export * from "./Base"
+export * from "./BaseProps"
+export * from "./BaseRef"

package/src/components/button/base-color/BaseColor.tsx

@@ -0,0 +1,289 @@
+import {
+	forwardRef,
+	useCallback,
+	useContext,
+	useState,
+} from "react"
+
+import {
+	Platform,
+	StyleSheet,
+	View,
+	type StyleProp,
+	type TextStyle,
+	type ViewStyle,
+} from "react-native"
+
+import {
+	Color,
+} from "@audira/carbon-react-native-elements"
+
+import {
+	GlobalConfigContext,
+} from "../../../_internal/contexts"
+
+import {
+	ThemeContext,
+} from "../../../contexts"
+
+import {
+	type ThemeType,
+} from "../../../types"
+
+import {
+	Base,
+	type BaseProps,
+} from "../base"
+
+import type {
+	BaseColorProps,
+} from "./BaseColorProps"
+
+import type {
+	BaseColorRef,
+} from "./BaseColorRef"
+
+import type {
+	BaseColorState,
+} from "./BaseColorState"
+
+export const BaseColor = forwardRef<BaseColorRef, BaseColorProps>(
+	function BaseColor(
+		{
+			disabled,
+			style,
+			textProps,
+			android_rippleEffectColor,
+			colorStateStyle,
+			Icon,
+			iconProps,
+			iconNode,
+			InlineLoading,
+			inlineLoadingProps,
+			onBlur,
+			onFocus,
+			onHoverIn,
+			onHoverOut,
+			onPressIn,
+			onPressOut,
+			android_ripple,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			globalConfigContext =
+				useContext(GlobalConfigContext),
+
+			themeContext =
+				useContext(ThemeContext),
+
+			[state, setState] =
+				useState({
+					focused: false,
+					hovered: false,
+					pressed: false,
+				}),
+
+			blurHandler: NonNullable<BaseProps["onBlur"]> =
+				useCallback(event => {
+					onBlur?.(event)
+					setState(state_ => ({
+						...state_,
+						focused: false,
+					}))
+				}, [
+					onBlur,
+				]),
+
+			focusHandler: NonNullable<BaseProps["onFocus"]> =
+				useCallback(event => {
+					onFocus?.(event)
+					setState(state_ => ({
+						...state_,
+						focused: true,
+					}))
+				}, [
+					onFocus,
+				]),
+
+			hoverInHandler: NonNullable<BaseProps["onHoverIn"]> =
+				useCallback(event => {
+					onHoverIn?.(event)
+					setState(state_ => ({
+						...state_,
+						hovered: true,
+					}))
+				}, [
+					onHoverIn,
+				]),
+
+			hoverOutHandler: NonNullable<BaseProps["onHoverIn"]> =
+				useCallback(event => {
+					onHoverOut?.(event)
+					setState(state_ => ({
+						...state_,
+						hovered: false,
+					}))
+				}, [
+					onHoverOut,
+				]),
+
+			pressInHandler: NonNullable<BaseProps["onPressIn"]> =
+				useCallback(event => {
+					onPressIn?.(event)
+					setState(state_ => ({
+						...state_,
+						pressed: true,
+					}))
+				}, [
+					onPressIn,
+				]),
+
+			pressOutHandler: NonNullable<BaseProps["onPressOut"]> =
+				useCallback(event => {
+					onPressOut?.(event)
+					setState(state_ => ({
+						...state_,
+						pressed: false,
+					}))
+				}, [
+					onPressOut,
+				]),
+
+			stateStyle =
+				getStateStyle(
+					colorStateStyle,
+					{
+						...state,
+						disabled: !!disabled,
+					},
+					android_ripple
+						? true
+						: android_ripple === null ? false : globalConfigContext.android_buttonRippleEffect,
+				)
+
+		return (
+			<Base
+				{ ...props }
+				ref={ ref }
+				android_ripple={ android_ripple ?? globalConfigContext.android_buttonRippleEffect ? {
+					// color: colorStateStyle.background.pressed.backgroundColor,
+					color: android_rippleEffectColor,
+				} : undefined }
+				backgroundNode={
+					<View
+						style={ [
+							styleSheet.innerFocusBox,
+							state.focused
+								? mapInnerFocusBoxActiveStyle[themeContext.colorScheme]
+								: null,
+						] }
+					/>
+				}
+				disabled={ disabled }
+				onBlur={ blurHandler }
+				onFocus={ focusHandler }
+				onHoverIn={ hoverInHandler }
+				onHoverOut={ hoverOutHandler }
+				onPressIn={ pressInHandler }
+				onPressOut={ pressOutHandler }
+				textProps={{
+					...textProps,
+					style: [stateStyle.text, textProps?.style],
+				}}
+				Icon={ !iconNode ? Icon : undefined }
+				iconProps={{
+					...iconProps,
+					fill: iconProps?.fill ?? stateStyle.icon,
+				}}
+				iconNode={
+					iconNode
+						? (...params) => iconNode(stateStyle.icon, ...params)
+						: undefined
+				}
+				InlineLoading={ InlineLoading }
+				inlineLoadingProps={ inlineLoadingProps }
+				style={ [
+					!InlineLoading || inlineLoadingProps?.state === "inactive"
+						? stateStyle.background
+						: styleSheet.withInlineLoading,
+					style,
+				] }
+			/>
+		)
+
+	},
+)
+
+const
+	styleSheet =
+		StyleSheet.create({
+			withInlineLoading: {
+				borderColor: "transparent",
+			},
+			innerFocusBox: {
+				position: "absolute",
+				top: 2,
+				right: 2,
+				bottom: 2,
+				left: 2,
+				borderWidth: 1,
+				borderColor: "transparent",
+			},
+			innerFocusBoxActive_GRAY_10: {
+				borderColor: Color.Token.gray_10.focus_inset,
+			},
+			innerFocusBoxActive_GRAY_100: {
+				borderColor: Color.Token.gray_100.focus_inset,
+			},
+		}),
+
+	mapInnerFocusBoxActiveStyle: Record<ThemeType.ColorScheme, typeof styleSheet["innerFocusBoxActive_GRAY_10"]> =
+		{
+			gray_10: styleSheet.innerFocusBoxActive_GRAY_10,
+			gray_100: styleSheet.innerFocusBoxActive_GRAY_100,
+		}
+
+function getStateStyle(
+	colorStateStyle: BaseColorProps["colorStateStyle"],
+	states: Record<Exclude<BaseColorState, "default">, boolean>,
+	androidRipple?: boolean,
+): {
+	background: StyleProp<ViewStyle>, text: StyleProp<TextStyle>, icon: string
+} {
+
+	if(!states.hovered && !states.pressed && !states.disabled) {
+		return {
+			background: colorStateStyle.background.default,
+			text: colorStateStyle.text.default,
+			icon: colorStateStyle.icon.default,
+		}
+	}
+
+	if(states.disabled) {
+		return {
+			background: colorStateStyle.background.disabled,
+			text: colorStateStyle.text.disabled,
+			icon: colorStateStyle.icon.disabled,
+		}
+	}
+
+	if(states.pressed) {
+		return {
+			background: androidRipple && Platform.OS == "android"
+				? colorStateStyle.background.default
+				: colorStateStyle.background.pressed,
+			text: colorStateStyle.text.pressed,
+			icon: colorStateStyle.icon.pressed,
+		}
+	}
+
+	return {
+		background: colorStateStyle.background.hovered,
+		text: colorStateStyle.text.hovered,
+		icon: colorStateStyle.icon.hovered,
+	}
+
+}

package/src/components/button/base-color/BaseColorProps.ts

@@ -0,0 +1,32 @@
+import type {
+	StyleProp,
+	TextStyle,
+	ViewStyle,
+} from "react-native"
+
+import type {
+	BaseProps,
+} from "../base/BaseProps"
+
+import type {
+	BaseColorState,
+} from "./BaseColorState"
+
+export interface BaseColorProps extends Omit<BaseProps, "backgroundNode" | "iconNode"> {
+	android_rippleEffectColor: string,
+	colorStateStyle: {
+		background: Record<BaseColorState, StyleProp<ViewStyle>>,
+		text: Record<BaseColorState, StyleProp<TextStyle>>,
+		icon: Record<BaseColorState, string>,
+	},
+	/**
+	 * It extends `iconNode` prop from `BaseProps` to add one argument at start for icon coloring
+	 */
+	iconNode?: (
+		/**
+		 * Use this param to coloring an icon correctly according each variant of button and its state, like focused, disabled, etc.
+		 */
+		iconColorState: string,
+		...params: Parameters<NonNullable<BaseProps["iconNode"]>>
+	) => React.ReactNode,
+}

package/src/components/button/base-color/BaseColorRef.ts

@@ -0,0 +1,6 @@
+import type {
+	BaseRef,
+} from "../base/BaseRef"
+
+export interface BaseColorRef extends BaseRef {
+}