react-native-terra-ui 0.7.0 → 0.7.1
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 +4 -4
- package/lib/module/components/header/parts/HeaderGradientOverlay.js.map +1 -1
- package/lib/typescript/src/components/header/parts/HeaderGradientOverlay.d.ts +1 -1
- package/package.json +1 -1
- package/src/components/header/parts/HeaderGradientOverlay.tsx +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [0.7.1](https://github.com/earthlin9/react-native-terra-ui/compare/v0.7.0...v0.7.1) (2026-09-06)
|
|
4
|
+
|
|
5
|
+
### Bug Fixes
|
|
6
|
+
|
|
7
|
+
* **ui:** [header] lighten the scroll-edge fade ([b734f52](https://github.com/earthlin9/react-native-terra-ui/commit/b734f52df15454287edff977ddd9bad71e857a88))
|
|
8
|
+
|
|
3
9
|
## [0.7.0](https://github.com/earthlin9/react-native-terra-ui/compare/v0.6.0...v0.7.0) (2026-09-06)
|
|
4
10
|
|
|
5
11
|
### ⚠ BREAKING CHANGES
|
|
@@ -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 = 30;
|
|
15
15
|
|
|
16
16
|
/**
|
|
17
17
|
* Where the fade begins, as a fraction of the overlay's height — the bar plus
|
|
@@ -22,7 +22,7 @@ export const HEADER_FADE_EXTENT = 22;
|
|
|
22
22
|
* value makes: a longer, gentler ramp, paid for with content being faintly
|
|
23
23
|
* visible through the lower part of the bar.
|
|
24
24
|
*/
|
|
25
|
-
const FADE_START = 0.
|
|
25
|
+
const FADE_START = 0.5;
|
|
26
26
|
|
|
27
27
|
/**
|
|
28
28
|
* Stops used to approximate the fade curve. Below ~10 the ramp shows as a series
|
|
@@ -32,7 +32,7 @@ const FADE_START = 0.45;
|
|
|
32
32
|
const FADE_STOPS = 12;
|
|
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.8;
|
|
36
36
|
|
|
37
37
|
/**
|
|
38
38
|
* Raised cosine, capped at {@link MAX_FADE_ALPHA}, reaching 0 at the overlay's
|
|
@@ -46,7 +46,7 @@ const MAX_FADE_ALPHA = 0.95;
|
|
|
46
46
|
* The cap holds the ramp just short of solid, so the whole overlay reads as one
|
|
47
47
|
* continuous gradient rather than an opaque plateau with a curve bolted on.
|
|
48
48
|
*/
|
|
49
|
-
const alphaAt = t =>
|
|
49
|
+
const alphaAt = t => (1 + Math.cos(Math.PI * t) * MAX_FADE_ALPHA) / 2;
|
|
50
50
|
|
|
51
51
|
/**
|
|
52
52
|
* Every input is a module constant, so the ramp is built once at load rather
|
|
@@ -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","
|
|
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,EAAE;;AAEpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,UAAU,GAAG,GAAG;;AAEtB;AACA;AACA;AACA;AACA;AACA,MAAMC,UAAU,GAAG,EAAE;;AAErB;AACA,MAAMC,cAAc,GAAG,GAAG;;AAE1B;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,OAAO;IAAEQ,MAAM,EAAET,UAAU,GAAGI,CAAC,IAAI,CAAC,GAAGJ,UAAU,CAAC;IAAEU,OAAO,EAAEP,OAAO,CAACC,CAAC;EAAE,CAAC;AAC3E,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 = 30;
|
|
9
9
|
export interface HeaderGradientOverlayProps {
|
|
10
10
|
/** Fill color, fading to fully transparent along the overlay. */
|
|
11
11
|
color: string;
|
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 = 30;
|
|
13
13
|
|
|
14
14
|
/**
|
|
15
15
|
* Where the fade begins, as a fraction of the overlay's height — the bar plus
|
|
@@ -20,7 +20,7 @@ export const HEADER_FADE_EXTENT = 22;
|
|
|
20
20
|
* value makes: a longer, gentler ramp, paid for with content being faintly
|
|
21
21
|
* visible through the lower part of the bar.
|
|
22
22
|
*/
|
|
23
|
-
const FADE_START = 0.
|
|
23
|
+
const FADE_START = 0.5;
|
|
24
24
|
|
|
25
25
|
/**
|
|
26
26
|
* Stops used to approximate the fade curve. Below ~10 the ramp shows as a series
|
|
@@ -30,7 +30,7 @@ const FADE_START = 0.45;
|
|
|
30
30
|
const FADE_STOPS = 12;
|
|
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.8;
|
|
34
34
|
|
|
35
35
|
/**
|
|
36
36
|
* Raised cosine, capped at {@link MAX_FADE_ALPHA}, reaching 0 at the overlay's
|
|
@@ -44,7 +44,7 @@ const MAX_FADE_ALPHA = 0.95;
|
|
|
44
44
|
* The cap holds the ramp just short of solid, so the whole overlay reads as one
|
|
45
45
|
* continuous gradient rather than an opaque plateau with a curve bolted on.
|
|
46
46
|
*/
|
|
47
|
-
const alphaAt = (t: number) =>
|
|
47
|
+
const alphaAt = (t: number) => (1 + Math.cos(Math.PI * t) * MAX_FADE_ALPHA) / 2;
|
|
48
48
|
|
|
49
49
|
/**
|
|
50
50
|
* Every input is a module constant, so the ramp is built once at load rather
|