panelui-native 0.30.0 → 0.34.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -2
- package/lib/module/components/button/index.js +106 -11
- package/lib/module/components/button/index.js.map +1 -1
- package/lib/module/components/calendar/index.js +107 -24
- package/lib/module/components/calendar/index.js.map +1 -1
- package/lib/module/components/drawer/index.js +477 -0
- package/lib/module/components/drawer/index.js.map +1 -0
- package/lib/module/components/heatmap-chart/index.js +9 -8
- package/lib/module/components/heatmap-chart/index.js.map +1 -1
- package/lib/module/components/map/index.js +50 -4
- package/lib/module/components/map/index.js.map +1 -1
- package/lib/module/components/panelside/index.js +1024 -0
- package/lib/module/components/panelside/index.js.map +1 -0
- package/lib/module/components/plan/index.js +307 -21
- package/lib/module/components/plan/index.js.map +1 -1
- package/lib/module/components/post/index.js +992 -0
- package/lib/module/components/post/index.js.map +1 -0
- package/lib/module/components/response/index.js +296 -0
- package/lib/module/components/response/index.js.map +1 -0
- package/lib/module/components/response/markdown.js +463 -0
- package/lib/module/components/response/markdown.js.map +1 -0
- package/lib/module/components/select/index.js +111 -18
- package/lib/module/components/select/index.js.map +1 -1
- package/lib/module/components/table/index.js +632 -0
- package/lib/module/components/table/index.js.map +1 -0
- package/lib/module/icons/index.js +220 -0
- package/lib/module/icons/index.js.map +1 -1
- package/lib/module/index.js +6 -1
- package/lib/module/index.js.map +1 -1
- package/lib/module/native/index.js +30 -0
- package/lib/module/native/index.js.map +1 -1
- package/lib/module/utils/date.js +129 -22
- package/lib/module/utils/date.js.map +1 -1
- package/lib/typescript/src/components/button/index.d.ts +22 -1
- package/lib/typescript/src/components/button/index.d.ts.map +1 -1
- package/lib/typescript/src/components/calendar/index.d.ts +12 -3
- package/lib/typescript/src/components/calendar/index.d.ts.map +1 -1
- package/lib/typescript/src/components/drawer/index.d.ts +146 -0
- package/lib/typescript/src/components/drawer/index.d.ts.map +1 -0
- package/lib/typescript/src/components/heatmap-chart/index.d.ts.map +1 -1
- package/lib/typescript/src/components/map/index.d.ts +8 -1
- package/lib/typescript/src/components/map/index.d.ts.map +1 -1
- package/lib/typescript/src/components/panelside/index.d.ts +354 -0
- package/lib/typescript/src/components/panelside/index.d.ts.map +1 -0
- package/lib/typescript/src/components/plan/index.d.ts +121 -10
- package/lib/typescript/src/components/plan/index.d.ts.map +1 -1
- package/lib/typescript/src/components/post/index.d.ts +358 -0
- package/lib/typescript/src/components/post/index.d.ts.map +1 -0
- package/lib/typescript/src/components/response/index.d.ts +91 -0
- package/lib/typescript/src/components/response/index.d.ts.map +1 -0
- package/lib/typescript/src/components/response/markdown.d.ts +88 -0
- package/lib/typescript/src/components/response/markdown.d.ts.map +1 -0
- package/lib/typescript/src/components/select/index.d.ts +27 -2
- package/lib/typescript/src/components/select/index.d.ts.map +1 -1
- package/lib/typescript/src/components/table/index.d.ts +274 -0
- package/lib/typescript/src/components/table/index.d.ts.map +1 -0
- package/lib/typescript/src/icons/index.d.ts +41 -1
- package/lib/typescript/src/icons/index.d.ts.map +1 -1
- package/lib/typescript/src/index.d.ts +7 -2
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/native/index.d.ts +20 -0
- package/lib/typescript/src/native/index.d.ts.map +1 -1
- package/lib/typescript/src/utils/date.d.ts +49 -5
- package/lib/typescript/src/utils/date.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/button/index.tsx +140 -8
- package/src/components/calendar/index.tsx +136 -23
- package/src/components/drawer/index.tsx +662 -0
- package/src/components/heatmap-chart/index.tsx +9 -9
- package/src/components/map/index.tsx +53 -4
- package/src/components/panelside/index.tsx +1358 -0
- package/src/components/plan/index.tsx +344 -21
- package/src/components/post/index.tsx +1116 -0
- package/src/components/response/index.tsx +390 -0
- package/src/components/response/markdown.ts +489 -0
- package/src/components/select/index.tsx +155 -15
- package/src/components/table/index.tsx +747 -0
- package/src/icons/index.tsx +176 -1
- package/src/index.ts +93 -0
- package/src/native/index.ts +51 -0
- package/src/utils/date.ts +146 -22
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/map/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,OAAO,EAWL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAM/D,OAAO,EAEL,YAAY,EACZ,KAAK,aAAa,EAClB,KAAK,aAAa,EACnB,MAAM,cAAW,CAAC;AACnB,OAAO,EACL,WAAW,EAEX,KAAK,SAAS,EACd,KAAK,MAAM,EACX,KAAK,YAAY,EACjB,KAAK,MAAM,EACX,KAAK,kBAAkB,EACvB,KAAK,SAAS,EACf,MAAM,eAAY,CAAC;AAEpB,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,CAAC;AACrC,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/map/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,OAAO,EAWL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAM/D,OAAO,EAEL,YAAY,EACZ,KAAK,aAAa,EAClB,KAAK,aAAa,EACnB,MAAM,cAAW,CAAC;AACnB,OAAO,EACL,WAAW,EAEX,KAAK,SAAS,EACd,KAAK,MAAM,EACX,KAAK,YAAY,EACjB,KAAK,MAAM,EACX,KAAK,kBAAkB,EACvB,KAAK,SAAS,EACf,MAAM,eAAY,CAAC;AAEpB,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,CAAC;AACrC,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC;AAkD9E,MAAM,MAAM,mBAAmB,GAC3B,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,CAAC;AAQnB,UAAU,eAAe;IACvB,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACvC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC;IAC7C,mDAAmD;IACnD,KAAK,EAAE,OAAO,CAAC;CAChB;AAID;;;;;GAKG;AACH,wBAAgB,MAAM,IAAI,eAAe,CAIxC;AAKD,MAAM,WAAW,SAAS;IACxB,yDAAyD;IACzD,KAAK,CAAC,OAAO,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAC3E,gEAAgE;IAChE,SAAS,CAAC,MAAM,EAAE,YAAY,EAAE,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxD,0CAA0C;IAC1C,YAAY,IAAI,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC;CAC3C;AAED,MAAM,WAAW,QAAS,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC3D,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,kBAAkB,CAAC;IACvC,iFAAiF;IACjF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uEAAuE;IACvE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8CAA8C;IAC9C,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC/C,qEAAqE;IACrE,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAsKD,MAAM,WAAW,cAAc;IAC7B,sDAAsD;IACtD,MAAM,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACxD,0DAA0D;IAC1D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;GAKG;AACH,iBAAS,SAAS,CAAC,EACjB,MAAM,EACN,MAAiB,EACjB,OAAO,EACP,SAAS,EACT,QAAQ,GACT,EAAE,cAAc,sCAoEhB;kBA1EQ,SAAS;;;AA6ElB,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IACxB,+EAA+E;IAC/E,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;CACxC;AAED;;;;;;;;;;;;GAYG;AACH,iBAAS,QAAQ,CAAC,EAChB,QAAQ,EACR,SAAS,EACT,IAAe,EACf,IAAW,EACX,IAAgB,GACjB,EAAE,aAAa,+BA6Bf;kBAnCQ,QAAQ;;;AAsCjB,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;GAYG;AACH,iBAAS,QAAQ,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,aAAa,sCAoBtE;kBApBQ,QAAQ;;;AAuBjB,MAAM,WAAW,gBAAgB;IAC/B,sCAAsC;IACtC,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAC/B,iFAAiF;IACjF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sEAAsE;IACtE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iDAAiD;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAwBD;;;;;;;GAOG;AACH,iBAAS,WAAW,CAAC,EACnB,QAAyB,EACzB,IAAW,EACX,MAAc,EACd,OAAe,EACf,SAAS,EACT,QAAQ,GACT,EAAE,gBAAgB,+BAgFlB;kBAvFQ,WAAW;;;AAgGpB,MAAM,WAAW,aAAa;IAC5B,0BAA0B;IAC1B,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wEAAwE;IACxE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED;;;GAGG;AACH,iBAAS,QAAQ,CAAC,EAChB,WAAW,EACX,KAAK,EACL,KAAS,EACT,MAAc,EACd,OAAW,EACX,EAAY,GACb,EAAE,aAAa,sCA8Bf;kBArCQ,QAAQ;;;AAwCjB,MAAM,WAAW,WAAW;IAC1B,4BAA4B;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,qBAAqB;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED;;;;;;GAMG;AACH,iBAAS,MAAM,CAAC,EACd,IAAI,EACJ,EAAE,EACF,SAAe,EACf,KAAK,EACL,KAAS,EACT,OAAa,EACb,EAAU,GACX,EAAE,WAAW,sCAgDb;kBAxDQ,MAAM;;;AA2Df,MAAM,WAAW,eAAe;IAC9B,uDAAuD;IACvD,IAAI,EAAE,OAAO,CAAC;IACd,mEAAmE;IACnE,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,EAAE,CAAC;IAC1B,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,EAAE,CAAC;IAC5B,yBAAyB;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kCAAkC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED;;;;;;;GAOG;AACH,iBAAS,UAAU,CAAC,EAClB,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,WAAe,EACf,WAAiB,EACjB,OAAO,EACP,EAAc,GACf,EAAE,eAAe,sCAmCjB;kBA3CQ,UAAU;;;AA8CnB,MAAM,WAAW,eAAe;IAC9B,iCAAiC;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED;;;;;;GAMG;AACH,iBAAS,UAAU,CAAC,EAClB,IAAI,EACJ,KAAK,EACL,SAAS,EACT,MAAW,EACX,OAAY,EACZ,OAAO,EACP,EAAc,GACf,EAAE,eAAe,sCA4DjB;kBApEQ,UAAU;;;AAuEnB,MAAM,WAAW,eAAe;IAC9B,gCAAgC;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,yEAAyE;IACzE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,iBAAS,UAAU,CAAC,EAClB,IAAI,EACJ,MAAM,EACN,MAAW,EACX,SAAa,EACb,OAAc,EACd,OAAY,EACZ,EAAc,GACf,EAAE,eAAe,sCAgEjB;kBAxEQ,UAAU;;;AA2EnB,MAAM,WAAW,oBAAoB;IACnC,iEAAiE;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wDAAwD;AACxD,iBAAS,eAAe,CAAC,EACvB,OAAe,EACf,QAAgB,GACjB,EAAE,oBAAoB,sCAItB;kBAPQ,eAAe;;;AAUxB,eAAO,MAAM,GAAG;;;;;;;;;;;CAWd,CAAC"}
|
|
@@ -0,0 +1,354 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Panelside — a navigation panel that moves the app aside instead of covering
|
|
3
|
+
* it.
|
|
4
|
+
*
|
|
5
|
+
* ```tsx
|
|
6
|
+
* <Panelside>
|
|
7
|
+
* <Panelside.Panel>
|
|
8
|
+
* <Panelside.Header title="Assistant">
|
|
9
|
+
* <Panelside.Search value={query} onChangeText={setQuery} />
|
|
10
|
+
* </Panelside.Header>
|
|
11
|
+
* <Panelside.Content>
|
|
12
|
+
* <Panelside.Group>
|
|
13
|
+
* <Panelside.GroupLabel>Recents</Panelside.GroupLabel>
|
|
14
|
+
* <Panelside.Item label="Launch thread" />
|
|
15
|
+
* </Panelside.Group>
|
|
16
|
+
* </Panelside.Content>
|
|
17
|
+
* <Panelside.Footer>
|
|
18
|
+
* <Panelside.Cta label="New chat" onPress={compose} />
|
|
19
|
+
* </Panelside.Footer>
|
|
20
|
+
* </Panelside.Panel>
|
|
21
|
+
*
|
|
22
|
+
* <Panelside.Scene>
|
|
23
|
+
* <Panelside.Trigger />
|
|
24
|
+
* <Conversation />
|
|
25
|
+
* </Panelside.Scene>
|
|
26
|
+
* </Panelside>
|
|
27
|
+
* ```
|
|
28
|
+
*
|
|
29
|
+
* ## Why it is not a Drawer
|
|
30
|
+
*
|
|
31
|
+
* A drawer is an overlay: it mounts through a portal, lands above everything
|
|
32
|
+
* and dims what it hid. That is the wrong shape here, because the whole point
|
|
33
|
+
* of this pattern is that the app *stays legible* — it slides across, shrinks,
|
|
34
|
+
* rounds its corners and waits, so the panel reads as a layer behind the app
|
|
35
|
+
* rather than a sheet on top of it. A portal cannot do that: its content is
|
|
36
|
+
* above the app content by construction, and the app content is somewhere else
|
|
37
|
+
* in the tree entirely, unreachable.
|
|
38
|
+
*
|
|
39
|
+
* So Panelside owns both halves. It renders inline, keeps the panel and the
|
|
40
|
+
* app screen as siblings under one clipping container, and gives them a single
|
|
41
|
+
* `progress` value to move against. `Panelside.Scene` is the wrapper you put
|
|
42
|
+
* around your own screen; without it there is nothing to push, which is why it
|
|
43
|
+
* is explicit rather than inferred.
|
|
44
|
+
*
|
|
45
|
+
* ## The scene maths
|
|
46
|
+
*
|
|
47
|
+
* React Native scales a view about its centre, so a scene scaled to `s` has
|
|
48
|
+
* already pulled its left edge `W * (1 - s) / 2` inward before any translation
|
|
49
|
+
* is applied. Translating by the panel width alone would therefore leave a gap
|
|
50
|
+
* that grows with the scale, and the panel would look mis-measured. Subtracting
|
|
51
|
+
* that inset is what puts the scene's *visible* edge exactly where the panel
|
|
52
|
+
* ends:
|
|
53
|
+
*
|
|
54
|
+
* scale = 1 - (1 - s) * p
|
|
55
|
+
* translateX = p * (width + gap) - W * (1 - scale) / 2
|
|
56
|
+
*
|
|
57
|
+
* Both are driven from one shared value, so a half-finished drag is a real
|
|
58
|
+
* halfway state rather than an interpolation between two snapshots.
|
|
59
|
+
*
|
|
60
|
+
* ## One gesture, both directions
|
|
61
|
+
*
|
|
62
|
+
* A single pan opens and closes. By default it listens across the whole
|
|
63
|
+
* surface, because that is the behaviour this pattern is known for: a sideways
|
|
64
|
+
* drag anywhere on the app brings the panel in, from wherever your thumb
|
|
65
|
+
* already was. What keeps a list usable underneath it is the pair of
|
|
66
|
+
* thresholds — the drag gives itself up on twelve points of vertical travel
|
|
67
|
+
* and only claims the touch at fourteen horizontal, so anything even slightly
|
|
68
|
+
* vertical resolves as a scroll.
|
|
69
|
+
*
|
|
70
|
+
* `swipeFrom="edge"` narrows the closed-state hit area to a strip at the
|
|
71
|
+
* leading screen edge instead. That is for a scene with its own use for a
|
|
72
|
+
* horizontal drag — a carousel, a wide table, a pannable chart — which would
|
|
73
|
+
* otherwise fight the panel and lose.
|
|
74
|
+
*
|
|
75
|
+
* Reanimated's default `ReduceMotion.System` applies throughout: with the
|
|
76
|
+
* accessibility setting on, every spring here resolves instantly to its target
|
|
77
|
+
* rather than travelling.
|
|
78
|
+
*/
|
|
79
|
+
import { type ReactElement, type ReactNode } from 'react';
|
|
80
|
+
import { type PressableProps, type ScrollViewProps, type TextInputProps, type ViewProps } from 'react-native';
|
|
81
|
+
import { type SharedValue } from 'react-native-reanimated';
|
|
82
|
+
export type PanelsideMode = 'push' | 'overlay';
|
|
83
|
+
export type PanelsideSwipeFrom = 'anywhere' | 'edge';
|
|
84
|
+
export interface UsePanelsideResult {
|
|
85
|
+
open: boolean;
|
|
86
|
+
setOpen: (open: boolean) => void;
|
|
87
|
+
toggle: () => void;
|
|
88
|
+
/**
|
|
89
|
+
* How far the panel has travelled, 0 to 1, on the UI thread. Read it to move
|
|
90
|
+
* something of your own with the panel — a header that fades, a title that
|
|
91
|
+
* slides — without a re-render per frame.
|
|
92
|
+
*/
|
|
93
|
+
progress: SharedValue<number>;
|
|
94
|
+
/** True while the panel is docked open beside the scene. */
|
|
95
|
+
docked: boolean;
|
|
96
|
+
}
|
|
97
|
+
/**
|
|
98
|
+
* The panel's state, from anywhere inside a `<Panelside>` — including your own
|
|
99
|
+
* screen inside `Panelside.Scene`, which is where a custom open button usually
|
|
100
|
+
* lives.
|
|
101
|
+
*/
|
|
102
|
+
export declare function usePanelside(): UsePanelsideResult;
|
|
103
|
+
export interface PanelsideProps {
|
|
104
|
+
children: ReactNode;
|
|
105
|
+
/** Open state, when you want to own it. Pair with `onOpenChange`. */
|
|
106
|
+
open?: boolean;
|
|
107
|
+
/** Called with the next open state, whether a gesture or you caused it. */
|
|
108
|
+
onOpenChange?: (open: boolean) => void;
|
|
109
|
+
/** Open state to start at when you are not controlling it. */
|
|
110
|
+
defaultOpen?: boolean;
|
|
111
|
+
/**
|
|
112
|
+
* How the two layers relate. `push` moves the scene aside and curves it,
|
|
113
|
+
* which is the point of this component. `overlay` slides the panel over a
|
|
114
|
+
* scene that stays put — the same navigation, for a screen whose content
|
|
115
|
+
* cannot afford to move.
|
|
116
|
+
*/
|
|
117
|
+
mode?: PanelsideMode;
|
|
118
|
+
/**
|
|
119
|
+
* Panel width in points. Defaults to 80% of the container capped at 360,
|
|
120
|
+
* and to a third of it capped at 320 once docked — an overlay panel gives
|
|
121
|
+
* the width back when it closes and a docked one keeps it, so they are not
|
|
122
|
+
* the same measurement. The caps are what stop a tablet getting a navigation
|
|
123
|
+
* list with a field of whitespace beside it.
|
|
124
|
+
*/
|
|
125
|
+
width?: number;
|
|
126
|
+
/**
|
|
127
|
+
* Container width at or above which the panel stops being an overlay and
|
|
128
|
+
* becomes a permanent sidebar: laid out beside the scene, always open, with
|
|
129
|
+
* the gesture and the trigger switched off. A docked panel also narrows to a
|
|
130
|
+
* third of the container, capped at 320 — docked, every point it takes is a
|
|
131
|
+
* point the app does not get back.
|
|
132
|
+
*
|
|
133
|
+
* Off by default, and deliberately not a guess — a large phone in landscape
|
|
134
|
+
* is wider than a small tablet in portrait, so no single number is right for
|
|
135
|
+
* every app. Set it high enough that what is left over is still a screen:
|
|
136
|
+
* around 700 is the first width where both halves have room.
|
|
137
|
+
*/
|
|
138
|
+
dock?: number | false;
|
|
139
|
+
/** Swipe to open, and drag the scene to close. Default true. */
|
|
140
|
+
swipeEnabled?: boolean;
|
|
141
|
+
/**
|
|
142
|
+
* Where a swipe may begin. `anywhere` is the default and the behaviour this
|
|
143
|
+
* pattern is known for — a sideways drag across the app opens the panel from
|
|
144
|
+
* wherever your thumb already was.
|
|
145
|
+
*
|
|
146
|
+
* `edge` narrows it to a strip at the leading screen edge, for a scene that
|
|
147
|
+
* has its own use for a horizontal drag: a carousel, a wide table, a chart
|
|
148
|
+
* you can pan. Anything like that under an `anywhere` panel will fight it,
|
|
149
|
+
* and the panel usually wins.
|
|
150
|
+
*/
|
|
151
|
+
swipeFrom?: PanelsideSwipeFrom;
|
|
152
|
+
/**
|
|
153
|
+
* How wide the leading-edge strip that starts a swipe is, when `swipeFrom`
|
|
154
|
+
* is `edge`. Default 48 — wider than the system's own edge gestures, because
|
|
155
|
+
* there is no bezel to feel for. Ignored otherwise.
|
|
156
|
+
*/
|
|
157
|
+
edgeWidth?: number;
|
|
158
|
+
/**
|
|
159
|
+
* Tapping the pushed scene, or the Android back button, closes the panel.
|
|
160
|
+
* Default true.
|
|
161
|
+
*/
|
|
162
|
+
dismissible?: boolean;
|
|
163
|
+
className?: string;
|
|
164
|
+
}
|
|
165
|
+
declare function PanelsideRoot({ children, open: controlledOpen, onOpenChange, defaultOpen, mode, width: widthProp, dock, swipeEnabled, swipeFrom, edgeWidth, dismissible, className, }: PanelsideProps): import("react").JSX.Element;
|
|
166
|
+
export interface PanelsidePanelProps extends ViewProps {
|
|
167
|
+
className?: string;
|
|
168
|
+
children?: ReactNode;
|
|
169
|
+
}
|
|
170
|
+
declare function PanelsidePanel({ className, children, style, ...props }: PanelsidePanelProps): import("react").JSX.Element;
|
|
171
|
+
declare namespace PanelsidePanel {
|
|
172
|
+
var displayName: string;
|
|
173
|
+
}
|
|
174
|
+
export interface PanelsideHeaderProps extends ViewProps {
|
|
175
|
+
className?: string;
|
|
176
|
+
/** Rendered as the heading. Omit it and supply your own in `children`. */
|
|
177
|
+
title?: string;
|
|
178
|
+
/** A single element pinned to the trailing end of the title row. */
|
|
179
|
+
action?: ReactNode;
|
|
180
|
+
/** Anything below the title row — a search field, a workspace switcher. */
|
|
181
|
+
children?: ReactNode;
|
|
182
|
+
}
|
|
183
|
+
declare function PanelsideHeader({ className, title, action, children, style, ...props }: PanelsideHeaderProps): import("react").JSX.Element;
|
|
184
|
+
declare namespace PanelsideHeader {
|
|
185
|
+
var displayName: string;
|
|
186
|
+
}
|
|
187
|
+
export interface PanelsideSearchProps extends TextInputProps {
|
|
188
|
+
className?: string;
|
|
189
|
+
containerClassName?: string;
|
|
190
|
+
}
|
|
191
|
+
/**
|
|
192
|
+
* A compact filter field for the panel.
|
|
193
|
+
*
|
|
194
|
+
* Deliberately not the library's `Input`: that field carries a label, a
|
|
195
|
+
* description, an error slot and keyboard avoidance, none of which a panel
|
|
196
|
+
* search row wants, and all of which would have to be switched off at every
|
|
197
|
+
* call site.
|
|
198
|
+
*/
|
|
199
|
+
declare function PanelsideSearch({ className, containerClassName, placeholder, ...props }: PanelsideSearchProps): import("react").JSX.Element;
|
|
200
|
+
declare namespace PanelsideSearch {
|
|
201
|
+
var displayName: string;
|
|
202
|
+
}
|
|
203
|
+
export interface PanelsideContentProps extends ScrollViewProps {
|
|
204
|
+
className?: string;
|
|
205
|
+
contentContainerClassName?: string;
|
|
206
|
+
children?: ReactNode;
|
|
207
|
+
}
|
|
208
|
+
declare function PanelsideContent({ className, contentContainerClassName, contentContainerStyle, children, ...props }: PanelsideContentProps): import("react").JSX.Element;
|
|
209
|
+
declare namespace PanelsideContent {
|
|
210
|
+
var displayName: string;
|
|
211
|
+
}
|
|
212
|
+
export interface PanelsideGroupProps extends ViewProps {
|
|
213
|
+
className?: string;
|
|
214
|
+
children?: ReactNode;
|
|
215
|
+
}
|
|
216
|
+
declare function PanelsideGroup({ className, children, ...props }: PanelsideGroupProps): import("react").JSX.Element;
|
|
217
|
+
declare namespace PanelsideGroup {
|
|
218
|
+
var displayName: string;
|
|
219
|
+
}
|
|
220
|
+
export interface PanelsideGroupLabelProps extends ViewProps {
|
|
221
|
+
className?: string;
|
|
222
|
+
children?: ReactNode;
|
|
223
|
+
}
|
|
224
|
+
declare function PanelsideGroupLabel({ className, children, ...props }: PanelsideGroupLabelProps): import("react").JSX.Element;
|
|
225
|
+
declare namespace PanelsideGroupLabel {
|
|
226
|
+
var displayName: string;
|
|
227
|
+
}
|
|
228
|
+
export interface PanelsideItemProps extends Omit<PressableProps, 'children'> {
|
|
229
|
+
className?: string;
|
|
230
|
+
/** Leading element — an icon, an avatar, a coloured dot. */
|
|
231
|
+
icon?: ReactNode;
|
|
232
|
+
/** The row's text. Truncated to one line, since chat titles run long. */
|
|
233
|
+
label?: string;
|
|
234
|
+
/** Marks the row as the current destination. */
|
|
235
|
+
active?: boolean;
|
|
236
|
+
/**
|
|
237
|
+
* Trailing count or status. A number or string renders as a pill; anything
|
|
238
|
+
* else renders as given.
|
|
239
|
+
*/
|
|
240
|
+
badge?: ReactNode;
|
|
241
|
+
disabled?: boolean;
|
|
242
|
+
/** Trailing content — usually a `Panelside.Action`. */
|
|
243
|
+
children?: ReactNode;
|
|
244
|
+
}
|
|
245
|
+
declare function PanelsideItem({ className, icon, label, active, badge, disabled, children, ...props }: PanelsideItemProps): import("react").JSX.Element;
|
|
246
|
+
declare namespace PanelsideItem {
|
|
247
|
+
var displayName: string;
|
|
248
|
+
}
|
|
249
|
+
export interface PanelsideActionProps extends Omit<PressableProps, 'children'> {
|
|
250
|
+
className?: string;
|
|
251
|
+
/**
|
|
252
|
+
* What a screen reader announces. The default control is an unlabelled glyph,
|
|
253
|
+
* so this is the only description it has.
|
|
254
|
+
*/
|
|
255
|
+
label?: string;
|
|
256
|
+
/** Replaces the default overflow glyph. */
|
|
257
|
+
children?: ReactNode;
|
|
258
|
+
}
|
|
259
|
+
declare function PanelsideAction({ className, label, children, ...props }: PanelsideActionProps): import("react").JSX.Element;
|
|
260
|
+
declare namespace PanelsideAction {
|
|
261
|
+
var displayName: string;
|
|
262
|
+
}
|
|
263
|
+
export interface PanelsideFooterProps extends ViewProps {
|
|
264
|
+
className?: string;
|
|
265
|
+
/**
|
|
266
|
+
* Overlay the scrolling list instead of taking a row below it. Default true —
|
|
267
|
+
* the list runs the full height of the panel behind it, and `Panelside.Content`
|
|
268
|
+
* leaves exactly this footer's height of room at the end.
|
|
269
|
+
*/
|
|
270
|
+
floating?: boolean;
|
|
271
|
+
children?: ReactNode;
|
|
272
|
+
}
|
|
273
|
+
declare function PanelsideFooter({ className, floating, children, style, ...props }: PanelsideFooterProps): import("react").JSX.Element;
|
|
274
|
+
declare namespace PanelsideFooter {
|
|
275
|
+
var displayName: string;
|
|
276
|
+
}
|
|
277
|
+
export interface PanelsideCtaProps extends Omit<PressableProps, 'children'> {
|
|
278
|
+
className?: string;
|
|
279
|
+
/** The button's text. */
|
|
280
|
+
label?: string;
|
|
281
|
+
/** Leading element, usually an icon. */
|
|
282
|
+
icon?: ReactNode;
|
|
283
|
+
/** `primary` is the filled accent pill; `secondary` is the quiet one. */
|
|
284
|
+
variant?: 'primary' | 'secondary';
|
|
285
|
+
/**
|
|
286
|
+
* Render the platform's own button instead of the pill. Requires the
|
|
287
|
+
* optional `@expo/ui` package; without it this prop does nothing.
|
|
288
|
+
*
|
|
289
|
+
* **Theme tokens do not apply** — the platform draws the button, so
|
|
290
|
+
* `className` and `icon` are ignored and it sizes itself to `label`.
|
|
291
|
+
*/
|
|
292
|
+
native?: boolean;
|
|
293
|
+
/**
|
|
294
|
+
* Draw the native button in the platform's Liquid Glass material. Requires
|
|
295
|
+
* `native`, and iOS 26 or later; ignored anywhere else.
|
|
296
|
+
*/
|
|
297
|
+
glass?: boolean;
|
|
298
|
+
children?: ReactNode;
|
|
299
|
+
}
|
|
300
|
+
declare function PanelsideCta({ className, label, icon, variant, native, glass, disabled, children, ...props }: PanelsideCtaProps): import("react").JSX.Element;
|
|
301
|
+
declare namespace PanelsideCta {
|
|
302
|
+
var displayName: string;
|
|
303
|
+
}
|
|
304
|
+
export interface PanelsideSceneProps extends ViewProps {
|
|
305
|
+
className?: string;
|
|
306
|
+
/**
|
|
307
|
+
* How small the scene gets at full travel. Default 1 — the screen keeps its
|
|
308
|
+
* full height and stays behind the status bar, and the radius and dim do the
|
|
309
|
+
* work. Below one it shrinks about its centre, which insets it top and bottom
|
|
310
|
+
* as well as at the side.
|
|
311
|
+
*/
|
|
312
|
+
scale?: number;
|
|
313
|
+
/** The corner radius the scene reaches at full travel. Default 44. */
|
|
314
|
+
radius?: number;
|
|
315
|
+
/** How far the scene dims at full travel, 0 to 1. Default 0.45. */
|
|
316
|
+
dim?: number;
|
|
317
|
+
children?: ReactNode;
|
|
318
|
+
}
|
|
319
|
+
declare function PanelsideScene({ className, scale, radius, dim, children, style, ...props }: PanelsideSceneProps): import("react").JSX.Element;
|
|
320
|
+
declare namespace PanelsideScene {
|
|
321
|
+
var displayName: string;
|
|
322
|
+
}
|
|
323
|
+
export interface PanelsideTriggerProps extends Omit<PressableProps, 'children'> {
|
|
324
|
+
className?: string;
|
|
325
|
+
/** What a screen reader announces. */
|
|
326
|
+
label?: string;
|
|
327
|
+
/**
|
|
328
|
+
* A single pressable element to use instead of the default button. Its own
|
|
329
|
+
* `onPress` still runs.
|
|
330
|
+
*/
|
|
331
|
+
children?: ReactElement<{
|
|
332
|
+
onPress?: (...args: unknown[]) => void;
|
|
333
|
+
}>;
|
|
334
|
+
}
|
|
335
|
+
declare function PanelsideTrigger({ className, label, children, ...props }: PanelsideTriggerProps): import("react").JSX.Element | null;
|
|
336
|
+
declare namespace PanelsideTrigger {
|
|
337
|
+
var displayName: string;
|
|
338
|
+
}
|
|
339
|
+
export declare const Panelside: typeof PanelsideRoot & {
|
|
340
|
+
Panel: typeof PanelsidePanel;
|
|
341
|
+
Header: typeof PanelsideHeader;
|
|
342
|
+
Search: typeof PanelsideSearch;
|
|
343
|
+
Content: typeof PanelsideContent;
|
|
344
|
+
Group: typeof PanelsideGroup;
|
|
345
|
+
GroupLabel: typeof PanelsideGroupLabel;
|
|
346
|
+
Item: typeof PanelsideItem;
|
|
347
|
+
Action: typeof PanelsideAction;
|
|
348
|
+
Footer: typeof PanelsideFooter;
|
|
349
|
+
Cta: typeof PanelsideCta;
|
|
350
|
+
Scene: typeof PanelsideScene;
|
|
351
|
+
Trigger: typeof PanelsideTrigger;
|
|
352
|
+
};
|
|
353
|
+
export {};
|
|
354
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/panelside/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -6,20 +6,41 @@
|
|
|
6
6
|
* and stops is not a matter of interpretation, and a footer that can hold the
|
|
7
7
|
* button that approves it.
|
|
8
8
|
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
9
|
+
* The body is a rail of steps rather than prose, because a plan is an ordered
|
|
10
|
+
* list of things that will happen and the reader's question is always *which
|
|
11
|
+
* one is running*. A paragraph describing the same four steps cannot be glanced
|
|
12
|
+
* at to answer that; a column of markers can. The rail fills behind the steps
|
|
13
|
+
* that are done, so progress is legible from its left edge alone, and
|
|
14
|
+
* `Plan.Steps` counts itself so `Plan.Progress` can say `2 of 4` up in the
|
|
15
|
+
* header without the total being stated twice.
|
|
16
|
+
*
|
|
17
|
+
* It streams. `isStreaming` puts a shimmer on the title, the description and
|
|
18
|
+
* the one step that is running, which is the honest way to render text that is
|
|
19
|
+
* still arriving — the alternative is a title that grows a word at a time and
|
|
20
|
+
* reads as finished at every intermediate length.
|
|
13
21
|
*
|
|
14
22
|
* ```tsx
|
|
15
23
|
* <Plan isStreaming={streaming}>
|
|
16
24
|
* <Plan.Header>
|
|
25
|
+
* <Plan.Icon><FileIcon size={16} /></Plan.Icon>
|
|
17
26
|
* <Plan.Title>Migrate the calendar</Plan.Title>
|
|
18
27
|
* <Plan.Description>Four files, no API change.</Plan.Description>
|
|
19
|
-
* <Plan.Action
|
|
28
|
+
* <Plan.Action>
|
|
29
|
+
* <Plan.Progress />
|
|
30
|
+
* <Plan.Trigger />
|
|
31
|
+
* </Plan.Action>
|
|
20
32
|
* </Plan.Header>
|
|
21
|
-
* <Plan.Content
|
|
22
|
-
*
|
|
33
|
+
* <Plan.Content>
|
|
34
|
+
* <Plan.Steps>
|
|
35
|
+
* <Plan.Step status="done" meta="utils/date.ts">Read the date utils</Plan.Step>
|
|
36
|
+
* <Plan.Step status="active">Replace the month grid</Plan.Step>
|
|
37
|
+
* <Plan.Step>Update the docs page</Plan.Step>
|
|
38
|
+
* </Plan.Steps>
|
|
39
|
+
* </Plan.Content>
|
|
40
|
+
* <Plan.Footer>
|
|
41
|
+
* <Button variant="outline">Revise</Button>
|
|
42
|
+
* <Button>Approve</Button>
|
|
43
|
+
* </Plan.Footer>
|
|
23
44
|
* </Plan>
|
|
24
45
|
* ```
|
|
25
46
|
*
|
|
@@ -32,6 +53,13 @@
|
|
|
32
53
|
*/
|
|
33
54
|
import { type ReactNode } from 'react';
|
|
34
55
|
import { type PressableProps, type ViewProps } from 'react-native';
|
|
56
|
+
import { type TextProps } from '../../primitives/text.js';
|
|
57
|
+
export type PlanStepStatus = 'pending' | 'active' | 'done' | 'skipped';
|
|
58
|
+
/** How far down the rail the plan has got. Reported by `Plan.Steps`. */
|
|
59
|
+
export interface PlanStepCounts {
|
|
60
|
+
done: number;
|
|
61
|
+
total: number;
|
|
62
|
+
}
|
|
35
63
|
export interface PlanProps extends Omit<ViewProps, 'children'> {
|
|
36
64
|
className?: string;
|
|
37
65
|
/** Whether the plan is still being written. Shimmers the title and description. */
|
|
@@ -55,12 +83,24 @@ export interface PlanHeaderProps extends ViewProps {
|
|
|
55
83
|
* The title, the description and whatever acts on them.
|
|
56
84
|
*
|
|
57
85
|
* The heading is wrapped in a column of its own so the action stays pinned to
|
|
58
|
-
* the trailing edge as the title wraps, rather than riding down with it.
|
|
86
|
+
* the trailing edge as the title wraps, rather than riding down with it. An
|
|
87
|
+
* icon is pulled out to the leading edge for the same reason, in the other
|
|
88
|
+
* direction — a badge that rode down with a wrapping title would stop reading
|
|
89
|
+
* as a badge for the plan.
|
|
59
90
|
*/
|
|
60
91
|
declare function PlanHeader({ className, children, ...props }: PlanHeaderProps): import("react").JSX.Element;
|
|
61
92
|
declare namespace PlanHeader {
|
|
62
93
|
var displayName: string;
|
|
63
94
|
}
|
|
95
|
+
export interface PlanIconProps extends ViewProps {
|
|
96
|
+
className?: string;
|
|
97
|
+
children?: ReactNode;
|
|
98
|
+
}
|
|
99
|
+
/** A badge on the header's leading edge — what kind of plan this is. */
|
|
100
|
+
declare function PlanIcon({ className, children, ...props }: PlanIconProps): import("react").JSX.Element;
|
|
101
|
+
declare namespace PlanIcon {
|
|
102
|
+
var displayName: string;
|
|
103
|
+
}
|
|
64
104
|
export interface PlanTitleProps extends ViewProps {
|
|
65
105
|
className?: string;
|
|
66
106
|
children?: ReactNode;
|
|
@@ -105,22 +145,93 @@ declare function PlanContent({ className, children, ...props }: PlanContentProps
|
|
|
105
145
|
declare namespace PlanContent {
|
|
106
146
|
var displayName: string;
|
|
107
147
|
}
|
|
148
|
+
export interface PlanStepsProps extends ViewProps {
|
|
149
|
+
className?: string;
|
|
150
|
+
children?: ReactNode;
|
|
151
|
+
}
|
|
152
|
+
/**
|
|
153
|
+
* The rail. A plan is an ordered list of things that will happen, and this is
|
|
154
|
+
* the list — a paragraph describing the same four steps cannot be glanced at to
|
|
155
|
+
* see which one is running.
|
|
156
|
+
*
|
|
157
|
+
* It counts its own steps and reports the count up, which is what lets
|
|
158
|
+
* `Plan.Progress` sit in the header without the caller stating the total twice.
|
|
159
|
+
*/
|
|
160
|
+
declare function PlanSteps({ className, children, ...props }: PlanStepsProps): import("react").JSX.Element;
|
|
161
|
+
declare namespace PlanSteps {
|
|
162
|
+
var displayName: string;
|
|
163
|
+
}
|
|
164
|
+
export interface PlanStepProps extends Omit<ViewProps, 'children'> {
|
|
165
|
+
className?: string;
|
|
166
|
+
/** How far this step has got. Decides the marker, the title and the rail below it. */
|
|
167
|
+
status?: PlanStepStatus;
|
|
168
|
+
/** A line under the title — what the step will touch, or what it found. */
|
|
169
|
+
description?: ReactNode;
|
|
170
|
+
/** A file path, a count, a duration. Rendered as a small mono chip. */
|
|
171
|
+
meta?: ReactNode;
|
|
172
|
+
/** Drop the connector below this step. `Plan.Steps` sets it for you. */
|
|
173
|
+
last?: boolean;
|
|
174
|
+
children?: ReactNode;
|
|
175
|
+
}
|
|
176
|
+
/**
|
|
177
|
+
* One step. The marker says which of the four states it is in and the rail
|
|
178
|
+
* below it is filled once it is done, so the plan's progress is legible from
|
|
179
|
+
* the shape of the left-hand column alone.
|
|
180
|
+
*/
|
|
181
|
+
declare function PlanStep({ className, status, description, meta, last, children, ...props }: PlanStepProps): import("react").JSX.Element;
|
|
182
|
+
declare namespace PlanStep {
|
|
183
|
+
var displayName: string;
|
|
184
|
+
}
|
|
185
|
+
export interface PlanProgressProps extends TextProps {
|
|
186
|
+
className?: string;
|
|
187
|
+
/** Steps settled so far. Defaults to what `Plan.Steps` counted. */
|
|
188
|
+
value?: number;
|
|
189
|
+
/** Steps in total. Defaults to what `Plan.Steps` counted. */
|
|
190
|
+
total?: number;
|
|
191
|
+
}
|
|
192
|
+
/**
|
|
193
|
+
* How far down the rail the plan has got, as `2 of 4`. Renders nothing until
|
|
194
|
+
* there is a rail to count — a plan with no steps has no progress to report,
|
|
195
|
+
* and `0 of 0` is worse than silence.
|
|
196
|
+
*/
|
|
197
|
+
declare function PlanProgress({ className, value, total, ...props }: PlanProgressProps): import("react").JSX.Element | null;
|
|
198
|
+
declare namespace PlanProgress {
|
|
199
|
+
var displayName: string;
|
|
200
|
+
}
|
|
108
201
|
export interface PlanFooterProps extends ViewProps {
|
|
109
202
|
className?: string;
|
|
203
|
+
/**
|
|
204
|
+
* How the actions divide the row. `stretch` splits it between them, which is
|
|
205
|
+
* what a phone wants: the decision is the point of the card, and the two
|
|
206
|
+
* buttons that make it should be the width of a thumb. `end` packs them
|
|
207
|
+
* against the trailing edge for a plan sitting inside something denser.
|
|
208
|
+
*/
|
|
209
|
+
layout?: 'stretch' | 'end';
|
|
110
210
|
children?: ReactNode;
|
|
111
211
|
}
|
|
112
|
-
/**
|
|
113
|
-
|
|
212
|
+
/**
|
|
213
|
+
* Where the buttons that answer the plan go.
|
|
214
|
+
*
|
|
215
|
+
* Each action takes an equal share of the row by default. A pair of small
|
|
216
|
+
* buttons hugging the trailing corner is a pointer-and-cursor shape; on a phone
|
|
217
|
+
* the answer to "shall I do this" is the most important control on the screen
|
|
218
|
+
* and wants to be hit without aiming.
|
|
219
|
+
*/
|
|
220
|
+
declare function PlanFooter({ className, layout, children, ...props }: PlanFooterProps): import("react").JSX.Element;
|
|
114
221
|
declare namespace PlanFooter {
|
|
115
222
|
var displayName: string;
|
|
116
223
|
}
|
|
117
224
|
export declare const Plan: typeof PlanRoot & {
|
|
118
225
|
Header: typeof PlanHeader;
|
|
226
|
+
Icon: typeof PlanIcon;
|
|
119
227
|
Title: typeof PlanTitle;
|
|
120
228
|
Description: typeof PlanDescription;
|
|
121
229
|
Action: typeof PlanAction;
|
|
230
|
+
Progress: typeof PlanProgress;
|
|
122
231
|
Trigger: typeof PlanTrigger;
|
|
123
232
|
Content: typeof PlanContent;
|
|
233
|
+
Steps: typeof PlanSteps;
|
|
234
|
+
Step: typeof PlanStep;
|
|
124
235
|
Footer: typeof PlanFooter;
|
|
125
236
|
};
|
|
126
237
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/plan/index.tsx"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/plan/index.tsx"],"names":[],"mappings":"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"}
|