@helpwave/hightide-native 0.9.0 → 0.9.2

package/package.json

@@ -10,7 +10,7 @@
     "access": "public"
   },
   "license": "AGPL-3.0-only",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "type": "module",
   "files": [
     "src"

package/src/components/user-interaction/Button.tsx

@@ -2,7 +2,8 @@ import { forwardRef, useMemo, useState } from 'react'
 import {
   Pressable,
   View,
-  type PressableProps
+  type PressableProps,
+  type TextProps
 } from 'react-native'
 
 import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
@@ -21,6 +22,7 @@ import type { StyleOverwrite } from '../../theme/types/resolver'
 import { createHitBoxOverlayStyle } from '../../utils/hitBoxOverlay'
 import { useMinimumTouchTargetHitSlop } from '../../utils/minimumTouchTargetHitSlop'
 import { ThemedIcon } from '../visualization-and-display/ThemedIcon'
+import { ThemedLoadingSpinner } from '../visualization-and-display/ThemedLoadingSpinner'
 import { ThemedText } from '../visualization-and-display/ThemedText'
 import { useMemoizedTheme } from '../../hooks/useMemoizedTheme'
 
@@ -43,7 +45,9 @@ export type ButtonProps = Omit<PressableProps, 'children' | 'style'> & {
   style?: StyleOverwrite<ButtonState, ButtonStyle>,
   stateLayerStyle?: StyleOverwrite<ButtonState, ButtonStyle>,
   textStyle?: StyleOverwrite<ButtonState, ButtonTextStyle>,
+  textProps?: Omit<TextProps, 'style'>,
   iconStyle?: StyleOverwrite<ButtonState, IconStyle>,
+  isProcessing?: boolean,
 }
 
 export const Button = forwardRef<React.ComponentRef<typeof Pressable>, ButtonProps>(function Button({
@@ -57,7 +61,9 @@ export const Button = forwardRef<React.ComponentRef<typeof Pressable>, ButtonPro
   style,
   stateLayerStyle,
   textStyle,
+  textProps,
   iconStyle,
+  isProcessing = false,
   hitSlop: providedHitSlop,
   onLayout: providedOnLayout,
   ...props
@@ -83,20 +89,38 @@ export const Button = forwardRef<React.ComponentRef<typeof Pressable>, ButtonPro
   const resolvedTextStyle = useMemoizedTheme(theme.components.button.text, resolvedState, textStyle)
   const resolvedIcon = useMemoizedTheme(theme.components.button.icon, resolvedState, iconStyle)
   const resolvedStateLayerStyle = useMemoizedTheme(theme.components.button.stateLayer, resolvedState, stateLayerStyle)
+  const showLeadingSpinner = isProcessing && (leadingIcon !== undefined || trailingIcon === undefined)
+  const showTrailingSpinner = isProcessing && leadingIcon === undefined && trailingIcon !== undefined
 
   return (
     <Pressable
       {...props}
       ref={ref}
       disabled={disabled}
+      accessibilityState={{
+        disabled: !!disabled,
+        busy: isProcessing,
+      }}
       hitSlop={hitSlop}
       onLayout={onLayout}
       style={resolvedContainerStyle}
+      onPress={(event) => {
+        if (isProcessing) {
+          return
+        }
+        props.onPress?.(event)
+      }}
       onPressIn={(event) => {
+        if (isProcessing) {
+          return
+        }
         setIsPressed(true)
         props.onPressIn?.(event)
       }}
       onPressOut={(event) => {
+        if (isProcessing) {
+          return
+        }
         setIsPressed(false)
         props.onPressOut?.(event)
       }}
@@ -117,11 +141,17 @@ export const Button = forwardRef<React.ComponentRef<typeof Pressable>, ButtonPro
         textStyle={resolvedTextStyle}
         iconStyle={resolvedIcon}
       >
-        {leadingIcon !== undefined && (
+        {showLeadingSpinner && (
+          <ThemedLoadingSpinner />
+        )}
+        {!isProcessing && leadingIcon !== undefined && (
           <ThemedIcon icon={leadingIcon} />
         )}
-        <ThemedText>{children}</ThemedText>
-        {trailingIcon !== undefined && (
+        <ThemedText numberOfLines={1} ellipsizeMode="tail" {...textProps}>{children}</ThemedText>
+        {showTrailingSpinner && (
+          <ThemedLoadingSpinner />
+        )}
+        {!isProcessing && trailingIcon !== undefined && (
           <ThemedIcon icon={trailingIcon} />
         )}
       </ContentThemeOverrideProvider>

package/src/components/user-interaction/IconButton.tsx

@@ -22,7 +22,7 @@ import type { StyleOverwrite } from '../../theme/types/resolver'
 import type { IconComponent, IconStyle } from '../../icons'
 import { createHitBoxOverlayStyle } from '../../utils/hitBoxOverlay'
 import { useMinimumTouchTargetHitSlop } from '../../utils/minimumTouchTargetHitSlop'
-import { ThemedIcon } from '../visualization-and-display'
+import { ThemedIcon, ThemedLoadingSpinner } from '../visualization-and-display'
 
 export type IconButtonSize = ComponentSize
 
@@ -42,6 +42,7 @@ export type IconButtonProps = Omit<PressableProps, 'children' | 'style'> & {
   style?: StyleOverwrite<IconButtonState, IconButtonStyle>,
   stateLayerStyle?: StyleOverwrite<IconButtonState, IconButtonStyle>,
   iconStyle?:  StyleOverwrite<IconButtonState, IconStyle>,
+  isProcessing?: boolean,
 }
 
 export const IconButton = forwardRef<React.ComponentRef<typeof Pressable>, IconButtonProps>(function IconButton({
@@ -54,6 +55,7 @@ export const IconButton = forwardRef<React.ComponentRef<typeof Pressable>, IconB
   style,
   stateLayerStyle,
   iconStyle,
+  isProcessing = false,
   hitSlop: providedHitSlop,
   onLayout: providedOnLayout,
   ...props
@@ -92,14 +94,30 @@ export const IconButton = forwardRef<React.ComponentRef<typeof Pressable>, IconB
       disabled={disabled}
       accessibilityRole="button"
       accessibilityLabel={accessibilityLabel}
+      accessibilityState={{
+        disabled: !!disabled,
+        busy: isProcessing,
+      }}
       hitSlop={hitSlop}
       onLayout={onLayout}
       style={resolvedContainerStyle}
+      onPress={(event) => {
+        if (isProcessing) {
+          return
+        }
+        props.onPress?.(event)
+      }}
       onPressIn={(event) => {
+        if (isProcessing) {
+          return
+        }
         setIsPressed(true)
         props.onPressIn?.(event)
       }}
       onPressOut={(event) => {
+        if (isProcessing) {
+          return
+        }
         setIsPressed(false)
         props.onPressOut?.(event)
       }}
@@ -117,7 +135,11 @@ export const IconButton = forwardRef<React.ComponentRef<typeof Pressable>, IconB
       <ContentThemeOverrideProvider
         iconStyle={resolvedIconStyle}
       >
-        <ThemedIcon icon={icon} />
+        {isProcessing ? (
+          <ThemedLoadingSpinner />
+        ) : (
+          <ThemedIcon icon={icon} />
+        )}
       </ContentThemeOverrideProvider>
     </Pressable>
   )

package/src/components/visualization-and-display/ThemedLoadingSpinner.tsx

@@ -0,0 +1,41 @@
+import { useEffect, useRef } from 'react'
+import {
+  Animated,
+  Easing
+} from 'react-native'
+import { LoaderCircle } from 'lucide-react-native'
+
+import { ThemedIcon, type ThemedIconProps } from './ThemedIcon'
+
+export type ThemedLoadingSpinnerProps = Omit<ThemedIconProps, 'icon'>
+
+export const ThemedLoadingSpinner = (props: ThemedLoadingSpinnerProps) => {
+  const progress = useRef(new Animated.Value(0)).current
+
+  useEffect(() => {
+    const animation = Animated.loop(
+      Animated.timing(progress, {
+        toValue: 1,
+        duration: 750,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      })
+    )
+    animation.start()
+    return () => {
+      animation.stop()
+      progress.setValue(0)
+    }
+  }, [progress])
+
+  const rotate = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  })
+
+  return (
+    <Animated.View style={{ transform: [{ rotate }] }}>
+      <ThemedIcon icon={LoaderCircle} {...props} />
+    </Animated.View>
+  )
+}

package/src/components/visualization-and-display/index.ts

@@ -1,4 +1,5 @@
 export * from './Avatar'
 export * from './Chip'
 export * from './ThemedIcon'
+export * from './ThemedLoadingSpinner'
 export * from './ThemedText'