@cdek-it/react-native-ui-kit 0.2.8 → 0.3.0

package/dist/components/Input/InputTextBase/InputTextBase.js

@@ -58,7 +58,9 @@ export const InputTextBase = memo(
         });
     }, [isFocused, labelAnimation, value]);
     const iconSize = useMemo(() => (floatLabel ? styles.iconSizeFloatLabel : styles.iconSize), [floatLabel, styles.iconSize, styles.iconSizeFloatLabel]);
-    useImperativeHandle(propsInputRef, () => (inputRef.current ? { ...inputRef.current, clear } : null), [inputRef, clear]);
+    useImperativeHandle(propsInputRef, () => (inputRef.current
+        ? Object.assign(inputRef.current, { clear })
+        : null), [inputRef, clear]);
     const { makeTestId } = useMakeTestId(otherProps.testID || InputTextBaseTestId.default);
     const [userDefinedSecureTextEntry, setUserDefinedSecureTextEntry] = useState(true);
     const secureTextEntry = useMemo(() => secureTextEntryProp === 'toggleable'

package/dist/components/Skeleton/Skeleton.d.ts

@@ -1,7 +1,6 @@
 import type { ViewProps } from 'react-native-svg/lib/typescript/fabric/utils';
 interface SkeletonProps extends ViewProps {
 }
-export declare const ANIMATION_DURATION = 1200;
 /**
  * Используется для отображения контента в момент загрузки
  * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=5241-3731

package/dist/components/Skeleton/Skeleton.js

@@ -1,24 +1,36 @@
-import { memo, useEffect } from 'react';
+import { memo, useCallback, useContext, useEffect, useRef } from 'react';
 import { View } from 'react-native';
-import Animated, { Easing, interpolate, useAnimatedStyle, useSharedValue, withRepeat, withTiming, } from 'react-native-reanimated';
+import Animated, { useAnimatedStyle, useSharedValue, } from 'react-native-reanimated';
 import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
+import { SkeletonContext } from '../../utils/SkeletonContext';
 import { makeStyles } from '../../utils/makeStyles';
-export const ANIMATION_DURATION = 1200; // ms
 /**
  * Используется для отображения контента в момент загрузки
  * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=5241-3731
  */
 export const Skeleton = memo(({ style, testID, ...rest }) => {
     const styles = useStyles();
-    const animation = useSharedValue(0);
+    const { globalTranslateX, registerSkeleton, unregisterSkeleton, skeletonWidth, } = useContext(SkeletonContext);
+    const skeletonRef = useRef(null);
+    const skeletonX = useSharedValue(0);
+    const onLayout = useCallback(() => {
+        skeletonRef.current?.measure((_x, _y, _width, _height, pageX) => {
+            skeletonX.value = pageX;
+        });
+    }, [skeletonX]);
+    useEffect(() => {
+        registerSkeleton();
+        return unregisterSkeleton;
+    }, [registerSkeleton, unregisterSkeleton]);
     const animatedStyles = useAnimatedStyle(() => ({
-        left: `${interpolate(animation.value, [0, 1], [-100, 100])}%`,
+        transform: [{ translateX: globalTranslateX.value - skeletonX.value }],
     }));
-    useEffect(() => {
-        animation.value = withRepeat(withTiming(1, { duration: ANIMATION_DURATION, easing: Easing.ease }), -1);
-    }, [animation]);
-    return (<View {...rest} style={[styles.container, style]} testID={testID ?? SkeletonTestId.root}>
-      <Animated.View style={[styles.gradientContainer, animatedStyles]} testID={SkeletonTestId.animatedView}>
+    return (<View {...rest} ref={skeletonRef} style={[styles.container, style]} testID={testID ?? SkeletonTestId.root} onLayout={onLayout}>
+      <Animated.View style={[
+            styles.gradientContainer,
+            { width: skeletonWidth },
+            animatedStyles,
+        ]} testID={SkeletonTestId.animatedView}>
         <Svg testID={SkeletonTestId.svg}>
           <Defs>
             <LinearGradient id='gradient' x1='0' x2='1' y1='1' y2='1'>
@@ -38,12 +50,7 @@ const useStyles = makeStyles(({ border, theme }) => ({
         overflow: 'hidden',
         backgroundColor: theme.Misc.Skeleton.skeletonBg,
     },
-    gradientContainer: {
-        position: 'absolute',
-        width: '100%',
-        height: '100%',
-        left: '-100%',
-    },
+    gradientContainer: { position: 'absolute', height: '100%' },
     gradientColor: { backgroundColor: theme.Misc.Skeleton.skeletonAnimationBg },
 }));
 export const SkeletonTestId = {

package/dist/theme/ThemeContext.js

@@ -1,4 +1,5 @@
 import { createContext, useCallback, useMemo, useState, } from 'react';
+import { SkeletonContextProvider } from '../utils/SkeletonContext';
 import { ThemeVariant } from './types';
 const defaultThemeContext = {
     theme: ThemeVariant.Light,
@@ -15,6 +16,6 @@ export const ThemeContextProvider = ({ children, initialTheme = defaultThemeCont
     }, []);
     const contextValue = useMemo(() => ({ theme, fonts, changeTheme }), [theme, fonts, changeTheme]);
     return (<ThemeContext.Provider value={contextValue}>
-      {children}
+      <SkeletonContextProvider>{children}</SkeletonContextProvider>
     </ThemeContext.Provider>);
 };

package/dist/utils/SkeletonContext.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from 'react';
+import { type SharedValue } from 'react-native-reanimated';
+interface SkeletonContextType {
+    globalTranslateX: Readonly<SharedValue<number>>;
+    registerSkeleton: () => void;
+    unregisterSkeleton: () => void;
+    skeletonWidth: number;
+}
+export declare const SkeletonContext: import("react").Context<SkeletonContextType>;
+interface SkeletonContextProviderProps {
+    readonly children: ReactNode;
+}
+export declare const SKELETON_ANIMATION_DURATION = 1200;
+export declare const SkeletonContextProvider: ({ children, }: SkeletonContextProviderProps) => import("react").JSX.Element;
+export {};

package/dist/utils/SkeletonContext.js

@@ -0,0 +1,56 @@
+import { createContext, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { useWindowDimensions } from 'react-native';
+import { Easing, useSharedValue, withRepeat, withTiming, useDerivedValue, interpolate, } from 'react-native-reanimated';
+const emptyFunc = () => {
+    /** Empty */
+};
+const defaultSkeletonContext = {
+    globalTranslateX: {
+        value: 0,
+        addListener: emptyFunc,
+        removeListener: emptyFunc,
+        set: emptyFunc,
+        get: () => 0,
+        modify: emptyFunc,
+    },
+    registerSkeleton: emptyFunc,
+    unregisterSkeleton: emptyFunc,
+    skeletonWidth: 0,
+};
+export const SkeletonContext = createContext(defaultSkeletonContext);
+export const SKELETON_ANIMATION_DURATION = 1200;
+export const SkeletonContextProvider = ({ children, }) => {
+    const [skeletons, setSkeletons] = useState(0);
+    const runningAnimation = useRef(false);
+    const skeletonAnimation = useSharedValue(0);
+    const { width: screenWidth } = useWindowDimensions();
+    const globalTranslateX = useDerivedValue(() => interpolate(skeletonAnimation.value, [0, 1], [-screenWidth, screenWidth]));
+    const registerSkeleton = useCallback(() => {
+        setSkeletons((current) => current + 1);
+    }, []);
+    const unregisterSkeleton = useCallback(() => {
+        setSkeletons((current) => (current > 0 ? current - 1 : 0));
+    }, []);
+    useEffect(() => {
+        if (skeletons > 0 && !runningAnimation.current) {
+            skeletonAnimation.value = withRepeat(withTiming(1, {
+                duration: SKELETON_ANIMATION_DURATION,
+                easing: Easing.ease,
+            }), -1);
+            runningAnimation.current = true;
+        }
+        else if (skeletons === 0 && runningAnimation.current) {
+            skeletonAnimation.value = 0;
+            runningAnimation.current = false;
+        }
+    }, [skeletonAnimation, skeletons]);
+    const contextValue = useMemo(() => ({
+        globalTranslateX,
+        registerSkeleton,
+        unregisterSkeleton,
+        skeletonWidth: screenWidth,
+    }), [globalTranslateX, registerSkeleton, unregisterSkeleton, screenWidth]);
+    return (<SkeletonContext.Provider value={contextValue}>
+      {children}
+    </SkeletonContext.Provider>);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdek-it/react-native-ui-kit",
-  "version": "0.2.8",
+  "version": "0.3.0",
   "description": "UI kit на основе Prime Faces, Prime Flex для React Native",
   "license": "MIT",
   "homepage": "https://developer.cdek.ru/design-system",
@@ -15,11 +15,11 @@
     "ui-kit",
     "uikit"
   ],
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
-    "access": "public"
+    "access": "public",
+    "types": "./dist/index.d.ts",
+    "main": "./dist/index.js"
   },
   "files": [
     "dist"
@@ -38,7 +38,8 @@
     "prettier:check": "prettier . --check",
     "prettier:fix": "prettier . --write",
     "prettier:watch": "onchange . -- prettier --write --ignore-unknown \"{{changed}}\"",
-    "release": "release-it"
+    "release": "release-it",
+    "pod-install": "bundle exec pod install --project-directory=ios"
   },
   "devDependencies": {
     "@babel/core": "7.28.3",
@@ -144,13 +145,6 @@
     }
   },
   "expo": {
-    "autolinking": {
-      "ios": {
-        "searchPaths": [
-          "./node_modules"
-        ]
-      }
-    },
     "doctor": {
       "appConfigFieldsNotSyncedCheck": {
         "enabled": false
@@ -162,5 +156,7 @@
         "listUnknownPackages": false
       }
     }
-  }
+  },
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.js"
 }