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

package/src/components/inline-loading/InlineLoading.tsx

@@ -0,0 +1,144 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import {
+	StyleSheet,
+	View,
+} from "react-native"
+
+import {
+	Color,
+} from "@audira/carbon-react-native-elements"
+
+import IconCheckmarkFilled from "@carbon/icons/svg/32/checkmark--filled.svg"
+import IconErrorFilled from "@carbon/icons/svg/32/error--filled.svg"
+
+import {
+	GlobalConfigContext,
+} from "../../_internal/contexts"
+
+import {
+	CommonStyleSheet,
+	FlexStyleSheet,
+} from "../../_internal/style-sheets"
+
+import {
+	CarbonStyleSheet,
+} from "../../carbon-style-sheet"
+
+import {
+	ThemeContext,
+} from "../../contexts"
+
+import {
+	Loading,
+} from "../loading"
+
+import {
+	Text,
+} from "../text"
+
+import type {
+	InlineLoadingProps,
+} from "./InlineLoadingProps"
+
+import type {
+	InlineLoadingRef,
+} from "./InlineLoadingRef"
+
+export const InlineLoading = forwardRef<InlineLoadingRef, InlineLoadingProps>(
+	function InlineLoading(
+		{
+			state = "active",
+			text,
+			style,
+			"aria-label": ariaLabel,
+			textProps,
+			dir,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			themeContext =
+				useContext(ThemeContext),
+
+			globalConfigContext =
+				useContext(GlobalConfigContext)
+
+		return (
+			<View
+				ref={ ref }
+				{ ...props }
+				aria-label={ ariaLabel ?? text }
+				dir={ dir ?? globalConfigContext.rtl ? "rtl" : undefined }
+				style={ [
+					FlexStyleSheet.flex_row,
+					FlexStyleSheet.items_center,
+					styleSheet.inlineLoading,
+					globalConfigContext.rtl ? CommonStyleSheet.rtl : undefined,
+					style,
+				] }
+			>
+				{ state == "active" ? (
+					<Loading
+						type="small"
+					/>
+				) : state == "error" ? (
+					<IconErrorFilled
+						width={ 16 }
+						height={ 16 }
+						fill={ mapIconErrorColor[themeContext.colorScheme] }
+					/>
+				) : state == "finished" ? (
+					<IconCheckmarkFilled
+						width={ 16 }
+						height={ 16 }
+						fill={ mapIconCheckmarkColor[themeContext.colorScheme] }
+					/>
+				) : null }
+
+				{ !!text && (
+					<Text
+						{ ...textProps }
+						type="body_compact_01"
+						style={ [carbonStyleSheet.text, textProps?.style] }
+					>
+						{ text }
+					</Text>
+				) }
+			</View>
+		)
+
+	},
+)
+
+const
+	styleSheet =
+		StyleSheet.create({
+			inlineLoading: {
+				columnGap: 8,
+			},
+		}),
+
+	carbonStyleSheet =
+		CarbonStyleSheet.create({
+			text: {
+				color: CarbonStyleSheet.color.text_secondary,
+			},
+		}),
+
+	mapIconErrorColor: Record<ThemeContext["colorScheme"], string> =
+		{
+			gray_10: Color.Token.gray_10.support_error,
+			gray_100: Color.Token.gray_100.support_error,
+		},
+
+	mapIconCheckmarkColor: Record<ThemeContext["colorScheme"], string> =
+		{
+			gray_10: Color.Token.gray_10.support_success,
+			gray_100: Color.Token.gray_100.support_success,
+		}

package/src/components/inline-loading/InlineLoadingProps.ts

@@ -0,0 +1,24 @@
+import type {
+	ViewProps,
+} from "react-native"
+
+import type {
+	TextProps,
+} from "../text/TextProps"
+
+import type {
+	InlineLoadingState,
+} from "./InlineLoadingState"
+
+export interface InlineLoadingProps extends Omit<ViewProps, "children"> {
+	/**
+	 * @default 'active'
+	 */
+	state?: InlineLoadingState,
+	text: string,
+	textProps?: Omit<
+		TextProps,
+		| "children"
+		| "type"
+	>
+}

package/src/components/inline-loading/InlineLoadingRef.ts

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

package/src/components/inline-loading/InlineLoadingState.ts

@@ -0,0 +1,5 @@
+export type InlineLoadingState =
+	| "active"
+	| "inactive"
+	| "error"
+	| "finished"

package/src/components/inline-loading/index.tsx

@@ -0,0 +1,4 @@
+export * from "./InlineLoading"
+export type * from "./InlineLoadingProps"
+export type * from "./InlineLoadingRef"
+export type * from "./InlineLoadingState"

package/src/components/layer/Layer.tsx

@@ -0,0 +1,87 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import {
+	View,
+	type ViewStyle,
+} from "react-native"
+
+import {
+	Color,
+	type ColorLayerLevel,
+} from "@audira/carbon-react-native-elements"
+
+import {
+	MathHelper,
+} from "../../_internal/helpers"
+
+import {
+	CarbonStyleSheet,
+} from "../../carbon-style-sheet"
+
+import {
+	LayerContext,
+} from "./LayerContext"
+
+import type {
+	LayerProps,
+} from "./LayerProps"
+
+import type {
+	LayerRef,
+} from "./LayerRef"
+
+export const Layer = forwardRef<LayerRef, LayerProps>(
+	function Layer(
+		{
+			level: levelProp,
+			withBackground,
+			style,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			layerContextLevel =
+				useContext(LayerContext),
+
+			level =
+				levelProp ?? layerContextLevel,
+
+			value =
+				MathHelper.clamp(level + 1, Color.Layer.MinLevel, Color.Layer.MaxLevel)
+
+		return (
+			<LayerContext.Provider value={ value }>
+				<View
+					ref={ ref }
+					{ ...props }
+					style={ [
+						withBackground
+							? bgLevelStyleSheet[value]
+							: undefined,
+						style,
+					] }
+				/>
+			</LayerContext.Provider>
+		)
+
+	},
+)
+
+const
+	bgLevelStyleSheet =
+		CarbonStyleSheet.create<Record<ColorLayerLevel, ViewStyle>>({
+			1: {
+				backgroundColor: CarbonStyleSheet.color.layer_01,
+			},
+			2: {
+				backgroundColor: CarbonStyleSheet.color.layer_02,
+			},
+			3: {
+				backgroundColor: CarbonStyleSheet.color.layer_03,
+			},
+		})

package/src/components/layer/LayerContext.ts

@@ -0,0 +1,9 @@
+import {
+	createContext,
+} from "react"
+
+import type {
+	ColorLayerLevel,
+} from "@audira/carbon-react-native-elements"
+
+export const LayerContext = createContext<ColorLayerLevel>(1)

package/src/components/layer/LayerProps.ts

@@ -0,0 +1,16 @@
+import type {
+	ViewProps,
+} from "react-native"
+
+import type {
+	ColorLayerLevel,
+} from "@audira/carbon-react-native-elements"
+
+export interface LayerProps extends ViewProps {
+	/**
+	 * Specify the layer level and override any existing levels based on hierarchy
+	 * @default 1
+	 */
+	level?: ColorLayerLevel,
+	withBackground?: boolean,
+}

package/src/components/layer/LayerRef.ts

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

package/src/components/layer/index.tsx

@@ -0,0 +1,4 @@
+export * from "./Layer"
+export * from "./LayerContext"
+export type * from "./LayerProps"
+export type * from "./LayerRef"

package/src/components/loading/Loading.tsx

@@ -0,0 +1,116 @@
+import {
+	forwardRef,
+	useContext,
+	useEffect,
+	useRef,
+} from "react"
+
+import {
+	Animated,
+	Easing,
+} from "react-native"
+
+import {
+	Motion,
+} from "@audira/carbon-react-native-elements"
+
+import {
+	ThemeContext,
+} from "../../contexts"
+
+import {
+	LayerContext,
+} from "../layer"
+
+import type {
+	LoadingProps,
+} from "./LoadingProps"
+
+import type {
+	LoadingRef,
+} from "./LoadingRef"
+
+import {
+	CircularProgress,
+} from "./_circular-progress"
+
+import {
+	MapCircleBackgroundColor,
+} from "./_map-circle-background-color"
+
+import {
+	MapCircleStrokeColor,
+} from "./_map-circle-stroke-color"
+
+export const Loading = forwardRef<LoadingRef, LoadingProps>(
+	function(
+		{
+			type = "large",
+			style,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			layerContext =
+				useContext(LayerContext),
+
+			themeContext =
+				useContext(ThemeContext),
+
+			/**
+			 * To animate degree unit, we have to animate it through interpolation
+			 * 
+			 * - 0 = 0deg
+			 * - 1 = 360deg
+			 */
+			rotationValue =
+				useRef(new Animated.Value(0))
+
+		useEffect(() => {
+			const loop = Animated.loop(
+				Animated.timing(
+					rotationValue.current,
+					{
+						toValue: 1,
+						duration: Motion.Duration.slow_02,
+						easing: Easing.linear,
+						useNativeDriver: false,
+					},
+				),
+				{
+					iterations: -1,
+				},
+			)
+			loop.start()
+			return loop.stop
+		}, [])
+
+		return (
+			<AnimatedCircularProgress
+				forwardedRef={ ref }
+				{ ...props }
+				type={ type }
+				circleStrokeColor={ MapCircleStrokeColor[themeContext.colorScheme] }
+				circleBackgroundColor={ MapCircleBackgroundColor[layerContext][themeContext.colorScheme] }
+				style={ [
+					{
+						transform: [{
+							rotateZ: rotationValue.current.interpolate({
+								inputRange: [0, 1],
+								outputRange: ["0deg", "360deg"],
+							}),
+						}],
+					},
+					style,
+				] }
+			/>
+		)
+
+	},
+)
+
+const
+	AnimatedCircularProgress =
+		Animated.createAnimatedComponent(CircularProgress)

package/src/components/loading/LoadingProps.ts

@@ -0,0 +1,14 @@
+import type {
+	SvgProps,
+} from "react-native-svg"
+
+import type {
+	LoadingType,
+} from "./LoadingType"
+
+export interface LoadingProps extends SvgProps {
+	/**
+	 * @default 'large'
+	 */
+	type?: LoadingType,
+}

package/src/components/loading/LoadingRef.ts

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

package/src/components/loading/LoadingType.ts

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

package/src/components/loading/_circular-progress/CircularProgress.tsx

@@ -0,0 +1,113 @@
+import {
+	Component,
+} from "react"
+
+import Svg, {
+	Circle,
+} from "react-native-svg"
+
+import type {
+	LoadingType,
+} from "../LoadingType"
+
+import type {
+	CircularProgressProps,
+} from "./CircularProgressProps"
+
+export class CircularProgress extends Component<CircularProgressProps> {
+
+	override render() {
+		const
+			{
+				circleStrokeColor,
+				circleBackgroundColor,
+				type,
+				forwardedRef,
+
+				fill = "transparent",
+				viewBox = "0 0 100 100",
+
+				...props
+			} =
+				this.props,
+
+			size =
+				mapSize[type]
+
+		return (
+			<Svg
+				ref={ forwardedRef }
+				{ ...props }
+				width={ size }
+				height={ size }
+				viewBox={ viewBox }
+				fill={ fill }
+			>
+				{ type == "small" && (
+					// Background
+					<Circle
+						cx="50%"
+						cy="50%"
+						r={ radius }
+						strokeLinecap="butt"
+						strokeDasharray={ circleStrokeDasharray }
+						stroke={ circleBackgroundColor }
+						strokeWidth={ mapCircleStrokeWidth.small }
+						strokeDashoffset={ -radius }
+					/>
+				) }
+
+				{ /* Stroke */ }
+				<Circle
+					cx="50%"
+					cy="50%"
+					r={ radius }
+					strokeLinecap="butt"
+					strokeDasharray={ circleStrokeDasharray }
+					stroke={ circleStrokeColor }
+					strokeWidth={ mapCircleStrokeWidth[type] }
+					strokeDashoffset={ mapCircleStrokeDashoffset[type] }
+				/>
+			</Svg>
+		)
+	}
+
+}
+
+const
+	mapSize: Record<LoadingType, number> =
+		{
+			small: 16,
+			large: 88,
+		},
+
+	radius =
+		44,
+
+	circumference =
+		radius * 2 * Math.PI,
+
+	circleStrokeDasharray =
+		[circumference, circumference],
+
+	mapCircleStrokeDashoffset: Record<LoadingType, number> =
+		{
+			small: loadingProgress(circumference, 50),
+			large: loadingProgress(circumference, 81),
+		},
+
+	mapCircleStrokeWidth: Record<LoadingType, number> =
+		{
+			small: 16,
+			large: 10,
+		}
+
+function loadingProgress(
+	circumference: number,
+	/**
+	 * 0 - 100
+	 */
+	percentage: number,
+) {
+	return circumference - percentage * 0.01 * circumference
+}

package/src/components/loading/_circular-progress/CircularProgressProps.ts

@@ -0,0 +1,18 @@
+import type {
+	Svg,
+	SvgProps,
+} from "react-native-svg"
+
+import type {
+	LoadingType,
+} from "../LoadingType"
+
+export interface CircularProgressProps extends Omit<SvgProps, "width" | "height"> {
+	/**
+	 * @default 'large'
+	 */
+	type: LoadingType,
+	circleStrokeColor: string,
+	circleBackgroundColor: string,
+	forwardedRef?: React.ForwardedRef<Svg>,
+}

package/src/components/loading/_circular-progress/index.ts

@@ -0,0 +1,2 @@
+export * from "./CircularProgress"
+export type * from "./CircularProgressProps"

package/src/components/loading/_map-circle-background-color.ts

@@ -0,0 +1,26 @@
+import {
+	Color,
+	type ColorLayerLevel,
+} from "@audira/carbon-react-native-elements"
+
+import type {
+	ThemeContext,
+} from "../../contexts/theme"
+
+export const MapCircleBackgroundColor: {
+	[Layer in ColorLayerLevel]: Record<ThemeContext["colorScheme"], string>
+} =
+	{
+		1: {
+			gray_10: Color.Token.gray_10.layer_accent_01,
+			gray_100: Color.Token.gray_100.layer_accent_01,
+		},
+		2: {
+			gray_10: Color.Token.gray_10.layer_accent_02,
+			gray_100: Color.Token.gray_100.layer_accent_02,
+		},
+		3: {
+			gray_10: Color.Token.gray_10.layer_accent_03,
+			gray_100: Color.Token.gray_100.layer_accent_03,
+		},
+	}

package/src/components/loading/_map-circle-stroke-color.ts

@@ -0,0 +1,13 @@
+import {
+	Color,
+} from "@audira/carbon-react-native-elements"
+
+import type {
+	ThemeContext,
+} from "../../contexts/theme"
+
+export const MapCircleStrokeColor: Record<ThemeContext["colorScheme"], string> =
+	{
+		gray_10: Color.Token.gray_10.interactive,
+		gray_100: Color.Token.gray_100.interactive,
+	}

package/src/components/loading/index.ts

@@ -0,0 +1,4 @@
+export * from "./Loading"
+export type * from "./LoadingProps"
+export type * from "./LoadingRef"
+export type * from "./LoadingType"