@draftbit/core 46.0.1-d651f1.1 → 46.0.2-a14e58.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/components/Carousel.js +1 -3
- package/lib/commonjs/components/Carousel.js.map +1 -1
- package/lib/commonjs/components/Checkbox/Checkbox.js.map +1 -1
- package/lib/commonjs/components/DatePicker/DatePickerComponent.web.js +3 -3
- package/lib/commonjs/components/DatePicker/DatePickerComponent.web.js.map +1 -1
- package/lib/commonjs/components/Picker/Picker.js +3 -3
- package/lib/commonjs/components/Picker/Picker.js.map +1 -1
- package/lib/commonjs/components/Picker/PickerComponent.android.js +2 -2
- package/lib/commonjs/components/Picker/PickerComponent.android.js.map +1 -1
- package/lib/commonjs/components/Picker/PickerComponent.ios.js +2 -2
- package/lib/commonjs/components/Picker/PickerComponent.ios.js.map +1 -1
- package/lib/commonjs/components/Picker/PickerComponent.web.js +2 -2
- package/lib/commonjs/components/Picker/PickerComponent.web.js.map +1 -1
- package/lib/commonjs/components/RadioButton/RadioButton.js +1 -1
- package/lib/commonjs/components/RadioButton/RadioButton.js.map +1 -1
- package/lib/commonjs/components/RadioButton/RadioButtonRow.js +1 -1
- package/lib/commonjs/components/RadioButton/RadioButtonRow.js.map +1 -1
- package/lib/commonjs/components/Stepper.js +1 -1
- package/lib/commonjs/components/Stepper.js.map +1 -1
- package/lib/module/components/CardContainer.js +5 -15
- package/lib/module/components/Carousel.js +1 -3
- package/lib/module/components/Carousel.js.map +1 -1
- package/lib/module/components/Checkbox/Checkbox.js.map +1 -1
- package/lib/module/components/DatePicker/DatePickerComponent.web.js +3 -3
- package/lib/module/components/DatePicker/DatePickerComponent.web.js.map +1 -1
- package/lib/module/components/Picker/Picker.js +3 -3
- package/lib/module/components/Picker/Picker.js.map +1 -1
- package/lib/module/components/Picker/PickerComponent.android.js +2 -2
- package/lib/module/components/Picker/PickerComponent.android.js.map +1 -1
- package/lib/module/components/Picker/PickerComponent.ios.js +2 -2
- package/lib/module/components/Picker/PickerComponent.ios.js.map +1 -1
- package/lib/module/components/Picker/PickerComponent.web.js +2 -2
- package/lib/module/components/Picker/PickerComponent.web.js.map +1 -1
- package/lib/module/components/RadioButton/RadioButton.js +1 -1
- package/lib/module/components/RadioButton/RadioButton.js.map +1 -1
- package/lib/module/components/RadioButton/RadioButtonRow.js +1 -1
- package/lib/module/components/RadioButton/RadioButtonRow.js.map +1 -1
- package/lib/module/components/Stepper.js +1 -1
- package/lib/module/components/Stepper.js.map +1 -1
- package/package.json +5 -5
- package/src/components/Checkbox/Checkbox.tsx +76 -77
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"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","display","select","web","cursor","userSelect"],"sources":["RadioButtonRow.tsx"],"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 display: \"flex\",\n ...Platform.select({\n web: {\n cursor: \"pointer\",\n userSelect: \"none\",\n },\n }),\n },\n label: {\n flex: 3,\n },\n});\n\nexport default RadioButtonRow;\n"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAGEC,UAHF,EAKEC,IALF,EAMEC,QANF,QAOO,cAPP;AAQA,OAAOC,WAAP,MAA8C,eAA9C;AACA,OAAOC,IAAP,MAAiB,SAAjB;AACA,SAASC,0BAAT,QAA2C,WAA3C;AAEA,SAASC,SAAS,IAAIC,cAAtB,QAA4C,WAA5C;AACA,OAAOC,SAAP,MAAsB,cAAtB;AACA,SAASC,aAAT,EAAwBC,sBAAxB,QAAsD,iBAAtD;AAEA,WAAYJ,SAAZ;;WAAYA,S;EAAAA,S;EAAAA,S;GAAAA,S,KAAAA,S;;AAiBZ,MAAMK,uBAAuB,GAAG,CAC9BC,eAD8B,EAE9BC,SAF8B,KAG3B;EACH,IAAID,eAAe,KAAKL,cAAc,CAACO,UAAvC,EAAmD;IACjD,OAAOD,SAAS,KAAKP,SAAS,CAACS,GAAxB,GAA8B,YAA9B,GAA6C,UAApD;EACD,CAFD,MAEO,IAAIF,SAAS,KAAKP,SAAS,CAACU,UAA5B,EAAwC;IAC7C,OAAO,YAAP;EACD,CAFM,MAEA;IACL,OAAO,UAAP;EACD;AACF,CAXD;;AAaA,MAAMC,WAAW,GAAG,CAClBC,KADkB,EAElBC,UAFkB,EAGlBC,SAHkB,KAIf;EACH,IAAI,OAAOF,KAAP,KAAiB,QAArB,EAA+B;IAC7B,oBAAO,oBAAC,IAAD;MAAM,KAAK,EAAE,CAACC,UAAD,EAAaC,SAAb;IAAb,GAAuCF,KAAvC,CAAP;EACD,CAFD,MAEO;IACL,oBAAO,0CAAGA,KAAH,CAAP;EACD;AACF,CAVD;;AAYA,MAAMG,cAAwD,GAAG,QAe3D;EAAA,IAf4D;IAChEC,IADgE;IAEhEC,KAFgE;IAGhEL,KAAK,GAAG,EAHwD;IAIhEM,KAJgE;IAKhEC,eALgE;IAMhEC,OANgE;IAOhEC,mBAPgE;IAQhER,UARgE;IAShES,gBATgE;IAUhEf,SAAS,GAAGP,SAAS,CAACS,GAV0C;IAWhEc,QAXgE;IAYhEC,QAZgE;IAahEC,KAbgE;IAchE,GAAGC;EAd6D,CAe5D;EACJ,MAAM;IACJd,KAAK,EAAEe,YADH;IAEJC,aAFI;IAGJrB,SAAS,EAAED;EAHP,IAIFP,0BAA0B,EAJ9B;EAMA,MAAM8B,SAAS,GAAGzB,sBAAsB,CAACQ,KAAD,CAAxC;EACA,MAAMkB,gBAAgB,GAAG1B,sBAAsB,CAACuB,YAAD,CAA/C;EACA,MAAMI,UAAU,GAAGR,
|
|
1
|
+
{"version":3,"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","display","select","web","cursor","userSelect"],"sources":["RadioButtonRow.tsx"],"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 display: \"flex\",\n ...Platform.select({\n web: {\n cursor: \"pointer\",\n userSelect: \"none\",\n },\n }),\n },\n label: {\n flex: 3,\n },\n});\n\nexport default RadioButtonRow;\n"],"mappings":"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"}
|
|
@@ -21,7 +21,7 @@ const Stepper = _ref => {
|
|
|
21
21
|
},
|
|
22
22
|
Icon
|
|
23
23
|
} = _ref;
|
|
24
|
-
const [value, setValue] = useState(defaultValue
|
|
24
|
+
const [value, setValue] = useState(defaultValue ?? 0);
|
|
25
25
|
|
|
26
26
|
const isValidValue = valueArg => valueArg >= min && valueArg <= max;
|
|
27
27
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useEffect","useState","View","Text","isNumber","withTheme","IconButton","Stepper","min","Infinity","max","value","valueProp","defaultValue","style","typeStyle","iconSize","iconColor","onChange","theme","colors","typography","Icon","setValue","isValidValue","valueArg","handlePlusOrMinus","type","newValue","flexDirection","opacity","body1","textAlign","alignSelf","color","medium","marginHorizontal"],"sources":["Stepper.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from \"react\";\nimport { View, Text, StyleProp, ViewStyle, TextStyle } from \"react-native\";\nimport { isNumber } from \"lodash\";\n\nimport { withTheme } from \"../theming\";\nimport type { Theme } from \"../styles/DefaultTheme\";\nimport type { IconSlot } from \"../interfaces/Icon\";\nimport IconButton from \"./IconButton\";\n\ntype Props = {\n min: number;\n max: number;\n value?: number;\n defaultValue?: number;\n style?: StyleProp<ViewStyle>;\n typeStyle?: StyleProp<TextStyle>;\n iconSize: number;\n iconColor?: string;\n onChange?: (value: number) => void;\n theme: Theme;\n} & IconSlot;\n\nconst Stepper: FC<Props> = ({\n min = -Infinity,\n max = Infinity,\n value: valueProp,\n defaultValue,\n style,\n typeStyle,\n iconSize = 24,\n iconColor,\n onChange,\n theme: { colors, typography },\n Icon,\n}) => {\n const [value, setValue] = useState(defaultValue ?? 0);\n\n const isValidValue = (valueArg: number) => valueArg >= min && valueArg <= max;\n\n const handlePlusOrMinus = (type: \"plus\" | \"minus\") => {\n const newValue = type === \"plus\" ? value + 1 : value - 1;\n\n if (isValidValue(newValue)) {\n setValue(newValue);\n onChange?.(newValue);\n }\n };\n\n useEffect(() => {\n if (\n valueProp != null &&\n isNumber(valueProp) &&\n valueProp !== value &&\n isValidValue(valueProp)\n ) {\n setValue(valueProp);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [valueProp]);\n\n return (\n <View style={[{ flexDirection: \"row\" }, style]}>\n <IconButton\n Icon={Icon}\n icon=\"MaterialIcons/remove\"\n onPress={() => handlePlusOrMinus(\"minus\")}\n size={iconSize}\n color={iconColor}\n disabled={value === min}\n style={{ opacity: value === min ? 0.5 : 1 }}\n />\n\n <Text\n style={[\n typography.body1,\n {\n textAlign: \"center\",\n alignSelf: \"center\",\n color: colors.medium,\n marginHorizontal: 8,\n },\n typeStyle,\n ]}\n >\n {value}\n </Text>\n\n <IconButton\n Icon={Icon}\n icon=\"MaterialIcons/add\"\n onPress={() => handlePlusOrMinus(\"plus\")}\n size={iconSize}\n color={iconColor}\n disabled={value === max}\n style={{ opacity: value === max ? 0.5 : 1 }}\n />\n </View>\n );\n};\n\nexport default withTheme(Stepper);\n"],"mappings":"AAAA,OAAOA,KAAP,IAAoBC,SAApB,EAA+BC,QAA/B,QAA+C,OAA/C;AACA,SAASC,IAAT,EAAeC,IAAf,QAA4D,cAA5D;AACA,SAASC,QAAT,QAAyB,QAAzB;AAEA,SAASC,SAAT,QAA0B,YAA1B;AAGA,OAAOC,UAAP,MAAuB,cAAvB;;AAeA,MAAMC,OAAkB,GAAG,QAYrB;EAAA,IAZsB;IAC1BC,GAAG,GAAG,CAACC,QADmB;IAE1BC,GAAG,GAAGD,QAFoB;IAG1BE,KAAK,EAAEC,SAHmB;IAI1BC,YAJ0B;IAK1BC,KAL0B;IAM1BC,SAN0B;IAO1BC,QAAQ,GAAG,EAPe;IAQ1BC,SAR0B;IAS1BC,QAT0B;IAU1BC,KAAK,EAAE;MAAEC,MAAF;MAAUC;IAAV,CAVmB;IAW1BC;EAX0B,CAYtB;EACJ,MAAM,CAACX,KAAD,EAAQY,QAAR,IAAoBtB,QAAQ,CAACY,
|
|
1
|
+
{"version":3,"names":["React","useEffect","useState","View","Text","isNumber","withTheme","IconButton","Stepper","min","Infinity","max","value","valueProp","defaultValue","style","typeStyle","iconSize","iconColor","onChange","theme","colors","typography","Icon","setValue","isValidValue","valueArg","handlePlusOrMinus","type","newValue","flexDirection","opacity","body1","textAlign","alignSelf","color","medium","marginHorizontal"],"sources":["Stepper.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from \"react\";\nimport { View, Text, StyleProp, ViewStyle, TextStyle } from \"react-native\";\nimport { isNumber } from \"lodash\";\n\nimport { withTheme } from \"../theming\";\nimport type { Theme } from \"../styles/DefaultTheme\";\nimport type { IconSlot } from \"../interfaces/Icon\";\nimport IconButton from \"./IconButton\";\n\ntype Props = {\n min: number;\n max: number;\n value?: number;\n defaultValue?: number;\n style?: StyleProp<ViewStyle>;\n typeStyle?: StyleProp<TextStyle>;\n iconSize: number;\n iconColor?: string;\n onChange?: (value: number) => void;\n theme: Theme;\n} & IconSlot;\n\nconst Stepper: FC<Props> = ({\n min = -Infinity,\n max = Infinity,\n value: valueProp,\n defaultValue,\n style,\n typeStyle,\n iconSize = 24,\n iconColor,\n onChange,\n theme: { colors, typography },\n Icon,\n}) => {\n const [value, setValue] = useState(defaultValue ?? 0);\n\n const isValidValue = (valueArg: number) => valueArg >= min && valueArg <= max;\n\n const handlePlusOrMinus = (type: \"plus\" | \"minus\") => {\n const newValue = type === \"plus\" ? value + 1 : value - 1;\n\n if (isValidValue(newValue)) {\n setValue(newValue);\n onChange?.(newValue);\n }\n };\n\n useEffect(() => {\n if (\n valueProp != null &&\n isNumber(valueProp) &&\n valueProp !== value &&\n isValidValue(valueProp)\n ) {\n setValue(valueProp);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [valueProp]);\n\n return (\n <View style={[{ flexDirection: \"row\" }, style]}>\n <IconButton\n Icon={Icon}\n icon=\"MaterialIcons/remove\"\n onPress={() => handlePlusOrMinus(\"minus\")}\n size={iconSize}\n color={iconColor}\n disabled={value === min}\n style={{ opacity: value === min ? 0.5 : 1 }}\n />\n\n <Text\n style={[\n typography.body1,\n {\n textAlign: \"center\",\n alignSelf: \"center\",\n color: colors.medium,\n marginHorizontal: 8,\n },\n typeStyle,\n ]}\n >\n {value}\n </Text>\n\n <IconButton\n Icon={Icon}\n icon=\"MaterialIcons/add\"\n onPress={() => handlePlusOrMinus(\"plus\")}\n size={iconSize}\n color={iconColor}\n disabled={value === max}\n style={{ opacity: value === max ? 0.5 : 1 }}\n />\n </View>\n );\n};\n\nexport default withTheme(Stepper);\n"],"mappings":"AAAA,OAAOA,KAAP,IAAoBC,SAApB,EAA+BC,QAA/B,QAA+C,OAA/C;AACA,SAASC,IAAT,EAAeC,IAAf,QAA4D,cAA5D;AACA,SAASC,QAAT,QAAyB,QAAzB;AAEA,SAASC,SAAT,QAA0B,YAA1B;AAGA,OAAOC,UAAP,MAAuB,cAAvB;;AAeA,MAAMC,OAAkB,GAAG,QAYrB;EAAA,IAZsB;IAC1BC,GAAG,GAAG,CAACC,QADmB;IAE1BC,GAAG,GAAGD,QAFoB;IAG1BE,KAAK,EAAEC,SAHmB;IAI1BC,YAJ0B;IAK1BC,KAL0B;IAM1BC,SAN0B;IAO1BC,QAAQ,GAAG,EAPe;IAQ1BC,SAR0B;IAS1BC,QAT0B;IAU1BC,KAAK,EAAE;MAAEC,MAAF;MAAUC;IAAV,CAVmB;IAW1BC;EAX0B,CAYtB;EACJ,MAAM,CAACX,KAAD,EAAQY,QAAR,IAAoBtB,QAAQ,CAACY,YAAY,IAAI,CAAjB,CAAlC;;EAEA,MAAMW,YAAY,GAAIC,QAAD,IAAsBA,QAAQ,IAAIjB,GAAZ,IAAmBiB,QAAQ,IAAIf,GAA1E;;EAEA,MAAMgB,iBAAiB,GAAIC,IAAD,IAA4B;IACpD,MAAMC,QAAQ,GAAGD,IAAI,KAAK,MAAT,GAAkBhB,KAAK,GAAG,CAA1B,GAA8BA,KAAK,GAAG,CAAvD;;IAEA,IAAIa,YAAY,CAACI,QAAD,CAAhB,EAA4B;MAC1BL,QAAQ,CAACK,QAAD,CAAR;MACAV,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGU,QAAH,CAAR;IACD;EACF,CAPD;;EASA5B,SAAS,CAAC,MAAM;IACd,IACEY,SAAS,IAAI,IAAb,IACAR,QAAQ,CAACQ,SAAD,CADR,IAEAA,SAAS,KAAKD,KAFd,IAGAa,YAAY,CAACZ,SAAD,CAJd,EAKE;MACAW,QAAQ,CAACX,SAAD,CAAR;IACD,CARa,CASd;;EACD,CAVQ,EAUN,CAACA,SAAD,CAVM,CAAT;EAYA,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAE,CAAC;MAAEiB,aAAa,EAAE;IAAjB,CAAD,EAA2Bf,KAA3B;EAAb,gBACE,oBAAC,UAAD;IACE,IAAI,EAAEQ,IADR;IAEE,IAAI,EAAC,sBAFP;IAGE,OAAO,EAAE,MAAMI,iBAAiB,CAAC,OAAD,CAHlC;IAIE,IAAI,EAAEV,QAJR;IAKE,KAAK,EAAEC,SALT;IAME,QAAQ,EAAEN,KAAK,KAAKH,GANtB;IAOE,KAAK,EAAE;MAAEsB,OAAO,EAAEnB,KAAK,KAAKH,GAAV,GAAgB,GAAhB,GAAsB;IAAjC;EAPT,EADF,eAWE,oBAAC,IAAD;IACE,KAAK,EAAE,CACLa,UAAU,CAACU,KADN,EAEL;MACEC,SAAS,EAAE,QADb;MAEEC,SAAS,EAAE,QAFb;MAGEC,KAAK,EAAEd,MAAM,CAACe,MAHhB;MAIEC,gBAAgB,EAAE;IAJpB,CAFK,EAQLrB,SARK;EADT,GAYGJ,KAZH,CAXF,eA0BE,oBAAC,UAAD;IACE,IAAI,EAAEW,IADR;IAEE,IAAI,EAAC,mBAFP;IAGE,OAAO,EAAE,MAAMI,iBAAiB,CAAC,MAAD,CAHlC;IAIE,IAAI,EAAEV,QAJR;IAKE,KAAK,EAAEC,SALT;IAME,QAAQ,EAAEN,KAAK,KAAKD,GANtB;IAOE,KAAK,EAAE;MAAEoB,OAAO,EAAEnB,KAAK,KAAKD,GAAV,GAAgB,GAAhB,GAAsB;IAAjC;EAPT,EA1BF,CADF;AAsCD,CA5ED;;AA8EA,eAAeL,SAAS,CAACE,OAAD,CAAxB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@draftbit/core",
|
|
3
|
-
"version": "46.0.
|
|
3
|
+
"version": "46.0.2-a14e58.0+a14e5867",
|
|
4
4
|
"description": "Core (non-native) Components",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"module": "lib/module/index.js",
|
|
@@ -44,15 +44,15 @@
|
|
|
44
44
|
"@draftbit/types": "^46.0.0",
|
|
45
45
|
"@material-ui/core": "^4.11.0",
|
|
46
46
|
"@material-ui/pickers": "^3.2.10",
|
|
47
|
-
"@react-native-community/slider": "4.
|
|
48
|
-
"@react-native-picker/picker": "2.4.
|
|
47
|
+
"@react-native-community/slider": "4.2.3",
|
|
48
|
+
"@react-native-picker/picker": "2.4.2",
|
|
49
49
|
"color": "^3.1.2",
|
|
50
50
|
"date-fns": "^2.16.1",
|
|
51
51
|
"dateformat": "^3.0.3",
|
|
52
52
|
"lodash.isnumber": "^3.0.3",
|
|
53
53
|
"lodash.omit": "^4.5.0",
|
|
54
54
|
"lodash.tonumber": "^4.0.3",
|
|
55
|
-
"react-native-modal-datetime-picker": "^13.
|
|
55
|
+
"react-native-modal-datetime-picker": "^13.1.2",
|
|
56
56
|
"react-native-typography": "^1.4.1",
|
|
57
57
|
"react-native-web-swiper": "^2.2.3"
|
|
58
58
|
},
|
|
@@ -78,5 +78,5 @@
|
|
|
78
78
|
]
|
|
79
79
|
]
|
|
80
80
|
},
|
|
81
|
-
"gitHead": "
|
|
81
|
+
"gitHead": "a14e58675349e6ff3400e392b218a70834d612ac"
|
|
82
82
|
}
|
|
@@ -27,94 +27,93 @@ export interface CheckboxProps {
|
|
|
27
27
|
style?: StyleProp<ViewStyle>;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
const Checkbox: React.FC<
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
30
|
+
const Checkbox: React.FC<
|
|
31
|
+
CheckboxProps & TouchableHighlightProps & IconSlot
|
|
32
|
+
> = ({
|
|
33
|
+
Icon,
|
|
34
|
+
status,
|
|
35
|
+
disabled = false,
|
|
36
|
+
onPress,
|
|
37
|
+
onCheck,
|
|
38
|
+
onUncheck,
|
|
39
|
+
color,
|
|
40
|
+
uncheckedColor,
|
|
41
|
+
defaultValue,
|
|
42
|
+
checkedIcon = "MaterialCommunityIcons/checkbox-marked",
|
|
43
|
+
uncheckedIcon = "MaterialCommunityIcons/checkbox-blank-outline",
|
|
44
|
+
size = 24,
|
|
45
|
+
style,
|
|
46
|
+
...rest
|
|
47
|
+
}) => {
|
|
48
|
+
const [internalValue, setInternalValue] = React.useState<boolean>(
|
|
49
|
+
status || defaultValue || false
|
|
50
|
+
);
|
|
50
51
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
52
|
+
React.useEffect(() => {
|
|
53
|
+
if (status != null) {
|
|
54
|
+
setInternalValue(status);
|
|
55
|
+
}
|
|
56
|
+
}, [status]);
|
|
56
57
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
| boolean
|
|
61
|
-
| undefined;
|
|
58
|
+
// This special logic is to handle weird APIs like Airtable that return
|
|
59
|
+
// true or undefined for a boolean
|
|
60
|
+
const previousDefaultValue = usePrevious(defaultValue) as boolean | undefined;
|
|
62
61
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
62
|
+
React.useEffect(() => {
|
|
63
|
+
if (defaultValue !== previousDefaultValue) {
|
|
64
|
+
setInternalValue(Boolean(defaultValue));
|
|
65
|
+
}
|
|
66
|
+
}, [defaultValue, previousDefaultValue]);
|
|
68
67
|
|
|
69
|
-
|
|
68
|
+
const { colors } = useTheme();
|
|
70
69
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
70
|
+
const checkboxColor = internalValue
|
|
71
|
+
? color || colors.primary
|
|
72
|
+
: uncheckedColor || colors.primary;
|
|
74
73
|
|
|
75
|
-
|
|
76
|
-
|
|
74
|
+
const handlePress = () => {
|
|
75
|
+
const newValue = !internalValue;
|
|
77
76
|
|
|
78
|
-
|
|
79
|
-
|
|
77
|
+
setInternalValue(newValue);
|
|
78
|
+
onPress?.(newValue);
|
|
80
79
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
80
|
+
if (newValue) {
|
|
81
|
+
onCheck?.();
|
|
82
|
+
}
|
|
84
83
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
84
|
+
if (!newValue) {
|
|
85
|
+
onUncheck?.();
|
|
86
|
+
}
|
|
87
|
+
};
|
|
89
88
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
89
|
+
return (
|
|
90
|
+
<Touchable
|
|
91
|
+
{...rest}
|
|
92
|
+
onPress={handlePress}
|
|
93
|
+
disabled={disabled}
|
|
94
|
+
accessibilityState={{ disabled }}
|
|
95
|
+
accessibilityRole="button"
|
|
96
|
+
accessibilityLiveRegion="polite"
|
|
97
|
+
style={[styles.container, style, { width: size, height: size }]}
|
|
98
|
+
>
|
|
99
|
+
<Icon
|
|
100
|
+
style={styles.icon}
|
|
101
|
+
name={internalValue ? checkedIcon : uncheckedIcon}
|
|
102
|
+
size={size}
|
|
103
|
+
color={checkboxColor}
|
|
104
|
+
/>
|
|
105
|
+
<View style={[StyleSheet.absoluteFill, styles.fillContainer]}>
|
|
106
|
+
<View
|
|
107
|
+
style={[
|
|
108
|
+
styles.fill,
|
|
109
|
+
{ opacity: disabled ? 0.5 : 1 },
|
|
110
|
+
{ borderColor: checkboxColor },
|
|
111
|
+
]}
|
|
105
112
|
/>
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
{ opacity: disabled ? 0.5 : 1 },
|
|
111
|
-
{ borderColor: checkboxColor },
|
|
112
|
-
]}
|
|
113
|
-
/>
|
|
114
|
-
</View>
|
|
115
|
-
</Touchable>
|
|
116
|
-
);
|
|
117
|
-
};
|
|
113
|
+
</View>
|
|
114
|
+
</Touchable>
|
|
115
|
+
);
|
|
116
|
+
};
|
|
118
117
|
|
|
119
118
|
const styles = StyleSheet.create({
|
|
120
119
|
container: {
|