@draftbit/core 43.4.11-d2edf8.3 → 43.4.13-33318c.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 +2 -2
- package/lib/commonjs/components/Accordion/AccordionGroup.js.map +1 -1
- package/lib/commonjs/components/Accordion/AccordionItem.js +21 -5
- package/lib/commonjs/components/Accordion/AccordionItem.js.map +1 -1
- package/lib/commonjs/components/Checkbox/Checkbox.js +23 -6
- package/lib/commonjs/components/Checkbox/Checkbox.js.map +1 -1
- package/lib/commonjs/components/Checkbox/CheckboxGroupRow.js +142 -0
- package/lib/commonjs/components/Checkbox/CheckboxGroupRow.js.map +1 -0
- package/lib/commonjs/components/Checkbox/CheckboxRow.js +55 -46
- package/lib/commonjs/components/Checkbox/CheckboxRow.js.map +1 -1
- package/lib/commonjs/components/Container.js +14 -0
- package/lib/commonjs/components/Container.js.map +1 -1
- package/lib/commonjs/components/DatePicker/DatePicker.js +2 -9
- package/lib/commonjs/components/DatePicker/DatePicker.js.map +1 -1
- package/lib/commonjs/components/Picker/PickerComponent.android.js +20 -6
- package/lib/commonjs/components/Picker/PickerComponent.android.js.map +1 -1
- package/lib/commonjs/components/RadioButton/RadioButtonRow.js +1 -1
- package/lib/commonjs/components/RadioButton/RadioButtonRow.js.map +1 -1
- package/lib/commonjs/components/RowBodyIcon.js.map +1 -1
- package/lib/commonjs/components/RowHeadlineImageIcon.js.map +1 -1
- package/lib/commonjs/components/TextField.js +24 -7
- package/lib/commonjs/components/TextField.js.map +1 -1
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/mappings/ActionSheetCancel.js.map +1 -1
- package/lib/commonjs/mappings/ActionSheetItem.js.map +1 -1
- package/lib/commonjs/mappings/CardContainer.js.map +1 -1
- package/lib/commonjs/mappings/Carousel.js.map +1 -1
- package/lib/commonjs/mappings/Checkbox.js.map +1 -1
- package/lib/commonjs/mappings/CheckboxRow.js +25 -6
- package/lib/commonjs/mappings/CheckboxRow.js.map +1 -1
- package/lib/commonjs/mappings/ImageBackground.js.map +1 -1
- package/lib/commonjs/mappings/MapMarker.js.map +1 -1
- package/lib/commonjs/mappings/ProgressBar.js.map +1 -1
- package/lib/commonjs/mappings/RowBodyIcon.js.map +1 -1
- package/lib/commonjs/mappings/RowHeadlineImageIcon.js.map +1 -1
- package/lib/commonjs/mappings/Slider.js.map +1 -1
- package/lib/commonjs/theming.js.map +1 -1
- package/lib/module/components/Accordion/AccordionGroup.js +2 -2
- package/lib/module/components/Accordion/AccordionGroup.js.map +1 -1
- package/lib/module/components/Checkbox/Checkbox.js +23 -6
- package/lib/module/components/Checkbox/Checkbox.js.map +1 -1
- package/lib/module/components/Checkbox/CheckboxGroupRow.js +120 -0
- package/lib/module/components/Checkbox/CheckboxGroupRow.js.map +1 -0
- package/lib/module/components/Checkbox/CheckboxRow.js +53 -46
- package/lib/module/components/Checkbox/CheckboxRow.js.map +1 -1
- package/lib/module/components/Container.js +14 -0
- package/lib/module/components/Container.js.map +1 -1
- package/lib/module/components/DatePicker/DatePicker.js +3 -9
- package/lib/module/components/DatePicker/DatePicker.js.map +1 -1
- package/lib/module/components/DatePicker/DatePickerComponent.web.js.map +1 -1
- package/lib/module/components/RadioButton/RadioButtonRow.js +1 -1
- package/lib/module/components/RadioButton/RadioButtonRow.js.map +1 -1
- package/lib/module/components/TextField.js +1 -0
- package/lib/module/components/TextField.js.map +1 -1
- package/lib/module/mappings/CheckboxRow.js +26 -7
- package/lib/module/mappings/CheckboxRow.js.map +1 -1
- package/lib/typescript/src/components/Checkbox/CheckboxGroupRow.d.ts +21 -0
- package/lib/typescript/src/components/Checkbox/CheckboxRow.d.ts +3 -7
- package/lib/typescript/src/mappings/CheckboxRow.d.ts +50 -9
- package/package.json +2 -2
- package/src/components/Accordion/AccordionGroup.js +1 -1
- package/src/components/Accordion/AccordionGroup.tsx +1 -1
- package/src/components/Checkbox/Checkbox.js +22 -6
- package/src/components/Checkbox/Checkbox.tsx +25 -6
- package/src/components/Checkbox/CheckboxGroupRow.js +77 -0
- package/src/components/Checkbox/CheckboxGroupRow.tsx +152 -0
- package/src/components/Checkbox/CheckboxRow.js +33 -32
- package/src/components/Checkbox/CheckboxRow.tsx +67 -62
- package/src/components/Container.js +13 -0
- package/src/components/Container.tsx +14 -0
- package/src/components/DatePicker/DatePicker.js +2 -4
- package/src/components/DatePicker/DatePicker.tsx +1 -14
- package/src/components/RadioButton/RadioButtonRow.js +1 -1
- package/src/components/RadioButton/RadioButtonRow.tsx +1 -1
- package/src/components/TextField.js +1 -0
- package/src/components/TextField.tsx +2 -0
- package/src/mappings/CheckboxRow.js +26 -7
- package/src/mappings/CheckboxRow.ts +28 -6
|
@@ -62,9 +62,9 @@ const AccordionGroup = _ref => {
|
|
|
62
62
|
style: styles.content
|
|
63
63
|
}, /*#__PURE__*/React.createElement(_Text.default, {
|
|
64
64
|
selectable: false,
|
|
65
|
-
style: [{
|
|
65
|
+
style: [textStyles, {
|
|
66
66
|
color: labelColor
|
|
67
|
-
}
|
|
67
|
+
}]
|
|
68
68
|
}, label)), /*#__PURE__*/React.createElement(Icon, {
|
|
69
69
|
name: expanded ? "MaterialIcons/keyboard-arrow-up" : "MaterialIcons/keyboard-arrow-down",
|
|
70
70
|
color: caretColor,
|
|
@@ -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","expandedInternal","undefined","expandedColor","colors","primary","collapsedColor","labelColor","textStyles","viewStyles","styles","row","content","color","StyleSheet","create","flexDirection","alignItems","flex","justifyContent","marginRight"],"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,gBACH,oBAAC,IAAD;AACE,IAAA,IAAI,EAAEA,IADR;AAEE,IAAA,IAAI,EAAEC,QAFR;AAGE,IAAA,KAAK,EAAEiB,UAHT;AAIE,IAAA,KAAK,EAAEG,MAAM,CAACrB;AAJhB,IADG,GAOD,IAZN,eAaE,oBAAC,iBAAD;AAAM,IAAA,KAAK,EAAEqB,MAAM,CAACE;AAApB,kBACE,oBAAC,aAAD;AACE,IAAA,UAAU,EAAE,KADd;AAEE,IAAA,KAAK,EAAE,
|
|
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","flex","justifyContent","marginRight"],"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,gBACH,oBAAC,IAAD;AACE,IAAA,IAAI,EAAEA,IADR;AAEE,IAAA,IAAI,EAAEC,QAFR;AAGE,IAAA,KAAK,EAAEiB,UAHT;AAIE,IAAA,KAAK,EAAEG,MAAM,CAACrB;AAJhB,IADG,GAOD,IAZN,eAaE,oBAAC,iBAAD;AAAM,IAAA,KAAK,EAAEqB,MAAM,CAACE;AAApB,kBACE,oBAAC,aAAD;AACE,IAAA,UAAU,EAAE,KADd;AAEE,IAAA,KAAK,EAAE,CACLJ,UADK,EAEL;AACEK,MAAAA,KAAK,EAAEN;AADT,KAFK;AAFT,KASGf,KATH,CADF,CAbF,eA0BE,oBAAC,IAAD;AACE,IAAA,IAAI,EACFE,QAAQ,GACJ,iCADI,GAEJ,mCAJR;AAME,IAAA,KAAK,EAAEN,UANT;AAOE,IAAA,IAAI,EAAE;AAPR,IA1BF,CADF,EAqCGa,gBAAgB,GAAGR,QAAH,GAAc,IArCjC,CADF;AAyCD,CAvED;;AAyEA,MAAMiB,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/B9B,EAAAA,IAAI,EAAE;AACJ+B,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 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 ? (\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={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 content: {\n flex: 1,\n justifyContent: \"center\",\n },\n icon: {\n marginRight: 8,\n },\n});\n\nexport default withTheme(AccordionGroup);\n"]}
|
|
@@ -21,8 +21,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
21
21
|
|
|
22
22
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
23
23
|
|
|
24
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
25
|
-
|
|
26
24
|
const AccordionItem = _ref => {
|
|
27
25
|
let {
|
|
28
26
|
Icon,
|
|
@@ -37,9 +35,10 @@ const AccordionItem = _ref => {
|
|
|
37
35
|
textStyles,
|
|
38
36
|
viewStyles
|
|
39
37
|
} = (0, _utilities.extractStyles)(style);
|
|
40
|
-
return /*#__PURE__*/React.createElement(_reactNative.Pressable,
|
|
41
|
-
style: [styles.container, viewStyles]
|
|
42
|
-
|
|
38
|
+
return /*#__PURE__*/React.createElement(_reactNative.Pressable, {
|
|
39
|
+
style: [styles.container, viewStyles],
|
|
40
|
+
...rest
|
|
41
|
+
}, /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
43
42
|
style: styles.row
|
|
44
43
|
}, icon ? /*#__PURE__*/React.createElement(Icon, {
|
|
45
44
|
name: icon,
|
|
@@ -74,5 +73,22 @@ const styles = _reactNative.StyleSheet.create({
|
|
|
74
73
|
|
|
75
74
|
var _default = (0, _theming.withTheme)(AccordionItem);
|
|
76
75
|
|
|
76
|
+
exports.default = _default;
|
|
77
|
+
//# sourceMappingURL=AccordionItem.js.map flexDirection: "row",
|
|
78
|
+
alignItems: "center",
|
|
79
|
+
paddingLeft: 8
|
|
80
|
+
},
|
|
81
|
+
item: {
|
|
82
|
+
marginVertical: 6,
|
|
83
|
+
paddingLeft: 8
|
|
84
|
+
},
|
|
85
|
+
content: {
|
|
86
|
+
flex: 1,
|
|
87
|
+
justifyContent: "center"
|
|
88
|
+
}
|
|
89
|
+
});
|
|
90
|
+
|
|
91
|
+
var _default = (0, _theming.withTheme)(AccordionItem);
|
|
92
|
+
|
|
77
93
|
exports.default = _default;
|
|
78
94
|
//# sourceMappingURL=AccordionItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["AccordionItem.
|
|
1
|
+
{"version":3,"sources":["AccordionItem.js"],"names":["AccordionItem","Icon","icon","label","style","iconColor","theme","rest","textStyles","viewStyles","React","createElement","Pressable","styles","container","View","row","name","size","color","colors","primary","item","content","Text","selectable","StyleSheet","create","padding","flexDirection","alignItems","paddingLeft","marginVertical","flex","justifyContent"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AACA,MAAMA,aAAa,GAAG,QAA6D;AAAA,MAA5D;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,IAAR;AAAcC,IAAAA,KAAd;AAAqBC,IAAAA,KAArB;AAA4BC,IAAAA,SAA5B;AAAuCC,IAAAA,KAAvC;AAA8C,OAAGC;AAAjD,GAA4D;AAC/E,QAAM;AAAEC,IAAAA,UAAF;AAAcC,IAAAA;AAAd,MAA6B,8BAAcL,KAAd,CAAnC;AACA,sBAAQM,KAAK,CAACC,aAAN,CAAoBC,sBAApB,EAA+B;AAAER,IAAAA,KAAK,EAAE,CAACS,MAAM,CAACC,SAAR,EAAmBL,UAAnB,CAAT;AAAyC,OAAGF;AAA5C,GAA/B,eACJG,KAAK,CAACC,aAAN,CAAoBI,iBAApB,EAA0B;AAAEX,IAAAA,KAAK,EAAES,MAAM,CAACG;AAAhB,GAA1B,EACId,IAAI,gBAAIQ,KAAK,CAACC,aAAN,CAAoBV,IAApB,EAA0B;AAAEgB,IAAAA,IAAI,EAAEf,IAAR;AAAcgB,IAAAA,IAAI,EAAE,EAApB;AAAwBC,IAAAA,KAAK,EAAEd,SAAS,IAAIC,KAAK,CAACc,MAAN,CAAaC;AAAzD,GAA1B,CAAJ,GAAqG,IAD7G,eAEIX,KAAK,CAACC,aAAN,CAAoBI,iBAApB,EAA0B;AAAEX,IAAAA,KAAK,EAAE,CAACS,MAAM,CAACS,IAAR,EAAcT,MAAM,CAACU,OAArB;AAAT,GAA1B,eACIb,KAAK,CAACC,aAAN,CAAoBa,aAApB,EAA0B;AAAEC,IAAAA,UAAU,EAAE,KAAd;AAAqBrB,IAAAA,KAAK,EAAEI;AAA5B,GAA1B,EAAoEL,KAApE,CADJ,CAFJ,CADI,CAAR;AAKH,CAPD;;AAQA,MAAMU,MAAM,GAAGa,wBAAWC,MAAX,CAAkB;AAC7Bb,EAAAA,SAAS,EAAE;AACPc,IAAAA,OAAO,EAAE;AADF,GADkB;AAI7BZ,EAAAA,GAAG,EAAE;AACDa,IAAAA,aAAa,EAAE,KADd;AAEDC,IAAAA,UAAU,EAAE,QAFX;AAGDC,IAAAA,WAAW,EAAE;AAHZ,GAJwB;AAS7BT,EAAAA,IAAI,EAAE;AACFU,IAAAA,cAAc,EAAE,CADd;AAEFD,IAAAA,WAAW,EAAE;AAFX,GATuB;AAa7BR,EAAAA,OAAO,EAAE;AACLU,IAAAA,IAAI,EAAE,CADD;AAELC,IAAAA,cAAc,EAAE;AAFX;AAboB,CAAlB,CAAf;;eAkBe,wBAAUlC,aAAV,C","sourcesContent":["import * as React from \"react\";\nimport { Pressable, StyleSheet, View, } from \"react-native\";\nimport Text from \"../Text\";\nimport { extractStyles } from \"../../utilities\";\nimport { withTheme } from \"../../theming\";\nconst AccordionItem = ({ Icon, icon, label, style, iconColor, theme, ...rest }) => {\n const { textStyles, viewStyles } = extractStyles(style);\n return (React.createElement(Pressable, { style: [styles.container, viewStyles], ...rest },\n React.createElement(View, { style: styles.row },\n icon ? (React.createElement(Icon, { name: icon, size: 24, color: iconColor || theme.colors.primary })) : null,\n React.createElement(View, { style: [styles.item, styles.content] },\n React.createElement(Text, { selectable: false, style: textStyles }, label)))));\n};\nconst styles = StyleSheet.create({\n container: {\n padding: 8,\n },\n row: {\n flexDirection: \"row\",\n alignItems: \"center\",\n paddingLeft: 8,\n },\n item: {\n marginVertical: 6,\n paddingLeft: 8,\n },\n content: {\n flex: 1,\n justifyContent: \"center\",\n },\n});\nexport default withTheme(AccordionItem);\n"]}
|
|
@@ -28,7 +28,7 @@ const Checkbox = _ref => {
|
|
|
28
28
|
Icon,
|
|
29
29
|
status,
|
|
30
30
|
disabled = false,
|
|
31
|
-
onPress
|
|
31
|
+
onPress,
|
|
32
32
|
onCheck,
|
|
33
33
|
onUncheck,
|
|
34
34
|
color,
|
|
@@ -40,6 +40,23 @@ const Checkbox = _ref => {
|
|
|
40
40
|
style,
|
|
41
41
|
...rest
|
|
42
42
|
} = _ref;
|
|
43
|
+
console.log("Checbox prop", {
|
|
44
|
+
Icon,
|
|
45
|
+
status,
|
|
46
|
+
disabled,
|
|
47
|
+
onPress,
|
|
48
|
+
onCheck,
|
|
49
|
+
onUncheck,
|
|
50
|
+
color,
|
|
51
|
+
uncheckedColor,
|
|
52
|
+
defaultValue,
|
|
53
|
+
checkedIcon,
|
|
54
|
+
uncheckedIcon,
|
|
55
|
+
size,
|
|
56
|
+
style,
|
|
57
|
+
rest: { ...rest
|
|
58
|
+
}
|
|
59
|
+
});
|
|
43
60
|
const [internalValue, setInternalValue] = React.useState(status || defaultValue || false);
|
|
44
61
|
React.useEffect(() => {
|
|
45
62
|
if (status != null) {
|
|
@@ -62,14 +79,14 @@ const Checkbox = _ref => {
|
|
|
62
79
|
const handlePress = () => {
|
|
63
80
|
const newValue = !internalValue;
|
|
64
81
|
setInternalValue(newValue);
|
|
65
|
-
onPress(newValue);
|
|
82
|
+
onPress === null || onPress === void 0 ? void 0 : onPress(newValue);
|
|
66
83
|
|
|
67
|
-
if (
|
|
68
|
-
onCheck();
|
|
84
|
+
if (newValue) {
|
|
85
|
+
onCheck === null || onCheck === void 0 ? void 0 : onCheck();
|
|
69
86
|
}
|
|
70
87
|
|
|
71
|
-
if (
|
|
72
|
-
onUncheck();
|
|
88
|
+
if (!newValue) {
|
|
89
|
+
onUncheck === null || onUncheck === void 0 ? void 0 : onUncheck();
|
|
73
90
|
}
|
|
74
91
|
};
|
|
75
92
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Checkbox.tsx"],"names":["Checkbox","Icon","status","disabled","onPress","onCheck","onUncheck","color","uncheckedColor","defaultValue","checkedIcon","uncheckedIcon","size","style","rest","internalValue","setInternalValue","React","useState","useEffect","previousDefaultValue","Boolean","colors","checkboxColor","primary","handlePress","newValue","styles","container","width","height","icon","StyleSheet","absoluteFill","fillContainer","fill","opacity","borderColor","create","borderRadius","alignItems","justifyContent","alignSelf"],"mappings":";;;;;;;AAAA;;AACA;;AAOA;;AAGA;;AACA;;;;;;;;;;AAiBA,MAAMA,QAAsE,GAC1E,QAeM;AAAA,MAfL;AACCC,IAAAA,IADD;AAECC,IAAAA,MAFD;AAGCC,IAAAA,QAAQ,GAAG,KAHZ;AAICC,IAAAA,
|
|
1
|
+
{"version":3,"sources":["Checkbox.tsx"],"names":["Checkbox","Icon","status","disabled","onPress","onCheck","onUncheck","color","uncheckedColor","defaultValue","checkedIcon","uncheckedIcon","size","style","rest","console","log","internalValue","setInternalValue","React","useState","useEffect","previousDefaultValue","Boolean","colors","checkboxColor","primary","handlePress","newValue","styles","container","width","height","icon","StyleSheet","absoluteFill","fillContainer","fill","opacity","borderColor","create","borderRadius","alignItems","justifyContent","alignSelf"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport {\n View,\n StyleSheet,\n TouchableHighlightProps,\n StyleProp,\n ViewStyle,\n} from \"react-native\";\nimport { useTheme } from \"../../theming\";\nimport type { IconSlot } from \"../../interfaces/Icon\";\n\nimport Touchable from \"../Touchable\";\nimport { usePrevious } from \"../../hooks\";\n\nexport interface CheckboxProps {\n status?: boolean;\n disabled?: boolean;\n onPress?: (checked: boolean) => void;\n onCheck?: () => void;\n onUncheck?: () => void;\n color?: string;\n uncheckedColor?: string;\n checkedIcon?: string;\n uncheckedIcon?: string;\n defaultValue?: boolean;\n size?: number;\n style?: StyleProp<ViewStyle>;\n}\n\nconst Checkbox: React.FC<CheckboxProps & TouchableHighlightProps & IconSlot> =\n ({\n Icon,\n status,\n disabled = false,\n onPress,\n onCheck,\n onUncheck,\n color,\n uncheckedColor,\n defaultValue,\n checkedIcon = \"MaterialCommunityIcons/checkbox-marked\",\n uncheckedIcon = \"MaterialCommunityIcons/checkbox-blank-outline\",\n size = 24,\n style,\n ...rest\n }) => {\n console.log(\"Checbox prop\", {\n Icon,\n status,\n disabled,\n onPress,\n onCheck,\n onUncheck,\n color,\n uncheckedColor,\n defaultValue,\n checkedIcon,\n uncheckedIcon,\n size,\n style,\n rest: { ...rest },\n });\n\n const [internalValue, setInternalValue] = React.useState<boolean>(\n status || defaultValue || false\n );\n\n React.useEffect(() => {\n if (status != null) {\n setInternalValue(status);\n }\n }, [status]);\n\n // This special logic is to handle weird APIs like Airtable that return\n // true or undefined for a boolean\n const previousDefaultValue = usePrevious(defaultValue) as\n | boolean\n | undefined;\n\n React.useEffect(() => {\n if (defaultValue !== previousDefaultValue) {\n setInternalValue(Boolean(defaultValue));\n }\n }, [defaultValue, previousDefaultValue]);\n\n const { colors } = useTheme();\n\n const checkboxColor = internalValue\n ? color || colors.primary\n : uncheckedColor || colors.primary;\n\n const handlePress = () => {\n const newValue = !internalValue;\n\n setInternalValue(newValue);\n onPress?.(newValue);\n\n if (newValue) {\n onCheck?.();\n }\n\n if (!newValue) {\n onUncheck?.();\n }\n };\n\n return (\n <Touchable\n {...rest}\n onPress={handlePress}\n disabled={disabled}\n accessibilityState={{ disabled }}\n accessibilityRole=\"button\"\n accessibilityLiveRegion=\"polite\"\n style={[styles.container, style, { width: size, height: size }]}\n >\n <Icon\n style={styles.icon}\n name={internalValue ? checkedIcon : uncheckedIcon}\n size={size}\n color={checkboxColor}\n />\n <View style={[StyleSheet.absoluteFill, styles.fillContainer]}>\n <View\n style={[\n styles.fill,\n { opacity: disabled ? 0.5 : 1 },\n { borderColor: checkboxColor },\n ]}\n />\n </View>\n </Touchable>\n );\n };\n\nconst styles = StyleSheet.create({\n container: {\n borderRadius: 18,\n },\n fillContainer: {\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n icon: {\n alignSelf: \"center\",\n },\n fill: {\n borderRadius: 5,\n width: 30,\n height: 30,\n alignSelf: \"center\",\n },\n});\n\nexport default Checkbox;\n"]}
|
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = exports.Direction = void 0;
|
|
7
|
+
|
|
8
|
+
var React = _interopRequireWildcard(require("react"));
|
|
9
|
+
|
|
10
|
+
var _reactNative = require("react-native");
|
|
11
|
+
|
|
12
|
+
var _Checkbox = _interopRequireDefault(require("./Checkbox"));
|
|
13
|
+
|
|
14
|
+
var _Text = _interopRequireDefault(require("../Text"));
|
|
15
|
+
|
|
16
|
+
var _context = require("./context");
|
|
17
|
+
|
|
18
|
+
var _Touchable = _interopRequireDefault(require("../Touchable"));
|
|
19
|
+
|
|
20
|
+
var _utilities = require("../../utilities");
|
|
21
|
+
|
|
22
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
|
+
|
|
24
|
+
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); }
|
|
25
|
+
|
|
26
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
27
|
+
|
|
28
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
29
|
+
|
|
30
|
+
let Direction;
|
|
31
|
+
exports.Direction = Direction;
|
|
32
|
+
|
|
33
|
+
(function (Direction) {
|
|
34
|
+
Direction["Row"] = "row";
|
|
35
|
+
Direction["RowReverse"] = "row-reverse";
|
|
36
|
+
})(Direction || (exports.Direction = Direction = {}));
|
|
37
|
+
|
|
38
|
+
const getCheckboxAlignment = (parentDirection, direction) => {
|
|
39
|
+
if (parentDirection === _context.Direction.Horizontal) {
|
|
40
|
+
return direction === Direction.Row ? "flex-start" : "flex-end";
|
|
41
|
+
} else if (direction === Direction.RowReverse) {
|
|
42
|
+
return "flex-start";
|
|
43
|
+
} else {
|
|
44
|
+
return "flex-end";
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
const renderLabel = (value, labelStyle, textStyle) => {
|
|
49
|
+
if (typeof value === "string") {
|
|
50
|
+
return /*#__PURE__*/React.createElement(_Text.default, {
|
|
51
|
+
style: [labelStyle, textStyle]
|
|
52
|
+
}, value);
|
|
53
|
+
} else {
|
|
54
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, value);
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
const CheckboxGroupRow = _ref => {
|
|
59
|
+
let {
|
|
60
|
+
Icon,
|
|
61
|
+
label = "Label",
|
|
62
|
+
status,
|
|
63
|
+
value,
|
|
64
|
+
onPress,
|
|
65
|
+
labelContainerStyle,
|
|
66
|
+
labelStyle,
|
|
67
|
+
checkboxStyle,
|
|
68
|
+
direction = Direction.Row,
|
|
69
|
+
disabled,
|
|
70
|
+
style,
|
|
71
|
+
color,
|
|
72
|
+
uncheckedColor,
|
|
73
|
+
...rest
|
|
74
|
+
} = _ref;
|
|
75
|
+
const {
|
|
76
|
+
values: selectedValues,
|
|
77
|
+
onValueChange,
|
|
78
|
+
direction: parentDirection
|
|
79
|
+
} = (0, _context.useCheckboxGroupContext)();
|
|
80
|
+
const values = Array.isArray(selectedValues) ? selectedValues : [];
|
|
81
|
+
const isChecked = status || values.includes(value);
|
|
82
|
+
|
|
83
|
+
const handlePress = () => {
|
|
84
|
+
if (!disabled) {
|
|
85
|
+
onPress === null || onPress === void 0 ? void 0 : onPress(!isChecked);
|
|
86
|
+
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(value, !isChecked);
|
|
87
|
+
}
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
const {
|
|
91
|
+
textStyles,
|
|
92
|
+
viewStyles
|
|
93
|
+
} = (0, _utilities.extractStyles)(style);
|
|
94
|
+
return /*#__PURE__*/React.createElement(_Touchable.default, _extends({
|
|
95
|
+
onPress: handlePress,
|
|
96
|
+
style: [styles.mainParent, {
|
|
97
|
+
flexDirection: direction
|
|
98
|
+
}, viewStyles],
|
|
99
|
+
disabled: disabled
|
|
100
|
+
}, rest), /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
101
|
+
style: [styles.label, {
|
|
102
|
+
alignItems: direction === Direction.Row ? "flex-start" : "flex-end"
|
|
103
|
+
}, labelContainerStyle]
|
|
104
|
+
}, renderLabel(label, labelStyle, textStyles)), /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
105
|
+
style: {
|
|
106
|
+
flex: 1,
|
|
107
|
+
alignItems: getCheckboxAlignment(parentDirection, direction)
|
|
108
|
+
}
|
|
109
|
+
}, /*#__PURE__*/React.createElement(_Checkbox.default, {
|
|
110
|
+
Icon: Icon,
|
|
111
|
+
status: isChecked,
|
|
112
|
+
onPress: handlePress,
|
|
113
|
+
style: checkboxStyle,
|
|
114
|
+
disabled: disabled,
|
|
115
|
+
color: color,
|
|
116
|
+
uncheckedColor: uncheckedColor
|
|
117
|
+
})));
|
|
118
|
+
};
|
|
119
|
+
|
|
120
|
+
const styles = _reactNative.StyleSheet.create({
|
|
121
|
+
mainParent: {
|
|
122
|
+
alignItems: "center",
|
|
123
|
+
justifyContent: "space-around",
|
|
124
|
+
paddingStart: 20,
|
|
125
|
+
minHeight: 50,
|
|
126
|
+
paddingEnd: 20,
|
|
127
|
+
display: "flex",
|
|
128
|
+
..._reactNative.Platform.select({
|
|
129
|
+
web: {
|
|
130
|
+
cursor: "pointer",
|
|
131
|
+
userSelect: "none"
|
|
132
|
+
}
|
|
133
|
+
})
|
|
134
|
+
},
|
|
135
|
+
label: {
|
|
136
|
+
flex: 3
|
|
137
|
+
}
|
|
138
|
+
});
|
|
139
|
+
|
|
140
|
+
var _default = CheckboxGroupRow;
|
|
141
|
+
exports.default = _default;
|
|
142
|
+
//# sourceMappingURL=CheckboxGroupRow.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["CheckboxGroupRow.tsx"],"names":["Direction","getCheckboxAlignment","parentDirection","direction","GroupDirection","Horizontal","Row","RowReverse","renderLabel","value","labelStyle","textStyle","CheckboxGroupRow","Icon","label","status","onPress","labelContainerStyle","checkboxStyle","disabled","style","color","uncheckedColor","rest","values","selectedValues","onValueChange","Array","isArray","isChecked","includes","handlePress","textStyles","viewStyles","styles","mainParent","flexDirection","alignItems","flex","StyleSheet","create","justifyContent","paddingStart","minHeight","paddingEnd","display","Platform","select","web","cursor","userSelect"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport {\n StyleProp,\n ViewStyle,\n StyleSheet,\n TextStyle,\n View,\n Platform,\n} from \"react-native\";\nimport Checkbox, { CheckboxProps } from \"./Checkbox\";\nimport Text from \"../Text\";\nimport { useCheckboxGroupContext } from \"./context\";\nimport type { IconSlot } from \"../../interfaces/Icon\";\nimport { Direction as GroupDirection } from \"./context\";\nimport Touchable from \"../Touchable\";\nimport { extractStyles } from \"../../utilities\";\n\nexport enum Direction {\n Row = \"row\",\n RowReverse = \"row-reverse\",\n}\n\nexport interface CheckboxGroupRowProps extends Omit<CheckboxProps, \"onPress\"> {\n label: string | React.ReactNode;\n value: string; // A string that this checkbox represents\n labelContainerStyle: StyleProp<ViewStyle>;\n checkboxStyle?: StyleProp<ViewStyle>;\n labelStyle?: StyleProp<TextStyle>;\n onPress?: (value: boolean) => void;\n direction?: Direction;\n color: string;\n unselectedColor: string;\n}\n\nconst getCheckboxAlignment = (\n parentDirection: GroupDirection | undefined,\n direction: Direction\n) => {\n if (parentDirection === GroupDirection.Horizontal) {\n return direction === Direction.Row ? \"flex-start\" : \"flex-end\";\n } else if (direction === Direction.RowReverse) {\n return \"flex-start\";\n } else {\n return \"flex-end\";\n }\n};\n\nconst renderLabel = (\n value: string | React.ReactNode,\n labelStyle: StyleProp<TextStyle>,\n textStyle: StyleProp<TextStyle>\n) => {\n if (typeof value === \"string\") {\n return <Text style={[labelStyle, textStyle]}>{value}</Text>;\n } else {\n return <>{value}</>;\n }\n};\n\nconst CheckboxGroupRow: React.FC<CheckboxGroupRowProps & IconSlot> = ({\n Icon,\n label = \"Label\",\n status,\n value,\n onPress,\n labelContainerStyle,\n labelStyle,\n checkboxStyle,\n direction = Direction.Row,\n disabled,\n style,\n color,\n uncheckedColor,\n ...rest\n}) => {\n const {\n values: selectedValues,\n onValueChange,\n direction: parentDirection,\n } = useCheckboxGroupContext();\n\n const values = Array.isArray(selectedValues) ? selectedValues : [];\n const isChecked = status || values.includes(value);\n\n const handlePress = () => {\n if (!disabled) {\n onPress?.(!isChecked);\n onValueChange?.(value, !isChecked);\n }\n };\n\n const { textStyles, viewStyles } = extractStyles(style);\n\n return (\n <Touchable\n onPress={handlePress}\n style={[styles.mainParent, { flexDirection: direction }, viewStyles]}\n disabled={disabled}\n {...rest}\n >\n <View\n style={[\n styles.label,\n {\n alignItems: direction === Direction.Row ? \"flex-start\" : \"flex-end\",\n },\n labelContainerStyle,\n ]}\n >\n {renderLabel(label, labelStyle, textStyles)}\n </View>\n <View\n style={{\n flex: 1,\n alignItems: getCheckboxAlignment(parentDirection, direction),\n }}\n >\n <Checkbox\n Icon={Icon}\n status={isChecked}\n onPress={handlePress}\n style={checkboxStyle}\n disabled={disabled}\n color={color}\n uncheckedColor={uncheckedColor}\n />\n </View>\n </Touchable>\n );\n};\n\nconst styles = StyleSheet.create({\n mainParent: {\n alignItems: \"center\",\n justifyContent: \"space-around\",\n paddingStart: 20,\n minHeight: 50,\n paddingEnd: 20,\n display: \"flex\",\n ...Platform.select({\n web: {\n cursor: \"pointer\",\n userSelect: \"none\",\n },\n }),\n },\n label: {\n flex: 3,\n },\n});\n\nexport default CheckboxGroupRow;\n"]}
|
|
@@ -9,15 +9,17 @@ var React = _interopRequireWildcard(require("react"));
|
|
|
9
9
|
|
|
10
10
|
var _reactNative = require("react-native");
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var _lodash = require("lodash");
|
|
13
13
|
|
|
14
|
-
var
|
|
14
|
+
var _utilities = require("../../utilities");
|
|
15
|
+
|
|
16
|
+
var _hooks = require("../../hooks");
|
|
15
17
|
|
|
16
|
-
var
|
|
18
|
+
var _Text = _interopRequireDefault(require("../Text"));
|
|
17
19
|
|
|
18
20
|
var _Touchable = _interopRequireDefault(require("../Touchable"));
|
|
19
21
|
|
|
20
|
-
var
|
|
22
|
+
var _Checkbox = _interopRequireDefault(require("./Checkbox"));
|
|
21
23
|
|
|
22
24
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
25
|
|
|
@@ -35,20 +37,10 @@ exports.Direction = Direction;
|
|
|
35
37
|
Direction["RowReverse"] = "row-reverse";
|
|
36
38
|
})(Direction || (exports.Direction = Direction = {}));
|
|
37
39
|
|
|
38
|
-
const getCheckboxAlignment = (parentDirection, direction) => {
|
|
39
|
-
if (parentDirection === _context.Direction.Horizontal) {
|
|
40
|
-
return direction === Direction.Row ? "flex-start" : "flex-end";
|
|
41
|
-
} else if (direction === Direction.RowReverse) {
|
|
42
|
-
return "flex-start";
|
|
43
|
-
} else {
|
|
44
|
-
return "flex-end";
|
|
45
|
-
}
|
|
46
|
-
};
|
|
47
|
-
|
|
48
40
|
const renderLabel = (value, labelStyle, textStyle) => {
|
|
49
|
-
if (
|
|
41
|
+
if ((0, _lodash.isString)(value)) {
|
|
50
42
|
return /*#__PURE__*/React.createElement(_Text.default, {
|
|
51
|
-
style: [
|
|
43
|
+
style: [textStyle, labelStyle]
|
|
52
44
|
}, value);
|
|
53
45
|
} else {
|
|
54
46
|
return /*#__PURE__*/React.createElement(React.Fragment, null, value);
|
|
@@ -57,33 +49,52 @@ const renderLabel = (value, labelStyle, textStyle) => {
|
|
|
57
49
|
|
|
58
50
|
const CheckboxRow = _ref => {
|
|
59
51
|
let {
|
|
60
|
-
Icon,
|
|
61
52
|
label = "Label",
|
|
62
|
-
status,
|
|
63
|
-
value,
|
|
64
|
-
onPress = () => {},
|
|
65
|
-
labelContainerStyle,
|
|
66
53
|
labelStyle,
|
|
54
|
+
labelContainerStyle,
|
|
67
55
|
checkboxStyle,
|
|
68
56
|
direction = Direction.Row,
|
|
69
|
-
|
|
70
|
-
|
|
57
|
+
Icon,
|
|
58
|
+
status,
|
|
59
|
+
disabled = false,
|
|
60
|
+
onPress,
|
|
61
|
+
onCheck,
|
|
62
|
+
onUncheck,
|
|
71
63
|
color,
|
|
72
64
|
uncheckedColor,
|
|
65
|
+
defaultValue,
|
|
66
|
+
checkedIcon,
|
|
67
|
+
uncheckedIcon,
|
|
68
|
+
size,
|
|
69
|
+
style,
|
|
73
70
|
...rest
|
|
74
71
|
} = _ref;
|
|
75
|
-
const
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
72
|
+
const [internalValue, setInternalValue] = React.useState(status || defaultValue || false);
|
|
73
|
+
React.useEffect(() => {
|
|
74
|
+
if (status != null) {
|
|
75
|
+
setInternalValue(status);
|
|
76
|
+
}
|
|
77
|
+
}, [status]); // This special logic is to handle weird APIs like Airtable that return
|
|
78
|
+
// true or undefined for a boolean
|
|
79
|
+
|
|
80
|
+
const previousDefaultValue = (0, _hooks.usePrevious)(defaultValue);
|
|
81
|
+
React.useEffect(() => {
|
|
82
|
+
if (defaultValue !== previousDefaultValue) {
|
|
83
|
+
setInternalValue(Boolean(defaultValue));
|
|
84
|
+
}
|
|
85
|
+
}, [defaultValue, previousDefaultValue]);
|
|
82
86
|
|
|
83
87
|
const handlePress = () => {
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
88
|
+
const newValue = !internalValue;
|
|
89
|
+
setInternalValue(newValue);
|
|
90
|
+
onPress === null || onPress === void 0 ? void 0 : onPress(newValue);
|
|
91
|
+
|
|
92
|
+
if (newValue) {
|
|
93
|
+
onCheck === null || onCheck === void 0 ? void 0 : onCheck();
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
if (!newValue) {
|
|
97
|
+
onUncheck === null || onUncheck === void 0 ? void 0 : onUncheck();
|
|
87
98
|
}
|
|
88
99
|
};
|
|
89
100
|
|
|
@@ -93,28 +104,26 @@ const CheckboxRow = _ref => {
|
|
|
93
104
|
} = (0, _utilities.extractStyles)(style);
|
|
94
105
|
return /*#__PURE__*/React.createElement(_Touchable.default, _extends({
|
|
95
106
|
onPress: handlePress,
|
|
96
|
-
style: [styles.mainParent, {
|
|
107
|
+
style: [viewStyles, styles.mainParent, {
|
|
97
108
|
flexDirection: direction
|
|
98
|
-
}
|
|
109
|
+
}],
|
|
99
110
|
disabled: disabled
|
|
100
111
|
}, rest), /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
101
112
|
style: [styles.label, {
|
|
102
113
|
alignItems: direction === Direction.Row ? "flex-start" : "flex-end"
|
|
103
114
|
}, labelContainerStyle]
|
|
104
|
-
}, renderLabel(label,
|
|
105
|
-
style: {
|
|
106
|
-
flex: 1,
|
|
107
|
-
alignItems: getCheckboxAlignment(parentDirection, direction)
|
|
108
|
-
}
|
|
109
|
-
}, /*#__PURE__*/React.createElement(_Checkbox.default, {
|
|
115
|
+
}, renderLabel(label, textStyles, labelStyle)), /*#__PURE__*/React.createElement(_Checkbox.default, {
|
|
110
116
|
Icon: Icon,
|
|
111
|
-
status:
|
|
112
|
-
onPress: handlePress,
|
|
117
|
+
status: internalValue,
|
|
113
118
|
style: checkboxStyle,
|
|
114
119
|
disabled: disabled,
|
|
120
|
+
onPress: handlePress,
|
|
115
121
|
color: color,
|
|
116
|
-
uncheckedColor: uncheckedColor
|
|
117
|
-
|
|
122
|
+
uncheckedColor: uncheckedColor,
|
|
123
|
+
checkedIcon: checkedIcon,
|
|
124
|
+
uncheckedIcon: uncheckedIcon,
|
|
125
|
+
size: size
|
|
126
|
+
}));
|
|
118
127
|
};
|
|
119
128
|
|
|
120
129
|
const styles = _reactNative.StyleSheet.create({
|
|
@@ -124,7 +133,7 @@ const styles = _reactNative.StyleSheet.create({
|
|
|
124
133
|
paddingStart: 20,
|
|
125
134
|
minHeight: 50,
|
|
126
135
|
paddingEnd: 20,
|
|
127
|
-
|
|
136
|
+
display: "flex",
|
|
128
137
|
..._reactNative.Platform.select({
|
|
129
138
|
web: {
|
|
130
139
|
cursor: "pointer",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["CheckboxRow.tsx"],"names":["Direction","
|
|
1
|
+
{"version":3,"sources":["CheckboxRow.tsx"],"names":["Direction","renderLabel","value","labelStyle","textStyle","CheckboxRow","label","labelContainerStyle","checkboxStyle","direction","Row","Icon","status","disabled","onPress","onCheck","onUncheck","color","uncheckedColor","defaultValue","checkedIcon","uncheckedIcon","size","style","rest","internalValue","setInternalValue","React","useState","useEffect","previousDefaultValue","Boolean","handlePress","newValue","textStyles","viewStyles","styles","mainParent","flexDirection","alignItems","StyleSheet","create","justifyContent","paddingStart","minHeight","paddingEnd","display","Platform","select","web","cursor","userSelect","flex"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport {\n StyleProp,\n ViewStyle,\n StyleSheet,\n TextStyle,\n View,\n Platform,\n} from \"react-native\";\nimport { isString } from \"lodash\";\n\nimport type { IconSlot } from \"../../interfaces/Icon\";\nimport { extractStyles } from \"../../utilities\";\nimport { usePrevious } from \"../../hooks\";\nimport Text from \"../Text\";\nimport Touchable from \"../Touchable\";\nimport Checkbox, { CheckboxProps } from \"./Checkbox\";\n\nexport enum Direction {\n Row = \"row\",\n RowReverse = \"row-reverse\",\n}\n\nexport interface CheckboxRowProps extends CheckboxProps {\n label: string | React.ReactNode;\n labelStyle?: StyleProp<TextStyle>;\n labelContainerStyle: StyleProp<ViewStyle>;\n checkboxStyle?: StyleProp<ViewStyle>;\n direction?: Direction;\n}\n\nconst renderLabel = (\n value: string | React.ReactNode,\n labelStyle: StyleProp<TextStyle>,\n textStyle: StyleProp<TextStyle>\n) => {\n if (isString(value)) {\n return <Text style={[textStyle, labelStyle]}>{value}</Text>;\n } else {\n return <>{value}</>;\n }\n};\n\nconst CheckboxRow: React.FC<CheckboxRowProps & IconSlot> = ({\n label = \"Label\",\n labelStyle,\n labelContainerStyle,\n checkboxStyle,\n direction = Direction.Row,\n Icon,\n status,\n disabled = false,\n onPress,\n onCheck,\n onUncheck,\n color,\n uncheckedColor,\n defaultValue,\n checkedIcon,\n uncheckedIcon,\n size,\n style,\n ...rest\n}) => {\n const [internalValue, setInternalValue] = React.useState<boolean>(\n status || defaultValue || false\n );\n\n React.useEffect(() => {\n if (status != null) {\n setInternalValue(status);\n }\n }, [status]);\n\n // This special logic is to handle weird APIs like Airtable that return\n // true or undefined for a boolean\n const previousDefaultValue = usePrevious(defaultValue) as boolean | undefined;\n\n React.useEffect(() => {\n if (defaultValue !== previousDefaultValue) {\n setInternalValue(Boolean(defaultValue));\n }\n }, [defaultValue, previousDefaultValue]);\n\n const handlePress = () => {\n const newValue = !internalValue;\n\n setInternalValue(newValue);\n onPress?.(newValue);\n\n if (newValue) {\n onCheck?.();\n }\n\n if (!newValue) {\n onUncheck?.();\n }\n };\n\n const { textStyles, viewStyles } = extractStyles(style);\n\n return (\n <Touchable\n onPress={handlePress}\n style={[viewStyles, styles.mainParent, { flexDirection: direction }]}\n disabled={disabled}\n {...rest}\n >\n <View\n style={[\n styles.label,\n {\n alignItems: direction === Direction.Row ? \"flex-start\" : \"flex-end\",\n },\n labelContainerStyle,\n ]}\n >\n {renderLabel(label, textStyles, labelStyle)}\n </View>\n\n <Checkbox\n Icon={Icon}\n status={internalValue}\n style={checkboxStyle}\n disabled={disabled}\n onPress={handlePress}\n color={color}\n uncheckedColor={uncheckedColor}\n checkedIcon={checkedIcon}\n uncheckedIcon={uncheckedIcon}\n size={size}\n />\n </Touchable>\n );\n};\n\nconst styles = StyleSheet.create({\n mainParent: {\n alignItems: \"center\",\n justifyContent: \"space-around\",\n paddingStart: 20,\n minHeight: 50,\n paddingEnd: 20,\n display: \"flex\",\n ...Platform.select({\n web: {\n cursor: \"pointer\",\n userSelect: \"none\",\n },\n }),\n },\n label: {\n flex: 3,\n },\n});\n\nexport default CheckboxRow;\n"]}
|
|
@@ -55,6 +55,20 @@ const Container = _ref => {
|
|
|
55
55
|
paddingHorizontal,
|
|
56
56
|
...styleProp
|
|
57
57
|
} = _reactNative.StyleSheet.flatten(style) || {};
|
|
58
|
+
console.log("Container props", {
|
|
59
|
+
useThemeGutterPadding,
|
|
60
|
+
borderColor,
|
|
61
|
+
borderWidth,
|
|
62
|
+
backgroundColor,
|
|
63
|
+
backgroundImage,
|
|
64
|
+
backgroundImageResizeMode,
|
|
65
|
+
elevation,
|
|
66
|
+
style,
|
|
67
|
+
children,
|
|
68
|
+
theme,
|
|
69
|
+
rest: { ...rest
|
|
70
|
+
}
|
|
71
|
+
});
|
|
58
72
|
const containerStyle = {
|
|
59
73
|
backgroundColor,
|
|
60
74
|
borderColor,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Container.tsx"],"names":["Container","useThemeGutterPadding","borderColor","borderWidth","backgroundColor","backgroundImage","backgroundImageResizeMode","elevation","style","children","theme","rest","flex","flexGrow","flexWrap","flexBasis","flexShrink","flexDirection","alignContent","justifyContent","alignItems","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","paddingVertical","paddingHorizontal","styleProp","StyleSheet","flatten","containerStyle","width","innerStyle","Wrap","Elevation","View","uri"],"mappings":";;;;;;;AAAA;;AACA;;AAQA;;AAEA;;;;;;;;;;AAiBA,MAAMA,SAA0B,GAAG,QAY7B;AAAA,MAZ8B;AAClCC,IAAAA,qBADkC;AAElCC,IAAAA,WAFkC;AAGlCC,IAAAA,WAHkC;AAIlCC,IAAAA,eAJkC;AAKlCC,IAAAA,eALkC;AAMlCC,IAAAA,yBANkC;AAOlCC,IAAAA,SAPkC;AAQlCC,IAAAA,KARkC;AASlCC,IAAAA,QATkC;AAUlCC,IAAAA,KAVkC;AAU3B;AACP,OAAGC;AAX+B,GAY9B;AACJ,QAAM;AACJC,IAAAA,IADI;AAEJC,IAAAA,QAFI;AAGJC,IAAAA,QAHI;AAIJC,IAAAA,SAJI;AAKJC,IAAAA,UALI;AAMJC,IAAAA,aANI;AAOJC,IAAAA,YAPI;AAQJC,IAAAA,cARI;AASJC,IAAAA,UATI;AAUJC,IAAAA,OAVI;AAWJC,IAAAA,UAXI;AAYJC,IAAAA,aAZI;AAaJC,IAAAA,WAbI;AAcJC,IAAAA,YAdI;AAeJC,IAAAA,eAfI;AAgBJC,IAAAA,iBAhBI;AAiBJ,OAAGC;AAjBC,MAkBFC,wBAAWC,OAAX,CAAmBtB,KAAnB,KAA6B,EAlBjC;
|
|
1
|
+
{"version":3,"sources":["Container.tsx"],"names":["Container","useThemeGutterPadding","borderColor","borderWidth","backgroundColor","backgroundImage","backgroundImageResizeMode","elevation","style","children","theme","rest","flex","flexGrow","flexWrap","flexBasis","flexShrink","flexDirection","alignContent","justifyContent","alignItems","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","paddingVertical","paddingHorizontal","styleProp","StyleSheet","flatten","console","log","containerStyle","width","innerStyle","Wrap","Elevation","View","uri"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport {\n View,\n ImageBackground,\n ImageSourcePropType,\n StyleProp,\n StyleSheet,\n ViewStyle,\n} from \"react-native\";\nimport { withTheme } from \"../theming\";\n\nimport Elevation from \"./Elevation\";\nimport type { Theme } from \"../styles/DefaultTheme\";\nimport { ResizeModeType } from \"./ResizeMode\";\n\ntype Props = {\n theme: Theme;\n useThemeGutterPadding: boolean;\n borderColor: string;\n borderWidth: number;\n backgroundColor: string;\n backgroundImage?: string | ImageSourcePropType;\n backgroundImageResizeMode?: ResizeModeType;\n elevation?: number;\n style?: StyleProp<ViewStyle>;\n children?: React.ReactNode;\n};\n\nconst Container: React.FC<Props> = ({\n useThemeGutterPadding,\n borderColor,\n borderWidth,\n backgroundColor,\n backgroundImage,\n backgroundImageResizeMode,\n elevation,\n style,\n children,\n theme, // eslint-disable-line @typescript-eslint/no-unused-vars\n ...rest\n}) => {\n const {\n flex,\n flexGrow,\n flexWrap,\n flexBasis,\n flexShrink,\n flexDirection,\n alignContent,\n justifyContent,\n alignItems,\n padding,\n paddingTop,\n paddingBottom,\n paddingLeft,\n paddingRight,\n paddingVertical,\n paddingHorizontal,\n ...styleProp\n } = StyleSheet.flatten(style) || {};\n\n console.log(\"Container props\", {\n useThemeGutterPadding,\n borderColor,\n borderWidth,\n backgroundColor,\n backgroundImage,\n backgroundImageResizeMode,\n elevation,\n style,\n children,\n theme,\n rest: { ...rest },\n });\n\n const containerStyle: StyleProp<ViewStyle> = {\n backgroundColor,\n borderColor,\n borderWidth,\n width: \"100%\",\n ...styleProp,\n };\n\n const innerStyle: StyleProp<ViewStyle> = {\n flex,\n flexGrow,\n flexWrap,\n flexBasis,\n flexShrink,\n flexDirection,\n alignContent,\n justifyContent,\n alignItems,\n padding,\n paddingTop,\n paddingBottom,\n paddingLeft,\n paddingRight,\n paddingVertical,\n paddingHorizontal: paddingHorizontal || useThemeGutterPadding ? 16 : 0,\n };\n\n const Wrap = elevation ? Elevation : View;\n\n if (elevation) {\n containerStyle.elevation = elevation;\n }\n\n return (\n <Wrap style={[containerStyle, style]} {...rest}>\n {backgroundImage ? (\n <ImageBackground\n source={\n typeof backgroundImage === \"string\"\n ? { uri: backgroundImage }\n : backgroundImage\n }\n resizeMode={backgroundImageResizeMode}\n style={{\n flex: 1,\n }}\n >\n <View style={innerStyle}>{children}</View>\n </ImageBackground>\n ) : (\n <View style={innerStyle}>{children}</View>\n )}\n </Wrap>\n );\n};\n\nexport default withTheme(Container);\n"]}
|