@draftbit/core 43.4.15-21e84b.0 → 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/RadioButtonGroup.js +6 -10
- package/lib/commonjs/components/RadioButton/RadioButtonGroup.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/components/RadioButton/RadioButtonGroup.js +6 -10
- package/lib/module/components/RadioButton/RadioButtonGroup.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/components/RadioButton/RadioButtonGroup.d.ts +1 -1
- 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/components/RadioButton/RadioButtonGroup.js +6 -10
- package/src/components/RadioButton/RadioButtonGroup.tsx +8 -12
- 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"]}
|
|
@@ -28,23 +28,19 @@ const RadioButtonGroup = _ref => {
|
|
|
28
28
|
direction = _context.Direction.Vertical,
|
|
29
29
|
value = "",
|
|
30
30
|
onValueChange,
|
|
31
|
-
defaultValue,
|
|
31
|
+
defaultValue = "",
|
|
32
32
|
style,
|
|
33
33
|
children,
|
|
34
34
|
...rest
|
|
35
35
|
} = _ref;
|
|
36
36
|
const [internalValue, setInternalValue] = React.useState("");
|
|
37
37
|
React.useEffect(() => {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
setInternalValue(realValue);
|
|
41
|
-
}
|
|
38
|
+
const realValue = (0, _utilities.getValueForRadioButton)(value);
|
|
39
|
+
setInternalValue(realValue);
|
|
42
40
|
}, [value]);
|
|
43
41
|
React.useEffect(() => {
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
setInternalValue(realDefaultValue);
|
|
47
|
-
}
|
|
42
|
+
const realDefaultValue = (0, _utilities.getValueForRadioButton)(defaultValue);
|
|
43
|
+
setInternalValue(realDefaultValue);
|
|
48
44
|
}, [defaultValue]);
|
|
49
45
|
|
|
50
46
|
const handleValueChange = newValue => {
|
|
@@ -69,7 +65,7 @@ const RadioButtonGroup = _ref => {
|
|
|
69
65
|
}, style]
|
|
70
66
|
}, rest), /*#__PURE__*/React.createElement(Provider, {
|
|
71
67
|
value: {
|
|
72
|
-
value: internalValue,
|
|
68
|
+
value: internalValue || "",
|
|
73
69
|
onValueChange: handleValueChange,
|
|
74
70
|
direction
|
|
75
71
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["RadioButtonGroup.tsx"],"names":["Provider","radioButtonGroupContext","RadioButtonGroup","direction","Direction","Vertical","value","onValueChange","defaultValue","style","children","rest","internalValue","setInternalValue","React","useState","useEffect","realValue","realDefaultValue","handleValueChange","newValue","realNewValue","_containerStyle","flexDirection","Horizontal","push","alignItems","minHeight"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;AAWA,MAAM;AAAEA,EAAAA;AAAF,IAAeC,gCAArB;;AAEA,MAAMC,gBAAiD,GAAG,QAQpD;AAAA,MARqD;AACzDC,IAAAA,SAAS,GAAGC,mBAAUC,QADmC;AAEzDC,IAAAA,KAAK,GAAG,EAFiD;AAGzDC,IAAAA,aAHyD;AAIzDC,IAAAA,
|
|
1
|
+
{"version":3,"sources":["RadioButtonGroup.tsx"],"names":["Provider","radioButtonGroupContext","RadioButtonGroup","direction","Direction","Vertical","value","onValueChange","defaultValue","style","children","rest","internalValue","setInternalValue","React","useState","useEffect","realValue","realDefaultValue","handleValueChange","newValue","realNewValue","_containerStyle","flexDirection","Horizontal","push","alignItems","minHeight"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;AAWA,MAAM;AAAEA,EAAAA;AAAF,IAAeC,gCAArB;;AAEA,MAAMC,gBAAiD,GAAG,QAQpD;AAAA,MARqD;AACzDC,IAAAA,SAAS,GAAGC,mBAAUC,QADmC;AAEzDC,IAAAA,KAAK,GAAG,EAFiD;AAGzDC,IAAAA,aAHyD;AAIzDC,IAAAA,YAAY,GAAG,EAJ0C;AAKzDC,IAAAA,KALyD;AAMzDC,IAAAA,QANyD;AAOzD,OAAGC;AAPsD,GAQrD;AACJ,QAAM,CAACC,aAAD,EAAgBC,gBAAhB,IAAoCC,KAAK,CAACC,QAAN,CAAuB,EAAvB,CAA1C;AAEAD,EAAAA,KAAK,CAACE,SAAN,CAAgB,MAAM;AACpB,UAAMC,SAAS,GAAG,uCAAuBX,KAAvB,CAAlB;AAEAO,IAAAA,gBAAgB,CAACI,SAAD,CAAhB;AACD,GAJD,EAIG,CAACX,KAAD,CAJH;AAMAQ,EAAAA,KAAK,CAACE,SAAN,CAAgB,MAAM;AACpB,UAAME,gBAAgB,GAAG,uCAAuBV,YAAvB,CAAzB;AAEAK,IAAAA,gBAAgB,CAACK,gBAAD,CAAhB;AACD,GAJD,EAIG,CAACV,YAAD,CAJH;;AAMA,QAAMW,iBAAiB,GAAIC,QAAD,IAA+B;AACvD,UAAMC,YAAY,GAAG,uCAAuBD,QAAvB,CAArB;AAEAP,IAAAA,gBAAgB,CAACQ,YAAD,CAAhB;AACAd,IAAAA,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa,CAAGc,YAAH,CAAb;AACD,GALD;;AAOA,QAAMC,eAAqC,GAAG,CAC5C;AACEC,IAAAA,aAAa,EAAEpB,SAAS,KAAKC,mBAAUoB,UAAxB,GAAqC,KAArC,GAA6C;AAD9D,GAD4C,CAA9C;;AAMA,MAAIrB,SAAS,KAAKC,mBAAUC,QAA5B,EAAsC;AACpCiB,IAAAA,eAAe,CAACG,IAAhB,CAAqB;AACnBC,MAAAA,UAAU,EAAE;AADO,KAArB;AAGD;;AAED,sBACE,oBAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,CAAC;AAAEC,MAAAA,SAAS,EAAE;AAAb,KAAD,EAAoBlB,KAApB;AAAb,KAA6CE,IAA7C,gBACE,oBAAC,QAAD;AACE,IAAA,KAAK,EAAE;AACLL,MAAAA,KAAK,EAAEM,aAAa,IAAI,EADnB;AAELL,MAAAA,aAAa,EAAEY,iBAFV;AAGLhB,MAAAA;AAHK;AADT,kBAOE,oBAAC,iBAAD;AAAM,IAAA,KAAK,EAAEmB;AAAb,KAA+BZ,QAA/B,CAPF,CADF,CADF;AAaD,CAvDD;;eAyDeR,gB","sourcesContent":["import * as React from \"react\";\nimport { View, StyleProp, ViewStyle } from \"react-native\";\nimport type { Theme } from \"../../styles/DefaultTheme\";\nimport { getValueForRadioButton } from \"../../utilities\";\nimport { radioButtonGroupContext, Direction } from \"./context\";\nexport interface RadioButtonGroupProps {\n direction?: Direction;\n style?: StyleProp<ViewStyle>;\n value: string;\n onValueChange?: (value: string) => void;\n defaultValue?: string | number;\n theme: Theme;\n children: React.ReactNode;\n}\n\nconst { Provider } = radioButtonGroupContext;\n\nconst RadioButtonGroup: React.FC<RadioButtonGroupProps> = ({\n direction = Direction.Vertical,\n value = \"\",\n onValueChange,\n defaultValue = \"\",\n style,\n children,\n ...rest\n}) => {\n const [internalValue, setInternalValue] = React.useState<string>(\"\");\n\n React.useEffect(() => {\n const realValue = getValueForRadioButton(value);\n\n setInternalValue(realValue);\n }, [value]);\n\n React.useEffect(() => {\n const realDefaultValue = getValueForRadioButton(defaultValue);\n\n setInternalValue(realDefaultValue);\n }, [defaultValue]);\n\n const handleValueChange = (newValue: string | number) => {\n const realNewValue = getValueForRadioButton(newValue);\n\n setInternalValue(realNewValue);\n onValueChange?.(realNewValue);\n };\n\n const _containerStyle: StyleProp<ViewStyle> = [\n {\n flexDirection: direction === Direction.Horizontal ? \"row\" : \"column\",\n },\n ];\n\n if (direction !== Direction.Vertical) {\n _containerStyle.push({\n alignItems: \"center\",\n });\n }\n\n return (\n <View style={[{ minHeight: 40 }, style]} {...rest}>\n <Provider\n value={{\n value: internalValue || \"\",\n onValueChange: handleValueChange,\n direction,\n }}\n >\n <View style={_containerStyle}>{children}</View>\n </Provider>\n </View>\n );\n};\n\nexport default RadioButtonGroup;\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":"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"]}
|
|
@@ -13,23 +13,19 @@ const RadioButtonGroup = _ref => {
|
|
|
13
13
|
direction = Direction.Vertical,
|
|
14
14
|
value = "",
|
|
15
15
|
onValueChange,
|
|
16
|
-
defaultValue,
|
|
16
|
+
defaultValue = "",
|
|
17
17
|
style,
|
|
18
18
|
children,
|
|
19
19
|
...rest
|
|
20
20
|
} = _ref;
|
|
21
21
|
const [internalValue, setInternalValue] = React.useState("");
|
|
22
22
|
React.useEffect(() => {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
setInternalValue(realValue);
|
|
26
|
-
}
|
|
23
|
+
const realValue = getValueForRadioButton(value);
|
|
24
|
+
setInternalValue(realValue);
|
|
27
25
|
}, [value]);
|
|
28
26
|
React.useEffect(() => {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
setInternalValue(realDefaultValue);
|
|
32
|
-
}
|
|
27
|
+
const realDefaultValue = getValueForRadioButton(defaultValue);
|
|
28
|
+
setInternalValue(realDefaultValue);
|
|
33
29
|
}, [defaultValue]);
|
|
34
30
|
|
|
35
31
|
const handleValueChange = newValue => {
|
|
@@ -54,7 +50,7 @@ const RadioButtonGroup = _ref => {
|
|
|
54
50
|
}, style]
|
|
55
51
|
}, rest), /*#__PURE__*/React.createElement(Provider, {
|
|
56
52
|
value: {
|
|
57
|
-
value: internalValue,
|
|
53
|
+
value: internalValue || "",
|
|
58
54
|
onValueChange: handleValueChange,
|
|
59
55
|
direction
|
|
60
56
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["RadioButtonGroup.tsx"],"names":["React","View","getValueForRadioButton","radioButtonGroupContext","Direction","Provider","RadioButtonGroup","direction","Vertical","value","onValueChange","defaultValue","style","children","rest","internalValue","setInternalValue","useState","useEffect","realValue","realDefaultValue","handleValueChange","newValue","realNewValue","_containerStyle","flexDirection","Horizontal","push","alignItems","minHeight"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,QAA2C,cAA3C;AAEA,SAASC,sBAAT,QAAuC,iBAAvC;AACA,SAASC,uBAAT,EAAkCC,SAAlC,QAAmD,WAAnD;AAWA,MAAM;AAAEC,EAAAA;AAAF,IAAeF,uBAArB;;AAEA,MAAMG,gBAAiD,GAAG,QAQpD;AAAA,MARqD;AACzDC,IAAAA,SAAS,GAAGH,SAAS,CAACI,QADmC;AAEzDC,IAAAA,KAAK,GAAG,EAFiD;AAGzDC,IAAAA,aAHyD;AAIzDC,IAAAA,
|
|
1
|
+
{"version":3,"sources":["RadioButtonGroup.tsx"],"names":["React","View","getValueForRadioButton","radioButtonGroupContext","Direction","Provider","RadioButtonGroup","direction","Vertical","value","onValueChange","defaultValue","style","children","rest","internalValue","setInternalValue","useState","useEffect","realValue","realDefaultValue","handleValueChange","newValue","realNewValue","_containerStyle","flexDirection","Horizontal","push","alignItems","minHeight"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,QAA2C,cAA3C;AAEA,SAASC,sBAAT,QAAuC,iBAAvC;AACA,SAASC,uBAAT,EAAkCC,SAAlC,QAAmD,WAAnD;AAWA,MAAM;AAAEC,EAAAA;AAAF,IAAeF,uBAArB;;AAEA,MAAMG,gBAAiD,GAAG,QAQpD;AAAA,MARqD;AACzDC,IAAAA,SAAS,GAAGH,SAAS,CAACI,QADmC;AAEzDC,IAAAA,KAAK,GAAG,EAFiD;AAGzDC,IAAAA,aAHyD;AAIzDC,IAAAA,YAAY,GAAG,EAJ0C;AAKzDC,IAAAA,KALyD;AAMzDC,IAAAA,QANyD;AAOzD,OAAGC;AAPsD,GAQrD;AACJ,QAAM,CAACC,aAAD,EAAgBC,gBAAhB,IAAoChB,KAAK,CAACiB,QAAN,CAAuB,EAAvB,CAA1C;AAEAjB,EAAAA,KAAK,CAACkB,SAAN,CAAgB,MAAM;AACpB,UAAMC,SAAS,GAAGjB,sBAAsB,CAACO,KAAD,CAAxC;AAEAO,IAAAA,gBAAgB,CAACG,SAAD,CAAhB;AACD,GAJD,EAIG,CAACV,KAAD,CAJH;AAMAT,EAAAA,KAAK,CAACkB,SAAN,CAAgB,MAAM;AACpB,UAAME,gBAAgB,GAAGlB,sBAAsB,CAACS,YAAD,CAA/C;AAEAK,IAAAA,gBAAgB,CAACI,gBAAD,CAAhB;AACD,GAJD,EAIG,CAACT,YAAD,CAJH;;AAMA,QAAMU,iBAAiB,GAAIC,QAAD,IAA+B;AACvD,UAAMC,YAAY,GAAGrB,sBAAsB,CAACoB,QAAD,CAA3C;AAEAN,IAAAA,gBAAgB,CAACO,YAAD,CAAhB;AACAb,IAAAA,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa,CAAGa,YAAH,CAAb;AACD,GALD;;AAOA,QAAMC,eAAqC,GAAG,CAC5C;AACEC,IAAAA,aAAa,EAAElB,SAAS,KAAKH,SAAS,CAACsB,UAAxB,GAAqC,KAArC,GAA6C;AAD9D,GAD4C,CAA9C;;AAMA,MAAInB,SAAS,KAAKH,SAAS,CAACI,QAA5B,EAAsC;AACpCgB,IAAAA,eAAe,CAACG,IAAhB,CAAqB;AACnBC,MAAAA,UAAU,EAAE;AADO,KAArB;AAGD;;AAED,sBACE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAE,CAAC;AAAEC,MAAAA,SAAS,EAAE;AAAb,KAAD,EAAoBjB,KAApB;AAAb,KAA6CE,IAA7C,gBACE,oBAAC,QAAD;AACE,IAAA,KAAK,EAAE;AACLL,MAAAA,KAAK,EAAEM,aAAa,IAAI,EADnB;AAELL,MAAAA,aAAa,EAAEW,iBAFV;AAGLd,MAAAA;AAHK;AADT,kBAOE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEiB;AAAb,KAA+BX,QAA/B,CAPF,CADF,CADF;AAaD,CAvDD;;AAyDA,eAAeP,gBAAf","sourcesContent":["import * as React from \"react\";\nimport { View, StyleProp, ViewStyle } from \"react-native\";\nimport type { Theme } from \"../../styles/DefaultTheme\";\nimport { getValueForRadioButton } from \"../../utilities\";\nimport { radioButtonGroupContext, Direction } from \"./context\";\nexport interface RadioButtonGroupProps {\n direction?: Direction;\n style?: StyleProp<ViewStyle>;\n value: string;\n onValueChange?: (value: string) => void;\n defaultValue?: string | number;\n theme: Theme;\n children: React.ReactNode;\n}\n\nconst { Provider } = radioButtonGroupContext;\n\nconst RadioButtonGroup: React.FC<RadioButtonGroupProps> = ({\n direction = Direction.Vertical,\n value = \"\",\n onValueChange,\n defaultValue = \"\",\n style,\n children,\n ...rest\n}) => {\n const [internalValue, setInternalValue] = React.useState<string>(\"\");\n\n React.useEffect(() => {\n const realValue = getValueForRadioButton(value);\n\n setInternalValue(realValue);\n }, [value]);\n\n React.useEffect(() => {\n const realDefaultValue = getValueForRadioButton(defaultValue);\n\n setInternalValue(realDefaultValue);\n }, [defaultValue]);\n\n const handleValueChange = (newValue: string | number) => {\n const realNewValue = getValueForRadioButton(newValue);\n\n setInternalValue(realNewValue);\n onValueChange?.(realNewValue);\n };\n\n const _containerStyle: StyleProp<ViewStyle> = [\n {\n flexDirection: direction === Direction.Horizontal ? \"row\" : \"column\",\n },\n ];\n\n if (direction !== Direction.Vertical) {\n _containerStyle.push({\n alignItems: \"center\",\n });\n }\n\n return (\n <View style={[{ minHeight: 40 }, style]} {...rest}>\n <Provider\n value={{\n value: internalValue || \"\",\n onValueChange: handleValueChange,\n direction,\n }}\n >\n <View style={_containerStyle}>{children}</View>\n </Provider>\n </View>\n );\n};\n\nexport default RadioButtonGroup;\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;
|
|
@@ -5,7 +5,7 @@ import { Direction } from "./context";
|
|
|
5
5
|
export interface RadioButtonGroupProps {
|
|
6
6
|
direction?: Direction;
|
|
7
7
|
style?: StyleProp<ViewStyle>;
|
|
8
|
-
value: string
|
|
8
|
+
value: string;
|
|
9
9
|
onValueChange?: (value: string) => void;
|
|
10
10
|
defaultValue?: string | number;
|
|
11
11
|
theme: Theme;
|
|
@@ -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.15-
|
|
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
|
};
|
|
@@ -3,19 +3,15 @@ import { View } from "react-native";
|
|
|
3
3
|
import { getValueForRadioButton } from "../../utilities";
|
|
4
4
|
import { radioButtonGroupContext, Direction } from "./context";
|
|
5
5
|
const { Provider } = radioButtonGroupContext;
|
|
6
|
-
const RadioButtonGroup = ({ direction = Direction.Vertical, value = "", onValueChange, defaultValue, style, children, ...rest }) => {
|
|
6
|
+
const RadioButtonGroup = ({ direction = Direction.Vertical, value = "", onValueChange, defaultValue = "", style, children, ...rest }) => {
|
|
7
7
|
const [internalValue, setInternalValue] = React.useState("");
|
|
8
8
|
React.useEffect(() => {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
setInternalValue(realValue);
|
|
12
|
-
}
|
|
9
|
+
const realValue = getValueForRadioButton(value);
|
|
10
|
+
setInternalValue(realValue);
|
|
13
11
|
}, [value]);
|
|
14
12
|
React.useEffect(() => {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
setInternalValue(realDefaultValue);
|
|
18
|
-
}
|
|
13
|
+
const realDefaultValue = getValueForRadioButton(defaultValue);
|
|
14
|
+
setInternalValue(realDefaultValue);
|
|
19
15
|
}, [defaultValue]);
|
|
20
16
|
const handleValueChange = (newValue) => {
|
|
21
17
|
const realNewValue = getValueForRadioButton(newValue);
|
|
@@ -34,7 +30,7 @@ const RadioButtonGroup = ({ direction = Direction.Vertical, value = "", onValueC
|
|
|
34
30
|
}
|
|
35
31
|
return (React.createElement(View, { style: [{ minHeight: 40 }, style], ...rest },
|
|
36
32
|
React.createElement(Provider, { value: {
|
|
37
|
-
value: internalValue,
|
|
33
|
+
value: internalValue || "",
|
|
38
34
|
onValueChange: handleValueChange,
|
|
39
35
|
direction,
|
|
40
36
|
} },
|
|
@@ -6,7 +6,7 @@ import { radioButtonGroupContext, Direction } from "./context";
|
|
|
6
6
|
export interface RadioButtonGroupProps {
|
|
7
7
|
direction?: Direction;
|
|
8
8
|
style?: StyleProp<ViewStyle>;
|
|
9
|
-
value: string
|
|
9
|
+
value: string;
|
|
10
10
|
onValueChange?: (value: string) => void;
|
|
11
11
|
defaultValue?: string | number;
|
|
12
12
|
theme: Theme;
|
|
@@ -19,27 +19,23 @@ const RadioButtonGroup: React.FC<RadioButtonGroupProps> = ({
|
|
|
19
19
|
direction = Direction.Vertical,
|
|
20
20
|
value = "",
|
|
21
21
|
onValueChange,
|
|
22
|
-
defaultValue,
|
|
22
|
+
defaultValue = "",
|
|
23
23
|
style,
|
|
24
24
|
children,
|
|
25
25
|
...rest
|
|
26
26
|
}) => {
|
|
27
|
-
const [internalValue, setInternalValue] = React.useState("");
|
|
27
|
+
const [internalValue, setInternalValue] = React.useState<string>("");
|
|
28
28
|
|
|
29
29
|
React.useEffect(() => {
|
|
30
|
-
|
|
31
|
-
const realValue = getValueForRadioButton(value);
|
|
30
|
+
const realValue = getValueForRadioButton(value);
|
|
32
31
|
|
|
33
|
-
|
|
34
|
-
}
|
|
32
|
+
setInternalValue(realValue);
|
|
35
33
|
}, [value]);
|
|
36
34
|
|
|
37
35
|
React.useEffect(() => {
|
|
38
|
-
|
|
39
|
-
const realDefaultValue = getValueForRadioButton(defaultValue);
|
|
36
|
+
const realDefaultValue = getValueForRadioButton(defaultValue);
|
|
40
37
|
|
|
41
|
-
|
|
42
|
-
}
|
|
38
|
+
setInternalValue(realDefaultValue);
|
|
43
39
|
}, [defaultValue]);
|
|
44
40
|
|
|
45
41
|
const handleValueChange = (newValue: string | number) => {
|
|
@@ -65,7 +61,7 @@ const RadioButtonGroup: React.FC<RadioButtonGroupProps> = ({
|
|
|
65
61
|
<View style={[{ minHeight: 40 }, style]} {...rest}>
|
|
66
62
|
<Provider
|
|
67
63
|
value={{
|
|
68
|
-
value: internalValue,
|
|
64
|
+
value: internalValue || "",
|
|
69
65
|
onValueChange: handleValueChange,
|
|
70
66
|
direction,
|
|
71
67
|
}}
|
|
@@ -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
|
};
|