@draftbit/core 43.4.14-80e65a.1 → 43.4.15-3586b3.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/RadioButton/RadioButton.js +15 -3
- package/lib/commonjs/components/RadioButton/RadioButton.js.map +1 -1
- package/lib/commonjs/components/RadioButton/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/mappings/Accordion.js +14 -10
- package/lib/module/mappings/Accordion.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"]}
|
|
@@ -21,8 +21,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
21
21
|
|
|
22
22
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
23
23
|
|
|
24
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
25
|
-
|
|
26
24
|
const RadioButton = _ref => {
|
|
27
25
|
let {
|
|
28
26
|
Icon,
|
|
@@ -51,7 +49,21 @@ const RadioButton = _ref => {
|
|
|
51
49
|
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(realValue);
|
|
52
50
|
};
|
|
53
51
|
|
|
54
|
-
return /*#__PURE__*/React.createElement(_IconButton.default,
|
|
52
|
+
return /*#__PURE__*/React.createElement(_IconButton.default, {
|
|
53
|
+
Icon: Icon,
|
|
54
|
+
icon: isSelected ? selectedIcon : unselectedIcon,
|
|
55
|
+
color: isSelected ? color : unselectedColor,
|
|
56
|
+
disabled: disabled,
|
|
57
|
+
onPress: handlePress,
|
|
58
|
+
size: size,
|
|
59
|
+
style: style,
|
|
60
|
+
...rest
|
|
61
|
+
});
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
var _default = RadioButton;
|
|
65
|
+
exports.default = _default;
|
|
66
|
+
//# sourceMappingURL=RadioButton.js.maptends({
|
|
55
67
|
Icon: Icon,
|
|
56
68
|
icon: isSelected ? selectedIcon : unselectedIcon,
|
|
57
69
|
color: isSelected ? color : unselectedColor,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["RadioButton.
|
|
1
|
+
{"version":3,"sources":["RadioButton.js"],"names":["RadioButton","Icon","disabled","color","value","selected","unselectedColor","onPress","size","Config","radioButtonSize","selectedIcon","unselectedIcon","style","rest","contextValue","onValueChange","realValue","realContextValue","isSelected","handlePress","React","createElement","IconButton","icon"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AACA,MAAMA,WAAW,GAAG,QAAoP;AAAA,MAAnP;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,QAAQ,GAAG,KAAnB;AAA0BC,IAAAA,KAA1B;AAAiCC,IAAAA,KAAK,GAAG,EAAzC;AAA6CC,IAAAA,QAA7C;AAAuDC,IAAAA,eAAvD;AAAwEC,IAAAA,OAAxE;AAAiFC,IAAAA,IAAI,GAAGC,gBAAOC,eAA/F;AAAgHC,IAAAA,YAAY,GAAG,oCAA/H;AAAqKC,IAAAA,cAAc,GAAG,sCAAtL;AAA8NC,IAAAA,KAA9N;AAAqO,OAAGC;AAAxO,GAAmP;AACpQ,QAAM;AAAEV,IAAAA,KAAK,EAAEW,YAAT;AAAuBC,IAAAA;AAAvB,MAAyC,0CAA/C;AACA,QAAMC,SAAS,GAAG,uCAAuBb,KAAvB,CAAlB;AACA,QAAMc,gBAAgB,GAAG,uCAAuBH,YAAvB,CAAzB;AACA,QAAMI,UAAU,GAAGd,QAAH,aAAGA,QAAH,cAAGA,QAAH,GAAea,gBAAgB,KAAKD,SAApD;;AACA,QAAMG,WAAW,GAAG,MAAM;AACtBb,IAAAA,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAGU,SAAH,CAAP;AACAD,IAAAA,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa,CAAGC,SAAH,CAAb;AACH,GAHD;;AAIA,sBAAQI,KAAK,CAACC,aAAN,CAAoBC,mBAApB,EAAgC;AAAEtB,IAAAA,IAAI,EAAEA,IAAR;AAAcuB,IAAAA,IAAI,EAAEL,UAAU,GAAGR,YAAH,GAAkBC,cAAhD;AAAgET,IAAAA,KAAK,EAAEgB,UAAU,GAAGhB,KAAH,GAAWG,eAA5F;AAA6GJ,IAAAA,QAAQ,EAAEA,QAAvH;AAAiIK,IAAAA,OAAO,EAAEa,WAA1I;AAAuJZ,IAAAA,IAAI,EAAEA,IAA7J;AAAmKK,IAAAA,KAAK,EAAEA,KAA1K;AAAiL,OAAGC;AAApL,GAAhC,CAAR;AACH,CAVD;;eAWed,W","sourcesContent":["import * as React from \"react\";\nimport Config from \"../Config\";\nimport IconButton from \"../IconButton\";\nimport { getValueForRadioButton } from \"../../utilities\";\nimport { useRadioButtonGroupContext } from \"./context\";\nconst RadioButton = ({ Icon, disabled = false, color, value = \"\", selected, unselectedColor, onPress, size = Config.radioButtonSize, selectedIcon = \"MaterialIcons/radio-button-checked\", unselectedIcon = \"MaterialIcons/radio-button-unchecked\", style, ...rest }) => {\n const { value: contextValue, onValueChange } = useRadioButtonGroupContext();\n const realValue = getValueForRadioButton(value);\n const realContextValue = getValueForRadioButton(contextValue);\n const isSelected = selected ?? realContextValue === realValue;\n const handlePress = () => {\n onPress?.(realValue);\n onValueChange?.(realValue);\n };\n return (React.createElement(IconButton, { Icon: Icon, icon: isSelected ? selectedIcon : unselectedIcon, color: isSelected ? color : unselectedColor, disabled: disabled, onPress: handlePress, size: size, style: style, ...rest }));\n};\nexport default RadioButton;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.
|
|
1
|
+
{"version":3,"sources":["index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA","sourcesContent":["export { default as RadioButton } from \"./RadioButton\";\nexport { default as RadioButtonGroup } from \"./RadioButtonGroup\";\nexport { default as RadioButtonRow } from \"./RadioButtonRow\";\nexport { default as RadioButtonFieldGroup } from \"./RadioButtonFieldGroup\";\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":"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","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"]}
|
|
@@ -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"]}
|
|
@@ -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-3586b3.0+3586b32f",
|
|
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": "3586b32faeae85df58a85003206ce4accc941d40"
|
|
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
|
};
|