@unif/react-native-design 0.33.1 → 0.34.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/module/components/ui/ActionMenuContent/ActionMenuContent.js +97 -0
- package/lib/module/components/ui/ActionMenuContent/ActionMenuContent.js.map +1 -0
- package/lib/module/components/ui/ActionMenuContent/index.js +4 -0
- package/lib/module/components/ui/ActionMenuContent/index.js.map +1 -0
- package/lib/module/components/ui/ActionMenuContent/styles.js +54 -0
- package/lib/module/components/ui/ActionMenuContent/styles.js.map +1 -0
- package/lib/module/components/ui/ActionMenuContent/types.js.map +1 -0
- package/lib/module/components/ui/Button/ButtonBase.js +10 -2
- package/lib/module/components/ui/Button/ButtonBase.js.map +1 -1
- package/lib/module/components/ui/IconButton/IconButton.js +5 -1
- package/lib/module/components/ui/IconButton/IconButton.js.map +1 -1
- package/lib/module/components/ui/ImagePreview/ImagePreview.js +200 -0
- package/lib/module/components/ui/ImagePreview/ImagePreview.js.map +1 -0
- package/lib/module/components/ui/ImagePreview/constants.js +5 -0
- package/lib/module/components/ui/ImagePreview/constants.js.map +1 -0
- package/lib/module/components/ui/ImagePreview/index.js +4 -0
- package/lib/module/components/ui/ImagePreview/index.js.map +1 -0
- package/lib/module/components/ui/ImagePreview/styles.js +55 -0
- package/lib/module/components/ui/ImagePreview/styles.js.map +1 -0
- package/lib/module/components/ui/ImagePreview/types.js +4 -0
- package/lib/module/components/ui/ImagePreview/types.js.map +1 -0
- package/lib/module/components/ui/Sheet/Sheet.js +40 -0
- package/lib/module/components/ui/Sheet/Sheet.js.map +1 -0
- package/lib/module/components/ui/Sheet/index.js +4 -0
- package/lib/module/components/ui/Sheet/index.js.map +1 -0
- package/lib/module/components/ui/Sheet/styles.js +41 -0
- package/lib/module/components/ui/Sheet/styles.js.map +1 -0
- package/lib/module/components/ui/Sheet/types.js +4 -0
- package/lib/module/components/ui/Sheet/types.js.map +1 -0
- package/lib/module/components/ui/SmsField/SmsField.js +40 -0
- package/lib/module/components/ui/SmsField/SmsField.js.map +1 -0
- package/lib/module/components/ui/SmsField/index.js +4 -0
- package/lib/module/components/ui/SmsField/index.js.map +1 -0
- package/lib/module/components/ui/SmsField/types.js +4 -0
- package/lib/module/components/ui/SmsField/types.js.map +1 -0
- package/lib/module/components/ui/TextEntryContent/TextEntryContent.js +60 -0
- package/lib/module/components/ui/TextEntryContent/TextEntryContent.js.map +1 -0
- package/lib/module/components/ui/TextEntryContent/index.js +4 -0
- package/lib/module/components/ui/TextEntryContent/index.js.map +1 -0
- package/lib/module/components/ui/TextEntryContent/styles.js +29 -0
- package/lib/module/components/ui/TextEntryContent/styles.js.map +1 -0
- package/lib/module/components/ui/TextEntryContent/types.js +4 -0
- package/lib/module/components/ui/TextEntryContent/types.js.map +1 -0
- package/lib/module/components/ui/index.js +5 -1
- package/lib/module/components/ui/index.js.map +1 -1
- package/lib/module/icons/data.js +87 -1
- package/lib/module/icons/data.js.map +1 -1
- package/lib/typescript/src/components/ui/ActionMenuContent/ActionMenuContent.d.ts +4 -0
- package/lib/typescript/src/components/ui/ActionMenuContent/ActionMenuContent.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/ActionMenuContent/index.d.ts +3 -0
- package/lib/typescript/src/components/ui/ActionMenuContent/index.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/ActionMenuContent/styles.d.ts +51 -0
- package/lib/typescript/src/components/ui/ActionMenuContent/styles.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/ActionMenuContent/types.d.ts +25 -0
- package/lib/typescript/src/components/ui/ActionMenuContent/types.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Button/ButtonBase.d.ts +3 -1
- package/lib/typescript/src/components/ui/Button/ButtonBase.d.ts.map +1 -1
- package/lib/typescript/src/components/ui/IconButton/IconButton.d.ts +1 -1
- package/lib/typescript/src/components/ui/IconButton/IconButton.d.ts.map +1 -1
- package/lib/typescript/src/components/ui/IconButton/types.d.ts +4 -0
- package/lib/typescript/src/components/ui/IconButton/types.d.ts.map +1 -1
- package/lib/typescript/src/components/ui/ImagePreview/ImagePreview.d.ts +3 -0
- package/lib/typescript/src/components/ui/ImagePreview/ImagePreview.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/ImagePreview/constants.d.ts +3 -0
- package/lib/typescript/src/components/ui/ImagePreview/constants.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/ImagePreview/index.d.ts +3 -0
- package/lib/typescript/src/components/ui/ImagePreview/index.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/ImagePreview/styles.d.ts +56 -0
- package/lib/typescript/src/components/ui/ImagePreview/styles.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/ImagePreview/types.d.ts +33 -0
- package/lib/typescript/src/components/ui/ImagePreview/types.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Sheet/Sheet.d.ts +4 -0
- package/lib/typescript/src/components/ui/Sheet/Sheet.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Sheet/index.d.ts +3 -0
- package/lib/typescript/src/components/ui/Sheet/index.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Sheet/styles.d.ts +38 -0
- package/lib/typescript/src/components/ui/Sheet/styles.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Sheet/types.d.ts +13 -0
- package/lib/typescript/src/components/ui/Sheet/types.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/SmsField/SmsField.d.ts +4 -0
- package/lib/typescript/src/components/ui/SmsField/SmsField.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/SmsField/index.d.ts +3 -0
- package/lib/typescript/src/components/ui/SmsField/index.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/SmsField/types.d.ts +12 -0
- package/lib/typescript/src/components/ui/SmsField/types.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/TextEntryContent/TextEntryContent.d.ts +4 -0
- package/lib/typescript/src/components/ui/TextEntryContent/TextEntryContent.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/TextEntryContent/index.d.ts +3 -0
- package/lib/typescript/src/components/ui/TextEntryContent/index.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/TextEntryContent/styles.d.ts +26 -0
- package/lib/typescript/src/components/ui/TextEntryContent/styles.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/TextEntryContent/types.d.ts +18 -0
- package/lib/typescript/src/components/ui/TextEntryContent/types.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/index.d.ts +10 -2
- package/lib/typescript/src/components/ui/index.d.ts.map +1 -1
- package/lib/typescript/src/icons/data.d.ts +1 -1
- package/lib/typescript/src/icons/data.d.ts.map +1 -1
- package/lib/typescript/type-tests/content-api.d.ts +2 -0
- package/lib/typescript/type-tests/content-api.d.ts.map +1 -0
- package/package.json +1 -1
- package/src/components/ui/ActionMenuContent/ActionMenuContent.tsx +118 -0
- package/src/components/ui/ActionMenuContent/index.ts +6 -0
- package/src/components/ui/ActionMenuContent/styles.ts +47 -0
- package/src/components/ui/ActionMenuContent/types.ts +27 -0
- package/src/components/ui/Button/ButtonBase.tsx +11 -2
- package/src/components/ui/IconButton/IconButton.tsx +9 -1
- package/src/components/ui/IconButton/types.ts +4 -0
- package/src/components/ui/ImagePreview/ImagePreview.tsx +243 -0
- package/src/components/ui/ImagePreview/constants.ts +2 -0
- package/src/components/ui/ImagePreview/index.ts +6 -0
- package/src/components/ui/ImagePreview/styles.ts +48 -0
- package/src/components/ui/ImagePreview/types.ts +37 -0
- package/src/components/ui/Sheet/Sheet.tsx +43 -0
- package/src/components/ui/Sheet/index.ts +2 -0
- package/src/components/ui/Sheet/styles.ts +40 -0
- package/src/components/ui/Sheet/types.ts +14 -0
- package/src/components/ui/SmsField/SmsField.tsx +40 -0
- package/src/components/ui/SmsField/index.ts +2 -0
- package/src/components/ui/SmsField/types.ts +15 -0
- package/src/components/ui/TextEntryContent/TextEntryContent.tsx +56 -0
- package/src/components/ui/TextEntryContent/index.ts +2 -0
- package/src/components/ui/TextEntryContent/styles.ts +17 -0
- package/src/components/ui/TextEntryContent/types.ts +18 -0
- package/src/components/ui/index.ts +18 -2
- package/src/icons/data.ts +134 -0
- package/lib/module/components/ui/BorderBeam/BorderBeam.js +0 -102
- package/lib/module/components/ui/BorderBeam/BorderBeam.js.map +0 -1
- package/lib/module/components/ui/BorderBeam/BorderBeam.web.js +0 -108
- package/lib/module/components/ui/BorderBeam/BorderBeam.web.js.map +0 -1
- package/lib/module/components/ui/BorderBeam/index.js +0 -4
- package/lib/module/components/ui/BorderBeam/index.js.map +0 -1
- package/lib/module/components/ui/BorderBeam/normalizeBorderBeam.js +0 -23
- package/lib/module/components/ui/BorderBeam/normalizeBorderBeam.js.map +0 -1
- package/lib/module/components/ui/BorderBeam/shared.js +0 -54
- package/lib/module/components/ui/BorderBeam/shared.js.map +0 -1
- package/lib/module/components/ui/BorderBeam/styles.js +0 -18
- package/lib/module/components/ui/BorderBeam/styles.js.map +0 -1
- package/lib/module/components/ui/BorderBeam/types.js.map +0 -1
- package/lib/typescript/src/components/ui/BorderBeam/BorderBeam.d.ts +0 -10
- package/lib/typescript/src/components/ui/BorderBeam/BorderBeam.d.ts.map +0 -1
- package/lib/typescript/src/components/ui/BorderBeam/BorderBeam.web.d.ts +0 -5
- package/lib/typescript/src/components/ui/BorderBeam/BorderBeam.web.d.ts.map +0 -1
- package/lib/typescript/src/components/ui/BorderBeam/index.d.ts +0 -3
- package/lib/typescript/src/components/ui/BorderBeam/index.d.ts.map +0 -1
- package/lib/typescript/src/components/ui/BorderBeam/normalizeBorderBeam.d.ts +0 -16
- package/lib/typescript/src/components/ui/BorderBeam/normalizeBorderBeam.d.ts.map +0 -1
- package/lib/typescript/src/components/ui/BorderBeam/shared.d.ts +0 -28
- package/lib/typescript/src/components/ui/BorderBeam/shared.d.ts.map +0 -1
- package/lib/typescript/src/components/ui/BorderBeam/styles.d.ts +0 -15
- package/lib/typescript/src/components/ui/BorderBeam/styles.d.ts.map +0 -1
- package/lib/typescript/src/components/ui/BorderBeam/types.d.ts +0 -23
- package/lib/typescript/src/components/ui/BorderBeam/types.d.ts.map +0 -1
- package/src/components/ui/BorderBeam/BorderBeam.tsx +0 -130
- package/src/components/ui/BorderBeam/BorderBeam.web.tsx +0 -127
- package/src/components/ui/BorderBeam/index.ts +0 -2
- package/src/components/ui/BorderBeam/normalizeBorderBeam.ts +0 -58
- package/src/components/ui/BorderBeam/shared.ts +0 -47
- package/src/components/ui/BorderBeam/styles.ts +0 -16
- package/src/components/ui/BorderBeam/types.ts +0 -23
- /package/lib/module/components/ui/{BorderBeam → ActionMenuContent}/types.js +0 -0
|
@@ -1,108 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
import React, { useEffect, useRef, useState } from 'react';
|
|
4
|
-
import { View } from 'react-native';
|
|
5
|
-
import Svg, { Rect } from 'react-native-svg';
|
|
6
|
-
import { radius, useColors, usePrefersReducedMotion } from "../../../theme/index.js";
|
|
7
|
-
import { A11Y_HIDDEN_PROPS } from "../shared/a11y.js";
|
|
8
|
-
import { normalizeBorderBeam } from "./normalizeBorderBeam.js";
|
|
9
|
-
import { borderBeamGeometry, borderBeamTrail, EMPTY_BORDER_BEAM_LAYOUT } from "./shared.js";
|
|
10
|
-
import { styles } from "./styles.js";
|
|
11
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
12
|
-
const KEYFRAMES_ID = 'unif-border-beam-keyframes';
|
|
13
|
-
const win = globalThis;
|
|
14
|
-
function ensureKeyframes() {
|
|
15
|
-
if (typeof win.document === 'undefined') return;
|
|
16
|
-
if (win.document.getElementById(KEYFRAMES_ID)) return;
|
|
17
|
-
const sheet = win.document.createElement('style');
|
|
18
|
-
sheet.id = KEYFRAMES_ID;
|
|
19
|
-
sheet.textContent = '@keyframes unif-border-beam-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: calc(-1 * var(--unif-border-beam-path)); } }';
|
|
20
|
-
win.document.head.appendChild(sheet);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
/** Web 版用 CSS keyframes 插值,JS 只在布局或 props 变化时更新一次。 */
|
|
24
|
-
export function BorderBeam({
|
|
25
|
-
children,
|
|
26
|
-
active = true,
|
|
27
|
-
color,
|
|
28
|
-
duration,
|
|
29
|
-
lineWidth,
|
|
30
|
-
size,
|
|
31
|
-
borderRadius = radius.md,
|
|
32
|
-
style,
|
|
33
|
-
testID
|
|
34
|
-
}) {
|
|
35
|
-
const colors = useColors();
|
|
36
|
-
const reducedMotion = usePrefersReducedMotion();
|
|
37
|
-
const [layout, setLayout] = useState(EMPTY_BORDER_BEAM_LAYOUT);
|
|
38
|
-
const rectRefs = useRef([]);
|
|
39
|
-
const normalized = normalizeBorderBeam({
|
|
40
|
-
duration,
|
|
41
|
-
lineWidth,
|
|
42
|
-
size,
|
|
43
|
-
borderRadius
|
|
44
|
-
});
|
|
45
|
-
const geometry = borderBeamGeometry({
|
|
46
|
-
layout,
|
|
47
|
-
...normalized
|
|
48
|
-
});
|
|
49
|
-
const trail = borderBeamTrail(geometry.beamLength);
|
|
50
|
-
const showVisual = active && !reducedMotion && geometry.perimeter > 0;
|
|
51
|
-
useEffect(() => {
|
|
52
|
-
if (!showVisual) return;
|
|
53
|
-
ensureKeyframes();
|
|
54
|
-
const nodes = rectRefs.current.filter(node => node?.style);
|
|
55
|
-
if (nodes.length === 0) return;
|
|
56
|
-
nodes.forEach(node => {
|
|
57
|
-
node.style.setProperty('--unif-border-beam-path', `${geometry.perimeter}px`);
|
|
58
|
-
node.style.animation = `unif-border-beam-flow ${normalized.duration}ms linear infinite`;
|
|
59
|
-
});
|
|
60
|
-
return () => {
|
|
61
|
-
nodes.forEach(node => {
|
|
62
|
-
node.style.animation = '';
|
|
63
|
-
});
|
|
64
|
-
};
|
|
65
|
-
}, [geometry.perimeter, normalized.duration, showVisual]);
|
|
66
|
-
const handleLayout = event => {
|
|
67
|
-
const width = Math.max(0, event.nativeEvent.layout.width);
|
|
68
|
-
const height = Math.max(0, event.nativeEvent.layout.height);
|
|
69
|
-
setLayout(current => current.width === width && current.height === height ? current : {
|
|
70
|
-
width,
|
|
71
|
-
height
|
|
72
|
-
});
|
|
73
|
-
};
|
|
74
|
-
return /*#__PURE__*/_jsxs(View, {
|
|
75
|
-
onLayout: handleLayout,
|
|
76
|
-
style: [styles.container, {
|
|
77
|
-
borderRadius: normalized.borderRadius
|
|
78
|
-
}, style],
|
|
79
|
-
testID: testID,
|
|
80
|
-
children: [children, showVisual ? /*#__PURE__*/_jsx(View, {
|
|
81
|
-
pointerEvents: "none",
|
|
82
|
-
style: styles.visual,
|
|
83
|
-
...A11Y_HIDDEN_PROPS,
|
|
84
|
-
children: /*#__PURE__*/_jsx(Svg, {
|
|
85
|
-
width: layout.width,
|
|
86
|
-
height: layout.height,
|
|
87
|
-
children: trail.map((layer, index) => /*#__PURE__*/_jsx(Rect, {
|
|
88
|
-
ref: node => {
|
|
89
|
-
rectRefs.current[index] = node;
|
|
90
|
-
},
|
|
91
|
-
x: normalized.lineWidth / 2,
|
|
92
|
-
y: normalized.lineWidth / 2,
|
|
93
|
-
width: geometry.rectWidth,
|
|
94
|
-
height: geometry.rectHeight,
|
|
95
|
-
rx: geometry.radius,
|
|
96
|
-
ry: geometry.radius,
|
|
97
|
-
fill: "none",
|
|
98
|
-
stroke: color ?? colors.primary,
|
|
99
|
-
strokeOpacity: layer.opacity,
|
|
100
|
-
strokeWidth: normalized.lineWidth,
|
|
101
|
-
strokeLinecap: "round",
|
|
102
|
-
strokeDasharray: [layer.length, Math.max(0, geometry.perimeter - layer.length)]
|
|
103
|
-
}, `${layer.length}-${layer.opacity}`))
|
|
104
|
-
})
|
|
105
|
-
}) : null]
|
|
106
|
-
});
|
|
107
|
-
}
|
|
108
|
-
//# sourceMappingURL=BorderBeam.web.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React","useEffect","useRef","useState","View","Svg","Rect","radius","useColors","usePrefersReducedMotion","A11Y_HIDDEN_PROPS","normalizeBorderBeam","borderBeamGeometry","borderBeamTrail","EMPTY_BORDER_BEAM_LAYOUT","styles","jsx","_jsx","jsxs","_jsxs","KEYFRAMES_ID","win","globalThis","ensureKeyframes","document","getElementById","sheet","createElement","id","textContent","head","appendChild","BorderBeam","children","active","color","duration","lineWidth","size","borderRadius","md","style","testID","colors","reducedMotion","layout","setLayout","rectRefs","normalized","geometry","trail","beamLength","showVisual","perimeter","nodes","current","filter","node","length","forEach","setProperty","animation","handleLayout","event","width","Math","max","nativeEvent","height","onLayout","container","pointerEvents","visual","map","layer","index","ref","x","y","rectWidth","rectHeight","rx","ry","fill","stroke","primary","strokeOpacity","opacity","strokeWidth","strokeLinecap","strokeDasharray"],"sourceRoot":"../../../../../src","sources":["components/ui/BorderBeam/BorderBeam.web.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["BorderBeam"],"sourceRoot":"../../../../../src","sources":["components/ui/BorderBeam/index.ts"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,cAAc","ignoreList":[]}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
export const BORDER_BEAM_DEFAULTS = {
|
|
4
|
-
duration: 2400,
|
|
5
|
-
lineWidth: 2,
|
|
6
|
-
size: 40,
|
|
7
|
-
borderRadius: 12
|
|
8
|
-
};
|
|
9
|
-
const normalizeNumber = (value, fallback, min, max, allowZero = false) => {
|
|
10
|
-
if (typeof value !== 'number' || !Number.isFinite(value) || value < 0 || !allowZero && value === 0) {
|
|
11
|
-
return fallback;
|
|
12
|
-
}
|
|
13
|
-
return Math.min(max, Math.max(min, value));
|
|
14
|
-
};
|
|
15
|
-
export function normalizeBorderBeam(input) {
|
|
16
|
-
return {
|
|
17
|
-
duration: normalizeNumber(input.duration, BORDER_BEAM_DEFAULTS.duration, 300, 60_000),
|
|
18
|
-
lineWidth: normalizeNumber(input.lineWidth, BORDER_BEAM_DEFAULTS.lineWidth, 0.5, 8),
|
|
19
|
-
size: normalizeNumber(input.size, BORDER_BEAM_DEFAULTS.size, 8, 1_000),
|
|
20
|
-
borderRadius: normalizeNumber(input.borderRadius, BORDER_BEAM_DEFAULTS.borderRadius, 0, 1_000, true)
|
|
21
|
-
};
|
|
22
|
-
}
|
|
23
|
-
//# sourceMappingURL=normalizeBorderBeam.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["BORDER_BEAM_DEFAULTS","duration","lineWidth","size","borderRadius","normalizeNumber","value","fallback","min","max","allowZero","Number","isFinite","Math","normalizeBorderBeam","input"],"sourceRoot":"../../../../../src","sources":["components/ui/BorderBeam/normalizeBorderBeam.ts"],"mappings":";;AAOA,OAAO,MAAMA,oBAA0C,GAAG;EACxDC,QAAQ,EAAE,IAAI;EACdC,SAAS,EAAE,CAAC;EACZC,IAAI,EAAE,EAAE;EACRC,YAAY,EAAE;AAChB,CAAC;AAID,MAAMC,eAAe,GAAGA,CACtBC,KAAyB,EACzBC,QAAgB,EAChBC,GAAW,EACXC,GAAW,EACXC,SAAS,GAAG,KAAK,KACN;EACX,IACE,OAAOJ,KAAK,KAAK,QAAQ,IACzB,CAACK,MAAM,CAACC,QAAQ,CAACN,KAAK,CAAC,IACvBA,KAAK,GAAG,CAAC,IACR,CAACI,SAAS,IAAIJ,KAAK,KAAK,CAAE,EAC3B;IACA,OAAOC,QAAQ;EACjB;EACA,OAAOM,IAAI,CAACL,GAAG,CAACC,GAAG,EAAEI,IAAI,CAACJ,GAAG,CAACD,GAAG,EAAEF,KAAK,CAAC,CAAC;AAC5C,CAAC;AAED,OAAO,SAASQ,mBAAmBA,CAACC,KAAwB,EAAE;EAC5D,OAAO;IACLd,QAAQ,EAAEI,eAAe,CACvBU,KAAK,CAACd,QAAQ,EACdD,oBAAoB,CAACC,QAAQ,EAC7B,GAAG,EACH,MACF,CAAC;IACDC,SAAS,EAAEG,eAAe,CACxBU,KAAK,CAACb,SAAS,EACfF,oBAAoB,CAACE,SAAS,EAC9B,GAAG,EACH,CACF,CAAC;IACDC,IAAI,EAAEE,eAAe,CAACU,KAAK,CAACZ,IAAI,EAAEH,oBAAoB,CAACG,IAAI,EAAE,CAAC,EAAE,KAAK,CAAC;IACtEC,YAAY,EAAEC,eAAe,CAC3BU,KAAK,CAACX,YAAY,EAClBJ,oBAAoB,CAACI,YAAY,EACjC,CAAC,EACD,KAAK,EACL,IACF;EACF,CAAC;AACH","ignoreList":[]}
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
export const EMPTY_BORDER_BEAM_LAYOUT = {
|
|
4
|
-
width: 0,
|
|
5
|
-
height: 0
|
|
6
|
-
};
|
|
7
|
-
const BORDER_BEAM_TRAIL = [{
|
|
8
|
-
lengthRatio: 1,
|
|
9
|
-
opacity: 0.12
|
|
10
|
-
}, {
|
|
11
|
-
lengthRatio: 0.75,
|
|
12
|
-
opacity: 0.24
|
|
13
|
-
}, {
|
|
14
|
-
lengthRatio: 0.5,
|
|
15
|
-
opacity: 0.42
|
|
16
|
-
}, {
|
|
17
|
-
lengthRatio: 0.25,
|
|
18
|
-
opacity: 0.88
|
|
19
|
-
}];
|
|
20
|
-
|
|
21
|
-
/**
|
|
22
|
-
* 把单色线段拆成由淡到亮的叠加尾迹。
|
|
23
|
-
*
|
|
24
|
-
* 所有层共享同一动画相位,较短且更亮的层叠在前端,形成接近渐变的彗星头;
|
|
25
|
-
* 同时避免 SVG gradient 在 Native/Web 上的实现差异。
|
|
26
|
-
*/
|
|
27
|
-
export function borderBeamTrail(beamLength) {
|
|
28
|
-
const safeLength = Math.max(0, beamLength);
|
|
29
|
-
return BORDER_BEAM_TRAIL.map(({
|
|
30
|
-
lengthRatio,
|
|
31
|
-
opacity
|
|
32
|
-
}) => ({
|
|
33
|
-
length: safeLength * lengthRatio,
|
|
34
|
-
opacity
|
|
35
|
-
}));
|
|
36
|
-
}
|
|
37
|
-
export function borderBeamGeometry(input) {
|
|
38
|
-
const {
|
|
39
|
-
layout,
|
|
40
|
-
lineWidth
|
|
41
|
-
} = input;
|
|
42
|
-
const rectWidth = Math.max(0, layout.width - lineWidth);
|
|
43
|
-
const rectHeight = Math.max(0, layout.height - lineWidth);
|
|
44
|
-
const perimeter = Math.max(0, 2 * (rectWidth + rectHeight));
|
|
45
|
-
const beamLength = Math.min(input.size, perimeter / 2);
|
|
46
|
-
return {
|
|
47
|
-
beamLength,
|
|
48
|
-
perimeter,
|
|
49
|
-
rectHeight,
|
|
50
|
-
rectWidth,
|
|
51
|
-
radius: Math.min(input.borderRadius, rectWidth / 2, rectHeight / 2)
|
|
52
|
-
};
|
|
53
|
-
}
|
|
54
|
-
//# sourceMappingURL=shared.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["EMPTY_BORDER_BEAM_LAYOUT","width","height","BORDER_BEAM_TRAIL","lengthRatio","opacity","borderBeamTrail","beamLength","safeLength","Math","max","map","length","borderBeamGeometry","input","layout","lineWidth","rectWidth","rectHeight","perimeter","min","size","radius","borderRadius"],"sourceRoot":"../../../../../src","sources":["components/ui/BorderBeam/shared.ts"],"mappings":";;AAEA,OAAO,MAAMA,wBAA0C,GAAG;EACxDC,KAAK,EAAE,CAAC;EACRC,MAAM,EAAE;AACV,CAAC;AAED,MAAMC,iBAAiB,GAAG,CACxB;EAAEC,WAAW,EAAE,CAAC;EAAEC,OAAO,EAAE;AAAK,CAAC,EACjC;EAAED,WAAW,EAAE,IAAI;EAAEC,OAAO,EAAE;AAAK,CAAC,EACpC;EAAED,WAAW,EAAE,GAAG;EAAEC,OAAO,EAAE;AAAK,CAAC,EACnC;EAAED,WAAW,EAAE,IAAI;EAAEC,OAAO,EAAE;AAAK,CAAC,CAC5B;;AAEV;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,eAAeA,CAACC,UAAkB,EAAE;EAClD,MAAMC,UAAU,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEH,UAAU,CAAC;EAC1C,OAAOJ,iBAAiB,CAACQ,GAAG,CAAC,CAAC;IAAEP,WAAW;IAAEC;EAAQ,CAAC,MAAM;IAC1DO,MAAM,EAAEJ,UAAU,GAAGJ,WAAW;IAChCC;EACF,CAAC,CAAC,CAAC;AACL;AAEA,OAAO,SAASQ,kBAAkBA,CAACC,KAKlC,EAAE;EACD,MAAM;IAAEC,MAAM;IAAEC;EAAU,CAAC,GAAGF,KAAK;EACnC,MAAMG,SAAS,GAAGR,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEK,MAAM,CAACd,KAAK,GAAGe,SAAS,CAAC;EACvD,MAAME,UAAU,GAAGT,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEK,MAAM,CAACb,MAAM,GAAGc,SAAS,CAAC;EACzD,MAAMG,SAAS,GAAGV,IAAI,CAACC,GAAG,CAAC,CAAC,EAAE,CAAC,IAAIO,SAAS,GAAGC,UAAU,CAAC,CAAC;EAC3D,MAAMX,UAAU,GAAGE,IAAI,CAACW,GAAG,CAACN,KAAK,CAACO,IAAI,EAAEF,SAAS,GAAG,CAAC,CAAC;EACtD,OAAO;IACLZ,UAAU;IACVY,SAAS;IACTD,UAAU;IACVD,SAAS;IACTK,MAAM,EAAEb,IAAI,CAACW,GAAG,CAACN,KAAK,CAACS,YAAY,EAAEN,SAAS,GAAG,CAAC,EAAEC,UAAU,GAAG,CAAC;EACpE,CAAC;AACH","ignoreList":[]}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
import { StyleSheet } from 'react-native';
|
|
4
|
-
export const styles = StyleSheet.create({
|
|
5
|
-
container: {
|
|
6
|
-
position: 'relative'
|
|
7
|
-
},
|
|
8
|
-
visual: {
|
|
9
|
-
position: 'absolute',
|
|
10
|
-
top: 0,
|
|
11
|
-
right: 0,
|
|
12
|
-
bottom: 0,
|
|
13
|
-
left: 0,
|
|
14
|
-
zIndex: 1,
|
|
15
|
-
elevation: 1
|
|
16
|
-
}
|
|
17
|
-
});
|
|
18
|
-
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["StyleSheet","styles","create","container","position","visual","top","right","bottom","left","zIndex","elevation"],"sourceRoot":"../../../../../src","sources":["components/ui/BorderBeam/styles.ts"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,cAAc;AAEzC,OAAO,MAAMC,MAAM,GAAGD,UAAU,CAACE,MAAM,CAAC;EACtCC,SAAS,EAAE;IACTC,QAAQ,EAAE;EACZ,CAAC;EACDC,MAAM,EAAE;IACND,QAAQ,EAAE,UAAU;IACpBE,GAAG,EAAE,CAAC;IACNC,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE,CAAC;IACTC,IAAI,EAAE,CAAC;IACPC,MAAM,EAAE,CAAC;IACTC,SAAS,EAAE;EACb;AACF,CAAC,CAAC","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["components/ui/BorderBeam/types.ts"],"mappings":"","ignoreList":[]}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { BorderBeamProps } from './types';
|
|
3
|
-
/**
|
|
4
|
-
* 沿内容边缘循环移动的装饰性流光描边。
|
|
5
|
-
*
|
|
6
|
-
* 组件不承载加载、错误或焦点语义;业务状态仍由调用方自己的可访问元素表达。
|
|
7
|
-
* 系统开启「减弱动态效果」时隐藏流光,只保留原内容。
|
|
8
|
-
*/
|
|
9
|
-
export declare function BorderBeam({ children, active, color, duration, lineWidth, size, borderRadius, style, testID, }: BorderBeamProps): React.JSX.Element;
|
|
10
|
-
//# sourceMappingURL=BorderBeam.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BorderBeam.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/BorderBeam/BorderBeam.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAuBnD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAI/C;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,MAAa,EACb,KAAK,EACL,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,YAAwB,EACxB,KAAK,EACL,MAAM,GACP,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAsFrC"}
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { BorderBeamProps } from './types';
|
|
3
|
-
/** Web 版用 CSS keyframes 插值,JS 只在布局或 props 变化时更新一次。 */
|
|
4
|
-
export declare function BorderBeam({ children, active, color, duration, lineWidth, size, borderRadius, style, testID, }: BorderBeamProps): React.JSX.Element;
|
|
5
|
-
//# sourceMappingURL=BorderBeam.web.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BorderBeam.web.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/BorderBeam/BorderBeam.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAc3D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAe/C,sDAAsD;AACtD,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,MAAa,EACb,KAAK,EACL,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,YAAwB,EACxB,KAAK,EACL,MAAM,GACP,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAsFrC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/BorderBeam/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
export type NormalizedBorderBeam = {
|
|
2
|
-
duration: number;
|
|
3
|
-
lineWidth: number;
|
|
4
|
-
size: number;
|
|
5
|
-
borderRadius: number;
|
|
6
|
-
};
|
|
7
|
-
export declare const BORDER_BEAM_DEFAULTS: NormalizedBorderBeam;
|
|
8
|
-
type BorderBeamNumbers = Partial<NormalizedBorderBeam>;
|
|
9
|
-
export declare function normalizeBorderBeam(input: BorderBeamNumbers): {
|
|
10
|
-
duration: number;
|
|
11
|
-
lineWidth: number;
|
|
12
|
-
size: number;
|
|
13
|
-
borderRadius: number;
|
|
14
|
-
};
|
|
15
|
-
export {};
|
|
16
|
-
//# sourceMappingURL=normalizeBorderBeam.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"normalizeBorderBeam.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/BorderBeam/normalizeBorderBeam.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,oBAKlC,CAAC;AAEF,KAAK,iBAAiB,GAAG,OAAO,CAAC,oBAAoB,CAAC,CAAC;AAoBvD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,iBAAiB;;;;;EAuB3D"}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
export type BorderBeamLayout = Readonly<{
|
|
2
|
-
width: number;
|
|
3
|
-
height: number;
|
|
4
|
-
}>;
|
|
5
|
-
export declare const EMPTY_BORDER_BEAM_LAYOUT: BorderBeamLayout;
|
|
6
|
-
/**
|
|
7
|
-
* 把单色线段拆成由淡到亮的叠加尾迹。
|
|
8
|
-
*
|
|
9
|
-
* 所有层共享同一动画相位,较短且更亮的层叠在前端,形成接近渐变的彗星头;
|
|
10
|
-
* 同时避免 SVG gradient 在 Native/Web 上的实现差异。
|
|
11
|
-
*/
|
|
12
|
-
export declare function borderBeamTrail(beamLength: number): {
|
|
13
|
-
length: number;
|
|
14
|
-
opacity: 0.12 | 0.24 | 0.42 | 0.88;
|
|
15
|
-
}[];
|
|
16
|
-
export declare function borderBeamGeometry(input: {
|
|
17
|
-
layout: BorderBeamLayout;
|
|
18
|
-
lineWidth: number;
|
|
19
|
-
size: number;
|
|
20
|
-
borderRadius: number;
|
|
21
|
-
}): {
|
|
22
|
-
beamLength: number;
|
|
23
|
-
perimeter: number;
|
|
24
|
-
rectHeight: number;
|
|
25
|
-
rectWidth: number;
|
|
26
|
-
radius: number;
|
|
27
|
-
};
|
|
28
|
-
//# sourceMappingURL=shared.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/BorderBeam/shared.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAE3E,eAAO,MAAM,wBAAwB,EAAE,gBAGtC,CAAC;AASF;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,UAAU,EAAE,MAAM;;;IAMjD;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE;IACxC,MAAM,EAAE,gBAAgB,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;CACtB;;;;;;EAaA"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export declare const styles: Readonly<{
|
|
2
|
-
container: {
|
|
3
|
-
position: "relative";
|
|
4
|
-
};
|
|
5
|
-
visual: {
|
|
6
|
-
position: "absolute";
|
|
7
|
-
top: number;
|
|
8
|
-
right: number;
|
|
9
|
-
bottom: number;
|
|
10
|
-
left: number;
|
|
11
|
-
zIndex: number;
|
|
12
|
-
elevation: number;
|
|
13
|
-
};
|
|
14
|
-
}>;
|
|
15
|
-
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/BorderBeam/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM;;;;;;;;;;;;;EAajB,CAAC"}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import type { ReactNode } from 'react';
|
|
2
|
-
import type { StyleProp, ViewStyle } from 'react-native';
|
|
3
|
-
export type BorderBeamProps = {
|
|
4
|
-
/** 被流光描边包围的内容。 */
|
|
5
|
-
children: ReactNode;
|
|
6
|
-
/** 是否显示并运行动画,默认 true。 */
|
|
7
|
-
active?: boolean;
|
|
8
|
-
/** 流光颜色,默认主题 primary。 */
|
|
9
|
-
color?: string;
|
|
10
|
-
/** 绕边一周的时长(毫秒),默认 2400。 */
|
|
11
|
-
duration?: number;
|
|
12
|
-
/** 描边宽度,默认 2。 */
|
|
13
|
-
lineWidth?: number;
|
|
14
|
-
/** 流光段长度(布局单位),默认 40。 */
|
|
15
|
-
size?: number;
|
|
16
|
-
/** 圆角半径,默认 radius.md。 */
|
|
17
|
-
borderRadius?: number;
|
|
18
|
-
/** 外层布局样式。 */
|
|
19
|
-
style?: StyleProp<ViewStyle>;
|
|
20
|
-
/** E2E / 测试定位。 */
|
|
21
|
-
testID?: string;
|
|
22
|
-
};
|
|
23
|
-
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/BorderBeam/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,MAAM,eAAe,GAAG;IAC5B,kBAAkB;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,yBAAyB;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc;IACd,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,kBAAkB;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC"}
|
|
@@ -1,130 +0,0 @@
|
|
|
1
|
-
import React, { useEffect, useState } from 'react';
|
|
2
|
-
import type { LayoutChangeEvent } from 'react-native';
|
|
3
|
-
import { View } from 'react-native';
|
|
4
|
-
import Animated, {
|
|
5
|
-
cancelAnimation,
|
|
6
|
-
Easing,
|
|
7
|
-
ReduceMotion,
|
|
8
|
-
useAnimatedProps,
|
|
9
|
-
useSharedValue,
|
|
10
|
-
withRepeat,
|
|
11
|
-
withTiming,
|
|
12
|
-
} from 'react-native-reanimated';
|
|
13
|
-
import Svg, { Rect } from 'react-native-svg';
|
|
14
|
-
|
|
15
|
-
import { radius, useColors, usePrefersReducedMotion } from '../../../theme';
|
|
16
|
-
import { A11Y_HIDDEN_PROPS } from '../shared/a11y';
|
|
17
|
-
import { normalizeBorderBeam } from './normalizeBorderBeam';
|
|
18
|
-
import {
|
|
19
|
-
borderBeamGeometry,
|
|
20
|
-
borderBeamTrail,
|
|
21
|
-
EMPTY_BORDER_BEAM_LAYOUT,
|
|
22
|
-
} from './shared';
|
|
23
|
-
import { styles } from './styles';
|
|
24
|
-
import type { BorderBeamProps } from './types';
|
|
25
|
-
|
|
26
|
-
const AnimatedRect = Animated.createAnimatedComponent(Rect);
|
|
27
|
-
|
|
28
|
-
/**
|
|
29
|
-
* 沿内容边缘循环移动的装饰性流光描边。
|
|
30
|
-
*
|
|
31
|
-
* 组件不承载加载、错误或焦点语义;业务状态仍由调用方自己的可访问元素表达。
|
|
32
|
-
* 系统开启「减弱动态效果」时隐藏流光,只保留原内容。
|
|
33
|
-
*/
|
|
34
|
-
export function BorderBeam({
|
|
35
|
-
children,
|
|
36
|
-
active = true,
|
|
37
|
-
color,
|
|
38
|
-
duration,
|
|
39
|
-
lineWidth,
|
|
40
|
-
size,
|
|
41
|
-
borderRadius = radius.md,
|
|
42
|
-
style,
|
|
43
|
-
testID,
|
|
44
|
-
}: BorderBeamProps): React.JSX.Element {
|
|
45
|
-
const colors = useColors();
|
|
46
|
-
const reducedMotion = usePrefersReducedMotion();
|
|
47
|
-
const [layout, setLayout] = useState(EMPTY_BORDER_BEAM_LAYOUT);
|
|
48
|
-
const normalized = normalizeBorderBeam({
|
|
49
|
-
duration,
|
|
50
|
-
lineWidth,
|
|
51
|
-
size,
|
|
52
|
-
borderRadius,
|
|
53
|
-
});
|
|
54
|
-
const geometry = borderBeamGeometry({ layout, ...normalized });
|
|
55
|
-
const trail = borderBeamTrail(geometry.beamLength);
|
|
56
|
-
const dashOffset = useSharedValue(0);
|
|
57
|
-
const showVisual = active && !reducedMotion && geometry.perimeter > 0;
|
|
58
|
-
|
|
59
|
-
useEffect(() => {
|
|
60
|
-
cancelAnimation(dashOffset);
|
|
61
|
-
dashOffset.value = 0;
|
|
62
|
-
if (!showVisual) return;
|
|
63
|
-
dashOffset.value = withRepeat(
|
|
64
|
-
withTiming(-geometry.perimeter, {
|
|
65
|
-
duration: normalized.duration,
|
|
66
|
-
easing: Easing.linear,
|
|
67
|
-
reduceMotion: ReduceMotion.System,
|
|
68
|
-
}),
|
|
69
|
-
-1,
|
|
70
|
-
false,
|
|
71
|
-
undefined,
|
|
72
|
-
ReduceMotion.System
|
|
73
|
-
);
|
|
74
|
-
return () => cancelAnimation(dashOffset);
|
|
75
|
-
}, [dashOffset, geometry.perimeter, normalized.duration, showVisual]);
|
|
76
|
-
|
|
77
|
-
const animatedProps = useAnimatedProps(() => ({
|
|
78
|
-
strokeDashoffset: dashOffset.value,
|
|
79
|
-
}));
|
|
80
|
-
const handleLayout = (event: LayoutChangeEvent): void => {
|
|
81
|
-
const width = Math.max(0, event.nativeEvent.layout.width);
|
|
82
|
-
const height = Math.max(0, event.nativeEvent.layout.height);
|
|
83
|
-
setLayout((current) =>
|
|
84
|
-
current.width === width && current.height === height
|
|
85
|
-
? current
|
|
86
|
-
: { width, height }
|
|
87
|
-
);
|
|
88
|
-
};
|
|
89
|
-
|
|
90
|
-
return (
|
|
91
|
-
<View
|
|
92
|
-
onLayout={handleLayout}
|
|
93
|
-
style={[
|
|
94
|
-
styles.container,
|
|
95
|
-
{ borderRadius: normalized.borderRadius },
|
|
96
|
-
style,
|
|
97
|
-
]}
|
|
98
|
-
testID={testID}
|
|
99
|
-
>
|
|
100
|
-
{children}
|
|
101
|
-
{showVisual ? (
|
|
102
|
-
<View pointerEvents="none" style={styles.visual} {...A11Y_HIDDEN_PROPS}>
|
|
103
|
-
<Svg width={layout.width} height={layout.height}>
|
|
104
|
-
{trail.map((layer) => (
|
|
105
|
-
<AnimatedRect
|
|
106
|
-
key={`${layer.length}-${layer.opacity}`}
|
|
107
|
-
animatedProps={animatedProps}
|
|
108
|
-
x={normalized.lineWidth / 2}
|
|
109
|
-
y={normalized.lineWidth / 2}
|
|
110
|
-
width={geometry.rectWidth}
|
|
111
|
-
height={geometry.rectHeight}
|
|
112
|
-
rx={geometry.radius}
|
|
113
|
-
ry={geometry.radius}
|
|
114
|
-
fill="none"
|
|
115
|
-
stroke={color ?? colors.primary}
|
|
116
|
-
strokeOpacity={layer.opacity}
|
|
117
|
-
strokeWidth={normalized.lineWidth}
|
|
118
|
-
strokeLinecap="round"
|
|
119
|
-
strokeDasharray={[
|
|
120
|
-
layer.length,
|
|
121
|
-
Math.max(0, geometry.perimeter - layer.length),
|
|
122
|
-
]}
|
|
123
|
-
/>
|
|
124
|
-
))}
|
|
125
|
-
</Svg>
|
|
126
|
-
</View>
|
|
127
|
-
) : null}
|
|
128
|
-
</View>
|
|
129
|
-
);
|
|
130
|
-
}
|
|
@@ -1,127 +0,0 @@
|
|
|
1
|
-
import React, { useEffect, useRef, useState } from 'react';
|
|
2
|
-
import type { LayoutChangeEvent } from 'react-native';
|
|
3
|
-
import { View } from 'react-native';
|
|
4
|
-
import Svg, { Rect } from 'react-native-svg';
|
|
5
|
-
|
|
6
|
-
import { radius, useColors, usePrefersReducedMotion } from '../../../theme';
|
|
7
|
-
import { A11Y_HIDDEN_PROPS } from '../shared/a11y';
|
|
8
|
-
import { normalizeBorderBeam } from './normalizeBorderBeam';
|
|
9
|
-
import {
|
|
10
|
-
borderBeamGeometry,
|
|
11
|
-
borderBeamTrail,
|
|
12
|
-
EMPTY_BORDER_BEAM_LAYOUT,
|
|
13
|
-
} from './shared';
|
|
14
|
-
import { styles } from './styles';
|
|
15
|
-
import type { BorderBeamProps } from './types';
|
|
16
|
-
|
|
17
|
-
const KEYFRAMES_ID = 'unif-border-beam-keyframes';
|
|
18
|
-
const win: any = globalThis as any;
|
|
19
|
-
|
|
20
|
-
function ensureKeyframes(): void {
|
|
21
|
-
if (typeof win.document === 'undefined') return;
|
|
22
|
-
if (win.document.getElementById(KEYFRAMES_ID)) return;
|
|
23
|
-
const sheet = win.document.createElement('style');
|
|
24
|
-
sheet.id = KEYFRAMES_ID;
|
|
25
|
-
sheet.textContent =
|
|
26
|
-
'@keyframes unif-border-beam-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: calc(-1 * var(--unif-border-beam-path)); } }';
|
|
27
|
-
win.document.head.appendChild(sheet);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
/** Web 版用 CSS keyframes 插值,JS 只在布局或 props 变化时更新一次。 */
|
|
31
|
-
export function BorderBeam({
|
|
32
|
-
children,
|
|
33
|
-
active = true,
|
|
34
|
-
color,
|
|
35
|
-
duration,
|
|
36
|
-
lineWidth,
|
|
37
|
-
size,
|
|
38
|
-
borderRadius = radius.md,
|
|
39
|
-
style,
|
|
40
|
-
testID,
|
|
41
|
-
}: BorderBeamProps): React.JSX.Element {
|
|
42
|
-
const colors = useColors();
|
|
43
|
-
const reducedMotion = usePrefersReducedMotion();
|
|
44
|
-
const [layout, setLayout] = useState(EMPTY_BORDER_BEAM_LAYOUT);
|
|
45
|
-
const rectRefs = useRef<any[]>([]);
|
|
46
|
-
const normalized = normalizeBorderBeam({
|
|
47
|
-
duration,
|
|
48
|
-
lineWidth,
|
|
49
|
-
size,
|
|
50
|
-
borderRadius,
|
|
51
|
-
});
|
|
52
|
-
const geometry = borderBeamGeometry({ layout, ...normalized });
|
|
53
|
-
const trail = borderBeamTrail(geometry.beamLength);
|
|
54
|
-
const showVisual = active && !reducedMotion && geometry.perimeter > 0;
|
|
55
|
-
|
|
56
|
-
useEffect(() => {
|
|
57
|
-
if (!showVisual) return;
|
|
58
|
-
ensureKeyframes();
|
|
59
|
-
const nodes = rectRefs.current.filter((node) => node?.style);
|
|
60
|
-
if (nodes.length === 0) return;
|
|
61
|
-
nodes.forEach((node) => {
|
|
62
|
-
node.style.setProperty(
|
|
63
|
-
'--unif-border-beam-path',
|
|
64
|
-
`${geometry.perimeter}px`
|
|
65
|
-
);
|
|
66
|
-
node.style.animation = `unif-border-beam-flow ${normalized.duration}ms linear infinite`;
|
|
67
|
-
});
|
|
68
|
-
return () => {
|
|
69
|
-
nodes.forEach((node) => {
|
|
70
|
-
node.style.animation = '';
|
|
71
|
-
});
|
|
72
|
-
};
|
|
73
|
-
}, [geometry.perimeter, normalized.duration, showVisual]);
|
|
74
|
-
|
|
75
|
-
const handleLayout = (event: LayoutChangeEvent): void => {
|
|
76
|
-
const width = Math.max(0, event.nativeEvent.layout.width);
|
|
77
|
-
const height = Math.max(0, event.nativeEvent.layout.height);
|
|
78
|
-
setLayout((current) =>
|
|
79
|
-
current.width === width && current.height === height
|
|
80
|
-
? current
|
|
81
|
-
: { width, height }
|
|
82
|
-
);
|
|
83
|
-
};
|
|
84
|
-
|
|
85
|
-
return (
|
|
86
|
-
<View
|
|
87
|
-
onLayout={handleLayout}
|
|
88
|
-
style={[
|
|
89
|
-
styles.container,
|
|
90
|
-
{ borderRadius: normalized.borderRadius },
|
|
91
|
-
style,
|
|
92
|
-
]}
|
|
93
|
-
testID={testID}
|
|
94
|
-
>
|
|
95
|
-
{children}
|
|
96
|
-
{showVisual ? (
|
|
97
|
-
<View pointerEvents="none" style={styles.visual} {...A11Y_HIDDEN_PROPS}>
|
|
98
|
-
<Svg width={layout.width} height={layout.height}>
|
|
99
|
-
{trail.map((layer, index) => (
|
|
100
|
-
<Rect
|
|
101
|
-
key={`${layer.length}-${layer.opacity}`}
|
|
102
|
-
ref={(node) => {
|
|
103
|
-
rectRefs.current[index] = node;
|
|
104
|
-
}}
|
|
105
|
-
x={normalized.lineWidth / 2}
|
|
106
|
-
y={normalized.lineWidth / 2}
|
|
107
|
-
width={geometry.rectWidth}
|
|
108
|
-
height={geometry.rectHeight}
|
|
109
|
-
rx={geometry.radius}
|
|
110
|
-
ry={geometry.radius}
|
|
111
|
-
fill="none"
|
|
112
|
-
stroke={color ?? colors.primary}
|
|
113
|
-
strokeOpacity={layer.opacity}
|
|
114
|
-
strokeWidth={normalized.lineWidth}
|
|
115
|
-
strokeLinecap="round"
|
|
116
|
-
strokeDasharray={[
|
|
117
|
-
layer.length,
|
|
118
|
-
Math.max(0, geometry.perimeter - layer.length),
|
|
119
|
-
]}
|
|
120
|
-
/>
|
|
121
|
-
))}
|
|
122
|
-
</Svg>
|
|
123
|
-
</View>
|
|
124
|
-
) : null}
|
|
125
|
-
</View>
|
|
126
|
-
);
|
|
127
|
-
}
|