react-native-terra-ui 0.11.17 → 0.12.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/CHANGELOG.md +17 -0
- package/lib/module/components/accordion/Accordion.js +109 -0
- package/lib/module/components/accordion/Accordion.js.map +1 -0
- package/lib/module/components/accordion/context.js +34 -0
- package/lib/module/components/accordion/context.js.map +1 -0
- package/lib/module/components/accordion/hooks/use-accordion-core.js +46 -0
- package/lib/module/components/accordion/hooks/use-accordion-core.js.map +1 -0
- package/lib/module/components/accordion/index.js +5 -0
- package/lib/module/components/accordion/index.js.map +1 -0
- package/lib/module/components/accordion/parts/AccordionContent.js +98 -0
- package/lib/module/components/accordion/parts/AccordionContent.js.map +1 -0
- package/lib/module/components/accordion/parts/AccordionIndicator.js +60 -0
- package/lib/module/components/accordion/parts/AccordionIndicator.js.map +1 -0
- package/lib/module/components/accordion/parts/AccordionItem.js +53 -0
- package/lib/module/components/accordion/parts/AccordionItem.js.map +1 -0
- package/lib/module/components/accordion/parts/AccordionTrigger.js +85 -0
- package/lib/module/components/accordion/parts/AccordionTrigger.js.map +1 -0
- package/lib/module/components/accordion/types.js +4 -0
- package/lib/module/components/accordion/types.js.map +1 -0
- package/lib/module/components/accordion/utils.js +15 -0
- package/lib/module/components/accordion/utils.js.map +1 -0
- package/lib/module/components/badge/Badge.js +219 -64
- package/lib/module/components/badge/Badge.js.map +1 -1
- package/lib/module/components/badge/WithBadge.js +94 -0
- package/lib/module/components/badge/WithBadge.js.map +1 -0
- package/lib/module/components/badge/index.js +1 -0
- package/lib/module/components/badge/index.js.map +1 -1
- package/lib/module/components/badge/utils.js +3 -3
- package/lib/module/components/header/parts/HeaderBar.js +34 -7
- package/lib/module/components/header/parts/HeaderBar.js.map +1 -1
- package/lib/module/components/index.js +1 -0
- package/lib/module/components/index.js.map +1 -1
- package/lib/typescript/src/components/accordion/Accordion.d.ts +33 -0
- package/lib/typescript/src/components/accordion/Accordion.d.ts.map +1 -0
- package/lib/typescript/src/components/accordion/context.d.ts +25 -0
- package/lib/typescript/src/components/accordion/context.d.ts.map +1 -0
- package/lib/typescript/src/components/accordion/hooks/use-accordion-core.d.ts +11 -0
- package/lib/typescript/src/components/accordion/hooks/use-accordion-core.d.ts.map +1 -0
- package/lib/typescript/src/components/accordion/index.d.ts +8 -0
- package/lib/typescript/src/components/accordion/index.d.ts.map +1 -0
- package/lib/typescript/src/components/accordion/parts/AccordionContent.d.ts +8 -0
- package/lib/typescript/src/components/accordion/parts/AccordionContent.d.ts.map +1 -0
- package/lib/typescript/src/components/accordion/parts/AccordionIndicator.d.ts +16 -0
- package/lib/typescript/src/components/accordion/parts/AccordionIndicator.d.ts.map +1 -0
- package/lib/typescript/src/components/accordion/parts/AccordionItem.d.ts +16 -0
- package/lib/typescript/src/components/accordion/parts/AccordionItem.d.ts.map +1 -0
- package/lib/typescript/src/components/accordion/parts/AccordionTrigger.d.ts +11 -0
- package/lib/typescript/src/components/accordion/parts/AccordionTrigger.d.ts.map +1 -0
- package/lib/typescript/src/components/accordion/types.d.ts +65 -0
- package/lib/typescript/src/components/accordion/types.d.ts.map +1 -0
- package/lib/typescript/src/components/accordion/utils.d.ts +8 -0
- package/lib/typescript/src/components/accordion/utils.d.ts.map +1 -0
- package/lib/typescript/src/components/badge/Badge.d.ts +13 -9
- package/lib/typescript/src/components/badge/Badge.d.ts.map +1 -1
- package/lib/typescript/src/components/badge/WithBadge.d.ts +18 -0
- package/lib/typescript/src/components/badge/WithBadge.d.ts.map +1 -0
- package/lib/typescript/src/components/badge/index.d.ts +2 -1
- package/lib/typescript/src/components/badge/index.d.ts.map +1 -1
- package/lib/typescript/src/components/badge/types.d.ts +35 -12
- package/lib/typescript/src/components/badge/types.d.ts.map +1 -1
- package/lib/typescript/src/components/badge/utils.d.ts +3 -3
- package/lib/typescript/src/components/badge/utils.d.ts.map +1 -1
- package/lib/typescript/src/components/header/parts/HeaderBar.d.ts.map +1 -1
- package/lib/typescript/src/components/index.d.ts +1 -0
- package/lib/typescript/src/components/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/accordion/Accordion.tsx +116 -0
- package/src/components/accordion/context.ts +45 -0
- package/src/components/accordion/hooks/use-accordion-core.ts +51 -0
- package/src/components/accordion/index.ts +14 -0
- package/src/components/accordion/parts/AccordionContent.tsx +96 -0
- package/src/components/accordion/parts/AccordionIndicator.tsx +67 -0
- package/src/components/accordion/parts/AccordionItem.tsx +55 -0
- package/src/components/accordion/parts/AccordionTrigger.tsx +88 -0
- package/src/components/accordion/types.ts +71 -0
- package/src/components/accordion/utils.ts +12 -0
- package/src/components/badge/Badge.tsx +177 -59
- package/src/components/badge/WithBadge.tsx +79 -0
- package/src/components/badge/index.ts +2 -1
- package/src/components/badge/types.ts +36 -12
- package/src/components/badge/utils.ts +3 -3
- package/src/components/header/parts/HeaderBar.tsx +41 -8
- package/src/components/index.ts +1 -0
- package/lib/module/components/badge/parts/BadgeIndicator.js +0 -212
- package/lib/module/components/badge/parts/BadgeIndicator.js.map +0 -1
- package/lib/typescript/src/components/badge/parts/BadgeIndicator.d.ts +0 -19
- package/lib/typescript/src/components/badge/parts/BadgeIndicator.d.ts.map +0 -1
- package/src/components/badge/parts/BadgeIndicator.tsx +0 -178
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [0.12.0](https://github.com/earthlin9/react-native-terra-ui/compare/v0.11.17...v0.12.0) (2026-09-24)
|
|
4
|
+
|
|
5
|
+
### ⚠ BREAKING CHANGES
|
|
6
|
+
|
|
7
|
+
* **ui:** `<Badge>` no longer wraps a child. Rename every wrapping
|
|
8
|
+
`<Badge>` to `<WithBadge>` and the wrapper's `BadgeProps` to `WithBadgeProps`.
|
|
9
|
+
A wrapping `<Badge>` left unchanged fails to typecheck.
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
* **ui:** [accordion] add Accordion component ([#29](https://github.com/earthlin9/react-native-terra-ui/issues/29)) ([d67de31](https://github.com/earthlin9/react-native-terra-ui/commit/d67de31398949e35927389b8f4d7682dc4118708))
|
|
14
|
+
* **ui:** [badge] make Badge standalone and rename the wrapper to WithBadge ([f38f2bd](https://github.com/earthlin9/react-native-terra-ui/commit/f38f2bdd50ab9f76bc9d67e18cc9186ecdd3a121))
|
|
15
|
+
|
|
16
|
+
### Bug Fixes
|
|
17
|
+
|
|
18
|
+
* **ui:** [header] truncate long compact titles clear of the actions ([8690df2](https://github.com/earthlin9/react-native-terra-ui/commit/8690df21e4002992a1fb8c4b6350bb44a6f27112))
|
|
19
|
+
|
|
3
20
|
## [0.11.17](https://github.com/earthlin9/react-native-terra-ui/compare/v0.11.16...v0.11.17) (2026-09-20)
|
|
4
21
|
|
|
5
22
|
### Bug Fixes
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { View } from "react-native-unistyles/components/native/View";
|
|
4
|
+
import { Children, Fragment, forwardRef, isValidElement, useMemo } from "react";
|
|
5
|
+
import { StyleSheet } from "react-native-unistyles";
|
|
6
|
+
import { Divider } from "../divider/index.js";
|
|
7
|
+
import { AccordionContext } from "./context.js";
|
|
8
|
+
import { useAccordionCore } from "./hooks/use-accordion-core.js";
|
|
9
|
+
import { AccordionContent } from "./parts/AccordionContent.js";
|
|
10
|
+
import { AccordionIndicator } from "./parts/AccordionIndicator.js";
|
|
11
|
+
import { AccordionItem } from "./parts/AccordionItem.js";
|
|
12
|
+
import { AccordionTrigger } from "./parts/AccordionTrigger.js";
|
|
13
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
|
+
/**
|
|
15
|
+
* Puts a rule between each pair of items. The rule is a sibling rather than a
|
|
16
|
+
* border on the item, because an item cannot tell whether it is the last one.
|
|
17
|
+
* A fragment counts as one child, so items spread from a fragment share no rules.
|
|
18
|
+
*/
|
|
19
|
+
function interleaveDividers(children) {
|
|
20
|
+
const items = Children.toArray(children).filter(isValidElement);
|
|
21
|
+
return items.map((child, index) => /*#__PURE__*/_jsxs(Fragment, {
|
|
22
|
+
children: [index > 0 && /*#__PURE__*/_jsx(Divider, {}), child]
|
|
23
|
+
}, child.key ?? index));
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* A vertical stack of headers that each open a panel of content.
|
|
28
|
+
*
|
|
29
|
+
* `'single'` mode (the default) keeps one item open at a time; `'multiple'`
|
|
30
|
+
* lets any number be open. Uncontrolled through `defaultValue`, or controlled
|
|
31
|
+
* through `value` + `onValueChange`.
|
|
32
|
+
*
|
|
33
|
+
* @example
|
|
34
|
+
* <Accordion defaultValue="shipping">
|
|
35
|
+
* <Accordion.Item value="shipping">
|
|
36
|
+
* <Accordion.Trigger>
|
|
37
|
+
* How long does shipping take?
|
|
38
|
+
* <Accordion.Indicator />
|
|
39
|
+
* </Accordion.Trigger>
|
|
40
|
+
* <Accordion.Content>3–5 business days.</Accordion.Content>
|
|
41
|
+
* </Accordion.Item>
|
|
42
|
+
* </Accordion>
|
|
43
|
+
*/
|
|
44
|
+
const AccordionRoot = /*#__PURE__*/forwardRef(function Accordion(props, ref) {
|
|
45
|
+
const {
|
|
46
|
+
selectionMode: _selectionMode,
|
|
47
|
+
value: _value,
|
|
48
|
+
defaultValue: _defaultValue,
|
|
49
|
+
onValueChange: _onValueChange,
|
|
50
|
+
isCollapsible: _isCollapsible,
|
|
51
|
+
variant = "plain",
|
|
52
|
+
divided = true,
|
|
53
|
+
isDisabled = false,
|
|
54
|
+
children,
|
|
55
|
+
style,
|
|
56
|
+
...rest
|
|
57
|
+
} = props;
|
|
58
|
+
const {
|
|
59
|
+
expanded,
|
|
60
|
+
toggle
|
|
61
|
+
} = useAccordionCore(props);
|
|
62
|
+
const context = useMemo(() => ({
|
|
63
|
+
expanded,
|
|
64
|
+
toggle,
|
|
65
|
+
isDisabled
|
|
66
|
+
}), [expanded, toggle, isDisabled]);
|
|
67
|
+
const _styles = styles;
|
|
68
|
+
{
|
|
69
|
+
const styles = _styles.useVariants({
|
|
70
|
+
variant
|
|
71
|
+
});
|
|
72
|
+
return /*#__PURE__*/_jsx(AccordionContext.Provider, {
|
|
73
|
+
value: context,
|
|
74
|
+
children: /*#__PURE__*/_jsx(View, {
|
|
75
|
+
ref: ref,
|
|
76
|
+
style: [styles.root, style],
|
|
77
|
+
...rest,
|
|
78
|
+
children: divided ? interleaveDividers(children) : children
|
|
79
|
+
})
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
export const Accordion = AccordionRoot;
|
|
84
|
+
Accordion.Item = AccordionItem;
|
|
85
|
+
Accordion.Trigger = AccordionTrigger;
|
|
86
|
+
Accordion.Indicator = AccordionIndicator;
|
|
87
|
+
Accordion.Content = AccordionContent;
|
|
88
|
+
|
|
89
|
+
// ─── Styles ───────────────────────────────────────────────────────────────────
|
|
90
|
+
|
|
91
|
+
const styles = StyleSheet.create(theme => ({
|
|
92
|
+
root: {
|
|
93
|
+
variants: {
|
|
94
|
+
variant: {
|
|
95
|
+
plain: {},
|
|
96
|
+
// A fixed radius rather than the registry's `surface` default: the
|
|
97
|
+
// accordion is not a `Surface`, and a configured shadow would sit oddly
|
|
98
|
+
// under a container whose height animates.
|
|
99
|
+
surface: {
|
|
100
|
+
backgroundColor: theme.color["surface.default"],
|
|
101
|
+
borderRadius: theme.radius.xl,
|
|
102
|
+
paddingHorizontal: theme.spacing["4"]
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
uni__dependencies: [0, 4]
|
|
107
|
+
}
|
|
108
|
+
}));
|
|
109
|
+
//# sourceMappingURL=Accordion.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["Children","Fragment","forwardRef","isValidElement","useMemo","StyleSheet","Divider","AccordionContext","useAccordionCore","AccordionContent","AccordionIndicator","AccordionItem","AccordionTrigger","jsx","_jsx","jsxs","_jsxs","interleaveDividers","children","items","toArray","filter","map","child","index","key","AccordionRoot","Accordion","props","ref","selectionMode","_selectionMode","value","_value","defaultValue","_defaultValue","onValueChange","_onValueChange","isCollapsible","_isCollapsible","variant","divided","isDisabled","style","rest","expanded","toggle","context","_styles","styles","useVariants","Provider","View","root","Item","Trigger","Indicator","Content","create","theme","variants","plain","surface","backgroundColor","color","borderRadius","radius","xl","paddingHorizontal","spacing","uni__dependencies"],"sourceRoot":"../../../../src","sources":["components/accordion/Accordion.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { createContext, useContext } from "react";
|
|
4
|
+
export const AccordionContext = /*#__PURE__*/createContext(null);
|
|
5
|
+
export const AccordionItemContext = /*#__PURE__*/createContext(null);
|
|
6
|
+
export function useAccordionContext() {
|
|
7
|
+
const context = useContext(AccordionContext);
|
|
8
|
+
if (!context) {
|
|
9
|
+
throw new Error("Accordion.Item must be rendered inside <Accordion>.");
|
|
10
|
+
}
|
|
11
|
+
return context;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* Reads the enclosing `Accordion.Item`: whether it is open or disabled, and a
|
|
16
|
+
* `toggle` that follows the accordion's selection rules. Use it to build a
|
|
17
|
+
* custom trigger or indicator.
|
|
18
|
+
*
|
|
19
|
+
* @throws When called outside an `Accordion.Item`.
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* function PlusMinus() {
|
|
23
|
+
* const { isExpanded } = useAccordionItem();
|
|
24
|
+
* return <Icon name={isExpanded ? 'minus' : 'add'} />;
|
|
25
|
+
* }
|
|
26
|
+
*/
|
|
27
|
+
export function useAccordionItem() {
|
|
28
|
+
const context = useContext(AccordionItemContext);
|
|
29
|
+
if (!context) {
|
|
30
|
+
throw new Error("Accordion.Trigger, Accordion.Indicator and Accordion.Content must be rendered inside <Accordion.Item>.");
|
|
31
|
+
}
|
|
32
|
+
return context;
|
|
33
|
+
}
|
|
34
|
+
//# sourceMappingURL=context.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["createContext","useContext","AccordionContext","AccordionItemContext","useAccordionContext","context","Error","useAccordionItem"],"sourceRoot":"../../../../src","sources":["components/accordion/context.ts"],"mappings":";;AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,OAAO;AAWjD,OAAO,MAAMC,gBAAgB,gBAAGF,aAAa,CAA+B,IAAI,CAAC;AAEjF,OAAO,MAAMG,oBAAoB,gBAAGH,aAAa,CAAmC,IAAI,CAAC;AAEzF,OAAO,SAASI,mBAAmBA,CAAA,EAA0B;EAC3D,MAAMC,OAAO,GAAGJ,UAAU,CAACC,gBAAgB,CAAC;EAC5C,IAAI,CAACG,OAAO,EAAE;IACZ,MAAM,IAAIC,KAAK,CAAC,qDAAqD,CAAC;EACxE;EACA,OAAOD,OAAO;AAChB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASE,gBAAgBA,CAAA,EAA8B;EAC5D,MAAMF,OAAO,GAAGJ,UAAU,CAACE,oBAAoB,CAAC;EAChD,IAAI,CAACE,OAAO,EAAE;IACZ,MAAM,IAAIC,KAAK,CACb,wGACF,CAAC;EACH;EACA,OAAOD,OAAO;AAChB","ignoreList":[]}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useCallback, useState } from "react";
|
|
4
|
+
function toArray(value) {
|
|
5
|
+
if (value == null) return [];
|
|
6
|
+
return Array.isArray(value) ? value : [value];
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Owns which items are open. Both modes are stored as an array so the rest of
|
|
11
|
+
* the accordion never branches on `selectionMode`; the mode only decides what a
|
|
12
|
+
* toggle does and what shape `onValueChange` receives.
|
|
13
|
+
*/
|
|
14
|
+
export function useAccordionCore(props) {
|
|
15
|
+
const isMultiple = props.selectionMode === "multiple";
|
|
16
|
+
const isControlled = props.value !== undefined;
|
|
17
|
+
const isCollapsible = isMultiple || props.isCollapsible !== false;
|
|
18
|
+
const [internal, setInternal] = useState(() => toArray(props.defaultValue));
|
|
19
|
+
const expanded = isControlled ? toArray(props.value) : internal;
|
|
20
|
+
const {
|
|
21
|
+
onValueChange
|
|
22
|
+
} = props;
|
|
23
|
+
const toggle = useCallback(itemValue => {
|
|
24
|
+
const isOpen = expanded.includes(itemValue);
|
|
25
|
+
let next;
|
|
26
|
+
if (isMultiple) {
|
|
27
|
+
next = isOpen ? expanded.filter(v => v !== itemValue) : [...expanded, itemValue];
|
|
28
|
+
} else if (isOpen) {
|
|
29
|
+
if (!isCollapsible) return;
|
|
30
|
+
next = [];
|
|
31
|
+
} else {
|
|
32
|
+
next = [itemValue];
|
|
33
|
+
}
|
|
34
|
+
if (!isControlled) setInternal(next);
|
|
35
|
+
if (isMultiple) {
|
|
36
|
+
onValueChange?.(next);
|
|
37
|
+
} else {
|
|
38
|
+
onValueChange?.(next[0] ?? null);
|
|
39
|
+
}
|
|
40
|
+
}, [expanded, isMultiple, isCollapsible, isControlled, onValueChange]);
|
|
41
|
+
return {
|
|
42
|
+
expanded,
|
|
43
|
+
toggle
|
|
44
|
+
};
|
|
45
|
+
}
|
|
46
|
+
//# sourceMappingURL=use-accordion-core.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useCallback","useState","toArray","value","Array","isArray","useAccordionCore","props","isMultiple","selectionMode","isControlled","undefined","isCollapsible","internal","setInternal","defaultValue","expanded","onValueChange","toggle","itemValue","isOpen","includes","next","filter","v"],"sourceRoot":"../../../../../src","sources":["components/accordion/hooks/use-accordion-core.ts"],"mappings":";;AAAA,SAASA,WAAW,EAAEC,QAAQ,QAAQ,OAAO;AAI7C,SAASC,OAAOA,CAACC,KAA2C,EAAY;EACtE,IAAIA,KAAK,IAAI,IAAI,EAAE,OAAO,EAAE;EAC5B,OAAOC,KAAK,CAACC,OAAO,CAACF,KAAK,CAAC,GAAGA,KAAK,GAAG,CAACA,KAAK,CAAC;AAC/C;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASG,gBAAgBA,CAACC,KAAqB,EAAE;EACtD,MAAMC,UAAU,GAAGD,KAAK,CAACE,aAAa,KAAK,UAAU;EACrD,MAAMC,YAAY,GAAGH,KAAK,CAACJ,KAAK,KAAKQ,SAAS;EAC9C,MAAMC,aAAa,GAAGJ,UAAU,IAAID,KAAK,CAACK,aAAa,KAAK,KAAK;EAEjE,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGb,QAAQ,CAAW,MAAMC,OAAO,CAACK,KAAK,CAACQ,YAAY,CAAC,CAAC;EACrF,MAAMC,QAAQ,GAAGN,YAAY,GAAGR,OAAO,CAACK,KAAK,CAACJ,KAAK,CAAC,GAAGU,QAAQ;EAE/D,MAAM;IAAEI;EAAc,CAAC,GAAGV,KAAK;EAE/B,MAAMW,MAAM,GAAGlB,WAAW,CACvBmB,SAAiB,IAAK;IACrB,MAAMC,MAAM,GAAGJ,QAAQ,CAACK,QAAQ,CAACF,SAAS,CAAC;IAC3C,IAAIG,IAAc;IAElB,IAAId,UAAU,EAAE;MACdc,IAAI,GAAGF,MAAM,GAAGJ,QAAQ,CAACO,MAAM,CAAEC,CAAC,IAAKA,CAAC,KAAKL,SAAS,CAAC,GAAG,CAAC,GAAGH,QAAQ,EAAEG,SAAS,CAAC;IACpF,CAAC,MAAM,IAAIC,MAAM,EAAE;MACjB,IAAI,CAACR,aAAa,EAAE;MACpBU,IAAI,GAAG,EAAE;IACX,CAAC,MAAM;MACLA,IAAI,GAAG,CAACH,SAAS,CAAC;IACpB;IAEA,IAAI,CAACT,YAAY,EAAEI,WAAW,CAACQ,IAAI,CAAC;IAEpC,IAAId,UAAU,EAAE;MACbS,aAAa,GAA+CK,IAAI,CAAC;IACpE,CAAC,MAAM;MACJL,aAAa,GAAoDK,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC;IACpF;EACF,CAAC,EACD,CAACN,QAAQ,EAAER,UAAU,EAAEI,aAAa,EAAEF,YAAY,EAAEO,aAAa,CACnE,CAAC;EAED,OAAO;IAAED,QAAQ;IAAEE;EAAO,CAAC;AAC7B","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["Accordion","useAccordionItem"],"sourceRoot":"../../../../src","sources":["components/accordion/index.ts"],"mappings":";;AAAA,SAASA,SAAS;AAClB,SAASC,gBAAgB","ignoreList":[]}
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { View } from "react-native-unistyles/components/native/View";
|
|
4
|
+
import { Children, forwardRef, useEffect, useState } from "react";
|
|
5
|
+
import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
|
|
6
|
+
import { StyleSheet } from "react-native-unistyles";
|
|
7
|
+
import { scheduleOnRN } from "react-native-worklets";
|
|
8
|
+
import { Text } from "../../text/index.js";
|
|
9
|
+
import { useAccordionItem } from "../context.js";
|
|
10
|
+
import { ACCORDION_TIMING } from "../utils.js";
|
|
11
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
|
+
function renderBody(children) {
|
|
13
|
+
return Children.map(children, child => {
|
|
14
|
+
if (typeof child === "string") {
|
|
15
|
+
return child.trim().length > 0 ? /*#__PURE__*/_jsx(Text, {
|
|
16
|
+
variant: "body-md",
|
|
17
|
+
color: "text.secondary",
|
|
18
|
+
children: child
|
|
19
|
+
}) : null;
|
|
20
|
+
}
|
|
21
|
+
if (typeof child === "number") {
|
|
22
|
+
return /*#__PURE__*/_jsx(Text, {
|
|
23
|
+
variant: "body-md",
|
|
24
|
+
color: "text.secondary",
|
|
25
|
+
children: child
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
return child;
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
export const AccordionContent = /*#__PURE__*/forwardRef(function AccordionContent({
|
|
32
|
+
children,
|
|
33
|
+
style,
|
|
34
|
+
onLayout: onLayoutProp,
|
|
35
|
+
...rest
|
|
36
|
+
}, ref) {
|
|
37
|
+
const {
|
|
38
|
+
isExpanded
|
|
39
|
+
} = useAccordionItem();
|
|
40
|
+
|
|
41
|
+
// The body stays mounted while open and while the close animation runs,
|
|
42
|
+
// then unmounts so a long list of closed items costs nothing.
|
|
43
|
+
const [isMounted, setIsMounted] = useState(isExpanded);
|
|
44
|
+
const progress = useSharedValue(isExpanded ? 1 : 0);
|
|
45
|
+
// The body's natural height, read from its own layout. 0 until the first
|
|
46
|
+
// measurement lands.
|
|
47
|
+
const measured = useSharedValue(0);
|
|
48
|
+
useEffect(() => {
|
|
49
|
+
if (isExpanded) setIsMounted(true);
|
|
50
|
+
progress.value = withTiming(isExpanded ? 1 : 0, ACCORDION_TIMING, finished => {
|
|
51
|
+
if (finished && !isExpanded) scheduleOnRN(setIsMounted, false);
|
|
52
|
+
});
|
|
53
|
+
}, [isExpanded, progress]);
|
|
54
|
+
const onLayout = event => {
|
|
55
|
+
measured.value = event.nativeEvent.layout.height;
|
|
56
|
+
onLayoutProp?.(event);
|
|
57
|
+
};
|
|
58
|
+
const clip = useAnimatedStyle(() => {
|
|
59
|
+
// Before the first measurement an item that starts open takes its auto
|
|
60
|
+
// height, and one that is just opening holds at 0 for the frame it takes
|
|
61
|
+
// to measure.
|
|
62
|
+
if (measured.value === 0) {
|
|
63
|
+
return {
|
|
64
|
+
height: progress.value === 1 ? undefined : 0,
|
|
65
|
+
opacity: progress.value
|
|
66
|
+
};
|
|
67
|
+
}
|
|
68
|
+
return {
|
|
69
|
+
height: measured.value * progress.value,
|
|
70
|
+
opacity: progress.value
|
|
71
|
+
};
|
|
72
|
+
});
|
|
73
|
+
if (!isMounted) return null;
|
|
74
|
+
return /*#__PURE__*/_jsx(Animated.View, {
|
|
75
|
+
style: [styles.clip, clip],
|
|
76
|
+
children: /*#__PURE__*/_jsx(View, {
|
|
77
|
+
ref: ref,
|
|
78
|
+
...rest,
|
|
79
|
+
onLayout: onLayout,
|
|
80
|
+
style: [styles.body, style],
|
|
81
|
+
children: renderBody(children)
|
|
82
|
+
})
|
|
83
|
+
});
|
|
84
|
+
});
|
|
85
|
+
|
|
86
|
+
// ─── Styles ───────────────────────────────────────────────────────────────────
|
|
87
|
+
|
|
88
|
+
const styles = StyleSheet.create(theme => ({
|
|
89
|
+
clip: {
|
|
90
|
+
overflow: "hidden"
|
|
91
|
+
},
|
|
92
|
+
body: {
|
|
93
|
+
gap: theme.spacing["2"],
|
|
94
|
+
paddingBottom: theme.spacing["4"],
|
|
95
|
+
uni__dependencies: [0]
|
|
96
|
+
}
|
|
97
|
+
}));
|
|
98
|
+
//# sourceMappingURL=AccordionContent.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["Children","forwardRef","useEffect","useState","Animated","useAnimatedStyle","useSharedValue","withTiming","StyleSheet","scheduleOnRN","Text","useAccordionItem","ACCORDION_TIMING","jsx","_jsx","renderBody","children","map","child","trim","length","variant","color","AccordionContent","style","onLayout","onLayoutProp","rest","ref","isExpanded","isMounted","setIsMounted","progress","measured","value","finished","event","nativeEvent","layout","height","clip","undefined","opacity","View","styles","body","create","theme","overflow","gap","spacing","paddingBottom","uni__dependencies"],"sourceRoot":"../../../../../src","sources":["components/accordion/parts/AccordionContent.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { forwardRef, useEffect } from "react";
|
|
4
|
+
import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
|
|
5
|
+
import { StyleSheet } from "react-native-unistyles";
|
|
6
|
+
import { Icon } from "../../icon/index.js";
|
|
7
|
+
import { useAccordionItem } from "../context.js";
|
|
8
|
+
import { ACCORDION_TIMING } from "../utils.js";
|
|
9
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
|
+
export const AccordionIndicator = /*#__PURE__*/forwardRef(function AccordionIndicator({
|
|
11
|
+
color = "text.secondary",
|
|
12
|
+
size = 20,
|
|
13
|
+
children,
|
|
14
|
+
style,
|
|
15
|
+
...rest
|
|
16
|
+
}, ref) {
|
|
17
|
+
const {
|
|
18
|
+
isExpanded
|
|
19
|
+
} = useAccordionItem();
|
|
20
|
+
// Seeded from the current state so an item that starts open shows its
|
|
21
|
+
// chevron already turned, with no animation on mount.
|
|
22
|
+
const progress = useSharedValue(isExpanded ? 1 : 0);
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
progress.value = withTiming(isExpanded ? 1 : 0, ACCORDION_TIMING);
|
|
25
|
+
}, [isExpanded, progress]);
|
|
26
|
+
|
|
27
|
+
// `terra.chevron-right` is the chevron the library ships, so it is turned a
|
|
28
|
+
// quarter to point down when closed and a further half to point up when open.
|
|
29
|
+
const rotation = useAnimatedStyle(() => ({
|
|
30
|
+
transform: [{
|
|
31
|
+
rotate: `${90 + progress.value * 180}deg`
|
|
32
|
+
}]
|
|
33
|
+
}));
|
|
34
|
+
const hasCustomContent = children !== undefined && children !== null;
|
|
35
|
+
return /*#__PURE__*/_jsx(Animated.View, {
|
|
36
|
+
ref: ref,
|
|
37
|
+
accessibilityElementsHidden: true,
|
|
38
|
+
importantForAccessibility: "no-hide-descendants",
|
|
39
|
+
style: [styles.indicator, hasCustomContent ? null : rotation, style],
|
|
40
|
+
...rest,
|
|
41
|
+
children: hasCustomContent ? children : /*#__PURE__*/_jsx(Icon, {
|
|
42
|
+
name: "terra.chevron-right",
|
|
43
|
+
color: color,
|
|
44
|
+
size: size
|
|
45
|
+
})
|
|
46
|
+
});
|
|
47
|
+
});
|
|
48
|
+
|
|
49
|
+
// ─── Styles ───────────────────────────────────────────────────────────────────
|
|
50
|
+
|
|
51
|
+
const styles = StyleSheet.create(() => ({
|
|
52
|
+
// Pushes the indicator to the row's end even when the title is a custom node
|
|
53
|
+
// that does not take the free space itself.
|
|
54
|
+
indicator: {
|
|
55
|
+
marginStart: "auto",
|
|
56
|
+
alignItems: "center",
|
|
57
|
+
justifyContent: "center"
|
|
58
|
+
}
|
|
59
|
+
}));
|
|
60
|
+
//# sourceMappingURL=AccordionIndicator.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["forwardRef","useEffect","Animated","useAnimatedStyle","useSharedValue","withTiming","StyleSheet","Icon","useAccordionItem","ACCORDION_TIMING","jsx","_jsx","AccordionIndicator","color","size","children","style","rest","ref","isExpanded","progress","value","rotation","transform","rotate","hasCustomContent","undefined","View","accessibilityElementsHidden","importantForAccessibility","styles","indicator","name","create","marginStart","alignItems","justifyContent"],"sourceRoot":"../../../../../src","sources":["components/accordion/parts/AccordionIndicator.tsx"],"mappings":";;AAAA,SAA4BA,UAAU,EAAkBC,SAAS,QAAQ,OAAO;AAGhF,OAAOC,QAAQ,IAAIC,gBAAgB,EAAEC,cAAc,EAAEC,UAAU,QAAQ,yBAAyB;AAChG,SAASC,UAAU,QAAQ,wBAAwB;AAGnD,SAASC,IAAI;AACb,SAASC,gBAAgB;AACzB,SAASC,gBAAgB;AAAmB,SAAAC,GAAA,IAAAC,IAAA;AAc5C,OAAO,MAAMC,kBAAkB,gBAAGZ,UAAU,CAC1C,SAASY,kBAAkBA,CAAC;EAAEC,KAAK,GAAG,gBAAgB;EAAEC,IAAI,GAAG,EAAE;EAAEC,QAAQ;EAAEC,KAAK;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,EAAE;EAClG,MAAM;IAAEC;EAAW,CAAC,GAAGX,gBAAgB,CAAC,CAAC;EACzC;EACA;EACA,MAAMY,QAAQ,GAAGhB,cAAc,CAACe,UAAU,GAAG,CAAC,GAAG,CAAC,CAAC;EAEnDlB,SAAS,CAAC,MAAM;IACdmB,QAAQ,CAACC,KAAK,GAAGhB,UAAU,CAACc,UAAU,GAAG,CAAC,GAAG,CAAC,EAAEV,gBAAgB,CAAC;EACnE,CAAC,EAAE,CAACU,UAAU,EAAEC,QAAQ,CAAC,CAAC;;EAE1B;EACA;EACA,MAAME,QAAQ,GAAGnB,gBAAgB,CAAC,OAAO;IACvCoB,SAAS,EAAE,CAAC;MAAEC,MAAM,EAAE,GAAG,EAAE,GAAGJ,QAAQ,CAACC,KAAK,GAAG,GAAG;IAAM,CAAC;EAC3D,CAAC,CAAC,CAAC;EAEH,MAAMI,gBAAgB,GAAGV,QAAQ,KAAKW,SAAS,IAAIX,QAAQ,KAAK,IAAI;EAEpE,oBACEJ,IAAA,CAACT,QAAQ,CAACyB,IAAI;IACZT,GAAG,EAAEA,GAAI;IACTU,2BAA2B;IAC3BC,yBAAyB,EAAC,qBAAqB;IAC/Cb,KAAK,EAAE,CAACc,MAAM,CAACC,SAAS,EAAEN,gBAAgB,GAAG,IAAI,GAAGH,QAAQ,EAAEN,KAAK,CAAE;IAAA,GACjEC,IAAI;IAAAF,QAAA,EAEPU,gBAAgB,GAAGV,QAAQ,gBAAGJ,IAAA,CAACJ,IAAI;MAACyB,IAAI,EAAC,qBAAqB;MAACnB,KAAK,EAAEA,KAAM;MAACC,IAAI,EAAEA;IAAK,CAAE;EAAC,CAC/E,CAAC;AAEpB,CACF,CAAC;;AAED;;AAEA,MAAMgB,MAAM,GAAGxB,UAAU,CAAC2B,MAAM,CAAC,OAAO;EACtC;EACA;EACAF,SAAS,EAAE;IACTG,WAAW,EAAE,MAAM;IACnBC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB;AACF,CAAC,CAAC,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { View } from "react-native-unistyles/components/native/View";
|
|
4
|
+
import { forwardRef, useCallback, useMemo } from "react";
|
|
5
|
+
import { StyleSheet } from "react-native-unistyles";
|
|
6
|
+
import { AccordionItemContext, useAccordionContext } from "../context.js";
|
|
7
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
+
export const AccordionItem = /*#__PURE__*/forwardRef(function AccordionItem({
|
|
9
|
+
value,
|
|
10
|
+
isDisabled: isDisabledProp = false,
|
|
11
|
+
children,
|
|
12
|
+
style,
|
|
13
|
+
...rest
|
|
14
|
+
}, ref) {
|
|
15
|
+
const {
|
|
16
|
+
expanded,
|
|
17
|
+
toggle: toggleValue,
|
|
18
|
+
isDisabled: isAccordionDisabled
|
|
19
|
+
} = useAccordionContext();
|
|
20
|
+
const isExpanded = expanded.includes(value);
|
|
21
|
+
const isDisabled = isAccordionDisabled || isDisabledProp;
|
|
22
|
+
const toggle = useCallback(() => {
|
|
23
|
+
if (!isDisabled) toggleValue(value);
|
|
24
|
+
}, [isDisabled, toggleValue, value]);
|
|
25
|
+
const context = useMemo(() => ({
|
|
26
|
+
value,
|
|
27
|
+
isExpanded,
|
|
28
|
+
isDisabled,
|
|
29
|
+
toggle
|
|
30
|
+
}), [value, isExpanded, isDisabled, toggle]);
|
|
31
|
+
return /*#__PURE__*/_jsx(AccordionItemContext.Provider, {
|
|
32
|
+
value: context,
|
|
33
|
+
children: /*#__PURE__*/_jsx(View, {
|
|
34
|
+
ref: ref,
|
|
35
|
+
style: [styles.item, style],
|
|
36
|
+
...rest,
|
|
37
|
+
children: typeof children === "function" ? children({
|
|
38
|
+
isExpanded,
|
|
39
|
+
isDisabled
|
|
40
|
+
}) : children
|
|
41
|
+
})
|
|
42
|
+
});
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
// ─── Styles ───────────────────────────────────────────────────────────────────
|
|
46
|
+
|
|
47
|
+
// Present so the Unistyles Babel plugin rewrites the `View` above; a themed
|
|
48
|
+
// style passed in through `style` would otherwise freeze at the theme it was
|
|
49
|
+
// created under.
|
|
50
|
+
const styles = StyleSheet.create(() => ({
|
|
51
|
+
item: {}
|
|
52
|
+
}));
|
|
53
|
+
//# sourceMappingURL=AccordionItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["forwardRef","useCallback","useMemo","StyleSheet","AccordionItemContext","useAccordionContext","jsx","_jsx","AccordionItem","value","isDisabled","isDisabledProp","children","style","rest","ref","expanded","toggle","toggleValue","isAccordionDisabled","isExpanded","includes","context","Provider","View","styles","item","create"],"sourceRoot":"../../../../../src","sources":["components/accordion/parts/AccordionItem.tsx"],"mappings":";;;AAAA,SAA4BA,UAAU,EAAkBC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAG3F,SAASC,UAAU,QAAQ,wBAAwB;AAEnD,SAASC,oBAAoB,EAAEC,mBAAmB;AAAqB,SAAAC,GAAA,IAAAC,IAAA;AAevE,OAAO,MAAMC,aAAa,gBAAGR,UAAU,CAAgD,SAASQ,aAAaA,CAC3G;EAAEC,KAAK;EAAEC,UAAU,EAAEC,cAAc,GAAG,KAAK;EAAEC,QAAQ;EAAEC,KAAK;EAAE,GAAGC;AAAK,CAAC,EACvEC,GAAG,EACH;EACA,MAAM;IAAEC,QAAQ;IAAEC,MAAM,EAAEC,WAAW;IAAER,UAAU,EAAES;EAAoB,CAAC,GAAGd,mBAAmB,CAAC,CAAC;EAEhG,MAAMe,UAAU,GAAGJ,QAAQ,CAACK,QAAQ,CAACZ,KAAK,CAAC;EAC3C,MAAMC,UAAU,GAAGS,mBAAmB,IAAIR,cAAc;EAExD,MAAMM,MAAM,GAAGhB,WAAW,CAAC,MAAM;IAC/B,IAAI,CAACS,UAAU,EAAEQ,WAAW,CAACT,KAAK,CAAC;EACrC,CAAC,EAAE,CAACC,UAAU,EAAEQ,WAAW,EAAET,KAAK,CAAC,CAAC;EAEpC,MAAMa,OAAO,GAAGpB,OAAO,CACrB,OAAO;IAAEO,KAAK;IAAEW,UAAU;IAAEV,UAAU;IAAEO;EAAO,CAAC,CAAC,EACjD,CAACR,KAAK,EAAEW,UAAU,EAAEV,UAAU,EAAEO,MAAM,CACxC,CAAC;EAED,oBACEV,IAAA,CAACH,oBAAoB,CAACmB,QAAQ;IAACd,KAAK,EAAEa,OAAQ;IAAAV,QAAA,eAC5CL,IAAA,CAACiB,IAAI;MAACT,GAAG,EAAEA,GAAI;MAACF,KAAK,EAAE,CAACY,MAAM,CAACC,IAAI,EAAEb,KAAK,CAAE;MAAA,GAAKC,IAAI;MAAAF,QAAA,EAClD,OAAOA,QAAQ,KAAK,UAAU,GAAGA,QAAQ,CAAC;QAAEQ,UAAU;QAAEV;MAAW,CAAC,CAAC,GAAGE;IAAQ,CAC7E;EAAC,CACsB,CAAC;AAEpC,CAAC,CAAC;;AAEF;;AAEA;AACA;AACA;AACA,MAAMa,MAAM,GAAGtB,UAAU,CAACwB,MAAM,CAAC,OAAO;EACtCD,IAAI,EAAE,CAAC;AACT,CAAC,CAAC,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { Pressable } from "react-native-unistyles/components/native/Pressable";
|
|
4
|
+
import { Children, forwardRef } from "react";
|
|
5
|
+
import { StyleSheet } from "react-native-unistyles";
|
|
6
|
+
import { Text } from "../../text/index.js";
|
|
7
|
+
import { useAccordionItem } from "../context.js";
|
|
8
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
|
+
function renderTitle(children) {
|
|
10
|
+
return Children.map(children, child => {
|
|
11
|
+
if (typeof child === "string") {
|
|
12
|
+
return child.trim().length > 0 ? /*#__PURE__*/_jsx(Text, {
|
|
13
|
+
variant: "body-lg",
|
|
14
|
+
weight: "medium",
|
|
15
|
+
style: styles.title,
|
|
16
|
+
children: child
|
|
17
|
+
}) : null;
|
|
18
|
+
}
|
|
19
|
+
if (typeof child === "number") {
|
|
20
|
+
return /*#__PURE__*/_jsx(Text, {
|
|
21
|
+
variant: "body-lg",
|
|
22
|
+
weight: "medium",
|
|
23
|
+
style: styles.title,
|
|
24
|
+
children: child
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
return child;
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
export const AccordionTrigger = /*#__PURE__*/forwardRef(function AccordionTrigger({
|
|
31
|
+
children,
|
|
32
|
+
onPress,
|
|
33
|
+
style,
|
|
34
|
+
...rest
|
|
35
|
+
}, ref) {
|
|
36
|
+
const {
|
|
37
|
+
isExpanded,
|
|
38
|
+
isDisabled,
|
|
39
|
+
toggle
|
|
40
|
+
} = useAccordionItem();
|
|
41
|
+
const handlePress = event => {
|
|
42
|
+
onPress?.(event);
|
|
43
|
+
toggle();
|
|
44
|
+
};
|
|
45
|
+
return /*#__PURE__*/_jsx(Pressable, {
|
|
46
|
+
ref: ref,
|
|
47
|
+
accessibilityRole: "button",
|
|
48
|
+
accessibilityState: {
|
|
49
|
+
expanded: isExpanded,
|
|
50
|
+
disabled: isDisabled
|
|
51
|
+
},
|
|
52
|
+
disabled: isDisabled,
|
|
53
|
+
onPress: handlePress,
|
|
54
|
+
style: state => [styles.trigger, state.pressed && styles.pressed, isDisabled && styles.disabled, typeof style === "function" ? style(state) : style],
|
|
55
|
+
...rest,
|
|
56
|
+
children: renderTitle(children)
|
|
57
|
+
});
|
|
58
|
+
});
|
|
59
|
+
|
|
60
|
+
// ─── Styles ───────────────────────────────────────────────────────────────────
|
|
61
|
+
|
|
62
|
+
const styles = StyleSheet.create(theme => ({
|
|
63
|
+
trigger: {
|
|
64
|
+
flexDirection: "row",
|
|
65
|
+
alignItems: "center",
|
|
66
|
+
gap: theme.spacing["3"],
|
|
67
|
+
minHeight: 48,
|
|
68
|
+
paddingVertical: theme.spacing["4"],
|
|
69
|
+
uni__dependencies: [0]
|
|
70
|
+
},
|
|
71
|
+
pressed: {
|
|
72
|
+
opacity: theme.opacity.pressed,
|
|
73
|
+
uni__dependencies: [0]
|
|
74
|
+
},
|
|
75
|
+
disabled: {
|
|
76
|
+
opacity: theme.opacity.disabled,
|
|
77
|
+
uni__dependencies: [0]
|
|
78
|
+
},
|
|
79
|
+
// Takes the free space so an indicator after it sits at the row's end, and
|
|
80
|
+
// wraps a long title instead of pushing the indicator off.
|
|
81
|
+
title: {
|
|
82
|
+
flex: 1
|
|
83
|
+
}
|
|
84
|
+
}));
|
|
85
|
+
//# sourceMappingURL=AccordionTrigger.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["Children","forwardRef","StyleSheet","Text","useAccordionItem","jsx","_jsx","renderTitle","children","map","child","trim","length","variant","weight","style","styles","title","AccordionTrigger","onPress","rest","ref","isExpanded","isDisabled","toggle","handlePress","event","Pressable","accessibilityRole","accessibilityState","expanded","disabled","state","trigger","pressed","create","theme","flexDirection","alignItems","gap","spacing","minHeight","paddingVertical","uni__dependencies","opacity","flex"],"sourceRoot":"../../../../../src","sources":["components/accordion/parts/AccordionTrigger.tsx"],"mappings":";;;AAAA,SAASA,QAAQ,EAAqBC,UAAU,QAAwB,OAAO;AAG/E,SAASC,UAAU,QAAQ,wBAAwB;AAEnD,SAASC,IAAI;AACb,SAASC,gBAAgB;AAAqB,SAAAC,GAAA,IAAAC,IAAA;AAU9C,SAASC,WAAWA,CAACC,QAAmB,EAAa;EACnD,OAAOR,QAAQ,CAACS,GAAG,CAACD,QAAQ,EAAGE,KAAK,IAAK;IACvC,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;MAC7B,OAAOA,KAAK,CAACC,IAAI,CAAC,CAAC,CAACC,MAAM,GAAG,CAAC,gBAC5BN,IAAA,CAACH,IAAI;QAACU,OAAO,EAAC,SAAS;QAACC,MAAM,EAAC,QAAQ;QAACC,KAAK,EAAEC,MAAM,CAACC,KAAM;QAAAT,QAAA,EACzDE;MAAK,CACF,CAAC,GACL,IAAI;IACV;IACA,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;MAC7B,oBACEJ,IAAA,CAACH,IAAI;QAACU,OAAO,EAAC,SAAS;QAACC,MAAM,EAAC,QAAQ;QAACC,KAAK,EAAEC,MAAM,CAACC,KAAM;QAAAT,QAAA,EACzDE;MAAK,CACF,CAAC;IAEX;IACA,OAAOA,KAAK;EACd,CAAC,CAAC;AACJ;AAEA,OAAO,MAAMQ,gBAAgB,gBAAGjB,UAAU,CACxC,SAASiB,gBAAgBA,CAAC;EAAEV,QAAQ;EAAEW,OAAO;EAAEJ,KAAK;EAAE,GAAGK;AAAK,CAAC,EAAEC,GAAG,EAAE;EACpE,MAAM;IAAEC,UAAU;IAAEC,UAAU;IAAEC;EAAO,CAAC,GAAGpB,gBAAgB,CAAC,CAAC;EAE7D,MAAMqB,WAAW,GAAIC,KAA4B,IAAK;IACpDP,OAAO,GAAGO,KAAK,CAAC;IAChBF,MAAM,CAAC,CAAC;EACV,CAAC;EAED,oBACElB,IAAA,CAACqB,SAAS;IACRN,GAAG,EAAEA,GAAI;IACTO,iBAAiB,EAAC,QAAQ;IAC1BC,kBAAkB,EAAE;MAAEC,QAAQ,EAAER,UAAU;MAAES,QAAQ,EAAER;IAAW,CAAE;IACnEQ,QAAQ,EAAER,UAAW;IACrBJ,OAAO,EAAEM,WAAY;IACrBV,KAAK,EAAGiB,KAAK,IAAK,CAChBhB,MAAM,CAACiB,OAAO,EACdD,KAAK,CAACE,OAAO,IAAIlB,MAAM,CAACkB,OAAO,EAC/BX,UAAU,IAAIP,MAAM,CAACe,QAAQ,EAC7B,OAAOhB,KAAK,KAAK,UAAU,GAAGA,KAAK,CAACiB,KAAK,CAAC,GAAGjB,KAAK,CAClD;IAAA,GACEK,IAAI;IAAAZ,QAAA,EAEPD,WAAW,CAACC,QAAQ;EAAC,CACb,CAAC;AAEhB,CACF,CAAC;;AAED;;AAEA,MAAMQ,MAAM,GAAGd,UAAU,CAACiC,MAAM,CAAEC,KAAK,KAAM;EAC3CH,OAAO,EAAE;IACPI,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,GAAG,EAAEH,KAAK,CAACI,OAAO,CAAC,GAAG,CAAC;IACvBC,SAAS,EAAE,EAAE;IACbC,eAAe,EAAEN,KAAK,CAACI,OAAO,CAAC,GAAG,CAAC;IAAAG,iBAAA;EACrC,CAAC;EACDT,OAAO,EAAE;IACPU,OAAO,EAAER,KAAK,CAACQ,OAAO,CAACV,OAAO;IAAAS,iBAAA;EAChC,CAAC;EACDZ,QAAQ,EAAE;IACRa,OAAO,EAAER,KAAK,CAACQ,OAAO,CAACb,QAAQ;IAAAY,iBAAA;EACjC,CAAC;EACD;EACA;EACA1B,KAAK,EAAE;IACL4B,IAAI,EAAE;EACR;AACF,CAAC,CAAC,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/accordion/types.ts"],"mappings":"","ignoreList":[]}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { Easing, ReduceMotion } from "react-native-reanimated";
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Shared by the content's height and the indicator's rotation so the chevron
|
|
7
|
+
* finishes turning as the panel finishes opening. Honours the system
|
|
8
|
+
* reduce-motion setting, which makes both jump straight to their end state.
|
|
9
|
+
*/
|
|
10
|
+
export const ACCORDION_TIMING = {
|
|
11
|
+
duration: 250,
|
|
12
|
+
easing: Easing.bezier(0.25, 0.1, 0.25, 1),
|
|
13
|
+
reduceMotion: ReduceMotion.System
|
|
14
|
+
};
|
|
15
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["Easing","ReduceMotion","ACCORDION_TIMING","duration","easing","bezier","reduceMotion","System"],"sourceRoot":"../../../../src","sources":["components/accordion/utils.ts"],"mappings":";;AAAA,SAASA,MAAM,EAAEC,YAAY,QAA+B,yBAAyB;;AAErF;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,gBAAkC,GAAG;EAChDC,QAAQ,EAAE,GAAG;EACbC,MAAM,EAAEJ,MAAM,CAACK,MAAM,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC;EACzCC,YAAY,EAAEL,YAAY,CAACM;AAC7B,CAAC","ignoreList":[]}
|