@draftbit/core 43.4.5-958f08.1 → 43.4.5-c7a710.1
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/index.js.map +1 -1
- package/lib/commonjs/components/DatePicker/DatePickerComponent.js.map +1 -1
- package/lib/commonjs/components/Portal/PortalConsumer.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 +11 -20
- package/lib/commonjs/components/RadioButton/RadioButtonGroup.js.map +1 -1
- package/lib/commonjs/components/RadioButton/RadioButtonRow.js +6 -8
- package/lib/commonjs/components/RadioButton/RadioButtonRow.js.map +1 -1
- package/lib/commonjs/mappings/RowHeadlineImageIcon.js.map +1 -1
- package/lib/commonjs/utilities.js +10 -13
- package/lib/commonjs/utilities.js.map +1 -1
- package/lib/module/components/Picker/PickerComponent.web.js +17 -3
- package/lib/module/components/Picker/PickerComponent.web.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 +12 -21
- package/lib/module/components/RadioButton/RadioButtonGroup.js.map +1 -1
- package/lib/module/components/RadioButton/RadioButtonRow.js +7 -9
- package/lib/module/components/RadioButton/RadioButtonRow.js.map +1 -1
- package/lib/module/mappings/BlurView.js.map +1 -1
- package/lib/module/mappings/CardContainerShortImage.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 +1 -1
- 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 +8 -12
- package/src/components/RadioButton/RadioButtonGroup.js +11 -17
- package/src/components/RadioButton/RadioButtonGroup.tsx +14 -22
- package/src/components/RadioButton/RadioButtonRow.js +7 -10
- package/src/components/RadioButton/RadioButtonRow.tsx +8 -12
- package/src/utilities.js +10 -10
- package/src/utilities.ts +8 -10
|
@@ -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) {
|
|
@@ -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 {
|
|
@@ -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","label","labelStyle","textStyle","RadioButtonRow","Icon","value","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 label: string | React.ReactNode,\n labelStyle: StyleProp<TextStyle>,\n textStyle: StyleProp<TextStyle>\n) => {\n if (typeof label === \"string\") {\n return <Text style={[labelStyle, textStyle]}>{label}</Text>;\n } else {\n return <>{label}</>;\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 ? true : false}\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":["BlurView.
|
|
1
|
+
{"version":3,"sources":["BlurView.js"],"names":["COMPONENT_TYPES","FORM_TYPES","PROP_TYPES","GROUPS","SEED_DATA","name","tag","description","doc_link","code_link","category","layout","flexGrow","flexShrink","flexBasis","props","tint","label","editable","required","defaultValue","formType","flatArray","propType","STRING","options","group","basic","intensity","number","NUMBER","min","max","step","precision"],"mappings":"AAAA,SAASA,eAAT,EAA0BC,UAA1B,EAAsCC,UAAtC,EAAkDC,MAAlD,QAAiE,iBAAjE;AACA,OAAO,MAAMC,SAAS,GAAG;AACrBC,EAAAA,IAAI,EAAE,WADe;AAErBC,EAAAA,GAAG,EAAE,UAFgB;AAGrBC,EAAAA,WAAW,EAAE,gBAHQ;AAIrBC,EAAAA,QAAQ,EAAE,qDAJW;AAKrBC,EAAAA,SAAS,EAAE,kFALU;AAMrBC,EAAAA,QAAQ,EAAEV,eAAe,CAACW,MANL;AAOrBA,EAAAA,MAAM,EAAE;AACJC,IAAAA,QAAQ,EAAE,CADN;AAEJC,IAAAA,UAAU,EAAE,CAFR;AAGJC,IAAAA,SAAS,EAAE;AAHP,GAPa;AAYrBC,EAAAA,KAAK,EAAE;AACHC,IAAAA,IAAI,EAAE;AACFC,MAAAA,KAAK,EAAE,MADL;AAEFV,MAAAA,WAAW,EAAE,2BAFX;AAGFW,MAAAA,QAAQ,EAAE,IAHR;AAIFC,MAAAA,QAAQ,EAAE,IAJR;AAKFC,MAAAA,YAAY,EAAE,SALZ;AAMFC,MAAAA,QAAQ,EAAEpB,UAAU,CAACqB,SANnB;AAOFC,MAAAA,QAAQ,EAAErB,UAAU,CAACsB,MAPnB;AAQFC,MAAAA,OAAO,EAAE,CAAC,SAAD,EAAY,OAAZ,EAAqB,MAArB,CARP;AASFC,MAAAA,KAAK,EAAEvB,MAAM,CAACwB;AATZ,KADH;AAYHC,IAAAA,SAAS,EAAE;AACPX,MAAAA,KAAK,EAAE,WADA;AAEPV,MAAAA,WAAW,EAAE,uEAFN;AAGPW,MAAAA,QAAQ,EAAE,IAHH;AAIPC,MAAAA,QAAQ,EAAE,IAJH;AAKPC,MAAAA,YAAY,EAAE,EALP;AAMPC,MAAAA,QAAQ,EAAEpB,UAAU,CAAC4B,MANd;AAOPN,MAAAA,QAAQ,EAAErB,UAAU,CAAC4B,MAPd;AAQPC,MAAAA,GAAG,EAAE,CARE;AASPC,MAAAA,GAAG,EAAE,GATE;AAUPC,MAAAA,IAAI,EAAE,CAVC;AAWPC,MAAAA,SAAS,EAAE,CAXJ;AAYPR,MAAAA,KAAK,EAAEvB,MAAM,CAACwB;AAZP;AAZR;AAZc,CAAlB","sourcesContent":["import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, GROUPS, } from \"@draftbit/types\";\nexport const SEED_DATA = {\n name: \"Blur View\",\n tag: \"BlurView\",\n description: \"Expo Blur View\",\n doc_link: \"https://docs.expo.io/versions/latest/sdk/blur-view/\",\n code_link: \"https://github.com/expo/expo/blob/master/packages/expo/src/effects/BlurView.d.ts\",\n category: COMPONENT_TYPES.layout,\n layout: {\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: 0,\n },\n props: {\n tint: {\n label: \"Tint\",\n description: \"The tint of the blur view\",\n editable: true,\n required: true,\n defaultValue: \"default\",\n formType: FORM_TYPES.flatArray,\n propType: PROP_TYPES.STRING,\n options: [\"default\", \"light\", \"dark\"],\n group: GROUPS.basic,\n },\n intensity: {\n label: \"Intensity\",\n description: \"A number from 1 to 100 that controls the intensity of the blur effect\",\n editable: true,\n required: true,\n defaultValue: 50,\n formType: FORM_TYPES.number,\n propType: PROP_TYPES.NUMBER,\n min: 0,\n max: 100,\n step: 1,\n precision: 0,\n group: GROUPS.basic,\n },\n },\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["CardContainerShortImage.
|
|
1
|
+
{"version":3,"sources":["CardContainerShortImage.js"],"names":["GROUPS","COMPONENT_TYPES","FORM_TYPES","PROP_TYPES","createElevationType","SEED_DATA","name","tag","description","category","card","preview_image_url","supports_list_render","props","image","group","data","label","formType","propType","ASSET","defaultValue","editable","required","title","string","STRING","subtitle","aspectRatio","basic","elevation","mode","uncategorized","flatArray","options","layout"],"mappings":"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","sourcesContent":["import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, createElevationType, } from \"@draftbit/types\";\nexport const SEED_DATA = [\n {\n name: \"Short Card (Left)\",\n tag: \"CardContainerShortImage\",\n description: \"An elevated card with a left aligned image and a title and subtitle\",\n category: COMPONENT_TYPES.card,\n preview_image_url: \"{CLOUDINARY_URL}/Card_ContainerShortLeftImage.png\",\n supports_list_render: true,\n props: {\n image: {\n group: GROUPS.data,\n label: \"Image\",\n description: \"Image\",\n formType: FORM_TYPES.image,\n propType: PROP_TYPES.ASSET,\n defaultValue: null,\n editable: true,\n required: false,\n },\n title: {\n group: GROUPS.data,\n label: \"Title\",\n description: \"Title to display\",\n formType: FORM_TYPES.string,\n propType: PROP_TYPES.STRING,\n defaultValue: \"Beautiful West Coast Villa\",\n editable: true,\n required: false,\n },\n subtitle: {\n group: GROUPS.data,\n label: \"Subtitle\",\n description: \"Subtitle to display\",\n formType: FORM_TYPES.string,\n propType: PROP_TYPES.STRING,\n defaultValue: \"San Diego\",\n editable: true,\n required: false,\n },\n aspectRatio: {\n group: GROUPS.basic,\n label: \"Aspect ratio\",\n description: \"Aspect ratio of the image\",\n formType: FORM_TYPES.aspectRatio,\n propType: PROP_TYPES.STRING,\n defaultValue: null,\n editable: true,\n required: false,\n },\n elevation: createElevationType(2),\n mode: {\n group: GROUPS.uncategorized,\n label: \"Image Side\",\n description: \"The side on which the image is on (left or right)\",\n formType: FORM_TYPES.flatArray,\n propType: PROP_TYPES.STRING,\n defaultValue: \"left\",\n options: [\"left\", \"right\"],\n editable: false,\n required: false,\n },\n },\n layout: {},\n },\n {\n name: \"Short Card (Right)\",\n tag: \"CardContainerShortImage\",\n description: \"An elevated card with a right aligned image and a title and subtitle\",\n category: COMPONENT_TYPES.card,\n preview_image_url: \"{CLOUDINARY_URL}/Card_ContainerShortRightImage.png\",\n supports_list_render: true,\n props: {\n image: {\n group: GROUPS.data,\n label: \"Image\",\n description: \"Image\",\n formType: FORM_TYPES.image,\n propType: PROP_TYPES.ASSET,\n defaultValue: null,\n editable: true,\n required: false,\n },\n title: {\n group: GROUPS.data,\n label: \"Title\",\n description: \"Title to display\",\n formType: FORM_TYPES.string,\n propType: PROP_TYPES.STRING,\n defaultValue: \"Beautiful West Coast Villa\",\n editable: true,\n required: false,\n },\n subtitle: {\n group: GROUPS.data,\n label: \"Subtitle\",\n description: \"Subtitle to display\",\n formType: FORM_TYPES.string,\n propType: PROP_TYPES.STRING,\n defaultValue: \"San Diego\",\n editable: true,\n required: false,\n },\n elevation: createElevationType(2),\n mode: {\n label: \"Mode\",\n description: \"Mode\",\n group: GROUPS.uncategorized,\n formType: FORM_TYPES.string,\n propType: PROP_TYPES.STRING,\n defaultValue: \"right\",\n editable: false,\n required: false,\n },\n },\n layout: {},\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,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-c7a710.1+c7a710d9",
|
|
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": "c7a710d9ceb3958fdbb1d59cc5a64a43e44f0a47"
|
|
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,7 +12,7 @@ export type RadioButtonProps = {
|
|
|
12
12
|
selected?: boolean;
|
|
13
13
|
disabled?: boolean;
|
|
14
14
|
color?: string;
|
|
15
|
-
value
|
|
15
|
+
value: string | number;
|
|
16
16
|
unselectedColor?: string;
|
|
17
17
|
onPress?: (value: string) => void;
|
|
18
18
|
style?: StyleProp<ViewStyle>;
|
|
@@ -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
|
{
|
|
@@ -36,7 +30,7 @@ const RadioButtonGroup = ({ direction = Direction.Vertical, value, onValueChange
|
|
|
36
30
|
}
|
|
37
31
|
return (React.createElement(View, { style: [{ minHeight: 40 }, style], ...rest },
|
|
38
32
|
React.createElement(Provider, { value: {
|
|
39
|
-
value: internalValue
|
|
33
|
+
value: internalValue ?? "",
|
|
40
34
|
onValueChange: handleValueChange,
|
|
41
35
|
direction,
|
|
42
36
|
} },
|
|
@@ -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> = [
|
|
@@ -69,7 +61,7 @@ const RadioButtonGroup: React.FC<RadioButtonGroupProps> = ({
|
|
|
69
61
|
<View style={[{ minHeight: 40 }, style]} {...rest}>
|
|
70
62
|
<Provider
|
|
71
63
|
value={{
|
|
72
|
-
value: internalValue
|
|
64
|
+
value: internalValue ?? "",
|
|
73
65
|
onValueChange: handleValueChange,
|
|
74
66
|
direction,
|
|
75
67
|
}}
|
|
@@ -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";
|
|
@@ -30,17 +30,14 @@ const renderLabel = (label, labelStyle, textStyle) => {
|
|
|
30
30
|
return React.createElement(React.Fragment, null, label);
|
|
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 },
|
|
@@ -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>;
|
|
@@ -60,7 +60,7 @@ const renderLabel = (
|
|
|
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);
|
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
|
}
|