@draftbit/core 43.4.14 → 43.4.15-43f83d.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/lib/commonjs/components/Accordion/AccordionGroup.js +17 -16
- package/lib/commonjs/components/Accordion/AccordionGroup.js.map +1 -1
- package/lib/commonjs/components/Accordion/index.js.map +1 -1
- package/lib/commonjs/mappings/Accordion.js +14 -10
- package/lib/commonjs/mappings/Accordion.js.map +1 -1
- package/lib/module/components/Accordion/AccordionGroup.js +43 -17
- package/lib/module/components/Accordion/AccordionGroup.js.map +1 -1
- package/lib/module/components/ActionSheet/ActionSheetItem.js.map +1 -1
- package/lib/module/components/HeaderLarge.js.map +1 -1
- package/lib/module/mappings/Accordion.js +14 -10
- package/lib/module/mappings/Accordion.js.map +1 -1
- package/lib/module/mappings/ActionSheetItem.js.map +1 -1
- package/lib/typescript/src/components/Accordion/AccordionGroup.d.ts +26 -23
- package/lib/typescript/src/mappings/Accordion.d.ts +20 -9
- package/package.json +2 -2
- package/src/components/Accordion/AccordionGroup.js +9 -9
- package/src/components/Accordion/AccordionGroup.tsx +50 -27
- package/src/mappings/Accordion.js +13 -9
- package/src/mappings/Accordion.ts +14 -9
|
@@ -23,32 +23,33 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
23
23
|
|
|
24
24
|
const AccordionGroup = _ref => {
|
|
25
25
|
let {
|
|
26
|
-
|
|
26
|
+
label,
|
|
27
|
+
expanded: expandedProp = false,
|
|
27
28
|
openColor,
|
|
28
29
|
closedColor,
|
|
29
|
-
caretColor,
|
|
30
|
+
caretColor: caretColorProp,
|
|
31
|
+
caretSize = 24,
|
|
30
32
|
icon,
|
|
31
33
|
iconSize = 24,
|
|
32
34
|
style,
|
|
33
|
-
label,
|
|
34
35
|
children,
|
|
35
|
-
|
|
36
|
-
|
|
36
|
+
theme,
|
|
37
|
+
Icon
|
|
37
38
|
} = _ref;
|
|
38
|
-
const [expanded, setExpanded] = React.useState(expandedProp
|
|
39
|
+
const [expanded, setExpanded] = React.useState(expandedProp);
|
|
40
|
+
const {
|
|
41
|
+
textStyles,
|
|
42
|
+
viewStyles
|
|
43
|
+
} = (0, _utilities.extractStyles)(style);
|
|
44
|
+
const expandedColor = openColor || theme.colors.primary;
|
|
45
|
+
const collapsedColor = closedColor || theme.colors.primary;
|
|
46
|
+
const labelColor = expanded ? expandedColor : collapsedColor;
|
|
47
|
+
const caretColor = caretColorProp || labelColor;
|
|
39
48
|
|
|
40
49
|
const handlePressAction = () => {
|
|
41
50
|
setExpanded(!expanded);
|
|
42
51
|
};
|
|
43
52
|
|
|
44
|
-
const expandedInternal = expandedProp !== undefined ? expandedProp : expanded;
|
|
45
|
-
const expandedColor = openColor || theme.colors.primary;
|
|
46
|
-
const collapsedColor = closedColor || theme.colors.primary;
|
|
47
|
-
const labelColor = expanded ? expandedColor : collapsedColor;
|
|
48
|
-
const {
|
|
49
|
-
textStyles,
|
|
50
|
-
viewStyles
|
|
51
|
-
} = (0, _utilities.extractStyles)(style);
|
|
52
53
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_reactNative.Pressable, {
|
|
53
54
|
style: [styles.row, viewStyles],
|
|
54
55
|
onPress: handlePressAction,
|
|
@@ -68,8 +69,8 @@ const AccordionGroup = _ref => {
|
|
|
68
69
|
}, label)), /*#__PURE__*/React.createElement(Icon, {
|
|
69
70
|
name: expanded ? "MaterialIcons/keyboard-arrow-up" : "MaterialIcons/keyboard-arrow-down",
|
|
70
71
|
color: caretColor,
|
|
71
|
-
size:
|
|
72
|
-
})),
|
|
72
|
+
size: caretSize
|
|
73
|
+
})), expanded ? children : null);
|
|
73
74
|
};
|
|
74
75
|
|
|
75
76
|
const styles = _reactNative.StyleSheet.create({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["AccordionGroup.tsx"],"names":["AccordionGroup","
|
|
1
|
+
{"version":3,"sources":["AccordionGroup.tsx"],"names":["AccordionGroup","label","expanded","expandedProp","openColor","closedColor","caretColor","caretColorProp","caretSize","icon","iconSize","style","children","theme","Icon","setExpanded","React","useState","textStyles","viewStyles","expandedColor","colors","primary","collapsedColor","labelColor","handlePressAction","styles","row","content","color","StyleSheet","create","flexDirection","alignItems","flex","justifyContent","marginRight"],"mappings":";;;;;;;AAAA;;AACA;;AAOA;;AACA;;AAGA;;;;;;;;AA2CA,MAAMA,cAAc,GAAG,QAaI;AAAA,MAbH;AACtBC,IAAAA,KADsB;AAEtBC,IAAAA,QAAQ,EAAEC,YAAY,GAAG,KAFH;AAGtBC,IAAAA,SAHsB;AAItBC,IAAAA,WAJsB;AAKtBC,IAAAA,UAAU,EAAEC,cALU;AAMtBC,IAAAA,SAAS,GAAG,EANU;AAOtBC,IAAAA,IAPsB;AAQtBC,IAAAA,QAAQ,GAAG,EARW;AAStBC,IAAAA,KATsB;AAUtBC,IAAAA,QAVsB;AAWtBC,IAAAA,KAXsB;AAYtBC,IAAAA;AAZsB,GAaG;AACzB,QAAM,CAACZ,QAAD,EAAWa,WAAX,IAA0BC,KAAK,CAACC,QAAN,CAAwBd,YAAxB,CAAhC;AACA,QAAM;AAAEe,IAAAA,UAAF;AAAcC,IAAAA;AAAd,MAA6B,8BAAcR,KAAd,CAAnC;AACA,QAAMS,aAAa,GAAGhB,SAAS,IAAIS,KAAK,CAACQ,MAAN,CAAaC,OAAhD;AACA,QAAMC,cAAc,GAAGlB,WAAW,IAAIQ,KAAK,CAACQ,MAAN,CAAaC,OAAnD;AACA,QAAME,UAAU,GAAGtB,QAAQ,GAAGkB,aAAH,GAAmBG,cAA9C;AACA,QAAMjB,UAAU,GAAGC,cAAc,IAAIiB,UAArC;;AAEA,QAAMC,iBAAiB,GAAG,MAAM;AAC9BV,IAAAA,WAAW,CAAC,CAACb,QAAF,CAAX;AACD,GAFD;;AAIA,sBACE,uDACE,oBAAC,sBAAD;AACE,IAAA,KAAK,EAAE,CAACwB,MAAM,CAACC,GAAR,EAAaR,UAAb,CADT;AAEE,IAAA,OAAO,EAAEM,iBAFX;AAGE,IAAA,iBAAiB,EAAC;AAHpB,KAKGhB,IAAI,gBACH,oBAAC,IAAD;AACE,IAAA,IAAI,EAAEA,IADR;AAEE,IAAA,IAAI,EAAEC,QAFR;AAGE,IAAA,KAAK,EAAEc,UAHT;AAIE,IAAA,KAAK,EAAEE,MAAM,CAACjB;AAJhB,IADG,GAOD,IAZN,eAaE,oBAAC,iBAAD;AAAM,IAAA,KAAK,EAAEiB,MAAM,CAACE;AAApB,kBACE,oBAAC,aAAD;AACE,IAAA,UAAU,EAAE,KADd;AAEE,IAAA,KAAK,EAAE,CACLV,UADK,EAEL;AACEW,MAAAA,KAAK,EAAEL;AADT,KAFK;AAFT,KASGvB,KATH,CADF,CAbF,eA0BE,oBAAC,IAAD;AACE,IAAA,IAAI,EACFC,QAAQ,GACJ,iCADI,GAEJ,mCAJR;AAME,IAAA,KAAK,EAAEI,UANT;AAOE,IAAA,IAAI,EAAEE;AAPR,IA1BF,CADF,EAqCGN,QAAQ,GAAGU,QAAH,GAAc,IArCzB,CADF;AAyCD,CAlED;;AAoEA,MAAMc,MAAM,GAAGI,wBAAWC,MAAX,CAAkB;AAC/BJ,EAAAA,GAAG,EAAE;AACHK,IAAAA,aAAa,EAAE,KADZ;AAEHC,IAAAA,UAAU,EAAE;AAFT,GAD0B;AAK/BL,EAAAA,OAAO,EAAE;AACPM,IAAAA,IAAI,EAAE,CADC;AAEPC,IAAAA,cAAc,EAAE;AAFT,GALsB;AAS/B1B,EAAAA,IAAI,EAAE;AACJ2B,IAAAA,WAAW,EAAE;AADT;AATyB,CAAlB,CAAf;;eAce,wBAAUpC,cAAV,C","sourcesContent":["import * as React from \"react\";\nimport {\n View,\n StyleSheet,\n StyleProp,\n TextStyle,\n Pressable,\n} from \"react-native\";\nimport Text from \"../Text\";\nimport { withTheme } from \"../../theming\";\nimport type { IconSlot } from \"../../interfaces/Icon\";\nimport type { Theme } from \"../../styles/DefaultTheme\";\nimport { extractStyles } from \"../../utilities\";\n\n// label: createTextProp({\n// label: \"Label\",\n// }),\n// expanded: createStaticBoolProp({\n// label: \"Expanded\",\n// description:\n// \"Whether the AccordionGroup should be initaially expanded or not\",\n// }),\n// openColor: createColorProp({\n// label: \"Open text color\",\n// }),\n// closedColor: createColorProp({\n// label: \"Closed text color\",\n// }),\n// caretColor: createColorProp({\n// label: \"Caret color\",\n// }),\n// caretSize: createNumberProp({\n// label: \"Caret size\",\n// defaultValue: 24,\n// }),\n// icon: createIconProp(),\n// iconSize: createNumberProp({\n// label: \"Icon size\",\n// defaultValue: 24,\n// }),\n\ntype AccordionGroupProps = {\n label?: string;\n expanded?: boolean;\n openColor?: string;\n closedColor?: string;\n caretColor?: string;\n caretSize?: number;\n icon?: string;\n iconSize?: number;\n style?: StyleProp<TextStyle>;\n children?: React.ReactNode;\n theme: Theme;\n} & IconSlot;\n\nconst AccordionGroup = ({\n label,\n expanded: expandedProp = false,\n openColor,\n closedColor,\n caretColor: caretColorProp,\n caretSize = 24,\n icon,\n iconSize = 24,\n style,\n children,\n theme,\n Icon,\n}: AccordionGroupProps) => {\n const [expanded, setExpanded] = React.useState<boolean>(expandedProp);\n const { textStyles, viewStyles } = extractStyles(style);\n const expandedColor = openColor || theme.colors.primary;\n const collapsedColor = closedColor || theme.colors.primary;\n const labelColor = expanded ? expandedColor : collapsedColor;\n const caretColor = caretColorProp || labelColor;\n\n const handlePressAction = () => {\n setExpanded(!expanded);\n };\n\n return (\n <>\n <Pressable\n style={[styles.row, viewStyles]}\n onPress={handlePressAction}\n accessibilityRole=\"button\"\n >\n {icon ? (\n <Icon\n name={icon}\n size={iconSize}\n color={labelColor}\n style={styles.icon}\n />\n ) : null}\n <View style={styles.content}>\n <Text\n selectable={false}\n style={[\n textStyles,\n {\n color: labelColor,\n },\n ]}\n >\n {label}\n </Text>\n </View>\n <Icon\n name={\n expanded\n ? \"MaterialIcons/keyboard-arrow-up\"\n : \"MaterialIcons/keyboard-arrow-down\"\n }\n color={caretColor}\n size={caretSize}\n />\n </Pressable>\n {expanded ? children : null}\n </>\n );\n};\n\nconst styles = StyleSheet.create({\n row: {\n flexDirection: \"row\",\n alignItems: \"center\",\n },\n content: {\n flex: 1,\n justifyContent: \"center\",\n },\n icon: {\n marginRight: 8,\n },\n});\n\nexport default withTheme(AccordionGroup);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.
|
|
1
|
+
{"version":3,"sources":["index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["export { default as AccordionGroup } from \"./AccordionGroup\";\nexport { default as AccordionItem } from \"./AccordionItem\";\n"]}
|
|
@@ -20,27 +20,31 @@ const SEED_DATA = {
|
|
|
20
20
|
fontSize: 16
|
|
21
21
|
},
|
|
22
22
|
props: {
|
|
23
|
+
label: (0, _types.createTextProp)({
|
|
24
|
+
label: "Label"
|
|
25
|
+
}),
|
|
26
|
+
expanded: (0, _types.createStaticBoolProp)({
|
|
27
|
+
label: "Expanded",
|
|
28
|
+
description: "Whether the AccordionGroup should be initaially expanded or not"
|
|
29
|
+
}),
|
|
23
30
|
openColor: (0, _types.createColorProp)({
|
|
24
31
|
label: "Open text color"
|
|
25
32
|
}),
|
|
26
33
|
closedColor: (0, _types.createColorProp)({
|
|
27
|
-
label: "Closed text
|
|
34
|
+
label: "Closed text color"
|
|
28
35
|
}),
|
|
29
36
|
caretColor: (0, _types.createColorProp)({
|
|
30
37
|
label: "Caret color"
|
|
31
38
|
}),
|
|
39
|
+
caretSize: (0, _types.createNumberProp)({
|
|
40
|
+
label: "Caret size",
|
|
41
|
+
defaultValue: 24
|
|
42
|
+
}),
|
|
43
|
+
icon: (0, _types.createIconProp)(),
|
|
32
44
|
iconSize: (0, _types.createNumberProp)({
|
|
33
45
|
label: "Icon size",
|
|
34
46
|
defaultValue: 24
|
|
35
|
-
})
|
|
36
|
-
label: (0, _types.createTextProp)({
|
|
37
|
-
label: "Label"
|
|
38
|
-
}),
|
|
39
|
-
expanded: (0, _types.createStaticBoolProp)({
|
|
40
|
-
label: "Expanded",
|
|
41
|
-
description: "Whether the AccordionGroup should be expanded or not"
|
|
42
|
-
}),
|
|
43
|
-
icon: (0, _types.createIconProp)()
|
|
47
|
+
})
|
|
44
48
|
}
|
|
45
49
|
};
|
|
46
50
|
exports.SEED_DATA = SEED_DATA;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Accordion.ts"],"names":["SEED_DATA","name","tag","description","category","COMPONENT_TYPES","container","layout","paddingTop","paddingRight","paddingBottom","paddingLeft","fontSize","props","
|
|
1
|
+
{"version":3,"sources":["Accordion.ts"],"names":["SEED_DATA","name","tag","description","category","COMPONENT_TYPES","container","layout","paddingTop","paddingRight","paddingBottom","paddingLeft","fontSize","props","label","expanded","openColor","closedColor","caretColor","caretSize","defaultValue","icon","iconSize"],"mappings":";;;;;;;AAAA;;AASO,MAAMA,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,WADiB;AAEvBC,EAAAA,GAAG,EAAE,gBAFkB;AAGvBC,EAAAA,WAAW,EAAE,+CAHU;AAIvBC,EAAAA,QAAQ,EAAEC,uBAAgBC,SAJH;AAKvBC,EAAAA,MAAM,EAAE;AACNC,IAAAA,UAAU,EAAE,CADN;AAENC,IAAAA,YAAY,EAAE,CAFR;AAGNC,IAAAA,aAAa,EAAE,CAHT;AAINC,IAAAA,WAAW,EAAE,CAJP;AAKNC,IAAAA,QAAQ,EAAE;AALJ,GALe;AAYvBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE,2BAAe;AACpBA,MAAAA,KAAK,EAAE;AADa,KAAf,CADF;AAILC,IAAAA,QAAQ,EAAE,iCAAqB;AAC7BD,MAAAA,KAAK,EAAE,UADsB;AAE7BX,MAAAA,WAAW,EACT;AAH2B,KAArB,CAJL;AASLa,IAAAA,SAAS,EAAE,4BAAgB;AACzBF,MAAAA,KAAK,EAAE;AADkB,KAAhB,CATN;AAYLG,IAAAA,WAAW,EAAE,4BAAgB;AAC3BH,MAAAA,KAAK,EAAE;AADoB,KAAhB,CAZR;AAeLI,IAAAA,UAAU,EAAE,4BAAgB;AAC1BJ,MAAAA,KAAK,EAAE;AADmB,KAAhB,CAfP;AAkBLK,IAAAA,SAAS,EAAE,6BAAiB;AAC1BL,MAAAA,KAAK,EAAE,YADmB;AAE1BM,MAAAA,YAAY,EAAE;AAFY,KAAjB,CAlBN;AAsBLC,IAAAA,IAAI,EAAE,4BAtBD;AAuBLC,IAAAA,QAAQ,EAAE,6BAAiB;AACzBR,MAAAA,KAAK,EAAE,WADkB;AAEzBM,MAAAA,YAAY,EAAE;AAFW,KAAjB;AAvBL;AAZgB,CAAlB","sourcesContent":["import {\n COMPONENT_TYPES,\n createNumberProp,\n createIconProp,\n createTextProp,\n createStaticBoolProp,\n createColorProp,\n} from \"@draftbit/types\";\n\nexport const SEED_DATA = {\n name: \"Accordion\",\n tag: \"AccordionGroup\",\n description: \"An expandable container containing components\",\n category: COMPONENT_TYPES.container,\n layout: {\n paddingTop: 8,\n paddingRight: 8,\n paddingBottom: 8,\n paddingLeft: 8,\n fontSize: 16,\n },\n props: {\n label: createTextProp({\n label: \"Label\",\n }),\n expanded: createStaticBoolProp({\n label: \"Expanded\",\n description:\n \"Whether the AccordionGroup should be initaially expanded or not\",\n }),\n openColor: createColorProp({\n label: \"Open text color\",\n }),\n closedColor: createColorProp({\n label: \"Closed text color\",\n }),\n caretColor: createColorProp({\n label: \"Caret color\",\n }),\n caretSize: createNumberProp({\n label: \"Caret size\",\n defaultValue: 24,\n }),\n icon: createIconProp(),\n iconSize: createNumberProp({\n label: \"Icon size\",\n defaultValue: 24,\n }),\n },\n};\n"]}
|
|
@@ -2,36 +2,62 @@ import * as React from "react";
|
|
|
2
2
|
import { View, StyleSheet, Pressable } from "react-native";
|
|
3
3
|
import Text from "../Text";
|
|
4
4
|
import { withTheme } from "../../theming";
|
|
5
|
-
import { extractStyles } from "../../utilities";
|
|
5
|
+
import { extractStyles } from "../../utilities"; // label: createTextProp({
|
|
6
|
+
// label: "Label",
|
|
7
|
+
// }),
|
|
8
|
+
// expanded: createStaticBoolProp({
|
|
9
|
+
// label: "Expanded",
|
|
10
|
+
// description:
|
|
11
|
+
// "Whether the AccordionGroup should be initaially expanded or not",
|
|
12
|
+
// }),
|
|
13
|
+
// openColor: createColorProp({
|
|
14
|
+
// label: "Open text color",
|
|
15
|
+
// }),
|
|
16
|
+
// closedColor: createColorProp({
|
|
17
|
+
// label: "Closed text color",
|
|
18
|
+
// }),
|
|
19
|
+
// caretColor: createColorProp({
|
|
20
|
+
// label: "Caret color",
|
|
21
|
+
// }),
|
|
22
|
+
// caretSize: createNumberProp({
|
|
23
|
+
// label: "Caret size",
|
|
24
|
+
// defaultValue: 24,
|
|
25
|
+
// }),
|
|
26
|
+
// icon: createIconProp(),
|
|
27
|
+
// iconSize: createNumberProp({
|
|
28
|
+
// label: "Icon size",
|
|
29
|
+
// defaultValue: 24,
|
|
30
|
+
// }),
|
|
6
31
|
|
|
7
32
|
const AccordionGroup = _ref => {
|
|
8
33
|
let {
|
|
9
|
-
|
|
34
|
+
label,
|
|
35
|
+
expanded: expandedProp = false,
|
|
10
36
|
openColor,
|
|
11
37
|
closedColor,
|
|
12
|
-
caretColor,
|
|
38
|
+
caretColor: caretColorProp,
|
|
39
|
+
caretSize = 24,
|
|
13
40
|
icon,
|
|
14
41
|
iconSize = 24,
|
|
15
42
|
style,
|
|
16
|
-
label,
|
|
17
43
|
children,
|
|
18
|
-
|
|
19
|
-
|
|
44
|
+
theme,
|
|
45
|
+
Icon
|
|
20
46
|
} = _ref;
|
|
21
|
-
const [expanded, setExpanded] = React.useState(expandedProp
|
|
47
|
+
const [expanded, setExpanded] = React.useState(expandedProp);
|
|
48
|
+
const {
|
|
49
|
+
textStyles,
|
|
50
|
+
viewStyles
|
|
51
|
+
} = extractStyles(style);
|
|
52
|
+
const expandedColor = openColor || theme.colors.primary;
|
|
53
|
+
const collapsedColor = closedColor || theme.colors.primary;
|
|
54
|
+
const labelColor = expanded ? expandedColor : collapsedColor;
|
|
55
|
+
const caretColor = caretColorProp || labelColor;
|
|
22
56
|
|
|
23
57
|
const handlePressAction = () => {
|
|
24
58
|
setExpanded(!expanded);
|
|
25
59
|
};
|
|
26
60
|
|
|
27
|
-
const expandedInternal = expandedProp !== undefined ? expandedProp : expanded;
|
|
28
|
-
const expandedColor = openColor || theme.colors.primary;
|
|
29
|
-
const collapsedColor = closedColor || theme.colors.primary;
|
|
30
|
-
const labelColor = expanded ? expandedColor : collapsedColor;
|
|
31
|
-
const {
|
|
32
|
-
textStyles,
|
|
33
|
-
viewStyles
|
|
34
|
-
} = extractStyles(style);
|
|
35
61
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pressable, {
|
|
36
62
|
style: [styles.row, viewStyles],
|
|
37
63
|
onPress: handlePressAction,
|
|
@@ -51,8 +77,8 @@ const AccordionGroup = _ref => {
|
|
|
51
77
|
}, label)), /*#__PURE__*/React.createElement(Icon, {
|
|
52
78
|
name: expanded ? "MaterialIcons/keyboard-arrow-up" : "MaterialIcons/keyboard-arrow-down",
|
|
53
79
|
color: caretColor,
|
|
54
|
-
size:
|
|
55
|
-
})),
|
|
80
|
+
size: caretSize
|
|
81
|
+
})), expanded ? children : null);
|
|
56
82
|
};
|
|
57
83
|
|
|
58
84
|
const styles = StyleSheet.create({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["AccordionGroup.tsx"],"names":["React","View","StyleSheet","Pressable","Text","withTheme","extractStyles","AccordionGroup","
|
|
1
|
+
{"version":3,"sources":["AccordionGroup.tsx"],"names":["React","View","StyleSheet","Pressable","Text","withTheme","extractStyles","AccordionGroup","label","expanded","expandedProp","openColor","closedColor","caretColor","caretColorProp","caretSize","icon","iconSize","style","children","theme","Icon","setExpanded","useState","textStyles","viewStyles","expandedColor","colors","primary","collapsedColor","labelColor","handlePressAction","styles","row","content","color","create","flexDirection","alignItems","flex","justifyContent","marginRight"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SACEC,IADF,EAEEC,UAFF,EAKEC,SALF,QAMO,cANP;AAOA,OAAOC,IAAP,MAAiB,SAAjB;AACA,SAASC,SAAT,QAA0B,eAA1B;AAGA,SAASC,aAAT,QAA8B,iBAA9B,C,CAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAgBA,MAAMC,cAAc,GAAG,QAaI;AAAA,MAbH;AACtBC,IAAAA,KADsB;AAEtBC,IAAAA,QAAQ,EAAEC,YAAY,GAAG,KAFH;AAGtBC,IAAAA,SAHsB;AAItBC,IAAAA,WAJsB;AAKtBC,IAAAA,UAAU,EAAEC,cALU;AAMtBC,IAAAA,SAAS,GAAG,EANU;AAOtBC,IAAAA,IAPsB;AAQtBC,IAAAA,QAAQ,GAAG,EARW;AAStBC,IAAAA,KATsB;AAUtBC,IAAAA,QAVsB;AAWtBC,IAAAA,KAXsB;AAYtBC,IAAAA;AAZsB,GAaG;AACzB,QAAM,CAACZ,QAAD,EAAWa,WAAX,IAA0BtB,KAAK,CAACuB,QAAN,CAAwBb,YAAxB,CAAhC;AACA,QAAM;AAAEc,IAAAA,UAAF;AAAcC,IAAAA;AAAd,MAA6BnB,aAAa,CAACY,KAAD,CAAhD;AACA,QAAMQ,aAAa,GAAGf,SAAS,IAAIS,KAAK,CAACO,MAAN,CAAaC,OAAhD;AACA,QAAMC,cAAc,GAAGjB,WAAW,IAAIQ,KAAK,CAACO,MAAN,CAAaC,OAAnD;AACA,QAAME,UAAU,GAAGrB,QAAQ,GAAGiB,aAAH,GAAmBG,cAA9C;AACA,QAAMhB,UAAU,GAAGC,cAAc,IAAIgB,UAArC;;AAEA,QAAMC,iBAAiB,GAAG,MAAM;AAC9BT,IAAAA,WAAW,CAAC,CAACb,QAAF,CAAX;AACD,GAFD;;AAIA,sBACE,uDACE,oBAAC,SAAD;AACE,IAAA,KAAK,EAAE,CAACuB,MAAM,CAACC,GAAR,EAAaR,UAAb,CADT;AAEE,IAAA,OAAO,EAAEM,iBAFX;AAGE,IAAA,iBAAiB,EAAC;AAHpB,KAKGf,IAAI,gBACH,oBAAC,IAAD;AACE,IAAA,IAAI,EAAEA,IADR;AAEE,IAAA,IAAI,EAAEC,QAFR;AAGE,IAAA,KAAK,EAAEa,UAHT;AAIE,IAAA,KAAK,EAAEE,MAAM,CAAChB;AAJhB,IADG,GAOD,IAZN,eAaE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEgB,MAAM,CAACE;AAApB,kBACE,oBAAC,IAAD;AACE,IAAA,UAAU,EAAE,KADd;AAEE,IAAA,KAAK,EAAE,CACLV,UADK,EAEL;AACEW,MAAAA,KAAK,EAAEL;AADT,KAFK;AAFT,KASGtB,KATH,CADF,CAbF,eA0BE,oBAAC,IAAD;AACE,IAAA,IAAI,EACFC,QAAQ,GACJ,iCADI,GAEJ,mCAJR;AAME,IAAA,KAAK,EAAEI,UANT;AAOE,IAAA,IAAI,EAAEE;AAPR,IA1BF,CADF,EAqCGN,QAAQ,GAAGU,QAAH,GAAc,IArCzB,CADF;AAyCD,CAlED;;AAoEA,MAAMa,MAAM,GAAG9B,UAAU,CAACkC,MAAX,CAAkB;AAC/BH,EAAAA,GAAG,EAAE;AACHI,IAAAA,aAAa,EAAE,KADZ;AAEHC,IAAAA,UAAU,EAAE;AAFT,GAD0B;AAK/BJ,EAAAA,OAAO,EAAE;AACPK,IAAAA,IAAI,EAAE,CADC;AAEPC,IAAAA,cAAc,EAAE;AAFT,GALsB;AAS/BxB,EAAAA,IAAI,EAAE;AACJyB,IAAAA,WAAW,EAAE;AADT;AATyB,CAAlB,CAAf;AAcA,eAAepC,SAAS,CAACE,cAAD,CAAxB","sourcesContent":["import * as React from \"react\";\nimport {\n View,\n StyleSheet,\n StyleProp,\n TextStyle,\n Pressable,\n} from \"react-native\";\nimport Text from \"../Text\";\nimport { withTheme } from \"../../theming\";\nimport type { IconSlot } from \"../../interfaces/Icon\";\nimport type { Theme } from \"../../styles/DefaultTheme\";\nimport { extractStyles } from \"../../utilities\";\n\n// label: createTextProp({\n// label: \"Label\",\n// }),\n// expanded: createStaticBoolProp({\n// label: \"Expanded\",\n// description:\n// \"Whether the AccordionGroup should be initaially expanded or not\",\n// }),\n// openColor: createColorProp({\n// label: \"Open text color\",\n// }),\n// closedColor: createColorProp({\n// label: \"Closed text color\",\n// }),\n// caretColor: createColorProp({\n// label: \"Caret color\",\n// }),\n// caretSize: createNumberProp({\n// label: \"Caret size\",\n// defaultValue: 24,\n// }),\n// icon: createIconProp(),\n// iconSize: createNumberProp({\n// label: \"Icon size\",\n// defaultValue: 24,\n// }),\n\ntype AccordionGroupProps = {\n label?: string;\n expanded?: boolean;\n openColor?: string;\n closedColor?: string;\n caretColor?: string;\n caretSize?: number;\n icon?: string;\n iconSize?: number;\n style?: StyleProp<TextStyle>;\n children?: React.ReactNode;\n theme: Theme;\n} & IconSlot;\n\nconst AccordionGroup = ({\n label,\n expanded: expandedProp = false,\n openColor,\n closedColor,\n caretColor: caretColorProp,\n caretSize = 24,\n icon,\n iconSize = 24,\n style,\n children,\n theme,\n Icon,\n}: AccordionGroupProps) => {\n const [expanded, setExpanded] = React.useState<boolean>(expandedProp);\n const { textStyles, viewStyles } = extractStyles(style);\n const expandedColor = openColor || theme.colors.primary;\n const collapsedColor = closedColor || theme.colors.primary;\n const labelColor = expanded ? expandedColor : collapsedColor;\n const caretColor = caretColorProp || labelColor;\n\n const handlePressAction = () => {\n setExpanded(!expanded);\n };\n\n return (\n <>\n <Pressable\n style={[styles.row, viewStyles]}\n onPress={handlePressAction}\n accessibilityRole=\"button\"\n >\n {icon ? (\n <Icon\n name={icon}\n size={iconSize}\n color={labelColor}\n style={styles.icon}\n />\n ) : null}\n <View style={styles.content}>\n <Text\n selectable={false}\n style={[\n textStyles,\n {\n color: labelColor,\n },\n ]}\n >\n {label}\n </Text>\n </View>\n <Icon\n name={\n expanded\n ? \"MaterialIcons/keyboard-arrow-up\"\n : \"MaterialIcons/keyboard-arrow-down\"\n }\n color={caretColor}\n size={caretSize}\n />\n </Pressable>\n {expanded ? children : null}\n </>\n );\n};\n\nconst styles = StyleSheet.create({\n row: {\n flexDirection: \"row\",\n alignItems: \"center\",\n },\n content: {\n flex: 1,\n justifyContent: \"center\",\n },\n icon: {\n marginRight: 8,\n },\n});\n\nexport default withTheme(AccordionGroup);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ActionSheetItem.
|
|
1
|
+
{"version":3,"sources":["ActionSheetItem.js"],"names":["React","Text","StyleSheet","TouchableOpacity","extractStyles","ActionSheetItem","label","style","color","onPress","textStyles","viewStyles","createElement","activeOpacity","styles","wrapper","create","borderBottomWidth","hairlineWidth","borderBottomColor","backgroundColor","minHeight","overflow","display","justifyContent","fontSize","textAlign","fontWeight","paddingHorizontal","paddingVertical","alignSelf"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,EAAeC,UAAf,EAA2BC,gBAA3B,QAAoD,cAApD;AACA,SAASC,aAAT,QAA8B,iBAA9B;;AACA,MAAMC,eAAe,GAAG,QAAsC;AAAA,MAArC;AAAEC,IAAAA,KAAF;AAASC,IAAAA,KAAT;AAAgBC,IAAAA,KAAhB;AAAuBC,IAAAA;AAAvB,GAAqC;AAC1D,QAAM;AAAEC,IAAAA,UAAF;AAAcC,IAAAA;AAAd,MAA6BP,aAAa,CAACG,KAAD,CAAhD;AACA,sBAAQP,KAAK,CAACY,aAAN,CAAoBT,gBAApB,EAAsC;AAAEU,IAAAA,aAAa,EAAE,GAAjB;AAAsBN,IAAAA,KAAK,EAAE,CAACO,MAAM,CAACC,OAAR,EAAiBJ,UAAjB,CAA7B;AAA2DF,IAAAA,OAAO,EAAEA;AAApE,GAAtC,eACJT,KAAK,CAACY,aAAN,CAAoBX,IAApB,EAA0B;AAAEM,IAAAA,KAAK,EAAE,CAACO,MAAM,CAACR,KAAR,EAAeI,UAAf,EAA2B;AAAEF,MAAAA;AAAF,KAA3B;AAAT,GAA1B,EAA4EF,KAA5E,CADI,CAAR;AAEH,CAJD;;AAKA,MAAMQ,MAAM,GAAGZ,UAAU,CAACc,MAAX,CAAkB;AAC7BD,EAAAA,OAAO,EAAE;AACLE,IAAAA,iBAAiB,EAAEf,UAAU,CAACgB,aADzB;AAELC,IAAAA,iBAAiB,EAAE,SAFd;AAGLC,IAAAA,eAAe,EAAE,SAHZ;AAILC,IAAAA,SAAS,EAAE,EAJN;AAKLC,IAAAA,QAAQ,EAAE,QALL;AAMLC,IAAAA,OAAO,EAAE,MANJ;AAOLC,IAAAA,cAAc,EAAE;AAPX,GADoB;AAU7BlB,EAAAA,KAAK,EAAE;AACHmB,IAAAA,QAAQ,EAAE,EADP;AAEHC,IAAAA,SAAS,EAAE,QAFR;AAGHlB,IAAAA,KAAK,EAAE,SAHJ;AAIHmB,IAAAA,UAAU,EAAE,KAJT;AAKHL,IAAAA,QAAQ,EAAE,QALP;AAMHM,IAAAA,iBAAiB,EAAE,EANhB;AAOHC,IAAAA,eAAe,EAAE,EAPd;AAQHC,IAAAA,SAAS,EAAE;AARR;AAVsB,CAAlB,CAAf;AAqBA,eAAezB,eAAf","sourcesContent":["import React from \"react\";\nimport { Text, StyleSheet, TouchableOpacity, } from \"react-native\";\nimport { extractStyles } from \"../../utilities\";\nconst ActionSheetItem = ({ label, style, color, onPress }) => {\n const { textStyles, viewStyles } = extractStyles(style);\n return (React.createElement(TouchableOpacity, { activeOpacity: 0.7, style: [styles.wrapper, viewStyles], onPress: onPress },\n React.createElement(Text, { style: [styles.label, textStyles, { color }] }, label)));\n};\nconst styles = StyleSheet.create({\n wrapper: {\n borderBottomWidth: StyleSheet.hairlineWidth,\n borderBottomColor: \"#CCCCCC\",\n backgroundColor: \"#F1F1F1\",\n minHeight: 50,\n overflow: \"hidden\",\n display: \"flex\",\n justifyContent: \"center\",\n },\n label: {\n fontSize: 16,\n textAlign: \"center\",\n color: \"#0A84FF\",\n fontWeight: \"500\",\n overflow: \"hidden\",\n paddingHorizontal: 20,\n paddingVertical: 10,\n alignSelf: \"center\",\n },\n});\nexport default ActionSheetItem;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["HeaderLarge.
|
|
1
|
+
{"version":3,"sources":["HeaderLarge.js"],"names":["React","withTheme","Header","HeaderLarge","Icon","title","buttonText","icon","onPress","style","theme","colors","typography","createElement","titleTypeStyle","headline4","titleColor","strong"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,SAAT,QAA0B,YAA1B;AACA,OAAOC,MAAP,MAAmB,UAAnB;;AACA,MAAMC,WAAW,GAAG,QAAmG;AAAA,MAAlG;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,KAAR;AAAeC,IAAAA,UAAf;AAA2BC,IAAAA,IAA3B;AAAiCC,IAAAA,OAAO,GAAG,MAAM,CAAG,CAApD;AAAsDC,IAAAA,KAAtD;AAA6DC,IAAAA,KAAK,EAAE;AAAEC,MAAAA,MAAF;AAAUC,MAAAA;AAAV;AAApE,GAAkG;AACnH,sBAAQZ,KAAK,CAACa,aAAN,CAAoBX,MAApB,EAA4B;AAAEE,IAAAA,IAAI,EAAEA,IAAR;AAAcU,IAAAA,cAAc,EAAEF,UAAU,CAACG,SAAzC;AAAoDC,IAAAA,UAAU,EAAEL,MAAM,CAACM,MAAvE;AAA+EZ,IAAAA,KAAK,EAAEA,KAAtF;AAA6FC,IAAAA,UAAU,EAAEA,UAAzG;AAAqHC,IAAAA,IAAI,EAAEA,IAA3H;AAAiIC,IAAAA,OAAO,EAAEA,OAA1I;AAAmJC,IAAAA,KAAK,EAAEA;AAA1J,GAA5B,CAAR;AACH,CAFD;;AAGA,eAAeR,SAAS,CAACE,WAAD,CAAxB","sourcesContent":["import * as React from \"react\";\nimport { withTheme } from \"../theming\";\nimport Header from \"./Header\";\nconst HeaderLarge = ({ Icon, title, buttonText, icon, onPress = () => { }, style, theme: { colors, typography }, }) => {\n return (React.createElement(Header, { Icon: Icon, titleTypeStyle: typography.headline4, titleColor: colors.strong, title: title, buttonText: buttonText, icon: icon, onPress: onPress, style: style }));\n};\nexport default withTheme(HeaderLarge);\n"]}
|
|
@@ -12,27 +12,31 @@ export const SEED_DATA = {
|
|
|
12
12
|
fontSize: 16
|
|
13
13
|
},
|
|
14
14
|
props: {
|
|
15
|
+
label: createTextProp({
|
|
16
|
+
label: "Label"
|
|
17
|
+
}),
|
|
18
|
+
expanded: createStaticBoolProp({
|
|
19
|
+
label: "Expanded",
|
|
20
|
+
description: "Whether the AccordionGroup should be initaially expanded or not"
|
|
21
|
+
}),
|
|
15
22
|
openColor: createColorProp({
|
|
16
23
|
label: "Open text color"
|
|
17
24
|
}),
|
|
18
25
|
closedColor: createColorProp({
|
|
19
|
-
label: "Closed text
|
|
26
|
+
label: "Closed text color"
|
|
20
27
|
}),
|
|
21
28
|
caretColor: createColorProp({
|
|
22
29
|
label: "Caret color"
|
|
23
30
|
}),
|
|
31
|
+
caretSize: createNumberProp({
|
|
32
|
+
label: "Caret size",
|
|
33
|
+
defaultValue: 24
|
|
34
|
+
}),
|
|
35
|
+
icon: createIconProp(),
|
|
24
36
|
iconSize: createNumberProp({
|
|
25
37
|
label: "Icon size",
|
|
26
38
|
defaultValue: 24
|
|
27
|
-
})
|
|
28
|
-
label: createTextProp({
|
|
29
|
-
label: "Label"
|
|
30
|
-
}),
|
|
31
|
-
expanded: createStaticBoolProp({
|
|
32
|
-
label: "Expanded",
|
|
33
|
-
description: "Whether the AccordionGroup should be expanded or not"
|
|
34
|
-
}),
|
|
35
|
-
icon: createIconProp()
|
|
39
|
+
})
|
|
36
40
|
}
|
|
37
41
|
};
|
|
38
42
|
//# sourceMappingURL=Accordion.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Accordion.ts"],"names":["COMPONENT_TYPES","createNumberProp","createIconProp","createTextProp","createStaticBoolProp","createColorProp","SEED_DATA","name","tag","description","category","container","layout","paddingTop","paddingRight","paddingBottom","paddingLeft","fontSize","props","
|
|
1
|
+
{"version":3,"sources":["Accordion.ts"],"names":["COMPONENT_TYPES","createNumberProp","createIconProp","createTextProp","createStaticBoolProp","createColorProp","SEED_DATA","name","tag","description","category","container","layout","paddingTop","paddingRight","paddingBottom","paddingLeft","fontSize","props","label","expanded","openColor","closedColor","caretColor","caretSize","defaultValue","icon","iconSize"],"mappings":"AAAA,SACEA,eADF,EAEEC,gBAFF,EAGEC,cAHF,EAIEC,cAJF,EAKEC,oBALF,EAMEC,eANF,QAOO,iBAPP;AASA,OAAO,MAAMC,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,WADiB;AAEvBC,EAAAA,GAAG,EAAE,gBAFkB;AAGvBC,EAAAA,WAAW,EAAE,+CAHU;AAIvBC,EAAAA,QAAQ,EAAEV,eAAe,CAACW,SAJH;AAKvBC,EAAAA,MAAM,EAAE;AACNC,IAAAA,UAAU,EAAE,CADN;AAENC,IAAAA,YAAY,EAAE,CAFR;AAGNC,IAAAA,aAAa,EAAE,CAHT;AAINC,IAAAA,WAAW,EAAE,CAJP;AAKNC,IAAAA,QAAQ,EAAE;AALJ,GALe;AAYvBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAEhB,cAAc,CAAC;AACpBgB,MAAAA,KAAK,EAAE;AADa,KAAD,CADhB;AAILC,IAAAA,QAAQ,EAAEhB,oBAAoB,CAAC;AAC7Be,MAAAA,KAAK,EAAE,UADsB;AAE7BV,MAAAA,WAAW,EACT;AAH2B,KAAD,CAJzB;AASLY,IAAAA,SAAS,EAAEhB,eAAe,CAAC;AACzBc,MAAAA,KAAK,EAAE;AADkB,KAAD,CATrB;AAYLG,IAAAA,WAAW,EAAEjB,eAAe,CAAC;AAC3Bc,MAAAA,KAAK,EAAE;AADoB,KAAD,CAZvB;AAeLI,IAAAA,UAAU,EAAElB,eAAe,CAAC;AAC1Bc,MAAAA,KAAK,EAAE;AADmB,KAAD,CAftB;AAkBLK,IAAAA,SAAS,EAAEvB,gBAAgB,CAAC;AAC1BkB,MAAAA,KAAK,EAAE,YADmB;AAE1BM,MAAAA,YAAY,EAAE;AAFY,KAAD,CAlBtB;AAsBLC,IAAAA,IAAI,EAAExB,cAAc,EAtBf;AAuBLyB,IAAAA,QAAQ,EAAE1B,gBAAgB,CAAC;AACzBkB,MAAAA,KAAK,EAAE,WADkB;AAEzBM,MAAAA,YAAY,EAAE;AAFW,KAAD;AAvBrB;AAZgB,CAAlB","sourcesContent":["import {\n COMPONENT_TYPES,\n createNumberProp,\n createIconProp,\n createTextProp,\n createStaticBoolProp,\n createColorProp,\n} from \"@draftbit/types\";\n\nexport const SEED_DATA = {\n name: \"Accordion\",\n tag: \"AccordionGroup\",\n description: \"An expandable container containing components\",\n category: COMPONENT_TYPES.container,\n layout: {\n paddingTop: 8,\n paddingRight: 8,\n paddingBottom: 8,\n paddingLeft: 8,\n fontSize: 16,\n },\n props: {\n label: createTextProp({\n label: \"Label\",\n }),\n expanded: createStaticBoolProp({\n label: \"Expanded\",\n description:\n \"Whether the AccordionGroup should be initaially expanded or not\",\n }),\n openColor: createColorProp({\n label: \"Open text color\",\n }),\n closedColor: createColorProp({\n label: \"Closed text color\",\n }),\n caretColor: createColorProp({\n label: \"Caret color\",\n }),\n caretSize: createNumberProp({\n label: \"Caret size\",\n defaultValue: 24,\n }),\n icon: createIconProp(),\n iconSize: createNumberProp({\n label: \"Icon size\",\n defaultValue: 24,\n }),\n },\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ActionSheetItem.
|
|
1
|
+
{"version":3,"sources":["ActionSheetItem.js"],"names":["COMPONENT_TYPES","createActionProp","createColorProp","createTextProp","GROUPS","Triggers","SEED_DATA","name","tag","description","category","button","triggers","OnPress","layout","textAlign","props","onPress","label","group","basic","defaultValue","color"],"mappings":"AAAA,SAASA,eAAT,EAA0BC,gBAA1B,EAA4CC,eAA5C,EAA6DC,cAA7D,EAA6EC,MAA7E,EAAqFC,QAArF,QAAsG,iBAAtG;AACA,OAAO,MAAMC,SAAS,GAAG;AACrBC,EAAAA,IAAI,EAAE,mBADe;AAErBC,EAAAA,GAAG,EAAE,iBAFgB;AAGrBC,EAAAA,WAAW,EAAE,mBAHQ;AAIrBC,EAAAA,QAAQ,EAAEV,eAAe,CAACW,MAJL;AAKrBC,EAAAA,QAAQ,EAAE,CAACP,QAAQ,CAACQ,OAAV,CALW;AAMrBC,EAAAA,MAAM,EAAE;AACJC,IAAAA,SAAS,EAAE;AADP,GANa;AASrBC,EAAAA,KAAK,EAAE;AACHC,IAAAA,OAAO,EAAEhB,gBAAgB,EADtB;AAEHiB,IAAAA,KAAK,EAAEf,cAAc,CAAC;AAClBgB,MAAAA,KAAK,EAAEf,MAAM,CAACgB,KADI;AAElBF,MAAAA,KAAK,EAAE,OAFW;AAGlBG,MAAAA,YAAY,EAAE;AAHI,KAAD,CAFlB;AAOHC,IAAAA,KAAK,EAAEpB,eAAe,CAAC;AACnBgB,MAAAA,KAAK,EAAE;AADY,KAAD;AAPnB;AATc,CAAlB","sourcesContent":["import { COMPONENT_TYPES, createActionProp, createColorProp, createTextProp, GROUPS, Triggers, } from \"@draftbit/types\";\nexport const SEED_DATA = {\n name: \"Action Sheet Item\",\n tag: \"ActionSheetItem\",\n description: \"Action Sheet item\",\n category: COMPONENT_TYPES.button,\n triggers: [Triggers.OnPress],\n layout: {\n textAlign: \"center\",\n },\n props: {\n onPress: createActionProp(),\n label: createTextProp({\n group: GROUPS.basic,\n label: \"Label\",\n defaultValue: \"Option\",\n }),\n color: createColorProp({\n label: \"Font Color\",\n }),\n },\n};\n"]}
|
|
@@ -2,28 +2,30 @@ import * as React from "react";
|
|
|
2
2
|
import { StyleProp, TextStyle } from "react-native";
|
|
3
3
|
import type { IconSlot } from "../../interfaces/Icon";
|
|
4
4
|
import type { Theme } from "../../styles/DefaultTheme";
|
|
5
|
-
declare type
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
declare type AccordionGroupProps = {
|
|
6
|
+
label?: string;
|
|
7
|
+
expanded?: boolean;
|
|
8
|
+
openColor?: string;
|
|
9
|
+
closedColor?: string;
|
|
10
|
+
caretColor?: string;
|
|
11
|
+
caretSize?: number;
|
|
9
12
|
icon?: string;
|
|
10
|
-
iconSize
|
|
13
|
+
iconSize?: number;
|
|
11
14
|
style?: StyleProp<TextStyle>;
|
|
12
|
-
children
|
|
13
|
-
label: string;
|
|
14
|
-
expanded?: boolean;
|
|
15
|
+
children?: React.ReactNode;
|
|
15
16
|
theme: Theme;
|
|
16
17
|
} & IconSlot;
|
|
17
18
|
declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<{
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
label?: string | undefined;
|
|
20
|
+
expanded?: boolean | undefined;
|
|
21
|
+
openColor?: string | undefined;
|
|
22
|
+
closedColor?: string | undefined;
|
|
23
|
+
caretColor?: string | undefined;
|
|
24
|
+
caretSize?: number | undefined;
|
|
21
25
|
icon?: string | undefined;
|
|
22
|
-
iconSize
|
|
26
|
+
iconSize?: number | undefined;
|
|
23
27
|
style?: StyleProp<TextStyle>;
|
|
24
|
-
children
|
|
25
|
-
label: string;
|
|
26
|
-
expanded?: boolean | undefined;
|
|
28
|
+
children?: React.ReactNode;
|
|
27
29
|
theme: {
|
|
28
30
|
disabledOpacity: number;
|
|
29
31
|
roundness: number;
|
|
@@ -1526,15 +1528,16 @@ declare const _default: React.ComponentType<import("@draftbit/react-theme-provid
|
|
|
1526
1528
|
} & IconSlot, "theme"> & {
|
|
1527
1529
|
theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
|
|
1528
1530
|
}> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<{
|
|
1529
|
-
|
|
1530
|
-
|
|
1531
|
-
|
|
1531
|
+
label?: string | undefined;
|
|
1532
|
+
expanded?: boolean | undefined;
|
|
1533
|
+
openColor?: string | undefined;
|
|
1534
|
+
closedColor?: string | undefined;
|
|
1535
|
+
caretColor?: string | undefined;
|
|
1536
|
+
caretSize?: number | undefined;
|
|
1532
1537
|
icon?: string | undefined;
|
|
1533
|
-
iconSize
|
|
1538
|
+
iconSize?: number | undefined;
|
|
1534
1539
|
style?: StyleProp<TextStyle>;
|
|
1535
|
-
children
|
|
1536
|
-
label: string;
|
|
1537
|
-
expanded?: boolean | undefined;
|
|
1540
|
+
children?: React.ReactNode;
|
|
1538
1541
|
theme: {
|
|
1539
1542
|
disabledOpacity: number;
|
|
1540
1543
|
roundness: number;
|
|
@@ -3034,5 +3037,5 @@ declare const _default: React.ComponentType<import("@draftbit/react-theme-provid
|
|
|
3034
3037
|
};
|
|
3035
3038
|
};
|
|
3036
3039
|
};
|
|
3037
|
-
} & IconSlot> & (({
|
|
3040
|
+
} & IconSlot> & (({ label, expanded: expandedProp, openColor, closedColor, caretColor: caretColorProp, caretSize, icon, iconSize, style, children, theme, Icon, }: AccordionGroupProps) => JSX.Element), {}>;
|
|
3038
3041
|
export default _default;
|
|
@@ -11,6 +11,17 @@ export declare const SEED_DATA: {
|
|
|
11
11
|
fontSize: number;
|
|
12
12
|
};
|
|
13
13
|
props: {
|
|
14
|
+
label: any;
|
|
15
|
+
expanded: {
|
|
16
|
+
label: string;
|
|
17
|
+
description: string;
|
|
18
|
+
formType: string;
|
|
19
|
+
propType: string;
|
|
20
|
+
defaultValue: boolean;
|
|
21
|
+
editable: boolean;
|
|
22
|
+
required: boolean;
|
|
23
|
+
group: string;
|
|
24
|
+
};
|
|
14
25
|
openColor: {
|
|
15
26
|
group: string;
|
|
16
27
|
label: string;
|
|
@@ -41,7 +52,7 @@ export declare const SEED_DATA: {
|
|
|
41
52
|
formType: string;
|
|
42
53
|
propType: string;
|
|
43
54
|
};
|
|
44
|
-
|
|
55
|
+
caretSize: {
|
|
45
56
|
label: string;
|
|
46
57
|
description: string;
|
|
47
58
|
formType: string;
|
|
@@ -52,26 +63,26 @@ export declare const SEED_DATA: {
|
|
|
52
63
|
required: boolean;
|
|
53
64
|
step: number;
|
|
54
65
|
};
|
|
55
|
-
|
|
56
|
-
expanded: {
|
|
66
|
+
icon: {
|
|
57
67
|
label: string;
|
|
58
68
|
description: string;
|
|
59
69
|
formType: string;
|
|
60
70
|
propType: string;
|
|
61
|
-
defaultValue:
|
|
62
|
-
editable: boolean;
|
|
71
|
+
defaultValue: string;
|
|
63
72
|
required: boolean;
|
|
73
|
+
editable: boolean;
|
|
64
74
|
group: string;
|
|
65
75
|
};
|
|
66
|
-
|
|
76
|
+
iconSize: {
|
|
67
77
|
label: string;
|
|
68
78
|
description: string;
|
|
69
79
|
formType: string;
|
|
70
80
|
propType: string;
|
|
71
|
-
defaultValue: string;
|
|
72
|
-
required: boolean;
|
|
73
|
-
editable: boolean;
|
|
74
81
|
group: string;
|
|
82
|
+
defaultValue: null;
|
|
83
|
+
editable: boolean;
|
|
84
|
+
required: boolean;
|
|
85
|
+
step: number;
|
|
75
86
|
};
|
|
76
87
|
};
|
|
77
88
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@draftbit/core",
|
|
3
|
-
"version": "43.4.
|
|
3
|
+
"version": "43.4.15-43f83d.0+43f83d0f",
|
|
4
4
|
"description": "Core (non-native) Components",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"module": "lib/module/index.js",
|
|
@@ -80,5 +80,5 @@
|
|
|
80
80
|
]
|
|
81
81
|
]
|
|
82
82
|
},
|
|
83
|
-
"gitHead": "
|
|
83
|
+
"gitHead": "43f83d0fd0613f64682d66f7420dbf1a170d81fd"
|
|
84
84
|
}
|
|
@@ -3,16 +3,16 @@ import { View, StyleSheet, Pressable, } from "react-native";
|
|
|
3
3
|
import Text from "../Text";
|
|
4
4
|
import { withTheme } from "../../theming";
|
|
5
5
|
import { extractStyles } from "../../utilities";
|
|
6
|
-
const AccordionGroup = ({
|
|
7
|
-
const [expanded, setExpanded] = React.useState(expandedProp
|
|
8
|
-
const
|
|
9
|
-
setExpanded(!expanded);
|
|
10
|
-
};
|
|
11
|
-
const expandedInternal = expandedProp !== undefined ? expandedProp : expanded;
|
|
6
|
+
const AccordionGroup = ({ label, expanded: expandedProp = false, openColor, closedColor, caretColor: caretColorProp, caretSize = 24, icon, iconSize = 24, style, children, theme, Icon, }) => {
|
|
7
|
+
const [expanded, setExpanded] = React.useState(expandedProp);
|
|
8
|
+
const { textStyles, viewStyles } = extractStyles(style);
|
|
12
9
|
const expandedColor = openColor || theme.colors.primary;
|
|
13
10
|
const collapsedColor = closedColor || theme.colors.primary;
|
|
14
11
|
const labelColor = expanded ? expandedColor : collapsedColor;
|
|
15
|
-
const
|
|
12
|
+
const caretColor = caretColorProp || labelColor;
|
|
13
|
+
const handlePressAction = () => {
|
|
14
|
+
setExpanded(!expanded);
|
|
15
|
+
};
|
|
16
16
|
return (React.createElement(React.Fragment, null,
|
|
17
17
|
React.createElement(Pressable, { style: [styles.row, viewStyles], onPress: handlePressAction, accessibilityRole: "button" },
|
|
18
18
|
icon ? (React.createElement(Icon, { name: icon, size: iconSize, color: labelColor, style: styles.icon })) : null,
|
|
@@ -25,8 +25,8 @@ const AccordionGroup = ({ Icon, openColor, closedColor, caretColor, icon, iconSi
|
|
|
25
25
|
] }, label)),
|
|
26
26
|
React.createElement(Icon, { name: expanded
|
|
27
27
|
? "MaterialIcons/keyboard-arrow-up"
|
|
28
|
-
: "MaterialIcons/keyboard-arrow-down", color: caretColor, size:
|
|
29
|
-
|
|
28
|
+
: "MaterialIcons/keyboard-arrow-down", color: caretColor, size: caretSize })),
|
|
29
|
+
expanded ? children : null));
|
|
30
30
|
};
|
|
31
31
|
const styles = StyleSheet.create({
|
|
32
32
|
row: {
|
|
@@ -12,48 +12,71 @@ import type { IconSlot } from "../../interfaces/Icon";
|
|
|
12
12
|
import type { Theme } from "../../styles/DefaultTheme";
|
|
13
13
|
import { extractStyles } from "../../utilities";
|
|
14
14
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
15
|
+
// label: createTextProp({
|
|
16
|
+
// label: "Label",
|
|
17
|
+
// }),
|
|
18
|
+
// expanded: createStaticBoolProp({
|
|
19
|
+
// label: "Expanded",
|
|
20
|
+
// description:
|
|
21
|
+
// "Whether the AccordionGroup should be initaially expanded or not",
|
|
22
|
+
// }),
|
|
23
|
+
// openColor: createColorProp({
|
|
24
|
+
// label: "Open text color",
|
|
25
|
+
// }),
|
|
26
|
+
// closedColor: createColorProp({
|
|
27
|
+
// label: "Closed text color",
|
|
28
|
+
// }),
|
|
29
|
+
// caretColor: createColorProp({
|
|
30
|
+
// label: "Caret color",
|
|
31
|
+
// }),
|
|
32
|
+
// caretSize: createNumberProp({
|
|
33
|
+
// label: "Caret size",
|
|
34
|
+
// defaultValue: 24,
|
|
35
|
+
// }),
|
|
36
|
+
// icon: createIconProp(),
|
|
37
|
+
// iconSize: createNumberProp({
|
|
38
|
+
// label: "Icon size",
|
|
39
|
+
// defaultValue: 24,
|
|
40
|
+
// }),
|
|
41
|
+
|
|
42
|
+
type AccordionGroupProps = {
|
|
43
|
+
label?: string;
|
|
44
|
+
expanded?: boolean;
|
|
45
|
+
openColor?: string;
|
|
46
|
+
closedColor?: string;
|
|
47
|
+
caretColor?: string;
|
|
48
|
+
caretSize?: number;
|
|
19
49
|
icon?: string;
|
|
20
|
-
iconSize
|
|
50
|
+
iconSize?: number;
|
|
21
51
|
style?: StyleProp<TextStyle>;
|
|
22
|
-
children
|
|
23
|
-
label: string;
|
|
24
|
-
expanded?: boolean;
|
|
52
|
+
children?: React.ReactNode;
|
|
25
53
|
theme: Theme;
|
|
26
54
|
} & IconSlot;
|
|
27
55
|
|
|
28
56
|
const AccordionGroup = ({
|
|
29
|
-
|
|
57
|
+
label,
|
|
58
|
+
expanded: expandedProp = false,
|
|
30
59
|
openColor,
|
|
31
60
|
closedColor,
|
|
32
|
-
caretColor,
|
|
61
|
+
caretColor: caretColorProp,
|
|
62
|
+
caretSize = 24,
|
|
33
63
|
icon,
|
|
34
64
|
iconSize = 24,
|
|
35
65
|
style,
|
|
36
|
-
label,
|
|
37
66
|
children,
|
|
38
|
-
expanded: expandedProp,
|
|
39
67
|
theme,
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
);
|
|
44
|
-
|
|
45
|
-
const handlePressAction = () => {
|
|
46
|
-
setExpanded(!expanded);
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
const expandedInternal = expandedProp !== undefined ? expandedProp : expanded;
|
|
50
|
-
|
|
68
|
+
Icon,
|
|
69
|
+
}: AccordionGroupProps) => {
|
|
70
|
+
const [expanded, setExpanded] = React.useState<boolean>(expandedProp);
|
|
71
|
+
const { textStyles, viewStyles } = extractStyles(style);
|
|
51
72
|
const expandedColor = openColor || theme.colors.primary;
|
|
52
73
|
const collapsedColor = closedColor || theme.colors.primary;
|
|
53
|
-
|
|
54
74
|
const labelColor = expanded ? expandedColor : collapsedColor;
|
|
75
|
+
const caretColor = caretColorProp || labelColor;
|
|
55
76
|
|
|
56
|
-
const
|
|
77
|
+
const handlePressAction = () => {
|
|
78
|
+
setExpanded(!expanded);
|
|
79
|
+
};
|
|
57
80
|
|
|
58
81
|
return (
|
|
59
82
|
<>
|
|
@@ -90,10 +113,10 @@ const AccordionGroup = ({
|
|
|
90
113
|
: "MaterialIcons/keyboard-arrow-down"
|
|
91
114
|
}
|
|
92
115
|
color={caretColor}
|
|
93
|
-
size={
|
|
116
|
+
size={caretSize}
|
|
94
117
|
/>
|
|
95
118
|
</Pressable>
|
|
96
|
-
{
|
|
119
|
+
{expanded ? children : null}
|
|
97
120
|
</>
|
|
98
121
|
);
|
|
99
122
|
};
|
|
@@ -12,26 +12,30 @@ export const SEED_DATA = {
|
|
|
12
12
|
fontSize: 16,
|
|
13
13
|
},
|
|
14
14
|
props: {
|
|
15
|
+
label: createTextProp({
|
|
16
|
+
label: "Label",
|
|
17
|
+
}),
|
|
18
|
+
expanded: createStaticBoolProp({
|
|
19
|
+
label: "Expanded",
|
|
20
|
+
description: "Whether the AccordionGroup should be initaially expanded or not",
|
|
21
|
+
}),
|
|
15
22
|
openColor: createColorProp({
|
|
16
23
|
label: "Open text color",
|
|
17
24
|
}),
|
|
18
25
|
closedColor: createColorProp({
|
|
19
|
-
label: "Closed text
|
|
26
|
+
label: "Closed text color",
|
|
20
27
|
}),
|
|
21
28
|
caretColor: createColorProp({
|
|
22
29
|
label: "Caret color",
|
|
23
30
|
}),
|
|
31
|
+
caretSize: createNumberProp({
|
|
32
|
+
label: "Caret size",
|
|
33
|
+
defaultValue: 24,
|
|
34
|
+
}),
|
|
35
|
+
icon: createIconProp(),
|
|
24
36
|
iconSize: createNumberProp({
|
|
25
37
|
label: "Icon size",
|
|
26
38
|
defaultValue: 24,
|
|
27
39
|
}),
|
|
28
|
-
label: createTextProp({
|
|
29
|
-
label: "Label",
|
|
30
|
-
}),
|
|
31
|
-
expanded: createStaticBoolProp({
|
|
32
|
-
label: "Expanded",
|
|
33
|
-
description: "Whether the AccordionGroup should be expanded or not",
|
|
34
|
-
}),
|
|
35
|
-
icon: createIconProp(),
|
|
36
40
|
},
|
|
37
41
|
};
|
|
@@ -20,26 +20,31 @@ export const SEED_DATA = {
|
|
|
20
20
|
fontSize: 16,
|
|
21
21
|
},
|
|
22
22
|
props: {
|
|
23
|
+
label: createTextProp({
|
|
24
|
+
label: "Label",
|
|
25
|
+
}),
|
|
26
|
+
expanded: createStaticBoolProp({
|
|
27
|
+
label: "Expanded",
|
|
28
|
+
description:
|
|
29
|
+
"Whether the AccordionGroup should be initaially expanded or not",
|
|
30
|
+
}),
|
|
23
31
|
openColor: createColorProp({
|
|
24
32
|
label: "Open text color",
|
|
25
33
|
}),
|
|
26
34
|
closedColor: createColorProp({
|
|
27
|
-
label: "Closed text
|
|
35
|
+
label: "Closed text color",
|
|
28
36
|
}),
|
|
29
37
|
caretColor: createColorProp({
|
|
30
38
|
label: "Caret color",
|
|
31
39
|
}),
|
|
40
|
+
caretSize: createNumberProp({
|
|
41
|
+
label: "Caret size",
|
|
42
|
+
defaultValue: 24,
|
|
43
|
+
}),
|
|
44
|
+
icon: createIconProp(),
|
|
32
45
|
iconSize: createNumberProp({
|
|
33
46
|
label: "Icon size",
|
|
34
47
|
defaultValue: 24,
|
|
35
48
|
}),
|
|
36
|
-
label: createTextProp({
|
|
37
|
-
label: "Label",
|
|
38
|
-
}),
|
|
39
|
-
expanded: createStaticBoolProp({
|
|
40
|
-
label: "Expanded",
|
|
41
|
-
description: "Whether the AccordionGroup should be expanded or not",
|
|
42
|
-
}),
|
|
43
|
-
icon: createIconProp(),
|
|
44
49
|
},
|
|
45
50
|
};
|