@unif/react-native-design 0.33.1 → 0.34.0

package/src/components/ui/BorderBeam/normalizeBorderBeam.ts

@@ -1,58 +0,0 @@
-export type NormalizedBorderBeam = {
-  duration: number;
-  lineWidth: number;
-  size: number;
-  borderRadius: number;
-};
-
-export const BORDER_BEAM_DEFAULTS: NormalizedBorderBeam = {
-  duration: 2400,
-  lineWidth: 2,
-  size: 40,
-  borderRadius: 12,
-};
-
-type BorderBeamNumbers = Partial<NormalizedBorderBeam>;
-
-const normalizeNumber = (
-  value: number | undefined,
-  fallback: number,
-  min: number,
-  max: number,
-  allowZero = false
-): number => {
-  if (
-    typeof value !== 'number' ||
-    !Number.isFinite(value) ||
-    value < 0 ||
-    (!allowZero && value === 0)
-  ) {
-    return fallback;
-  }
-  return Math.min(max, Math.max(min, value));
-};
-
-export function normalizeBorderBeam(input: BorderBeamNumbers) {
-  return {
-    duration: normalizeNumber(
-      input.duration,
-      BORDER_BEAM_DEFAULTS.duration,
-      300,
-      60_000
-    ),
-    lineWidth: normalizeNumber(
-      input.lineWidth,
-      BORDER_BEAM_DEFAULTS.lineWidth,
-      0.5,
-      8
-    ),
-    size: normalizeNumber(input.size, BORDER_BEAM_DEFAULTS.size, 8, 1_000),
-    borderRadius: normalizeNumber(
-      input.borderRadius,
-      BORDER_BEAM_DEFAULTS.borderRadius,
-      0,
-      1_000,
-      true
-    ),
-  };
-}

package/src/components/ui/BorderBeam/shared.ts

@@ -1,47 +0,0 @@
-export type BorderBeamLayout = Readonly<{ width: number; height: number }>;
-
-export const EMPTY_BORDER_BEAM_LAYOUT: BorderBeamLayout = {
-  width: 0,
-  height: 0,
-};
-
-const BORDER_BEAM_TRAIL = [
-  { lengthRatio: 1, opacity: 0.12 },
-  { lengthRatio: 0.75, opacity: 0.24 },
-  { lengthRatio: 0.5, opacity: 0.42 },
-  { lengthRatio: 0.25, opacity: 0.88 },
-] as const;
-
-/**
- * 把单色线段拆成由淡到亮的叠加尾迹。
- *
- * 所有层共享同一动画相位，较短且更亮的层叠在前端，形成接近渐变的彗星头；
- * 同时避免 SVG gradient 在 Native/Web 上的实现差异。
- */
-export function borderBeamTrail(beamLength: number) {
-  const safeLength = Math.max(0, beamLength);
-  return BORDER_BEAM_TRAIL.map(({ lengthRatio, opacity }) => ({
-    length: safeLength * lengthRatio,
-    opacity,
-  }));
-}
-
-export function borderBeamGeometry(input: {
-  layout: BorderBeamLayout;
-  lineWidth: number;
-  size: number;
-  borderRadius: number;
-}) {
-  const { layout, lineWidth } = input;
-  const rectWidth = Math.max(0, layout.width - lineWidth);
-  const rectHeight = Math.max(0, layout.height - lineWidth);
-  const perimeter = Math.max(0, 2 * (rectWidth + rectHeight));
-  const beamLength = Math.min(input.size, perimeter / 2);
-  return {
-    beamLength,
-    perimeter,
-    rectHeight,
-    rectWidth,
-    radius: Math.min(input.borderRadius, rectWidth / 2, rectHeight / 2),
-  };
-}

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

@@ -1,16 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export const styles = StyleSheet.create({
-  container: {
-    position: 'relative',
-  },
-  visual: {
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    zIndex: 1,
-    elevation: 1,
-  },
-});

package/src/components/ui/BorderBeam/types.ts

@@ -1,23 +0,0 @@
-import type { ReactNode } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
-
-export type BorderBeamProps = {
-  /** 被流光描边包围的内容。 */
-  children: ReactNode;
-  /** 是否显示并运行动画，默认 true。 */
-  active?: boolean;
-  /** 流光颜色，默认主题 primary。 */
-  color?: string;
-  /** 绕边一周的时长（毫秒），默认 2400。 */
-  duration?: number;
-  /** 描边宽度，默认 2。 */
-  lineWidth?: number;
-  /** 流光段长度（布局单位），默认 40。 */
-  size?: number;
-  /** 圆角半径，默认 radius.md。 */
-  borderRadius?: number;
-  /** 外层布局样式。 */
-  style?: StyleProp<ViewStyle>;
-  /** E2E / 测试定位。 */
-  testID?: string;
-};