@unif/react-native-design 0.19.0 → 0.21.0

package/lib/module/components/ui/Pulse/usePulse.web.js

@@ -1,76 +0,0 @@
-"use strict";
-
-import { useEffect, useState } from 'react';
-import { usePrefersReducedMotion } from "../../../theme/index.js";
-/**
- * Web 端 usePulse —— RN-Web 上 reanimated 4 + worklets 0.9.x 的 useAnimatedStyle
- * 链路会抛 `Object.keys(undefined)` TypeError(animation frame 每帧打印),pulse 卡死
- * 在初始值。
- *
- * native 端走 usePulse.ts(reanimated worklet) 不动。
- *
- * [M-19] 实现方案 —— CSS transition 降级(零 rAF JS 帧):
- *   rnw 0.21 的 animationKeyframes 字段类型侧尚未稳定暴露;
- *   且 <style> 注入在 Spinner.web.tsx 已有安全注释(不拼外部输入)——为保持
- *   一致性,Pulse 侧不再注入第二处 <style> 标签,故采用 CSS transition 降级:
- *
- *   - 返回 { opacity, transition } 作为 RN style(RN-Web 把 transition 透传 DOM)
- *   - setInterval 每隔 `duration` ms 在 from/to 两档切换 opacity ——
- *     setState 频率从原来的 ~60fps 降到 1 次/duration ms(参 ToastHost.web.tsx)
- *   - CSS transition 负责两档之间的视觉补间,JS 侧零插值
- *   - reduce-motion:静止于 `to`(完全显示),骨架/圆点静态呈现
- */
-export function usePulse({
-  from = 0.6,
-  to = 1,
-  duration = 700,
-  delay = 0
-} = {}) {
-  const reduced = usePrefersReducedMotion();
-  const [opacity, setOpacity] = useState(from);
-  useEffect(() => {
-    // reduce-motion:不脉冲,直接停在完全显示(to),骨架/圆点静态呈现。
-    if (reduced) {
-      setOpacity(to);
-      return;
-    }
-
-    // CSS transition 模式:setInterval 只负责在 from/to 两档翻转(1 次/duration ms),
-    // 浏览器 CSS transition 负责补间 —— 与原方案 rAF 每帧 setState 相比
-    // setState 频率从 ~60fps 降到 1/(duration/1000) fps,无 JS 插值开销。
-    let timer = null;
-    let current = from;
-    const start = () => {
-      timer = setInterval(() => {
-        current = current === from ? to : from;
-        setOpacity(current);
-      }, duration);
-    };
-    if (delay > 0) {
-      const delayTimer = setTimeout(start, delay);
-      return () => {
-        clearTimeout(delayTimer);
-        if (timer != null) clearInterval(timer);
-      };
-    }
-    start();
-    return () => {
-      if (timer != null) clearInterval(timer);
-    };
-  }, [from, to, duration, delay, reduced]);
-  if (reduced) {
-    return {
-      opacity: to
-    };
-  }
-
-  // RN-Web 把 transition 字段透传到 DOM style,实现 CSS 级平滑过渡。
-  // RN style typedef 无 transition 字段,cast any 绕过 TS strict
-  // (实际只在 web bundle 命中,DOM div 原样接受该字段)。
-
-  return {
-    opacity,
-    transition: `opacity ${duration}ms ease-in-out`
-  };
-}
-//# sourceMappingURL=usePulse.web.js.map

