@draftbit/core 43.4.5-ccf125.1 → 43.4.5
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/AccordionItem.js +5 -21
- package/lib/commonjs/components/Accordion/AccordionItem.js.map +1 -1
- package/lib/commonjs/components/RadioButton/RadioButton.js +6 -8
- package/lib/commonjs/components/RadioButton/RadioButton.js.map +1 -1
- package/lib/commonjs/components/RadioButton/RadioButtonGroup.js +10 -19
- package/lib/commonjs/components/RadioButton/RadioButtonGroup.js.map +1 -1
- package/lib/commonjs/components/RadioButton/RadioButtonRow.js +11 -13
- package/lib/commonjs/components/RadioButton/RadioButtonRow.js.map +1 -1
- package/lib/commonjs/utilities.js +10 -13
- package/lib/commonjs/utilities.js.map +1 -1
- package/lib/module/components/DatePicker/DatePickerComponentType.js.map +1 -1
- package/lib/module/components/RadioButton/RadioButton.js +7 -9
- package/lib/module/components/RadioButton/RadioButton.js.map +1 -1
- package/lib/module/components/RadioButton/RadioButtonGroup.js +11 -20
- package/lib/module/components/RadioButton/RadioButtonGroup.js.map +1 -1
- package/lib/module/components/RadioButton/RadioButtonRow.js +12 -14
- package/lib/module/components/RadioButton/RadioButtonRow.js.map +1 -1
- package/lib/module/mappings/ImageBackground.js.map +1 -1
- package/lib/module/mappings/KeyboardAvoidingView.js.map +1 -1
- package/lib/module/utilities.js +8 -12
- package/lib/module/utilities.js.map +1 -1
- package/lib/typescript/src/components/RadioButton/RadioButton.d.ts +2 -2
- package/lib/typescript/src/components/RadioButton/RadioButtonGroup.d.ts +1 -1
- package/lib/typescript/src/components/RadioButton/RadioButtonRow.d.ts +1 -1
- package/lib/typescript/src/utilities.d.ts +1 -1
- package/package.json +2 -2
- package/src/components/RadioButton/RadioButton.js +7 -10
- package/src/components/RadioButton/RadioButton.tsx +9 -13
- package/src/components/RadioButton/RadioButtonGroup.js +10 -16
- package/src/components/RadioButton/RadioButtonGroup.tsx +13 -21
- package/src/components/RadioButton/RadioButtonRow.js +12 -15
- package/src/components/RadioButton/RadioButtonRow.tsx +13 -17
- package/src/utilities.js +10 -10
- package/src/utilities.ts +8 -10
|
@@ -21,6 +21,8 @@ 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
|
+
|
|
24
26
|
const AccordionItem = _ref => {
|
|
25
27
|
let {
|
|
26
28
|
Icon,
|
|
@@ -35,10 +37,9 @@ const AccordionItem = _ref => {
|
|
|
35
37
|
textStyles,
|
|
36
38
|
viewStyles
|
|
37
39
|
} = (0, _utilities.extractStyles)(style);
|
|
38
|
-
return /*#__PURE__*/React.createElement(_reactNative.Pressable, {
|
|
39
|
-
style: [styles.container, viewStyles]
|
|
40
|
-
|
|
41
|
-
}, /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
40
|
+
return /*#__PURE__*/React.createElement(_reactNative.Pressable, _extends({
|
|
41
|
+
style: [styles.container, viewStyles]
|
|
42
|
+
}, rest), /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
42
43
|
style: styles.row
|
|
43
44
|
}, icon ? /*#__PURE__*/React.createElement(Icon, {
|
|
44
45
|
name: icon,
|
|
@@ -73,22 +74,5 @@ const styles = _reactNative.StyleSheet.create({
|
|
|
73
74
|
|
|
74
75
|
var _default = (0, _theming.withTheme)(AccordionItem);
|
|
75
76
|
|
|
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
|
-
|
|
93
77
|
exports.default = _default;
|
|
94
78
|
//# sourceMappingURL=AccordionItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["AccordionItem.
|
|
1
|
+
{"version":3,"sources":["AccordionItem.tsx"],"names":["AccordionItem","Icon","icon","label","style","iconColor","theme","rest","textStyles","viewStyles","styles","container","row","colors","primary","item","content","StyleSheet","create","padding","flexDirection","alignItems","paddingLeft","marginVertical","flex","justifyContent"],"mappings":";;;;;;;AAAA;;AACA;;AAQA;;AAEA;;AACA;;;;;;;;;;AAWA,MAAMA,aAAa,GAAG,QAQT;AAAA,MARU;AACrBC,IAAAA,IADqB;AAErBC,IAAAA,IAFqB;AAGrBC,IAAAA,KAHqB;AAIrBC,IAAAA,KAJqB;AAKrBC,IAAAA,SALqB;AAMrBC,IAAAA,KANqB;AAOrB,OAAGC;AAPkB,GAQV;AACX,QAAM;AAAEC,IAAAA,UAAF;AAAcC,IAAAA;AAAd,MAA6B,8BAAcL,KAAd,CAAnC;AACA,sBACE,oBAAC,sBAAD;AAAW,IAAA,KAAK,EAAE,CAACM,MAAM,CAACC,SAAR,EAAmBF,UAAnB;AAAlB,KAAsDF,IAAtD,gBACE,oBAAC,iBAAD;AAAM,IAAA,KAAK,EAAEG,MAAM,CAACE;AAApB,KACGV,IAAI,gBACH,oBAAC,IAAD;AACE,IAAA,IAAI,EAAEA,IADR;AAEE,IAAA,IAAI,EAAE,EAFR;AAGE,IAAA,KAAK,EAAEG,SAAS,IAAIC,KAAK,CAACO,MAAN,CAAaC;AAHnC,IADG,GAMD,IAPN,eAQE,oBAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,CAACJ,MAAM,CAACK,IAAR,EAAcL,MAAM,CAACM,OAArB;AAAb,kBACE,oBAAC,aAAD;AAAM,IAAA,UAAU,EAAE,KAAlB;AAAyB,IAAA,KAAK,EAAER;AAAhC,KACGL,KADH,CADF,CARF,CADF,CADF;AAkBD,CA5BD;;AA8BA,MAAMO,MAAM,GAAGO,wBAAWC,MAAX,CAAkB;AAC/BP,EAAAA,SAAS,EAAE;AACTQ,IAAAA,OAAO,EAAE;AADA,GADoB;AAI/BP,EAAAA,GAAG,EAAE;AACHQ,IAAAA,aAAa,EAAE,KADZ;AAEHC,IAAAA,UAAU,EAAE,QAFT;AAGHC,IAAAA,WAAW,EAAE;AAHV,GAJ0B;AAS/BP,EAAAA,IAAI,EAAE;AACJQ,IAAAA,cAAc,EAAE,CADZ;AAEJD,IAAAA,WAAW,EAAE;AAFT,GATyB;AAa/BN,EAAAA,OAAO,EAAE;AACPQ,IAAAA,IAAI,EAAE,CADC;AAEPC,IAAAA,cAAc,EAAE;AAFT;AAbsB,CAAlB,CAAf;;eAmBe,wBAAUzB,aAAV,C","sourcesContent":["import * as React from \"react\";\nimport {\n Pressable,\n StyleSheet,\n View,\n StyleProp,\n ViewStyle,\n} from \"react-native\";\n\nimport Text from \"../Text\";\nimport type { IconSlot } from \"../../interfaces/Icon\";\nimport { extractStyles } from \"../../utilities\";\nimport { withTheme } from \"../../theming\";\nimport type { Theme } from \"../../styles/DefaultTheme\";\n\ntype Props = {\n icon?: string;\n label: string;\n iconColor?: string;\n style?: StyleProp<ViewStyle>;\n theme: Theme;\n} & IconSlot;\n\nconst AccordionItem = ({\n Icon,\n icon,\n label,\n style,\n iconColor,\n theme,\n ...rest\n}: Props) => {\n const { textStyles, viewStyles } = extractStyles(style);\n return (\n <Pressable style={[styles.container, viewStyles]} {...rest}>\n <View style={styles.row}>\n {icon ? (\n <Icon\n name={icon}\n size={24}\n color={iconColor || theme.colors.primary}\n />\n ) : null}\n <View style={[styles.item, styles.content]}>\n <Text selectable={false} style={textStyles}>\n {label}\n </Text>\n </View>\n </View>\n </Pressable>\n );\n};\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});\n\nexport default withTheme(AccordionItem);\n"]}
|
|
@@ -28,7 +28,7 @@ const RadioButton = _ref => {
|
|
|
28
28
|
Icon,
|
|
29
29
|
disabled = false,
|
|
30
30
|
color,
|
|
31
|
-
value,
|
|
31
|
+
value = "",
|
|
32
32
|
selected,
|
|
33
33
|
unselectedColor,
|
|
34
34
|
onPress,
|
|
@@ -42,15 +42,13 @@ const RadioButton = _ref => {
|
|
|
42
42
|
value: contextValue,
|
|
43
43
|
onValueChange
|
|
44
44
|
} = (0, _context.useRadioButtonGroupContext)();
|
|
45
|
-
const realValue = (0, _utilities.
|
|
46
|
-
const realContextValue = (0, _utilities.
|
|
47
|
-
const isSelected = selected !== null && selected !== void 0 ? selected : realContextValue
|
|
45
|
+
const realValue = (0, _utilities.getValueForRadioButton)(value);
|
|
46
|
+
const realContextValue = (0, _utilities.getValueForRadioButton)(contextValue);
|
|
47
|
+
const isSelected = selected !== null && selected !== void 0 ? selected : realContextValue === realValue;
|
|
48
48
|
|
|
49
49
|
const handlePress = () => {
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(realValue);
|
|
53
|
-
}
|
|
50
|
+
onPress === null || onPress === void 0 ? void 0 : onPress(realValue);
|
|
51
|
+
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(realValue);
|
|
54
52
|
};
|
|
55
53
|
|
|
56
54
|
return /*#__PURE__*/React.createElement(_IconButton.default, _extends({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["RadioButton.tsx"],"names":["RadioButton","Icon","disabled","color","value","selected","unselectedColor","onPress","size","Config","radioButtonSize","selectedIcon","unselectedIcon","style","rest","contextValue","onValueChange","realValue","realContextValue","isSelected","handlePress"],"mappings":";;;;;;;AAAA;;AAGA;;AACA;;AACA;;AACA;;;;;;;;;;AAiBA,MAAMA,WAAuC,GAAG,QAa1C;AAAA,MAb2C;AAC/CC,IAAAA,IAD+C;AAE/CC,IAAAA,QAAQ,GAAG,KAFoC;AAG/CC,IAAAA,KAH+C;AAI/CC,IAAAA,
|
|
1
|
+
{"version":3,"sources":["RadioButton.tsx"],"names":["RadioButton","Icon","disabled","color","value","selected","unselectedColor","onPress","size","Config","radioButtonSize","selectedIcon","unselectedIcon","style","rest","contextValue","onValueChange","realValue","realContextValue","isSelected","handlePress"],"mappings":";;;;;;;AAAA;;AAGA;;AACA;;AACA;;AACA;;;;;;;;;;AAiBA,MAAMA,WAAuC,GAAG,QAa1C;AAAA,MAb2C;AAC/CC,IAAAA,IAD+C;AAE/CC,IAAAA,QAAQ,GAAG,KAFoC;AAG/CC,IAAAA,KAH+C;AAI/CC,IAAAA,KAAK,GAAG,EAJuC;AAK/CC,IAAAA,QAL+C;AAM/CC,IAAAA,eAN+C;AAO/CC,IAAAA,OAP+C;AAQ/CC,IAAAA,IAAI,GAAGC,gBAAOC,eARiC;AAS/CC,IAAAA,YAAY,GAAG,oCATgC;AAU/CC,IAAAA,cAAc,GAAG,sCAV8B;AAW/CC,IAAAA,KAX+C;AAY/C,OAAGC;AAZ4C,GAa3C;AACJ,QAAM;AAAEV,IAAAA,KAAK,EAAEW,YAAT;AAAuBC,IAAAA;AAAvB,MAAyC,0CAA/C;AAEA,QAAMC,SAAS,GAAG,uCAAuBb,KAAvB,CAAlB;AACA,QAAMc,gBAAgB,GAAG,uCAAuBH,YAAvB,CAAzB;AACA,QAAMI,UAAU,GAAGd,QAAH,aAAGA,QAAH,cAAGA,QAAH,GAAea,gBAAgB,KAAKD,SAApD;;AAEA,QAAMG,WAAW,GAAG,MAAM;AACxBb,IAAAA,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAGU,SAAH,CAAP;AACAD,IAAAA,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa,CAAGC,SAAH,CAAb;AACD,GAHD;;AAKA,sBACE,oBAAC,mBAAD;AACE,IAAA,IAAI,EAAEhB,IADR;AAEE,IAAA,IAAI,EAAEkB,UAAU,GAAGR,YAAH,GAAkBC,cAFpC;AAGE,IAAA,KAAK,EAAEO,UAAU,GAAGhB,KAAH,GAAWG,eAH9B;AAIE,IAAA,QAAQ,EAAEJ,QAJZ;AAKE,IAAA,OAAO,EAAEkB,WALX;AAME,IAAA,IAAI,EAAEZ,IANR;AAOE,IAAA,KAAK,EAAEK;AAPT,KAQMC,IARN,EADF;AAYD,CArCD;;eAuCed,W","sourcesContent":["import * as React from \"react\";\nimport { StyleProp, ViewStyle } from \"react-native\";\n\nimport Config from \"../Config\";\nimport IconButton from \"../IconButton\";\nimport { getValueForRadioButton } from \"../../utilities\";\nimport { useRadioButtonGroupContext } from \"./context\";\n\nimport type { IconSlot } from \"../../interfaces/Icon\";\n\nexport type RadioButtonProps = {\n selected?: boolean;\n disabled?: boolean;\n color?: string;\n value?: string | number;\n unselectedColor?: string;\n onPress?: (value?: string) => void;\n style?: StyleProp<ViewStyle>;\n size?: number;\n selectedIcon?: string;\n unselectedIcon?: string;\n} & IconSlot;\n\nconst RadioButton: React.FC<RadioButtonProps> = ({\n Icon,\n disabled = false,\n color,\n value = \"\",\n selected,\n unselectedColor,\n onPress,\n size = Config.radioButtonSize,\n selectedIcon = \"MaterialIcons/radio-button-checked\",\n unselectedIcon = \"MaterialIcons/radio-button-unchecked\",\n style,\n ...rest\n}) => {\n const { value: contextValue, onValueChange } = useRadioButtonGroupContext();\n\n const realValue = getValueForRadioButton(value);\n const realContextValue = getValueForRadioButton(contextValue);\n const isSelected = selected ?? realContextValue === realValue;\n\n const handlePress = () => {\n onPress?.(realValue);\n onValueChange?.(realValue);\n };\n\n return (\n <IconButton\n Icon={Icon}\n icon={isSelected ? selectedIcon : unselectedIcon}\n color={isSelected ? color : unselectedColor}\n disabled={disabled}\n onPress={handlePress}\n size={size}\n style={style}\n {...rest}\n />\n );\n};\n\nexport default RadioButton;\n"]}
|
|
@@ -26,36 +26,27 @@ const {
|
|
|
26
26
|
const RadioButtonGroup = _ref => {
|
|
27
27
|
let {
|
|
28
28
|
direction = _context.Direction.Vertical,
|
|
29
|
-
value,
|
|
29
|
+
value = "",
|
|
30
30
|
onValueChange,
|
|
31
|
-
defaultValue,
|
|
31
|
+
defaultValue = "",
|
|
32
32
|
style,
|
|
33
33
|
children,
|
|
34
34
|
...rest
|
|
35
35
|
} = _ref;
|
|
36
|
-
const [internalValue, setInternalValue] = React.useState();
|
|
36
|
+
const [internalValue, setInternalValue] = React.useState("");
|
|
37
37
|
React.useEffect(() => {
|
|
38
|
-
const realValue = (0, _utilities.
|
|
39
|
-
|
|
40
|
-
if (realValue) {
|
|
41
|
-
setInternalValue(realValue);
|
|
42
|
-
}
|
|
38
|
+
const realValue = (0, _utilities.getValueForRadioButton)(value);
|
|
39
|
+
setInternalValue(realValue);
|
|
43
40
|
}, [value]);
|
|
44
41
|
React.useEffect(() => {
|
|
45
|
-
const realDefaultValue = (0, _utilities.
|
|
46
|
-
|
|
47
|
-
if (realDefaultValue) {
|
|
48
|
-
setInternalValue(realDefaultValue);
|
|
49
|
-
}
|
|
42
|
+
const realDefaultValue = (0, _utilities.getValueForRadioButton)(defaultValue);
|
|
43
|
+
setInternalValue(realDefaultValue);
|
|
50
44
|
}, [defaultValue]);
|
|
51
45
|
|
|
52
46
|
const handleValueChange = newValue => {
|
|
53
|
-
const realNewValue = (0, _utilities.
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
setInternalValue(newValue);
|
|
57
|
-
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue);
|
|
58
|
-
}
|
|
47
|
+
const realNewValue = (0, _utilities.getValueForRadioButton)(newValue);
|
|
48
|
+
setInternalValue(realNewValue);
|
|
49
|
+
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(realNewValue);
|
|
59
50
|
};
|
|
60
51
|
|
|
61
52
|
const _containerStyle = [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["RadioButtonGroup.tsx"],"names":["Provider","radioButtonGroupContext","RadioButtonGroup","direction","Direction","Vertical","value","onValueChange","defaultValue","style","children","rest","internalValue","setInternalValue","React","useState","useEffect","realValue","realDefaultValue","handleValueChange","newValue","realNewValue","_containerStyle","flexDirection","Horizontal","push","alignItems","minHeight"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;AAWA,MAAM;AAAEA,EAAAA;AAAF,IAAeC,gCAArB;;AAEA,MAAMC,gBAAiD,GAAG,QAQpD;AAAA,MARqD;AACzDC,IAAAA,SAAS,GAAGC,mBAAUC,QADmC;AAEzDC,IAAAA,
|
|
1
|
+
{"version":3,"sources":["RadioButtonGroup.tsx"],"names":["Provider","radioButtonGroupContext","RadioButtonGroup","direction","Direction","Vertical","value","onValueChange","defaultValue","style","children","rest","internalValue","setInternalValue","React","useState","useEffect","realValue","realDefaultValue","handleValueChange","newValue","realNewValue","_containerStyle","flexDirection","Horizontal","push","alignItems","minHeight"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;AAWA,MAAM;AAAEA,EAAAA;AAAF,IAAeC,gCAArB;;AAEA,MAAMC,gBAAiD,GAAG,QAQpD;AAAA,MARqD;AACzDC,IAAAA,SAAS,GAAGC,mBAAUC,QADmC;AAEzDC,IAAAA,KAAK,GAAG,EAFiD;AAGzDC,IAAAA,aAHyD;AAIzDC,IAAAA,YAAY,GAAG,EAJ0C;AAKzDC,IAAAA,KALyD;AAMzDC,IAAAA,QANyD;AAOzD,OAAGC;AAPsD,GAQrD;AACJ,QAAM,CAACC,aAAD,EAAgBC,gBAAhB,IAAoCC,KAAK,CAACC,QAAN,CAAuB,EAAvB,CAA1C;AAEAD,EAAAA,KAAK,CAACE,SAAN,CAAgB,MAAM;AACpB,UAAMC,SAAS,GAAG,uCAAuBX,KAAvB,CAAlB;AAEAO,IAAAA,gBAAgB,CAACI,SAAD,CAAhB;AACD,GAJD,EAIG,CAACX,KAAD,CAJH;AAMAQ,EAAAA,KAAK,CAACE,SAAN,CAAgB,MAAM;AACpB,UAAME,gBAAgB,GAAG,uCAAuBV,YAAvB,CAAzB;AAEAK,IAAAA,gBAAgB,CAACK,gBAAD,CAAhB;AACD,GAJD,EAIG,CAACV,YAAD,CAJH;;AAMA,QAAMW,iBAAiB,GAAIC,QAAD,IAA+B;AACvD,UAAMC,YAAY,GAAG,uCAAuBD,QAAvB,CAArB;AAEAP,IAAAA,gBAAgB,CAACQ,YAAD,CAAhB;AACAd,IAAAA,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa,CAAGc,YAAH,CAAb;AACD,GALD;;AAOA,QAAMC,eAAqC,GAAG,CAC5C;AACEC,IAAAA,aAAa,EAAEpB,SAAS,KAAKC,mBAAUoB,UAAxB,GAAqC,KAArC,GAA6C;AAD9D,GAD4C,CAA9C;;AAMA,MAAIrB,SAAS,KAAKC,mBAAUC,QAA5B,EAAsC;AACpCiB,IAAAA,eAAe,CAACG,IAAhB,CAAqB;AACnBC,MAAAA,UAAU,EAAE;AADO,KAArB;AAGD;;AAED,sBACE,oBAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,CAAC;AAAEC,MAAAA,SAAS,EAAE;AAAb,KAAD,EAAoBlB,KAApB;AAAb,KAA6CE,IAA7C,gBACE,oBAAC,QAAD;AACE,IAAA,KAAK,EAAE;AACLL,MAAAA,KAAK,EAAEM,aAAa,IAAI,EADnB;AAELL,MAAAA,aAAa,EAAEY,iBAFV;AAGLhB,MAAAA;AAHK;AADT,kBAOE,oBAAC,iBAAD;AAAM,IAAA,KAAK,EAAEmB;AAAb,KAA+BZ,QAA/B,CAPF,CADF,CADF;AAaD,CAvDD;;eAyDeR,gB","sourcesContent":["import * as React from \"react\";\nimport { View, StyleProp, ViewStyle } from \"react-native\";\nimport type { Theme } from \"../../styles/DefaultTheme\";\nimport { getValueForRadioButton } from \"../../utilities\";\nimport { radioButtonGroupContext, Direction } from \"./context\";\nexport interface RadioButtonGroupProps {\n direction?: Direction;\n style?: StyleProp<ViewStyle>;\n value: string;\n onValueChange?: (value: string) => void;\n defaultValue?: string | number;\n theme: Theme;\n children: React.ReactNode;\n}\n\nconst { Provider } = radioButtonGroupContext;\n\nconst RadioButtonGroup: React.FC<RadioButtonGroupProps> = ({\n direction = Direction.Vertical,\n value = \"\",\n onValueChange,\n defaultValue = \"\",\n style,\n children,\n ...rest\n}) => {\n const [internalValue, setInternalValue] = React.useState<string>(\"\");\n\n React.useEffect(() => {\n const realValue = getValueForRadioButton(value);\n\n setInternalValue(realValue);\n }, [value]);\n\n React.useEffect(() => {\n const realDefaultValue = getValueForRadioButton(defaultValue);\n\n setInternalValue(realDefaultValue);\n }, [defaultValue]);\n\n const handleValueChange = (newValue: string | number) => {\n const realNewValue = getValueForRadioButton(newValue);\n\n setInternalValue(realNewValue);\n onValueChange?.(realNewValue);\n };\n\n const _containerStyle: StyleProp<ViewStyle> = [\n {\n flexDirection: direction === Direction.Horizontal ? \"row\" : \"column\",\n },\n ];\n\n if (direction !== Direction.Vertical) {\n _containerStyle.push({\n alignItems: \"center\",\n });\n }\n\n return (\n <View style={[{ minHeight: 40 }, style]} {...rest}>\n <Provider\n value={{\n value: internalValue || \"\",\n onValueChange: handleValueChange,\n direction,\n }}\n >\n <View style={_containerStyle}>{children}</View>\n </Provider>\n </View>\n );\n};\n\nexport default RadioButtonGroup;\n"]}
|
|
@@ -45,13 +45,13 @@ const getRadioButtonAlignment = (parentDirection, direction) => {
|
|
|
45
45
|
}
|
|
46
46
|
};
|
|
47
47
|
|
|
48
|
-
const renderLabel = (
|
|
49
|
-
if (typeof
|
|
48
|
+
const renderLabel = (value, labelStyle, textStyle) => {
|
|
49
|
+
if (typeof value === "string") {
|
|
50
50
|
return /*#__PURE__*/React.createElement(_Text.default, {
|
|
51
51
|
style: [labelStyle, textStyle]
|
|
52
|
-
},
|
|
52
|
+
}, value);
|
|
53
53
|
} else {
|
|
54
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null,
|
|
54
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, value);
|
|
55
55
|
}
|
|
56
56
|
};
|
|
57
57
|
|
|
@@ -59,7 +59,7 @@ const RadioButtonRow = _ref => {
|
|
|
59
59
|
let {
|
|
60
60
|
Icon,
|
|
61
61
|
label,
|
|
62
|
-
value,
|
|
62
|
+
value = "",
|
|
63
63
|
color,
|
|
64
64
|
unselectedColor,
|
|
65
65
|
onPress,
|
|
@@ -77,15 +77,13 @@ const RadioButtonRow = _ref => {
|
|
|
77
77
|
onValueChange,
|
|
78
78
|
direction: parentDirection
|
|
79
79
|
} = (0, _context.useRadioButtonGroupContext)();
|
|
80
|
-
const realValue = (0, _utilities.
|
|
81
|
-
const realContextValue = (0, _utilities.
|
|
82
|
-
const isSelected = selected !== null && selected !== void 0 ? selected : realContextValue
|
|
80
|
+
const realValue = (0, _utilities.getValueForRadioButton)(value);
|
|
81
|
+
const realContextValue = (0, _utilities.getValueForRadioButton)(contextValue);
|
|
82
|
+
const isSelected = selected !== null && selected !== void 0 ? selected : realContextValue === realValue;
|
|
83
83
|
|
|
84
84
|
const handlePress = () => {
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(realValue);
|
|
88
|
-
}
|
|
85
|
+
onPress === null || onPress === void 0 ? void 0 : onPress(realValue);
|
|
86
|
+
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(realValue);
|
|
89
87
|
};
|
|
90
88
|
|
|
91
89
|
const {
|
|
@@ -109,7 +107,7 @@ const RadioButtonRow = _ref => {
|
|
|
109
107
|
}
|
|
110
108
|
}, /*#__PURE__*/React.createElement(_RadioButton.default, {
|
|
111
109
|
Icon: Icon,
|
|
112
|
-
selected: isSelected
|
|
110
|
+
selected: isSelected,
|
|
113
111
|
value: realValue,
|
|
114
112
|
color: color,
|
|
115
113
|
unselectedColor: unselectedColor,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["RadioButtonRow.tsx"],"names":["Direction","getRadioButtonAlignment","parentDirection","direction","GroupDirection","Horizontal","Row","RowReverse","renderLabel","
|
|
1
|
+
{"version":3,"sources":["RadioButtonRow.tsx"],"names":["Direction","getRadioButtonAlignment","parentDirection","direction","GroupDirection","Horizontal","Row","RowReverse","renderLabel","value","labelStyle","textStyle","RadioButtonRow","Icon","label","color","unselectedColor","onPress","labelContainerStyle","radioButtonStyle","selected","disabled","style","rest","contextValue","onValueChange","realValue","realContextValue","isSelected","handlePress","textStyles","viewStyles","styles","mainParent","flexDirection","alignItems","flex","StyleSheet","create","justifyContent","paddingStart","minHeight","paddingEnd","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 RadioButton, { RadioButtonProps } from \"./RadioButton\";\nimport Text from \"../Text\";\nimport { useRadioButtonGroupContext } from \"./context\";\nimport type { IconSlot } from \"../../interfaces/Icon\";\nimport { Direction as GroupDirection } from \"./context\";\nimport Touchable from \"../Touchable\";\nimport { extractStyles, getValueForRadioButton } from \"../../utilities\";\n\nexport enum Direction {\n Row = \"row\",\n RowReverse = \"row-reverse\",\n}\n\nexport interface RadioButtonRowProps extends Omit<RadioButtonProps, \"onPress\"> {\n label: string | React.ReactNode;\n value: string | number; // A string (or number that will be parsed String(number)) that this radio button row represents when selected\n color?: string;\n unselectedColor?: string;\n labelContainerStyle: StyleProp<ViewStyle>;\n radioButtonStyle?: StyleProp<ViewStyle>;\n labelStyle?: StyleProp<TextStyle>;\n onPress?: (value: string) => void;\n direction?: Direction;\n}\n\nconst getRadioButtonAlignment = (\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 RadioButtonRow: React.FC<RadioButtonRowProps & IconSlot> = ({\n Icon,\n label,\n value = \"\",\n color,\n unselectedColor,\n onPress,\n labelContainerStyle,\n labelStyle,\n radioButtonStyle,\n direction = Direction.Row,\n selected,\n disabled,\n style,\n ...rest\n}) => {\n const {\n value: contextValue,\n onValueChange,\n direction: parentDirection,\n } = useRadioButtonGroupContext();\n\n const realValue = getValueForRadioButton(value);\n const realContextValue = getValueForRadioButton(contextValue);\n const isSelected = selected ?? realContextValue === realValue;\n\n const handlePress = () => {\n onPress?.(realValue);\n onValueChange?.(realValue);\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: getRadioButtonAlignment(parentDirection, direction),\n }}\n >\n <RadioButton\n Icon={Icon}\n selected={isSelected}\n value={realValue}\n color={color}\n unselectedColor={unselectedColor}\n style={radioButtonStyle}\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 flex: 1,\n ...Platform.select({\n web: {\n cursor: \"pointer\",\n userSelect: \"none\",\n },\n }),\n },\n label: {\n flex: 3,\n },\n});\n\nexport default RadioButtonRow;\n"]}
|
|
@@ -5,10 +5,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.applyStyles = applyStyles;
|
|
7
7
|
exports.extractStyles = extractStyles;
|
|
8
|
-
exports.
|
|
8
|
+
exports.getValueForRadioButton = getValueForRadioButton;
|
|
9
9
|
|
|
10
10
|
var _reactNative = require("react-native");
|
|
11
11
|
|
|
12
|
+
var _lodash = require("lodash");
|
|
13
|
+
|
|
12
14
|
function extractStyles(style) {
|
|
13
15
|
const {
|
|
14
16
|
color,
|
|
@@ -73,18 +75,13 @@ function applyStyles(baseStyles, stylesToApply) {
|
|
|
73
75
|
return flattenedStyles;
|
|
74
76
|
}
|
|
75
77
|
|
|
76
|
-
function
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
case "number":
|
|
84
|
-
return String(value);
|
|
85
|
-
|
|
86
|
-
default:
|
|
87
|
-
return undefined;
|
|
78
|
+
function getValueForRadioButton(value) {
|
|
79
|
+
if ((0, _lodash.isString)(value)) {
|
|
80
|
+
return value;
|
|
81
|
+
} else if ((0, _lodash.isNumber)(value)) {
|
|
82
|
+
return String(value);
|
|
83
|
+
} else {
|
|
84
|
+
throw new Error(`Invalid value: ${value}`);
|
|
88
85
|
}
|
|
89
86
|
}
|
|
90
87
|
//# sourceMappingURL=utilities.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["utilities.ts"],"names":["extractStyles","style","color","fontFamily","fontWeight","fontSize","lineHeight","letterSpacing","textTransform","textAlign","textDecorationLine","textDecorationColor","textDecorationStyle","viewStyles","StyleSheet","flatten","textStyles","applyStyles","baseStyles","stylesToApply","flattenedStyles","key","value","Object","entries","
|
|
1
|
+
{"version":3,"sources":["utilities.ts"],"names":["extractStyles","style","color","fontFamily","fontWeight","fontSize","lineHeight","letterSpacing","textTransform","textAlign","textDecorationLine","textDecorationColor","textDecorationStyle","viewStyles","StyleSheet","flatten","textStyles","applyStyles","baseStyles","stylesToApply","flattenedStyles","key","value","Object","entries","getValueForRadioButton","String","Error"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEO,SAASA,aAAT,CAAuBC,KAAvB,EAA8C;AACnD,QAAM;AACJC,IAAAA,KADI;AAEJC,IAAAA,UAFI;AAGJC,IAAAA,UAHI;AAIJC,IAAAA,QAJI;AAKJC,IAAAA,UALI;AAMJC,IAAAA,aANI;AAOJC,IAAAA,aAPI;AAQJC,IAAAA,SARI;AASJC,IAAAA,kBATI;AAUJC,IAAAA,mBAVI;AAWJC,IAAAA,mBAXI;AAYJ,OAAGC;AAZC,MAaFC,wBAAWC,OAAX,CAAmBd,KAAK,IAAI,EAA5B,CAbJ;;AAeA,QAAMe,UAAqB,GAAG;AAC5Bd,IAAAA,KAD4B;AAE5BC,IAAAA,UAF4B;AAG5BC,IAAAA,UAH4B;AAI5BC,IAAAA,QAJ4B;AAK5BC,IAAAA,UAL4B;AAM5BC,IAAAA,aAN4B;AAO5BC,IAAAA,aAP4B;AAQ5BC,IAAAA,SAR4B;AAS5BC,IAAAA,kBAT4B;AAU5BC,IAAAA,mBAV4B;AAW5BC,IAAAA;AAX4B,GAA9B;AAcA,SAAO;AAAEC,IAAAA,UAAF;AAAcG,IAAAA;AAAd,GAAP;AACD;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASC,WAAT,CACLC,UADK,EAELC,aAFK,EAGL;AACA,MAAI,CAACA,aAAL,EAAoB;AAClB;AACD;;AAED,QAAMC,eAAe,GAAGN,wBAAWC,OAAX,CAAmBG,UAAnB,CAAxB;;AAEA,OAAK,MAAM,CAACG,GAAD,EAAMC,KAAN,CAAX,IAA2BC,MAAM,CAACC,OAAP,CAAeL,aAAf,CAA3B,EAA0D;AACxD,QAAIG,KAAK,IAAI,IAAb,EAAmB;AACjBF,MAAAA,eAAe,CAACC,GAAD,CAAf,GAAuBC,KAAvB;AACD;AACF;;AAED,SAAOF,eAAP;AACD;;AAEM,SAASK,sBAAT,CAAgCH,KAAhC,EAAwD;AAC7D,MAAI,sBAASA,KAAT,CAAJ,EAAqB;AACnB,WAAOA,KAAP;AACD,GAFD,MAEO,IAAI,sBAASA,KAAT,CAAJ,EAAqB;AAC1B,WAAOI,MAAM,CAACJ,KAAD,CAAb;AACD,GAFM,MAEA;AACL,UAAM,IAAIK,KAAJ,CAAW,kBAAiBL,KAAM,EAAlC,CAAN;AACD;AACF","sourcesContent":["import { StyleSheet, StyleProp, TextStyle } from \"react-native\";\nimport { isString, isNumber } from \"lodash\";\n\nexport function extractStyles(style: StyleProp<any>) {\n const {\n color,\n fontFamily,\n fontWeight,\n fontSize,\n lineHeight,\n letterSpacing,\n textTransform,\n textAlign,\n textDecorationLine,\n textDecorationColor,\n textDecorationStyle,\n ...viewStyles\n } = StyleSheet.flatten(style || {});\n\n const textStyles: TextStyle = {\n color,\n fontFamily,\n fontWeight,\n fontSize,\n lineHeight,\n letterSpacing,\n textTransform,\n textAlign,\n textDecorationLine,\n textDecorationColor,\n textDecorationStyle,\n };\n\n return { viewStyles, textStyles };\n}\n\n/**\n * Merges a style object on top of another style object. In React Native,\n * keys with undefined values in a style object will still override styles\n * that appear earlier in a sequence. This avoids that problem.\n *\n * This lets us avoid the `...(something ? { something } : {})` pattern.\n * There doesn't seem to be a better way to do this. These all seem to not\n * work (i.e. they all result in `{ color: undefined }`:\n * `const mergedStyles = [{ color: \"red\" }, { color: undefined }]`\n * `const mergedStyles = StyleSheet.compose({ color: \"red\" }, { color: undefined })`\n * `const mergedStyles = StyleSheet.flatten([{ color: \"red\" }, { color: undefined }])`\n */\nexport function applyStyles(\n baseStyles: Array<StyleProp<any>>,\n stylesToApply: StyleProp<any> | undefined\n) {\n if (!stylesToApply) {\n return;\n }\n\n const flattenedStyles = StyleSheet.flatten(baseStyles);\n\n for (const [key, value] of Object.entries(stylesToApply)) {\n if (value != null) {\n flattenedStyles[key] = value;\n }\n }\n\n return flattenedStyles;\n}\n\nexport function getValueForRadioButton(value: string | number) {\n if (isString(value)) {\n return value;\n } else if (isNumber(value)) {\n return String(value);\n } else {\n throw new Error(`Invalid value: ${value}`);\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
|
|
@@ -3,7 +3,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
import Config from "../Config";
|
|
5
5
|
import IconButton from "../IconButton";
|
|
6
|
-
import {
|
|
6
|
+
import { getValueForRadioButton } from "../../utilities";
|
|
7
7
|
import { useRadioButtonGroupContext } from "./context";
|
|
8
8
|
|
|
9
9
|
const RadioButton = _ref => {
|
|
@@ -11,7 +11,7 @@ const RadioButton = _ref => {
|
|
|
11
11
|
Icon,
|
|
12
12
|
disabled = false,
|
|
13
13
|
color,
|
|
14
|
-
value,
|
|
14
|
+
value = "",
|
|
15
15
|
selected,
|
|
16
16
|
unselectedColor,
|
|
17
17
|
onPress,
|
|
@@ -25,15 +25,13 @@ const RadioButton = _ref => {
|
|
|
25
25
|
value: contextValue,
|
|
26
26
|
onValueChange
|
|
27
27
|
} = useRadioButtonGroupContext();
|
|
28
|
-
const realValue =
|
|
29
|
-
const realContextValue =
|
|
30
|
-
const isSelected = selected !== null && selected !== void 0 ? selected : realContextValue
|
|
28
|
+
const realValue = getValueForRadioButton(value);
|
|
29
|
+
const realContextValue = getValueForRadioButton(contextValue);
|
|
30
|
+
const isSelected = selected !== null && selected !== void 0 ? selected : realContextValue === realValue;
|
|
31
31
|
|
|
32
32
|
const handlePress = () => {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(realValue);
|
|
36
|
-
}
|
|
33
|
+
onPress === null || onPress === void 0 ? void 0 : onPress(realValue);
|
|
34
|
+
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(realValue);
|
|
37
35
|
};
|
|
38
36
|
|
|
39
37
|
return /*#__PURE__*/React.createElement(IconButton, _extends({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["RadioButton.tsx"],"names":["React","Config","IconButton","
|
|
1
|
+
{"version":3,"sources":["RadioButton.tsx"],"names":["React","Config","IconButton","getValueForRadioButton","useRadioButtonGroupContext","RadioButton","Icon","disabled","color","value","selected","unselectedColor","onPress","size","radioButtonSize","selectedIcon","unselectedIcon","style","rest","contextValue","onValueChange","realValue","realContextValue","isSelected","handlePress"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAGA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,UAAP,MAAuB,eAAvB;AACA,SAASC,sBAAT,QAAuC,iBAAvC;AACA,SAASC,0BAAT,QAA2C,WAA3C;;AAiBA,MAAMC,WAAuC,GAAG,QAa1C;AAAA,MAb2C;AAC/CC,IAAAA,IAD+C;AAE/CC,IAAAA,QAAQ,GAAG,KAFoC;AAG/CC,IAAAA,KAH+C;AAI/CC,IAAAA,KAAK,GAAG,EAJuC;AAK/CC,IAAAA,QAL+C;AAM/CC,IAAAA,eAN+C;AAO/CC,IAAAA,OAP+C;AAQ/CC,IAAAA,IAAI,GAAGZ,MAAM,CAACa,eARiC;AAS/CC,IAAAA,YAAY,GAAG,oCATgC;AAU/CC,IAAAA,cAAc,GAAG,sCAV8B;AAW/CC,IAAAA,KAX+C;AAY/C,OAAGC;AAZ4C,GAa3C;AACJ,QAAM;AAAET,IAAAA,KAAK,EAAEU,YAAT;AAAuBC,IAAAA;AAAvB,MAAyChB,0BAA0B,EAAzE;AAEA,QAAMiB,SAAS,GAAGlB,sBAAsB,CAACM,KAAD,CAAxC;AACA,QAAMa,gBAAgB,GAAGnB,sBAAsB,CAACgB,YAAD,CAA/C;AACA,QAAMI,UAAU,GAAGb,QAAH,aAAGA,QAAH,cAAGA,QAAH,GAAeY,gBAAgB,KAAKD,SAApD;;AAEA,QAAMG,WAAW,GAAG,MAAM;AACxBZ,IAAAA,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAGS,SAAH,CAAP;AACAD,IAAAA,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa,CAAGC,SAAH,CAAb;AACD,GAHD;;AAKA,sBACE,oBAAC,UAAD;AACE,IAAA,IAAI,EAAEf,IADR;AAEE,IAAA,IAAI,EAAEiB,UAAU,GAAGR,YAAH,GAAkBC,cAFpC;AAGE,IAAA,KAAK,EAAEO,UAAU,GAAGf,KAAH,GAAWG,eAH9B;AAIE,IAAA,QAAQ,EAAEJ,QAJZ;AAKE,IAAA,OAAO,EAAEiB,WALX;AAME,IAAA,IAAI,EAAEX,IANR;AAOE,IAAA,KAAK,EAAEI;AAPT,KAQMC,IARN,EADF;AAYD,CArCD;;AAuCA,eAAeb,WAAf","sourcesContent":["import * as React from \"react\";\nimport { StyleProp, ViewStyle } from \"react-native\";\n\nimport Config from \"../Config\";\nimport IconButton from \"../IconButton\";\nimport { getValueForRadioButton } from \"../../utilities\";\nimport { useRadioButtonGroupContext } from \"./context\";\n\nimport type { IconSlot } from \"../../interfaces/Icon\";\n\nexport type RadioButtonProps = {\n selected?: boolean;\n disabled?: boolean;\n color?: string;\n value?: string | number;\n unselectedColor?: string;\n onPress?: (value?: string) => void;\n style?: StyleProp<ViewStyle>;\n size?: number;\n selectedIcon?: string;\n unselectedIcon?: string;\n} & IconSlot;\n\nconst RadioButton: React.FC<RadioButtonProps> = ({\n Icon,\n disabled = false,\n color,\n value = \"\",\n selected,\n unselectedColor,\n onPress,\n size = Config.radioButtonSize,\n selectedIcon = \"MaterialIcons/radio-button-checked\",\n unselectedIcon = \"MaterialIcons/radio-button-unchecked\",\n style,\n ...rest\n}) => {\n const { value: contextValue, onValueChange } = useRadioButtonGroupContext();\n\n const realValue = getValueForRadioButton(value);\n const realContextValue = getValueForRadioButton(contextValue);\n const isSelected = selected ?? realContextValue === realValue;\n\n const handlePress = () => {\n onPress?.(realValue);\n onValueChange?.(realValue);\n };\n\n return (\n <IconButton\n Icon={Icon}\n icon={isSelected ? selectedIcon : unselectedIcon}\n color={isSelected ? color : unselectedColor}\n disabled={disabled}\n onPress={handlePress}\n size={size}\n style={style}\n {...rest}\n />\n );\n};\n\nexport default RadioButton;\n"]}
|
|
@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
2
2
|
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
import { View } from "react-native";
|
|
5
|
-
import {
|
|
5
|
+
import { getValueForRadioButton } from "../../utilities";
|
|
6
6
|
import { radioButtonGroupContext, Direction } from "./context";
|
|
7
7
|
const {
|
|
8
8
|
Provider
|
|
@@ -11,36 +11,27 @@ const {
|
|
|
11
11
|
const RadioButtonGroup = _ref => {
|
|
12
12
|
let {
|
|
13
13
|
direction = Direction.Vertical,
|
|
14
|
-
value,
|
|
14
|
+
value = "",
|
|
15
15
|
onValueChange,
|
|
16
|
-
defaultValue,
|
|
16
|
+
defaultValue = "",
|
|
17
17
|
style,
|
|
18
18
|
children,
|
|
19
19
|
...rest
|
|
20
20
|
} = _ref;
|
|
21
|
-
const [internalValue, setInternalValue] = React.useState();
|
|
21
|
+
const [internalValue, setInternalValue] = React.useState("");
|
|
22
22
|
React.useEffect(() => {
|
|
23
|
-
const realValue =
|
|
24
|
-
|
|
25
|
-
if (realValue) {
|
|
26
|
-
setInternalValue(realValue);
|
|
27
|
-
}
|
|
23
|
+
const realValue = getValueForRadioButton(value);
|
|
24
|
+
setInternalValue(realValue);
|
|
28
25
|
}, [value]);
|
|
29
26
|
React.useEffect(() => {
|
|
30
|
-
const realDefaultValue =
|
|
31
|
-
|
|
32
|
-
if (realDefaultValue) {
|
|
33
|
-
setInternalValue(realDefaultValue);
|
|
34
|
-
}
|
|
27
|
+
const realDefaultValue = getValueForRadioButton(defaultValue);
|
|
28
|
+
setInternalValue(realDefaultValue);
|
|
35
29
|
}, [defaultValue]);
|
|
36
30
|
|
|
37
31
|
const handleValueChange = newValue => {
|
|
38
|
-
const realNewValue =
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
setInternalValue(newValue);
|
|
42
|
-
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue);
|
|
43
|
-
}
|
|
32
|
+
const realNewValue = getValueForRadioButton(newValue);
|
|
33
|
+
setInternalValue(realNewValue);
|
|
34
|
+
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(realNewValue);
|
|
44
35
|
};
|
|
45
36
|
|
|
46
37
|
const _containerStyle = [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["RadioButtonGroup.tsx"],"names":["React","View","
|
|
1
|
+
{"version":3,"sources":["RadioButtonGroup.tsx"],"names":["React","View","getValueForRadioButton","radioButtonGroupContext","Direction","Provider","RadioButtonGroup","direction","Vertical","value","onValueChange","defaultValue","style","children","rest","internalValue","setInternalValue","useState","useEffect","realValue","realDefaultValue","handleValueChange","newValue","realNewValue","_containerStyle","flexDirection","Horizontal","push","alignItems","minHeight"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,QAA2C,cAA3C;AAEA,SAASC,sBAAT,QAAuC,iBAAvC;AACA,SAASC,uBAAT,EAAkCC,SAAlC,QAAmD,WAAnD;AAWA,MAAM;AAAEC,EAAAA;AAAF,IAAeF,uBAArB;;AAEA,MAAMG,gBAAiD,GAAG,QAQpD;AAAA,MARqD;AACzDC,IAAAA,SAAS,GAAGH,SAAS,CAACI,QADmC;AAEzDC,IAAAA,KAAK,GAAG,EAFiD;AAGzDC,IAAAA,aAHyD;AAIzDC,IAAAA,YAAY,GAAG,EAJ0C;AAKzDC,IAAAA,KALyD;AAMzDC,IAAAA,QANyD;AAOzD,OAAGC;AAPsD,GAQrD;AACJ,QAAM,CAACC,aAAD,EAAgBC,gBAAhB,IAAoChB,KAAK,CAACiB,QAAN,CAAuB,EAAvB,CAA1C;AAEAjB,EAAAA,KAAK,CAACkB,SAAN,CAAgB,MAAM;AACpB,UAAMC,SAAS,GAAGjB,sBAAsB,CAACO,KAAD,CAAxC;AAEAO,IAAAA,gBAAgB,CAACG,SAAD,CAAhB;AACD,GAJD,EAIG,CAACV,KAAD,CAJH;AAMAT,EAAAA,KAAK,CAACkB,SAAN,CAAgB,MAAM;AACpB,UAAME,gBAAgB,GAAGlB,sBAAsB,CAACS,YAAD,CAA/C;AAEAK,IAAAA,gBAAgB,CAACI,gBAAD,CAAhB;AACD,GAJD,EAIG,CAACT,YAAD,CAJH;;AAMA,QAAMU,iBAAiB,GAAIC,QAAD,IAA+B;AACvD,UAAMC,YAAY,GAAGrB,sBAAsB,CAACoB,QAAD,CAA3C;AAEAN,IAAAA,gBAAgB,CAACO,YAAD,CAAhB;AACAb,IAAAA,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa,CAAGa,YAAH,CAAb;AACD,GALD;;AAOA,QAAMC,eAAqC,GAAG,CAC5C;AACEC,IAAAA,aAAa,EAAElB,SAAS,KAAKH,SAAS,CAACsB,UAAxB,GAAqC,KAArC,GAA6C;AAD9D,GAD4C,CAA9C;;AAMA,MAAInB,SAAS,KAAKH,SAAS,CAACI,QAA5B,EAAsC;AACpCgB,IAAAA,eAAe,CAACG,IAAhB,CAAqB;AACnBC,MAAAA,UAAU,EAAE;AADO,KAArB;AAGD;;AAED,sBACE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAE,CAAC;AAAEC,MAAAA,SAAS,EAAE;AAAb,KAAD,EAAoBjB,KAApB;AAAb,KAA6CE,IAA7C,gBACE,oBAAC,QAAD;AACE,IAAA,KAAK,EAAE;AACLL,MAAAA,KAAK,EAAEM,aAAa,IAAI,EADnB;AAELL,MAAAA,aAAa,EAAEW,iBAFV;AAGLd,MAAAA;AAHK;AADT,kBAOE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEiB;AAAb,KAA+BX,QAA/B,CAPF,CADF,CADF;AAaD,CAvDD;;AAyDA,eAAeP,gBAAf","sourcesContent":["import * as React from \"react\";\nimport { View, StyleProp, ViewStyle } from \"react-native\";\nimport type { Theme } from \"../../styles/DefaultTheme\";\nimport { getValueForRadioButton } from \"../../utilities\";\nimport { radioButtonGroupContext, Direction } from \"./context\";\nexport interface RadioButtonGroupProps {\n direction?: Direction;\n style?: StyleProp<ViewStyle>;\n value: string;\n onValueChange?: (value: string) => void;\n defaultValue?: string | number;\n theme: Theme;\n children: React.ReactNode;\n}\n\nconst { Provider } = radioButtonGroupContext;\n\nconst RadioButtonGroup: React.FC<RadioButtonGroupProps> = ({\n direction = Direction.Vertical,\n value = \"\",\n onValueChange,\n defaultValue = \"\",\n style,\n children,\n ...rest\n}) => {\n const [internalValue, setInternalValue] = React.useState<string>(\"\");\n\n React.useEffect(() => {\n const realValue = getValueForRadioButton(value);\n\n setInternalValue(realValue);\n }, [value]);\n\n React.useEffect(() => {\n const realDefaultValue = getValueForRadioButton(defaultValue);\n\n setInternalValue(realDefaultValue);\n }, [defaultValue]);\n\n const handleValueChange = (newValue: string | number) => {\n const realNewValue = getValueForRadioButton(newValue);\n\n setInternalValue(realNewValue);\n onValueChange?.(realNewValue);\n };\n\n const _containerStyle: StyleProp<ViewStyle> = [\n {\n flexDirection: direction === Direction.Horizontal ? \"row\" : \"column\",\n },\n ];\n\n if (direction !== Direction.Vertical) {\n _containerStyle.push({\n alignItems: \"center\",\n });\n }\n\n return (\n <View style={[{ minHeight: 40 }, style]} {...rest}>\n <Provider\n value={{\n value: internalValue || \"\",\n onValueChange: handleValueChange,\n direction,\n }}\n >\n <View style={_containerStyle}>{children}</View>\n </Provider>\n </View>\n );\n};\n\nexport default RadioButtonGroup;\n"]}
|
|
@@ -7,7 +7,7 @@ import Text from "../Text";
|
|
|
7
7
|
import { useRadioButtonGroupContext } from "./context";
|
|
8
8
|
import { Direction as GroupDirection } from "./context";
|
|
9
9
|
import Touchable from "../Touchable";
|
|
10
|
-
import { extractStyles,
|
|
10
|
+
import { extractStyles, getValueForRadioButton } from "../../utilities";
|
|
11
11
|
export let Direction;
|
|
12
12
|
|
|
13
13
|
(function (Direction) {
|
|
@@ -25,13 +25,13 @@ const getRadioButtonAlignment = (parentDirection, direction) => {
|
|
|
25
25
|
}
|
|
26
26
|
};
|
|
27
27
|
|
|
28
|
-
const renderLabel = (
|
|
29
|
-
if (typeof
|
|
28
|
+
const renderLabel = (value, labelStyle, textStyle) => {
|
|
29
|
+
if (typeof value === "string") {
|
|
30
30
|
return /*#__PURE__*/React.createElement(Text, {
|
|
31
31
|
style: [labelStyle, textStyle]
|
|
32
|
-
},
|
|
32
|
+
}, value);
|
|
33
33
|
} else {
|
|
34
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null,
|
|
34
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, value);
|
|
35
35
|
}
|
|
36
36
|
};
|
|
37
37
|
|
|
@@ -39,7 +39,7 @@ const RadioButtonRow = _ref => {
|
|
|
39
39
|
let {
|
|
40
40
|
Icon,
|
|
41
41
|
label,
|
|
42
|
-
value,
|
|
42
|
+
value = "",
|
|
43
43
|
color,
|
|
44
44
|
unselectedColor,
|
|
45
45
|
onPress,
|
|
@@ -57,15 +57,13 @@ const RadioButtonRow = _ref => {
|
|
|
57
57
|
onValueChange,
|
|
58
58
|
direction: parentDirection
|
|
59
59
|
} = useRadioButtonGroupContext();
|
|
60
|
-
const realValue =
|
|
61
|
-
const realContextValue =
|
|
62
|
-
const isSelected = selected !== null && selected !== void 0 ? selected : realContextValue
|
|
60
|
+
const realValue = getValueForRadioButton(value);
|
|
61
|
+
const realContextValue = getValueForRadioButton(contextValue);
|
|
62
|
+
const isSelected = selected !== null && selected !== void 0 ? selected : realContextValue === realValue;
|
|
63
63
|
|
|
64
64
|
const handlePress = () => {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(realValue);
|
|
68
|
-
}
|
|
65
|
+
onPress === null || onPress === void 0 ? void 0 : onPress(realValue);
|
|
66
|
+
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(realValue);
|
|
69
67
|
};
|
|
70
68
|
|
|
71
69
|
const {
|
|
@@ -89,7 +87,7 @@ const RadioButtonRow = _ref => {
|
|
|
89
87
|
}
|
|
90
88
|
}, /*#__PURE__*/React.createElement(RadioButton, {
|
|
91
89
|
Icon: Icon,
|
|
92
|
-
selected: isSelected
|
|
90
|
+
selected: isSelected,
|
|
93
91
|
value: realValue,
|
|
94
92
|
color: color,
|
|
95
93
|
unselectedColor: unselectedColor,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["RadioButtonRow.tsx"],"names":["React","StyleSheet","View","Platform","RadioButton","Text","useRadioButtonGroupContext","Direction","GroupDirection","Touchable","extractStyles","
|
|
1
|
+
{"version":3,"sources":["RadioButtonRow.tsx"],"names":["React","StyleSheet","View","Platform","RadioButton","Text","useRadioButtonGroupContext","Direction","GroupDirection","Touchable","extractStyles","getValueForRadioButton","getRadioButtonAlignment","parentDirection","direction","Horizontal","Row","RowReverse","renderLabel","value","labelStyle","textStyle","RadioButtonRow","Icon","label","color","unselectedColor","onPress","labelContainerStyle","radioButtonStyle","selected","disabled","style","rest","contextValue","onValueChange","realValue","realContextValue","isSelected","handlePress","textStyles","viewStyles","styles","mainParent","flexDirection","alignItems","flex","create","justifyContent","paddingStart","minHeight","paddingEnd","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 RadioButton, { RadioButtonProps } from \"./RadioButton\";\nimport Text from \"../Text\";\nimport { useRadioButtonGroupContext } from \"./context\";\nimport type { IconSlot } from \"../../interfaces/Icon\";\nimport { Direction as GroupDirection } from \"./context\";\nimport Touchable from \"../Touchable\";\nimport { extractStyles, getValueForRadioButton } from \"../../utilities\";\n\nexport enum Direction {\n Row = \"row\",\n RowReverse = \"row-reverse\",\n}\n\nexport interface RadioButtonRowProps extends Omit<RadioButtonProps, \"onPress\"> {\n label: string | React.ReactNode;\n value: string | number; // A string (or number that will be parsed String(number)) that this radio button row represents when selected\n color?: string;\n unselectedColor?: string;\n labelContainerStyle: StyleProp<ViewStyle>;\n radioButtonStyle?: StyleProp<ViewStyle>;\n labelStyle?: StyleProp<TextStyle>;\n onPress?: (value: string) => void;\n direction?: Direction;\n}\n\nconst getRadioButtonAlignment = (\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 RadioButtonRow: React.FC<RadioButtonRowProps & IconSlot> = ({\n Icon,\n label,\n value = \"\",\n color,\n unselectedColor,\n onPress,\n labelContainerStyle,\n labelStyle,\n radioButtonStyle,\n direction = Direction.Row,\n selected,\n disabled,\n style,\n ...rest\n}) => {\n const {\n value: contextValue,\n onValueChange,\n direction: parentDirection,\n } = useRadioButtonGroupContext();\n\n const realValue = getValueForRadioButton(value);\n const realContextValue = getValueForRadioButton(contextValue);\n const isSelected = selected ?? realContextValue === realValue;\n\n const handlePress = () => {\n onPress?.(realValue);\n onValueChange?.(realValue);\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: getRadioButtonAlignment(parentDirection, direction),\n }}\n >\n <RadioButton\n Icon={Icon}\n selected={isSelected}\n value={realValue}\n color={color}\n unselectedColor={unselectedColor}\n style={radioButtonStyle}\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 flex: 1,\n ...Platform.select({\n web: {\n cursor: \"pointer\",\n userSelect: \"none\",\n },\n }),\n },\n label: {\n flex: 3,\n },\n});\n\nexport default RadioButtonRow;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ImageBackground.
|
|
1
|
+
{"version":3,"sources":["ImageBackground.ts"],"names":["COMPONENT_TYPES","createImageProp","createResizeModeProp","createTextEnumProp","createColorProp","SEED_DATA","name","tag","doc_link","code_link","description","category","media","layout","width","height","props","source","defaultValue","resizeMode","backgroundColor","label","backfaceVisibility","options"],"mappings":"AAAA,SACEA,eADF,EAEEC,eAFF,EAGEC,oBAHF,EAIEC,kBAJF,EAKEC,eALF,QAMO,iBANP;AAQA,OAAO,MAAMC,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,kBADiB;AAEvBC,EAAAA,GAAG,EAAE,iBAFkB;AAGvBC,EAAAA,QAAQ,EACN,oEAJqB;AAKvBC,EAAAA,SAAS,EACP,yFANqB;AAOvBC,EAAAA,WAAW,EACT,8FARqB;AASvBC,EAAAA,QAAQ,EAAEX,eAAe,CAACY,KATH;AAUvBC,EAAAA,MAAM,EAAE;AACNC,IAAAA,KAAK,EAAE,MADD;AAENC,IAAAA,MAAM,EAAE;AAFF,GAVe;AAcvBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,MAAM,EAAEhB,eAAe,CAAC;AACtBiB,MAAAA,YAAY,EACV;AAFoB,KAAD,CADlB;AAKLC,IAAAA,UAAU,EAAEjB,oBAAoB,EAL3B;AAMLkB,IAAAA,eAAe,EAAEhB,eAAe,CAAC;AAC/BiB,MAAAA,KAAK,EAAE,kBADwB;AAE/BX,MAAAA,WAAW,EAAE;AAFkB,KAAD,CAN3B;AAULY,IAAAA,kBAAkB,EAAEnB,kBAAkB,CAAC;AACrCkB,MAAAA,KAAK,EAAE,qBAD8B;AAErCX,MAAAA,WAAW,EAAE,iDAFwB;AAGrCa,MAAAA,OAAO,EAAE,CAAC,SAAD,EAAY,QAAZ;AAH4B,KAAD;AAVjC;AAdgB,CAAlB","sourcesContent":["import {\n COMPONENT_TYPES,\n createImageProp,\n createResizeModeProp,\n createTextEnumProp,\n createColorProp,\n} from \"@draftbit/types\";\n\nexport const SEED_DATA = {\n name: \"Image Background\",\n tag: \"ImageBackground\",\n doc_link:\n \"https://docs.expo.io/versions/latest/react-native/imagebackground/\",\n code_link:\n \"https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js\",\n description:\n \"A very simple drop-in replacement for Image that allows you to use an Image as a background.\",\n category: COMPONENT_TYPES.media,\n layout: {\n width: \"100%\",\n height: \"100%\",\n },\n props: {\n source: createImageProp({\n defaultValue:\n \"https://static.draftbit.com/images/placeholder-image-background.png\",\n }),\n resizeMode: createResizeModeProp(),\n backgroundColor: createColorProp({\n label: \"Background Color\",\n description: \"If no image is chosen render a colored background.\",\n }),\n backfaceVisibility: createTextEnumProp({\n label: \"Backface Visibility\",\n description: \"When animating a card, show the back face of it\",\n options: [\"visible\", \"hidden\"],\n }),\n },\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["KeyboardAvoidingView.
|
|
1
|
+
{"version":3,"sources":["KeyboardAvoidingView.ts"],"names":["COMPONENT_TYPES","FORM_TYPES","PROP_TYPES","GROUPS","SEED_DATA","name","tag","description","category","layout","props","enabled","label","editable","required","defaultValue","formType","boolean","propType","BOOLEAN","group","basic","behavior","options","flatArray","STRING","keyboardVerticalOffset","number","NUMBER"],"mappings":"AAAA,SACEA,eADF,EAEEC,UAFF,EAGEC,UAHF,EAIEC,MAJF,QAKO,iBALP;AAOA,OAAO,MAAMC,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,wBADiB;AAEvBC,EAAAA,GAAG,EAAE,sBAFkB;AAGvBC,EAAAA,WAAW,EAAE,0DAHU;AAIvBC,EAAAA,QAAQ,EAAER,eAAe,CAACS,MAJH;AAKvBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAE;AACPC,MAAAA,KAAK,EAAE,QADA;AAEPL,MAAAA,WAAW,EAAE,mCAFN;AAGPM,MAAAA,QAAQ,EAAE,IAHH;AAIPC,MAAAA,QAAQ,EAAE,IAJH;AAKPC,MAAAA,YAAY,EAAE,IALP;AAMPC,MAAAA,QAAQ,EAAEf,UAAU,CAACgB,OANd;AAOPC,MAAAA,QAAQ,EAAEhB,UAAU,CAACiB,OAPd;AAQPC,MAAAA,KAAK,EAAEjB,MAAM,CAACkB;AARP,KADJ;AAWLC,IAAAA,QAAQ,EAAE;AACRV,MAAAA,KAAK,EAAE,mBADC;AAERL,MAAAA,WAAW,EACT,uGAHM;AAIRM,MAAAA,QAAQ,EAAE,IAJF;AAKRC,MAAAA,QAAQ,EAAE,IALF;AAMRC,MAAAA,YAAY,EAAE,SANN;AAORQ,MAAAA,OAAO,EAAE,CAAC,SAAD,EAAY,UAAZ,EAAwB,QAAxB,CAPD;AAQRP,MAAAA,QAAQ,EAAEf,UAAU,CAACuB,SARb;AASRN,MAAAA,QAAQ,EAAEhB,UAAU,CAACuB,MATb;AAURL,MAAAA,KAAK,EAAEjB,MAAM,CAACkB;AAVN,KAXL;AAuBLK,IAAAA,sBAAsB,EAAE;AACtBd,MAAAA,KAAK,EAAE,0BADe;AAEtBL,MAAAA,WAAW,EACT,8DAHoB;AAItBM,MAAAA,QAAQ,EAAE,IAJY;AAKtBC,MAAAA,QAAQ,EAAE,KALY;AAMtBC,MAAAA,YAAY,EAAE,CANQ;AAOtBC,MAAAA,QAAQ,EAAEf,UAAU,CAAC0B,MAPC;AAQtBT,MAAAA,QAAQ,EAAEhB,UAAU,CAAC0B,MARC;AAStBR,MAAAA,KAAK,EAAEjB,MAAM,CAACkB;AATQ;AAvBnB;AALgB,CAAlB","sourcesContent":["import {\n COMPONENT_TYPES,\n FORM_TYPES,\n PROP_TYPES,\n GROUPS,\n} from \"@draftbit/types\";\n\nexport const SEED_DATA = {\n name: \"Keyboard Avoiding View\",\n tag: \"KeyboardAvoidingView\",\n description: \"View that moves out of the way of the virtual keyboard. \",\n category: COMPONENT_TYPES.layout,\n props: {\n enabled: {\n label: \"Enable\",\n description: \"Enable the keyboard avoiding view\",\n editable: true,\n required: true,\n defaultValue: true,\n formType: FORM_TYPES.boolean,\n propType: PROP_TYPES.BOOLEAN,\n group: GROUPS.basic,\n },\n behavior: {\n label: \"Resizing Behavior\",\n description:\n \"The behavior for how the keyboard resizing interacts with the rest of the screen. (Default: padding).\",\n editable: true,\n required: true,\n defaultValue: \"padding\",\n options: [\"padding\", \"position\", \"height\"],\n formType: FORM_TYPES.flatArray,\n propType: PROP_TYPES.STRING,\n group: GROUPS.basic,\n },\n keyboardVerticalOffset: {\n label: \"Keyboard Vertical Offset\",\n description:\n \"The distance between the bottom of the view and the keyboard\",\n editable: true,\n required: false,\n defaultValue: 0,\n formType: FORM_TYPES.number,\n propType: PROP_TYPES.NUMBER,\n group: GROUPS.basic,\n },\n },\n};\n"]}
|
package/lib/module/utilities.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { StyleSheet } from "react-native";
|
|
2
|
+
import { isString, isNumber } from "lodash";
|
|
2
3
|
export function extractStyles(style) {
|
|
3
4
|
const {
|
|
4
5
|
color,
|
|
@@ -60,18 +61,13 @@ export function applyStyles(baseStyles, stylesToApply) {
|
|
|
60
61
|
|
|
61
62
|
return flattenedStyles;
|
|
62
63
|
}
|
|
63
|
-
export function
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
case "number":
|
|
71
|
-
return String(value);
|
|
72
|
-
|
|
73
|
-
default:
|
|
74
|
-
return undefined;
|
|
64
|
+
export function getValueForRadioButton(value) {
|
|
65
|
+
if (isString(value)) {
|
|
66
|
+
return value;
|
|
67
|
+
} else if (isNumber(value)) {
|
|
68
|
+
return String(value);
|
|
69
|
+
} else {
|
|
70
|
+
throw new Error(`Invalid value: ${value}`);
|
|
75
71
|
}
|
|
76
72
|
}
|
|
77
73
|
//# sourceMappingURL=utilities.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["utilities.ts"],"names":["StyleSheet","extractStyles","style","color","fontFamily","fontWeight","fontSize","lineHeight","letterSpacing","textTransform","textAlign","textDecorationLine","textDecorationColor","textDecorationStyle","viewStyles","flatten","textStyles","applyStyles","baseStyles","stylesToApply","flattenedStyles","key","value","Object","entries","
|
|
1
|
+
{"version":3,"sources":["utilities.ts"],"names":["StyleSheet","isString","isNumber","extractStyles","style","color","fontFamily","fontWeight","fontSize","lineHeight","letterSpacing","textTransform","textAlign","textDecorationLine","textDecorationColor","textDecorationStyle","viewStyles","flatten","textStyles","applyStyles","baseStyles","stylesToApply","flattenedStyles","key","value","Object","entries","getValueForRadioButton","String","Error"],"mappings":"AAAA,SAASA,UAAT,QAAiD,cAAjD;AACA,SAASC,QAAT,EAAmBC,QAAnB,QAAmC,QAAnC;AAEA,OAAO,SAASC,aAAT,CAAuBC,KAAvB,EAA8C;AACnD,QAAM;AACJC,IAAAA,KADI;AAEJC,IAAAA,UAFI;AAGJC,IAAAA,UAHI;AAIJC,IAAAA,QAJI;AAKJC,IAAAA,UALI;AAMJC,IAAAA,aANI;AAOJC,IAAAA,aAPI;AAQJC,IAAAA,SARI;AASJC,IAAAA,kBATI;AAUJC,IAAAA,mBAVI;AAWJC,IAAAA,mBAXI;AAYJ,OAAGC;AAZC,MAaFhB,UAAU,CAACiB,OAAX,CAAmBb,KAAK,IAAI,EAA5B,CAbJ;AAeA,QAAMc,UAAqB,GAAG;AAC5Bb,IAAAA,KAD4B;AAE5BC,IAAAA,UAF4B;AAG5BC,IAAAA,UAH4B;AAI5BC,IAAAA,QAJ4B;AAK5BC,IAAAA,UAL4B;AAM5BC,IAAAA,aAN4B;AAO5BC,IAAAA,aAP4B;AAQ5BC,IAAAA,SAR4B;AAS5BC,IAAAA,kBAT4B;AAU5BC,IAAAA,mBAV4B;AAW5BC,IAAAA;AAX4B,GAA9B;AAcA,SAAO;AAAEC,IAAAA,UAAF;AAAcE,IAAAA;AAAd,GAAP;AACD;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,WAAT,CACLC,UADK,EAELC,aAFK,EAGL;AACA,MAAI,CAACA,aAAL,EAAoB;AAClB;AACD;;AAED,QAAMC,eAAe,GAAGtB,UAAU,CAACiB,OAAX,CAAmBG,UAAnB,CAAxB;;AAEA,OAAK,MAAM,CAACG,GAAD,EAAMC,KAAN,CAAX,IAA2BC,MAAM,CAACC,OAAP,CAAeL,aAAf,CAA3B,EAA0D;AACxD,QAAIG,KAAK,IAAI,IAAb,EAAmB;AACjBF,MAAAA,eAAe,CAACC,GAAD,CAAf,GAAuBC,KAAvB;AACD;AACF;;AAED,SAAOF,eAAP;AACD;AAED,OAAO,SAASK,sBAAT,CAAgCH,KAAhC,EAAwD;AAC7D,MAAIvB,QAAQ,CAACuB,KAAD,CAAZ,EAAqB;AACnB,WAAOA,KAAP;AACD,GAFD,MAEO,IAAItB,QAAQ,CAACsB,KAAD,CAAZ,EAAqB;AAC1B,WAAOI,MAAM,CAACJ,KAAD,CAAb;AACD,GAFM,MAEA;AACL,UAAM,IAAIK,KAAJ,CAAW,kBAAiBL,KAAM,EAAlC,CAAN;AACD;AACF","sourcesContent":["import { StyleSheet, StyleProp, TextStyle } from \"react-native\";\nimport { isString, isNumber } from \"lodash\";\n\nexport function extractStyles(style: StyleProp<any>) {\n const {\n color,\n fontFamily,\n fontWeight,\n fontSize,\n lineHeight,\n letterSpacing,\n textTransform,\n textAlign,\n textDecorationLine,\n textDecorationColor,\n textDecorationStyle,\n ...viewStyles\n } = StyleSheet.flatten(style || {});\n\n const textStyles: TextStyle = {\n color,\n fontFamily,\n fontWeight,\n fontSize,\n lineHeight,\n letterSpacing,\n textTransform,\n textAlign,\n textDecorationLine,\n textDecorationColor,\n textDecorationStyle,\n };\n\n return { viewStyles, textStyles };\n}\n\n/**\n * Merges a style object on top of another style object. In React Native,\n * keys with undefined values in a style object will still override styles\n * that appear earlier in a sequence. This avoids that problem.\n *\n * This lets us avoid the `...(something ? { something } : {})` pattern.\n * There doesn't seem to be a better way to do this. These all seem to not\n * work (i.e. they all result in `{ color: undefined }`:\n * `const mergedStyles = [{ color: \"red\" }, { color: undefined }]`\n * `const mergedStyles = StyleSheet.compose({ color: \"red\" }, { color: undefined })`\n * `const mergedStyles = StyleSheet.flatten([{ color: \"red\" }, { color: undefined }])`\n */\nexport function applyStyles(\n baseStyles: Array<StyleProp<any>>,\n stylesToApply: StyleProp<any> | undefined\n) {\n if (!stylesToApply) {\n return;\n }\n\n const flattenedStyles = StyleSheet.flatten(baseStyles);\n\n for (const [key, value] of Object.entries(stylesToApply)) {\n if (value != null) {\n flattenedStyles[key] = value;\n }\n }\n\n return flattenedStyles;\n}\n\nexport function getValueForRadioButton(value: string | number) {\n if (isString(value)) {\n return value;\n } else if (isNumber(value)) {\n return String(value);\n } else {\n throw new Error(`Invalid value: ${value}`);\n }\n}\n"]}
|
|
@@ -5,9 +5,9 @@ export declare type RadioButtonProps = {
|
|
|
5
5
|
selected?: boolean;
|
|
6
6
|
disabled?: boolean;
|
|
7
7
|
color?: string;
|
|
8
|
-
value?: string;
|
|
8
|
+
value?: string | number;
|
|
9
9
|
unselectedColor?: string;
|
|
10
|
-
onPress?: (value
|
|
10
|
+
onPress?: (value?: string) => void;
|
|
11
11
|
style?: StyleProp<ViewStyle>;
|
|
12
12
|
size?: number;
|
|
13
13
|
selectedIcon?: string;
|
|
@@ -5,7 +5,7 @@ import { Direction } from "./context";
|
|
|
5
5
|
export interface RadioButtonGroupProps {
|
|
6
6
|
direction?: Direction;
|
|
7
7
|
style?: StyleProp<ViewStyle>;
|
|
8
|
-
value
|
|
8
|
+
value: string;
|
|
9
9
|
onValueChange?: (value: string) => void;
|
|
10
10
|
defaultValue?: string | number;
|
|
11
11
|
theme: Theme;
|
|
@@ -8,7 +8,7 @@ export declare enum Direction {
|
|
|
8
8
|
}
|
|
9
9
|
export interface RadioButtonRowProps extends Omit<RadioButtonProps, "onPress"> {
|
|
10
10
|
label: string | React.ReactNode;
|
|
11
|
-
value: string;
|
|
11
|
+
value: string | number;
|
|
12
12
|
color?: string;
|
|
13
13
|
unselectedColor?: string;
|
|
14
14
|
labelContainerStyle: StyleProp<ViewStyle>;
|
|
@@ -16,4 +16,4 @@ export declare function extractStyles(style: StyleProp<any>): {
|
|
|
16
16
|
* `const mergedStyles = StyleSheet.flatten([{ color: "red" }, { color: undefined }])`
|
|
17
17
|
*/
|
|
18
18
|
export declare function applyStyles(baseStyles: Array<StyleProp<any>>, stylesToApply: StyleProp<any> | undefined): any;
|
|
19
|
-
export declare function
|
|
19
|
+
export declare function getValueForRadioButton(value: string | number): string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@draftbit/core",
|
|
3
|
-
"version": "43.4.5
|
|
3
|
+
"version": "43.4.5",
|
|
4
4
|
"description": "Core (non-native) Components",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"module": "lib/module/index.js",
|
|
@@ -80,5 +80,5 @@
|
|
|
80
80
|
]
|
|
81
81
|
]
|
|
82
82
|
},
|
|
83
|
-
"gitHead": "
|
|
83
|
+
"gitHead": "ba3f28fcb72b7286619df898ae4068de4655c9b9"
|
|
84
84
|
}
|
|
@@ -1,19 +1,16 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import Config from "../Config";
|
|
3
3
|
import IconButton from "../IconButton";
|
|
4
|
-
import {
|
|
4
|
+
import { getValueForRadioButton } from "../../utilities";
|
|
5
5
|
import { useRadioButtonGroupContext } from "./context";
|
|
6
|
-
const RadioButton = ({ Icon, disabled = false, color, value, selected, unselectedColor, onPress, size = Config.radioButtonSize, selectedIcon = "MaterialIcons/radio-button-checked", unselectedIcon = "MaterialIcons/radio-button-unchecked", style, ...rest }) => {
|
|
6
|
+
const RadioButton = ({ Icon, disabled = false, color, value = "", selected, unselectedColor, onPress, size = Config.radioButtonSize, selectedIcon = "MaterialIcons/radio-button-checked", unselectedIcon = "MaterialIcons/radio-button-unchecked", style, ...rest }) => {
|
|
7
7
|
const { value: contextValue, onValueChange } = useRadioButtonGroupContext();
|
|
8
|
-
const realValue =
|
|
9
|
-
const realContextValue =
|
|
10
|
-
const isSelected = selected ??
|
|
11
|
-
(realContextValue && realValue && realContextValue === realValue);
|
|
8
|
+
const realValue = getValueForRadioButton(value);
|
|
9
|
+
const realContextValue = getValueForRadioButton(contextValue);
|
|
10
|
+
const isSelected = selected ?? realContextValue === realValue;
|
|
12
11
|
const handlePress = () => {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
onValueChange?.(realValue);
|
|
16
|
-
}
|
|
12
|
+
onPress?.(realValue);
|
|
13
|
+
onValueChange?.(realValue);
|
|
17
14
|
};
|
|
18
15
|
return (React.createElement(IconButton, { Icon: Icon, icon: isSelected ? selectedIcon : unselectedIcon, color: isSelected ? color : unselectedColor, disabled: disabled, onPress: handlePress, size: size, style: style, ...rest }));
|
|
19
16
|
};
|
|
@@ -3,7 +3,7 @@ import { StyleProp, ViewStyle } from "react-native";
|
|
|
3
3
|
|
|
4
4
|
import Config from "../Config";
|
|
5
5
|
import IconButton from "../IconButton";
|
|
6
|
-
import {
|
|
6
|
+
import { getValueForRadioButton } from "../../utilities";
|
|
7
7
|
import { useRadioButtonGroupContext } from "./context";
|
|
8
8
|
|
|
9
9
|
import type { IconSlot } from "../../interfaces/Icon";
|
|
@@ -12,9 +12,9 @@ export type RadioButtonProps = {
|
|
|
12
12
|
selected?: boolean;
|
|
13
13
|
disabled?: boolean;
|
|
14
14
|
color?: string;
|
|
15
|
-
value?: string;
|
|
15
|
+
value?: string | number;
|
|
16
16
|
unselectedColor?: string;
|
|
17
|
-
onPress?: (value
|
|
17
|
+
onPress?: (value?: string) => void;
|
|
18
18
|
style?: StyleProp<ViewStyle>;
|
|
19
19
|
size?: number;
|
|
20
20
|
selectedIcon?: string;
|
|
@@ -25,7 +25,7 @@ const RadioButton: React.FC<RadioButtonProps> = ({
|
|
|
25
25
|
Icon,
|
|
26
26
|
disabled = false,
|
|
27
27
|
color,
|
|
28
|
-
value,
|
|
28
|
+
value = "",
|
|
29
29
|
selected,
|
|
30
30
|
unselectedColor,
|
|
31
31
|
onPress,
|
|
@@ -37,17 +37,13 @@ const RadioButton: React.FC<RadioButtonProps> = ({
|
|
|
37
37
|
}) => {
|
|
38
38
|
const { value: contextValue, onValueChange } = useRadioButtonGroupContext();
|
|
39
39
|
|
|
40
|
-
const realValue =
|
|
41
|
-
const realContextValue =
|
|
42
|
-
const isSelected =
|
|
43
|
-
selected ??
|
|
44
|
-
(realContextValue && realValue && realContextValue === realValue);
|
|
40
|
+
const realValue = getValueForRadioButton(value);
|
|
41
|
+
const realContextValue = getValueForRadioButton(contextValue);
|
|
42
|
+
const isSelected = selected ?? realContextValue === realValue;
|
|
45
43
|
|
|
46
44
|
const handlePress = () => {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
onValueChange?.(realValue);
|
|
50
|
-
}
|
|
45
|
+
onPress?.(realValue);
|
|
46
|
+
onValueChange?.(realValue);
|
|
51
47
|
};
|
|
52
48
|
|
|
53
49
|
return (
|
|
@@ -1,28 +1,22 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { View } from "react-native";
|
|
3
|
-
import {
|
|
3
|
+
import { getValueForRadioButton } from "../../utilities";
|
|
4
4
|
import { radioButtonGroupContext, Direction } from "./context";
|
|
5
5
|
const { Provider } = radioButtonGroupContext;
|
|
6
|
-
const RadioButtonGroup = ({ direction = Direction.Vertical, value, onValueChange, defaultValue, style, children, ...rest }) => {
|
|
7
|
-
const [internalValue, setInternalValue] = React.useState();
|
|
6
|
+
const RadioButtonGroup = ({ direction = Direction.Vertical, value = "", onValueChange, defaultValue = "", style, children, ...rest }) => {
|
|
7
|
+
const [internalValue, setInternalValue] = React.useState("");
|
|
8
8
|
React.useEffect(() => {
|
|
9
|
-
const realValue =
|
|
10
|
-
|
|
11
|
-
setInternalValue(realValue);
|
|
12
|
-
}
|
|
9
|
+
const realValue = getValueForRadioButton(value);
|
|
10
|
+
setInternalValue(realValue);
|
|
13
11
|
}, [value]);
|
|
14
12
|
React.useEffect(() => {
|
|
15
|
-
const realDefaultValue =
|
|
16
|
-
|
|
17
|
-
setInternalValue(realDefaultValue);
|
|
18
|
-
}
|
|
13
|
+
const realDefaultValue = getValueForRadioButton(defaultValue);
|
|
14
|
+
setInternalValue(realDefaultValue);
|
|
19
15
|
}, [defaultValue]);
|
|
20
16
|
const handleValueChange = (newValue) => {
|
|
21
|
-
const realNewValue =
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
onValueChange?.(newValue);
|
|
25
|
-
}
|
|
17
|
+
const realNewValue = getValueForRadioButton(newValue);
|
|
18
|
+
setInternalValue(realNewValue);
|
|
19
|
+
onValueChange?.(realNewValue);
|
|
26
20
|
};
|
|
27
21
|
const _containerStyle = [
|
|
28
22
|
{
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { View, StyleProp, ViewStyle } from "react-native";
|
|
3
3
|
import type { Theme } from "../../styles/DefaultTheme";
|
|
4
|
-
import {
|
|
4
|
+
import { getValueForRadioButton } from "../../utilities";
|
|
5
5
|
import { radioButtonGroupContext, Direction } from "./context";
|
|
6
6
|
export interface RadioButtonGroupProps {
|
|
7
7
|
direction?: Direction;
|
|
8
8
|
style?: StyleProp<ViewStyle>;
|
|
9
|
-
value
|
|
9
|
+
value: string;
|
|
10
10
|
onValueChange?: (value: string) => void;
|
|
11
11
|
defaultValue?: string | number;
|
|
12
12
|
theme: Theme;
|
|
@@ -17,40 +17,32 @@ const { Provider } = radioButtonGroupContext;
|
|
|
17
17
|
|
|
18
18
|
const RadioButtonGroup: React.FC<RadioButtonGroupProps> = ({
|
|
19
19
|
direction = Direction.Vertical,
|
|
20
|
-
value,
|
|
20
|
+
value = "",
|
|
21
21
|
onValueChange,
|
|
22
|
-
defaultValue,
|
|
22
|
+
defaultValue = "",
|
|
23
23
|
style,
|
|
24
24
|
children,
|
|
25
25
|
...rest
|
|
26
26
|
}) => {
|
|
27
|
-
const [internalValue, setInternalValue] = React.useState<
|
|
28
|
-
string | undefined
|
|
29
|
-
>();
|
|
27
|
+
const [internalValue, setInternalValue] = React.useState<string>("");
|
|
30
28
|
|
|
31
29
|
React.useEffect(() => {
|
|
32
|
-
const realValue =
|
|
30
|
+
const realValue = getValueForRadioButton(value);
|
|
33
31
|
|
|
34
|
-
|
|
35
|
-
setInternalValue(realValue);
|
|
36
|
-
}
|
|
32
|
+
setInternalValue(realValue);
|
|
37
33
|
}, [value]);
|
|
38
34
|
|
|
39
35
|
React.useEffect(() => {
|
|
40
|
-
const realDefaultValue =
|
|
36
|
+
const realDefaultValue = getValueForRadioButton(defaultValue);
|
|
41
37
|
|
|
42
|
-
|
|
43
|
-
setInternalValue(realDefaultValue);
|
|
44
|
-
}
|
|
38
|
+
setInternalValue(realDefaultValue);
|
|
45
39
|
}, [defaultValue]);
|
|
46
40
|
|
|
47
|
-
const handleValueChange = (newValue:
|
|
48
|
-
const realNewValue =
|
|
41
|
+
const handleValueChange = (newValue: string | number) => {
|
|
42
|
+
const realNewValue = getValueForRadioButton(newValue);
|
|
49
43
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
onValueChange?.(newValue);
|
|
53
|
-
}
|
|
44
|
+
setInternalValue(realNewValue);
|
|
45
|
+
onValueChange?.(realNewValue);
|
|
54
46
|
};
|
|
55
47
|
|
|
56
48
|
const _containerStyle: StyleProp<ViewStyle> = [
|
|
@@ -5,7 +5,7 @@ import Text from "../Text";
|
|
|
5
5
|
import { useRadioButtonGroupContext } from "./context";
|
|
6
6
|
import { Direction as GroupDirection } from "./context";
|
|
7
7
|
import Touchable from "../Touchable";
|
|
8
|
-
import { extractStyles,
|
|
8
|
+
import { extractStyles, getValueForRadioButton } from "../../utilities";
|
|
9
9
|
export var Direction;
|
|
10
10
|
(function (Direction) {
|
|
11
11
|
Direction["Row"] = "row";
|
|
@@ -22,25 +22,22 @@ const getRadioButtonAlignment = (parentDirection, direction) => {
|
|
|
22
22
|
return "flex-end";
|
|
23
23
|
}
|
|
24
24
|
};
|
|
25
|
-
const renderLabel = (
|
|
26
|
-
if (typeof
|
|
27
|
-
return React.createElement(Text, { style: [labelStyle, textStyle] },
|
|
25
|
+
const renderLabel = (value, labelStyle, textStyle) => {
|
|
26
|
+
if (typeof value === "string") {
|
|
27
|
+
return React.createElement(Text, { style: [labelStyle, textStyle] }, value);
|
|
28
28
|
}
|
|
29
29
|
else {
|
|
30
|
-
return React.createElement(React.Fragment, null,
|
|
30
|
+
return React.createElement(React.Fragment, null, value);
|
|
31
31
|
}
|
|
32
32
|
};
|
|
33
|
-
const RadioButtonRow = ({ Icon, label, value, color, unselectedColor, onPress, labelContainerStyle, labelStyle, radioButtonStyle, direction = Direction.Row, selected, disabled, style, ...rest }) => {
|
|
33
|
+
const RadioButtonRow = ({ Icon, label, value = "", color, unselectedColor, onPress, labelContainerStyle, labelStyle, radioButtonStyle, direction = Direction.Row, selected, disabled, style, ...rest }) => {
|
|
34
34
|
const { value: contextValue, onValueChange, direction: parentDirection, } = useRadioButtonGroupContext();
|
|
35
|
-
const realValue =
|
|
36
|
-
const realContextValue =
|
|
37
|
-
const isSelected = selected ??
|
|
38
|
-
(realContextValue && realValue && realContextValue === realValue);
|
|
35
|
+
const realValue = getValueForRadioButton(value);
|
|
36
|
+
const realContextValue = getValueForRadioButton(contextValue);
|
|
37
|
+
const isSelected = selected ?? realContextValue === realValue;
|
|
39
38
|
const handlePress = () => {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
onValueChange?.(realValue);
|
|
43
|
-
}
|
|
39
|
+
onPress?.(realValue);
|
|
40
|
+
onValueChange?.(realValue);
|
|
44
41
|
};
|
|
45
42
|
const { textStyles, viewStyles } = extractStyles(style);
|
|
46
43
|
return (React.createElement(Touchable, { onPress: handlePress, style: [styles.mainParent, { flexDirection: direction }, viewStyles], disabled: disabled, ...rest },
|
|
@@ -55,7 +52,7 @@ const RadioButtonRow = ({ Icon, label, value, color, unselectedColor, onPress, l
|
|
|
55
52
|
flex: 1,
|
|
56
53
|
alignItems: getRadioButtonAlignment(parentDirection, direction),
|
|
57
54
|
} },
|
|
58
|
-
React.createElement(RadioButton, { Icon: Icon, selected: isSelected
|
|
55
|
+
React.createElement(RadioButton, { Icon: Icon, selected: isSelected, value: realValue, color: color, unselectedColor: unselectedColor, style: radioButtonStyle }))));
|
|
59
56
|
};
|
|
60
57
|
const styles = StyleSheet.create({
|
|
61
58
|
mainParent: {
|
|
@@ -13,7 +13,7 @@ import { useRadioButtonGroupContext } from "./context";
|
|
|
13
13
|
import type { IconSlot } from "../../interfaces/Icon";
|
|
14
14
|
import { Direction as GroupDirection } from "./context";
|
|
15
15
|
import Touchable from "../Touchable";
|
|
16
|
-
import { extractStyles,
|
|
16
|
+
import { extractStyles, getValueForRadioButton } from "../../utilities";
|
|
17
17
|
|
|
18
18
|
export enum Direction {
|
|
19
19
|
Row = "row",
|
|
@@ -22,7 +22,7 @@ export enum Direction {
|
|
|
22
22
|
|
|
23
23
|
export interface RadioButtonRowProps extends Omit<RadioButtonProps, "onPress"> {
|
|
24
24
|
label: string | React.ReactNode;
|
|
25
|
-
value: string; // A string (or number that will be parsed String(number)) that this radio button row represents when selected
|
|
25
|
+
value: string | number; // A string (or number that will be parsed String(number)) that this radio button row represents when selected
|
|
26
26
|
color?: string;
|
|
27
27
|
unselectedColor?: string;
|
|
28
28
|
labelContainerStyle: StyleProp<ViewStyle>;
|
|
@@ -46,21 +46,21 @@ const getRadioButtonAlignment = (
|
|
|
46
46
|
};
|
|
47
47
|
|
|
48
48
|
const renderLabel = (
|
|
49
|
-
|
|
49
|
+
value: string | React.ReactNode,
|
|
50
50
|
labelStyle: StyleProp<TextStyle>,
|
|
51
51
|
textStyle: StyleProp<TextStyle>
|
|
52
52
|
) => {
|
|
53
|
-
if (typeof
|
|
54
|
-
return <Text style={[labelStyle, textStyle]}>{
|
|
53
|
+
if (typeof value === "string") {
|
|
54
|
+
return <Text style={[labelStyle, textStyle]}>{value}</Text>;
|
|
55
55
|
} else {
|
|
56
|
-
return <>{
|
|
56
|
+
return <>{value}</>;
|
|
57
57
|
}
|
|
58
58
|
};
|
|
59
59
|
|
|
60
60
|
const RadioButtonRow: React.FC<RadioButtonRowProps & IconSlot> = ({
|
|
61
61
|
Icon,
|
|
62
62
|
label,
|
|
63
|
-
value,
|
|
63
|
+
value = "",
|
|
64
64
|
color,
|
|
65
65
|
unselectedColor,
|
|
66
66
|
onPress,
|
|
@@ -79,17 +79,13 @@ const RadioButtonRow: React.FC<RadioButtonRowProps & IconSlot> = ({
|
|
|
79
79
|
direction: parentDirection,
|
|
80
80
|
} = useRadioButtonGroupContext();
|
|
81
81
|
|
|
82
|
-
const realValue =
|
|
83
|
-
const realContextValue =
|
|
84
|
-
const isSelected =
|
|
85
|
-
selected ??
|
|
86
|
-
(realContextValue && realValue && realContextValue === realValue);
|
|
82
|
+
const realValue = getValueForRadioButton(value);
|
|
83
|
+
const realContextValue = getValueForRadioButton(contextValue);
|
|
84
|
+
const isSelected = selected ?? realContextValue === realValue;
|
|
87
85
|
|
|
88
86
|
const handlePress = () => {
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
onValueChange?.(realValue);
|
|
92
|
-
}
|
|
87
|
+
onPress?.(realValue);
|
|
88
|
+
onValueChange?.(realValue);
|
|
93
89
|
};
|
|
94
90
|
|
|
95
91
|
const { textStyles, viewStyles } = extractStyles(style);
|
|
@@ -120,7 +116,7 @@ const RadioButtonRow: React.FC<RadioButtonRowProps & IconSlot> = ({
|
|
|
120
116
|
>
|
|
121
117
|
<RadioButton
|
|
122
118
|
Icon={Icon}
|
|
123
|
-
selected={isSelected
|
|
119
|
+
selected={isSelected}
|
|
124
120
|
value={realValue}
|
|
125
121
|
color={color}
|
|
126
122
|
unselectedColor={unselectedColor}
|
package/src/utilities.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { StyleSheet } from "react-native";
|
|
2
|
+
import { isString, isNumber } from "lodash";
|
|
2
3
|
export function extractStyles(style) {
|
|
3
4
|
const { color, fontFamily, fontWeight, fontSize, lineHeight, letterSpacing, textTransform, textAlign, textDecorationLine, textDecorationColor, textDecorationStyle, ...viewStyles } = StyleSheet.flatten(style || {});
|
|
4
5
|
const textStyles = {
|
|
@@ -40,15 +41,14 @@ export function applyStyles(baseStyles, stylesToApply) {
|
|
|
40
41
|
}
|
|
41
42
|
return flattenedStyles;
|
|
42
43
|
}
|
|
43
|
-
export function
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
return undefined;
|
|
44
|
+
export function getValueForRadioButton(value) {
|
|
45
|
+
if (isString(value)) {
|
|
46
|
+
return value;
|
|
47
|
+
}
|
|
48
|
+
else if (isNumber(value)) {
|
|
49
|
+
return String(value);
|
|
50
|
+
}
|
|
51
|
+
else {
|
|
52
|
+
throw new Error(`Invalid value: ${value}`);
|
|
53
53
|
}
|
|
54
54
|
}
|
package/src/utilities.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { StyleSheet, StyleProp, TextStyle } from "react-native";
|
|
2
|
+
import { isString, isNumber } from "lodash";
|
|
2
3
|
|
|
3
4
|
export function extractStyles(style: StyleProp<any>) {
|
|
4
5
|
const {
|
|
@@ -64,15 +65,12 @@ export function applyStyles(
|
|
|
64
65
|
return flattenedStyles;
|
|
65
66
|
}
|
|
66
67
|
|
|
67
|
-
export function
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
return String(value);
|
|
75
|
-
default:
|
|
76
|
-
return undefined;
|
|
68
|
+
export function getValueForRadioButton(value: string | number) {
|
|
69
|
+
if (isString(value)) {
|
|
70
|
+
return value;
|
|
71
|
+
} else if (isNumber(value)) {
|
|
72
|
+
return String(value);
|
|
73
|
+
} else {
|
|
74
|
+
throw new Error(`Invalid value: ${value}`);
|
|
77
75
|
}
|
|
78
76
|
}
|