react-native-terra-ui 0.7.1 → 0.7.2
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/CHANGELOG.md +6 -0
- package/lib/module/components/header/parts/HeaderGradientOverlay.js +6 -5
- package/lib/module/components/header/parts/HeaderGradientOverlay.js.map +1 -1
- package/lib/typescript/src/components/header/parts/HeaderGradientOverlay.d.ts +1 -1
- package/lib/typescript/src/components/header/parts/HeaderGradientOverlay.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/header/parts/HeaderGradientOverlay.tsx +5 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [0.7.2](https://github.com/earthlin9/react-native-terra-ui/compare/v0.7.1...v0.7.2) (2026-09-06)
|
|
4
|
+
|
|
5
|
+
### Bug Fixes
|
|
6
|
+
|
|
7
|
+
* **ui:** [header] soften the scroll-edge fade further ([643dde0](https://github.com/earthlin9/react-native-terra-ui/commit/643dde0b636165ea6c01c5fb653aeea810df3ab9))
|
|
8
|
+
|
|
3
9
|
## [0.7.1](https://github.com/earthlin9/react-native-terra-ui/compare/v0.7.0...v0.7.1) (2026-09-06)
|
|
4
10
|
|
|
5
11
|
### Bug Fixes
|
|
@@ -11,7 +11,7 @@ import Svg, { Defs, Rect, Stop, LinearGradient as SvgLinearGradient } from "reac
|
|
|
11
11
|
* finish in open space, so the header releases content instead of cutting it.
|
|
12
12
|
*/
|
|
13
13
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
|
-
export const HEADER_FADE_EXTENT =
|
|
14
|
+
export const HEADER_FADE_EXTENT = 8;
|
|
15
15
|
|
|
16
16
|
/**
|
|
17
17
|
* Where the fade begins, as a fraction of the overlay's height — the bar plus
|
|
@@ -29,10 +29,10 @@ const FADE_START = 0.5;
|
|
|
29
29
|
* of bands on an 8-bit display; above ~14 the extra stops cost SVG parse time
|
|
30
30
|
* with nothing visible in return.
|
|
31
31
|
*/
|
|
32
|
-
const FADE_STOPS =
|
|
32
|
+
const FADE_STOPS = 4;
|
|
33
33
|
|
|
34
34
|
/** Ceiling on the fade's opacity — see {@link alphaAt}. */
|
|
35
|
-
const MAX_FADE_ALPHA = 0.
|
|
35
|
+
const MAX_FADE_ALPHA = 0.65;
|
|
36
36
|
|
|
37
37
|
/**
|
|
38
38
|
* Raised cosine, capped at {@link MAX_FADE_ALPHA}, reaching 0 at the overlay's
|
|
@@ -63,9 +63,10 @@ const STOPS = [{
|
|
|
63
63
|
length: FADE_STOPS
|
|
64
64
|
}, (_, index) => {
|
|
65
65
|
const t = index / (FADE_STOPS - 1);
|
|
66
|
+
const offset = FADE_START + t * (1 - FADE_START);
|
|
66
67
|
return {
|
|
67
|
-
offset
|
|
68
|
-
opacity: alphaAt(t)
|
|
68
|
+
offset,
|
|
69
|
+
opacity: offset === 1 ? 0 : alphaAt(t)
|
|
69
70
|
};
|
|
70
71
|
})];
|
|
71
72
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useId","Svg","Defs","Rect","Stop","LinearGradient","SvgLinearGradient","jsx","_jsx","jsxs","_jsxs","HEADER_FADE_EXTENT","FADE_START","FADE_STOPS","MAX_FADE_ALPHA","alphaAt","t","Math","cos","PI","STOPS","offset","opacity","Array","from","length","_","index","HeaderGradientOverlay","color","gradientId","height","width","children","id","x1","y1","x2","y2","map","stop","stopColor","stopOpacity","fill"],"sourceRoot":"../../../../../src","sources":["components/header/parts/HeaderGradientOverlay.tsx"],"mappings":";;AAAA,SAASA,KAAK,QAAQ,OAAO;AAE7B,OAAOC,GAAG,IAAIC,IAAI,EAAEC,IAAI,EAAEC,IAAI,EAAEC,cAAc,IAAIC,iBAAiB,QAAQ,kBAAkB;;AAE7F;AACA;AACA;AACA;AACA;AACA;AACA;AANA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAOA,OAAO,MAAMC,kBAAkB,GAAG,
|
|
1
|
+
{"version":3,"names":["useId","Svg","Defs","Rect","Stop","LinearGradient","SvgLinearGradient","jsx","_jsx","jsxs","_jsxs","HEADER_FADE_EXTENT","FADE_START","FADE_STOPS","MAX_FADE_ALPHA","alphaAt","t","Math","cos","PI","STOPS","offset","opacity","Array","from","length","_","index","HeaderGradientOverlay","color","gradientId","height","width","children","id","x1","y1","x2","y2","map","stop","stopColor","stopOpacity","fill"],"sourceRoot":"../../../../../src","sources":["components/header/parts/HeaderGradientOverlay.tsx"],"mappings":";;AAAA,SAASA,KAAK,QAAQ,OAAO;AAE7B,OAAOC,GAAG,IAAIC,IAAI,EAAEC,IAAI,EAAEC,IAAI,EAAEC,cAAc,IAAIC,iBAAiB,QAAQ,kBAAkB;;AAE7F;AACA;AACA;AACA;AACA;AACA;AACA;AANA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAOA,OAAO,MAAMC,kBAAkB,GAAG,CAAC;;AAEnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,UAAU,GAAG,GAAG;;AAEtB;AACA;AACA;AACA;AACA;AACA,MAAMC,UAAU,GAAG,CAAC;;AAEpB;AACA,MAAMC,cAAc,GAAG,IAAI;;AAE3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,OAAO,GAAIC,CAAS,IAAK,CAAC,CAAC,GAAGC,IAAI,CAACC,GAAG,CAACD,IAAI,CAACE,EAAE,GAAGH,CAAC,CAAC,GAAGF,cAAc,IAAI,CAAC;;AAE/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMM,KAAK,GAAG,CACZ;EAAEC,MAAM,EAAE,CAAC;EAAEC,OAAO,EAAE;AAAE,CAAC,EACzB,GAAGC,KAAK,CAACC,IAAI,CAAC;EAAEC,MAAM,EAAEZ;AAAW,CAAC,EAAE,CAACa,CAAC,EAAEC,KAAK,KAAK;EAClD,MAAMX,CAAC,GAAGW,KAAK,IAAId,UAAU,GAAG,CAAC,CAAC;EAClC,MAAMQ,MAAM,GAAGT,UAAU,GAAGI,CAAC,IAAI,CAAC,GAAGJ,UAAU,CAAC;EAChD,OAAO;IAAES,MAAM;IAAEC,OAAO,EAAED,MAAM,KAAK,CAAC,GAAG,CAAC,GAAGN,OAAO,CAACC,CAAC;EAAE,CAAC;AAC3D,CAAC,CAAC,CACH;AAOD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASY,qBAAqBA,CAAC;EAAEC;AAAkC,CAAC,EAAE;EAC3E,MAAMC,UAAU,GAAG9B,KAAK,CAAC,CAAC;EAE1B,oBACEU,KAAA,CAACT,GAAG;IAAC8B,MAAM,EAAC,MAAM;IAACC,KAAK,EAAC,MAAM;IAAAC,QAAA,gBAC7BzB,IAAA,CAACN,IAAI;MAAA+B,QAAA,eACHzB,IAAA,CAACF,iBAAiB;QAAC4B,EAAE,EAAEJ,UAAW;QAACK,EAAE,EAAC,GAAG;QAACC,EAAE,EAAC,GAAG;QAACC,EAAE,EAAC,GAAG;QAACC,EAAE,EAAC,GAAG;QAAAL,QAAA,EAC3Db,KAAK,CAACmB,GAAG,CAAEC,IAAI,iBACdhC,IAAA,CAACJ,IAAI;UAAmBiB,MAAM,EAAEmB,IAAI,CAACnB,MAAO;UAACoB,SAAS,EAAEZ,KAAM;UAACa,WAAW,EAAEF,IAAI,CAAClB;QAAQ,GAA9EkB,IAAI,CAACnB,MAA2E,CAC5F;MAAC,CACe;IAAC,CAChB,CAAC,eACPb,IAAA,CAACL,IAAI;MAAC6B,KAAK,EAAC,MAAM;MAACD,MAAM,EAAC,MAAM;MAACY,IAAI,EAAE,QAAQb,UAAU;IAAI,CAAE,CAAC;EAAA,CAC7D,CAAC;AAEV","ignoreList":[]}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* the curve has to be steep enough to read as a band. Overhanging lets the tail
|
|
6
6
|
* finish in open space, so the header releases content instead of cutting it.
|
|
7
7
|
*/
|
|
8
|
-
export declare const HEADER_FADE_EXTENT =
|
|
8
|
+
export declare const HEADER_FADE_EXTENT = 8;
|
|
9
9
|
export interface HeaderGradientOverlayProps {
|
|
10
10
|
/** Fill color, fading to fully transparent along the overlay. */
|
|
11
11
|
color: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderGradientOverlay.d.ts","sourceRoot":"","sources":["../../../../../../src/components/header/parts/HeaderGradientOverlay.tsx"],"names":[],"mappings":"AAIA;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,
|
|
1
|
+
{"version":3,"file":"HeaderGradientOverlay.d.ts","sourceRoot":"","sources":["../../../../../../src/components/header/parts/HeaderGradientOverlay.tsx"],"names":[],"mappings":"AAIA;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAsDpC,MAAM,WAAW,0BAA0B;IACzC,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;GASG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,KAAK,EAAE,EAAE,0BAA0B,+BAe1E"}
|
package/package.json
CHANGED
|
@@ -9,7 +9,7 @@ import Svg, { Defs, Rect, Stop, LinearGradient as SvgLinearGradient } from "reac
|
|
|
9
9
|
* the curve has to be steep enough to read as a band. Overhanging lets the tail
|
|
10
10
|
* finish in open space, so the header releases content instead of cutting it.
|
|
11
11
|
*/
|
|
12
|
-
export const HEADER_FADE_EXTENT =
|
|
12
|
+
export const HEADER_FADE_EXTENT = 8;
|
|
13
13
|
|
|
14
14
|
/**
|
|
15
15
|
* Where the fade begins, as a fraction of the overlay's height — the bar plus
|
|
@@ -27,10 +27,10 @@ const FADE_START = 0.5;
|
|
|
27
27
|
* of bands on an 8-bit display; above ~14 the extra stops cost SVG parse time
|
|
28
28
|
* with nothing visible in return.
|
|
29
29
|
*/
|
|
30
|
-
const FADE_STOPS =
|
|
30
|
+
const FADE_STOPS = 4;
|
|
31
31
|
|
|
32
32
|
/** Ceiling on the fade's opacity — see {@link alphaAt}. */
|
|
33
|
-
const MAX_FADE_ALPHA = 0.
|
|
33
|
+
const MAX_FADE_ALPHA = 0.65;
|
|
34
34
|
|
|
35
35
|
/**
|
|
36
36
|
* Raised cosine, capped at {@link MAX_FADE_ALPHA}, reaching 0 at the overlay's
|
|
@@ -58,7 +58,8 @@ const STOPS = [
|
|
|
58
58
|
{ offset: 0, opacity: 1 },
|
|
59
59
|
...Array.from({ length: FADE_STOPS }, (_, index) => {
|
|
60
60
|
const t = index / (FADE_STOPS - 1);
|
|
61
|
-
|
|
61
|
+
const offset = FADE_START + t * (1 - FADE_START);
|
|
62
|
+
return { offset, opacity: offset === 1 ? 0 : alphaAt(t) };
|
|
62
63
|
}),
|
|
63
64
|
];
|
|
64
65
|
|