@unif/react-native-design 0.34.0 → 0.35.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/jest-preset.js +1 -1
- package/jest-setup.js +16 -1
- package/lib/module/components/business/GlassStats/GlassStats.js +6 -7
- package/lib/module/components/business/GlassStats/GlassStats.js.map +1 -1
- package/lib/module/components/business/GlassStats/styles.js +5 -1
- package/lib/module/components/business/GlassStats/styles.js.map +1 -1
- package/lib/module/components/ui/GlassLayer/GlassLayer.js +39 -0
- package/lib/module/components/ui/GlassLayer/GlassLayer.js.map +1 -0
- package/lib/module/components/ui/GlassLayer/GlassLayer.web.js +36 -0
- package/lib/module/components/ui/GlassLayer/GlassLayer.web.js.map +1 -0
- package/lib/module/components/ui/GlassLayer/constants.js +8 -0
- package/lib/module/components/ui/GlassLayer/constants.js.map +1 -0
- package/lib/module/components/ui/GlassLayer/index.js +4 -0
- package/lib/module/components/ui/GlassLayer/index.js.map +1 -0
- package/lib/module/components/ui/GlassLayer/types.js.map +1 -0
- package/lib/module/components/ui/index.js +1 -1
- package/lib/module/components/ui/index.js.map +1 -1
- package/lib/module/theme/colors.js +4 -7
- package/lib/module/theme/colors.js.map +1 -1
- package/lib/module/theme/index.js +0 -1
- package/lib/module/theme/index.js.map +1 -1
- package/lib/typescript/src/components/business/GlassStats/GlassStats.d.ts +2 -4
- package/lib/typescript/src/components/business/GlassStats/GlassStats.d.ts.map +1 -1
- package/lib/typescript/src/components/business/GlassStats/styles.d.ts +4 -1
- package/lib/typescript/src/components/business/GlassStats/styles.d.ts.map +1 -1
- package/lib/typescript/src/components/ui/GlassLayer/GlassLayer.d.ts +5 -0
- package/lib/typescript/src/components/ui/GlassLayer/GlassLayer.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/GlassLayer/GlassLayer.web.d.ts +5 -0
- package/lib/typescript/src/components/ui/GlassLayer/GlassLayer.web.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/GlassLayer/constants.d.ts +6 -0
- package/lib/typescript/src/components/ui/GlassLayer/constants.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/GlassLayer/index.d.ts +3 -0
- package/lib/typescript/src/components/ui/GlassLayer/index.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/GlassLayer/types.d.ts +13 -0
- package/lib/typescript/src/components/ui/GlassLayer/types.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/index.d.ts +2 -2
- package/lib/typescript/src/components/ui/index.d.ts.map +1 -1
- package/lib/typescript/src/theme/colors.d.ts +2 -5
- package/lib/typescript/src/theme/colors.d.ts.map +1 -1
- package/lib/typescript/src/theme/index.d.ts +0 -2
- package/lib/typescript/src/theme/index.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/components/business/GlassStats/GlassStats.tsx +4 -6
- package/src/components/business/GlassStats/styles.ts +3 -1
- package/src/components/ui/GlassLayer/GlassLayer.tsx +42 -0
- package/src/components/ui/GlassLayer/GlassLayer.web.tsx +37 -0
- package/src/components/ui/GlassLayer/constants.ts +2 -0
- package/src/components/ui/GlassLayer/index.ts +2 -0
- package/src/components/ui/GlassLayer/types.ts +14 -0
- package/src/components/ui/index.ts +2 -2
- package/src/theme/colors.ts +4 -7
- package/src/theme/index.ts +0 -3
- package/lib/module/components/ui/BlurLayer/BlurLayer.js +0 -45
- package/lib/module/components/ui/BlurLayer/BlurLayer.js.map +0 -1
- package/lib/module/components/ui/BlurLayer/BlurLayer.web.js +0 -46
- package/lib/module/components/ui/BlurLayer/BlurLayer.web.js.map +0 -1
- package/lib/module/components/ui/BlurLayer/index.js +0 -4
- package/lib/module/components/ui/BlurLayer/index.js.map +0 -1
- package/lib/module/components/ui/BlurLayer/types.js.map +0 -1
- package/lib/module/theme/blur.js +0 -12
- package/lib/module/theme/blur.js.map +0 -1
- package/lib/typescript/src/components/ui/BlurLayer/BlurLayer.d.ts +0 -10
- package/lib/typescript/src/components/ui/BlurLayer/BlurLayer.d.ts.map +0 -1
- package/lib/typescript/src/components/ui/BlurLayer/BlurLayer.web.d.ts +0 -12
- package/lib/typescript/src/components/ui/BlurLayer/BlurLayer.web.d.ts.map +0 -1
- package/lib/typescript/src/components/ui/BlurLayer/index.d.ts +0 -3
- package/lib/typescript/src/components/ui/BlurLayer/index.d.ts.map +0 -1
- package/lib/typescript/src/components/ui/BlurLayer/types.d.ts +0 -15
- package/lib/typescript/src/components/ui/BlurLayer/types.d.ts.map +0 -1
- package/lib/typescript/src/theme/blur.d.ts +0 -11
- package/lib/typescript/src/theme/blur.d.ts.map +0 -1
- package/src/components/ui/BlurLayer/BlurLayer.tsx +0 -47
- package/src/components/ui/BlurLayer/BlurLayer.web.tsx +0 -46
- package/src/components/ui/BlurLayer/index.ts +0 -2
- package/src/components/ui/BlurLayer/types.ts +0 -15
- package/src/theme/blur.ts +0 -11
- /package/lib/module/components/ui/{BlurLayer → GlassLayer}/types.js +0 -0
package/jest-preset.js
CHANGED
|
@@ -57,6 +57,6 @@ module.exports = {
|
|
|
57
57
|
// 本库与这些 peer 都发 ESM / TS 源码,RN preset 默认只放行
|
|
58
58
|
// react-native / @react-native / @react-native-community 三个前缀。
|
|
59
59
|
transformIgnorePatterns: [
|
|
60
|
-
'node_modules/(?!((jest-)?react-native|@react-native(-community)?|@unif/react-native-design|@
|
|
60
|
+
'node_modules/(?!((jest-)?react-native|@react-native(-community)?|@unif/react-native-design|@callstack/liquid-glass|react-native-(gesture-handler|reanimated|worklets|safe-area-context|svg|reanimated-carousel))/)',
|
|
61
61
|
],
|
|
62
62
|
};
|
package/jest-setup.js
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* `@unif/react-native-design/jest-setup` —— 把本库 9 个 runtime peer 里在 Jest 中
|
|
7
|
-
* 需要接线的那
|
|
7
|
+
* 需要接线的那 5 个提供桩 / mock / setup。放进消费者的
|
|
8
8
|
* `setupFilesAfterEnv`。
|
|
9
9
|
*
|
|
10
10
|
* 为什么由库提供:这份接线完全由本库的 peer 集决定,peer range 一变它就得变。
|
|
@@ -18,6 +18,21 @@
|
|
|
18
18
|
// RNGH 官方 jest 桩:让 TurboModuleRegistry.getEnforcing('RNGestureHandlerModule') 不炸。
|
|
19
19
|
require('react-native-gesture-handler/jestSetup');
|
|
20
20
|
|
|
21
|
+
// Liquid Glass 依赖 iOS Fabric / TurboModule,Jest 只替换这个原生边界。
|
|
22
|
+
// 默认不支持原生材质;组件测试可覆盖支持标记,核对两种平台接线。
|
|
23
|
+
jest.mock('@callstack/liquid-glass', () => {
|
|
24
|
+
const React = require('react');
|
|
25
|
+
const { View } = require('react-native');
|
|
26
|
+
return {
|
|
27
|
+
__esModule: true,
|
|
28
|
+
LiquidGlassView: function MockLiquidGlassView(props) {
|
|
29
|
+
return React.createElement(View, props);
|
|
30
|
+
},
|
|
31
|
+
LiquidGlassContainerView: View,
|
|
32
|
+
isLiquidGlassSupported: false,
|
|
33
|
+
};
|
|
34
|
+
});
|
|
35
|
+
|
|
21
36
|
// worklets 的 native 侧在 Jest 里不存在,直接 import 会在 `loadUnpackersWithCode` 处崩。
|
|
22
37
|
jest.mock('react-native-worklets', () =>
|
|
23
38
|
require('react-native-worklets/lib/module/mock')
|
|
@@ -2,15 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import { Text, View } from 'react-native';
|
|
5
|
-
import {
|
|
5
|
+
import { GlassLayer } from "../../ui/GlassLayer/index.js";
|
|
6
6
|
import { useThemedStyles } from "../../../theme/index.js";
|
|
7
7
|
import { makeGlassStatsStyles } from "./styles.js";
|
|
8
8
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
9
|
/**
|
|
10
|
-
* 玻璃数据条 ——
|
|
11
|
-
*
|
|
12
|
-
* BlurLayer 接管 backdrop 双层结构(BlurView soft + glassTintLight tint),
|
|
13
|
-
* blurType 跟 scheme 自动切。
|
|
10
|
+
* 玻璃数据条 —— GlassLayer 通透材质 + 内部 N 列数据。
|
|
11
|
+
* 材质、主题和平台降级由 GlassLayer 接管。
|
|
14
12
|
*/
|
|
15
13
|
export function GlassStats({
|
|
16
14
|
items,
|
|
@@ -28,8 +26,9 @@ export function GlassStats({
|
|
|
28
26
|
testID: testID,
|
|
29
27
|
children: /*#__PURE__*/_jsxs(View, {
|
|
30
28
|
style: styles.glass,
|
|
31
|
-
children: [/*#__PURE__*/_jsx(
|
|
32
|
-
|
|
29
|
+
children: [/*#__PURE__*/_jsx(GlassLayer, {
|
|
30
|
+
effect: "clear",
|
|
31
|
+
style: styles.glassLayer
|
|
33
32
|
}), /*#__PURE__*/_jsx(View, {
|
|
34
33
|
style: styles.topHighlight,
|
|
35
34
|
pointerEvents: "none"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Text","View","
|
|
1
|
+
{"version":3,"names":["React","Text","View","GlassLayer","useThemedStyles","makeGlassStatsStyles","jsx","_jsx","jsxs","_jsxs","GlassStats","items","style","testID","styles","glassShell","children","glass","effect","glassLayer","topHighlight","pointerEvents","inner","map","count","label","i","Fragment","sep","col","countText","labelText"],"sourceRoot":"../../../../../src","sources":["components/business/GlassStats/GlassStats.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,QAAQ,cAAc;AACzC,SAASC,UAAU,QAAQ,8BAAqB;AAChD,SAASC,eAAe,QAAQ,yBAAgB;AAChD,SAASC,oBAAoB,QAAQ,aAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGhD;AACA;AACA;AACA;AACA,OAAO,SAASC,UAAUA,CAAC;EACzBC,KAAK;EACLC,KAAK;EACLC;AACe,CAAC,EAAqB;EACrC,MAAMC,MAAM,GAAGV,eAAe,CAACC,oBAAoB,CAAC;EACpD;IAAA;IACE;IACA;IACA;IACAE,IAAA,CAACL,IAAI;MAACU,KAAK,EAAE,CAACE,MAAM,CAACC,UAAU,EAAEH,KAAK,CAAE;MAACC,MAAM,EAAEA,MAAO;MAAAG,QAAA,eACtDP,KAAA,CAACP,IAAI;QAACU,KAAK,EAAEE,MAAM,CAACG,KAAM;QAAAD,QAAA,gBACxBT,IAAA,CAACJ,UAAU;UAACe,MAAM,EAAC,OAAO;UAACN,KAAK,EAAEE,MAAM,CAACK;QAAW,CAAE,CAAC,eAEvDZ,IAAA,CAACL,IAAI;UAACU,KAAK,EAAEE,MAAM,CAACM,YAAa;UAACC,aAAa,EAAC;QAAM,CAAE,CAAC,eACzDd,IAAA,CAACL,IAAI;UAACU,KAAK,EAAEE,MAAM,CAACQ,KAAM;UAAAN,QAAA,EACvBL,KAAK,CAACY,GAAG,CAAC,CAAC,CAACC,KAAK,EAAEC,KAAK,CAAC,EAAEC,CAAC,kBAC3BjB,KAAA,CAACT,KAAK,CAAC2B,QAAQ;YAAAX,QAAA,GACZU,CAAC,GAAG,CAAC,gBAAGnB,IAAA,CAACL,IAAI;cAACU,KAAK,EAAEE,MAAM,CAACc;YAAI,CAAE,CAAC,GAAG,IAAI,eAC3CnB,KAAA,CAACP,IAAI;cAACU,KAAK,EAAEE,MAAM,CAACe,GAAI;cAAAb,QAAA,gBACtBT,IAAA,CAACN,IAAI;gBAACW,KAAK,EAAEE,MAAM,CAACgB,SAAU;gBAAAd,QAAA,EAAEQ;cAAK,CAAO,CAAC,eAC7CjB,IAAA,CAACN,IAAI;gBAACW,KAAK,EAAEE,MAAM,CAACiB,SAAU;gBAAAf,QAAA,EAAES;cAAK,CAAO,CAAC;YAAA,CACzC,CAAC;UAAA,GALY,GAAGA,KAAK,IAAIC,CAAC,EAMlB,CACjB;QAAC,CACE,CAAC;MAAA,CACH;IAAC,CACH;EAAC;AAEX","ignoreList":[]}
|
|
@@ -9,11 +9,15 @@ import { fontMono, fw, radius, rf, space, type as t } from "../../../theme/index
|
|
|
9
9
|
* iOS Core Animation `masksToBounds=true` 会裁掉 outer shadow。
|
|
10
10
|
* - `glass`:内层承担 borderRadius + overflow:hidden + border 边线。
|
|
11
11
|
*
|
|
12
|
-
*
|
|
12
|
+
* 玻璃材质与平台降级由 `<GlassLayer effect="clear"/>` 接管。 */
|
|
13
13
|
export const makeGlassStatsStyles = (c, s) => {
|
|
14
14
|
/** count 数字 mono display 字号,无对应 type token,保留 rf(20) 走字号缩放(非 r)。 */
|
|
15
15
|
const countSize = rf(20);
|
|
16
16
|
return StyleSheet.create({
|
|
17
|
+
// LiquidGlassView 需要自身圆角,父容器的 overflow 裁切不足以定义材质轮廓。
|
|
18
|
+
glassLayer: {
|
|
19
|
+
borderRadius: radius['2xl']
|
|
20
|
+
},
|
|
17
21
|
glassShell: {
|
|
18
22
|
borderRadius: radius['2xl'],
|
|
19
23
|
...s.glassBar
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["StyleSheet","fontMono","fw","radius","rf","space","type","t","makeGlassStatsStyles","c","s","countSize","create","
|
|
1
|
+
{"version":3,"names":["StyleSheet","fontMono","fw","radius","rf","space","type","t","makeGlassStatsStyles","c","s","countSize","create","glassLayer","borderRadius","glassShell","glassBar","glass","overflow","borderWidth","hairlineWidth","borderColor","glassBorder","topHighlight","absoluteFill","borderTopWidth","borderTopColor","glassStatsHighlight","inner","flexDirection","paddingVertical","sep","width","backgroundColor","glassSeparator","marginVertical","col","flex","alignItems","countText","fontSize","fontWeight","bold","color","foreground","letterSpacing","fontFamily","lineHeight","labelText","micro","foregroundMuted","paddingTop"],"sourceRoot":"../../../../../src","sources":["components/business/GlassStats/styles.ts"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,QAAQ,EAAEC,EAAE,EAAEC,MAAM,EAAEC,EAAE,EAAEC,KAAK,EAAEC,IAAI,IAAIC,CAAC,QAAQ,yBAAgB;AAG3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,oBAAoB,GAAGA,CAACC,CAAc,EAAEC,CAAe,KAAK;EACvE;EACA,MAAMC,SAAS,GAAGP,EAAE,CAAC,EAAE,CAAC;EACxB,OAAOJ,UAAU,CAACY,MAAM,CAAC;IACvB;IACAC,UAAU,EAAE;MAAEC,YAAY,EAAEX,MAAM,CAAC,KAAK;IAAE,CAAC;IAC3CY,UAAU,EAAE;MACVD,YAAY,EAAEX,MAAM,CAAC,KAAK,CAAC;MAC3B,GAAGO,CAAC,CAACM;IACP,CAAC;IACDC,KAAK,EAAE;MACLH,YAAY,EAAEX,MAAM,CAAC,KAAK,CAAC;MAC3Be,QAAQ,EAAE,QAAQ;MAClBC,WAAW,EAAEnB,UAAU,CAACoB,aAAa;MACrCC,WAAW,EAAEZ,CAAC,CAACa;IACjB,CAAC;IACD;IACAC,YAAY,EAAE;MACZ,GAAGvB,UAAU,CAACwB,YAAY;MAC1BV,YAAY,EAAEX,MAAM,CAAC,KAAK,CAAC;MAC3BsB,cAAc,EAAEzB,UAAU,CAACoB,aAAa;MACxCM,cAAc,EAAEjB,CAAC,CAACkB;IACpB,CAAC;IACDC,KAAK,EAAE;MACLC,aAAa,EAAE,KAAK;MACpBC,eAAe,EAAEzB,KAAK,CAAC,GAAG;IAC5B,CAAC;IACD0B,GAAG,EAAE;MACHC,KAAK,EAAEhC,UAAU,CAACoB,aAAa;MAC/Ba,eAAe,EAAExB,CAAC,CAACyB,cAAc;MACjCC,cAAc,EAAE9B,KAAK,CAAC,GAAG;IAC3B,CAAC;IACD+B,GAAG,EAAE;MAAEC,IAAI,EAAE,CAAC;MAAEC,UAAU,EAAE;IAAS,CAAC;IACtCC,SAAS,EAAE;MACTC,QAAQ,EAAE7B,SAAS;MACnB8B,UAAU,EAAEvC,EAAE,CAACwC,IAAI;MACnBC,KAAK,EAAElC,CAAC,CAACmC,UAAU;MACnBC,aAAa,EAAE,CAAC,GAAG;MACnBC,UAAU,EAAE7C,QAAQ;MACpB8C,UAAU,EAAEpC,SAAS,GAAG;IAC1B,CAAC;IACDqC,SAAS,EAAE;MACTR,QAAQ,EAAEjC,CAAC,CAAC0C,KAAK;MACjBN,KAAK,EAAElC,CAAC,CAACyC,eAAe;MACxBC,UAAU,EAAE9C,KAAK,CAAC,GAAG;IACvB;EACF,CAAC,CAAC;AACJ,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { StyleSheet } from 'react-native';
|
|
5
|
+
import { LiquidGlassView, isLiquidGlassSupported } from '@callstack/liquid-glass';
|
|
6
|
+
import { useColors, useTheme } from "../../../theme/index.js";
|
|
7
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
+
/** 装饰玻璃层;不支持原生材质的平台使用主题半透明背景。 */
|
|
9
|
+
export function GlassLayer({
|
|
10
|
+
effect = 'regular',
|
|
11
|
+
tintColor,
|
|
12
|
+
style,
|
|
13
|
+
testID
|
|
14
|
+
}) {
|
|
15
|
+
const c = useColors();
|
|
16
|
+
const {
|
|
17
|
+
scheme
|
|
18
|
+
} = useTheme();
|
|
19
|
+
const resolvedTint = tintColor ?? (effect === 'clear' ? c.glassTintLight : c.sheetBackdrop);
|
|
20
|
+
return /*#__PURE__*/_jsx(LiquidGlassView
|
|
21
|
+
// 支持标记也可能因宿主设计兼容设置关闭,必须显式禁用原生材质。
|
|
22
|
+
, {
|
|
23
|
+
effect: isLiquidGlassSupported ? effect : 'none',
|
|
24
|
+
tintColor: resolvedTint,
|
|
25
|
+
colorScheme: scheme
|
|
26
|
+
// 纯装饰层无需材质切换动画,也不引入减少动态效果的额外状态。
|
|
27
|
+
,
|
|
28
|
+
animated: false,
|
|
29
|
+
style: [StyleSheet.absoluteFill, style, !isLiquidGlassSupported && {
|
|
30
|
+
backgroundColor: resolvedTint
|
|
31
|
+
}],
|
|
32
|
+
pointerEvents: "none",
|
|
33
|
+
accessible: false,
|
|
34
|
+
accessibilityElementsHidden: true,
|
|
35
|
+
importantForAccessibility: "no-hide-descendants",
|
|
36
|
+
testID: testID
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
//# sourceMappingURL=GlassLayer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","StyleSheet","LiquidGlassView","isLiquidGlassSupported","useColors","useTheme","jsx","_jsx","GlassLayer","effect","tintColor","style","testID","c","scheme","resolvedTint","glassTintLight","sheetBackdrop","colorScheme","animated","absoluteFill","backgroundColor","pointerEvents","accessible","accessibilityElementsHidden","importantForAccessibility"],"sourceRoot":"../../../../../src","sources":["components/ui/GlassLayer/GlassLayer.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,cAAc;AACzC,SACEC,eAAe,EACfC,sBAAsB,QACjB,yBAAyB;AAChC,SAASC,SAAS,EAAEC,QAAQ,QAAQ,yBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGrD;AACA,OAAO,SAASC,UAAUA,CAAC;EACzBC,MAAM,GAAG,SAAS;EAClBC,SAAS;EACTC,KAAK;EACLC;AACe,CAAC,EAAqB;EACrC,MAAMC,CAAC,GAAGT,SAAS,CAAC,CAAC;EACrB,MAAM;IAAEU;EAAO,CAAC,GAAGT,QAAQ,CAAC,CAAC;EAC7B,MAAMU,YAAY,GAChBL,SAAS,KAAKD,MAAM,KAAK,OAAO,GAAGI,CAAC,CAACG,cAAc,GAAGH,CAAC,CAACI,aAAa,CAAC;EAExE,oBACEV,IAAA,CAACL;EACC;EAAA;IACAO,MAAM,EAAEN,sBAAsB,GAAGM,MAAM,GAAG,MAAO;IACjDC,SAAS,EAAEK,YAAa;IACxBG,WAAW,EAAEJ;IACb;IAAA;IACAK,QAAQ,EAAE,KAAM;IAChBR,KAAK,EAAE,CACLV,UAAU,CAACmB,YAAY,EACvBT,KAAK,EACL,CAACR,sBAAsB,IAAI;MAAEkB,eAAe,EAAEN;IAAa,CAAC,CAC5D;IACFO,aAAa,EAAC,MAAM;IACpBC,UAAU,EAAE,KAAM;IAClBC,2BAA2B;IAC3BC,yBAAyB,EAAC,qBAAqB;IAC/Cb,MAAM,EAAEA;EAAO,CAChB,CAAC;AAEN","ignoreList":[]}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { StyleSheet, View } from 'react-native';
|
|
5
|
+
import { useColors, useTheme } from "../../../theme/index.js";
|
|
6
|
+
import { webGlassBlur } from "./constants.js";
|
|
7
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
+
/** Web 保留 CSS 玻璃近似效果,不加载原生 Liquid Glass 模块。 */
|
|
9
|
+
export function GlassLayer({
|
|
10
|
+
effect = 'regular',
|
|
11
|
+
tintColor,
|
|
12
|
+
style,
|
|
13
|
+
testID
|
|
14
|
+
}) {
|
|
15
|
+
const c = useColors();
|
|
16
|
+
const {
|
|
17
|
+
scheme
|
|
18
|
+
} = useTheme();
|
|
19
|
+
const resolvedTint = tintColor ?? (effect === 'clear' ? c.glassTintLight : c.sheetBackdrop);
|
|
20
|
+
// RN 类型不含 CSS backdrop-filter。保留原有饱和度和暗色透明度近似值。
|
|
21
|
+
const webGlassStyle = {
|
|
22
|
+
backdropFilter: `blur(${webGlassBlur[effect]}px) saturate(180%)`,
|
|
23
|
+
WebkitBackdropFilter: `blur(${webGlassBlur[effect]}px) saturate(180%)`,
|
|
24
|
+
backgroundColor: resolvedTint,
|
|
25
|
+
opacity: scheme === 'dark' ? 0.96 : 1
|
|
26
|
+
};
|
|
27
|
+
return /*#__PURE__*/_jsx(View, {
|
|
28
|
+
style: [StyleSheet.absoluteFill, style, webGlassStyle],
|
|
29
|
+
pointerEvents: "none",
|
|
30
|
+
accessible: false,
|
|
31
|
+
accessibilityElementsHidden: true,
|
|
32
|
+
importantForAccessibility: "no-hide-descendants",
|
|
33
|
+
testID: testID
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
//# sourceMappingURL=GlassLayer.web.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","StyleSheet","View","useColors","useTheme","webGlassBlur","jsx","_jsx","GlassLayer","effect","tintColor","style","testID","c","scheme","resolvedTint","glassTintLight","sheetBackdrop","webGlassStyle","backdropFilter","WebkitBackdropFilter","backgroundColor","opacity","absoluteFill","pointerEvents","accessible","accessibilityElementsHidden","importantForAccessibility"],"sourceRoot":"../../../../../src","sources":["components/ui/GlassLayer/GlassLayer.web.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,IAAI,QAAwB,cAAc;AAC/D,SAASC,SAAS,EAAEC,QAAQ,QAAQ,yBAAgB;AACpD,SAASC,YAAY,QAAQ,gBAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAG3C;AACA,OAAO,SAASC,UAAUA,CAAC;EACzBC,MAAM,GAAG,SAAS;EAClBC,SAAS;EACTC,KAAK;EACLC;AACe,CAAC,EAAqB;EACrC,MAAMC,CAAC,GAAGV,SAAS,CAAC,CAAC;EACrB,MAAM;IAAEW;EAAO,CAAC,GAAGV,QAAQ,CAAC,CAAC;EAC7B,MAAMW,YAAY,GAChBL,SAAS,KAAKD,MAAM,KAAK,OAAO,GAAGI,CAAC,CAACG,cAAc,GAAGH,CAAC,CAACI,aAAa,CAAC;EACxE;EACA,MAAMC,aACgE,GAAG;IACvEC,cAAc,EAAE,QAAQd,YAAY,CAACI,MAAM,CAAC,oBAAoB;IAChEW,oBAAoB,EAAE,QAAQf,YAAY,CAACI,MAAM,CAAC,oBAAoB;IACtEY,eAAe,EAAEN,YAAY;IAC7BO,OAAO,EAAER,MAAM,KAAK,MAAM,GAAG,IAAI,GAAG;EACtC,CAAC;EAED,oBACEP,IAAA,CAACL,IAAI;IACHS,KAAK,EAAE,CAACV,UAAU,CAACsB,YAAY,EAAEZ,KAAK,EAAEO,aAAa,CAAE;IACvDM,aAAa,EAAC,MAAM;IACpBC,UAAU,EAAE,KAAM;IAClBC,2BAA2B;IAC3BC,yBAAyB,EAAC,qBAAqB;IAC/Cf,MAAM,EAAEA;EAAO,CAChB,CAAC;AAEN","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["webGlassBlur","clear","regular"],"sourceRoot":"../../../../../src","sources":["components/ui/GlassLayer/constants.ts"],"mappings":";;AAAA;AACA,OAAO,MAAMA,YAAY,GAAG;EAAEC,KAAK,EAAE,EAAE;EAAEC,OAAO,EAAE;AAAG,CAAU","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["GlassLayer"],"sourceRoot":"../../../../../src","sources":["components/ui/GlassLayer/index.ts"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,cAAc","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["components/ui/GlassLayer/types.ts"],"mappings":"","ignoreList":[]}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
export { Avatar } from "./Avatar/index.js";
|
|
4
4
|
export { AvatarGroup } from "./AvatarGroup/index.js";
|
|
5
|
-
export {
|
|
5
|
+
export { GlassLayer } from "./GlassLayer/index.js";
|
|
6
6
|
export { Button } from "./Button/index.js";
|
|
7
7
|
export { Card } from "./Card/index.js";
|
|
8
8
|
export { Carousel } from "./Carousel/index.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Avatar","AvatarGroup","
|
|
1
|
+
{"version":3,"names":["Avatar","AvatarGroup","GlassLayer","Button","Card","Carousel","Cell","List","Checkbox","Chip","CircularProgress","confirm","ConfirmHost","DrawerHeader","Empty","EntryCard","Form","FormGroup","FormRow","Grid","Icon","IconButton","Input","Logo","NavBar","PasswordInput","Pulse","PulseDot","usePulse","Radio","Reveal","Ribbon","Search","Skeleton","Segmented","Spinner","StatusDot","Stepper","Switch","TabBar","Tabs","Tag","Textarea","Thumbnail","toast","ToastHost","ActionMenuContent","ImagePreview","Sheet","SmsField","TextEntryContent"],"sourceRoot":"../../../../src","sources":["components/ui/index.ts"],"mappings":";;AAAA,SAASA,MAAM,QAAQ,mBAAU;AAOjC,SAASC,WAAW,QAAQ,wBAAe;AAE3C,SAASC,UAAU,QAAQ,uBAAc;AAEzC,SAASC,MAAM,QAAQ,mBAAU;AAEjC,SAASC,IAAI,QAAQ,iBAAQ;AAE7B,SAASC,QAAQ,QAAQ,qBAAY;AAErC,SAASC,IAAI,EAAEC,IAAI,QAAQ,iBAAQ;AAQnC,SAASC,QAAQ,QAAQ,qBAAY;AAErC,SAASC,IAAI,QAAQ,iBAAQ;AAE7B,SAASC,gBAAgB,QAAQ,6BAAoB;AAErD,SAASC,OAAO,EAAEC,WAAW,QAAQ,oBAAW;AAEhD,SAASC,YAAY,QAAQ,yBAAgB;AAE7C,SAASC,KAAK,QAAQ,kBAAS;AAE/B,SAASC,SAAS,QAAQ,sBAAa;AAEvC,SAASC,IAAI,EAAEC,SAAS,EAAEC,OAAO,QAAQ,iBAAQ;AAEjD,SAASC,IAAI,QAAQ,iBAAQ;AAE7B,SAASC,IAAI,QAAQ,iBAAQ;AAE7B,SAASC,UAAU,QAAQ,uBAAc;AAEzC,SAASC,KAAK,QAAQ,kBAAS;AAO/B,SAASC,IAAI,QAAQ,iBAAQ;AAE7B,SAASC,MAAM,QAAQ,mBAAU;AAEjC,SAASC,aAAa,QAAQ,0BAAiB;AAE/C,SAASC,KAAK,EAAEC,QAAQ,EAAEC,QAAQ,QAAQ,kBAAS;AAEnD,SAASC,KAAK,QAAQ,kBAAS;AAE/B,SAASC,MAAM,QAAQ,mBAAU;AAEjC,SAASC,MAAM,QAAQ,mBAAU;AAEjC,SAASC,MAAM,QAAQ,mBAAU;AAEjC,SAASC,QAAQ,QAAQ,qBAAY;AAErC,SAASC,SAAS,QAAQ,sBAAa;AAEvC,SAASC,OAAO,QAAQ,oBAAW;AAEnC,SAASC,SAAS,QAAQ,sBAAa;AAMvC,SAASC,OAAO,QAAQ,oBAAW;AAEnC,SAASC,MAAM,QAAQ,mBAAU;AAEjC,SAASC,MAAM,QAAQ,mBAAU;AAEjC,SAASC,IAAI,QAAQ,iBAAQ;AAE7B,SAASC,GAAG,QAAQ,gBAAO;AAE3B,SAASC,QAAQ,QAAQ,qBAAY;AAErC,SAASC,SAAS,QAAQ,sBAAa;AAOvC,SAASC,KAAK,EAAEC,SAAS,QAAQ,kBAAS;AAQ1C,SAASC,iBAAiB,QAAQ,8BAAqB;AAMvD,SAASC,YAAY,QAAQ,yBAAgB;AAM7C,SAASC,KAAK,QAAQ,kBAAS;AAE/B,SAASC,QAAQ,QAAQ,qBAAY;AAErC,SAASC,gBAAgB,QAAQ,6BAAoB","ignoreList":[]}
|
|
@@ -56,12 +56,9 @@ export const lightColors = {
|
|
|
56
56
|
glassTintLight: 'rgba(255,255,255,0.55)',
|
|
57
57
|
/** 玻璃容器内部分隔线 —— 暗色翻成对应低透白,保证暗底可见。 */
|
|
58
58
|
glassSeparator: 'rgba(0,0,0,0.08)',
|
|
59
|
-
/**
|
|
60
|
-
* 数值配合 blur.strong(blurAmount=40) 让"玻璃门外区滚动内容透过模糊显示"达成。
|
|
61
|
-
* 跟 glassTintLight 区分:此 token 给"玻璃门外区"语义。 */
|
|
59
|
+
/** 玻璃容器的半透明背景,与轻薄染色 glassTintLight 分别表达表面与覆盖层。 */
|
|
62
60
|
glassSurface: 'rgba(255,255,255,0.20)',
|
|
63
|
-
/** TabBar
|
|
64
|
-
* TabBar 场景配合 blur.soft(blurAmount=10) 主导,语义不同不可复用同一个 alpha。 */
|
|
61
|
+
/** TabBar 的轻薄主题背景;只表达颜色,不定义原生玻璃材质或模糊半径。 */
|
|
65
62
|
tabBarGlassTint: 'rgba(255,255,255,0.10)',
|
|
66
63
|
/** 玻璃胶囊边框(亮 0.18 / 暗 0.14 白透)。 */
|
|
67
64
|
glassBorder: 'rgba(255,255,255,0.18)',
|
|
@@ -152,9 +149,9 @@ export const darkColors = {
|
|
|
152
149
|
// 暗色 0.06 白透,凸起感由 glassBar 暗色黑 0.35 shadow 补
|
|
153
150
|
glassTintLight: 'rgba(255,255,255,0.06)',
|
|
154
151
|
glassSeparator: 'rgba(255,255,255,0.10)',
|
|
155
|
-
//
|
|
152
|
+
// 暗色玻璃容器沿用深灰半透明背景。
|
|
156
153
|
glassSurface: 'rgba(28,28,30,0.30)',
|
|
157
|
-
//
|
|
154
|
+
// TabBar 沿用独立的轻薄染色。
|
|
158
155
|
tabBarGlassTint: 'rgba(28,28,30,0.18)',
|
|
159
156
|
glassBorder: 'rgba(255,255,255,0.14)',
|
|
160
157
|
glassHighlight: 'rgba(255,255,255,0.24)',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["BRAND_ORANGE","lightColors","primary","primaryPressed","primaryContainer","primaryContainerSubtle","brandTint10","brandTint14","onPrimary","onPrimaryMuted","success","successContainer","onSuccess","error","errorContainer","onError","info","infoContainer","onInfo","background","surface","surfaceContainer","surfaceContainerHigh","surfaceContainerHighest","foreground","foregroundMuted","foregroundSubtle","onSurface","onSurfaceMuted","outline","outlineVariant","outlineFaint","inverseSurface","inverseOnSurface","scrim","sheetBackdrop","glassTintLight","glassSeparator","glassSurface","tabBarGlassTint","glassBorder","glassHighlight","glassStatsHighlight","glassActiveFg","brandTint12","iconFaint40","iconFaint30","iconFaint25","avatarRing","qrBg","heroGradient0","heroGradient1","heroGradient2","glassPillBg","glassPillBorder","darkColors","avatarGradient"],"sourceRoot":"../../../src","sources":["theme/colors.ts"],"mappings":";;AAAA;;AAEA;AACA;AACA,OAAO,MAAMA,YAAY,GAAG,SAAS;AAErC,OAAO,MAAMC,WAAW,GAAG;EACzB;EACAC,OAAO,EAAEF,YAAY;EACrBG,cAAc,EAAE,SAAS;EACzBC,gBAAgB,EAAE,SAAS;EAC3BC,sBAAsB,EAAE,SAAS;EACjC;EACAC,WAAW,EAAE,sBAAsB;EACnC;EACAC,WAAW,EAAE,sBAAsB;EACnCC,SAAS,EAAE,SAAS;EACpBC,cAAc,EAAE,wBAAwB;EAExC;EACAC,OAAO,EAAE,SAAS;EAClBC,gBAAgB,EAAE,SAAS;EAC3BC,SAAS,EAAE,SAAS;EACpBC,KAAK,EAAE,SAAS;EAChBC,cAAc,EAAE,SAAS;EACzBC,OAAO,EAAE,SAAS;EAClBC,IAAI,EAAE,SAAS;EACfC,aAAa,EAAE,SAAS;EACxBC,MAAM,EAAE,SAAS;EAEjB;EACAC,UAAU,EAAE,SAAS;EACrBC,OAAO,EAAE,SAAS;EAClBC,gBAAgB,EAAE,SAAS;EAC3BC,oBAAoB,EAAE,SAAS;EAC/BC,uBAAuB,EAAE,SAAS;EAElC;EACAC,UAAU,EAAE,SAAS;EACrBC,eAAe,EAAE,SAAS;EAC1BC,gBAAgB,EAAE,SAAS;EAC3BC,SAAS,EAAE,SAAS;EACpBC,cAAc,EAAE,SAAS;EAEzB;EACAC,OAAO,EAAE,SAAS;EAClBC,cAAc,EAAE,SAAS;EACzBC,YAAY,EAAE,SAAS;EAEvB;EACAC,cAAc,EAAE,SAAS;EACzBC,gBAAgB,EAAE,SAAS;EAE3B;EACA;EACAC,KAAK,EAAE,iBAAiB;EACxB;AACF;EACEC,aAAa,EAAE,wBAAwB;EACvC;EACAC,cAAc,EAAE,wBAAwB;EACxC;EACAC,cAAc,EAAE,kBAAkB;EAClC;
|
|
1
|
+
{"version":3,"names":["BRAND_ORANGE","lightColors","primary","primaryPressed","primaryContainer","primaryContainerSubtle","brandTint10","brandTint14","onPrimary","onPrimaryMuted","success","successContainer","onSuccess","error","errorContainer","onError","info","infoContainer","onInfo","background","surface","surfaceContainer","surfaceContainerHigh","surfaceContainerHighest","foreground","foregroundMuted","foregroundSubtle","onSurface","onSurfaceMuted","outline","outlineVariant","outlineFaint","inverseSurface","inverseOnSurface","scrim","sheetBackdrop","glassTintLight","glassSeparator","glassSurface","tabBarGlassTint","glassBorder","glassHighlight","glassStatsHighlight","glassActiveFg","brandTint12","iconFaint40","iconFaint30","iconFaint25","avatarRing","qrBg","heroGradient0","heroGradient1","heroGradient2","glassPillBg","glassPillBorder","darkColors","avatarGradient"],"sourceRoot":"../../../src","sources":["theme/colors.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -9,6 +9,5 @@ export { normalizeFontScale, scaleFontMetric, useFontScale } from "./fontScale.j
|
|
|
9
9
|
export { useThemedStyles } from "./useThemedStyles.js";
|
|
10
10
|
export { usePrefersReducedMotion } from './usePrefersReducedMotion';
|
|
11
11
|
export { fontMono, type, fw, space, radius, avatar, icon, control, dim, fixed, motion, pressedOpacity } from "./tokens.js";
|
|
12
|
-
export { blur } from "./blur.js";
|
|
13
12
|
export { r, rf } from "./scale.js";
|
|
14
13
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["lightColors","darkColors","avatarGradient","BRAND_ORANGE","warmOrangePalette","lightShadow","darkShadow","ThemeProvider","useTheme","useColors","useShadow","normalizeFontScale","scaleFontMetric","useFontScale","useThemedStyles","usePrefersReducedMotion","fontMono","type","fw","space","radius","avatar","icon","control","dim","fixed","motion","pressedOpacity","
|
|
1
|
+
{"version":3,"names":["lightColors","darkColors","avatarGradient","BRAND_ORANGE","warmOrangePalette","lightShadow","darkShadow","ThemeProvider","useTheme","useColors","useShadow","normalizeFontScale","scaleFontMetric","useFontScale","useThemedStyles","usePrefersReducedMotion","fontMono","type","fw","space","radius","avatar","icon","control","dim","fixed","motion","pressedOpacity","r","rf"],"sourceRoot":"../../../src","sources":["theme/index.ts"],"mappings":";;AAAA,SACEA,WAAW,EACXC,UAAU,EACVC,cAAc,EACdC,YAAY,QACP,aAAU;AAGjB,SAASC,iBAAiB,QAAQ,eAAY;AAE9C,SAASC,WAAW,EAAEC,UAAU,QAAQ,aAAU;AAGlD,SAASC,aAAa,QAAQ,oBAAiB;AAG/C,SAASC,QAAQ,EAAEC,SAAS,EAAEC,SAAS,QAAQ,eAAY;AAC3D,SAASC,kBAAkB,EAAEC,eAAe,EAAEC,YAAY,QAAQ,gBAAa;AAC/E,SAASC,eAAe,QAAQ,sBAAmB;AAEnD,SAASC,uBAAuB,QAAQ,2BAA2B;AAEnE,SACEC,QAAQ,EACRC,IAAI,EACJC,EAAE,EACFC,KAAK,EACLC,MAAM,EACNC,MAAM,EACNC,IAAI,EACJC,OAAO,EACPC,GAAG,EACHC,KAAK,EACLC,MAAM,EACNC,cAAc,QACT,aAAU;AAEjB,SAASC,CAAC,EAAEC,EAAE,QAAQ,YAAS","ignoreList":[]}
|
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { GlassStatsProps } from './types';
|
|
3
3
|
/**
|
|
4
|
-
* 玻璃数据条 ——
|
|
5
|
-
*
|
|
6
|
-
* BlurLayer 接管 backdrop 双层结构(BlurView soft + glassTintLight tint),
|
|
7
|
-
* blurType 跟 scheme 自动切。
|
|
4
|
+
* 玻璃数据条 —— GlassLayer 通透材质 + 内部 N 列数据。
|
|
5
|
+
* 材质、主题和平台降级由 GlassLayer 接管。
|
|
8
6
|
*/
|
|
9
7
|
export declare function GlassStats({ items, style, testID, }: GlassStatsProps): React.JSX.Element;
|
|
10
8
|
//# sourceMappingURL=GlassStats.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GlassStats.d.ts","sourceRoot":"","sources":["../../../../../../src/components/business/GlassStats/GlassStats.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C
|
|
1
|
+
{"version":3,"file":"GlassStats.d.ts","sourceRoot":"","sources":["../../../../../../src/components/business/GlassStats/GlassStats.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,MAAM,GACP,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAyBrC"}
|
|
@@ -6,8 +6,11 @@ import type { ColorTokens, ShadowTokens } from '../../../theme';
|
|
|
6
6
|
* iOS Core Animation `masksToBounds=true` 会裁掉 outer shadow。
|
|
7
7
|
* - `glass`:内层承担 borderRadius + overflow:hidden + border 边线。
|
|
8
8
|
*
|
|
9
|
-
*
|
|
9
|
+
* 玻璃材质与平台降级由 `<GlassLayer effect="clear"/>` 接管。 */
|
|
10
10
|
export declare const makeGlassStatsStyles: (c: ColorTokens, s: ShadowTokens) => Readonly<{
|
|
11
|
+
glassLayer: {
|
|
12
|
+
borderRadius: number;
|
|
13
|
+
};
|
|
11
14
|
glassShell: {
|
|
12
15
|
shadowColor: string;
|
|
13
16
|
shadowOffset: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/business/GlassStats/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEhE;;;;;;;
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/business/GlassStats/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEhE;;;;;;;oDAOoD;AACpD,eAAO,MAAM,oBAAoB,GAAI,GAAG,WAAW,EAAE,GAAG,YAAY;;;;;;;;;;;;;;;;;;;;;IAgBhE,6EAA6E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+BhF,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GlassLayer.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/GlassLayer/GlassLayer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,iCAAiC;AACjC,wBAAgB,UAAU,CAAC,EACzB,MAAkB,EAClB,SAAS,EACT,KAAK,EACL,MAAM,GACP,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA0BrC"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { GlassLayerProps } from './types';
|
|
3
|
+
/** Web 保留 CSS 玻璃近似效果,不加载原生 Liquid Glass 模块。 */
|
|
4
|
+
export declare function GlassLayer({ effect, tintColor, style, testID, }: GlassLayerProps): React.JSX.Element;
|
|
5
|
+
//# sourceMappingURL=GlassLayer.web.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GlassLayer.web.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/GlassLayer/GlassLayer.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,+CAA+C;AAC/C,wBAAgB,UAAU,CAAC,EACzB,MAAkB,EAClB,SAAS,EACT,KAAK,EACL,MAAM,GACP,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAwBrC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/GlassLayer/constants.ts"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,eAAO,MAAM,YAAY;;;CAAsC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/GlassLayer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
|
|
2
|
+
export type GlassEffect = 'clear' | 'regular';
|
|
3
|
+
export interface GlassLayerProps {
|
|
4
|
+
/** 玻璃材质,默认 regular;clear 更通透。Web 使用对应的 CSS 近似效果。 */
|
|
5
|
+
effect?: GlassEffect;
|
|
6
|
+
/** 默认 clear 使用 glassTintLight,regular 使用 sheetBackdrop;降级时作为背景色。 */
|
|
7
|
+
tintColor?: ColorValue;
|
|
8
|
+
/** 布局、定位与圆角;默认 absoluteFill,材质颜色通过 tintColor 设置。 */
|
|
9
|
+
style?: StyleProp<ViewStyle>;
|
|
10
|
+
/** E2E / 测试定位。 */
|
|
11
|
+
testID?: string;
|
|
12
|
+
}
|
|
13
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/GlassLayer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAErE,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,SAAS,CAAC;AAE9C,MAAM,WAAW,eAAe;IAC9B,oDAAoD;IACpD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,oEAAoE;IACpE,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,oDAAoD;IACpD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,kBAAkB;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
|
|
@@ -2,8 +2,8 @@ export { Avatar } from './Avatar';
|
|
|
2
2
|
export type { AvatarProps, AvatarShape, AvatarSize, AvatarVariant, } from './Avatar';
|
|
3
3
|
export { AvatarGroup } from './AvatarGroup';
|
|
4
4
|
export type { AvatarGroupItem, AvatarGroupProps } from './AvatarGroup';
|
|
5
|
-
export {
|
|
6
|
-
export type {
|
|
5
|
+
export { GlassLayer } from './GlassLayer';
|
|
6
|
+
export type { GlassEffect, GlassLayerProps } from './GlassLayer';
|
|
7
7
|
export { Button } from './Button';
|
|
8
8
|
export type { ButtonProps, ButtonSize, ButtonVariant } from './Button';
|
|
9
9
|
export { Card } from './Card';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EACV,WAAW,EACX,WAAW,EACX,UAAU,EACV,aAAa,GACd,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -45,12 +45,9 @@ export declare const lightColors: {
|
|
|
45
45
|
readonly glassTintLight: "rgba(255,255,255,0.55)";
|
|
46
46
|
/** 玻璃容器内部分隔线 —— 暗色翻成对应低透白,保证暗底可见。 */
|
|
47
47
|
readonly glassSeparator: "rgba(0,0,0,0.08)";
|
|
48
|
-
/**
|
|
49
|
-
* 数值配合 blur.strong(blurAmount=40) 让"玻璃门外区滚动内容透过模糊显示"达成。
|
|
50
|
-
* 跟 glassTintLight 区分:此 token 给"玻璃门外区"语义。 */
|
|
48
|
+
/** 玻璃容器的半透明背景,与轻薄染色 glassTintLight 分别表达表面与覆盖层。 */
|
|
51
49
|
readonly glassSurface: "rgba(255,255,255,0.20)";
|
|
52
|
-
/** TabBar
|
|
53
|
-
* TabBar 场景配合 blur.soft(blurAmount=10) 主导,语义不同不可复用同一个 alpha。 */
|
|
50
|
+
/** TabBar 的轻薄主题背景;只表达颜色,不定义原生玻璃材质或模糊半径。 */
|
|
54
51
|
readonly tabBarGlassTint: "rgba(255,255,255,0.10)";
|
|
55
52
|
/** 玻璃胶囊边框(亮 0.18 / 暗 0.14 白透)。 */
|
|
56
53
|
readonly glassBorder: "rgba(255,255,255,0.18)";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../../src/theme/colors.ts"],"names":[],"mappings":"AAEA;wBACwB;AACxB,eAAO,MAAM,YAAY,YAAY,CAAC;AAEtC,eAAO,MAAM,WAAW;;;;;IAMtB,+CAA+C;;IAE/C,iCAAiC;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAwCjC,mDAAmD;;IAEnD;2CACuC;;IAEvC,yDAAyD;;IAEzD,qCAAqC;;IAErC;;
|
|
1
|
+
{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../../src/theme/colors.ts"],"names":[],"mappings":"AAEA;wBACwB;AACxB,eAAO,MAAM,YAAY,YAAY,CAAC;AAEtC,eAAO,MAAM,WAAW;;;;;IAMtB,+CAA+C;;IAE/C,iCAAiC;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAwCjC,mDAAmD;;IAEnD;2CACuC;;IAEvC,yDAAyD;;IAEzD,qCAAqC;;IAErC,kDAAkD;;IAElD,2CAA2C;;IAE3C,kCAAkC;;IAElC,qCAAqC;;IAErC;wDACoD;;IAEpD;+BAC2B;;IAE3B,gEAAgE;;IAIhE,uDAAuD;;IAEvD,wBAAwB;;IAExB,+BAA+B;;IAG/B,+DAA+D;;IAE/D,oDAAoD;;IAOpD,yBAAyB;;IAEzB,sCAAsC;;IAEtC,2EAA2E;;IAG3E;qCACiC;;IAEjC,+BAA+B;;CAEvB,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG;KAAG,CAAC,IAAI,MAAM,OAAO,WAAW,GAAG,MAAM;CAAE,CAAC;AAEtE,eAAO,MAAM,UAAU,EAAE,WA6FxB,CAAC;AAEF;;kCAEkC;AAClC,eAAO,MAAM,cAAc,iCAAqC,CAAC"}
|
|
@@ -11,7 +11,5 @@ export { useThemedStyles } from './useThemedStyles';
|
|
|
11
11
|
export type { StylesMaker } from './useThemedStyles';
|
|
12
12
|
export { usePrefersReducedMotion } from './usePrefersReducedMotion';
|
|
13
13
|
export { fontMono, type, fw, space, radius, avatar, icon, control, dim, fixed, motion, pressedOpacity, } from './tokens';
|
|
14
|
-
export { blur } from './blur';
|
|
15
|
-
export type { BlurIntensity } from './blur';
|
|
16
14
|
export { r, rf } from './scale';
|
|
17
15
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,UAAU,EACV,cAAc,EACd,YAAY,GACb,MAAM,UAAU,CAAC;AAClB,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAE/C,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACnD,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEtE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChF,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAEpE,OAAO,EACL,QAAQ,EACR,IAAI,EACJ,EAAE,EACF,KAAK,EACL,MAAM,EACN,MAAM,EACN,IAAI,EACJ,OAAO,EACP,GAAG,EACH,KAAK,EACL,MAAM,EACN,cAAc,GACf,MAAM,UAAU,CAAC;AAElB,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,UAAU,EACV,cAAc,EACd,YAAY,GACb,MAAM,UAAU,CAAC;AAClB,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAE/C,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACnD,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEtE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChF,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAEpE,OAAO,EACL,QAAQ,EACR,IAAI,EACJ,EAAE,EACF,KAAK,EACL,MAAM,EACN,MAAM,EACN,IAAI,EACJ,OAAO,EACP,GAAG,EACH,KAAK,EACL,MAAM,EACN,cAAc,GACf,MAAM,UAAU,CAAC;AAElB,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@unif/react-native-design",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.35.0",
|
|
4
4
|
"description": "Unif React Native 设计系统:基础组件、主题、字体和图标",
|
|
5
5
|
"main": "./lib/module/index.js",
|
|
6
6
|
"types": "./lib/typescript/src/index.d.ts",
|
|
@@ -79,6 +79,7 @@
|
|
|
79
79
|
},
|
|
80
80
|
"devDependencies": {
|
|
81
81
|
"@babel/core": "^7.29.7",
|
|
82
|
+
"@callstack/liquid-glass": "0.8.2",
|
|
82
83
|
"@commitlint/config-conventional": "^21.0.1",
|
|
83
84
|
"@eslint/compat": "^2.0.3",
|
|
84
85
|
"@eslint/eslintrc": "^3.3.5",
|
|
@@ -91,7 +92,6 @@
|
|
|
91
92
|
"@react-native/jest-preset": "0.86.3",
|
|
92
93
|
"@react-native/metro-config": "0.86.3",
|
|
93
94
|
"@release-it/conventional-changelog": "^11.0.0",
|
|
94
|
-
"@sbaiahmed1/react-native-blur": "6.0.1",
|
|
95
95
|
"@types/react": "^19.2.0",
|
|
96
96
|
"commitlint": "^21.0.1",
|
|
97
97
|
"del-cli": "^7.0.0",
|
|
@@ -118,7 +118,7 @@
|
|
|
118
118
|
"typescript": "^6.0.2"
|
|
119
119
|
},
|
|
120
120
|
"peerDependencies": {
|
|
121
|
-
"@
|
|
121
|
+
"@callstack/liquid-glass": ">=0.8.2 <0.9.0",
|
|
122
122
|
"react": ">=19.2.3 <20.0.0",
|
|
123
123
|
"react-native": ">=0.86.0",
|
|
124
124
|
"react-native-gesture-handler": ">=3.0.0 <4.0.0",
|
|
@@ -1,15 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Text, View } from 'react-native';
|
|
3
|
-
import {
|
|
3
|
+
import { GlassLayer } from '../../ui/GlassLayer';
|
|
4
4
|
import { useThemedStyles } from '../../../theme';
|
|
5
5
|
import { makeGlassStatsStyles } from './styles';
|
|
6
6
|
import type { GlassStatsProps } from './types';
|
|
7
7
|
|
|
8
8
|
/**
|
|
9
|
-
* 玻璃数据条 ——
|
|
10
|
-
*
|
|
11
|
-
* BlurLayer 接管 backdrop 双层结构(BlurView soft + glassTintLight tint),
|
|
12
|
-
* blurType 跟 scheme 自动切。
|
|
9
|
+
* 玻璃数据条 —— GlassLayer 通透材质 + 内部 N 列数据。
|
|
10
|
+
* 材质、主题和平台降级由 GlassLayer 接管。
|
|
13
11
|
*/
|
|
14
12
|
export function GlassStats({
|
|
15
13
|
items,
|
|
@@ -23,7 +21,7 @@ export function GlassStats({
|
|
|
23
21
|
// 单层 overflow + shadow 在 iOS 上 shadow 完全不可见。
|
|
24
22
|
<View style={[styles.glassShell, style]} testID={testID}>
|
|
25
23
|
<View style={styles.glass}>
|
|
26
|
-
<
|
|
24
|
+
<GlassLayer effect="clear" style={styles.glassLayer} />
|
|
27
25
|
{/* 顶部 1px inset 白高光,让数据条顶部"凸起" */}
|
|
28
26
|
<View style={styles.topHighlight} pointerEvents="none" />
|
|
29
27
|
<View style={styles.inner}>
|
|
@@ -9,11 +9,13 @@ import type { ColorTokens, ShadowTokens } from '../../../theme';
|
|
|
9
9
|
* iOS Core Animation `masksToBounds=true` 会裁掉 outer shadow。
|
|
10
10
|
* - `glass`:内层承担 borderRadius + overflow:hidden + border 边线。
|
|
11
11
|
*
|
|
12
|
-
*
|
|
12
|
+
* 玻璃材质与平台降级由 `<GlassLayer effect="clear"/>` 接管。 */
|
|
13
13
|
export const makeGlassStatsStyles = (c: ColorTokens, s: ShadowTokens) => {
|
|
14
14
|
/** count 数字 mono display 字号,无对应 type token,保留 rf(20) 走字号缩放(非 r)。 */
|
|
15
15
|
const countSize = rf(20);
|
|
16
16
|
return StyleSheet.create({
|
|
17
|
+
// LiquidGlassView 需要自身圆角,父容器的 overflow 裁切不足以定义材质轮廓。
|
|
18
|
+
glassLayer: { borderRadius: radius['2xl'] },
|
|
17
19
|
glassShell: {
|
|
18
20
|
borderRadius: radius['2xl'],
|
|
19
21
|
...s.glassBar,
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { StyleSheet } from 'react-native';
|
|
3
|
+
import {
|
|
4
|
+
LiquidGlassView,
|
|
5
|
+
isLiquidGlassSupported,
|
|
6
|
+
} from '@callstack/liquid-glass';
|
|
7
|
+
import { useColors, useTheme } from '../../../theme';
|
|
8
|
+
import type { GlassLayerProps } from './types';
|
|
9
|
+
|
|
10
|
+
/** 装饰玻璃层;不支持原生材质的平台使用主题半透明背景。 */
|
|
11
|
+
export function GlassLayer({
|
|
12
|
+
effect = 'regular',
|
|
13
|
+
tintColor,
|
|
14
|
+
style,
|
|
15
|
+
testID,
|
|
16
|
+
}: GlassLayerProps): React.JSX.Element {
|
|
17
|
+
const c = useColors();
|
|
18
|
+
const { scheme } = useTheme();
|
|
19
|
+
const resolvedTint =
|
|
20
|
+
tintColor ?? (effect === 'clear' ? c.glassTintLight : c.sheetBackdrop);
|
|
21
|
+
|
|
22
|
+
return (
|
|
23
|
+
<LiquidGlassView
|
|
24
|
+
// 支持标记也可能因宿主设计兼容设置关闭,必须显式禁用原生材质。
|
|
25
|
+
effect={isLiquidGlassSupported ? effect : 'none'}
|
|
26
|
+
tintColor={resolvedTint}
|
|
27
|
+
colorScheme={scheme}
|
|
28
|
+
// 纯装饰层无需材质切换动画,也不引入减少动态效果的额外状态。
|
|
29
|
+
animated={false}
|
|
30
|
+
style={[
|
|
31
|
+
StyleSheet.absoluteFill,
|
|
32
|
+
style,
|
|
33
|
+
!isLiquidGlassSupported && { backgroundColor: resolvedTint },
|
|
34
|
+
]}
|
|
35
|
+
pointerEvents="none"
|
|
36
|
+
accessible={false}
|
|
37
|
+
accessibilityElementsHidden
|
|
38
|
+
importantForAccessibility="no-hide-descendants"
|
|
39
|
+
testID={testID}
|
|
40
|
+
/>
|
|
41
|
+
);
|
|
42
|
+
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { StyleSheet, View, type ViewStyle } from 'react-native';
|
|
3
|
+
import { useColors, useTheme } from '../../../theme';
|
|
4
|
+
import { webGlassBlur } from './constants';
|
|
5
|
+
import type { GlassLayerProps } from './types';
|
|
6
|
+
|
|
7
|
+
/** Web 保留 CSS 玻璃近似效果,不加载原生 Liquid Glass 模块。 */
|
|
8
|
+
export function GlassLayer({
|
|
9
|
+
effect = 'regular',
|
|
10
|
+
tintColor,
|
|
11
|
+
style,
|
|
12
|
+
testID,
|
|
13
|
+
}: GlassLayerProps): React.JSX.Element {
|
|
14
|
+
const c = useColors();
|
|
15
|
+
const { scheme } = useTheme();
|
|
16
|
+
const resolvedTint =
|
|
17
|
+
tintColor ?? (effect === 'clear' ? c.glassTintLight : c.sheetBackdrop);
|
|
18
|
+
// RN 类型不含 CSS backdrop-filter。保留原有饱和度和暗色透明度近似值。
|
|
19
|
+
const webGlassStyle: ViewStyle &
|
|
20
|
+
Pick<React.CSSProperties, 'backdropFilter' | 'WebkitBackdropFilter'> = {
|
|
21
|
+
backdropFilter: `blur(${webGlassBlur[effect]}px) saturate(180%)`,
|
|
22
|
+
WebkitBackdropFilter: `blur(${webGlassBlur[effect]}px) saturate(180%)`,
|
|
23
|
+
backgroundColor: resolvedTint,
|
|
24
|
+
opacity: scheme === 'dark' ? 0.96 : 1,
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
return (
|
|
28
|
+
<View
|
|
29
|
+
style={[StyleSheet.absoluteFill, style, webGlassStyle]}
|
|
30
|
+
pointerEvents="none"
|
|
31
|
+
accessible={false}
|
|
32
|
+
accessibilityElementsHidden
|
|
33
|
+
importantForAccessibility="no-hide-descendants"
|
|
34
|
+
testID={testID}
|
|
35
|
+
/>
|
|
36
|
+
);
|
|
37
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
|
|
2
|
+
|
|
3
|
+
export type GlassEffect = 'clear' | 'regular';
|
|
4
|
+
|
|
5
|
+
export interface GlassLayerProps {
|
|
6
|
+
/** 玻璃材质,默认 regular;clear 更通透。Web 使用对应的 CSS 近似效果。 */
|
|
7
|
+
effect?: GlassEffect;
|
|
8
|
+
/** 默认 clear 使用 glassTintLight,regular 使用 sheetBackdrop;降级时作为背景色。 */
|
|
9
|
+
tintColor?: ColorValue;
|
|
10
|
+
/** 布局、定位与圆角;默认 absoluteFill,材质颜色通过 tintColor 设置。 */
|
|
11
|
+
style?: StyleProp<ViewStyle>;
|
|
12
|
+
/** E2E / 测试定位。 */
|
|
13
|
+
testID?: string;
|
|
14
|
+
}
|
|
@@ -7,8 +7,8 @@ export type {
|
|
|
7
7
|
} from './Avatar';
|
|
8
8
|
export { AvatarGroup } from './AvatarGroup';
|
|
9
9
|
export type { AvatarGroupItem, AvatarGroupProps } from './AvatarGroup';
|
|
10
|
-
export {
|
|
11
|
-
export type {
|
|
10
|
+
export { GlassLayer } from './GlassLayer';
|
|
11
|
+
export type { GlassEffect, GlassLayerProps } from './GlassLayer';
|
|
12
12
|
export { Button } from './Button';
|
|
13
13
|
export type { ButtonProps, ButtonSize, ButtonVariant } from './Button';
|
|
14
14
|
export { Card } from './Card';
|
package/src/theme/colors.ts
CHANGED
|
@@ -61,12 +61,9 @@ export const lightColors = {
|
|
|
61
61
|
glassTintLight: 'rgba(255,255,255,0.55)',
|
|
62
62
|
/** 玻璃容器内部分隔线 —— 暗色翻成对应低透白,保证暗底可见。 */
|
|
63
63
|
glassSeparator: 'rgba(0,0,0,0.08)',
|
|
64
|
-
/**
|
|
65
|
-
* 数值配合 blur.strong(blurAmount=40) 让"玻璃门外区滚动内容透过模糊显示"达成。
|
|
66
|
-
* 跟 glassTintLight 区分:此 token 给"玻璃门外区"语义。 */
|
|
64
|
+
/** 玻璃容器的半透明背景,与轻薄染色 glassTintLight 分别表达表面与覆盖层。 */
|
|
67
65
|
glassSurface: 'rgba(255,255,255,0.20)',
|
|
68
|
-
/** TabBar
|
|
69
|
-
* TabBar 场景配合 blur.soft(blurAmount=10) 主导,语义不同不可复用同一个 alpha。 */
|
|
66
|
+
/** TabBar 的轻薄主题背景;只表达颜色,不定义原生玻璃材质或模糊半径。 */
|
|
70
67
|
tabBarGlassTint: 'rgba(255,255,255,0.10)',
|
|
71
68
|
/** 玻璃胶囊边框(亮 0.18 / 暗 0.14 白透)。 */
|
|
72
69
|
glassBorder: 'rgba(255,255,255,0.18)',
|
|
@@ -170,9 +167,9 @@ export const darkColors: ColorTokens = {
|
|
|
170
167
|
// 暗色 0.06 白透,凸起感由 glassBar 暗色黑 0.35 shadow 补
|
|
171
168
|
glassTintLight: 'rgba(255,255,255,0.06)',
|
|
172
169
|
glassSeparator: 'rgba(255,255,255,0.10)',
|
|
173
|
-
//
|
|
170
|
+
// 暗色玻璃容器沿用深灰半透明背景。
|
|
174
171
|
glassSurface: 'rgba(28,28,30,0.30)',
|
|
175
|
-
//
|
|
172
|
+
// TabBar 沿用独立的轻薄染色。
|
|
176
173
|
tabBarGlassTint: 'rgba(28,28,30,0.18)',
|
|
177
174
|
glassBorder: 'rgba(255,255,255,0.14)',
|
|
178
175
|
glassHighlight: 'rgba(255,255,255,0.24)',
|
package/src/theme/index.ts
CHANGED
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import { StyleSheet, View } from 'react-native';
|
|
5
|
-
import { BlurView } from '@sbaiahmed1/react-native-blur';
|
|
6
|
-
import { blur as blurTokens, useColors, useTheme } from "../../../theme/index.js";
|
|
7
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
|
-
/** Blur backdrop 双层 —— BlurView + tint。
|
|
9
|
-
*
|
|
10
|
-
* blurType 跟 scheme 自动切(亮 'light' / 暗 'dark',避免暗色奶白雾)。
|
|
11
|
-
*
|
|
12
|
-
* - `'soft'` 玻璃数据条 / 小区域
|
|
13
|
-
* - `'strong'` 焦点引导 backdrop(sheet 类浮层) */
|
|
14
|
-
export function BlurLayer({
|
|
15
|
-
intensity,
|
|
16
|
-
tint,
|
|
17
|
-
style,
|
|
18
|
-
testID
|
|
19
|
-
}) {
|
|
20
|
-
const c = useColors();
|
|
21
|
-
const {
|
|
22
|
-
scheme
|
|
23
|
-
} = useTheme();
|
|
24
|
-
const blurType = scheme === 'dark' ? 'dark' : 'light';
|
|
25
|
-
const defaultTint = intensity === 'strong' ? c.sheetBackdrop : c.glassTintLight;
|
|
26
|
-
return /*#__PURE__*/_jsxs(View, {
|
|
27
|
-
style: [StyleSheet.absoluteFill, style],
|
|
28
|
-
pointerEvents: "none",
|
|
29
|
-
testID: testID,
|
|
30
|
-
children: [/*#__PURE__*/_jsx(BlurView, {
|
|
31
|
-
style: StyleSheet.absoluteFill,
|
|
32
|
-
blurType: blurType,
|
|
33
|
-
blurAmount: blurTokens[intensity]
|
|
34
|
-
// iOS「降低透明度」开启时 BlurView 用纯色替换模糊;库默认 #FFFFFF 在暗色 scheme
|
|
35
|
-
// 下整面刺眼白底。传随 scheme 的 surface 色,与下方 tint 层视觉一致([M-6])。
|
|
36
|
-
,
|
|
37
|
-
reducedTransparencyFallbackColor: c.surface
|
|
38
|
-
}), /*#__PURE__*/_jsx(View, {
|
|
39
|
-
style: [StyleSheet.absoluteFill, {
|
|
40
|
-
backgroundColor: tint ?? defaultTint
|
|
41
|
-
}]
|
|
42
|
-
})]
|
|
43
|
-
});
|
|
44
|
-
}
|
|
45
|
-
//# sourceMappingURL=BlurLayer.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React","StyleSheet","View","BlurView","blur","blurTokens","useColors","useTheme","jsx","_jsx","jsxs","_jsxs","BlurLayer","intensity","tint","style","testID","c","scheme","blurType","defaultTint","sheetBackdrop","glassTintLight","absoluteFill","pointerEvents","children","blurAmount","reducedTransparencyFallbackColor","surface","backgroundColor"],"sourceRoot":"../../../../../src","sources":["components/ui/BlurLayer/BlurLayer.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,SAASC,QAAQ,QAAQ,+BAA+B;AACxD,SAASC,IAAI,IAAIC,UAAU,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,yBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGzE;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,SAASA,CAAC;EACxBC,SAAS;EACTC,IAAI;EACJC,KAAK;EACLC;AACc,CAAC,EAAqB;EACpC,MAAMC,CAAC,GAAGX,SAAS,CAAC,CAAC;EACrB,MAAM;IAAEY;EAAO,CAAC,GAAGX,QAAQ,CAAC,CAAC;EAC7B,MAAMY,QAAQ,GAAGD,MAAM,KAAK,MAAM,GAAG,MAAM,GAAG,OAAO;EACrD,MAAME,WAAW,GACfP,SAAS,KAAK,QAAQ,GAAGI,CAAC,CAACI,aAAa,GAAGJ,CAAC,CAACK,cAAc;EAE7D,oBACEX,KAAA,CAACT,IAAI;IACHa,KAAK,EAAE,CAACd,UAAU,CAACsB,YAAY,EAAER,KAAK,CAAE;IACxCS,aAAa,EAAC,MAAM;IACpBR,MAAM,EAAEA,MAAO;IAAAS,QAAA,gBAEfhB,IAAA,CAACN,QAAQ;MACPY,KAAK,EAAEd,UAAU,CAACsB,YAAa;MAC/BJ,QAAQ,EAAEA,QAAS;MACnBO,UAAU,EAAErB,UAAU,CAACQ,SAAS;MAChC;MACA;MAAA;MACAc,gCAAgC,EAAEV,CAAC,CAACW;IAAQ,CAC7C,CAAC,eACFnB,IAAA,CAACP,IAAI;MACHa,KAAK,EAAE,CACLd,UAAU,CAACsB,YAAY,EACvB;QAAEM,eAAe,EAAEf,IAAI,IAAIM;MAAY,CAAC;IACxC,CACH,CAAC;EAAA,CACE,CAAC;AAEX","ignoreList":[]}
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Web 端 BlurLayer —— CSS `backdrop-filter` 代替 native BlurView。
|
|
5
|
-
*
|
|
6
|
-
* `@sbaiahmed1/react-native-blur` 不支持 web(库内部 codegenNativeComponent
|
|
7
|
-
* 在浏览器会炸 "is not a function",见上游 issue #79)。docusaurus-rnw plugin
|
|
8
|
-
* 配 `extensions: ['.web.tsx', ...]` 优先,webpack 选这份;Metro 不识别该后缀,
|
|
9
|
-
* iOS / Android 走原 `BlurLayer.tsx`。
|
|
10
|
-
*/
|
|
11
|
-
import React from 'react';
|
|
12
|
-
import { StyleSheet, View } from 'react-native';
|
|
13
|
-
import { blur as blurTokens, useColors, useTheme } from "../../../theme/index.js";
|
|
14
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
15
|
-
export function BlurLayer({
|
|
16
|
-
intensity,
|
|
17
|
-
tint,
|
|
18
|
-
style,
|
|
19
|
-
testID
|
|
20
|
-
}) {
|
|
21
|
-
const c = useColors();
|
|
22
|
-
const {
|
|
23
|
-
scheme
|
|
24
|
-
} = useTheme();
|
|
25
|
-
const blurAmount = blurTokens[intensity];
|
|
26
|
-
const defaultTint = intensity === 'strong' ? c.sheetBackdrop : c.glassTintLight;
|
|
27
|
-
// RN style typedef 不识别 web-only 属性,cast 绕过 TS;RN-Web 浏览器侧原样输出。
|
|
28
|
-
// [L-15] saturate(180%):苹果 HIG 玻璃效果的标准值,增强模糊后的颜色鲜艳度,
|
|
29
|
-
// 与 macOS / iOS 系统 vibrancy 视觉一致;降低会让玻璃面板显得灰暗脱色。
|
|
30
|
-
// [L-15] opacity:0.96(暗色):暗色 scheme 下 backdrop-filter 在 Chromium 中
|
|
31
|
-
// opacity=1 时存在渲染 artifact(模糊层与底层内容边界锯齿),降到 0.96 消除;
|
|
32
|
-
// 亮色 scheme 不受影响故保持 1。native 端 BlurLayer.tsx 用双层 View 实现,
|
|
33
|
-
// 语义等价(tint 层覆盖 BlurView),无需此 opacity 补丁。
|
|
34
|
-
const webBlurStyle = {
|
|
35
|
-
backdropFilter: `blur(${blurAmount}px) saturate(180%)`,
|
|
36
|
-
WebkitBackdropFilter: `blur(${blurAmount}px) saturate(180%)`,
|
|
37
|
-
backgroundColor: tint ?? defaultTint,
|
|
38
|
-
opacity: scheme === 'dark' ? 0.96 : 1
|
|
39
|
-
};
|
|
40
|
-
return /*#__PURE__*/_jsx(View, {
|
|
41
|
-
style: [StyleSheet.absoluteFill, webBlurStyle, style],
|
|
42
|
-
pointerEvents: "none",
|
|
43
|
-
testID: testID
|
|
44
|
-
});
|
|
45
|
-
}
|
|
46
|
-
//# sourceMappingURL=BlurLayer.web.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React","StyleSheet","View","blur","blurTokens","useColors","useTheme","jsx","_jsx","BlurLayer","intensity","tint","style","testID","c","scheme","blurAmount","defaultTint","sheetBackdrop","glassTintLight","webBlurStyle","backdropFilter","WebkitBackdropFilter","backgroundColor","opacity","absoluteFill","pointerEvents"],"sourceRoot":"../../../../../src","sources":["components/ui/BlurLayer/BlurLayer.web.tsx"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,IAAI,QAAwC,cAAc;AAC/E,SAASC,IAAI,IAAIC,UAAU,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,yBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGzE,OAAO,SAASC,SAASA,CAAC;EACxBC,SAAS;EACTC,IAAI;EACJC,KAAK;EACLC;AACc,CAAC,EAAqB;EACpC,MAAMC,CAAC,GAAGT,SAAS,CAAC,CAAC;EACrB,MAAM;IAAEU;EAAO,CAAC,GAAGT,QAAQ,CAAC,CAAC;EAC7B,MAAMU,UAAU,GAAGZ,UAAU,CAACM,SAAS,CAAC;EACxC,MAAMO,WAAW,GACfP,SAAS,KAAK,QAAQ,GAAGI,CAAC,CAACI,aAAa,GAAGJ,CAAC,CAACK,cAAc;EAC7D;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAMC,YAAY,GAAG;IACnBC,cAAc,EAAE,QAAQL,UAAU,oBAAoB;IACtDM,oBAAoB,EAAE,QAAQN,UAAU,oBAAoB;IAC5DO,eAAe,EAAEZ,IAAI,IAAIM,WAAW;IACpCO,OAAO,EAAET,MAAM,KAAK,MAAM,GAAG,IAAI,GAAG;EACtC,CAAoC;EAEpC,oBACEP,IAAA,CAACN,IAAI;IACHU,KAAK,EAAE,CAACX,UAAU,CAACwB,YAAY,EAAEL,YAAY,EAAER,KAAK,CAAE;IACtDc,aAAa,EAAC,MAAM;IACpBb,MAAM,EAAEA;EAAO,CAChB,CAAC;AAEN","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["BlurLayer"],"sourceRoot":"../../../../../src","sources":["components/ui/BlurLayer/index.ts"],"mappings":";;AAAA,SAASA,SAAS,QAAQ,aAAa","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["components/ui/BlurLayer/types.ts"],"mappings":"","ignoreList":[]}
|
package/lib/module/theme/blur.js
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
/** Blur intensity tokens —— backdrop-filter 二档语义化封装。
|
|
4
|
-
*
|
|
5
|
-
* 数值是 `@sbaiahmed1/react-native-blur` 的 BlurView `blurAmount` prop(0-100)。 */
|
|
6
|
-
export const blur = {
|
|
7
|
-
/** 玻璃数据条 / 小区域玻璃感。 */
|
|
8
|
-
soft: 10,
|
|
9
|
-
/** 焦点引导大面积 backdrop。 */
|
|
10
|
-
strong: 40
|
|
11
|
-
};
|
|
12
|
-
//# sourceMappingURL=blur.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["blur","soft","strong"],"sourceRoot":"../../../src","sources":["theme/blur.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAO,MAAMA,IAAI,GAAG;EAClB;EACAC,IAAI,EAAE,EAAE;EACR;EACAC,MAAM,EAAE;AACV,CAAU","ignoreList":[]}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { BlurLayerProps } from './types';
|
|
3
|
-
/** Blur backdrop 双层 —— BlurView + tint。
|
|
4
|
-
*
|
|
5
|
-
* blurType 跟 scheme 自动切(亮 'light' / 暗 'dark',避免暗色奶白雾)。
|
|
6
|
-
*
|
|
7
|
-
* - `'soft'` 玻璃数据条 / 小区域
|
|
8
|
-
* - `'strong'` 焦点引导 backdrop(sheet 类浮层) */
|
|
9
|
-
export declare function BlurLayer({ intensity, tint, style, testID, }: BlurLayerProps): React.JSX.Element;
|
|
10
|
-
//# sourceMappingURL=BlurLayer.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BlurLayer.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/BlurLayer/BlurLayer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C;;;;;4CAK4C;AAC5C,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,IAAI,EACJ,KAAK,EACL,MAAM,GACP,EAAE,cAAc,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA6BpC"}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Web 端 BlurLayer —— CSS `backdrop-filter` 代替 native BlurView。
|
|
3
|
-
*
|
|
4
|
-
* `@sbaiahmed1/react-native-blur` 不支持 web(库内部 codegenNativeComponent
|
|
5
|
-
* 在浏览器会炸 "is not a function",见上游 issue #79)。docusaurus-rnw plugin
|
|
6
|
-
* 配 `extensions: ['.web.tsx', ...]` 优先,webpack 选这份;Metro 不识别该后缀,
|
|
7
|
-
* iOS / Android 走原 `BlurLayer.tsx`。
|
|
8
|
-
*/
|
|
9
|
-
import React from 'react';
|
|
10
|
-
import type { BlurLayerProps } from './types';
|
|
11
|
-
export declare function BlurLayer({ intensity, tint, style, testID, }: BlurLayerProps): React.JSX.Element;
|
|
12
|
-
//# sourceMappingURL=BlurLayer.web.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BlurLayer.web.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/BlurLayer/BlurLayer.web.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,IAAI,EACJ,KAAK,EACL,MAAM,GACP,EAAE,cAAc,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA2BpC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/BlurLayer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import type { StyleProp, ViewStyle } from 'react-native';
|
|
2
|
-
import type { BlurIntensity } from '../../../theme';
|
|
3
|
-
export type BlurLayerProps = {
|
|
4
|
-
/** 模糊强度,对齐设计稿 token:
|
|
5
|
-
* - 'soft' = blurAmount 10,玻璃数据条 / 小区域玻璃感
|
|
6
|
-
* - 'strong' = blurAmount 40,焦点引导 backdrop */
|
|
7
|
-
intensity: BlurIntensity;
|
|
8
|
-
/** Tint override(不传按 intensity 推:soft → c.glassTintLight / strong → c.sheetBackdrop) */
|
|
9
|
-
tint?: string;
|
|
10
|
-
/** 附加样式;默认 absoluteFill,caller 通常不需要传 */
|
|
11
|
-
style?: StyleProp<ViewStyle>;
|
|
12
|
-
/** E2E / 测试定位 */
|
|
13
|
-
testID?: string;
|
|
14
|
-
};
|
|
15
|
-
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/BlurLayer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEpD,MAAM,MAAM,cAAc,GAAG;IAC3B;;mDAE+C;IAC/C,SAAS,EAAE,aAAa,CAAC;IACzB,wFAAwF;IACxF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,iBAAiB;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC"}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
/** Blur intensity tokens —— backdrop-filter 二档语义化封装。
|
|
2
|
-
*
|
|
3
|
-
* 数值是 `@sbaiahmed1/react-native-blur` 的 BlurView `blurAmount` prop(0-100)。 */
|
|
4
|
-
export declare const blur: {
|
|
5
|
-
/** 玻璃数据条 / 小区域玻璃感。 */
|
|
6
|
-
readonly soft: 10;
|
|
7
|
-
/** 焦点引导大面积 backdrop。 */
|
|
8
|
-
readonly strong: 40;
|
|
9
|
-
};
|
|
10
|
-
export type BlurIntensity = keyof typeof blur;
|
|
11
|
-
//# sourceMappingURL=blur.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"blur.d.ts","sourceRoot":"","sources":["../../../../src/theme/blur.ts"],"names":[],"mappings":"AAAA;;+EAE+E;AAC/E,eAAO,MAAM,IAAI;IACf,sBAAsB;;IAEtB,wBAAwB;;CAEhB,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,IAAI,CAAC"}
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { StyleSheet, View } from 'react-native';
|
|
3
|
-
import { BlurView } from '@sbaiahmed1/react-native-blur';
|
|
4
|
-
import { blur as blurTokens, useColors, useTheme } from '../../../theme';
|
|
5
|
-
import type { BlurLayerProps } from './types';
|
|
6
|
-
|
|
7
|
-
/** Blur backdrop 双层 —— BlurView + tint。
|
|
8
|
-
*
|
|
9
|
-
* blurType 跟 scheme 自动切(亮 'light' / 暗 'dark',避免暗色奶白雾)。
|
|
10
|
-
*
|
|
11
|
-
* - `'soft'` 玻璃数据条 / 小区域
|
|
12
|
-
* - `'strong'` 焦点引导 backdrop(sheet 类浮层) */
|
|
13
|
-
export function BlurLayer({
|
|
14
|
-
intensity,
|
|
15
|
-
tint,
|
|
16
|
-
style,
|
|
17
|
-
testID,
|
|
18
|
-
}: BlurLayerProps): React.JSX.Element {
|
|
19
|
-
const c = useColors();
|
|
20
|
-
const { scheme } = useTheme();
|
|
21
|
-
const blurType = scheme === 'dark' ? 'dark' : 'light';
|
|
22
|
-
const defaultTint =
|
|
23
|
-
intensity === 'strong' ? c.sheetBackdrop : c.glassTintLight;
|
|
24
|
-
|
|
25
|
-
return (
|
|
26
|
-
<View
|
|
27
|
-
style={[StyleSheet.absoluteFill, style]}
|
|
28
|
-
pointerEvents="none"
|
|
29
|
-
testID={testID}
|
|
30
|
-
>
|
|
31
|
-
<BlurView
|
|
32
|
-
style={StyleSheet.absoluteFill}
|
|
33
|
-
blurType={blurType}
|
|
34
|
-
blurAmount={blurTokens[intensity]}
|
|
35
|
-
// iOS「降低透明度」开启时 BlurView 用纯色替换模糊;库默认 #FFFFFF 在暗色 scheme
|
|
36
|
-
// 下整面刺眼白底。传随 scheme 的 surface 色,与下方 tint 层视觉一致([M-6])。
|
|
37
|
-
reducedTransparencyFallbackColor={c.surface}
|
|
38
|
-
/>
|
|
39
|
-
<View
|
|
40
|
-
style={[
|
|
41
|
-
StyleSheet.absoluteFill,
|
|
42
|
-
{ backgroundColor: tint ?? defaultTint },
|
|
43
|
-
]}
|
|
44
|
-
/>
|
|
45
|
-
</View>
|
|
46
|
-
);
|
|
47
|
-
}
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Web 端 BlurLayer —— CSS `backdrop-filter` 代替 native BlurView。
|
|
3
|
-
*
|
|
4
|
-
* `@sbaiahmed1/react-native-blur` 不支持 web(库内部 codegenNativeComponent
|
|
5
|
-
* 在浏览器会炸 "is not a function",见上游 issue #79)。docusaurus-rnw plugin
|
|
6
|
-
* 配 `extensions: ['.web.tsx', ...]` 优先,webpack 选这份;Metro 不识别该后缀,
|
|
7
|
-
* iOS / Android 走原 `BlurLayer.tsx`。
|
|
8
|
-
*/
|
|
9
|
-
import React from 'react';
|
|
10
|
-
import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
|
|
11
|
-
import { blur as blurTokens, useColors, useTheme } from '../../../theme';
|
|
12
|
-
import type { BlurLayerProps } from './types';
|
|
13
|
-
|
|
14
|
-
export function BlurLayer({
|
|
15
|
-
intensity,
|
|
16
|
-
tint,
|
|
17
|
-
style,
|
|
18
|
-
testID,
|
|
19
|
-
}: BlurLayerProps): React.JSX.Element {
|
|
20
|
-
const c = useColors();
|
|
21
|
-
const { scheme } = useTheme();
|
|
22
|
-
const blurAmount = blurTokens[intensity];
|
|
23
|
-
const defaultTint =
|
|
24
|
-
intensity === 'strong' ? c.sheetBackdrop : c.glassTintLight;
|
|
25
|
-
// RN style typedef 不识别 web-only 属性,cast 绕过 TS;RN-Web 浏览器侧原样输出。
|
|
26
|
-
// [L-15] saturate(180%):苹果 HIG 玻璃效果的标准值,增强模糊后的颜色鲜艳度,
|
|
27
|
-
// 与 macOS / iOS 系统 vibrancy 视觉一致;降低会让玻璃面板显得灰暗脱色。
|
|
28
|
-
// [L-15] opacity:0.96(暗色):暗色 scheme 下 backdrop-filter 在 Chromium 中
|
|
29
|
-
// opacity=1 时存在渲染 artifact(模糊层与底层内容边界锯齿),降到 0.96 消除;
|
|
30
|
-
// 亮色 scheme 不受影响故保持 1。native 端 BlurLayer.tsx 用双层 View 实现,
|
|
31
|
-
// 语义等价(tint 层覆盖 BlurView),无需此 opacity 补丁。
|
|
32
|
-
const webBlurStyle = {
|
|
33
|
-
backdropFilter: `blur(${blurAmount}px) saturate(180%)`,
|
|
34
|
-
WebkitBackdropFilter: `blur(${blurAmount}px) saturate(180%)`,
|
|
35
|
-
backgroundColor: tint ?? defaultTint,
|
|
36
|
-
opacity: scheme === 'dark' ? 0.96 : 1,
|
|
37
|
-
} as unknown as StyleProp<ViewStyle>;
|
|
38
|
-
|
|
39
|
-
return (
|
|
40
|
-
<View
|
|
41
|
-
style={[StyleSheet.absoluteFill, webBlurStyle, style]}
|
|
42
|
-
pointerEvents="none"
|
|
43
|
-
testID={testID}
|
|
44
|
-
/>
|
|
45
|
-
);
|
|
46
|
-
}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import type { StyleProp, ViewStyle } from 'react-native';
|
|
2
|
-
import type { BlurIntensity } from '../../../theme';
|
|
3
|
-
|
|
4
|
-
export type BlurLayerProps = {
|
|
5
|
-
/** 模糊强度,对齐设计稿 token:
|
|
6
|
-
* - 'soft' = blurAmount 10,玻璃数据条 / 小区域玻璃感
|
|
7
|
-
* - 'strong' = blurAmount 40,焦点引导 backdrop */
|
|
8
|
-
intensity: BlurIntensity;
|
|
9
|
-
/** Tint override(不传按 intensity 推:soft → c.glassTintLight / strong → c.sheetBackdrop) */
|
|
10
|
-
tint?: string;
|
|
11
|
-
/** 附加样式;默认 absoluteFill,caller 通常不需要传 */
|
|
12
|
-
style?: StyleProp<ViewStyle>;
|
|
13
|
-
/** E2E / 测试定位 */
|
|
14
|
-
testID?: string;
|
|
15
|
-
};
|
package/src/theme/blur.ts
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
/** Blur intensity tokens —— backdrop-filter 二档语义化封装。
|
|
2
|
-
*
|
|
3
|
-
* 数值是 `@sbaiahmed1/react-native-blur` 的 BlurView `blurAmount` prop(0-100)。 */
|
|
4
|
-
export const blur = {
|
|
5
|
-
/** 玻璃数据条 / 小区域玻璃感。 */
|
|
6
|
-
soft: 10,
|
|
7
|
-
/** 焦点引导大面积 backdrop。 */
|
|
8
|
-
strong: 40,
|
|
9
|
-
} as const;
|
|
10
|
-
|
|
11
|
-
export type BlurIntensity = keyof typeof blur;
|
|
File without changes
|