react-native-varia 0.3.0 → 0.4.0

package/lib/components/OldSlider.tsx

@@ -1,327 +0,0 @@
-import React from 'react'
-import {type LayoutChangeEvent, View} from 'react-native'
-import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
-import {Gesture, GestureDetector} from 'react-native-gesture-handler'
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-} from 'react-native-reanimated'
-import {runOnJS} from 'react-native-worklets'
-import {SliderStyles, SliderDefaultVariants} from '../theme/OldSlider.recipe'
-import {PalettesWithNestedKeys} from '../style/varia/types'
-
-type SliderVariants = UnistylesVariants<typeof SliderStyles>
-
-type SliderProps = SliderVariants & {
-  colorPalette?: PalettesWithNestedKeys
-  thickness?: number
-  minimumTrackThickness?: number
-  minimumTrackColor?: string
-  displayStepsOnMinimumTrack?: boolean
-  thumbSize?: {
-    width: number
-    height: number
-  }
-  thumbChildren?: React.ReactNode
-  axis: 'x' | 'y'
-  steps?: number
-  value?: number
-  onValueChange?: (value: number) => void
-  onSlidingComplete?: (value: number) => void
-}
-
-const OldSlider = ({
-  colorPalette = 'accent',
-  variant = SliderDefaultVariants.variant,
-  size = SliderDefaultVariants.size,
-  displayStepsOnMinimumTrack = false,
-  thumbChildren: ThumbChildren,
-  axis = 'x',
-  value = 0,
-  steps,
-  onValueChange,
-  onSlidingComplete,
-}: SliderProps) => {
-  let styles
-  if (axis === 'x') {
-    styles = stylesX
-  } else {
-    styles = stylesY
-  }
-  SliderStyles.useVariants({
-    size,
-    variant,
-  })
-  const thumbStyle = SliderStyles.thumb(colorPalette)
-  const maximumTrackStyle = SliderStyles.maximumTrack(colorPalette)
-  const minimumTrackStyle = SliderStyles.minimumTrack(colorPalette, false)
-
-  const halfSize = (thumbStyle.width ?? 0) / 2
-  const thumbSize = {
-    width: thumbStyle.width,
-    height: thumbStyle.height,
-  }
-  const maximumTrackWidth = maximumTrackStyle.height ?? 30
-  const minimumTrackWidth = minimumTrackStyle.height ?? 30
-  const context = useSharedValue({x: 0})
-  const translate = useSharedValue(value)
-  const trackLength = useSharedValue(0)
-  const isInsideChild = useSharedValue(false)
-
-  const handleTrackLayout = (event: LayoutChangeEvent) => {
-    const {width, height} = event.nativeEvent.layout
-    trackLength.value = axis === 'x' ? width : height
-  }
-
-  const slideGesture = Gesture.Pan()
-    .onTouchesDown(() => {
-      isInsideChild.value = true
-    })
-    .onBegin(() => {
-      context.value.x = translate.value
-    })
-    .onUpdate(e => {
-      const stepLength = steps ? trackLength.value / steps : 1
-      const delta = axis === 'y' ? -e.translationY : e.translationX
-
-      const rawValue = Math.max(
-        0,
-        Math.min(context.value.x + delta, trackLength.value),
-      )
-
-      const snappedValue = steps
-        ? Math.round(rawValue / stepLength) * stepLength
-        : rawValue
-
-      translate.value = snappedValue
-
-      if (steps) {
-        const stepIndex = Math.round(snappedValue / stepLength)
-        onValueChange && runOnJS(onValueChange)(stepIndex)
-      } else {
-        onValueChange &&
-          runOnJS(onValueChange)(
-            Math.round((snappedValue / trackLength.value) * 100) / 100,
-          )
-      }
-    })
-    .onEnd(() => {
-      const stepLength = steps ? trackLength.value / steps : 1
-
-      const snappedValue = steps
-        ? Math.round(translate.value / stepLength)
-        : translate.value / trackLength.value
-
-      onSlidingComplete && runOnJS(onSlidingComplete)(snappedValue)
-    })
-    .onFinalize(() => {
-      isInsideChild.value = false
-    })
-  const tapGesture = Gesture.Tap()
-    .onBegin(e => {
-      if (isInsideChild.value) {
-        return
-      }
-      const tapPosition = axis === 'x' ? e.x : e.y
-      const stepLength = steps ? trackLength.value / steps : 1
-
-      const rawValue =
-        axis === 'y'
-          ? Math.max(
-              0,
-              Math.min(trackLength.value - tapPosition, trackLength.value),
-            )
-          : Math.max(0, Math.min(tapPosition, trackLength.value))
-
-      const snappedValue = steps
-        ? Math.round(rawValue / stepLength) * stepLength
-        : rawValue
-
-      translate.value = snappedValue
-
-      if (steps) {
-        const stepIndex = Math.round(snappedValue / stepLength)
-        onValueChange && runOnJS(onValueChange)(stepIndex)
-        onSlidingComplete && runOnJS(onSlidingComplete)(stepIndex)
-      } else {
-        const normalizedValue =
-          Math.round((snappedValue / trackLength.value) * 100) / 100
-        onValueChange && runOnJS(onValueChange)(normalizedValue)
-        onSlidingComplete && runOnJS(onSlidingComplete)(normalizedValue)
-      }
-    })
-    .simultaneousWithExternalGesture(slideGesture)
-
-  const animatedTrack = useAnimatedStyle(() => ({
-    [axis === 'y' ? 'height' : 'width']: translate.value + halfSize,
-  }))
-
-  const opacityTrack = steps !== undefined && displayStepsOnMinimumTrack
-
-  return (
-    <View
-      style={[
-        styles.container(maximumTrackWidth, halfSize),
-        SliderStyles.container(colorPalette),
-      ]}>
-      {axis === 'x' && <View style={{width: halfSize}} />}
-      <GestureDetector gesture={tapGesture}>
-        <View
-          style={[
-            styles.maximumTrack(maximumTrackWidth),
-            SliderStyles.maximumTrack(colorPalette),
-          ]}
-          onLayout={handleTrackLayout}>
-          {steps && (
-            <View style={styles.steps}>
-              {Array.from({length: steps + 1}, (_, index) => index).map(
-                (_, i) => (
-                  <View
-                    key={i}
-                    style={[
-                      styles.step(i, steps),
-                      SliderStyles.step(colorPalette),
-                    ]}
-                  />
-                ),
-              )}
-            </View>
-          )}
-          <Animated.View
-            style={[
-              styles.minimumTrack(halfSize, minimumTrackWidth),
-              SliderStyles.minimumTrack(colorPalette, opacityTrack),
-              animatedTrack,
-            ]}>
-            <GestureDetector gesture={slideGesture}>
-              <View
-                style={[
-                  SliderStyles.thumb(colorPalette),
-                  styles.thumb(halfSize, thumbSize),
-                ]}>
-                {ThumbChildren || null}
-              </View>
-            </GestureDetector>
-          </Animated.View>
-        </View>
-      </GestureDetector>
-      {axis === 'y' && <View style={{height: halfSize}} />}
-    </View>
-  )
-}
-
-const stylesX = StyleSheet.create(theme => ({
-  container: (thickness, halfSize) => ({
-    flex: thickness ? 1 : 1,
-    maxWidth: 'auto',
-    borderRadius: 22,
-    width: '100%',
-    height: '100%',
-    paddingTop: 0,
-    paddingRight: halfSize,
-    flexDirection: 'row',
-  }),
-  maximumTrack: thickness => ({
-    flex: thickness ? 1 : 1,
-    justifyContent: 'center',
-    position: 'relative',
-    borderRadius: 22,
-  }),
-  minimumTrack: (halfSize, minimumTrackThickness) => ({
-    height: minimumTrackThickness,
-    width: '100%',
-    left: halfSize * -1,
-    bottom: 'auto',
-    paddingBottom: 0,
-    paddingLeft: halfSize,
-    borderBottomLeftRadius: 20,
-    borderBottomRightRadius: 0,
-    borderTopLeftRadius: 20,
-    justifyContent: 'center',
-  }),
-  thumb: (halfSize, thumbSize) => ({
-    width: halfSize ? thumbSize.width : thumbSize.width,
-    height: thumbSize.height,
-    borderRadius: 25,
-    position: 'absolute',
-    right: 0,
-    zIndex: 2,
-    transform: [{translateX: '50%'}],
-  }),
-  steps: {
-    width: '100%',
-    height: '100%',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    zIndex: 0,
-    position: 'absolute',
-  },
-  step: (index, length) => ({
-    width: 1,
-    height: '100%',
-    backgroundColor:
-      index === 0 || index === length ? 'transparent' : theme.colors.fg.default,
-  }),
-}))
-const stylesY = StyleSheet.create(theme => ({
-  container: (maximumTrackWidth, halfSize) => ({
-    flex: 1,
-    maxWidth: maximumTrackWidth,
-    maxHeight: 'auto',
-    borderRadius: 22,
-    width: '100%',
-    height: '100%',
-    paddingTop: halfSize,
-    paddingRight: 0,
-    flexDirection: 'column',
-    borderWidth: 1,
-    borderColor: 'yellow',
-    // minWidth: 30,
-  }),
-  maximumTrack: maximumTrackWidth => ({
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    position: 'relative',
-    maxWidth: maximumTrackWidth,
-  }),
-  minimumTrack: (halfSize, minimumTrackWidth) => ({
-    position: 'absolute',
-    height: '100%',
-    width: minimumTrackWidth,
-    left: 'auto',
-    bottom: halfSize * -1,
-    paddingBottom: halfSize,
-    paddingLeft: 0,
-    borderBottomLeftRadius: 20,
-    borderBottomRightRadius: 20,
-    borderTopLeftRadius: 0,
-    alignItems: 'center',
-  }),
-  thumb: (halfSize, thumbSize) => ({
-    borderRadius: 25,
-    position: 'absolute',
-    top: 0,
-    zIndex: 2,
-    transform: [{translateY: halfSize * -1}],
-    width: thumbSize.height,
-    height: thumbSize.width,
-  }),
-  steps: {
-    width: '100%',
-    height: '100%',
-    flexDirection: 'column',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    zIndex: 0,
-  },
-  step: (index, length) => ({
-    width: '100%',
-    height: 1,
-    backgroundColor:
-      index === 0 || index === length ? 'transparent' : theme.colors.fg.default,
-  }),
-}))
-
-export default OldSlider

