@draftbit/core 43.4.15-867c9d.0 → 43.4.15
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/RadioButtonGroup.js +10 -6
- package/lib/commonjs/components/RadioButton/RadioButtonGroup.js.map +1 -1
- package/lib/commonjs/mappings/Accordion.js +14 -10
- package/lib/commonjs/mappings/Accordion.js.map +1 -1
- package/lib/commonjs/mappings/RowBodyIcon.js.map +1 -1
- package/lib/module/components/Accordion/AccordionGroup.js +17 -16
- package/lib/module/components/Accordion/AccordionGroup.js.map +1 -1
- package/lib/module/components/RadioButton/RadioButtonGroup.js +10 -6
- 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/module/mappings/ActivityIndicator.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 +23 -27
- package/src/components/RadioButton/RadioButtonGroup.js +10 -6
- package/src/components/RadioButton/RadioButtonGroup.tsx +12 -8
- 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;;;;;;;;AAgBA,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\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"]}
|
|
@@ -28,19 +28,23 @@ 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
|
-
|
|
38
|
+
if (value != null) {
|
|
39
|
+
const realValue = (0, _utilities.getValueForRadioButton)(value);
|
|
40
|
+
setInternalValue(realValue);
|
|
41
|
+
}
|
|
40
42
|
}, [value]);
|
|
41
43
|
React.useEffect(() => {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
+
if (defaultValue != null) {
|
|
45
|
+
const realDefaultValue = (0, _utilities.getValueForRadioButton)(defaultValue);
|
|
46
|
+
setInternalValue(realDefaultValue);
|
|
47
|
+
}
|
|
44
48
|
}, [defaultValue]);
|
|
45
49
|
|
|
46
50
|
const handleValueChange = newValue => {
|
|
@@ -65,7 +69,7 @@ const RadioButtonGroup = _ref => {
|
|
|
65
69
|
}, style]
|
|
66
70
|
}, rest), /*#__PURE__*/React.createElement(Provider, {
|
|
67
71
|
value: {
|
|
68
|
-
value: internalValue
|
|
72
|
+
value: internalValue,
|
|
69
73
|
onValueChange: handleValueChange,
|
|
70
74
|
direction
|
|
71
75
|
}
|
|
@@ -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,YAJyD;AAKzDC,IAAAA,KALyD;AAMzDC,IAAAA,QANyD;AAOzD,OAAGC;AAPsD,GAQrD;AACJ,QAAM,CAACC,aAAD,EAAgBC,gBAAhB,IAAoCC,KAAK,CAACC,QAAN,CAAe,EAAf,CAA1C;AAEAD,EAAAA,KAAK,CAACE,SAAN,CAAgB,MAAM;AACpB,QAAIV,KAAK,IAAI,IAAb,EAAmB;AACjB,YAAMW,SAAS,GAAG,uCAAuBX,KAAvB,CAAlB;AAEAO,MAAAA,gBAAgB,CAACI,SAAD,CAAhB;AACD;AACF,GAND,EAMG,CAACX,KAAD,CANH;AAQAQ,EAAAA,KAAK,CAACE,SAAN,CAAgB,MAAM;AACpB,QAAIR,YAAY,IAAI,IAApB,EAA0B;AACxB,YAAMU,gBAAgB,GAAG,uCAAuBV,YAAvB,CAAzB;AAEAK,MAAAA,gBAAgB,CAACK,gBAAD,CAAhB;AACD;AACF,GAND,EAMG,CAACV,YAAD,CANH;;AAQA,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,aADF;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,CA3DD;;eA6DeR,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 | number;\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(\"\");\n\n React.useEffect(() => {\n if (value != null) {\n const realValue = getValueForRadioButton(value);\n\n setInternalValue(realValue);\n }\n }, [value]);\n\n React.useEffect(() => {\n if (defaultValue != null) {\n const realDefaultValue = getValueForRadioButton(defaultValue);\n\n setInternalValue(realDefaultValue);\n }\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"]}
|
|
@@ -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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["RowBodyIcon.
|
|
1
|
+
{"version":3,"sources":["RowBodyIcon.ts"],"names":["SEED_DATA","name","tag","description","category","COMPONENT_TYPES","row","preview_image_url","supports_list_render","props","title","group","GROUPS","data","label","formType","FORM_TYPES","string","propType","PROP_TYPES","STRING","defaultValue","editable","required","icon","basic","ASSET","layout","subtitle"],"mappings":";;;;;;;AAAA;;AAOO,MAAMA,SAAS,GAAG,CACvB;AACEC,EAAAA,IAAI,EAAE,2BADR;AAEEC,EAAAA,GAAG,EAAE,aAFP;AAGEC,EAAAA,WAAW,EAAE,4DAHf;AAIEC,EAAAA,QAAQ,EAAEC,uBAAgBC,GAJ5B;AAKEC,EAAAA,iBAAiB,EAAE,8CALrB;AAMEC,EAAAA,oBAAoB,EAAE,IANxB;AAOEC,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAEC,cAAOC,IADT;AAELC,MAAAA,KAAK,EAAE,OAFF;AAGLX,MAAAA,WAAW,EAAE,iBAHR;AAILY,MAAAA,QAAQ,EAAEC,kBAAWC,MAJhB;AAKLC,MAAAA,QAAQ,EAAEC,kBAAWC,MALhB;AAMLC,MAAAA,YAAY,EAAE,4BANT;AAOLC,MAAAA,QAAQ,EAAE,IAPL;AAQLC,MAAAA,QAAQ,EAAE;AARL,KADF;AAWLC,IAAAA,IAAI,EAAE;AACJb,MAAAA,KAAK,EAAEC,cAAOa,KADV;AAEJX,MAAAA,KAAK,EAAE,MAFH;AAGJX,MAAAA,WAAW,EAAE,iBAHT;AAIJY,MAAAA,QAAQ,EAAEC,kBAAWQ,IAJjB;AAKJN,MAAAA,QAAQ,EAAEC,kBAAWO,KALjB;AAMJL,MAAAA,YAAY,EAAE,IANV;AAOJC,MAAAA,QAAQ,EAAE,IAPN;AAQJC,MAAAA,QAAQ,EAAE;AARN;AAXD,GAPT;AA6BEI,EAAAA,MAAM,EAAE;AA7BV,CADuB,EAgCvB;AACE1B,EAAAA,IAAI,EAAE,2BADR;AAEEC,EAAAA,GAAG,EAAE,aAFP;AAGEC,EAAAA,WAAW,EACT,8EAJJ;AAKEC,EAAAA,QAAQ,EAAEC,uBAAgBC,GAL5B;AAMEC,EAAAA,iBAAiB,EAAE,8CANrB;AAOEC,EAAAA,oBAAoB,EAAE,IAPxB;AAQEC,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAEC,cAAOC,IADT;AAELC,MAAAA,KAAK,EAAE,OAFF;AAGLX,MAAAA,WAAW,EAAE,iBAHR;AAILY,MAAAA,QAAQ,EAAEC,kBAAWC,MAJhB;AAKLC,MAAAA,QAAQ,EAAEC,kBAAWC,MALhB;AAMLC,MAAAA,YAAY,EAAE,4BANT;AAOLC,MAAAA,QAAQ,EAAE,IAPL;AAQLC,MAAAA,QAAQ,EAAE;AARL,KADF;AAWLK,IAAAA,QAAQ,EAAE;AACRjB,MAAAA,KAAK,EAAEC,cAAOC,IADN;AAERC,MAAAA,KAAK,EAAE,UAFC;AAGRX,MAAAA,WAAW,EAAE,0BAHL;AAIRY,MAAAA,QAAQ,EAAEC,kBAAWC,MAJb;AAKRC,MAAAA,QAAQ,EAAEC,kBAAWC,MALb;AAMRC,MAAAA,YAAY,EAAE,WANN;AAORC,MAAAA,QAAQ,EAAE,IAPF;AAQRC,MAAAA,QAAQ,EAAE;AARF,KAXL;AAqBLC,IAAAA,IAAI,EAAE;AACJb,MAAAA,KAAK,EAAEC,cAAOa,KADV;AAEJX,MAAAA,KAAK,EAAE,MAFH;AAGJX,MAAAA,WAAW,EAAE,iBAHT;AAIJY,MAAAA,QAAQ,EAAEC,kBAAWQ,IAJjB;AAKJN,MAAAA,QAAQ,EAAEC,kBAAWO,KALjB;AAMJL,MAAAA,YAAY,EAAE,IANV;AAOJC,MAAAA,QAAQ,EAAE,IAPN;AAQJC,MAAAA,QAAQ,EAAE;AARN;AArBD,GART;AAwCEI,EAAAA,MAAM,EAAE;AAxCV,CAhCuB,CAAlB","sourcesContent":["import {\n COMPONENT_TYPES,\n FORM_TYPES,\n GROUPS,\n PROP_TYPES,\n} from \"@draftbit/types\";\n\nexport const SEED_DATA = [\n {\n name: \"Row Single Line Body Icon\",\n tag: \"RowBodyIcon\",\n description: \"A row with left aligned body text and a right aligned icon\",\n category: COMPONENT_TYPES.row,\n preview_image_url: \"{CLOUDINARY_URL}/Row_SingleLine_BodyIcon.png\",\n supports_list_render: true,\n props: {\n title: {\n group: GROUPS.data,\n label: \"Title\",\n description: \"Text to display\",\n formType: FORM_TYPES.string,\n propType: PROP_TYPES.STRING,\n defaultValue: \"Beautiful West Coast Villa\",\n editable: true,\n required: false,\n },\n icon: {\n group: GROUPS.basic,\n label: \"Icon\",\n description: \"Icon to display\",\n formType: FORM_TYPES.icon,\n propType: PROP_TYPES.ASSET,\n defaultValue: null,\n editable: true,\n required: false,\n },\n },\n layout: {},\n },\n {\n name: \"Row Double Line Body Icon\",\n tag: \"RowBodyIcon\",\n description:\n \"A row with left aligned body text and subtitle text and a right aligned icon\",\n category: COMPONENT_TYPES.row,\n preview_image_url: \"{CLOUDINARY_URL}/Row_DoubleLine_BodyIcon.png\",\n supports_list_render: true,\n props: {\n title: {\n group: GROUPS.data,\n label: \"Title\",\n description: \"Text to display\",\n formType: FORM_TYPES.string,\n propType: PROP_TYPES.STRING,\n defaultValue: \"Beautiful West Coast Villa\",\n editable: true,\n required: false,\n },\n subtitle: {\n group: GROUPS.data,\n label: \"Subtitle\",\n description: \"Subtitle text to display\",\n formType: FORM_TYPES.string,\n propType: PROP_TYPES.STRING,\n defaultValue: \"San Diego\",\n editable: true,\n required: false,\n },\n icon: {\n group: GROUPS.basic,\n label: \"Icon\",\n description: \"Icon to display\",\n formType: FORM_TYPES.icon,\n propType: PROP_TYPES.ASSET,\n defaultValue: null,\n editable: true,\n required: false,\n },\n },\n layout: {},\n },\n];\n"]}
|
|
@@ -6,32 +6,33 @@ import { extractStyles } from "../../utilities";
|
|
|
6
6
|
|
|
7
7
|
const AccordionGroup = _ref => {
|
|
8
8
|
let {
|
|
9
|
-
|
|
9
|
+
label,
|
|
10
|
+
expanded: expandedProp = false,
|
|
10
11
|
openColor,
|
|
11
12
|
closedColor,
|
|
12
|
-
caretColor,
|
|
13
|
+
caretColor: caretColorProp,
|
|
14
|
+
caretSize = 24,
|
|
13
15
|
icon,
|
|
14
16
|
iconSize = 24,
|
|
15
17
|
style,
|
|
16
|
-
label,
|
|
17
18
|
children,
|
|
18
|
-
|
|
19
|
-
|
|
19
|
+
theme,
|
|
20
|
+
Icon
|
|
20
21
|
} = _ref;
|
|
21
|
-
const [expanded, setExpanded] = React.useState(expandedProp
|
|
22
|
+
const [expanded, setExpanded] = React.useState(expandedProp);
|
|
23
|
+
const {
|
|
24
|
+
textStyles,
|
|
25
|
+
viewStyles
|
|
26
|
+
} = extractStyles(style);
|
|
27
|
+
const expandedColor = openColor || theme.colors.primary;
|
|
28
|
+
const collapsedColor = closedColor || theme.colors.primary;
|
|
29
|
+
const labelColor = expanded ? expandedColor : collapsedColor;
|
|
30
|
+
const caretColor = caretColorProp || labelColor;
|
|
22
31
|
|
|
23
32
|
const handlePressAction = () => {
|
|
24
33
|
setExpanded(!expanded);
|
|
25
34
|
};
|
|
26
35
|
|
|
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
36
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pressable, {
|
|
36
37
|
style: [styles.row, viewStyles],
|
|
37
38
|
onPress: handlePressAction,
|
|
@@ -51,8 +52,8 @@ const AccordionGroup = _ref => {
|
|
|
51
52
|
}, label)), /*#__PURE__*/React.createElement(Icon, {
|
|
52
53
|
name: expanded ? "MaterialIcons/keyboard-arrow-up" : "MaterialIcons/keyboard-arrow-down",
|
|
53
54
|
color: caretColor,
|
|
54
|
-
size:
|
|
55
|
-
})),
|
|
55
|
+
size: caretSize
|
|
56
|
+
})), expanded ? children : null);
|
|
56
57
|
};
|
|
57
58
|
|
|
58
59
|
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;;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\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,19 +13,23 @@ 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
|
-
|
|
23
|
+
if (value != null) {
|
|
24
|
+
const realValue = getValueForRadioButton(value);
|
|
25
|
+
setInternalValue(realValue);
|
|
26
|
+
}
|
|
25
27
|
}, [value]);
|
|
26
28
|
React.useEffect(() => {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
+
if (defaultValue != null) {
|
|
30
|
+
const realDefaultValue = getValueForRadioButton(defaultValue);
|
|
31
|
+
setInternalValue(realDefaultValue);
|
|
32
|
+
}
|
|
29
33
|
}, [defaultValue]);
|
|
30
34
|
|
|
31
35
|
const handleValueChange = newValue => {
|
|
@@ -50,7 +54,7 @@ const RadioButtonGroup = _ref => {
|
|
|
50
54
|
}, style]
|
|
51
55
|
}, rest), /*#__PURE__*/React.createElement(Provider, {
|
|
52
56
|
value: {
|
|
53
|
-
value: internalValue
|
|
57
|
+
value: internalValue,
|
|
54
58
|
onValueChange: handleValueChange,
|
|
55
59
|
direction
|
|
56
60
|
}
|
|
@@ -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,YAJyD;AAKzDC,IAAAA,KALyD;AAMzDC,IAAAA,QANyD;AAOzD,OAAGC;AAPsD,GAQrD;AACJ,QAAM,CAACC,aAAD,EAAgBC,gBAAhB,IAAoChB,KAAK,CAACiB,QAAN,CAAe,EAAf,CAA1C;AAEAjB,EAAAA,KAAK,CAACkB,SAAN,CAAgB,MAAM;AACpB,QAAIT,KAAK,IAAI,IAAb,EAAmB;AACjB,YAAMU,SAAS,GAAGjB,sBAAsB,CAACO,KAAD,CAAxC;AAEAO,MAAAA,gBAAgB,CAACG,SAAD,CAAhB;AACD;AACF,GAND,EAMG,CAACV,KAAD,CANH;AAQAT,EAAAA,KAAK,CAACkB,SAAN,CAAgB,MAAM;AACpB,QAAIP,YAAY,IAAI,IAApB,EAA0B;AACxB,YAAMS,gBAAgB,GAAGlB,sBAAsB,CAACS,YAAD,CAA/C;AAEAK,MAAAA,gBAAgB,CAACI,gBAAD,CAAhB;AACD;AACF,GAND,EAMG,CAACT,YAAD,CANH;;AAQA,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,aADF;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,CA3DD;;AA6DA,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 | number;\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(\"\");\n\n React.useEffect(() => {\n if (value != null) {\n const realValue = getValueForRadioButton(value);\n\n setInternalValue(realValue);\n }\n }, [value]);\n\n React.useEffect(() => {\n if (defaultValue != null) {\n const realDefaultValue = getValueForRadioButton(defaultValue);\n\n setInternalValue(realDefaultValue);\n }\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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ActivityIndicator.
|
|
1
|
+
{"version":3,"sources":["ActivityIndicator.ts"],"names":["COMPONENT_TYPES","FORM_TYPES","PROP_TYPES","GROUPS","SEED_DATA","name","tag","description","doc_link","code_link","category","input","layout","width","height","props","size","label","options","formType","flatArray","propType","STRING","editable","required","defaultValue","group","basic","animating","boolean","BOOLEAN","hidesWhenStopped","color","THEME"],"mappings":"AAAA,SACEA,eADF,EAEEC,UAFF,EAGEC,UAHF,EAIEC,MAJF,QAKO,iBALP;AAOA,OAAO,MAAMC,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,oBADiB;AAEvBC,EAAAA,GAAG,EAAE,mBAFkB;AAGvBC,EAAAA,WAAW,EAAE,wCAHU;AAIvBC,EAAAA,QAAQ,EACN,sEALqB;AAMvBC,EAAAA,SAAS,EACP,2IAPqB;AAQvBC,EAAAA,QAAQ,EAAEV,eAAe,CAACW,KARH;AASvBC,EAAAA,MAAM,EAAE;AAAEC,IAAAA,KAAK,EAAE,EAAT;AAAaC,IAAAA,MAAM,EAAE;AAArB,GATe;AAUvBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE;AACJC,MAAAA,KAAK,EAAE,MADH;AAEJV,MAAAA,WAAW,EAAE,oDAFT;AAGJW,MAAAA,OAAO,EAAE,CAAC,OAAD,EAAU,OAAV,CAHL;AAIJC,MAAAA,QAAQ,EAAElB,UAAU,CAACmB,SAJjB;AAKJC,MAAAA,QAAQ,EAAEnB,UAAU,CAACoB,MALjB;AAMJC,MAAAA,QAAQ,EAAE,IANN;AAOJC,MAAAA,QAAQ,EAAE,KAPN;AAQJC,MAAAA,YAAY,EAAE,OARV;AASJC,MAAAA,KAAK,EAAEvB,MAAM,CAACwB;AATV,KADD;AAYLC,IAAAA,SAAS,EAAE;AACTX,MAAAA,KAAK,EAAE,UADE;AAETV,MAAAA,WAAW,EAAE,uDAFJ;AAGTY,MAAAA,QAAQ,EAAElB,UAAU,CAAC4B,OAHZ;AAITR,MAAAA,QAAQ,EAAEnB,UAAU,CAAC4B,OAJZ;AAKTP,MAAAA,QAAQ,EAAE,IALD;AAMTC,MAAAA,QAAQ,EAAE,KAND;AAOTC,MAAAA,YAAY,EAAE,IAPL;AAQTC,MAAAA,KAAK,EAAEvB,MAAM,CAACwB;AARL,KAZN;AAsBLI,IAAAA,gBAAgB,EAAE;AAChBd,MAAAA,KAAK,EAAE,mBADS;AAEhBV,MAAAA,WAAW,EACT,sEAHc;AAIhBY,MAAAA,QAAQ,EAAElB,UAAU,CAAC4B,OAJL;AAKhBR,MAAAA,QAAQ,EAAEnB,UAAU,CAAC4B,OALL;AAMhBP,MAAAA,QAAQ,EAAE,IANM;AAOhBC,MAAAA,QAAQ,EAAE,KAPM;AAQhBC,MAAAA,YAAY,EAAE,IARE;AAShBC,MAAAA,KAAK,EAAEvB,MAAM,CAACwB;AATE,KAtBb;AAiCLK,IAAAA,KAAK,EAAE;AACLf,MAAAA,KAAK,EAAE,OADF;AAELV,MAAAA,WAAW,EAAE,oDAFR;AAGLY,MAAAA,QAAQ,EAAElB,UAAU,CAAC+B,KAHhB;AAILX,MAAAA,QAAQ,EAAEnB,UAAU,CAAC+B,KAJhB;AAKLV,MAAAA,QAAQ,EAAE,IALL;AAMLC,MAAAA,QAAQ,EAAE,KANL;AAOLC,MAAAA,YAAY,EAAE,IAPT;AAQLC,MAAAA,KAAK,EAAEvB,MAAM,CAACwB;AART;AAjCF;AAVgB,CAAlB","sourcesContent":["import {\n COMPONENT_TYPES,\n FORM_TYPES,\n PROP_TYPES,\n GROUPS,\n} from \"@draftbit/types\";\n\nexport const SEED_DATA = {\n name: \"Activity Indicator\",\n tag: \"ActivityIndicator\",\n description: \"Displays a circular loading indicator.\",\n doc_link:\n \"https://docs.expo.io/versions/latest/react-native/activityindicator/\",\n code_link:\n \"https://github.com/expo/expo/blob/master/ios/versioned-react-native/ABI32_0_0/Libraries/Components/ActivityIndicator/ActivityIndicator.js\",\n category: COMPONENT_TYPES.input,\n layout: { width: 36, height: 36 },\n props: {\n size: {\n label: \"Size\",\n description: \"The size of the loading indicator (Default: small)\",\n options: [\"small\", \"large\"],\n formType: FORM_TYPES.flatArray,\n propType: PROP_TYPES.STRING,\n editable: true,\n required: false,\n defaultValue: \"small\",\n group: GROUPS.basic,\n },\n animating: {\n label: \"Spinning\",\n description: \"Whether to show the loading indicator (Default: true)\",\n formType: FORM_TYPES.boolean,\n propType: PROP_TYPES.BOOLEAN,\n editable: true,\n required: false,\n defaultValue: true,\n group: GROUPS.basic,\n },\n hidesWhenStopped: {\n label: \"Hide When Stopped\",\n description:\n \"Whether the indicator should hide when not animating (Default: true)\",\n formType: FORM_TYPES.boolean,\n propType: PROP_TYPES.BOOLEAN,\n editable: true,\n required: false,\n defaultValue: true,\n group: GROUPS.basic,\n },\n color: {\n label: \"Color\",\n description: \"The color of the loading indicator (Default: gray)\",\n formType: FORM_TYPES.color,\n propType: PROP_TYPES.THEME,\n editable: true,\n required: false,\n defaultValue: null,\n group: GROUPS.basic,\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 | number;
|
|
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",
|
|
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": "a5f640cbda7e8c23ac09e65e6ea262f0c49b3ed9"
|
|
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,44 @@ import type { IconSlot } from "../../interfaces/Icon";
|
|
|
12
12
|
import type { Theme } from "../../styles/DefaultTheme";
|
|
13
13
|
import { extractStyles } from "../../utilities";
|
|
14
14
|
|
|
15
|
-
type
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
15
|
+
type AccordionGroupProps = {
|
|
16
|
+
label?: string;
|
|
17
|
+
expanded?: boolean;
|
|
18
|
+
openColor?: string;
|
|
19
|
+
closedColor?: string;
|
|
20
|
+
caretColor?: string;
|
|
21
|
+
caretSize?: number;
|
|
19
22
|
icon?: string;
|
|
20
|
-
iconSize
|
|
23
|
+
iconSize?: number;
|
|
21
24
|
style?: StyleProp<TextStyle>;
|
|
22
|
-
children
|
|
23
|
-
label: string;
|
|
24
|
-
expanded?: boolean;
|
|
25
|
+
children?: React.ReactNode;
|
|
25
26
|
theme: Theme;
|
|
26
27
|
} & IconSlot;
|
|
27
28
|
|
|
28
29
|
const AccordionGroup = ({
|
|
29
|
-
|
|
30
|
+
label,
|
|
31
|
+
expanded: expandedProp = false,
|
|
30
32
|
openColor,
|
|
31
33
|
closedColor,
|
|
32
|
-
caretColor,
|
|
34
|
+
caretColor: caretColorProp,
|
|
35
|
+
caretSize = 24,
|
|
33
36
|
icon,
|
|
34
37
|
iconSize = 24,
|
|
35
38
|
style,
|
|
36
|
-
label,
|
|
37
39
|
children,
|
|
38
|
-
expanded: expandedProp,
|
|
39
40
|
theme,
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
);
|
|
44
|
-
|
|
45
|
-
const handlePressAction = () => {
|
|
46
|
-
setExpanded(!expanded);
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
const expandedInternal = expandedProp !== undefined ? expandedProp : expanded;
|
|
50
|
-
|
|
41
|
+
Icon,
|
|
42
|
+
}: AccordionGroupProps) => {
|
|
43
|
+
const [expanded, setExpanded] = React.useState<boolean>(expandedProp);
|
|
44
|
+
const { textStyles, viewStyles } = extractStyles(style);
|
|
51
45
|
const expandedColor = openColor || theme.colors.primary;
|
|
52
46
|
const collapsedColor = closedColor || theme.colors.primary;
|
|
53
|
-
|
|
54
47
|
const labelColor = expanded ? expandedColor : collapsedColor;
|
|
48
|
+
const caretColor = caretColorProp || labelColor;
|
|
55
49
|
|
|
56
|
-
const
|
|
50
|
+
const handlePressAction = () => {
|
|
51
|
+
setExpanded(!expanded);
|
|
52
|
+
};
|
|
57
53
|
|
|
58
54
|
return (
|
|
59
55
|
<>
|
|
@@ -90,10 +86,10 @@ const AccordionGroup = ({
|
|
|
90
86
|
: "MaterialIcons/keyboard-arrow-down"
|
|
91
87
|
}
|
|
92
88
|
color={caretColor}
|
|
93
|
-
size={
|
|
89
|
+
size={caretSize}
|
|
94
90
|
/>
|
|
95
91
|
</Pressable>
|
|
96
|
-
{
|
|
92
|
+
{expanded ? children : null}
|
|
97
93
|
</>
|
|
98
94
|
);
|
|
99
95
|
};
|
|
@@ -3,15 +3,19 @@ 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
|
|
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
|
-
|
|
9
|
+
if (value != null) {
|
|
10
|
+
const realValue = getValueForRadioButton(value);
|
|
11
|
+
setInternalValue(realValue);
|
|
12
|
+
}
|
|
11
13
|
}, [value]);
|
|
12
14
|
React.useEffect(() => {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
+
if (defaultValue != null) {
|
|
16
|
+
const realDefaultValue = getValueForRadioButton(defaultValue);
|
|
17
|
+
setInternalValue(realDefaultValue);
|
|
18
|
+
}
|
|
15
19
|
}, [defaultValue]);
|
|
16
20
|
const handleValueChange = (newValue) => {
|
|
17
21
|
const realNewValue = getValueForRadioButton(newValue);
|
|
@@ -30,7 +34,7 @@ const RadioButtonGroup = ({ direction = Direction.Vertical, value = "", onValueC
|
|
|
30
34
|
}
|
|
31
35
|
return (React.createElement(View, { style: [{ minHeight: 40 }, style], ...rest },
|
|
32
36
|
React.createElement(Provider, { value: {
|
|
33
|
-
value: internalValue
|
|
37
|
+
value: internalValue,
|
|
34
38
|
onValueChange: handleValueChange,
|
|
35
39
|
direction,
|
|
36
40
|
} },
|
|
@@ -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 | number;
|
|
10
10
|
onValueChange?: (value: string) => void;
|
|
11
11
|
defaultValue?: string | number;
|
|
12
12
|
theme: Theme;
|
|
@@ -19,23 +19,27 @@ 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("");
|
|
28
28
|
|
|
29
29
|
React.useEffect(() => {
|
|
30
|
-
|
|
30
|
+
if (value != null) {
|
|
31
|
+
const realValue = getValueForRadioButton(value);
|
|
31
32
|
|
|
32
|
-
|
|
33
|
+
setInternalValue(realValue);
|
|
34
|
+
}
|
|
33
35
|
}, [value]);
|
|
34
36
|
|
|
35
37
|
React.useEffect(() => {
|
|
36
|
-
|
|
38
|
+
if (defaultValue != null) {
|
|
39
|
+
const realDefaultValue = getValueForRadioButton(defaultValue);
|
|
37
40
|
|
|
38
|
-
|
|
41
|
+
setInternalValue(realDefaultValue);
|
|
42
|
+
}
|
|
39
43
|
}, [defaultValue]);
|
|
40
44
|
|
|
41
45
|
const handleValueChange = (newValue: string | number) => {
|
|
@@ -61,7 +65,7 @@ const RadioButtonGroup: React.FC<RadioButtonGroupProps> = ({
|
|
|
61
65
|
<View style={[{ minHeight: 40 }, style]} {...rest}>
|
|
62
66
|
<Provider
|
|
63
67
|
value={{
|
|
64
|
-
value: internalValue
|
|
68
|
+
value: internalValue,
|
|
65
69
|
onValueChange: handleValueChange,
|
|
66
70
|
direction,
|
|
67
71
|
}}
|
|
@@ -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
|
};
|