package/lib/module/components/ui/Pulse/usePulse.web.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["useEffect","useState","usePrefersReducedMotion","usePulse","from","to","duration","delay","reduced","opacity","setOpacity","timer","current","start","setInterval","delayTimer","setTimeout","clearTimeout","clearInterval","transition"],"sourceRoot":"../../../../../src","sources":["components/ui/Pulse/usePulse.web.ts"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,uBAAuB,QAAQ,yBAAgB;AAGxD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,QAAQA,CAAC;EACvBC,IAAI,GAAG,GAAG;EACVC,EAAE,GAAG,CAAC;EACNC,QAAQ,GAAG,GAAG;EACdC,KAAK,GAAG;AACI,CAAC,GAAG,CAAC,CAAC,EAAE;EACpB,MAAMC,OAAO,GAAGN,uBAAuB,CAAC,CAAC;EACzC,MAAM,CAACO,OAAO,EAAEC,UAAU,CAAC,GAAGT,QAAQ,CAACG,IAAI,CAAC;EAE5CJ,SAAS,CAAC,MAAM;IACd;IACA,IAAIQ,OAAO,EAAE;MACXE,UAAU,CAACL,EAAE,CAAC;MACd;IACF;;IAEA;IACA;IACA;IACA,IAAIM,KAA4C,GAAG,IAAI;IACvD,IAAIC,OAAO,GAAGR,IAAI;IAElB,MAAMS,KAAK,GAAGA,CAAA,KAAM;MAClBF,KAAK,GAAGG,WAAW,CAAC,MAAM;QACxBF,OAAO,GAAGA,OAAO,KAAKR,IAAI,GAAGC,EAAE,GAAGD,IAAI;QACtCM,UAAU,CAACE,OAAO,CAAC;MACrB,CAAC,EAAEN,QAAQ,CAAC;IACd,CAAC;IAED,IAAIC,KAAK,GAAG,CAAC,EAAE;MACb,MAAMQ,UAAU,GAAGC,UAAU,CAACH,KAAK,EAAEN,KAAK,CAAC;MAC3C,OAAO,MAAM;QACXU,YAAY,CAACF,UAAU,CAAC;QACxB,IAAIJ,KAAK,IAAI,IAAI,EAAEO,aAAa,CAACP,KAAK,CAAC;MACzC,CAAC;IACH;IACAE,KAAK,CAAC,CAAC;IACP,OAAO,MAAM;MACX,IAAIF,KAAK,IAAI,IAAI,EAAEO,aAAa,CAACP,KAAK,CAAC;IACzC,CAAC;EACH,CAAC,EAAE,CAACP,IAAI,EAAEC,EAAE,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,OAAO,CAAC,CAAC;EAExC,IAAIA,OAAO,EAAE;IACX,OAAO;MAAEC,OAAO,EAAEJ;IAAG,CAAC;EACxB;;EAEA;EACA;EACA;;EAEA,OAAO;IAAEI,OAAO;IAAEU,UAAU,EAAE,WAAWb,QAAQ;EAAiB,CAAC;AACrE","ignoreList":[]}

package/lib/typescript/src/components/ui/PasswordInput/styles.d.ts

@@ -1,7 +0,0 @@
-/** eye Pressable hit area 微间距 4px。 */
-export declare const styles: Readonly<{
-    eyeBtn: {
-        paddingHorizontal: number;
-    };
-}>;
-//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/src/components/ui/PasswordInput/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/PasswordInput/styles.ts"],"names":[],"mappings":"AAGA,sCAAsC;AACtC,eAAO,MAAM,MAAM;;;;EAEjB,CAAC"}

package/lib/typescript/src/components/ui/Pulse/usePulse.web.d.ts

@@ -1,21 +0,0 @@
-import type { PulseOptions } from './types';
-/**
- * Web 端 usePulse —— RN-Web 上 reanimated 4 + worklets 0.9.x 的 useAnimatedStyle
- * 链路会抛 `Object.keys(undefined)` TypeError(animation frame 每帧打印),pulse 卡死
- * 在初始值。
- *
- * native 端走 usePulse.ts(reanimated worklet) 不动。
- *
- * [M-19] 实现方案 —— CSS transition 降级(零 rAF JS 帧):
- *   rnw 0.21 的 animationKeyframes 字段类型侧尚未稳定暴露;
- *   且 <style> 注入在 Spinner.web.tsx 已有安全注释(不拼外部输入)——为保持
- *   一致性,Pulse 侧不再注入第二处 <style> 标签,故采用 CSS transition 降级:
- *
- *   - 返回 { opacity, transition } 作为 RN style(RN-Web 把 transition 透传 DOM)
- *   - setInterval 每隔 `duration` ms 在 from/to 两档切换 opacity ——
- *     setState 频率从原来的 ~60fps 降到 1 次/duration ms(参 ToastHost.web.tsx)
- *   - CSS transition 负责两档之间的视觉补间,JS 侧零插值
- *   - reduce-motion:静止于 `to`(完全显示),骨架/圆点静态呈现
- */
-export declare function usePulse({ from, to, duration, delay, }?: PulseOptions): any;
-//# sourceMappingURL=usePulse.web.d.ts.map

package/lib/typescript/src/components/ui/Pulse/usePulse.web.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"usePulse.web.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Pulse/usePulse.web.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,IAAU,EACV,EAAM,EACN,QAAc,EACd,KAAS,GACV,GAAE,YAAiB,OA8CnB"}

