cpk-ui 0.5.4 → 0.7.0

package/src/components/uis/PinchZoom/PinchZoom.tsx

@@ -1,424 +0,0 @@
-import type {PropsWithChildren, Ref} from 'react';
-import React, {
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react';
-import type {
-  NativeMethods,
-  NativeTouchEvent,
-  PanResponderInstance,
-  ViewStyle,
-} from 'react-native';
-import {Animated, PanResponder} from 'react-native';
-
-export type PinchZoomProps = PropsWithChildren<{
-  /**
-   * Custom view style.
-   * @warning Passing `transform` in style will disable pinch-zoom functionality.
-   * Use a wrapper View for custom transforms instead.
-   */
-  style?: ViewStyle;
-  children?: any;
-  /** Callback fired when zoom scale changes */
-  onScaleChanged?(value: number): void;
-  /** Callback fired when content position changes */
-  onTranslateChanged?(valueXY: {x: number; y: number}): void;
-  /** Callback fired after gesture animation completes (decay or snap-back) */
-  onRelease?(): void;
-  /**
-   * Allow unrestricted overflow on specific axes.
-   * When true, allows overflow. When false/undefined, clamps to bounds.
-   */
-  allowEmpty?: {x?: boolean; y?: boolean};
-  /**
-   * Auto-snap to bounds after release.
-   * @default true
-   */
-  fixOverflowAfterRelease?: boolean;
-  /** Test ID for component testing */
-  testID?: string;
-}>;
-
-export interface PinchZoomRef {
-  animatedValue: {scale: Animated.Value; translate: Animated.ValueXY};
-  setValues(_: {scale?: number; translate?: {x: number; y: number}}): void;
-}
-
-type TouchePosition = Pick<
-  NativeTouchEvent,
-  'locationX' | 'locationY' | 'pageX' | 'pageY'
->;
-
-function getDistanceFromTouches(touches: NativeTouchEvent[]): number {
-  const [touch1, touch2] = touches;
-
-  return Math.sqrt(
-    (touch1.pageX - touch2.pageX) ** 2 + (touch1.pageY - touch2.pageY) ** 2,
-  );
-}
-
-function getRelativeTouchesCenterPosition(
-  touches: NativeTouchEvent[],
-  layout: {width: number; height: number; pageX: number; pageY: number},
-  transformCache: {scale: number; translateX: number; translateY: number},
-): TouchePosition {
-  const pageX =
-    (touches[0].pageX + touches[1].pageX) / 2 - layout.width / 2 - layout.pageX;
-
-  const pageY =
-    (touches[0].pageY + touches[1].pageY) / 2 -
-    layout.height / 2 -
-    layout.pageY;
-
-  return {
-    locationX: (pageX - transformCache.translateX) / transformCache.scale,
-    locationY: (pageY - transformCache.translateY) / transformCache.scale,
-    pageX,
-    pageY,
-  };
-}
-
-function PinchZoom(
-  {
-    style,
-    children,
-    onScaleChanged,
-    onRelease,
-    onTranslateChanged,
-    allowEmpty,
-    fixOverflowAfterRelease = true,
-    testID = 'pinch-zoom-container',
-  }: PinchZoomProps,
-  ref: Ref<PinchZoomRef>,
-): JSX.Element {
-  const containerView = useRef<NativeMethods | null>(null);
-  const scale = useRef(new Animated.Value(1)).current;
-  const translate = useRef(new Animated.ValueXY({x: 0, y: 0})).current;
-
-  const transformCache = useRef({
-    scale: 1,
-    translateX: 0,
-    translateY: 0,
-  }).current;
-
-  const lastTransform = useRef({scale: 1, translateX: 0, translateY: 0});
-  const initialDistance = useRef<number | undefined>(undefined);
-  const initialTouchesCenter = useRef<TouchePosition | undefined>(undefined);
-
-  type Layout = {
-    width: number;
-    height: number;
-    pageX: number;
-    pageY: number;
-  };
-
-  const layout = useRef<Layout | undefined>(undefined);
-
-  const decayingTranslateAnimation = useRef<
-    Animated.CompositeAnimation | undefined
-  >(undefined);
-  const isResponderActive = useRef(false);
-  const movingVelocity = useRef<{x: number; y: number} | undefined>(undefined);
-
-  containerView.current?.measure((x, y, width, height, pageX, pageY) => {
-    layout.current = {width, height, pageX, pageY};
-  });
-
-  useEffect(() => {
-    scale.addListener(({value}) => {
-      transformCache.scale = value;
-      onScaleChanged?.(value);
-    });
-
-    const id = translate.addListener(({x, y}) => {
-      if (
-        decayingTranslateAnimation.current &&
-        layout.current &&
-        !isResponderActive.current
-      ) {
-        const overflowX =
-          !allowEmpty?.x &&
-          Math.abs(x) > ((transformCache.scale - 1) * layout.current.width) / 2;
-
-        const overflowY =
-          !allowEmpty?.y &&
-          Math.abs(y) >
-            ((transformCache.scale - 1) * layout.current.height) / 2;
-
-        if (overflowX || overflowY) {
-          decayingTranslateAnimation.current?.stop();
-          decayingTranslateAnimation.current = undefined;
-
-          translate.setValue({
-            x: overflowX
-              ? (Math.sign(x) *
-                  (transformCache.scale - 1) *
-                  layout.current.width) /
-                2
-              : x,
-            y: overflowY
-              ? (Math.sign(y) *
-                  (transformCache.scale - 1) *
-                  layout.current.height) /
-                2
-              : y,
-          });
-        }
-      }
-
-      transformCache.translateX = x;
-      transformCache.translateY = y;
-      onTranslateChanged?.({x, y});
-    });
-
-    return () => {
-      scale.removeAllListeners();
-      translate.removeListener(id);
-    };
-  }, [
-    onScaleChanged,
-    onTranslateChanged,
-    scale,
-    transformCache,
-    translate,
-    allowEmpty?.x,
-    allowEmpty?.y,
-  ]);
-
-  const [panResponder, setPanResponder] = useState<PanResponderInstance>();
-
-  useEffect(() => {
-    setPanResponder(
-      PanResponder.create({
-        onMoveShouldSetPanResponder: () => true,
-        onPanResponderGrant: ({nativeEvent}) => {
-          isResponderActive.current = true;
-          movingVelocity.current = undefined;
-
-          if (decayingTranslateAnimation.current) {
-            decayingTranslateAnimation.current.stop();
-          }
-
-          const {touches} = nativeEvent;
-
-          lastTransform.current = {...transformCache};
-
-          initialDistance.current = undefined;
-
-          if (layout.current != null) {
-            if (touches.length === 2) {
-              initialDistance.current = getDistanceFromTouches(touches);
-
-              initialTouchesCenter.current = getRelativeTouchesCenterPosition(
-                touches,
-                layout.current,
-                transformCache,
-              );
-            } else {
-              initialDistance.current = undefined;
-            }
-          }
-        },
-        onPanResponderMove: ({nativeEvent}, gestureState) => {
-          const {touches} = nativeEvent;
-
-          if (layout.current == null) {
-            return;
-          }
-
-          if (movingVelocity.current) {
-            movingVelocity.current = {
-              x: (movingVelocity.current.x + gestureState.vx) / 2,
-              y: (movingVelocity.current.y + gestureState.vy) / 2,
-            };
-          } else {
-            movingVelocity.current = {x: gestureState.vx, y: gestureState.vy};
-          }
-
-          if (touches.length === 2) {
-            if (
-              initialDistance.current &&
-              initialTouchesCenter.current &&
-              layout.current
-            ) {
-              const newScale = Math.max(
-                1,
-                (getDistanceFromTouches(touches) / initialDistance.current) *
-                  lastTransform.current.scale,
-              );
-
-              const {pageX, pageY} = getRelativeTouchesCenterPosition(
-                touches,
-                layout.current,
-                transformCache,
-              );
-
-              scale.setValue(newScale);
-
-              const newTranslateX =
-                pageX - initialTouchesCenter.current.locationX * newScale;
-
-              const newTranslateY =
-                pageY - initialTouchesCenter.current.locationY * newScale;
-
-              translate.setValue({
-                x: allowEmpty?.x
-                  ? newTranslateX
-                  : Math.min(
-                      Math.abs(newTranslateX),
-                      ((newScale - 1) * layout.current.width) / 2,
-                    ) * Math.sign(newTranslateX),
-                y: allowEmpty?.y
-                  ? newTranslateY
-                  : Math.min(
-                      Math.abs(newTranslateY),
-                      ((newScale - 1) * layout.current.height) / 2,
-                    ) * Math.sign(newTranslateY),
-              });
-            } else {
-              initialDistance.current = getDistanceFromTouches(touches);
-
-              initialTouchesCenter.current = getRelativeTouchesCenterPosition(
-                touches,
-                layout.current,
-                transformCache,
-              );
-            }
-          } else if (touches.length === 1) {
-            if (initialDistance.current) {
-              return;
-            }
-
-            const newTranslateX =
-              lastTransform.current.translateX + gestureState.dx;
-
-            const newTranslateY =
-              lastTransform.current.translateY + gestureState.dy;
-
-            translate.setValue({
-              x: newTranslateX,
-              y: newTranslateY,
-            });
-          }
-        },
-        onPanResponderRelease: () => {
-          isResponderActive.current = false;
-
-          if (layout.current == null) {
-            return;
-          }
-
-          const overflowX =
-            !allowEmpty?.x &&
-            Math.abs(transformCache.translateX) >
-              ((transformCache.scale - 1) * layout.current.width) / 2;
-
-          const overflowY =
-            !allowEmpty?.y &&
-            Math.abs(transformCache.translateY) >
-              ((transformCache.scale - 1) * layout.current.height) / 2;
-
-          if (overflowX || overflowY) {
-            if (!fixOverflowAfterRelease) {
-              onRelease?.();
-
-              return;
-            }
-
-            decayingTranslateAnimation.current?.stop();
-            decayingTranslateAnimation.current = undefined;
-
-            const toValue = {
-              x: overflowX
-                ? (Math.sign(transformCache.translateX) *
-                    (transformCache.scale - 1) *
-                    layout.current.width) /
-                  2
-                : transformCache.translateX,
-              y: overflowY
-                ? (Math.sign(transformCache.translateY) *
-                    (transformCache.scale - 1) *
-                    layout.current.height) /
-                  2
-                : transformCache.translateY,
-            };
-
-            Animated.timing(translate, {
-              toValue,
-              duration: 100,
-              useNativeDriver: true,
-            }).start(() => {
-              onRelease?.();
-            });
-          } else {
-            decayingTranslateAnimation.current = Animated.decay(translate, {
-              velocity: movingVelocity.current ?? {x: 0, y: 0},
-              useNativeDriver: true,
-            });
-
-            decayingTranslateAnimation.current.start(() => {
-              decayingTranslateAnimation.current = undefined;
-              onRelease?.();
-            });
-          }
-        },
-      }),
-    );
-  }, [
-    allowEmpty?.x,
-    allowEmpty?.y,
-    fixOverflowAfterRelease,
-    onRelease,
-    scale,
-    transformCache,
-    translate,
-  ]);
-
-  useImperativeHandle(ref, () => ({
-    animatedValue: {scale, translate},
-    setValues: (values) => {
-      values.scale != null && scale.setValue(values.scale);
-      values.translate != null && translate.setValue(values.translate);
-    },
-  }));
-
-  // Warn if style.transform is provided, as it will disable pinch-zoom
-  if (__DEV__ && style?.transform) {
-    console.warn(
-      'PinchZoom: passing transform in style prop will disable pinch-zoom functionality. ' +
-        'Use a wrapper View for custom transforms instead.',
-    );
-  }
-
-  return (
-    <Animated.View
-      // @ts-ignore - ref type issue with NativeMethods
-      ref={(pinchViewRef: NativeMethods | null) => {
-        containerView.current = pinchViewRef;
-      }}
-      style={[
-        style,
-        style?.transform
-          ? {}
-          : {
-              transform: [
-                {translateX: translate.x},
-                {translateY: translate.y},
-                {scale},
-              ],
-            },
-      ]}
-      testID={testID}
-      {...(panResponder?.panHandlers || {})}
-    >
-      {children}
-    </Animated.View>
-  );
-}
-
-const PinchZoomRoot = forwardRef<PinchZoomRef, PinchZoomProps>(PinchZoom);
-
-export {PinchZoomRoot as PinchZoom};

package/src/components/uis/RadioGroup/RadioButton.tsx

@@ -1,188 +0,0 @@
-import React, {useCallback, useEffect, useMemo, useRef, useState, type ReactElement} from 'react';
-import type {
-  LayoutRectangle,
-  StyleProp,
-  TextStyle,
-  ViewStyle,
-} from 'react-native';
-import {Animated, Platform, TouchableOpacity, View} from 'react-native';
-import {styled, css} from 'kstyled';
-
-import {
-  ColoredText,
-  RadioButtonWrapper,
-  RadioWrapper,
-} from '../Styled/StyledComponents';
-
-import type {RadioButtonType} from './RadioGroup';
-
-export type RadioButtonSizeType = 'small' | 'medium' | 'large' | number;
-
-export type RadioButtonStyles = {
-  container?: StyleProp<ViewStyle>;
-  label?: StyleProp<TextStyle>;
-  circleWrapper?: StyleProp<ViewStyle>;
-  circle?: StyleProp<ViewStyle>;
-};
-
-export type RadioButtonProps = {
-  testID?: string;
-  onPress?: () => void;
-  label?: string;
-  labelPosition?: 'left' | 'right';
-  style?: StyleProp<ViewStyle>;
-  styles?: RadioButtonStyles;
-  type?: RadioButtonType;
-  size?: RadioButtonSizeType;
-  disabled?: boolean;
-  selected?: boolean;
-  endElement?: ReactElement;
-  startElement?: ReactElement;
-};
-
-const Container = styled.TouchableOpacity`
-  flex-direction: row;
-  align-items: center;
-`;
-
-const StyledRadioCircle = Animated.createAnimatedComponent(RadioWrapper);
-
-export default function RadioButton({
-  testID,
-  style,
-  styles,
-  endElement,
-  startElement,
-  type = 'primary',
-  size = 'medium',
-  disabled = false,
-  selected,
-  onPress,
-  label,
-  labelPosition = 'right',
-}: RadioButtonProps): ReactElement {
-  const [innerLayout, setInnerLayout] = useState<LayoutRectangle>();
-  const fadeAnim = useRef(new Animated.Value(selected ? 1 : 0)).current;
-  const scaleAnim = useRef(new Animated.Value(selected ? 1 : 0)).current;
-
-  // Memoize layout handler
-  const handleLayout = useCallback((e: any) => {
-    setInnerLayout(e.nativeEvent.layout);
-  }, []);
-
-  // Memoize animation config
-  const animationConfig = useMemo(
-    () => ({
-      useNativeDriver: Platform.select({
-        web: false,
-        default: true,
-      }),
-    }),
-    []
-  );
-
-  useEffect(() => {
-    Animated.parallel([
-      Animated.spring(fadeAnim, {
-        toValue: !selected ? 0 : 1,
-        ...animationConfig,
-      }),
-      Animated.spring(scaleAnim, {
-        toValue: !selected ? 0 : 1,
-        ...animationConfig,
-      }),
-    ]).start();
-  }, [fadeAnim, scaleAnim, selected, animationConfig]);
-
-  // Memoize container styles
-  const containerStyles = useMemo(
-    () => [
-      css`
-        padding-top: 6;
-        padding-bottom: 6;
-        padding-left: ${startElement || (label && labelPosition === 'left')
-          ? 8
-          : 0};
-        padding-right: ${endElement || (label && labelPosition === 'right')
-          ? 8
-          : 0};
-
-        flex-direction: row;
-        align-items: center;
-      `,
-      styles?.container,
-    ],
-    [startElement, endElement, label, labelPosition, styles?.container]
-  );
-
-  // Memoize animated styles with margin and borderRadius
-  const animatedStyles = useMemo(
-    () => [
-      styles?.circle,
-      {
-        margin: innerLayout ? 2 : 0,
-        borderRadius: innerLayout ? innerLayout.width / 2 : 0,
-        opacity: fadeAnim,
-        transform: [{scale: scaleAnim}],
-      },
-    ],
-    [innerLayout, styles?.circle, fadeAnim, scaleAnim]
-  );
-
-  return (
-    <Container
-      activeOpacity={0.9}
-      disabled={disabled}
-      onPress={onPress}
-      style={style}
-      testID={testID}
-    >
-      <View style={containerStyles}>
-        {startElement}
-        {label && labelPosition === 'left' ? (
-          <ColoredText
-            $disabled={!!disabled}
-            $selected={!!selected}
-            $size={size}
-            style={styles?.label}
-            $type={type}
-          >
-            {label}
-          </ColoredText>
-        ) : null}
-        <RadioButtonWrapper
-          $disabled={disabled}
-          $selected={!!selected}
-          $size={size}
-          style={styles?.circleWrapper}
-          $type={type}
-        >
-          <StyledRadioCircle
-            $disabled={!!disabled}
-            onLayout={handleLayout}
-            $selected={!!selected}
-            style={animatedStyles}
-            testID={`circle-${testID}`}
-            $type={type}
-          />
-        </RadioButtonWrapper>
-        {label && labelPosition === 'right' ? (
-          <ColoredText
-            $disabled={!!disabled}
-            $selected={!!selected}
-            $size={size}
-            style={styles?.label}
-            $type={type}
-          >
-            {label}
-          </ColoredText>
-        ) : null}
-        {endElement}
-      </View>
-    </Container>
-  );
-}
-
-// Export memoized component for better performance
-const MemoizedRadioButton = React.memo(RadioButton);
-export {MemoizedRadioButton as RadioButton};