@draftbit/core 43.3.4-f1cc30.3 → 43.4.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 +14 -26
- package/lib/commonjs/components/Accordion/AccordionGroup.js.map +1 -1
- package/lib/commonjs/components/FAB.js +6 -2
- package/lib/commonjs/components/FAB.js.map +1 -1
- package/lib/commonjs/components/Swiper/Swiper.js +13 -9
- package/lib/commonjs/components/Swiper/Swiper.js.map +1 -1
- package/lib/commonjs/mappings/{AccordionGroup.js → Accordion.js} +9 -2
- package/lib/commonjs/mappings/Accordion.js.map +1 -0
- package/lib/commonjs/mappings/AccordionItem.js +1 -1
- package/lib/commonjs/mappings/AccordionItem.js.map +1 -1
- package/lib/module/components/Accordion/AccordionGroup.js +13 -26
- package/lib/module/components/Accordion/AccordionGroup.js.map +1 -1
- package/lib/module/components/FAB.js +6 -2
- package/lib/module/components/FAB.js.map +1 -1
- package/lib/module/components/Swiper/Swiper.js +13 -9
- package/lib/module/components/Swiper/Swiper.js.map +1 -1
- package/lib/module/mappings/{AccordionGroup.js → Accordion.js} +9 -2
- package/lib/module/mappings/Accordion.js.map +1 -0
- package/lib/module/mappings/AccordionItem.js +1 -1
- package/lib/module/mappings/AccordionItem.js.map +1 -1
- package/lib/module/mappings/Picker.js.map +1 -1
- package/lib/module/mappings/ScrollView.js.map +1 -1
- package/lib/typescript/src/components/Swiper/Swiper.d.ts +2 -2
- package/lib/typescript/src/mappings/{AccordionGroup.d.ts → Accordion.d.ts} +7 -0
- package/package.json +3 -3
- package/src/components/Accordion/AccordionGroup.js +16 -33
- package/src/components/Accordion/AccordionGroup.tsx +28 -56
- package/src/components/FAB.js +1 -1
- package/src/components/FAB.tsx +6 -2
- package/src/components/Swiper/Swiper.js +7 -3
- package/src/components/Swiper/Swiper.tsx +10 -6
- package/src/mappings/{AccordionGroup.js → Accordion.js} +8 -1
- package/src/mappings/{AccordionGroup.ts → Accordion.ts} +8 -1
- package/src/mappings/AccordionItem.js +1 -1
- package/src/mappings/AccordionItem.ts +1 -1
- package/lib/commonjs/mappings/AccordionGroup.js.map +0 -1
- package/lib/module/mappings/AccordionGroup.js.map +0 -1
|
@@ -13,6 +13,8 @@ var _Text = _interopRequireDefault(require("../Text"));
|
|
|
13
13
|
|
|
14
14
|
var _theming = require("../../theming");
|
|
15
15
|
|
|
16
|
+
var _utilities = require("../../utilities");
|
|
17
|
+
|
|
16
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
19
|
|
|
18
20
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
@@ -36,48 +38,37 @@ const AccordionGroup = _ref => {
|
|
|
36
38
|
const [expanded, setExpanded] = React.useState(expandedProp || false);
|
|
37
39
|
|
|
38
40
|
const handlePressAction = () => {
|
|
39
|
-
|
|
40
|
-
setExpanded(!expanded);
|
|
41
|
-
}
|
|
41
|
+
setExpanded(!expanded);
|
|
42
42
|
};
|
|
43
43
|
|
|
44
44
|
const expandedInternal = expandedProp !== undefined ? expandedProp : expanded;
|
|
45
45
|
const expandedColor = openColor || theme.colors.primary;
|
|
46
46
|
const collapsedColor = closedColor || theme.colors.primary;
|
|
47
47
|
const labelColor = expanded ? expandedColor : collapsedColor;
|
|
48
|
+
const {
|
|
49
|
+
textStyles,
|
|
50
|
+
viewStyles
|
|
51
|
+
} = (0, _utilities.extractStyles)(style);
|
|
48
52
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_reactNative.Pressable, {
|
|
49
|
-
style: [
|
|
53
|
+
style: [styles.row, viewStyles],
|
|
50
54
|
onPress: handlePressAction,
|
|
51
55
|
accessibilityRole: "button"
|
|
52
|
-
}, /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
53
|
-
style: styles.row
|
|
54
56
|
}, icon ? /*#__PURE__*/React.createElement(Icon, {
|
|
55
57
|
name: icon,
|
|
56
58
|
size: iconSize,
|
|
57
|
-
color: labelColor
|
|
58
|
-
style: styles.icon
|
|
59
|
+
color: labelColor
|
|
59
60
|
}) : null, /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
60
|
-
style:
|
|
61
|
+
style: styles.content
|
|
61
62
|
}, /*#__PURE__*/React.createElement(_Text.default, {
|
|
62
63
|
selectable: false,
|
|
63
|
-
style: [
|
|
64
|
+
style: [{
|
|
64
65
|
color: labelColor
|
|
65
|
-
},
|
|
66
|
-
}, label)), /*#__PURE__*/React.createElement(
|
|
67
|
-
style: [styles.item]
|
|
68
|
-
}, /*#__PURE__*/React.createElement(Icon, {
|
|
66
|
+
}, textStyles]
|
|
67
|
+
}, label)), /*#__PURE__*/React.createElement(Icon, {
|
|
69
68
|
name: expanded ? "MaterialIcons/keyboard-arrow-up" : "MaterialIcons/keyboard-arrow-down",
|
|
70
69
|
color: caretColor,
|
|
71
70
|
size: 24
|
|
72
|
-
}))
|
|
73
|
-
if ( /*#__PURE__*/React.isValidElement(child) && !child.props.left && !child.props.right) {
|
|
74
|
-
return /*#__PURE__*/React.cloneElement(child, {
|
|
75
|
-
style: child.props.style
|
|
76
|
-
});
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
return child;
|
|
80
|
-
}) : null);
|
|
71
|
+
})), expandedInternal ? children : null);
|
|
81
72
|
};
|
|
82
73
|
|
|
83
74
|
const styles = _reactNative.StyleSheet.create({
|
|
@@ -88,9 +79,6 @@ const styles = _reactNative.StyleSheet.create({
|
|
|
88
79
|
label: {
|
|
89
80
|
fontSize: 16
|
|
90
81
|
},
|
|
91
|
-
item: {
|
|
92
|
-
margin: 8
|
|
93
|
-
},
|
|
94
82
|
content: {
|
|
95
83
|
flex: 1,
|
|
96
84
|
justifyContent: "center"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["AccordionGroup.tsx"],"names":["AccordionGroup","Icon","openColor","closedColor","caretColor","icon","iconSize","style","label","children","expanded","expandedProp","theme","setExpanded","React","useState","handlePressAction","
|
|
1
|
+
{"version":3,"sources":["AccordionGroup.tsx"],"names":["AccordionGroup","Icon","openColor","closedColor","caretColor","icon","iconSize","style","label","children","expanded","expandedProp","theme","setExpanded","React","useState","handlePressAction","expandedInternal","undefined","expandedColor","colors","primary","collapsedColor","labelColor","textStyles","viewStyles","styles","row","content","color","StyleSheet","create","flexDirection","alignItems","fontSize","flex","justifyContent","marginLeft"],"mappings":";;;;;;;AAAA;;AACA;;AAOA;;AACA;;AAGA;;;;;;;;AAeA,MAAMA,cAAc,GAAG,QAYV;AAAA,MAZW;AACtBC,IAAAA,IADsB;AAEtBC,IAAAA,SAFsB;AAGtBC,IAAAA,WAHsB;AAItBC,IAAAA,UAJsB;AAKtBC,IAAAA,IALsB;AAMtBC,IAAAA,QAAQ,GAAG,EANW;AAOtBC,IAAAA,KAPsB;AAQtBC,IAAAA,KARsB;AAStBC,IAAAA,QATsB;AAUtBC,IAAAA,QAAQ,EAAEC,YAVY;AAWtBC,IAAAA;AAXsB,GAYX;AACX,QAAM,CAACF,QAAD,EAAWG,WAAX,IAA0BC,KAAK,CAACC,QAAN,CAC9BJ,YAAY,IAAI,KADc,CAAhC;;AAIA,QAAMK,iBAAiB,GAAG,MAAM;AAC9BH,IAAAA,WAAW,CAAC,CAACH,QAAF,CAAX;AACD,GAFD;;AAIA,QAAMO,gBAAgB,GAAGN,YAAY,KAAKO,SAAjB,GAA6BP,YAA7B,GAA4CD,QAArE;AAEA,QAAMS,aAAa,GAAGjB,SAAS,IAAIU,KAAK,CAACQ,MAAN,CAAaC,OAAhD;AACA,QAAMC,cAAc,GAAGnB,WAAW,IAAIS,KAAK,CAACQ,MAAN,CAAaC,OAAnD;AAEA,QAAME,UAAU,GAAGb,QAAQ,GAAGS,aAAH,GAAmBG,cAA9C;AAEA,QAAM;AAAEE,IAAAA,UAAF;AAAcC,IAAAA;AAAd,MAA6B,8BAAclB,KAAd,CAAnC;AAEA,sBACE,uDACE,oBAAC,sBAAD;AACE,IAAA,KAAK,EAAE,CAACmB,MAAM,CAACC,GAAR,EAAaF,UAAb,CADT;AAEE,IAAA,OAAO,EAAET,iBAFX;AAGE,IAAA,iBAAiB,EAAC;AAHpB,KAKGX,IAAI,gBAAG,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAEA,IAAZ;AAAkB,IAAA,IAAI,EAAEC,QAAxB;AAAkC,IAAA,KAAK,EAAEiB;AAAzC,IAAH,GAA6D,IALpE,eAME,oBAAC,iBAAD;AAAM,IAAA,KAAK,EAAEG,MAAM,CAACE;AAApB,kBACE,oBAAC,aAAD;AACE,IAAA,UAAU,EAAE,KADd;AAEE,IAAA,KAAK,EAAE,CACL;AACEC,MAAAA,KAAK,EAAEN;AADT,KADK,EAILC,UAJK;AAFT,KASGhB,KATH,CADF,CANF,eAmBE,oBAAC,IAAD;AACE,IAAA,IAAI,EACFE,QAAQ,GACJ,iCADI,GAEJ,mCAJR;AAME,IAAA,KAAK,EAAEN,UANT;AAOE,IAAA,IAAI,EAAE;AAPR,IAnBF,CADF,EA8BGa,gBAAgB,GAAGR,QAAH,GAAc,IA9BjC,CADF;AAkCD,CAhED;;AAkEA,MAAMiB,MAAM,GAAGI,wBAAWC,MAAX,CAAkB;AAC/BJ,EAAAA,GAAG,EAAE;AACHK,IAAAA,aAAa,EAAE,KADZ;AAEHC,IAAAA,UAAU,EAAE;AAFT,GAD0B;AAK/BzB,EAAAA,KAAK,EAAE;AACL0B,IAAAA,QAAQ,EAAE;AADL,GALwB;AAQ/BN,EAAAA,OAAO,EAAE;AACPO,IAAAA,IAAI,EAAE,CADC;AAEPC,IAAAA,cAAc,EAAE;AAFT,GARsB;AAY/B/B,EAAAA,IAAI,EAAE;AACJgC,IAAAA,UAAU,EAAE;AADR;AAZyB,CAAlB,CAAf;;eAiBe,wBAAUrC,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 Props = {\n openColor: string;\n closedColor: string;\n caretColor: string;\n icon?: string;\n iconSize: number;\n style?: StyleProp<TextStyle>;\n children: React.ReactNode;\n label: string;\n expanded?: boolean;\n theme: Theme;\n} & IconSlot;\n\nconst AccordionGroup = ({\n Icon,\n openColor,\n closedColor,\n caretColor,\n icon,\n iconSize = 24,\n style,\n label,\n children,\n expanded: expandedProp,\n theme,\n}: Props) => {\n const [expanded, setExpanded] = React.useState<boolean>(\n expandedProp || false\n );\n\n const handlePressAction = () => {\n setExpanded(!expanded);\n };\n\n const expandedInternal = expandedProp !== undefined ? expandedProp : expanded;\n\n const expandedColor = openColor || theme.colors.primary;\n const collapsedColor = closedColor || theme.colors.primary;\n\n const labelColor = expanded ? expandedColor : collapsedColor;\n\n const { textStyles, viewStyles } = extractStyles(style);\n\n return (\n <>\n <Pressable\n style={[styles.row, viewStyles]}\n onPress={handlePressAction}\n accessibilityRole=\"button\"\n >\n {icon ? <Icon name={icon} size={iconSize} color={labelColor} /> : null}\n <View style={styles.content}>\n <Text\n selectable={false}\n style={[\n {\n color: labelColor,\n },\n textStyles,\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={24}\n />\n </Pressable>\n {expandedInternal ? children : null}\n </>\n );\n};\n\nconst styles = StyleSheet.create({\n row: {\n flexDirection: \"row\",\n alignItems: \"center\",\n },\n label: {\n fontSize: 16,\n },\n content: {\n flex: 1,\n justifyContent: \"center\",\n },\n icon: {\n marginLeft: 8,\n },\n});\n\nexport default withTheme(AccordionGroup);\n"]}
|
|
@@ -60,11 +60,15 @@ const FAB = _ref => {
|
|
|
60
60
|
}];
|
|
61
61
|
}
|
|
62
62
|
}, props), /*#__PURE__*/React.createElement(_reactNative.View, null, loading ? /*#__PURE__*/React.createElement(_reactNative.ActivityIndicator, {
|
|
63
|
-
|
|
63
|
+
style: size > 50 ? {
|
|
64
|
+
marginTop: 2,
|
|
65
|
+
marginLeft: 2
|
|
66
|
+
} : undefined,
|
|
67
|
+
size: size <= 50 ? "small" : "large",
|
|
64
68
|
color: color
|
|
65
69
|
}) : /*#__PURE__*/React.createElement(Icon, {
|
|
66
70
|
name: iconName,
|
|
67
|
-
size:
|
|
71
|
+
size: size,
|
|
68
72
|
color: color
|
|
69
73
|
}))));
|
|
70
74
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["FAB.tsx"],"names":["FAB","onPress","disabled","loading","iconName","style","theme","iconColor","bgColor","size","Icon","props","backgroundColor","colors","primary","color","width","height","borderRadius","overflow","radius","pressed","styles","button","opacity","StyleSheet","create","justifyContent","alignItems","Platform","select","web","cursor","userSelect"],"mappings":";;;;;;;AAAA;;AACA;;AAUA;;;;;;;;AAiBA,MAAMA,GAAoB,GAAG,QAYvB;AAAA,MAZwB;AAC5BC,IAAAA,OAD4B;AAE5BC,IAAAA,QAF4B;AAG5BC,IAAAA,OAH4B;AAI5BC,IAAAA,QAAQ,GAAG,mBAJiB;AAK5BC,IAAAA,KAL4B;AAM5BC,IAAAA,KAN4B;AAO5BC,IAAAA,SAP4B;AAQ5BC,IAAAA,OAR4B;AAS5BC,IAAAA,IAAI,GAAG,EATqB;AAU5BC,IAAAA,IAV4B;AAW5B,OAAGC;AAXyB,GAYxB;AACJ,QAAMC,eAAe,GAAGJ,OAAO,IAAIF,KAAK,CAACO,MAAN,CAAaC,OAAhD;AACA,QAAMC,KAAK,GAAGR,SAAS,IAAI,MAA3B;AAEA,sBACE,oBAAC,iBAAD;AACE,IAAA,KAAK,EAAE,CACL;AACES,MAAAA,KAAK,EAAEP,IADT;AAEEQ,MAAAA,MAAM,EAAER,IAFV;AAGES,MAAAA,YAAY,EAAET,IAAI,GAAG,CAHvB;AAIEU,MAAAA,QAAQ,EAAE;AAJZ,KADK,EAOLd,KAPK;AADT,kBAWE,oBAAC,sBAAD;AACE,IAAA,OAAO,EAAEJ,OADX;AAEE,IAAA,QAAQ,EAAEE,OAAO,IAAID,QAFvB;AAGE,IAAA,cAAc,EAAE;AACda,MAAAA,KAAK,EAAE,MADO;AAEdK,MAAAA,MAAM,EAAEX,IAAI,GAAG;AAFD,KAHlB;AAOE,IAAA,KAAK,EAAE,SAAiB;AAAA,UAAhB;AAAEY,QAAAA;AAAF,OAAgB;AACtB,aAAO,CACLC,MAAM,CAACC,MADF,EAEL;AACEC,QAAAA,OAAO,EAAEH,OAAO,IAAInB,QAAX,GAAsB,IAAtB,GAA6B,CADxC;AAEEc,QAAAA,KAAK,EAAEP,IAFT;AAGEQ,QAAAA,MAAM,EAAER,IAHV;AAIES,QAAAA,YAAY,EAAET,IAAI,GAAG,CAJvB;AAKEG,QAAAA;AALF,OAFK,CAAP;AAUD;AAlBH,KAmBMD,KAnBN,gBAqBE,oBAAC,iBAAD,QACGR,OAAO,gBACN,oBAAC,8BAAD;
|
|
1
|
+
{"version":3,"sources":["FAB.tsx"],"names":["FAB","onPress","disabled","loading","iconName","style","theme","iconColor","bgColor","size","Icon","props","backgroundColor","colors","primary","color","width","height","borderRadius","overflow","radius","pressed","styles","button","opacity","marginTop","marginLeft","undefined","StyleSheet","create","justifyContent","alignItems","Platform","select","web","cursor","userSelect"],"mappings":";;;;;;;AAAA;;AACA;;AAUA;;;;;;;;AAiBA,MAAMA,GAAoB,GAAG,QAYvB;AAAA,MAZwB;AAC5BC,IAAAA,OAD4B;AAE5BC,IAAAA,QAF4B;AAG5BC,IAAAA,OAH4B;AAI5BC,IAAAA,QAAQ,GAAG,mBAJiB;AAK5BC,IAAAA,KAL4B;AAM5BC,IAAAA,KAN4B;AAO5BC,IAAAA,SAP4B;AAQ5BC,IAAAA,OAR4B;AAS5BC,IAAAA,IAAI,GAAG,EATqB;AAU5BC,IAAAA,IAV4B;AAW5B,OAAGC;AAXyB,GAYxB;AACJ,QAAMC,eAAe,GAAGJ,OAAO,IAAIF,KAAK,CAACO,MAAN,CAAaC,OAAhD;AACA,QAAMC,KAAK,GAAGR,SAAS,IAAI,MAA3B;AAEA,sBACE,oBAAC,iBAAD;AACE,IAAA,KAAK,EAAE,CACL;AACES,MAAAA,KAAK,EAAEP,IADT;AAEEQ,MAAAA,MAAM,EAAER,IAFV;AAGES,MAAAA,YAAY,EAAET,IAAI,GAAG,CAHvB;AAIEU,MAAAA,QAAQ,EAAE;AAJZ,KADK,EAOLd,KAPK;AADT,kBAWE,oBAAC,sBAAD;AACE,IAAA,OAAO,EAAEJ,OADX;AAEE,IAAA,QAAQ,EAAEE,OAAO,IAAID,QAFvB;AAGE,IAAA,cAAc,EAAE;AACda,MAAAA,KAAK,EAAE,MADO;AAEdK,MAAAA,MAAM,EAAEX,IAAI,GAAG;AAFD,KAHlB;AAOE,IAAA,KAAK,EAAE,SAAiB;AAAA,UAAhB;AAAEY,QAAAA;AAAF,OAAgB;AACtB,aAAO,CACLC,MAAM,CAACC,MADF,EAEL;AACEC,QAAAA,OAAO,EAAEH,OAAO,IAAInB,QAAX,GAAsB,IAAtB,GAA6B,CADxC;AAEEc,QAAAA,KAAK,EAAEP,IAFT;AAGEQ,QAAAA,MAAM,EAAER,IAHV;AAIES,QAAAA,YAAY,EAAET,IAAI,GAAG,CAJvB;AAKEG,QAAAA;AALF,OAFK,CAAP;AAUD;AAlBH,KAmBMD,KAnBN,gBAqBE,oBAAC,iBAAD,QACGR,OAAO,gBACN,oBAAC,8BAAD;AACE,IAAA,KAAK,EAAEM,IAAI,GAAG,EAAP,GAAY;AAAEgB,MAAAA,SAAS,EAAE,CAAb;AAAgBC,MAAAA,UAAU,EAAE;AAA5B,KAAZ,GAA8CC,SADvD;AAEE,IAAA,IAAI,EAAElB,IAAI,IAAI,EAAR,GAAa,OAAb,GAAuB,OAF/B;AAGE,IAAA,KAAK,EAAEM;AAHT,IADM,gBAON,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAEX,QAAZ;AAAsB,IAAA,IAAI,EAAEK,IAA5B;AAAkC,IAAA,KAAK,EAAEM;AAAzC,IARJ,CArBF,CAXF,CADF;AA+CD,CA/DD;;AAiEA,MAAMO,MAAM,GAAGM,wBAAWC,MAAX,CAAkB;AAC/BN,EAAAA,MAAM,EAAE;AACNX,IAAAA,eAAe,EAAE,SADX;AAENkB,IAAAA,cAAc,EAAE,QAFV;AAGNC,IAAAA,UAAU,EAAE,QAHN;AAIN,OAAGC,sBAASC,MAAT,CAAgB;AACjBC,MAAAA,GAAG,EAAE;AACHC,QAAAA,MAAM,EAAE,SADL;AAEHC,QAAAA,UAAU,EAAE;AAFT;AADY,KAAhB;AAJG;AADuB,CAAlB,CAAf;;eAce,wBAAUpC,GAAV,C","sourcesContent":["import * as React from \"react\";\nimport {\n View,\n StyleSheet,\n Pressable,\n ActivityIndicator,\n StyleProp,\n ViewStyle,\n PressableProps,\n Platform,\n} from \"react-native\";\nimport { withTheme } from \"../theming\";\nimport type { Theme } from \"../styles/DefaultTheme\";\nimport type { IconSlot } from \"../interfaces/Icon\";\n\ntype Props = {\n disabled?: boolean;\n loading?: boolean;\n size?: number;\n bgColor?: string;\n iconColor?: string;\n iconName?: string;\n onPress: () => void;\n theme: Theme;\n style?: StyleProp<ViewStyle>;\n} & PressableProps &\n IconSlot;\n\nconst FAB: React.FC<Props> = ({\n onPress,\n disabled,\n loading,\n iconName = \"MaterialIcons/add\",\n style,\n theme,\n iconColor,\n bgColor,\n size = 50,\n Icon,\n ...props\n}) => {\n const backgroundColor = bgColor || theme.colors.primary;\n const color = iconColor || \"#FFF\";\n\n return (\n <View\n style={[\n {\n width: size,\n height: size,\n borderRadius: size / 2,\n overflow: \"hidden\",\n },\n style,\n ]}\n >\n <Pressable\n onPress={onPress}\n disabled={loading || disabled}\n android_ripple={{\n color: \"#333\",\n radius: size / 4,\n }}\n style={({ pressed }) => {\n return [\n styles.button,\n {\n opacity: pressed || disabled ? 0.75 : 1,\n width: size,\n height: size,\n borderRadius: size / 2,\n backgroundColor,\n },\n ];\n }}\n {...props}\n >\n <View>\n {loading ? (\n <ActivityIndicator\n style={size > 50 ? { marginTop: 2, marginLeft: 2 } : undefined}\n size={size <= 50 ? \"small\" : \"large\"}\n color={color}\n />\n ) : (\n <Icon name={iconName} size={size} color={color} />\n )}\n </View>\n </Pressable>\n </View>\n );\n};\n\nconst styles = StyleSheet.create({\n button: {\n backgroundColor: \"#5a45ff\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...Platform.select({\n web: {\n cursor: \"pointer\",\n userSelect: \"none\",\n },\n }),\n },\n});\n\nexport default withTheme(FAB);\n"]}
|
|
@@ -21,8 +21,8 @@ const Swiper = _ref => {
|
|
|
21
21
|
from = 0,
|
|
22
22
|
prevTitle = "",
|
|
23
23
|
nextTitle = "",
|
|
24
|
-
prevTitleColor
|
|
25
|
-
nextTitleColor
|
|
24
|
+
prevTitleColor,
|
|
25
|
+
nextTitleColor,
|
|
26
26
|
dotsTouchable = true,
|
|
27
27
|
dotColor,
|
|
28
28
|
dotActiveColor,
|
|
@@ -46,14 +46,18 @@ const Swiper = _ref => {
|
|
|
46
46
|
color: nextTitleColor
|
|
47
47
|
},
|
|
48
48
|
dotsTouchable,
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
49
|
+
...(dotColor ? {
|
|
50
|
+
dotProps: {
|
|
51
|
+
badgeStyle: {
|
|
52
|
+
backgroundColor: dotColor
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
} : {}),
|
|
56
|
+
...(dotActiveColor ? {
|
|
57
|
+
dotActiveStyle: {
|
|
58
|
+
backgroundColor: dotActiveColor
|
|
55
59
|
}
|
|
56
|
-
}
|
|
60
|
+
} : {})
|
|
57
61
|
}
|
|
58
62
|
}, children));
|
|
59
63
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Swiper.tsx"],"names":["Swiper","vertical","loop","timeout","from","prevTitle","nextTitle","prevTitleColor","nextTitleColor","dotsTouchable","dotColor","dotActiveColor","children","style","prevTitleStyle","color","nextTitleStyle","
|
|
1
|
+
{"version":3,"sources":["Swiper.tsx"],"names":["Swiper","vertical","loop","timeout","from","prevTitle","nextTitle","prevTitleColor","nextTitleColor","dotsTouchable","dotColor","dotActiveColor","children","style","prevTitleStyle","color","nextTitleStyle","dotProps","badgeStyle","backgroundColor","dotActiveStyle"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAkBA,MAAMA,MAAM,GAAG;AAAA,MAAC;AACdC,IAAAA,QAAQ,GAAG,KADG;AAEdC,IAAAA,IAAI,GAAG,KAFO;AAGdC,IAAAA,OAAO,GAAG,CAHI;AAIdC,IAAAA,IAAI,GAAG,CAJO;AAKdC,IAAAA,SAAS,GAAG,EALE;AAMdC,IAAAA,SAAS,GAAG,EANE;AAOdC,IAAAA,cAPc;AAQdC,IAAAA,cARc;AASdC,IAAAA,aAAa,GAAG,IATF;AAUdC,IAAAA,QAVc;AAWdC,IAAAA,cAXc;AAYdC,IAAAA,QAZc;AAadC,IAAAA;AAbc,GAAD;AAAA,sBAeb,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAEA;AAAb,kBACE,6BAAC,6BAAD;AACE,IAAA,IAAI,EAAET,IADR;AAEE,IAAA,IAAI,EAAEF,IAFR;AAGE,IAAA,OAAO,EAAEC,OAHX;AAIE,IAAA,QAAQ,EAAEF,QAJZ;AAKE,IAAA,aAAa,EAAE;AACbI,MAAAA,SADa;AAEbC,MAAAA,SAFa;AAGbQ,MAAAA,cAAc,EAAE;AAAEC,QAAAA,KAAK,EAAER;AAAT,OAHH;AAIbS,MAAAA,cAAc,EAAE;AAAED,QAAAA,KAAK,EAAEP;AAAT,OAJH;AAKbC,MAAAA,aALa;AAMb,UAAIC,QAAQ,GACR;AAAEO,QAAAA,QAAQ,EAAE;AAAEC,UAAAA,UAAU,EAAE;AAAEC,YAAAA,eAAe,EAAET;AAAnB;AAAd;AAAZ,OADQ,GAER,EAFJ,CANa;AASb,UAAIC,cAAc,GACd;AAAES,QAAAA,cAAc,EAAE;AAAED,UAAAA,eAAe,EAAER;AAAnB;AAAlB,OADc,GAEd,EAFJ;AATa;AALjB,KAmBGC,QAnBH,CADF,CAfa;AAAA,CAAf;;eAwCeZ,M","sourcesContent":["import React from \"react\";\nimport { View, StyleProp, ViewStyle } from \"react-native\";\nimport SwiperComponent from \"react-native-web-swiper\";\n\nexport interface SwiperProps {\n vertical?: boolean;\n loop?: boolean;\n from?: number;\n timeout?: number;\n prevTitle?: string;\n nextTitle?: string;\n prevTitleColor?: string;\n nextTitleColor?: string;\n dotsTouchable?: boolean;\n dotColor?: string;\n dotActiveColor?: string;\n children: React.ReactNode;\n style?: StyleProp<ViewStyle>;\n}\n\nconst Swiper = ({\n vertical = false,\n loop = false,\n timeout = 0,\n from = 0,\n prevTitle = \"\",\n nextTitle = \"\",\n prevTitleColor,\n nextTitleColor,\n dotsTouchable = true,\n dotColor,\n dotActiveColor,\n children,\n style,\n}: SwiperProps) => (\n <View style={style}>\n <SwiperComponent\n from={from}\n loop={loop}\n timeout={timeout}\n vertical={vertical}\n controlsProps={{\n prevTitle,\n nextTitle,\n prevTitleStyle: { color: prevTitleColor },\n nextTitleStyle: { color: nextTitleColor },\n dotsTouchable,\n ...(dotColor\n ? { dotProps: { badgeStyle: { backgroundColor: dotColor } } }\n : {}),\n ...(dotActiveColor\n ? { dotActiveStyle: { backgroundColor: dotActiveColor } }\n : {}),\n }}\n >\n {children}\n </SwiperComponent>\n </View>\n);\n\nexport default Swiper;\n"]}
|
|
@@ -8,10 +8,17 @@ exports.SEED_DATA = void 0;
|
|
|
8
8
|
var _types = require("@draftbit/types");
|
|
9
9
|
|
|
10
10
|
const SEED_DATA = {
|
|
11
|
-
name: "Accordion
|
|
11
|
+
name: "Accordion",
|
|
12
12
|
tag: "AccordionGroup",
|
|
13
13
|
description: "An expandable container containing components",
|
|
14
14
|
category: _types.COMPONENT_TYPES.container,
|
|
15
|
+
layout: {
|
|
16
|
+
paddingTop: 8,
|
|
17
|
+
paddingRight: 8,
|
|
18
|
+
paddingBottom: 8,
|
|
19
|
+
paddingLeft: 8,
|
|
20
|
+
fontSize: 16
|
|
21
|
+
},
|
|
15
22
|
props: {
|
|
16
23
|
openColor: (0, _types.createColorProp)({
|
|
17
24
|
label: "Open text color"
|
|
@@ -37,4 +44,4 @@ const SEED_DATA = {
|
|
|
37
44
|
}
|
|
38
45
|
};
|
|
39
46
|
exports.SEED_DATA = SEED_DATA;
|
|
40
|
-
//# sourceMappingURL=
|
|
47
|
+
//# sourceMappingURL=Accordion.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["Accordion.ts"],"names":["SEED_DATA","name","tag","description","category","COMPONENT_TYPES","container","layout","paddingTop","paddingRight","paddingBottom","paddingLeft","fontSize","props","openColor","label","closedColor","caretColor","iconSize","defaultValue","expanded","icon"],"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,SAAS,EAAE,4BAAgB;AACzBC,MAAAA,KAAK,EAAE;AADkB,KAAhB,CADN;AAILC,IAAAA,WAAW,EAAE,4BAAgB;AAC3BD,MAAAA,KAAK,EAAE;AADoB,KAAhB,CAJR;AAOLE,IAAAA,UAAU,EAAE,4BAAgB;AAC1BF,MAAAA,KAAK,EAAE;AADmB,KAAhB,CAPP;AAULG,IAAAA,QAAQ,EAAE,6BAAiB;AACzBH,MAAAA,KAAK,EAAE,WADkB;AAEzBI,MAAAA,YAAY,EAAE;AAFW,KAAjB,CAVL;AAcLJ,IAAAA,KAAK,EAAE,2BAAe;AACpBA,MAAAA,KAAK,EAAE;AADa,KAAf,CAdF;AAiBLK,IAAAA,QAAQ,EAAE,iCAAqB;AAC7BL,MAAAA,KAAK,EAAE,UADsB;AAE7BZ,MAAAA,WAAW,EAAE;AAFgB,KAArB,CAjBL;AAqBLkB,IAAAA,IAAI,EAAE;AArBD;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 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 iconSize: createNumberProp({\n label: \"Icon size\",\n defaultValue: 24,\n }),\n label: createTextProp({\n label: \"Label\",\n }),\n expanded: createStaticBoolProp({\n label: \"Expanded\",\n description: \"Whether the AccordionGroup should be expanded or not\",\n }),\n icon: createIconProp(),\n },\n};\n"]}
|
|
@@ -11,7 +11,7 @@ const SEED_DATA = {
|
|
|
11
11
|
name: "Accordion Item",
|
|
12
12
|
tag: "AccordionItem",
|
|
13
13
|
description: "Item to be used in Accordion",
|
|
14
|
-
category: _types.COMPONENT_TYPES.
|
|
14
|
+
category: _types.COMPONENT_TYPES.deprecated,
|
|
15
15
|
props: {
|
|
16
16
|
icon: (0, _types.createIconProp)(),
|
|
17
17
|
label: (0, _types.createTextProp)({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["AccordionItem.ts"],"names":["SEED_DATA","name","tag","description","category","COMPONENT_TYPES","
|
|
1
|
+
{"version":3,"sources":["AccordionItem.ts"],"names":["SEED_DATA","name","tag","description","category","COMPONENT_TYPES","deprecated","props","icon","label","iconColor"],"mappings":";;;;;;;AAAA;;AAOO,MAAMA,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,gBADiB;AAEvBC,EAAAA,GAAG,EAAE,eAFkB;AAGvBC,EAAAA,WAAW,EAAE,8BAHU;AAIvBC,EAAAA,QAAQ,EAAEC,uBAAgBC,UAJH;AAKvBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,4BADD;AAELC,IAAAA,KAAK,EAAE,2BAAe;AACpBA,MAAAA,KAAK,EAAE;AADa,KAAf,CAFF;AAKLC,IAAAA,SAAS,EAAE,4BAAgB;AACzBD,MAAAA,KAAK,EAAE;AADkB,KAAhB;AALN;AALgB,CAAlB","sourcesContent":["import {\n COMPONENT_TYPES,\n createIconProp,\n createTextProp,\n createColorProp,\n} from \"@draftbit/types\";\n\nexport const SEED_DATA = {\n name: \"Accordion Item\",\n tag: \"AccordionItem\",\n description: \"Item to be used in Accordion\",\n category: COMPONENT_TYPES.deprecated,\n props: {\n icon: createIconProp(),\n label: createTextProp({\n label: \"Item label\",\n }),\n iconColor: createColorProp({\n label: \"Icon color\",\n }),\n },\n};\n"]}
|
|
@@ -2,6 +2,7 @@ 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
6
|
|
|
6
7
|
const AccordionGroup = _ref => {
|
|
7
8
|
let {
|
|
@@ -20,48 +21,37 @@ const AccordionGroup = _ref => {
|
|
|
20
21
|
const [expanded, setExpanded] = React.useState(expandedProp || false);
|
|
21
22
|
|
|
22
23
|
const handlePressAction = () => {
|
|
23
|
-
|
|
24
|
-
setExpanded(!expanded);
|
|
25
|
-
}
|
|
24
|
+
setExpanded(!expanded);
|
|
26
25
|
};
|
|
27
26
|
|
|
28
27
|
const expandedInternal = expandedProp !== undefined ? expandedProp : expanded;
|
|
29
28
|
const expandedColor = openColor || theme.colors.primary;
|
|
30
29
|
const collapsedColor = closedColor || theme.colors.primary;
|
|
31
30
|
const labelColor = expanded ? expandedColor : collapsedColor;
|
|
31
|
+
const {
|
|
32
|
+
textStyles,
|
|
33
|
+
viewStyles
|
|
34
|
+
} = extractStyles(style);
|
|
32
35
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pressable, {
|
|
33
|
-
style: [
|
|
36
|
+
style: [styles.row, viewStyles],
|
|
34
37
|
onPress: handlePressAction,
|
|
35
38
|
accessibilityRole: "button"
|
|
36
|
-
}, /*#__PURE__*/React.createElement(View, {
|
|
37
|
-
style: styles.row
|
|
38
39
|
}, icon ? /*#__PURE__*/React.createElement(Icon, {
|
|
39
40
|
name: icon,
|
|
40
41
|
size: iconSize,
|
|
41
|
-
color: labelColor
|
|
42
|
-
style: styles.icon
|
|
42
|
+
color: labelColor
|
|
43
43
|
}) : null, /*#__PURE__*/React.createElement(View, {
|
|
44
|
-
style:
|
|
44
|
+
style: styles.content
|
|
45
45
|
}, /*#__PURE__*/React.createElement(Text, {
|
|
46
46
|
selectable: false,
|
|
47
|
-
style: [
|
|
47
|
+
style: [{
|
|
48
48
|
color: labelColor
|
|
49
|
-
},
|
|
50
|
-
}, label)), /*#__PURE__*/React.createElement(
|
|
51
|
-
style: [styles.item]
|
|
52
|
-
}, /*#__PURE__*/React.createElement(Icon, {
|
|
49
|
+
}, textStyles]
|
|
50
|
+
}, label)), /*#__PURE__*/React.createElement(Icon, {
|
|
53
51
|
name: expanded ? "MaterialIcons/keyboard-arrow-up" : "MaterialIcons/keyboard-arrow-down",
|
|
54
52
|
color: caretColor,
|
|
55
53
|
size: 24
|
|
56
|
-
}))
|
|
57
|
-
if ( /*#__PURE__*/React.isValidElement(child) && !child.props.left && !child.props.right) {
|
|
58
|
-
return /*#__PURE__*/React.cloneElement(child, {
|
|
59
|
-
style: child.props.style
|
|
60
|
-
});
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
return child;
|
|
64
|
-
}) : null);
|
|
54
|
+
})), expandedInternal ? children : null);
|
|
65
55
|
};
|
|
66
56
|
|
|
67
57
|
const styles = StyleSheet.create({
|
|
@@ -72,9 +62,6 @@ const styles = StyleSheet.create({
|
|
|
72
62
|
label: {
|
|
73
63
|
fontSize: 16
|
|
74
64
|
},
|
|
75
|
-
item: {
|
|
76
|
-
margin: 8
|
|
77
|
-
},
|
|
78
65
|
content: {
|
|
79
66
|
flex: 1,
|
|
80
67
|
justifyContent: "center"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["AccordionGroup.tsx"],"names":["React","View","StyleSheet","Pressable","Text","withTheme","AccordionGroup","Icon","openColor","closedColor","caretColor","icon","iconSize","style","label","children","expanded","expandedProp","theme","setExpanded","useState","handlePressAction","
|
|
1
|
+
{"version":3,"sources":["AccordionGroup.tsx"],"names":["React","View","StyleSheet","Pressable","Text","withTheme","extractStyles","AccordionGroup","Icon","openColor","closedColor","caretColor","icon","iconSize","style","label","children","expanded","expandedProp","theme","setExpanded","useState","handlePressAction","expandedInternal","undefined","expandedColor","colors","primary","collapsedColor","labelColor","textStyles","viewStyles","styles","row","content","color","create","flexDirection","alignItems","fontSize","flex","justifyContent","marginLeft"],"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;;AAeA,MAAMC,cAAc,GAAG,QAYV;AAAA,MAZW;AACtBC,IAAAA,IADsB;AAEtBC,IAAAA,SAFsB;AAGtBC,IAAAA,WAHsB;AAItBC,IAAAA,UAJsB;AAKtBC,IAAAA,IALsB;AAMtBC,IAAAA,QAAQ,GAAG,EANW;AAOtBC,IAAAA,KAPsB;AAQtBC,IAAAA,KARsB;AAStBC,IAAAA,QATsB;AAUtBC,IAAAA,QAAQ,EAAEC,YAVY;AAWtBC,IAAAA;AAXsB,GAYX;AACX,QAAM,CAACF,QAAD,EAAWG,WAAX,IAA0BpB,KAAK,CAACqB,QAAN,CAC9BH,YAAY,IAAI,KADc,CAAhC;;AAIA,QAAMI,iBAAiB,GAAG,MAAM;AAC9BF,IAAAA,WAAW,CAAC,CAACH,QAAF,CAAX;AACD,GAFD;;AAIA,QAAMM,gBAAgB,GAAGL,YAAY,KAAKM,SAAjB,GAA6BN,YAA7B,GAA4CD,QAArE;AAEA,QAAMQ,aAAa,GAAGhB,SAAS,IAAIU,KAAK,CAACO,MAAN,CAAaC,OAAhD;AACA,QAAMC,cAAc,GAAGlB,WAAW,IAAIS,KAAK,CAACO,MAAN,CAAaC,OAAnD;AAEA,QAAME,UAAU,GAAGZ,QAAQ,GAAGQ,aAAH,GAAmBG,cAA9C;AAEA,QAAM;AAAEE,IAAAA,UAAF;AAAcC,IAAAA;AAAd,MAA6BzB,aAAa,CAACQ,KAAD,CAAhD;AAEA,sBACE,uDACE,oBAAC,SAAD;AACE,IAAA,KAAK,EAAE,CAACkB,MAAM,CAACC,GAAR,EAAaF,UAAb,CADT;AAEE,IAAA,OAAO,EAAET,iBAFX;AAGE,IAAA,iBAAiB,EAAC;AAHpB,KAKGV,IAAI,gBAAG,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAEA,IAAZ;AAAkB,IAAA,IAAI,EAAEC,QAAxB;AAAkC,IAAA,KAAK,EAAEgB;AAAzC,IAAH,GAA6D,IALpE,eAME,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEG,MAAM,CAACE;AAApB,kBACE,oBAAC,IAAD;AACE,IAAA,UAAU,EAAE,KADd;AAEE,IAAA,KAAK,EAAE,CACL;AACEC,MAAAA,KAAK,EAAEN;AADT,KADK,EAILC,UAJK;AAFT,KASGf,KATH,CADF,CANF,eAmBE,oBAAC,IAAD;AACE,IAAA,IAAI,EACFE,QAAQ,GACJ,iCADI,GAEJ,mCAJR;AAME,IAAA,KAAK,EAAEN,UANT;AAOE,IAAA,IAAI,EAAE;AAPR,IAnBF,CADF,EA8BGY,gBAAgB,GAAGP,QAAH,GAAc,IA9BjC,CADF;AAkCD,CAhED;;AAkEA,MAAMgB,MAAM,GAAG9B,UAAU,CAACkC,MAAX,CAAkB;AAC/BH,EAAAA,GAAG,EAAE;AACHI,IAAAA,aAAa,EAAE,KADZ;AAEHC,IAAAA,UAAU,EAAE;AAFT,GAD0B;AAK/BvB,EAAAA,KAAK,EAAE;AACLwB,IAAAA,QAAQ,EAAE;AADL,GALwB;AAQ/BL,EAAAA,OAAO,EAAE;AACPM,IAAAA,IAAI,EAAE,CADC;AAEPC,IAAAA,cAAc,EAAE;AAFT,GARsB;AAY/B7B,EAAAA,IAAI,EAAE;AACJ8B,IAAAA,UAAU,EAAE;AADR;AAZyB,CAAlB,CAAf;AAiBA,eAAerC,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 Props = {\n openColor: string;\n closedColor: string;\n caretColor: string;\n icon?: string;\n iconSize: number;\n style?: StyleProp<TextStyle>;\n children: React.ReactNode;\n label: string;\n expanded?: boolean;\n theme: Theme;\n} & IconSlot;\n\nconst AccordionGroup = ({\n Icon,\n openColor,\n closedColor,\n caretColor,\n icon,\n iconSize = 24,\n style,\n label,\n children,\n expanded: expandedProp,\n theme,\n}: Props) => {\n const [expanded, setExpanded] = React.useState<boolean>(\n expandedProp || false\n );\n\n const handlePressAction = () => {\n setExpanded(!expanded);\n };\n\n const expandedInternal = expandedProp !== undefined ? expandedProp : expanded;\n\n const expandedColor = openColor || theme.colors.primary;\n const collapsedColor = closedColor || theme.colors.primary;\n\n const labelColor = expanded ? expandedColor : collapsedColor;\n\n const { textStyles, viewStyles } = extractStyles(style);\n\n return (\n <>\n <Pressable\n style={[styles.row, viewStyles]}\n onPress={handlePressAction}\n accessibilityRole=\"button\"\n >\n {icon ? <Icon name={icon} size={iconSize} color={labelColor} /> : null}\n <View style={styles.content}>\n <Text\n selectable={false}\n style={[\n {\n color: labelColor,\n },\n textStyles,\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={24}\n />\n </Pressable>\n {expandedInternal ? children : null}\n </>\n );\n};\n\nconst styles = StyleSheet.create({\n row: {\n flexDirection: \"row\",\n alignItems: \"center\",\n },\n label: {\n fontSize: 16,\n },\n content: {\n flex: 1,\n justifyContent: \"center\",\n },\n icon: {\n marginLeft: 8,\n },\n});\n\nexport default withTheme(AccordionGroup);\n"]}
|
|
@@ -47,11 +47,15 @@ const FAB = _ref => {
|
|
|
47
47
|
}];
|
|
48
48
|
}
|
|
49
49
|
}, props), /*#__PURE__*/React.createElement(View, null, loading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
|
|
50
|
-
|
|
50
|
+
style: size > 50 ? {
|
|
51
|
+
marginTop: 2,
|
|
52
|
+
marginLeft: 2
|
|
53
|
+
} : undefined,
|
|
54
|
+
size: size <= 50 ? "small" : "large",
|
|
51
55
|
color: color
|
|
52
56
|
}) : /*#__PURE__*/React.createElement(Icon, {
|
|
53
57
|
name: iconName,
|
|
54
|
-
size:
|
|
58
|
+
size: size,
|
|
55
59
|
color: color
|
|
56
60
|
}))));
|
|
57
61
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["FAB.tsx"],"names":["React","View","StyleSheet","Pressable","ActivityIndicator","Platform","withTheme","FAB","onPress","disabled","loading","iconName","style","theme","iconColor","bgColor","size","Icon","props","backgroundColor","colors","primary","color","width","height","borderRadius","overflow","radius","pressed","styles","button","opacity","create","justifyContent","alignItems","select","web","cursor","userSelect"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SACEC,IADF,EAEEC,UAFF,EAGEC,SAHF,EAIEC,iBAJF,EAQEC,QARF,QASO,cATP;AAUA,SAASC,SAAT,QAA0B,YAA1B;;AAiBA,MAAMC,GAAoB,GAAG,QAYvB;AAAA,MAZwB;AAC5BC,IAAAA,OAD4B;AAE5BC,IAAAA,QAF4B;AAG5BC,IAAAA,OAH4B;AAI5BC,IAAAA,QAAQ,GAAG,mBAJiB;AAK5BC,IAAAA,KAL4B;AAM5BC,IAAAA,KAN4B;AAO5BC,IAAAA,SAP4B;AAQ5BC,IAAAA,OAR4B;AAS5BC,IAAAA,IAAI,GAAG,EATqB;AAU5BC,IAAAA,IAV4B;AAW5B,OAAGC;AAXyB,GAYxB;AACJ,QAAMC,eAAe,GAAGJ,OAAO,IAAIF,KAAK,CAACO,MAAN,CAAaC,OAAhD;AACA,QAAMC,KAAK,GAAGR,SAAS,IAAI,MAA3B;AAEA,sBACE,oBAAC,IAAD;AACE,IAAA,KAAK,EAAE,CACL;AACES,MAAAA,KAAK,EAAEP,IADT;AAEEQ,MAAAA,MAAM,EAAER,IAFV;AAGES,MAAAA,YAAY,EAAET,IAAI,GAAG,CAHvB;AAIEU,MAAAA,QAAQ,EAAE;AAJZ,KADK,EAOLd,KAPK;AADT,kBAWE,oBAAC,SAAD;AACE,IAAA,OAAO,EAAEJ,OADX;AAEE,IAAA,QAAQ,EAAEE,OAAO,IAAID,QAFvB;AAGE,IAAA,cAAc,EAAE;AACda,MAAAA,KAAK,EAAE,MADO;AAEdK,MAAAA,MAAM,EAAEX,IAAI,GAAG;AAFD,KAHlB;AAOE,IAAA,KAAK,EAAE,SAAiB;AAAA,UAAhB;AAAEY,QAAAA;AAAF,OAAgB;AACtB,aAAO,CACLC,MAAM,CAACC,MADF,EAEL;AACEC,QAAAA,OAAO,EAAEH,OAAO,IAAInB,QAAX,GAAsB,IAAtB,GAA6B,CADxC;AAEEc,QAAAA,KAAK,EAAEP,IAFT;AAGEQ,QAAAA,MAAM,EAAER,IAHV;AAIES,QAAAA,YAAY,EAAET,IAAI,GAAG,CAJvB;AAKEG,QAAAA;AALF,OAFK,CAAP;AAUD;AAlBH,KAmBMD,KAnBN,gBAqBE,oBAAC,IAAD,QACGR,OAAO,gBACN,oBAAC,iBAAD;
|
|
1
|
+
{"version":3,"sources":["FAB.tsx"],"names":["React","View","StyleSheet","Pressable","ActivityIndicator","Platform","withTheme","FAB","onPress","disabled","loading","iconName","style","theme","iconColor","bgColor","size","Icon","props","backgroundColor","colors","primary","color","width","height","borderRadius","overflow","radius","pressed","styles","button","opacity","marginTop","marginLeft","undefined","create","justifyContent","alignItems","select","web","cursor","userSelect"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SACEC,IADF,EAEEC,UAFF,EAGEC,SAHF,EAIEC,iBAJF,EAQEC,QARF,QASO,cATP;AAUA,SAASC,SAAT,QAA0B,YAA1B;;AAiBA,MAAMC,GAAoB,GAAG,QAYvB;AAAA,MAZwB;AAC5BC,IAAAA,OAD4B;AAE5BC,IAAAA,QAF4B;AAG5BC,IAAAA,OAH4B;AAI5BC,IAAAA,QAAQ,GAAG,mBAJiB;AAK5BC,IAAAA,KAL4B;AAM5BC,IAAAA,KAN4B;AAO5BC,IAAAA,SAP4B;AAQ5BC,IAAAA,OAR4B;AAS5BC,IAAAA,IAAI,GAAG,EATqB;AAU5BC,IAAAA,IAV4B;AAW5B,OAAGC;AAXyB,GAYxB;AACJ,QAAMC,eAAe,GAAGJ,OAAO,IAAIF,KAAK,CAACO,MAAN,CAAaC,OAAhD;AACA,QAAMC,KAAK,GAAGR,SAAS,IAAI,MAA3B;AAEA,sBACE,oBAAC,IAAD;AACE,IAAA,KAAK,EAAE,CACL;AACES,MAAAA,KAAK,EAAEP,IADT;AAEEQ,MAAAA,MAAM,EAAER,IAFV;AAGES,MAAAA,YAAY,EAAET,IAAI,GAAG,CAHvB;AAIEU,MAAAA,QAAQ,EAAE;AAJZ,KADK,EAOLd,KAPK;AADT,kBAWE,oBAAC,SAAD;AACE,IAAA,OAAO,EAAEJ,OADX;AAEE,IAAA,QAAQ,EAAEE,OAAO,IAAID,QAFvB;AAGE,IAAA,cAAc,EAAE;AACda,MAAAA,KAAK,EAAE,MADO;AAEdK,MAAAA,MAAM,EAAEX,IAAI,GAAG;AAFD,KAHlB;AAOE,IAAA,KAAK,EAAE,SAAiB;AAAA,UAAhB;AAAEY,QAAAA;AAAF,OAAgB;AACtB,aAAO,CACLC,MAAM,CAACC,MADF,EAEL;AACEC,QAAAA,OAAO,EAAEH,OAAO,IAAInB,QAAX,GAAsB,IAAtB,GAA6B,CADxC;AAEEc,QAAAA,KAAK,EAAEP,IAFT;AAGEQ,QAAAA,MAAM,EAAER,IAHV;AAIES,QAAAA,YAAY,EAAET,IAAI,GAAG,CAJvB;AAKEG,QAAAA;AALF,OAFK,CAAP;AAUD;AAlBH,KAmBMD,KAnBN,gBAqBE,oBAAC,IAAD,QACGR,OAAO,gBACN,oBAAC,iBAAD;AACE,IAAA,KAAK,EAAEM,IAAI,GAAG,EAAP,GAAY;AAAEgB,MAAAA,SAAS,EAAE,CAAb;AAAgBC,MAAAA,UAAU,EAAE;AAA5B,KAAZ,GAA8CC,SADvD;AAEE,IAAA,IAAI,EAAElB,IAAI,IAAI,EAAR,GAAa,OAAb,GAAuB,OAF/B;AAGE,IAAA,KAAK,EAAEM;AAHT,IADM,gBAON,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAEX,QAAZ;AAAsB,IAAA,IAAI,EAAEK,IAA5B;AAAkC,IAAA,KAAK,EAAEM;AAAzC,IARJ,CArBF,CAXF,CADF;AA+CD,CA/DD;;AAiEA,MAAMO,MAAM,GAAG3B,UAAU,CAACiC,MAAX,CAAkB;AAC/BL,EAAAA,MAAM,EAAE;AACNX,IAAAA,eAAe,EAAE,SADX;AAENiB,IAAAA,cAAc,EAAE,QAFV;AAGNC,IAAAA,UAAU,EAAE,QAHN;AAIN,OAAGhC,QAAQ,CAACiC,MAAT,CAAgB;AACjBC,MAAAA,GAAG,EAAE;AACHC,QAAAA,MAAM,EAAE,SADL;AAEHC,QAAAA,UAAU,EAAE;AAFT;AADY,KAAhB;AAJG;AADuB,CAAlB,CAAf;AAcA,eAAenC,SAAS,CAACC,GAAD,CAAxB","sourcesContent":["import * as React from \"react\";\nimport {\n View,\n StyleSheet,\n Pressable,\n ActivityIndicator,\n StyleProp,\n ViewStyle,\n PressableProps,\n Platform,\n} from \"react-native\";\nimport { withTheme } from \"../theming\";\nimport type { Theme } from \"../styles/DefaultTheme\";\nimport type { IconSlot } from \"../interfaces/Icon\";\n\ntype Props = {\n disabled?: boolean;\n loading?: boolean;\n size?: number;\n bgColor?: string;\n iconColor?: string;\n iconName?: string;\n onPress: () => void;\n theme: Theme;\n style?: StyleProp<ViewStyle>;\n} & PressableProps &\n IconSlot;\n\nconst FAB: React.FC<Props> = ({\n onPress,\n disabled,\n loading,\n iconName = \"MaterialIcons/add\",\n style,\n theme,\n iconColor,\n bgColor,\n size = 50,\n Icon,\n ...props\n}) => {\n const backgroundColor = bgColor || theme.colors.primary;\n const color = iconColor || \"#FFF\";\n\n return (\n <View\n style={[\n {\n width: size,\n height: size,\n borderRadius: size / 2,\n overflow: \"hidden\",\n },\n style,\n ]}\n >\n <Pressable\n onPress={onPress}\n disabled={loading || disabled}\n android_ripple={{\n color: \"#333\",\n radius: size / 4,\n }}\n style={({ pressed }) => {\n return [\n styles.button,\n {\n opacity: pressed || disabled ? 0.75 : 1,\n width: size,\n height: size,\n borderRadius: size / 2,\n backgroundColor,\n },\n ];\n }}\n {...props}\n >\n <View>\n {loading ? (\n <ActivityIndicator\n style={size > 50 ? { marginTop: 2, marginLeft: 2 } : undefined}\n size={size <= 50 ? \"small\" : \"large\"}\n color={color}\n />\n ) : (\n <Icon name={iconName} size={size} color={color} />\n )}\n </View>\n </Pressable>\n </View>\n );\n};\n\nconst styles = StyleSheet.create({\n button: {\n backgroundColor: \"#5a45ff\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...Platform.select({\n web: {\n cursor: \"pointer\",\n userSelect: \"none\",\n },\n }),\n },\n});\n\nexport default withTheme(FAB);\n"]}
|
|
@@ -10,8 +10,8 @@ const Swiper = _ref => {
|
|
|
10
10
|
from = 0,
|
|
11
11
|
prevTitle = "",
|
|
12
12
|
nextTitle = "",
|
|
13
|
-
prevTitleColor
|
|
14
|
-
nextTitleColor
|
|
13
|
+
prevTitleColor,
|
|
14
|
+
nextTitleColor,
|
|
15
15
|
dotsTouchable = true,
|
|
16
16
|
dotColor,
|
|
17
17
|
dotActiveColor,
|
|
@@ -35,14 +35,18 @@ const Swiper = _ref => {
|
|
|
35
35
|
color: nextTitleColor
|
|
36
36
|
},
|
|
37
37
|
dotsTouchable,
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
38
|
+
...(dotColor ? {
|
|
39
|
+
dotProps: {
|
|
40
|
+
badgeStyle: {
|
|
41
|
+
backgroundColor: dotColor
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
} : {}),
|
|
45
|
+
...(dotActiveColor ? {
|
|
46
|
+
dotActiveStyle: {
|
|
47
|
+
backgroundColor: dotActiveColor
|
|
44
48
|
}
|
|
45
|
-
}
|
|
49
|
+
} : {})
|
|
46
50
|
}
|
|
47
51
|
}, children));
|
|
48
52
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Swiper.tsx"],"names":["React","View","SwiperComponent","Swiper","vertical","loop","timeout","from","prevTitle","nextTitle","prevTitleColor","nextTitleColor","dotsTouchable","dotColor","dotActiveColor","children","style","prevTitleStyle","color","nextTitleStyle","
|
|
1
|
+
{"version":3,"sources":["Swiper.tsx"],"names":["React","View","SwiperComponent","Swiper","vertical","loop","timeout","from","prevTitle","nextTitle","prevTitleColor","nextTitleColor","dotsTouchable","dotColor","dotActiveColor","children","style","prevTitleStyle","color","nextTitleStyle","dotProps","badgeStyle","backgroundColor","dotActiveStyle"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAA2C,cAA3C;AACA,OAAOC,eAAP,MAA4B,yBAA5B;;AAkBA,MAAMC,MAAM,GAAG;AAAA,MAAC;AACdC,IAAAA,QAAQ,GAAG,KADG;AAEdC,IAAAA,IAAI,GAAG,KAFO;AAGdC,IAAAA,OAAO,GAAG,CAHI;AAIdC,IAAAA,IAAI,GAAG,CAJO;AAKdC,IAAAA,SAAS,GAAG,EALE;AAMdC,IAAAA,SAAS,GAAG,EANE;AAOdC,IAAAA,cAPc;AAQdC,IAAAA,cARc;AASdC,IAAAA,aAAa,GAAG,IATF;AAUdC,IAAAA,QAVc;AAWdC,IAAAA,cAXc;AAYdC,IAAAA,QAZc;AAadC,IAAAA;AAbc,GAAD;AAAA,sBAeb,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEA;AAAb,kBACE,oBAAC,eAAD;AACE,IAAA,IAAI,EAAET,IADR;AAEE,IAAA,IAAI,EAAEF,IAFR;AAGE,IAAA,OAAO,EAAEC,OAHX;AAIE,IAAA,QAAQ,EAAEF,QAJZ;AAKE,IAAA,aAAa,EAAE;AACbI,MAAAA,SADa;AAEbC,MAAAA,SAFa;AAGbQ,MAAAA,cAAc,EAAE;AAAEC,QAAAA,KAAK,EAAER;AAAT,OAHH;AAIbS,MAAAA,cAAc,EAAE;AAAED,QAAAA,KAAK,EAAEP;AAAT,OAJH;AAKbC,MAAAA,aALa;AAMb,UAAIC,QAAQ,GACR;AAAEO,QAAAA,QAAQ,EAAE;AAAEC,UAAAA,UAAU,EAAE;AAAEC,YAAAA,eAAe,EAAET;AAAnB;AAAd;AAAZ,OADQ,GAER,EAFJ,CANa;AASb,UAAIC,cAAc,GACd;AAAES,QAAAA,cAAc,EAAE;AAAED,UAAAA,eAAe,EAAER;AAAnB;AAAlB,OADc,GAEd,EAFJ;AATa;AALjB,KAmBGC,QAnBH,CADF,CAfa;AAAA,CAAf;;AAwCA,eAAeZ,MAAf","sourcesContent":["import React from \"react\";\nimport { View, StyleProp, ViewStyle } from \"react-native\";\nimport SwiperComponent from \"react-native-web-swiper\";\n\nexport interface SwiperProps {\n vertical?: boolean;\n loop?: boolean;\n from?: number;\n timeout?: number;\n prevTitle?: string;\n nextTitle?: string;\n prevTitleColor?: string;\n nextTitleColor?: string;\n dotsTouchable?: boolean;\n dotColor?: string;\n dotActiveColor?: string;\n children: React.ReactNode;\n style?: StyleProp<ViewStyle>;\n}\n\nconst Swiper = ({\n vertical = false,\n loop = false,\n timeout = 0,\n from = 0,\n prevTitle = \"\",\n nextTitle = \"\",\n prevTitleColor,\n nextTitleColor,\n dotsTouchable = true,\n dotColor,\n dotActiveColor,\n children,\n style,\n}: SwiperProps) => (\n <View style={style}>\n <SwiperComponent\n from={from}\n loop={loop}\n timeout={timeout}\n vertical={vertical}\n controlsProps={{\n prevTitle,\n nextTitle,\n prevTitleStyle: { color: prevTitleColor },\n nextTitleStyle: { color: nextTitleColor },\n dotsTouchable,\n ...(dotColor\n ? { dotProps: { badgeStyle: { backgroundColor: dotColor } } }\n : {}),\n ...(dotActiveColor\n ? { dotActiveStyle: { backgroundColor: dotActiveColor } }\n : {}),\n }}\n >\n {children}\n </SwiperComponent>\n </View>\n);\n\nexport default Swiper;\n"]}
|
|
@@ -1,9 +1,16 @@
|
|
|
1
1
|
import { COMPONENT_TYPES, createNumberProp, createIconProp, createTextProp, createStaticBoolProp, createColorProp } from "@draftbit/types";
|
|
2
2
|
export const SEED_DATA = {
|
|
3
|
-
name: "Accordion
|
|
3
|
+
name: "Accordion",
|
|
4
4
|
tag: "AccordionGroup",
|
|
5
5
|
description: "An expandable container containing components",
|
|
6
6
|
category: COMPONENT_TYPES.container,
|
|
7
|
+
layout: {
|
|
8
|
+
paddingTop: 8,
|
|
9
|
+
paddingRight: 8,
|
|
10
|
+
paddingBottom: 8,
|
|
11
|
+
paddingLeft: 8,
|
|
12
|
+
fontSize: 16
|
|
13
|
+
},
|
|
7
14
|
props: {
|
|
8
15
|
openColor: createColorProp({
|
|
9
16
|
label: "Open text color"
|
|
@@ -28,4 +35,4 @@ export const SEED_DATA = {
|
|
|
28
35
|
icon: createIconProp()
|
|
29
36
|
}
|
|
30
37
|
};
|
|
31
|
-
//# sourceMappingURL=
|
|
38
|
+
//# sourceMappingURL=Accordion.js.map
|
|
@@ -0,0 +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","openColor","label","closedColor","caretColor","iconSize","defaultValue","expanded","icon"],"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,SAAS,EAAEd,eAAe,CAAC;AACzBe,MAAAA,KAAK,EAAE;AADkB,KAAD,CADrB;AAILC,IAAAA,WAAW,EAAEhB,eAAe,CAAC;AAC3Be,MAAAA,KAAK,EAAE;AADoB,KAAD,CAJvB;AAOLE,IAAAA,UAAU,EAAEjB,eAAe,CAAC;AAC1Be,MAAAA,KAAK,EAAE;AADmB,KAAD,CAPtB;AAULG,IAAAA,QAAQ,EAAEtB,gBAAgB,CAAC;AACzBmB,MAAAA,KAAK,EAAE,WADkB;AAEzBI,MAAAA,YAAY,EAAE;AAFW,KAAD,CAVrB;AAcLJ,IAAAA,KAAK,EAAEjB,cAAc,CAAC;AACpBiB,MAAAA,KAAK,EAAE;AADa,KAAD,CAdhB;AAiBLK,IAAAA,QAAQ,EAAErB,oBAAoB,CAAC;AAC7BgB,MAAAA,KAAK,EAAE,UADsB;AAE7BX,MAAAA,WAAW,EAAE;AAFgB,KAAD,CAjBzB;AAqBLiB,IAAAA,IAAI,EAAExB,cAAc;AArBf;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 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 iconSize: createNumberProp({\n label: \"Icon size\",\n defaultValue: 24,\n }),\n label: createTextProp({\n label: \"Label\",\n }),\n expanded: createStaticBoolProp({\n label: \"Expanded\",\n description: \"Whether the AccordionGroup should be expanded or not\",\n }),\n icon: createIconProp(),\n },\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["AccordionItem.ts"],"names":["COMPONENT_TYPES","createIconProp","createTextProp","createColorProp","SEED_DATA","name","tag","description","category","
|
|
1
|
+
{"version":3,"sources":["AccordionItem.ts"],"names":["COMPONENT_TYPES","createIconProp","createTextProp","createColorProp","SEED_DATA","name","tag","description","category","deprecated","props","icon","label","iconColor"],"mappings":"AAAA,SACEA,eADF,EAEEC,cAFF,EAGEC,cAHF,EAIEC,eAJF,QAKO,iBALP;AAOA,OAAO,MAAMC,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,gBADiB;AAEvBC,EAAAA,GAAG,EAAE,eAFkB;AAGvBC,EAAAA,WAAW,EAAE,8BAHU;AAIvBC,EAAAA,QAAQ,EAAER,eAAe,CAACS,UAJH;AAKvBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAEV,cAAc,EADf;AAELW,IAAAA,KAAK,EAAEV,cAAc,CAAC;AACpBU,MAAAA,KAAK,EAAE;AADa,KAAD,CAFhB;AAKLC,IAAAA,SAAS,EAAEV,eAAe,CAAC;AACzBS,MAAAA,KAAK,EAAE;AADkB,KAAD;AALrB;AALgB,CAAlB","sourcesContent":["import {\n COMPONENT_TYPES,\n createIconProp,\n createTextProp,\n createColorProp,\n} from \"@draftbit/types\";\n\nexport const SEED_DATA = {\n name: \"Accordion Item\",\n tag: \"AccordionItem\",\n description: \"Item to be used in Accordion\",\n category: COMPONENT_TYPES.deprecated,\n props: {\n icon: createIconProp(),\n label: createTextProp({\n label: \"Item label\",\n }),\n iconColor: createColorProp({\n label: \"Icon color\",\n }),\n },\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Picker.
|
|
1
|
+
{"version":3,"sources":["Picker.ts"],"names":["COMPONENT_TYPES","Triggers","GROUPS","FORM_TYPES","PROP_TYPES","FIELD_NAME","SEED_DATA_PROPS","label","group","data","description","formType","string","propType","STRING","defaultValue","editable","required","placeholder","basic","placeholderTextColor","color","assistiveText","options","array","OBJECT","disabled","boolean","BOOLEAN","error","leftIconName","icon","ASSET","leftIconMode","flatArray","rightIconName","fieldName","handlerPropName","SEED_DATA_TRIGGERS","OnValueChange","SEED_DATA","name","tag","category","input","preview_image_url","supports_list_render","triggers","props","type","layout"],"mappings":"AAAA,SACEA,eADF,EAEEC,QAFF,EAGEC,MAHF,EAIEC,UAJF,EAKEC,UALF,EAMEC,UANF,QAOO,iBAPP;AASA,MAAMC,eAAe,GAAG;AACtBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAEN,MAAM,CAACO,IADT;AAELF,IAAAA,KAAK,EAAE,OAFF;AAGLG,IAAAA,WAAW,EAAE,yCAHR;AAILC,IAAAA,QAAQ,EAAER,UAAU,CAACS,MAJhB;AAKLC,IAAAA,QAAQ,EAAET,UAAU,CAACU,MALhB;AAMLC,IAAAA,YAAY,EAAE,IANT;AAOLC,IAAAA,QAAQ,EAAE,IAPL;AAQLC,IAAAA,QAAQ,EAAE;AARL,GADe;AAWtBC,EAAAA,WAAW,EAAE;AACXV,IAAAA,KAAK,EAAEN,MAAM,CAACiB,KADH;AAEXZ,IAAAA,KAAK,EAAE,aAFI;AAGXG,IAAAA,WAAW,EAAE,oCAHF;AAIXC,IAAAA,QAAQ,EAAER,UAAU,CAACS,MAJV;AAKXC,IAAAA,QAAQ,EAAET,UAAU,CAACU,MALV;AAMXC,IAAAA,YAAY,EAAE,kBANH;AAOXC,IAAAA,QAAQ,EAAE,IAPC;AAQXC,IAAAA,QAAQ,EAAE;AARC,GAXS;AAqBtBG,EAAAA,oBAAoB,EAAE;AACpBZ,IAAAA,KAAK,EAAEN,MAAM,CAACiB,KADM;AAEpBZ,IAAAA,KAAK,EAAE,wBAFa;AAGpBG,IAAAA,WAAW,EAAE,oCAHO;AAIpBM,IAAAA,QAAQ,EAAE,IAJU;AAKpBC,IAAAA,QAAQ,EAAE,KALU;AAMpBF,IAAAA,YAAY,EAAE,IANM;AAOpBJ,IAAAA,QAAQ,EAAER,UAAU,CAACkB,KAPD;AAQpBR,IAAAA,QAAQ,EAAET,UAAU,CAACU;AARD,GArBA;AA+BtBQ,EAAAA,aAAa,EAAE;AACbd,IAAAA,KAAK,EAAEN,MAAM,CAACiB,KADD;AAEbZ,IAAAA,KAAK,EAAE,gBAFM;AAGbG,IAAAA,WAAW,EAAE,yCAHA;AAIbC,IAAAA,QAAQ,EAAER,UAAU,CAACS,MAJR;AAKbC,IAAAA,QAAQ,EAAET,UAAU,CAACU,MALR;AAMbC,IAAAA,YAAY,EAAE,IAND;AAObC,IAAAA,QAAQ,EAAE,IAPG;AAQbC,IAAAA,QAAQ,EAAE;AARG,GA/BO;AAyCtBM,EAAAA,OAAO,EAAE;AACPf,IAAAA,KAAK,EAAEN,MAAM,CAACO,IADP;AAEPF,IAAAA,KAAK,EAAE,SAFA;AAGPG,IAAAA,WAAW,EACT,4EAJK;AAKPM,IAAAA,QAAQ,EAAE,IALH;AAMPC,IAAAA,QAAQ,EAAE,KANH;AAOPN,IAAAA,QAAQ,EAAER,UAAU,CAACqB,KAPd;AAQPX,IAAAA,QAAQ,EAAET,UAAU,CAACqB,MARd;AASPF,IAAAA,OAAO,EAAE,EATF;AAUPR,IAAAA,YAAY,EAAE;AAVP,GAzCa;AAqDtBW,EAAAA,QAAQ,EAAE;AACRlB,IAAAA,KAAK,EAAEN,MAAM,CAACiB,KADN;AAERZ,IAAAA,KAAK,EAAE,UAFC;AAGRG,IAAAA,WAAW,EACT,4FAJM;AAKRC,IAAAA,QAAQ,EAAER,UAAU,CAACwB,OALb;AAMRd,IAAAA,QAAQ,EAAET,UAAU,CAACwB,OANb;AAORb,IAAAA,YAAY,EAAE,KAPN;AAQRC,IAAAA,QAAQ,EAAE,IARF;AASRC,IAAAA,QAAQ,EAAE;AATF,GArDY;AAgEtBY,EAAAA,KAAK,EAAE;AACLrB,IAAAA,KAAK,EAAEN,MAAM,CAACO,IADT;AAELF,IAAAA,KAAK,EAAE,OAFF;AAGLG,IAAAA,WAAW,EAAE,mDAHR;AAILC,IAAAA,QAAQ,EAAER,UAAU,CAACwB,OAJhB;AAKLd,IAAAA,QAAQ,EAAET,UAAU,CAACwB,OALhB;AAMLb,IAAAA,YAAY,EAAE,KANT;AAOLC,IAAAA,QAAQ,EAAE,IAPL;AAQLC,IAAAA,QAAQ,EAAE;AARL,GAhEe;AA0EtBa,EAAAA,YAAY,EAAE;AACZtB,IAAAA,KAAK,EAAEN,MAAM,CAACiB,KADF;AAEZZ,IAAAA,KAAK,EAAE,gBAFK;AAGZG,IAAAA,WAAW,EAAE,iCAHD;AAIZC,IAAAA,QAAQ,EAAER,UAAU,CAAC4B,IAJT;AAKZlB,IAAAA,QAAQ,EAAET,UAAU,CAAC4B,KALT;AAMZjB,IAAAA,YAAY,EAAE,IANF;AAOZC,IAAAA,QAAQ,EAAE,IAPE;AAQZC,IAAAA,QAAQ,EAAE;AARE,GA1EQ;AAoFtBgB,EAAAA,YAAY,EAAE;AACZzB,IAAAA,KAAK,EAAEN,MAAM,CAACiB,KADF;AAEZZ,IAAAA,KAAK,EAAE,gBAFK;AAGZG,IAAAA,WAAW,EACT,mEAJU;AAKZC,IAAAA,QAAQ,EAAER,UAAU,CAAC+B,SALT;AAMZrB,IAAAA,QAAQ,EAAET,UAAU,CAACU,MANT;AAOZC,IAAAA,YAAY,EAAE,OAPF;AAQZQ,IAAAA,OAAO,EAAE,CAAC,OAAD,EAAU,QAAV,CARG;AASZP,IAAAA,QAAQ,EAAE,IATE;AAUZC,IAAAA,QAAQ,EAAE;AAVE,GApFQ;AAgGtBkB,EAAAA,aAAa,EAAE;AACb3B,IAAAA,KAAK,EAAEN,MAAM,CAACiB,KADD;AAEbZ,IAAAA,KAAK,EAAE,iBAFM;AAGbG,IAAAA,WAAW,EAAE,kCAHA;AAIbC,IAAAA,QAAQ,EAAER,UAAU,CAAC4B,IAJR;AAKblB,IAAAA,QAAQ,EAAET,UAAU,CAAC4B,KALR;AAMbjB,IAAAA,YAAY,EAAE,IAND;AAObC,IAAAA,QAAQ,EAAE,IAPG;AAQbC,IAAAA,QAAQ,EAAE;AARG,GAhGO;AA0GtBmB,EAAAA,SAAS,EAAE,EACT,GAAG/B,UADM;AAETU,IAAAA,YAAY,EAAE,aAFL;AAGTsB,IAAAA,eAAe,EAAE;AAHR;AA1GW,CAAxB;AAiHA,MAAMC,kBAAkB,GAAG,CAACrC,QAAQ,CAACsC,aAAV,CAA3B;AACA,OAAO,MAAMC,SAAS,GAAG,CACvB;AACEC,EAAAA,IAAI,EAAE,QADR;AAEEC,EAAAA,GAAG,EAAE,QAFP;AAGEhC,EAAAA,WAAW,EAAE,wDAHf;AAIEiC,EAAAA,QAAQ,EAAE3C,eAAe,CAAC4C,KAJ5B;AAKEC,EAAAA,iBAAiB,EAAE,6BALrB;AAMEC,EAAAA,oBAAoB,EAAE,KANxB;AAOEC,EAAAA,QAAQ,EAAET,kBAPZ;AAQEU,EAAAA,KAAK,EAAE,EACL,GAAG1C,eADE;AAEL2C,IAAAA,IAAI,EAAE;AACJ1C,MAAAA,KAAK,EAAE,YADH;AAEJG,MAAAA,WAAW,EAAE,gBAFT;AAGJC,MAAAA,QAAQ,EAAER,UAAU,CAAC+B,SAHjB;AAIJrB,MAAAA,QAAQ,EAAET,UAAU,CAACU,MAJjB;AAKJC,MAAAA,YAAY,EAAE,OALV;AAMJQ,MAAAA,OAAO,EAAE,CAAC,OAAD,EAAU,WAAV,CANL;AAOJP,MAAAA,QAAQ,EAAE,IAPN;AAQJC,MAAAA,QAAQ,EAAE,IARN;AASJT,MAAAA,KAAK,EAAEN,MAAM,CAACiB;AATV;AAFD,GART;AAsBE+B,EAAAA,MAAM,EAAE;AAtBV,CADuB,CAAlB","sourcesContent":["import {\n COMPONENT_TYPES,\n Triggers,\n GROUPS,\n FORM_TYPES,\n PROP_TYPES,\n FIELD_NAME,\n} from \"@draftbit/types\";\n\nconst SEED_DATA_PROPS = {\n label: {\n group: GROUPS.data,\n label: \"Label\",\n description: \"The label to be displayed on the picker\",\n formType: FORM_TYPES.string,\n propType: PROP_TYPES.STRING,\n defaultValue: null,\n editable: true,\n required: true,\n },\n placeholder: {\n group: GROUPS.basic,\n label: \"Placeholder\",\n description: \"The placeholder text of the picker\",\n formType: FORM_TYPES.string,\n propType: PROP_TYPES.STRING,\n defaultValue: \"Select an option\",\n editable: true,\n required: false,\n },\n placeholderTextColor: {\n group: GROUPS.basic,\n label: \"Placeholder Text Color\",\n description: \"The color of the placeholder text.\",\n editable: true,\n required: false,\n defaultValue: null,\n formType: FORM_TYPES.color,\n propType: PROP_TYPES.STRING,\n },\n assistiveText: {\n group: GROUPS.basic,\n label: \"Assistive text\",\n description: \"Helper text to display below the picker\",\n formType: FORM_TYPES.string,\n propType: PROP_TYPES.STRING,\n defaultValue: null,\n editable: true,\n required: false,\n },\n options: {\n group: GROUPS.data,\n label: \"Options\",\n description:\n \"Array of picker options. An array of objects containing a label and value.\",\n editable: true,\n required: false,\n formType: FORM_TYPES.array,\n propType: PROP_TYPES.OBJECT,\n options: [],\n defaultValue: null,\n },\n disabled: {\n group: GROUPS.basic,\n label: \"Disabled\",\n description:\n \"Whether the picker should be disabled. Will prevent selection and show a greyed out state.\",\n formType: FORM_TYPES.boolean,\n propType: PROP_TYPES.BOOLEAN,\n defaultValue: false,\n editable: true,\n required: false,\n },\n error: {\n group: GROUPS.data,\n label: \"Error\",\n description: \"Whether the picker should display the error state\",\n formType: FORM_TYPES.boolean,\n propType: PROP_TYPES.BOOLEAN,\n defaultValue: false,\n editable: true,\n required: false,\n },\n leftIconName: {\n group: GROUPS.basic,\n label: \"Left icon name\",\n description: \"The icon to display on the left\",\n formType: FORM_TYPES.icon,\n propType: PROP_TYPES.ASSET,\n defaultValue: null,\n editable: true,\n required: false,\n },\n leftIconMode: {\n group: GROUPS.basic,\n label: \"Left icon mode\",\n description:\n \"The mode of the icon to display on the left. 'inset' or 'outset'.\",\n formType: FORM_TYPES.flatArray,\n propType: PROP_TYPES.STRING,\n defaultValue: \"inset\",\n options: [\"inset\", \"outset\"],\n editable: true,\n required: true,\n },\n rightIconName: {\n group: GROUPS.basic,\n label: \"Right icon name\",\n description: \"The icon to display on the right\",\n formType: FORM_TYPES.icon,\n propType: PROP_TYPES.ASSET,\n defaultValue: null,\n editable: true,\n required: false,\n },\n fieldName: {\n ...FIELD_NAME,\n defaultValue: \"pickerValue\",\n handlerPropName: \"onValueChange\",\n },\n};\n\nconst SEED_DATA_TRIGGERS = [Triggers.OnValueChange];\nexport const SEED_DATA = [\n {\n name: \"Picker\",\n tag: \"Picker\",\n description: \"A component used to pick a value from a set of options\",\n category: COMPONENT_TYPES.input,\n preview_image_url: \"{CLOUDINARY_URL}/Picker.png\",\n supports_list_render: false,\n triggers: SEED_DATA_TRIGGERS,\n props: {\n ...SEED_DATA_PROPS,\n type: {\n label: \"Appearance\",\n description: \"Type of Picker\",\n formType: FORM_TYPES.flatArray,\n propType: PROP_TYPES.STRING,\n defaultValue: \"solid\",\n options: [\"solid\", \"underline\"],\n editable: true,\n required: true,\n group: GROUPS.basic,\n },\n },\n layout: {},\n },\n];\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ScrollView.
|
|
1
|
+
{"version":3,"sources":["ScrollView.js"],"names":["COMPONENT_TYPES","createStaticBoolProp","SEED_DATA","name","tag","description","category","layout","props","horizontal","label","defaultValue","showsHorizontalScrollIndicator","showsVerticalScrollIndicator","bounces"],"mappings":"AAAA,SAASA,eAAT,EAA0BC,oBAA1B,QAAsD,iBAAtD;AACA,OAAO,MAAMC,SAAS,GAAG;AACrBC,EAAAA,IAAI,EAAE,aADe;AAErBC,EAAAA,GAAG,EAAE,YAFgB;AAGrBC,EAAAA,WAAW,EAAE,8BAHQ;AAIrBC,EAAAA,QAAQ,EAAEN,eAAe,CAACO,MAJL;AAKrBA,EAAAA,MAAM,EAAE,EALa;AAMrBC,EAAAA,KAAK,EAAE;AACHC,IAAAA,UAAU,EAAER,oBAAoB,CAAC;AAC7BS,MAAAA,KAAK,EAAE,YADsB;AAE7BL,MAAAA,WAAW,EAAE,+BAFgB;AAG7BM,MAAAA,YAAY,EAAE;AAHe,KAAD,CAD7B;AAMHC,IAAAA,8BAA8B,EAAEX,oBAAoB,CAAC;AACjDS,MAAAA,KAAK,EAAE,kCAD0C;AAEjDL,MAAAA,WAAW,EAAE,4EAFoC;AAGjDM,MAAAA,YAAY,EAAE;AAHmC,KAAD,CANjD;AAWHE,IAAAA,4BAA4B,EAAEZ,oBAAoB,CAAC;AAC/CS,MAAAA,KAAK,EAAE,gCADwC;AAE/CL,MAAAA,WAAW,EAAE,0EAFkC;AAG/CM,MAAAA,YAAY,EAAE;AAHiC,KAAD,CAX/C;AAgBHG,IAAAA,OAAO,EAAEb,oBAAoB,CAAC;AAC1BS,MAAAA,KAAK,EAAE,QADmB;AAE1BL,MAAAA,WAAW,EAAE,iKAFa;AAG1BM,MAAAA,YAAY,EAAE;AAHY,KAAD;AAhB1B;AANc,CAAlB","sourcesContent":["import { COMPONENT_TYPES, createStaticBoolProp } from \"@draftbit/types\";\nexport const SEED_DATA = {\n name: \"Scroll View\",\n tag: \"ScrollView\",\n description: \"A basic ScrollView component\",\n category: COMPONENT_TYPES.layout,\n layout: {},\n props: {\n horizontal: createStaticBoolProp({\n label: \"Horizontal\",\n description: \"Render your list horizontally\",\n defaultValue: false,\n }),\n showsHorizontalScrollIndicator: createStaticBoolProp({\n label: \"Show Horizontal Scroll Indicator\",\n description: \"When true, shows a horizontal scroll indicator. The default value is true.\",\n defaultValue: false,\n }),\n showsVerticalScrollIndicator: createStaticBoolProp({\n label: \"Show Vertical Scroll Indicator\",\n description: \"When true, shows a vertical scroll indicator. The default value is true.\",\n defaultValue: true,\n }),\n bounces: createStaticBoolProp({\n label: \"Bounce\",\n description: \"When true, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction.\",\n defaultValue: true,\n }),\n },\n};\n"]}
|
|
@@ -7,8 +7,8 @@ export interface SwiperProps {
|
|
|
7
7
|
timeout?: number;
|
|
8
8
|
prevTitle?: string;
|
|
9
9
|
nextTitle?: string;
|
|
10
|
-
prevTitleColor
|
|
11
|
-
nextTitleColor
|
|
10
|
+
prevTitleColor?: string;
|
|
11
|
+
nextTitleColor?: string;
|
|
12
12
|
dotsTouchable?: boolean;
|
|
13
13
|
dotColor?: string;
|
|
14
14
|
dotActiveColor?: string;
|
|
@@ -3,6 +3,13 @@ export declare const SEED_DATA: {
|
|
|
3
3
|
tag: string;
|
|
4
4
|
description: string;
|
|
5
5
|
category: string;
|
|
6
|
+
layout: {
|
|
7
|
+
paddingTop: number;
|
|
8
|
+
paddingRight: number;
|
|
9
|
+
paddingBottom: number;
|
|
10
|
+
paddingLeft: number;
|
|
11
|
+
fontSize: number;
|
|
12
|
+
};
|
|
6
13
|
props: {
|
|
7
14
|
openColor: {
|
|
8
15
|
group: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@draftbit/core",
|
|
3
|
-
"version": "43.
|
|
3
|
+
"version": "43.4.0",
|
|
4
4
|
"description": "Core (non-native) Components",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"module": "lib/module/index.js",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"dependencies": {
|
|
42
42
|
"@date-io/date-fns": "^1.3.13",
|
|
43
43
|
"@draftbit/react-theme-provider": "^2.1.1",
|
|
44
|
-
"@draftbit/types": "^43.
|
|
44
|
+
"@draftbit/types": "^43.4.0",
|
|
45
45
|
"@material-ui/core": "^4.11.0",
|
|
46
46
|
"@material-ui/pickers": "^3.2.10",
|
|
47
47
|
"@react-native-community/slider": "4.1.7",
|
|
@@ -79,5 +79,5 @@
|
|
|
79
79
|
]
|
|
80
80
|
]
|
|
81
81
|
},
|
|
82
|
-
"gitHead": "
|
|
82
|
+
"gitHead": "0a899449b1da634c8dc74ec64f1c78f5af3283e3"
|
|
83
83
|
}
|
|
@@ -2,45 +2,31 @@ 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
6
|
const AccordionGroup = ({ Icon, openColor, closedColor, caretColor, icon, iconSize = 24, style, label, children, expanded: expandedProp, theme, }) => {
|
|
6
7
|
const [expanded, setExpanded] = React.useState(expandedProp || false);
|
|
7
8
|
const handlePressAction = () => {
|
|
8
|
-
|
|
9
|
-
setExpanded(!expanded);
|
|
10
|
-
}
|
|
9
|
+
setExpanded(!expanded);
|
|
11
10
|
};
|
|
12
11
|
const expandedInternal = expandedProp !== undefined ? expandedProp : expanded;
|
|
13
12
|
const expandedColor = openColor || theme.colors.primary;
|
|
14
13
|
const collapsedColor = closedColor || theme.colors.primary;
|
|
15
14
|
const labelColor = expanded ? expandedColor : collapsedColor;
|
|
15
|
+
const { textStyles, viewStyles } = extractStyles(style);
|
|
16
16
|
return (React.createElement(React.Fragment, null,
|
|
17
|
-
React.createElement(Pressable, { style: [
|
|
18
|
-
React.createElement(
|
|
19
|
-
|
|
20
|
-
React.createElement(
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
? "MaterialIcons/keyboard-arrow-up"
|
|
31
|
-
: "MaterialIcons/keyboard-arrow-down", color: caretColor, size: 24 })))),
|
|
32
|
-
expandedInternal
|
|
33
|
-
? React.Children.map(children, (child) => {
|
|
34
|
-
if (React.isValidElement(child) &&
|
|
35
|
-
!child.props.left &&
|
|
36
|
-
!child.props.right) {
|
|
37
|
-
return React.cloneElement(child, {
|
|
38
|
-
style: child.props.style,
|
|
39
|
-
});
|
|
40
|
-
}
|
|
41
|
-
return child;
|
|
42
|
-
})
|
|
43
|
-
: null));
|
|
17
|
+
React.createElement(Pressable, { style: [styles.row, viewStyles], onPress: handlePressAction, accessibilityRole: "button" },
|
|
18
|
+
icon ? React.createElement(Icon, { name: icon, size: iconSize, color: labelColor }) : null,
|
|
19
|
+
React.createElement(View, { style: styles.content },
|
|
20
|
+
React.createElement(Text, { selectable: false, style: [
|
|
21
|
+
{
|
|
22
|
+
color: labelColor,
|
|
23
|
+
},
|
|
24
|
+
textStyles,
|
|
25
|
+
] }, label)),
|
|
26
|
+
React.createElement(Icon, { name: expanded
|
|
27
|
+
? "MaterialIcons/keyboard-arrow-up"
|
|
28
|
+
: "MaterialIcons/keyboard-arrow-down", color: caretColor, size: 24 })),
|
|
29
|
+
expandedInternal ? children : null));
|
|
44
30
|
};
|
|
45
31
|
const styles = StyleSheet.create({
|
|
46
32
|
row: {
|
|
@@ -50,9 +36,6 @@ const styles = StyleSheet.create({
|
|
|
50
36
|
label: {
|
|
51
37
|
fontSize: 16,
|
|
52
38
|
},
|
|
53
|
-
item: {
|
|
54
|
-
margin: 8,
|
|
55
|
-
},
|
|
56
39
|
content: {
|
|
57
40
|
flex: 1,
|
|
58
41
|
justifyContent: "center",
|
|
@@ -10,6 +10,7 @@ import Text from "../Text";
|
|
|
10
10
|
import { withTheme } from "../../theming";
|
|
11
11
|
import type { IconSlot } from "../../interfaces/Icon";
|
|
12
12
|
import type { Theme } from "../../styles/DefaultTheme";
|
|
13
|
+
import { extractStyles } from "../../utilities";
|
|
13
14
|
|
|
14
15
|
type Props = {
|
|
15
16
|
openColor: string;
|
|
@@ -42,9 +43,7 @@ const AccordionGroup = ({
|
|
|
42
43
|
);
|
|
43
44
|
|
|
44
45
|
const handlePressAction = () => {
|
|
45
|
-
|
|
46
|
-
setExpanded(!expanded);
|
|
47
|
-
}
|
|
46
|
+
setExpanded(!expanded);
|
|
48
47
|
};
|
|
49
48
|
|
|
50
49
|
const expandedInternal = expandedProp !== undefined ? expandedProp : expanded;
|
|
@@ -54,64 +53,40 @@ const AccordionGroup = ({
|
|
|
54
53
|
|
|
55
54
|
const labelColor = expanded ? expandedColor : collapsedColor;
|
|
56
55
|
|
|
56
|
+
const { textStyles, viewStyles } = extractStyles(style);
|
|
57
|
+
|
|
57
58
|
return (
|
|
58
59
|
<>
|
|
59
60
|
<Pressable
|
|
60
|
-
style={[
|
|
61
|
+
style={[styles.row, viewStyles]}
|
|
61
62
|
onPress={handlePressAction}
|
|
62
63
|
accessibilityRole="button"
|
|
63
64
|
>
|
|
64
|
-
<
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
styles.label,
|
|
78
|
-
{
|
|
79
|
-
color: labelColor,
|
|
80
|
-
},
|
|
81
|
-
style,
|
|
82
|
-
]}
|
|
83
|
-
>
|
|
84
|
-
{label}
|
|
85
|
-
</Text>
|
|
86
|
-
</View>
|
|
87
|
-
<View style={[styles.item]}>
|
|
88
|
-
<Icon
|
|
89
|
-
name={
|
|
90
|
-
expanded
|
|
91
|
-
? "MaterialIcons/keyboard-arrow-up"
|
|
92
|
-
: "MaterialIcons/keyboard-arrow-down"
|
|
93
|
-
}
|
|
94
|
-
color={caretColor}
|
|
95
|
-
size={24}
|
|
96
|
-
/>
|
|
97
|
-
</View>
|
|
65
|
+
{icon ? <Icon name={icon} size={iconSize} color={labelColor} /> : null}
|
|
66
|
+
<View style={styles.content}>
|
|
67
|
+
<Text
|
|
68
|
+
selectable={false}
|
|
69
|
+
style={[
|
|
70
|
+
{
|
|
71
|
+
color: labelColor,
|
|
72
|
+
},
|
|
73
|
+
textStyles,
|
|
74
|
+
]}
|
|
75
|
+
>
|
|
76
|
+
{label}
|
|
77
|
+
</Text>
|
|
98
78
|
</View>
|
|
79
|
+
<Icon
|
|
80
|
+
name={
|
|
81
|
+
expanded
|
|
82
|
+
? "MaterialIcons/keyboard-arrow-up"
|
|
83
|
+
: "MaterialIcons/keyboard-arrow-down"
|
|
84
|
+
}
|
|
85
|
+
color={caretColor}
|
|
86
|
+
size={24}
|
|
87
|
+
/>
|
|
99
88
|
</Pressable>
|
|
100
|
-
{expandedInternal
|
|
101
|
-
? React.Children.map(children, (child) => {
|
|
102
|
-
if (
|
|
103
|
-
React.isValidElement(child) &&
|
|
104
|
-
!child.props.left &&
|
|
105
|
-
!child.props.right
|
|
106
|
-
) {
|
|
107
|
-
return React.cloneElement(child, {
|
|
108
|
-
style: child.props.style,
|
|
109
|
-
});
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
return child;
|
|
113
|
-
})
|
|
114
|
-
: null}
|
|
89
|
+
{expandedInternal ? children : null}
|
|
115
90
|
</>
|
|
116
91
|
);
|
|
117
92
|
};
|
|
@@ -124,9 +99,6 @@ const styles = StyleSheet.create({
|
|
|
124
99
|
label: {
|
|
125
100
|
fontSize: 16,
|
|
126
101
|
},
|
|
127
|
-
item: {
|
|
128
|
-
margin: 8,
|
|
129
|
-
},
|
|
130
102
|
content: {
|
|
131
103
|
flex: 1,
|
|
132
104
|
justifyContent: "center",
|
package/src/components/FAB.js
CHANGED
|
@@ -28,7 +28,7 @@ const FAB = ({ onPress, disabled, loading, iconName = "MaterialIcons/add", style
|
|
|
28
28
|
},
|
|
29
29
|
];
|
|
30
30
|
}, ...props },
|
|
31
|
-
React.createElement(View, null, loading ? (React.createElement(ActivityIndicator, { size: "small", color: color })) : (React.createElement(Icon, { name: iconName, size:
|
|
31
|
+
React.createElement(View, null, loading ? (React.createElement(ActivityIndicator, { style: size > 50 ? { marginTop: 2, marginLeft: 2 } : undefined, size: size <= 50 ? "small" : "large", color: color })) : (React.createElement(Icon, { name: iconName, size: size, color: color }))))));
|
|
32
32
|
};
|
|
33
33
|
const styles = StyleSheet.create({
|
|
34
34
|
button: {
|
package/src/components/FAB.tsx
CHANGED
|
@@ -77,9 +77,13 @@ const FAB: React.FC<Props> = ({
|
|
|
77
77
|
>
|
|
78
78
|
<View>
|
|
79
79
|
{loading ? (
|
|
80
|
-
<ActivityIndicator
|
|
80
|
+
<ActivityIndicator
|
|
81
|
+
style={size > 50 ? { marginTop: 2, marginLeft: 2 } : undefined}
|
|
82
|
+
size={size <= 50 ? "small" : "large"}
|
|
83
|
+
color={color}
|
|
84
|
+
/>
|
|
81
85
|
) : (
|
|
82
|
-
<Icon name={iconName} size={
|
|
86
|
+
<Icon name={iconName} size={size} color={color} />
|
|
83
87
|
)}
|
|
84
88
|
</View>
|
|
85
89
|
</Pressable>
|
|
@@ -1,14 +1,18 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { View } from "react-native";
|
|
3
3
|
import SwiperComponent from "react-native-web-swiper";
|
|
4
|
-
const Swiper = ({ vertical = false, loop = false, timeout = 0, from = 0, prevTitle = "", nextTitle = "", prevTitleColor
|
|
4
|
+
const Swiper = ({ vertical = false, loop = false, timeout = 0, from = 0, prevTitle = "", nextTitle = "", prevTitleColor, nextTitleColor, dotsTouchable = true, dotColor, dotActiveColor, children, style, }) => (React.createElement(View, { style: style },
|
|
5
5
|
React.createElement(SwiperComponent, { from: from, loop: loop, timeout: timeout, vertical: vertical, controlsProps: {
|
|
6
6
|
prevTitle,
|
|
7
7
|
nextTitle,
|
|
8
8
|
prevTitleStyle: { color: prevTitleColor },
|
|
9
9
|
nextTitleStyle: { color: nextTitleColor },
|
|
10
10
|
dotsTouchable,
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
...(dotColor
|
|
12
|
+
? { dotProps: { badgeStyle: { backgroundColor: dotColor } } }
|
|
13
|
+
: {}),
|
|
14
|
+
...(dotActiveColor
|
|
15
|
+
? { dotActiveStyle: { backgroundColor: dotActiveColor } }
|
|
16
|
+
: {}),
|
|
13
17
|
} }, children)));
|
|
14
18
|
export default Swiper;
|
|
@@ -9,8 +9,8 @@ export interface SwiperProps {
|
|
|
9
9
|
timeout?: number;
|
|
10
10
|
prevTitle?: string;
|
|
11
11
|
nextTitle?: string;
|
|
12
|
-
prevTitleColor
|
|
13
|
-
nextTitleColor
|
|
12
|
+
prevTitleColor?: string;
|
|
13
|
+
nextTitleColor?: string;
|
|
14
14
|
dotsTouchable?: boolean;
|
|
15
15
|
dotColor?: string;
|
|
16
16
|
dotActiveColor?: string;
|
|
@@ -25,8 +25,8 @@ const Swiper = ({
|
|
|
25
25
|
from = 0,
|
|
26
26
|
prevTitle = "",
|
|
27
27
|
nextTitle = "",
|
|
28
|
-
prevTitleColor
|
|
29
|
-
nextTitleColor
|
|
28
|
+
prevTitleColor,
|
|
29
|
+
nextTitleColor,
|
|
30
30
|
dotsTouchable = true,
|
|
31
31
|
dotColor,
|
|
32
32
|
dotActiveColor,
|
|
@@ -45,8 +45,12 @@ const Swiper = ({
|
|
|
45
45
|
prevTitleStyle: { color: prevTitleColor },
|
|
46
46
|
nextTitleStyle: { color: nextTitleColor },
|
|
47
47
|
dotsTouchable,
|
|
48
|
-
|
|
49
|
-
|
|
48
|
+
...(dotColor
|
|
49
|
+
? { dotProps: { badgeStyle: { backgroundColor: dotColor } } }
|
|
50
|
+
: {}),
|
|
51
|
+
...(dotActiveColor
|
|
52
|
+
? { dotActiveStyle: { backgroundColor: dotActiveColor } }
|
|
53
|
+
: {}),
|
|
50
54
|
}}
|
|
51
55
|
>
|
|
52
56
|
{children}
|
|
@@ -1,9 +1,16 @@
|
|
|
1
1
|
import { COMPONENT_TYPES, createNumberProp, createIconProp, createTextProp, createStaticBoolProp, createColorProp, } from "@draftbit/types";
|
|
2
2
|
export const SEED_DATA = {
|
|
3
|
-
name: "Accordion
|
|
3
|
+
name: "Accordion",
|
|
4
4
|
tag: "AccordionGroup",
|
|
5
5
|
description: "An expandable container containing components",
|
|
6
6
|
category: COMPONENT_TYPES.container,
|
|
7
|
+
layout: {
|
|
8
|
+
paddingTop: 8,
|
|
9
|
+
paddingRight: 8,
|
|
10
|
+
paddingBottom: 8,
|
|
11
|
+
paddingLeft: 8,
|
|
12
|
+
fontSize: 16,
|
|
13
|
+
},
|
|
7
14
|
props: {
|
|
8
15
|
openColor: createColorProp({
|
|
9
16
|
label: "Open text color",
|
|
@@ -8,10 +8,17 @@ import {
|
|
|
8
8
|
} from "@draftbit/types";
|
|
9
9
|
|
|
10
10
|
export const SEED_DATA = {
|
|
11
|
-
name: "Accordion
|
|
11
|
+
name: "Accordion",
|
|
12
12
|
tag: "AccordionGroup",
|
|
13
13
|
description: "An expandable container containing components",
|
|
14
14
|
category: COMPONENT_TYPES.container,
|
|
15
|
+
layout: {
|
|
16
|
+
paddingTop: 8,
|
|
17
|
+
paddingRight: 8,
|
|
18
|
+
paddingBottom: 8,
|
|
19
|
+
paddingLeft: 8,
|
|
20
|
+
fontSize: 16,
|
|
21
|
+
},
|
|
15
22
|
props: {
|
|
16
23
|
openColor: createColorProp({
|
|
17
24
|
label: "Open text color",
|
|
@@ -9,7 +9,7 @@ export const SEED_DATA = {
|
|
|
9
9
|
name: "Accordion Item",
|
|
10
10
|
tag: "AccordionItem",
|
|
11
11
|
description: "Item to be used in Accordion",
|
|
12
|
-
category: COMPONENT_TYPES.
|
|
12
|
+
category: COMPONENT_TYPES.deprecated,
|
|
13
13
|
props: {
|
|
14
14
|
icon: createIconProp(),
|
|
15
15
|
label: createTextProp({
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["AccordionGroup.ts"],"names":["SEED_DATA","name","tag","description","category","COMPONENT_TYPES","container","props","openColor","label","closedColor","caretColor","iconSize","defaultValue","expanded","icon"],"mappings":";;;;;;;AAAA;;AASO,MAAMA,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,iBADiB;AAEvBC,EAAAA,GAAG,EAAE,gBAFkB;AAGvBC,EAAAA,WAAW,EAAE,+CAHU;AAIvBC,EAAAA,QAAQ,EAAEC,uBAAgBC,SAJH;AAKvBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,SAAS,EAAE,4BAAgB;AACzBC,MAAAA,KAAK,EAAE;AADkB,KAAhB,CADN;AAILC,IAAAA,WAAW,EAAE,4BAAgB;AAC3BD,MAAAA,KAAK,EAAE;AADoB,KAAhB,CAJR;AAOLE,IAAAA,UAAU,EAAE,4BAAgB;AAC1BF,MAAAA,KAAK,EAAE;AADmB,KAAhB,CAPP;AAULG,IAAAA,QAAQ,EAAE,6BAAiB;AACzBH,MAAAA,KAAK,EAAE,WADkB;AAEzBI,MAAAA,YAAY,EAAE;AAFW,KAAjB,CAVL;AAcLJ,IAAAA,KAAK,EAAE,2BAAe;AACpBA,MAAAA,KAAK,EAAE;AADa,KAAf,CAdF;AAiBLK,IAAAA,QAAQ,EAAE,iCAAqB;AAC7BL,MAAAA,KAAK,EAAE,UADsB;AAE7BN,MAAAA,WAAW,EAAE;AAFgB,KAArB,CAjBL;AAqBLY,IAAAA,IAAI,EAAE;AArBD;AALgB,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 Group\",\n tag: \"AccordionGroup\",\n description: \"An expandable container containing components\",\n category: COMPONENT_TYPES.container,\n props: {\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 iconSize: createNumberProp({\n label: \"Icon size\",\n defaultValue: 24,\n }),\n label: createTextProp({\n label: \"Label\",\n }),\n expanded: createStaticBoolProp({\n label: \"Expanded\",\n description: \"Whether the AccordionGroup should be expanded or not\",\n }),\n icon: createIconProp(),\n },\n};\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["AccordionGroup.ts"],"names":["COMPONENT_TYPES","createNumberProp","createIconProp","createTextProp","createStaticBoolProp","createColorProp","SEED_DATA","name","tag","description","category","container","props","openColor","label","closedColor","caretColor","iconSize","defaultValue","expanded","icon"],"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,iBADiB;AAEvBC,EAAAA,GAAG,EAAE,gBAFkB;AAGvBC,EAAAA,WAAW,EAAE,+CAHU;AAIvBC,EAAAA,QAAQ,EAAEV,eAAe,CAACW,SAJH;AAKvBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,SAAS,EAAER,eAAe,CAAC;AACzBS,MAAAA,KAAK,EAAE;AADkB,KAAD,CADrB;AAILC,IAAAA,WAAW,EAAEV,eAAe,CAAC;AAC3BS,MAAAA,KAAK,EAAE;AADoB,KAAD,CAJvB;AAOLE,IAAAA,UAAU,EAAEX,eAAe,CAAC;AAC1BS,MAAAA,KAAK,EAAE;AADmB,KAAD,CAPtB;AAULG,IAAAA,QAAQ,EAAEhB,gBAAgB,CAAC;AACzBa,MAAAA,KAAK,EAAE,WADkB;AAEzBI,MAAAA,YAAY,EAAE;AAFW,KAAD,CAVrB;AAcLJ,IAAAA,KAAK,EAAEX,cAAc,CAAC;AACpBW,MAAAA,KAAK,EAAE;AADa,KAAD,CAdhB;AAiBLK,IAAAA,QAAQ,EAAEf,oBAAoB,CAAC;AAC7BU,MAAAA,KAAK,EAAE,UADsB;AAE7BL,MAAAA,WAAW,EAAE;AAFgB,KAAD,CAjBzB;AAqBLW,IAAAA,IAAI,EAAElB,cAAc;AArBf;AALgB,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 Group\",\n tag: \"AccordionGroup\",\n description: \"An expandable container containing components\",\n category: COMPONENT_TYPES.container,\n props: {\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 iconSize: createNumberProp({\n label: \"Icon size\",\n defaultValue: 24,\n }),\n label: createTextProp({\n label: \"Label\",\n }),\n expanded: createStaticBoolProp({\n label: \"Expanded\",\n description: \"Whether the AccordionGroup should be expanded or not\",\n }),\n icon: createIconProp(),\n },\n};\n"]}
|