panelui-native 0.66.1 → 0.71.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/README.md +31 -1
- package/lib/module/components/accordion/index.js +28 -9
- package/lib/module/components/accordion/index.js.map +1 -1
- package/lib/module/components/area-chart/index.js +18 -1
- package/lib/module/components/area-chart/index.js.map +1 -1
- package/lib/module/components/bar-chart/index.js +18 -1
- package/lib/module/components/bar-chart/index.js.map +1 -1
- package/lib/module/components/button/index.js +14 -7
- package/lib/module/components/button/index.js.map +1 -1
- package/lib/module/components/candlestick-chart/index.js +18 -1
- package/lib/module/components/candlestick-chart/index.js.map +1 -1
- package/lib/module/components/collapsible/index.js +280 -0
- package/lib/module/components/collapsible/index.js.map +1 -0
- package/lib/module/components/flow/index.js +66 -3
- package/lib/module/components/flow/index.js.map +1 -1
- package/lib/module/components/form/index.js +7 -5
- package/lib/module/components/form/index.js.map +1 -1
- package/lib/module/components/form/typed-form.js +11 -0
- package/lib/module/components/form/typed-form.js.map +1 -0
- package/lib/module/components/form/use-form.js +4 -0
- package/lib/module/components/form/use-form.js.map +1 -1
- package/lib/module/components/heatmap-chart/index.js +27 -1
- package/lib/module/components/heatmap-chart/index.js.map +1 -1
- package/lib/module/components/line-chart/index.js +18 -1
- package/lib/module/components/line-chart/index.js.map +1 -1
- package/lib/module/components/live-line-chart/index.js +103 -9
- package/lib/module/components/live-line-chart/index.js.map +1 -1
- package/lib/module/components/live-line-chart/live-line-accessibility.js +47 -0
- package/lib/module/components/live-line-chart/live-line-accessibility.js.map +1 -0
- package/lib/module/components/live-line-chart/live-line-lifecycle.js +33 -0
- package/lib/module/components/live-line-chart/live-line-lifecycle.js.map +1 -0
- package/lib/module/components/marquee/index.js +194 -0
- package/lib/module/components/marquee/index.js.map +1 -0
- package/lib/module/components/message-scroller/index.js +172 -10
- package/lib/module/components/message-scroller/index.js.map +1 -1
- package/lib/module/components/message-scroller/message-scroller-math.js +23 -0
- package/lib/module/components/message-scroller/message-scroller-math.js.map +1 -1
- package/lib/module/components/meter/index.js +268 -0
- package/lib/module/components/meter/index.js.map +1 -0
- package/lib/module/components/meter/meter-scale.js +142 -0
- package/lib/module/components/meter/meter-scale.js.map +1 -0
- package/lib/module/components/planner/index.js +788 -0
- package/lib/module/components/planner/index.js.map +1 -0
- package/lib/module/components/planner/planner-announcement.js +30 -0
- package/lib/module/components/planner/planner-announcement.js.map +1 -0
- package/lib/module/components/planner/planner-entries.js +132 -0
- package/lib/module/components/planner/planner-entries.js.map +1 -0
- package/lib/module/components/planner/planner-grid-navigation.js +33 -0
- package/lib/module/components/planner/planner-grid-navigation.js.map +1 -0
- package/lib/module/components/planner/planner-lifecycle.js +45 -0
- package/lib/module/components/planner/planner-lifecycle.js.map +1 -0
- package/lib/module/components/popover/index.js +2 -2
- package/lib/module/components/popover/index.js.map +1 -1
- package/lib/module/components/radar-chart/index.js +18 -1
- package/lib/module/components/radar-chart/index.js.map +1 -1
- package/lib/module/components/scatter-chart/index.js +18 -1
- package/lib/module/components/scatter-chart/index.js.map +1 -1
- package/lib/module/components/skeleton/index.js +45 -7
- package/lib/module/components/skeleton/index.js.map +1 -1
- package/lib/module/components/spinner/index.js +63 -14
- package/lib/module/components/spinner/index.js.map +1 -1
- package/lib/module/components/time-picker/index.js +46 -21
- package/lib/module/components/time-picker/index.js.map +1 -1
- package/lib/module/components/time-picker/ruler-window.js +25 -0
- package/lib/module/components/time-picker/ruler-window.js.map +1 -0
- package/lib/module/hooks/breakpoint-contract.js +29 -0
- package/lib/module/hooks/breakpoint-contract.js.map +1 -0
- package/lib/module/hooks/index.js +1 -1
- package/lib/module/hooks/index.js.map +1 -1
- package/lib/module/hooks/use-breakpoint.js +46 -1
- package/lib/module/hooks/use-breakpoint.js.map +1 -1
- package/lib/module/index.js +5 -1
- package/lib/module/index.js.map +1 -1
- package/lib/module/primitives/chart-accessibility.js +68 -0
- package/lib/module/primitives/chart-accessibility.js.map +1 -0
- package/lib/module/primitives/focus-restoration-store.js +52 -0
- package/lib/module/primitives/focus-restoration-store.js.map +1 -0
- package/lib/module/primitives/portal.js +36 -2
- package/lib/module/primitives/portal.js.map +1 -1
- package/lib/typescript/src/components/accordion/index.d.ts +4 -0
- package/lib/typescript/src/components/accordion/index.d.ts.map +1 -1
- package/lib/typescript/src/components/area-chart/index.d.ts +2 -1
- package/lib/typescript/src/components/area-chart/index.d.ts.map +1 -1
- package/lib/typescript/src/components/bar-chart/index.d.ts +2 -1
- package/lib/typescript/src/components/bar-chart/index.d.ts.map +1 -1
- package/lib/typescript/src/components/button/index.d.ts.map +1 -1
- package/lib/typescript/src/components/candlestick-chart/index.d.ts +2 -1
- package/lib/typescript/src/components/candlestick-chart/index.d.ts.map +1 -1
- package/lib/typescript/src/components/collapsible/index.d.ts +76 -0
- package/lib/typescript/src/components/collapsible/index.d.ts.map +1 -0
- package/lib/typescript/src/components/flow/index.d.ts +7 -1
- package/lib/typescript/src/components/flow/index.d.ts.map +1 -1
- package/lib/typescript/src/components/form/index.d.ts +18 -5
- package/lib/typescript/src/components/form/index.d.ts.map +1 -1
- package/lib/typescript/src/components/form/typed-form.d.ts +7 -0
- package/lib/typescript/src/components/form/typed-form.d.ts.map +1 -0
- package/lib/typescript/src/components/form/use-form.d.ts +4 -0
- package/lib/typescript/src/components/form/use-form.d.ts.map +1 -1
- package/lib/typescript/src/components/heatmap-chart/index.d.ts +2 -1
- package/lib/typescript/src/components/heatmap-chart/index.d.ts.map +1 -1
- package/lib/typescript/src/components/line-chart/index.d.ts +2 -1
- package/lib/typescript/src/components/line-chart/index.d.ts.map +1 -1
- package/lib/typescript/src/components/live-line-chart/index.d.ts +21 -7
- package/lib/typescript/src/components/live-line-chart/index.d.ts.map +1 -1
- package/lib/typescript/src/components/live-line-chart/live-line-accessibility.d.ts +22 -0
- package/lib/typescript/src/components/live-line-chart/live-line-accessibility.d.ts.map +1 -0
- package/lib/typescript/src/components/live-line-chart/live-line-lifecycle.d.ts +23 -0
- package/lib/typescript/src/components/live-line-chart/live-line-lifecycle.d.ts.map +1 -0
- package/lib/typescript/src/components/marquee/index.d.ts +73 -0
- package/lib/typescript/src/components/marquee/index.d.ts.map +1 -0
- package/lib/typescript/src/components/message-scroller/index.d.ts +30 -2
- package/lib/typescript/src/components/message-scroller/index.d.ts.map +1 -1
- package/lib/typescript/src/components/message-scroller/message-scroller-math.d.ts +10 -0
- package/lib/typescript/src/components/message-scroller/message-scroller-math.d.ts.map +1 -1
- package/lib/typescript/src/components/meter/index.d.ts +273 -0
- package/lib/typescript/src/components/meter/index.d.ts.map +1 -0
- package/lib/typescript/src/components/meter/meter-scale.d.ts +96 -0
- package/lib/typescript/src/components/meter/meter-scale.d.ts.map +1 -0
- package/lib/typescript/src/components/planner/index.d.ts +274 -0
- package/lib/typescript/src/components/planner/index.d.ts.map +1 -0
- package/lib/typescript/src/components/planner/planner-announcement.d.ts +15 -0
- package/lib/typescript/src/components/planner/planner-announcement.d.ts.map +1 -0
- package/lib/typescript/src/components/planner/planner-entries.d.ts +75 -0
- package/lib/typescript/src/components/planner/planner-entries.d.ts.map +1 -0
- package/lib/typescript/src/components/planner/planner-grid-navigation.d.ts +4 -0
- package/lib/typescript/src/components/planner/planner-grid-navigation.d.ts.map +1 -0
- package/lib/typescript/src/components/planner/planner-lifecycle.d.ts +20 -0
- package/lib/typescript/src/components/planner/planner-lifecycle.d.ts.map +1 -0
- package/lib/typescript/src/components/radar-chart/index.d.ts +4 -0
- package/lib/typescript/src/components/radar-chart/index.d.ts.map +1 -1
- package/lib/typescript/src/components/scatter-chart/index.d.ts +2 -1
- package/lib/typescript/src/components/scatter-chart/index.d.ts.map +1 -1
- package/lib/typescript/src/components/skeleton/index.d.ts +25 -2
- package/lib/typescript/src/components/skeleton/index.d.ts.map +1 -1
- package/lib/typescript/src/components/spinner/index.d.ts +25 -2
- package/lib/typescript/src/components/spinner/index.d.ts.map +1 -1
- package/lib/typescript/src/components/time-picker/index.d.ts +5 -6
- package/lib/typescript/src/components/time-picker/index.d.ts.map +1 -1
- package/lib/typescript/src/components/time-picker/ruler-window.d.ts +12 -0
- package/lib/typescript/src/components/time-picker/ruler-window.d.ts.map +1 -0
- package/lib/typescript/src/hooks/breakpoint-contract.d.ts +6 -0
- package/lib/typescript/src/hooks/breakpoint-contract.d.ts.map +1 -0
- package/lib/typescript/src/hooks/index.d.ts +1 -1
- package/lib/typescript/src/hooks/index.d.ts.map +1 -1
- package/lib/typescript/src/hooks/use-breakpoint.d.ts +22 -0
- package/lib/typescript/src/hooks/use-breakpoint.d.ts.map +1 -1
- package/lib/typescript/src/index.d.ts +5 -1
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/primitives/chart-accessibility.d.ts +33 -0
- package/lib/typescript/src/primitives/chart-accessibility.d.ts.map +1 -0
- package/lib/typescript/src/primitives/focus-restoration-store.d.ts +24 -0
- package/lib/typescript/src/primitives/focus-restoration-store.d.ts.map +1 -0
- package/lib/typescript/src/primitives/portal.d.ts +4 -0
- package/lib/typescript/src/primitives/portal.d.ts.map +1 -1
- package/lib/typescript/types/form-api.type-test.d.ts +2 -0
- package/lib/typescript/types/form-api.type-test.d.ts.map +1 -0
- package/package.json +63 -4
- package/src/components/accordion/index.tsx +31 -8
- package/src/components/area-chart/index.tsx +27 -2
- package/src/components/bar-chart/index.tsx +27 -2
- package/src/components/button/index.tsx +11 -4
- package/src/components/candlestick-chart/index.tsx +30 -2
- package/src/components/collapsible/index.tsx +278 -0
- package/src/components/flow/index.tsx +93 -14
- package/src/components/form/index.tsx +32 -5
- package/src/components/form/typed-form.ts +13 -0
- package/src/components/form/use-form.ts +9 -0
- package/src/components/heatmap-chart/index.tsx +49 -3
- package/src/components/line-chart/index.tsx +27 -2
- package/src/components/live-line-chart/index.tsx +130 -13
- package/src/components/live-line-chart/live-line-accessibility.ts +61 -0
- package/src/components/live-line-chart/live-line-lifecycle.ts +63 -0
- package/src/components/marquee/index.tsx +232 -0
- package/src/components/message-scroller/index.tsx +234 -6
- package/src/components/message-scroller/message-scroller-math.ts +38 -0
- package/src/components/meter/index.tsx +341 -0
- package/src/components/meter/meter-scale.ts +185 -0
- package/src/components/planner/index.tsx +997 -0
- package/src/components/planner/planner-announcement.ts +37 -0
- package/src/components/planner/planner-entries.ts +155 -0
- package/src/components/planner/planner-grid-navigation.ts +45 -0
- package/src/components/planner/planner-lifecycle.ts +76 -0
- package/src/components/popover/index.tsx +3 -3
- package/src/components/radar-chart/index.tsx +24 -0
- package/src/components/scatter-chart/index.tsx +27 -2
- package/src/components/skeleton/index.tsx +59 -5
- package/src/components/spinner/index.tsx +80 -13
- package/src/components/time-picker/index.tsx +57 -29
- package/src/components/time-picker/ruler-window.ts +24 -0
- package/src/hooks/breakpoint-contract.ts +31 -0
- package/src/hooks/index.ts +4 -0
- package/src/hooks/use-breakpoint.ts +61 -10
- package/src/index.ts +43 -0
- package/src/primitives/chart-accessibility.ts +102 -0
- package/src/primitives/focus-restoration-store.ts +70 -0
- package/src/primitives/portal.tsx +34 -2
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { AppStateStatus } from 'react-native';
|
|
2
|
+
export interface LiveLineReading {
|
|
3
|
+
time: number;
|
|
4
|
+
value: number;
|
|
5
|
+
}
|
|
6
|
+
export declare const DEFAULT_LIVE_LINE_WINDOW = 30;
|
|
7
|
+
export declare const DEFAULT_LIVE_LINE_MAX_POINTS = 500;
|
|
8
|
+
export declare function normalizeLiveLineWindow(seconds: number): number;
|
|
9
|
+
export declare function normalizeLiveLineMaxPoints(maxPoints: number): number;
|
|
10
|
+
/**
|
|
11
|
+
* Builds the one ordered, finite buffer every renderer and interaction reads.
|
|
12
|
+
* For duplicate timestamps the last input wins, matching a corrected reading
|
|
13
|
+
* arriving with the same identity as the one it replaces.
|
|
14
|
+
*/
|
|
15
|
+
export declare function normalizeLiveLinePoints<T extends LiveLineReading>(data: readonly T[], maxPoints: number): T[];
|
|
16
|
+
export declare function liveLineClockRuns(options: {
|
|
17
|
+
paused: boolean;
|
|
18
|
+
loading: boolean;
|
|
19
|
+
reducedMotion: boolean;
|
|
20
|
+
appState: AppStateStatus;
|
|
21
|
+
}): boolean;
|
|
22
|
+
export declare function reconcileLiveLineActivePoint<T extends LiveLineReading>(active: T | null, points: readonly T[]): T | null;
|
|
23
|
+
//# sourceMappingURL=live-line-lifecycle.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"live-line-lifecycle.d.ts","sourceRoot":"","sources":["../../../../../src/components/live-line-chart/live-line-lifecycle.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAC3C,eAAO,MAAM,4BAA4B,MAAM,CAAC;AAEhD,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAI/D;AAED,wBAAgB,0BAA0B,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAIpE;AAED;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,CAAC,SAAS,eAAe,EAC/D,IAAI,EAAE,SAAS,CAAC,EAAE,EAClB,SAAS,EAAE,MAAM,GAChB,CAAC,EAAE,CAUL;AAED,wBAAgB,iBAAiB,CAAC,OAAO,EAAE;IACzC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,cAAc,CAAC;CAC1B,GAAG,OAAO,CAOV;AAED,wBAAgB,4BAA4B,CAAC,CAAC,SAAS,eAAe,EACpE,MAAM,EAAE,CAAC,GAAG,IAAI,EAChB,MAAM,EAAE,SAAS,CAAC,EAAE,GACnB,CAAC,GAAG,IAAI,CAGV"}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Marquee — content that travels across its container and never runs out.
|
|
3
|
+
*
|
|
4
|
+
* For a strip of logos, a ticker of prices, a row of testimonials: anything
|
|
5
|
+
* whose job is to keep moving past a boundary rather than to be scrolled.
|
|
6
|
+
*
|
|
7
|
+
* ```tsx
|
|
8
|
+
* <Marquee spacing={24} speed={40}>
|
|
9
|
+
* <View className="flex-row gap-6">
|
|
10
|
+
* {sponsors.map((s) => <Logo key={s.id} src={s.logo} />)}
|
|
11
|
+
* </View>
|
|
12
|
+
* </Marquee>
|
|
13
|
+
* ```
|
|
14
|
+
*
|
|
15
|
+
* ## How it loops
|
|
16
|
+
*
|
|
17
|
+
* The content is measured once, then laid out end to end enough times to cover
|
|
18
|
+
* the container twice over. One track holds every copy and it is that track,
|
|
19
|
+
* not the copies, that moves — a single animated node for any amount of
|
|
20
|
+
* content. It travels exactly one copy-and-gap and starts over, so the state it
|
|
21
|
+
* ends on is the state it began on and the seam never shows.
|
|
22
|
+
*
|
|
23
|
+
* The travel is a linear timing driven on the UI thread, so it costs nothing
|
|
24
|
+
* per frame in JavaScript and keeps running while the thread is busy.
|
|
25
|
+
*
|
|
26
|
+
* ## Measurement needs room
|
|
27
|
+
*
|
|
28
|
+
* The copy that gets measured sits in a hidden scroller, because that is what
|
|
29
|
+
* lets the content report the width it *wants* rather than the width the
|
|
30
|
+
* container would give it. Content with no intrinsic size of its own — a child
|
|
31
|
+
* stretched to `flex-1`, an image with no dimensions — measures as nothing and
|
|
32
|
+
* the marquee will not start.
|
|
33
|
+
*
|
|
34
|
+
* ## Reading direction and reduced motion
|
|
35
|
+
*
|
|
36
|
+
* A horizontal marquee travels toward the end of the line, so it reverses in a
|
|
37
|
+
* right-to-left subtree. `reverse` flips it again from wherever it landed.
|
|
38
|
+
*
|
|
39
|
+
* With the operating system set to reduce motion the content is rendered once
|
|
40
|
+
* and held still. A ticker that never stops is the exact thing that setting is
|
|
41
|
+
* there to turn off, so this is not a shorter animation — it is none.
|
|
42
|
+
*
|
|
43
|
+
* Screen readers get one copy. The rest are duplicates of content already
|
|
44
|
+
* announced, and hearing a sponsor list four times over is not thoroughness.
|
|
45
|
+
*/
|
|
46
|
+
import { type ReactNode } from 'react';
|
|
47
|
+
import { type ViewProps } from 'react-native';
|
|
48
|
+
export type MarqueeDirection = 'horizontal' | 'vertical';
|
|
49
|
+
export interface MarqueeProps extends Omit<ViewProps, 'children'> {
|
|
50
|
+
className?: string;
|
|
51
|
+
/** The content to repeat. Measured once, then tiled along the axis. */
|
|
52
|
+
children: ReactNode;
|
|
53
|
+
/**
|
|
54
|
+
* Travel speed in points per second. 40 by default, which is slow enough
|
|
55
|
+
* that a word stays readable as it crosses. The cycle time follows from this
|
|
56
|
+
* and the measured content, so longer content takes proportionally longer
|
|
57
|
+
* rather than moving faster.
|
|
58
|
+
*/
|
|
59
|
+
speed?: number;
|
|
60
|
+
/** Gap between the end of one copy and the start of the next. */
|
|
61
|
+
spacing?: number;
|
|
62
|
+
/** Axis the content travels along. */
|
|
63
|
+
direction?: MarqueeDirection;
|
|
64
|
+
/**
|
|
65
|
+
* Send it the other way: toward the start of the line, or upward. Applied
|
|
66
|
+
* after the reading direction, not instead of it.
|
|
67
|
+
*/
|
|
68
|
+
reverse?: boolean;
|
|
69
|
+
/** Set false to hold the content where it is. */
|
|
70
|
+
playing?: boolean;
|
|
71
|
+
}
|
|
72
|
+
export declare function Marquee({ className, children, speed, spacing, direction, reverse, playing, style, onLayout, ...props }: MarqueeProps): import("react").JSX.Element;
|
|
73
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/marquee/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,OAAO,EAAgC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAmBtB,MAAM,MAAM,gBAAgB,GAAG,YAAY,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uEAAuE;IACvE,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sCAAsC;IACtC,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iDAAiD;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,KAAqB,EACrB,OAAW,EACX,SAAwB,EACxB,OAAe,EACf,OAAc,EACd,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,YAAY,+BAoHd"}
|
|
@@ -31,8 +31,8 @@
|
|
|
31
31
|
* Needs a bounded height — from `flex-1` in a column, or an explicit one.
|
|
32
32
|
* Given an unbounded parent it grows to fit its content and never scrolls.
|
|
33
33
|
*/
|
|
34
|
-
import { type ReactNode } from 'react';
|
|
35
|
-
import { type ViewProps } from 'react-native';
|
|
34
|
+
import { type ReactElement, type ReactNode } from 'react';
|
|
35
|
+
import { type FlatListProps, type ListRenderItemInfo, type ViewProps } from 'react-native';
|
|
36
36
|
import { type AnimatedScrollViewProps } from 'react-native-reanimated';
|
|
37
37
|
export type MessageScrollerPosition = 'start' | 'end' | 'last-anchor';
|
|
38
38
|
/** Scroll commands, for a control that lives outside the viewport. */
|
|
@@ -93,6 +93,33 @@ declare function MessageScrollerViewport({ className, children, ...props }: Mess
|
|
|
93
93
|
declare namespace MessageScrollerViewport {
|
|
94
94
|
var displayName: string;
|
|
95
95
|
}
|
|
96
|
+
export interface MessageScrollerListItem {
|
|
97
|
+
/** Stable id used by `scrollToMessage` and as the default React key. */
|
|
98
|
+
messageId: string;
|
|
99
|
+
/** Marks the start of a turn for `last-anchor` and visibility reporting. */
|
|
100
|
+
scrollAnchor?: boolean;
|
|
101
|
+
}
|
|
102
|
+
export interface MessageScrollerListProps<T extends MessageScrollerListItem = MessageScrollerListItem> extends Omit<FlatListProps<T>, 'data' | 'renderItem' | 'keyExtractor' | 'onScroll' | 'onContentSizeChange' | 'onViewableItemsChanged' | 'maintainVisibleContentPosition' | 'onScrollToIndexFailed' | 'onScrollEndDrag' | 'onMomentumScrollEnd' | 'CellRendererComponent'> {
|
|
103
|
+
className?: string;
|
|
104
|
+
/** Classes on the virtualized list's padded transcript column. */
|
|
105
|
+
contentContainerClassName?: string;
|
|
106
|
+
/**
|
|
107
|
+
* The complete transcript. Rows outside the native render window stay
|
|
108
|
+
* unmounted; each item therefore carries its stable navigation metadata.
|
|
109
|
+
*/
|
|
110
|
+
data: readonly T[];
|
|
111
|
+
/** Draw one turn from the native list window. */
|
|
112
|
+
renderItem: (info: ListRenderItemInfo<T>) => ReactElement | null;
|
|
113
|
+
}
|
|
114
|
+
/**
|
|
115
|
+
* The real virtualized transcript path. Only its render window mounts; native
|
|
116
|
+
* visible-content maintenance keeps prepends still without measuring offscreen
|
|
117
|
+
* rows in JavaScript.
|
|
118
|
+
*/
|
|
119
|
+
declare function MessageScrollerList<T extends MessageScrollerListItem>({ className, contentContainerClassName, data, renderItem, initialNumToRender, maxToRenderPerBatch, windowSize, ...props }: MessageScrollerListProps<T>): import("react").JSX.Element;
|
|
120
|
+
declare namespace MessageScrollerList {
|
|
121
|
+
var displayName: string;
|
|
122
|
+
}
|
|
96
123
|
export interface MessageScrollerContentProps extends ViewProps {
|
|
97
124
|
className?: string;
|
|
98
125
|
children?: ReactNode;
|
|
@@ -142,6 +169,7 @@ declare namespace MessageScrollerButton {
|
|
|
142
169
|
}
|
|
143
170
|
export declare const MessageScroller: typeof MessageScrollerRoot & {
|
|
144
171
|
Viewport: typeof MessageScrollerViewport;
|
|
172
|
+
List: typeof MessageScrollerList;
|
|
145
173
|
Content: typeof MessageScrollerContent;
|
|
146
174
|
Item: typeof MessageScrollerItem;
|
|
147
175
|
Button: typeof MessageScrollerButton;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/message-scroller/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/message-scroller/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -4,5 +4,15 @@ export declare const MESSAGE_SCROLLER_EDGE_THRESHOLD = 24;
|
|
|
4
4
|
export declare function distanceFromMessageScrollerTarget(target: MessageScrollerTarget, contentOffsetY: number, contentHeight: number, viewportHeight: number): number;
|
|
5
5
|
/** Whether the control has enough distance to its target edge to be useful. */
|
|
6
6
|
export declare function isMessageScrollerTargetVisible(distance: number): boolean;
|
|
7
|
+
export interface MessageScrollerIndexedItem {
|
|
8
|
+
messageId: string;
|
|
9
|
+
scrollAnchor?: boolean;
|
|
10
|
+
}
|
|
11
|
+
/** Index used by initial positioning and id-addressed virtualized jumps. */
|
|
12
|
+
export declare function messageScrollerIndex(items: readonly MessageScrollerIndexedItem[], id: string): number | undefined;
|
|
13
|
+
/** Initial target for a list; `undefined` means use the physical end. */
|
|
14
|
+
export declare function initialMessageScrollerIndex(items: readonly MessageScrollerIndexedItem[], position: 'start' | 'end' | 'last-anchor'): number | undefined;
|
|
15
|
+
/** Anchor at or before the first visible virtualized row. */
|
|
16
|
+
export declare function messageScrollerAnchorAt(items: readonly MessageScrollerIndexedItem[], firstVisibleIndex: number): string | null;
|
|
7
17
|
export {};
|
|
8
18
|
//# sourceMappingURL=message-scroller-math.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"message-scroller-math.d.ts","sourceRoot":"","sources":["../../../../../src/components/message-scroller/message-scroller-math.ts"],"names":[],"mappings":"AAAA,KAAK,qBAAqB,GAAG,OAAO,GAAG,KAAK,CAAC;AAE7C,eAAO,MAAM,+BAA+B,KAAK,CAAC;AAElD,oEAAoE;AACpE,wBAAgB,iCAAiC,CAC/C,MAAM,EAAE,qBAAqB,EAC7B,cAAc,EAAE,MAAM,EACtB,aAAa,EAAE,MAAM,EACrB,cAAc,EAAE,MAAM,GACrB,MAAM,CAMR;AAED,+EAA+E;AAC/E,wBAAgB,8BAA8B,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAIxE"}
|
|
1
|
+
{"version":3,"file":"message-scroller-math.d.ts","sourceRoot":"","sources":["../../../../../src/components/message-scroller/message-scroller-math.ts"],"names":[],"mappings":"AAAA,KAAK,qBAAqB,GAAG,OAAO,GAAG,KAAK,CAAC;AAE7C,eAAO,MAAM,+BAA+B,KAAK,CAAC;AAElD,oEAAoE;AACpE,wBAAgB,iCAAiC,CAC/C,MAAM,EAAE,qBAAqB,EAC7B,cAAc,EAAE,MAAM,EACtB,aAAa,EAAE,MAAM,EACrB,cAAc,EAAE,MAAM,GACrB,MAAM,CAMR;AAED,+EAA+E;AAC/E,wBAAgB,8BAA8B,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAIxE;AAED,MAAM,WAAW,0BAA0B;IACzC,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,4EAA4E;AAC5E,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,SAAS,0BAA0B,EAAE,EAC5C,EAAE,EAAE,MAAM,GACT,MAAM,GAAG,SAAS,CAGpB;AAED,yEAAyE;AACzE,wBAAgB,2BAA2B,CACzC,KAAK,EAAE,SAAS,0BAA0B,EAAE,EAC5C,QAAQ,EAAE,OAAO,GAAG,KAAK,GAAG,aAAa,GACxC,MAAM,GAAG,SAAS,CAOpB;AAED,6DAA6D;AAC7D,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,SAAS,0BAA0B,EAAE,EAC5C,iBAAiB,EAAE,MAAM,GACxB,MAAM,GAAG,IAAI,CAKf"}
|
|
@@ -0,0 +1,273 @@
|
|
|
1
|
+
import { View, type ViewProps } from 'react-native';
|
|
2
|
+
import { type VariantProps } from 'tailwind-variants';
|
|
3
|
+
import { type MeterColor, type MeterThreshold } from './meter-scale.js';
|
|
4
|
+
declare const meterVariants: import("tailwind-variants").TVReturnType<{
|
|
5
|
+
color: {
|
|
6
|
+
primary: {
|
|
7
|
+
track: string;
|
|
8
|
+
indicator: string;
|
|
9
|
+
segment: string;
|
|
10
|
+
};
|
|
11
|
+
success: {
|
|
12
|
+
track: string;
|
|
13
|
+
indicator: string;
|
|
14
|
+
segment: string;
|
|
15
|
+
};
|
|
16
|
+
warning: {
|
|
17
|
+
track: string;
|
|
18
|
+
indicator: string;
|
|
19
|
+
segment: string;
|
|
20
|
+
};
|
|
21
|
+
destructive: {
|
|
22
|
+
track: string;
|
|
23
|
+
indicator: string;
|
|
24
|
+
segment: string;
|
|
25
|
+
};
|
|
26
|
+
info: {
|
|
27
|
+
track: string;
|
|
28
|
+
indicator: string;
|
|
29
|
+
segment: string;
|
|
30
|
+
};
|
|
31
|
+
muted: {
|
|
32
|
+
track: string;
|
|
33
|
+
indicator: string;
|
|
34
|
+
segment: string;
|
|
35
|
+
};
|
|
36
|
+
};
|
|
37
|
+
size: {
|
|
38
|
+
sm: {
|
|
39
|
+
track: string;
|
|
40
|
+
segments: string;
|
|
41
|
+
segment: string;
|
|
42
|
+
};
|
|
43
|
+
md: {
|
|
44
|
+
track: string;
|
|
45
|
+
segments: string;
|
|
46
|
+
segment: string;
|
|
47
|
+
};
|
|
48
|
+
lg: {
|
|
49
|
+
track: string;
|
|
50
|
+
segments: string;
|
|
51
|
+
segment: string;
|
|
52
|
+
};
|
|
53
|
+
};
|
|
54
|
+
}, {
|
|
55
|
+
root: string;
|
|
56
|
+
header: string;
|
|
57
|
+
track: string;
|
|
58
|
+
indicator: string;
|
|
59
|
+
segments: string;
|
|
60
|
+
segment: string;
|
|
61
|
+
}, undefined, {
|
|
62
|
+
color: {
|
|
63
|
+
primary: {
|
|
64
|
+
track: string;
|
|
65
|
+
indicator: string;
|
|
66
|
+
segment: string;
|
|
67
|
+
};
|
|
68
|
+
success: {
|
|
69
|
+
track: string;
|
|
70
|
+
indicator: string;
|
|
71
|
+
segment: string;
|
|
72
|
+
};
|
|
73
|
+
warning: {
|
|
74
|
+
track: string;
|
|
75
|
+
indicator: string;
|
|
76
|
+
segment: string;
|
|
77
|
+
};
|
|
78
|
+
destructive: {
|
|
79
|
+
track: string;
|
|
80
|
+
indicator: string;
|
|
81
|
+
segment: string;
|
|
82
|
+
};
|
|
83
|
+
info: {
|
|
84
|
+
track: string;
|
|
85
|
+
indicator: string;
|
|
86
|
+
segment: string;
|
|
87
|
+
};
|
|
88
|
+
muted: {
|
|
89
|
+
track: string;
|
|
90
|
+
indicator: string;
|
|
91
|
+
segment: string;
|
|
92
|
+
};
|
|
93
|
+
};
|
|
94
|
+
size: {
|
|
95
|
+
sm: {
|
|
96
|
+
track: string;
|
|
97
|
+
segments: string;
|
|
98
|
+
segment: string;
|
|
99
|
+
};
|
|
100
|
+
md: {
|
|
101
|
+
track: string;
|
|
102
|
+
segments: string;
|
|
103
|
+
segment: string;
|
|
104
|
+
};
|
|
105
|
+
lg: {
|
|
106
|
+
track: string;
|
|
107
|
+
segments: string;
|
|
108
|
+
segment: string;
|
|
109
|
+
};
|
|
110
|
+
};
|
|
111
|
+
}, {
|
|
112
|
+
root: string;
|
|
113
|
+
header: string;
|
|
114
|
+
track: string;
|
|
115
|
+
indicator: string;
|
|
116
|
+
segments: string;
|
|
117
|
+
segment: string;
|
|
118
|
+
}, import("tailwind-variants").TVReturnType<{
|
|
119
|
+
color: {
|
|
120
|
+
primary: {
|
|
121
|
+
track: string;
|
|
122
|
+
indicator: string;
|
|
123
|
+
segment: string;
|
|
124
|
+
};
|
|
125
|
+
success: {
|
|
126
|
+
track: string;
|
|
127
|
+
indicator: string;
|
|
128
|
+
segment: string;
|
|
129
|
+
};
|
|
130
|
+
warning: {
|
|
131
|
+
track: string;
|
|
132
|
+
indicator: string;
|
|
133
|
+
segment: string;
|
|
134
|
+
};
|
|
135
|
+
destructive: {
|
|
136
|
+
track: string;
|
|
137
|
+
indicator: string;
|
|
138
|
+
segment: string;
|
|
139
|
+
};
|
|
140
|
+
info: {
|
|
141
|
+
track: string;
|
|
142
|
+
indicator: string;
|
|
143
|
+
segment: string;
|
|
144
|
+
};
|
|
145
|
+
muted: {
|
|
146
|
+
track: string;
|
|
147
|
+
indicator: string;
|
|
148
|
+
segment: string;
|
|
149
|
+
};
|
|
150
|
+
};
|
|
151
|
+
size: {
|
|
152
|
+
sm: {
|
|
153
|
+
track: string;
|
|
154
|
+
segments: string;
|
|
155
|
+
segment: string;
|
|
156
|
+
};
|
|
157
|
+
md: {
|
|
158
|
+
track: string;
|
|
159
|
+
segments: string;
|
|
160
|
+
segment: string;
|
|
161
|
+
};
|
|
162
|
+
lg: {
|
|
163
|
+
track: string;
|
|
164
|
+
segments: string;
|
|
165
|
+
segment: string;
|
|
166
|
+
};
|
|
167
|
+
};
|
|
168
|
+
}, {
|
|
169
|
+
root: string;
|
|
170
|
+
header: string;
|
|
171
|
+
track: string;
|
|
172
|
+
indicator: string;
|
|
173
|
+
segments: string;
|
|
174
|
+
segment: string;
|
|
175
|
+
}, undefined, unknown, unknown, undefined>>;
|
|
176
|
+
type MeterVariantProps = VariantProps<typeof meterVariants>;
|
|
177
|
+
export interface MeterProps extends Omit<ViewProps, 'children'>, MeterVariantProps {
|
|
178
|
+
className?: string;
|
|
179
|
+
/** The measurement. Values outside the scale are clamped to its ends. */
|
|
180
|
+
value: number;
|
|
181
|
+
/**
|
|
182
|
+
* The bottom of the scale — the value at which the bar reads as empty.
|
|
183
|
+
* Defaults to `0`.
|
|
184
|
+
*/
|
|
185
|
+
minValue?: number;
|
|
186
|
+
/**
|
|
187
|
+
* The top of the scale — the value at which the bar reads as full. Defaults
|
|
188
|
+
* to `100`, so a bare percentage needs neither bound set.
|
|
189
|
+
*/
|
|
190
|
+
maxValue?: number;
|
|
191
|
+
/**
|
|
192
|
+
* What is being measured. Also the accessibility label, and a meter without
|
|
193
|
+
* one announces a number with nothing attached to it — "seventy-five
|
|
194
|
+
* percent" of what is not an answer. Pass `accessibilityLabel` instead only
|
|
195
|
+
* where the caption is drawn some other way.
|
|
196
|
+
*/
|
|
197
|
+
label?: string;
|
|
198
|
+
/** Draw the value above the track, opposite the label. */
|
|
199
|
+
showValueLabel?: boolean;
|
|
200
|
+
/**
|
|
201
|
+
* Text for the value label. Overrides the formatted value — use it for a
|
|
202
|
+
* word where a number reads worse: `Strong`, `Almost full`.
|
|
203
|
+
*
|
|
204
|
+
* It is spoken whether or not it is drawn, so it can give a screen reader
|
|
205
|
+
* better words than the caption without changing the caption. Pair it with
|
|
206
|
+
* `showValueLabel` to draw it too.
|
|
207
|
+
*/
|
|
208
|
+
valueLabel?: string;
|
|
209
|
+
/**
|
|
210
|
+
* How to write the value, through `Intl.NumberFormat`. A `percent` style
|
|
211
|
+
* formats how far up the scale the value sits; every other style formats
|
|
212
|
+
* the value itself, so `{ style: 'unit', unit: 'gigabyte' }` against a
|
|
213
|
+
* `maxValue` of `256` reads `64 GB` rather than a percentage of it. Falls
|
|
214
|
+
* back to a rounded percent when omitted.
|
|
215
|
+
*/
|
|
216
|
+
formatOptions?: Intl.NumberFormatOptions;
|
|
217
|
+
/**
|
|
218
|
+
* Points on the scale where the colour changes, each `{ from, color }`. The
|
|
219
|
+
* highest one the reading has reached wins, so the order you list them in
|
|
220
|
+
* does not matter; below all of them the `color` prop applies. Non-finite
|
|
221
|
+
* `from` values are ignored.
|
|
222
|
+
*
|
|
223
|
+
* This is the difference between a meter and a bar: the colour is a
|
|
224
|
+
* judgement about the reading. Which direction is bad is yours to say —
|
|
225
|
+
* thresholds climbing to `destructive` suit a disk filling up, thresholds
|
|
226
|
+
* falling to it suit a battery running down.
|
|
227
|
+
*/
|
|
228
|
+
thresholds?: MeterThreshold[];
|
|
229
|
+
/**
|
|
230
|
+
* Draw the scale as this many discrete blocks instead of one continuous
|
|
231
|
+
* bar. Blocks are all or nothing, which is the point of them: four blocks
|
|
232
|
+
* say "three out of four" where a bar says "about seventy percent", and a
|
|
233
|
+
* password is not seventy percent strong.
|
|
234
|
+
*
|
|
235
|
+
* Fractional counts round down and counts above 100 clamp to 100. Invalid,
|
|
236
|
+
* non-positive, or sub-one counts use the continuous bar. Any value above
|
|
237
|
+
* the floor lights at least one block, so a reading that is not empty never
|
|
238
|
+
* looks it.
|
|
239
|
+
*/
|
|
240
|
+
segments?: number;
|
|
241
|
+
/** Extra classes for the fill, or for a lit segment. */
|
|
242
|
+
indicatorClassName?: string;
|
|
243
|
+
/** Extra classes for the label + value row. */
|
|
244
|
+
headerClassName?: string;
|
|
245
|
+
}
|
|
246
|
+
/**
|
|
247
|
+
* A measurement on a fixed scale: disk used, battery left, a score, a password's
|
|
248
|
+
* strength. The fill is driven on the UI thread, so a value change costs one
|
|
249
|
+
* render and nothing per frame.
|
|
250
|
+
*
|
|
251
|
+
* A meter is not a progress bar. Progress is a task moving towards an end that
|
|
252
|
+
* finishing is the point of; a meter is a reading that happens to sit where it
|
|
253
|
+
* sits, and may go back down. Reach for
|
|
254
|
+
* [Progress](/docs/components/progress) when something is completing.
|
|
255
|
+
*
|
|
256
|
+
* `thresholds` paint the bar by where the reading falls, and `segments` draws
|
|
257
|
+
* the scale as discrete blocks for readings that are counted rather than
|
|
258
|
+
* measured.
|
|
259
|
+
*
|
|
260
|
+
* The value is read against `minValue` / `maxValue`, which default to 0 and
|
|
261
|
+
* 100 — so a percentage needs neither. Set them and the meter speaks in
|
|
262
|
+
* whatever is being measured: bytes, degrees, points. Nothing has to be
|
|
263
|
+
* converted to a percent on the way in, and the screen reader is told the real
|
|
264
|
+
* scale rather than a derived one.
|
|
265
|
+
*
|
|
266
|
+
* React Native has no meter role, so this announces as a progress bar with its
|
|
267
|
+
* value, range and unit attached. That is the closest the platform offers, and
|
|
268
|
+
* it is why `label` matters: the role will not distinguish a reading from a
|
|
269
|
+
* task, and the name is what does.
|
|
270
|
+
*/
|
|
271
|
+
export declare const Meter: import("react").ForwardRefExoticComponent<MeterProps & import("react").RefAttributes<View>>;
|
|
272
|
+
export type { MeterColor, MeterThreshold };
|
|
273
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/meter/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAA0B,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAS5E,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAML,KAAK,UAAU,EACf,KAAK,cAAc,EACpB,MAAM,kBAAe,CAAC;AAavB,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAoCjB,CAAC;AAEH,KAAK,iBAAiB,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAE5D,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,EACjC,iBAAiB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC;IACzC;;;;;;;;;;OAUG;IACH,UAAU,CAAC,EAAE,cAAc,EAAE,CAAC;IAC9B;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wDAAwD;IACxD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,+CAA+C;IAC/C,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AA2BD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,KAAK,6FA6IjB,CAAC;AAIF,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Where a reading sits on a meter's scale, and what colour it has earned.
|
|
3
|
+
*
|
|
4
|
+
* Kept apart from the component because it is the part that can be wrong
|
|
5
|
+
* without looking wrong: a threshold picked in the wrong order, or a segment
|
|
6
|
+
* count that rounds a real reading down to nothing, is a meter that lies
|
|
7
|
+
* quietly. None of it touches React, so it can be tested on its own.
|
|
8
|
+
*/
|
|
9
|
+
/** The token a meter can be painted with. */
|
|
10
|
+
export type MeterColor = 'primary' | 'success' | 'warning' | 'destructive' | 'info' | 'muted';
|
|
11
|
+
/**
|
|
12
|
+
* A point on the scale, and the colour the meter takes from there upwards.
|
|
13
|
+
*
|
|
14
|
+
* `from` is in the same units as `value` — not a percentage of the range — so
|
|
15
|
+
* a threshold on a 0–8 GB meter is written in gigabytes.
|
|
16
|
+
*/
|
|
17
|
+
export interface MeterThreshold {
|
|
18
|
+
/** The value at which this colour takes over. */
|
|
19
|
+
from: number;
|
|
20
|
+
/** What the bar is painted with at or above `from`. */
|
|
21
|
+
color: MeterColor;
|
|
22
|
+
}
|
|
23
|
+
/** A bounded block count keeps malformed input from allocating without limit. */
|
|
24
|
+
export declare const MAX_METER_SEGMENTS = 100;
|
|
25
|
+
export interface MeterScale {
|
|
26
|
+
min: number;
|
|
27
|
+
max: number;
|
|
28
|
+
value: number;
|
|
29
|
+
fraction: number;
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* Make a public scale safe for layout, animation and native accessibility.
|
|
33
|
+
* Invalid bounds fall back to their documented defaults; if those still do
|
|
34
|
+
* not produce a positive span, the scale honestly collapses at its floor.
|
|
35
|
+
*/
|
|
36
|
+
export declare function normalizeScale(value: number, min: number, max: number): MeterScale;
|
|
37
|
+
/** Positive counts are whole and bounded; zero means the continuous meter. */
|
|
38
|
+
export declare function normalizeSegments(segments: number | undefined): number;
|
|
39
|
+
/** `value` held inside the scale, so a stray number cannot escape the track. */
|
|
40
|
+
export declare function clamp(value: number, min: number, max: number): number;
|
|
41
|
+
/**
|
|
42
|
+
* How far up the scale the value sits, 0–1. An empty or inverted range has no
|
|
43
|
+
* meaningful position in it, so it reads as empty rather than dividing by zero.
|
|
44
|
+
*/
|
|
45
|
+
export declare function fractionOf(value: number, min: number, max: number): number;
|
|
46
|
+
/**
|
|
47
|
+
* The colour the reading has earned: the highest threshold at or below the
|
|
48
|
+
* value, or the base colour when it has reached none of them.
|
|
49
|
+
*
|
|
50
|
+
* Highest-wins rather than first-wins, so the caller can list thresholds in
|
|
51
|
+
* any order and get the same answer. A rule that depended on the order would
|
|
52
|
+
* make a reordered array a silent behaviour change.
|
|
53
|
+
*/
|
|
54
|
+
export declare function colorFor(value: number, base: MeterColor | undefined, thresholds: MeterThreshold[] | undefined): MeterColor | undefined;
|
|
55
|
+
/**
|
|
56
|
+
* How many blocks of a segmented meter are lit.
|
|
57
|
+
*
|
|
58
|
+
* Rounded up, so any reading above the floor lights at least one. Rounding
|
|
59
|
+
* down would leave the whole first block of a four-block meter dark, and "a
|
|
60
|
+
* little" looking like "none" is the reading a meter can least afford to get
|
|
61
|
+
* wrong.
|
|
62
|
+
*/
|
|
63
|
+
export declare function litSegments(fraction: number, segments: number): number;
|
|
64
|
+
/**
|
|
65
|
+
* The value caption: an explicit override, an `Intl` rendering, or a rounded
|
|
66
|
+
* percent.
|
|
67
|
+
*
|
|
68
|
+
* A `percent` style is given the fraction, because that is what a percentage
|
|
69
|
+
* of the scale means; every other style is given the value, because a byte
|
|
70
|
+
* count or a score is a quantity and not a proportion.
|
|
71
|
+
*/
|
|
72
|
+
export declare function formatValue(value: number, fraction: number, valueLabel?: string, formatOptions?: Intl.NumberFormatOptions): string;
|
|
73
|
+
/**
|
|
74
|
+
* The meter's single spoken contract. Visual treatments such as segments,
|
|
75
|
+
* thresholds and motion do not belong here: they do not change the reading.
|
|
76
|
+
*/
|
|
77
|
+
export declare function meterSemantics({ value, fraction, minValue, maxValue, label, accessibilityLabel, valueLabel, formatOptions, }: {
|
|
78
|
+
value: number;
|
|
79
|
+
fraction: number;
|
|
80
|
+
minValue: number;
|
|
81
|
+
maxValue: number;
|
|
82
|
+
label?: string;
|
|
83
|
+
accessibilityLabel?: string;
|
|
84
|
+
valueLabel?: string;
|
|
85
|
+
formatOptions?: Intl.NumberFormatOptions;
|
|
86
|
+
}): {
|
|
87
|
+
label: string | undefined;
|
|
88
|
+
text: string;
|
|
89
|
+
value: {
|
|
90
|
+
min: number;
|
|
91
|
+
max: number;
|
|
92
|
+
now: number;
|
|
93
|
+
text: string;
|
|
94
|
+
};
|
|
95
|
+
};
|
|
96
|
+
//# sourceMappingURL=meter-scale.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"meter-scale.d.ts","sourceRoot":"","sources":["../../../../../src/components/meter/meter-scale.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,6CAA6C;AAC7C,MAAM,MAAM,UAAU,GAClB,SAAS,GACT,SAAS,GACT,SAAS,GACT,aAAa,GACb,MAAM,GACN,OAAO,CAAC;AAEZ;;;;;GAKG;AACH,MAAM,WAAW,cAAc;IAC7B,iDAAiD;IACjD,IAAI,EAAE,MAAM,CAAC;IACb,uDAAuD;IACvD,KAAK,EAAE,UAAU,CAAC;CACnB;AAED,iFAAiF;AACjF,eAAO,MAAM,kBAAkB,MAAM,CAAC;AAEtC,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,UAAU,CAuBlF;AAED,8EAA8E;AAC9E,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,UAG7D;AAED,gFAAgF;AAChF,wBAAgB,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,UAE5D;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,UAEjE;AAED;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CACtB,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,UAAU,GAAG,SAAS,EAC5B,UAAU,EAAE,cAAc,EAAE,GAAG,SAAS,0BAUzC;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,UAK7D;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CACzB,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,MAAM,EAChB,UAAU,CAAC,EAAE,MAAM,EACnB,aAAa,CAAC,EAAE,IAAI,CAAC,mBAAmB,UAazC;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,kBAAkB,EAClB,UAAU,EACV,aAAa,GACd,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC;CAC1C;;;;;;;;;EAOA"}
|