react-native-varia 0.4.0 → 0.4.1

package/lib/components/FloatingAction.tsx

@@ -0,0 +1,215 @@
+import React, {createContext, useContext} from 'react'
+import {View, Pressable} from 'react-native'
+import Animated, {
+  withDelay,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated'
+import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
+import Plus from '../icons/Plus'
+import {
+  FloatingActionDefaultVariants,
+  FloatingActionStyles,
+} from '../theme/FloatingAction'
+import {ViewStyle} from 'react-native'
+import {PalettesWithNestedKeys} from '../style/varia/types'
+import {getVariantValue} from '../style/varia/utils'
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable)
+
+const SPRING_CONFIG = {
+  duration: 800,
+  overshootClamping: true,
+  dampingRatio: 0.8,
+}
+
+const FloatingActionContext = createContext<any>(null)
+
+const useFloatingContext = () => {
+  const ctx = useContext(FloatingActionContext)
+  if (!ctx)
+    throw new Error('FloatingAction.Item must be inside FloatingAction.Root')
+  return ctx
+}
+
+type ItemProps = FloatingActionVariants & {
+  children: React.ReactNode
+  onPress: () => void
+}
+
+function Item({children, onPress, ...props}: ItemProps) {
+  const {
+    direction,
+    gap,
+    isExpanded,
+    index,
+    variant,
+    size,
+    colorPalette = 'accent',
+  } = {...useFloatingContext(), ...props}
+  FloatingActionStyles.useVariants({
+    variant,
+    size,
+  })
+
+  const iconHeight = getVariantValue(
+    FloatingActionStyles.button(colorPalette),
+    'size',
+    size,
+    'height',
+  )
+  const animatedStyles = useAnimatedStyle(() => {
+    const multiplier = direction === 'toTop' ? -1 : 1
+    const OFFSET_FROM_MAIN = iconHeight + gap
+
+    const moveValue = isExpanded.value
+      ? (OFFSET_FROM_MAIN + (gap + iconHeight) * (index - 1)) * multiplier
+      : 0
+
+    const delay = index * 30
+
+    return {
+      opacity: withDelay(
+        delay,
+        withTiming(isExpanded.value ? 1 : 0, {duration: 150}),
+      ),
+      transform: [
+        {translateY: withDelay(delay, withSpring(moveValue, SPRING_CONFIG))},
+        {
+          scale: withDelay(
+            delay,
+            withTiming(isExpanded.value ? 1 : 0.95, {duration: 200}),
+          ),
+        },
+      ],
+    }
+  })
+
+  return (
+    <AnimatedPressable
+      style={[
+        animatedStyles,
+        styles.itemButton,
+        FloatingActionStyles.item(colorPalette),
+      ]}
+      onPress={onPress}>
+      {children}
+    </AnimatedPressable>
+  )
+}
+
+type directions = 'toTop' | 'toBottom'
+type FloatingActionVariants = UnistylesVariants<typeof FloatingActionStyles>
+type FloatingActionProps = FloatingActionVariants & {
+  colorPalette?: PalettesWithNestedKeys
+  gap?: ViewStyle['gap']
+  direction?: directions
+  top?: ViewStyle['top']
+  bottom?: ViewStyle['bottom']
+  right?: ViewStyle['right']
+  left?: ViewStyle['left']
+  children: React.ReactNode
+}
+
+function Root({
+  variant = FloatingActionDefaultVariants.variant,
+  size = FloatingActionDefaultVariants.size,
+  colorPalette = 'accent',
+  children,
+  gap = 10,
+  direction = 'toTop',
+  top = null,
+  bottom = null,
+  right = null,
+  left = null,
+}: FloatingActionProps) {
+  FloatingActionStyles.useVariants({
+    variant,
+    size,
+  })
+
+  const isExpanded = useSharedValue(false)
+
+  const plusIconStyle = useAnimatedStyle(() => ({
+    transform: [{rotate: withTiming(isExpanded.value ? '45deg' : '0deg')}],
+  }))
+
+  const arrayChildren = React.Children.toArray(children)
+
+  const iconHeight = getVariantValue(
+    FloatingActionStyles.button(colorPalette),
+    'size',
+    size,
+    'height',
+  )
+  const iconColor = getVariantValue(
+    FloatingActionStyles.buttonIcon(colorPalette),
+    'variant',
+    variant,
+    'color',
+  )
+  console.log('🚀 ~ iconColor:', iconColor)
+
+  return (
+    <View
+      style={[
+        styles.buttonContainer(top, bottom, left, right),
+        FloatingActionStyles.buttonContainer(colorPalette),
+      ]}>
+      <AnimatedPressable
+        onPress={() => (isExpanded.value = !isExpanded.value)}
+        style={[
+          plusIconStyle,
+          styles.button,
+          FloatingActionStyles.button(colorPalette),
+        ]}>
+        <Plus size={iconHeight - 20} color={iconColor} />
+      </AnimatedPressable>
+      {arrayChildren.map((child: any, i) => (
+        <FloatingActionContext.Provider
+          key={i}
+          value={{
+            direction,
+            gap,
+            isExpanded,
+            index: i + 1,
+            variant,
+            size,
+            colorPalette,
+          }}>
+          {child}
+        </FloatingActionContext.Provider>
+      ))}
+    </View>
+  )
+}
+
+const FloatingAction = {
+  Root,
+  Item,
+}
+export default FloatingAction
+
+const styles = StyleSheet.create({
+  buttonContainer: (top, bottom, left, right) => ({
+    position: 'absolute',
+    ...(top !== null && top !== undefined ? {top} : {}),
+    ...(bottom !== null && bottom !== undefined ? {bottom} : {}),
+    ...(left !== null && left !== undefined ? {left} : {}),
+    ...(right !== null && right !== undefined ? {right} : {}),
+    zIndex: 99,
+    alignItems: 'center',
+  }),
+  button: {
+    zIndex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  itemButton: {
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})

package/lib/components/IconWrapper.tsx

@@ -68,7 +68,7 @@ const Icon = ({
       <Svg
         width={size || width}
         height={size || height}
-        viewBox="0 0 24 24"
+        viewBox="0 0 23 23"
         // viewBox={`0 0 ${viewBoxWidth} ${viewBoxHeight}`}
         fill="none"
         {...rest}>

package/lib/theme/FloatingAction.tsx

@@ -0,0 +1,112 @@
+import {StyleSheet} from 'react-native-unistyles'
+import {PalettesWithNestedKeys} from '../style/varia/types'
+import {textStyle} from '../style/varia/textStyles'
+
+export const FloatingActionDefaultVariants = {
+  variant: 'solid',
+  size: 'md',
+} as const
+
+export const FloatingActionStyles = StyleSheet.create(theme => ({
+  buttonContainer: (colorPalette: PalettesWithNestedKeys) => ({
+    variants: {
+      variant: {
+        solid: {},
+        subtle: {},
+        outline: {},
+        ghost: {},
+      },
+      size: {
+        sm: {},
+        md: {},
+        lg: {},
+      },
+    },
+  }),
+  button: (colorPalette: PalettesWithNestedKeys) => ({
+    borderRadius: theme.radii.full,
+    variants: {
+      variant: {
+        solid: {
+          backgroundColor: theme.colors[colorPalette].default,
+        },
+        outline: {
+          borderWidth: 1,
+          borderColor: theme.colors[colorPalette].a7,
+        },
+        subtle: {
+          backgroundColor: theme.colors[colorPalette]['a3'],
+        },
+        ghost: {
+          backgroundColor: 'transparent',
+        },
+      },
+      size: {
+        sm: {
+          height: theme.sizes['8'],
+          width: theme.sizes['8'],
+        },
+        md: {
+          height: theme.sizes['10'],
+          width: theme.sizes['10'],
+        },
+        lg: {
+          height: theme.sizes['16'],
+          width: theme.sizes['16'],
+        },
+      },
+    },
+  }),
+  buttonIcon: (colorPalette: PalettesWithNestedKeys) => ({
+    variants: {
+      variant: {
+        solid: {
+          color: theme.colors.fg.default,
+        },
+        outline: {
+          color: theme.colors[colorPalette].text,
+        },
+        ghost: {
+          color: theme.colors.gray.text,
+        },
+        subtle: {
+          color: theme.colors[colorPalette].text,
+        },
+      },
+    },
+  }),
+  item: (colorPalette: PalettesWithNestedKeys) => ({
+    borderRadius: theme.radii.full,
+    variants: {
+      variant: {
+        solid: {
+          backgroundColor: theme.colors[colorPalette].default,
+        },
+        outline: {
+          borderWidth: 1,
+          borderColor: theme.colors[colorPalette].a7,
+        },
+        subtle: {
+          backgroundColor: theme.colors[colorPalette]['a3'],
+        },
+        ghost: {
+          backgroundColor: 'transparent',
+        },
+      },
+      size: {
+        sm: {
+          height: theme.sizes['8'],
+          width: theme.sizes['8'],
+        },
+        md: {
+          height: theme.sizes['10'],
+          width: theme.sizes['10'],
+        },
+        lg: {
+          height: theme.sizes['16'],
+          width: theme.sizes['16'],
+        },
+      },
+    },
+  }),
+}))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-varia",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "bin": {
     "varia": "bin/cli.js"
   },