package/src/components/ui/PasswordInput/styles.ts

@@ -1,7 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { space } from '../../../theme';
-
-/** eye Pressable hit area 微间距 4px。 */
-export const styles = StyleSheet.create({
-  eyeBtn: { paddingHorizontal: space['1'] },
-});

package/src/components/ui/Pulse/usePulse.web.ts

@@ -1,74 +0,0 @@
-import { useEffect, useState } from 'react';
-import { usePrefersReducedMotion } from '../../../theme';
-import type { PulseOptions } from './types';
-
-/**
- * Web 端 usePulse —— RN-Web 上 reanimated 4 + worklets 0.9.x 的 useAnimatedStyle
- * 链路会抛 `Object.keys(undefined)` TypeError(animation frame 每帧打印),pulse 卡死
- * 在初始值。
- *
- * native 端走 usePulse.ts(reanimated worklet) 不动。
- *
- * [M-19] 实现方案 —— CSS transition 降级(零 rAF JS 帧):
- *   rnw 0.21 的 animationKeyframes 字段类型侧尚未稳定暴露;
- *   且 <style> 注入在 Spinner.web.tsx 已有安全注释(不拼外部输入)——为保持
- *   一致性,Pulse 侧不再注入第二处 <style> 标签,故采用 CSS transition 降级:
- *
- *   - 返回 { opacity, transition } 作为 RN style(RN-Web 把 transition 透传 DOM)
- *   - setInterval 每隔 `duration` ms 在 from/to 两档切换 opacity ——
- *     setState 频率从原来的 ~60fps 降到 1 次/duration ms(参 ToastHost.web.tsx)
- *   - CSS transition 负责两档之间的视觉补间,JS 侧零插值
- *   - reduce-motion:静止于 `to`(完全显示),骨架/圆点静态呈现
- */
-export function usePulse({
-  from = 0.6,
-  to = 1,
-  duration = 700,
-  delay = 0,
-}: PulseOptions = {}) {
-  const reduced = usePrefersReducedMotion();
-  const [opacity, setOpacity] = useState(from);
-
-  useEffect(() => {
-    // reduce-motion:不脉冲,直接停在完全显示(to),骨架/圆点静态呈现。
-    if (reduced) {
-      setOpacity(to);
-      return;
-    }
-
-    // CSS transition 模式:setInterval 只负责在 from/to 两档翻转(1 次/duration ms),
-    // 浏览器 CSS transition 负责补间 —— 与原方案 rAF 每帧 setState 相比
-    // setState 频率从 ~60fps 降到 1/(duration/1000) fps,无 JS 插值开销。
-    let timer: ReturnType<typeof setInterval> | null = null;
-    let current = from;
-
-    const start = () => {
-      timer = setInterval(() => {
-        current = current === from ? to : from;
-        setOpacity(current);
-      }, duration);
-    };
-
-    if (delay > 0) {
-      const delayTimer = setTimeout(start, delay);
-      return () => {
-        clearTimeout(delayTimer);
-        if (timer != null) clearInterval(timer);
-      };
-    }
-    start();
-    return () => {
-      if (timer != null) clearInterval(timer);
-    };
-  }, [from, to, duration, delay, reduced]);
-
-  if (reduced) {
-    return { opacity: to } as any;
-  }
-
-  // RN-Web 把 transition 字段透传到 DOM style,实现 CSS 级平滑过渡。
-  // RN style typedef 无 transition 字段,cast any 绕过 TS strict
-  // (实际只在 web bundle 命中,DOM div 原样接受该字段)。
-
-  return { opacity, transition: `opacity ${duration}ms ease-in-out` } as any;
-}