@lark-apaas/client-toolkit 1.2.11 → 1.2.13

package/lib/apis/hooks/useScrollReveal.d.ts

@@ -0,0 +1 @@
+export * from '../../hooks/useScrollReveal';

package/lib/apis/hooks/useScrollReveal.js

@@ -0,0 +1 @@
+export * from "../../hooks/useScrollReveal.js";

package/lib/apis/utils/scopedStorage.d.ts

@@ -0,0 +1 @@
+export { scopedStorage } from '../../utils/scopedStorage';

package/lib/apis/utils/scopedStorage.js

@@ -0,0 +1,2 @@
+import { scopedStorage } from "../../utils/scopedStorage.js";
+export { scopedStorage };

package/lib/hooks/index.d.ts

@@ -2,3 +2,4 @@ export * from './useAppInfo';
 export * from './useCurrentUserProfile';
 export * from './useIsMobile';
 export * from './useLogout';
+export * from './useScrollReveal';

package/lib/hooks/index.js

@@ -2,3 +2,4 @@ export * from "./useAppInfo.js";
 export * from "./useCurrentUserProfile.js";
 export * from "./useIsMobile.js";
 export * from "./useLogout.js";
+export * from "./useScrollReveal.js";

package/lib/hooks/useScrollReveal.d.ts

@@ -0,0 +1,61 @@
+import { RefObject } from 'react';
+/**
+ * Options for useScrollReveal hook
+ */
+export interface UseScrollRevealOptions<T extends HTMLElement = HTMLElement> {
+    /** Ref to the container element to scope the query (default: document.body) */
+    containerRef?: RefObject<T | null>;
+    /** IntersectionObserver threshold - element visibility percentage to trigger (default: 0.1) */
+    threshold?: number;
+    /** IntersectionObserver rootMargin - margin around root (default: '0px 0px -50px 0px') */
+    rootMargin?: string;
+    /** CSS class to add when element becomes visible (default: 'visible') */
+    visibleClass?: string;
+    /** CSS selector for elements to observe (default: '.scroll-reveal') */
+    selector?: string;
+}
+/**
+ * Hook to enable scroll reveal animations using IntersectionObserver.
+ *
+ * Observes elements with the specified selector and adds a visibility class
+ * when they enter the viewport.
+ *
+ * @param options - Configuration options
+ *
+ * @example
+ * ```tsx
+ * // Usage without parameters (queries entire document.body)
+ * import { useScrollReveal } from '@lark-apaas/client-toolkit/hooks/useScrollReveal';
+ *
+ * function MyComponent() {
+ *   useScrollReveal();
+ *
+ *   return <div className="scroll-reveal">I will fade in on scroll!</div>;
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Usage with container ref
+ * import { useRef } from 'react';
+ * import { useScrollReveal } from '@lark-apaas/client-toolkit/hooks/useScrollReveal';
+ *
+ * function MyComponent() {
+ *   const containerRef = useRef<HTMLDivElement>(null);
+ *   useScrollReveal({ containerRef });
+ *
+ *   return (
+ *     <div ref={containerRef}>
+ *       <div className="scroll-reveal">I will fade in on scroll!</div>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Usage with custom options
+ * useScrollReveal({ threshold: 0.2, visibleClass: 'animate-in' });
+ * ```
+ */
+export declare function useScrollReveal<T extends HTMLElement = HTMLElement>(options?: UseScrollRevealOptions<T>): void;

package/lib/hooks/useScrollReveal.js

@@ -0,0 +1,37 @@
+import { useEffect } from "react";
+const DEFAULT_OPTIONS = {
+    threshold: 0.1,
+    rootMargin: '0px 0px -50px 0px',
+    visibleClass: 'visible',
+    selector: '.scroll-reveal'
+};
+function useScrollReveal(options) {
+    const { containerRef, threshold, rootMargin, visibleClass, selector } = {
+        ...DEFAULT_OPTIONS,
+        ...options
+    };
+    useEffect(()=>{
+        const container = containerRef?.current ?? document.body;
+        if (!container) return;
+        const observer = new IntersectionObserver((entries)=>{
+            entries.forEach((entry)=>{
+                if (entry.isIntersecting) entry.target.classList.add(visibleClass);
+            });
+        }, {
+            threshold,
+            rootMargin
+        });
+        const elements = container.querySelectorAll(selector);
+        elements.forEach((el)=>observer.observe(el));
+        return ()=>{
+            observer.disconnect();
+        };
+    }, [
+        containerRef,
+        threshold,
+        rootMargin,
+        visibleClass,
+        selector
+    ]);
+}
+export { useScrollReveal };

package/lib/utils/scopedStorage.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 按 appId 隔离的 localStorage 封装
+ * API 与原生 localStorage 保持一致
+ */
+export declare const scopedStorage: Storage;

package/lib/utils/scopedStorage.js

@@ -0,0 +1,46 @@
+import { getAppId } from "./getAppId.js";
+function getPrefix() {
+    const appId = getAppId(window.location.pathname);
+    const namespace = appId || '__global__';
+    return `__miaoda_${namespace}__:`;
+}
+function getScopedKeys() {
+    const prefix = getPrefix();
+    const keys = [];
+    for(let i = 0; i < localStorage.length; i++){
+        const key = localStorage.key(i);
+        if (key && key.startsWith(prefix)) keys.push(key.substring(prefix.length));
+    }
+    return keys;
+}
+const scopedStorage = {
+    getItem (key) {
+        const prefixedKey = getPrefix() + key;
+        return localStorage.getItem(prefixedKey);
+    },
+    setItem (key, value) {
+        const prefixedKey = getPrefix() + key;
+        localStorage.setItem(prefixedKey, value);
+    },
+    removeItem (key) {
+        const prefixedKey = getPrefix() + key;
+        localStorage.removeItem(prefixedKey);
+    },
+    clear () {
+        const prefix = getPrefix();
+        const keysToRemove = [];
+        for(let i = 0; i < localStorage.length; i++){
+            const key = localStorage.key(i);
+            if (key && key.startsWith(prefix)) keysToRemove.push(key);
+        }
+        keysToRemove.forEach((key)=>localStorage.removeItem(key));
+    },
+    key (index) {
+        const keys = getScopedKeys();
+        return keys[index] || null;
+    },
+    get length () {
+        return getScopedKeys().length;
+    }
+};
+export { scopedStorage };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/client-toolkit",
-  "version": "1.2.11",
+  "version": "1.2.13",
   "types": "./lib/index.d.ts",
   "main": "./lib/index.js",
   "files": [