package/lib/components/SlidingDrawer.tsx

@@ -1,301 +0,0 @@
-import React, {useImperativeHandle} from 'react'
-import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
-import {Gesture, GestureDetector} from 'react-native-gesture-handler'
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withSpring,
-  withTiming,
-  type SharedValue,
-} from 'react-native-reanimated'
-import {scheduleOnRN} from 'react-native-worklets'
-import {
-  SlidingDrawerTokens,
-  SlidingDrawerStyles,
-} from '../theme/SlidingDrawer.recipe'
-import {PalettesWithNestedKeys} from '../style/varia/types'
-import {TouchableWithoutFeedback, ViewStyle} from 'react-native'
-
-export type SlidingDrawerRef = {
-  snapTo: (point: number) => void | null
-  expand: () => void | null
-  collapse: () => void | null
-}
-
-type SlidingDrawerVariants = UnistylesVariants<typeof SlidingDrawerStyles>
-
-type SlidingDrawerProps = SlidingDrawerVariants & {
-  colorPalette?: PalettesWithNestedKeys
-  animation?: keyof typeof SlidingDrawerTokens.variants.animation
-  width?: string
-  flex?: number
-  direction?: 1 | -1
-  onCollapse?: () => void
-  onExpand?: () => void
-  onSnap?: (point: number) => void
-  snapPoints: number[]
-  axis: 'y' | 'x'
-  allowGestures?: boolean
-  overlay?: boolean
-  closeOnOverlayPress?: boolean
-  children?: React.ReactNode
-  ref?: React.RefObject<SlidingDrawerRef | null>
-}
-
-const AnimatedTouchableOpacity = Animated.createAnimatedComponent(
-  TouchableWithoutFeedback,
-)
-
-const SlidingDrawer = ({
-  colorPalette = 'accent',
-  variant = SlidingDrawerTokens.defaultProps.variant,
-  animation = SlidingDrawerTokens.defaultProps.animation,
-  width = '100%',
-  flex = 0,
-  direction = 1,
-  onCollapse,
-  onExpand,
-  onSnap,
-  snapPoints,
-  axis,
-  allowGestures = true,
-  overlay = false,
-  closeOnOverlayPress = true,
-  children,
-  ref,
-}: SlidingDrawerProps) => {
-  SlidingDrawerStyles.useVariants({
-    variant,
-  })
-
-  const points = snapPoints.map(point => point * direction)
-
-  const translate = useSharedValue(points[0])
-
-  const context: SharedValue<{
-    position: number
-    snapPoint: number
-  }> = useSharedValue({
-    position: points[0],
-    snapPoint: 0,
-  })
-
-  const changeDisplay = useSharedValue('none')
-  const opacity = useSharedValue(0)
-
-  const VELOCITY_THRESHOLD = 2000
-
-  const updateCurrentSnapPoint = (snapPoint: number) => {
-    'worklet'
-    context.value = {position: context.value.position, snapPoint}
-  }
-
-  const animations = {
-    withSpring,
-    withTiming,
-  }
-
-  const animationVariant = SlidingDrawerTokens.variants.animation[animation]
-
-  const snapTo = (destination: number) => {
-    'worklet'
-
-    if (animationVariant && animationVariant.type) {
-      translate.value = animations[animationVariant.type](
-        points[destination],
-        animationVariant.props,
-      )
-      updateCurrentSnapPoint(destination)
-      onSnap && scheduleOnRN(onSnap, destination)
-    }
-  }
-
-  const expand = () => {
-    snapTo(points.length - 1)
-    if (overlay) {
-      showOverlay()
-    }
-    onExpand && scheduleOnRN(onExpand)
-  }
-
-  const isCollapsed = () => {
-    'worklet'
-    return context.value.snapPoint === 0
-  }
-
-  const collapse = () => {
-    snapTo(0)
-    if (overlay) {
-      hideOverlay()
-    }
-    onCollapse && scheduleOnRN(onCollapse)
-  }
-
-  const hideOverlay = () => {
-    'worklet'
-    changeDisplay.value = 'none'
-    opacity.value = withTiming(0, {duration: 200})
-  }
-  const showOverlay = () => {
-    'worklet'
-    changeDisplay.value = 'flex'
-    opacity.value = withTiming(1, {duration: 200})
-  }
-
-  useImperativeHandle(ref, () => ({
-    expand,
-    collapse,
-    snapTo,
-    isCollapsed,
-  }))
-
-  const slideGesture = Gesture.Pan()
-    .enabled(allowGestures)
-    .onBegin(() => {
-      context.value.position = translate.value
-    })
-    .onUpdate(event => {
-      const delta = axis === 'y' ? event.translationY : event.translationX
-
-      const proposed = delta + (context.value.position ?? 0)
-
-      const minPoint = Math.min(...points)
-      const maxPoint = Math.max(...points)
-
-      let clamped = proposed
-
-      if (proposed < minPoint) {
-        const overdrag = minPoint - proposed
-        clamped = minPoint - overdrag / (1 + overdrag / 60)
-      } else if (proposed > maxPoint) {
-        const overdrag = proposed - maxPoint
-        clamped = maxPoint + overdrag / (1 + overdrag / 60)
-      }
-
-      translate.value = clamped
-    })
-    .onEnd(({velocityX, velocityY, translationX, translationY}) => {
-      const velocity = axis === 'y' ? velocityY : velocityX
-      const translation = axis === 'y' ? translationY : translationX
-
-      const minPoint = Math.min(...points)
-      const maxPoint = Math.max(...points)
-
-      if (translate.value < minPoint) {
-        translate.value = withSpring(minPoint, {velocity})
-        return
-      } else if (translate.value > maxPoint) {
-        translate.value = withSpring(maxPoint, {velocity})
-        return
-      }
-
-      const forwardsThreshold =
-        (points[context.value.snapPoint] +
-          points[context.value.snapPoint + 1]) /
-        2
-      const backwardsThreshold =
-        (points[context.value.snapPoint] +
-          points[context.value.snapPoint - 1]) /
-        2
-
-      if (translation * direction < 0) {
-        if (
-          ((direction === 1 && translate.value < forwardsThreshold) ||
-            (direction === -1 && translate.value > forwardsThreshold) ||
-            velocity * direction < -VELOCITY_THRESHOLD) &&
-          context.value.snapPoint < points.length - 1
-        ) {
-          snapTo(context.value.snapPoint + 1)
-        } else {
-          snapTo(context.value.snapPoint)
-        }
-      } else {
-        if (
-          ((direction === 1 && translate.value > backwardsThreshold) ||
-            (direction === -1 && translate.value < backwardsThreshold) ||
-            velocity * direction > VELOCITY_THRESHOLD) &&
-          context.value.snapPoint > 0
-        ) {
-          snapTo(context.value.snapPoint - 1)
-        } else {
-          snapTo(context.value.snapPoint)
-        }
-      }
-    })
-    .onFinalize(() => {
-      if (overlay) {
-        if (isCollapsed()) {
-          hideOverlay()
-        } else {
-          showOverlay()
-        }
-      }
-    })
-
-  const blockAnimatedStyle = useAnimatedStyle(() => {
-    if (axis === 'y') {
-      return {
-        transform: [{translateY: translate.value}],
-      }
-    } else {
-      return {
-        transform: [{translateX: translate.value}],
-      }
-    }
-  })
-
-  const displayOverlayStyle = useAnimatedStyle(() => {
-    return {
-      display: changeDisplay.value as ViewStyle['display'],
-      opacity: opacity.value,
-    }
-  })
-
-  return (
-    <>
-      {overlay && (
-        <AnimatedTouchableOpacity
-          onPress={() => closeOnOverlayPress && collapse()}>
-          <Animated.View
-            style={[
-              StyleSheet.absoluteFillObject,
-              displayOverlayStyle,
-              SlidingDrawerStyles.overlay(colorPalette),
-            ]}
-          />
-        </AnimatedTouchableOpacity>
-      )}
-      <GestureDetector gesture={slideGesture}>
-        <Animated.View
-          style={[
-            styles.container(flex, direction, axis, width),
-            blockAnimatedStyle,
-            SlidingDrawerStyles.slider(colorPalette),
-          ]}>
-          {children}
-        </Animated.View>
-      </GestureDetector>
-    </>
-  )
-}
-export default SlidingDrawer
-
-const styles = StyleSheet.create({
-  container: (flex, direction, axis, width) => ({
-    position: flex === 0 ? 'absolute' : 'relative',
-    bottom: axis === 'y' && direction === -1 ? 0 : 'auto',
-    top: axis === 'y' && direction === 1 ? 0 : 'auto',
-    left: axis === 'x' ? 0 : 'auto',
-    flex: flex === 0 ? 1 : flex,
-    height: '100%',
-    width,
-    flexDirection: 'column',
-    alignSelf: 'stretch',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    zIndex: 100,
-  }),
-  customStyle: style => ({
-    ...style,
-  }),
-})