@draftbit/core 46.0.1-696ea7.1 → 46.0.1-891ac6.2

package/lib/module/components/Stepper.js

@@ -21,7 +21,7 @@ const Stepper = _ref => {
     },
     Icon
   } = _ref;
-  const [value, setValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : 0);
+  const [value, setValue] = useState(defaultValue ?? 0);
 
   const isValidValue = valueArg => valueArg >= min && valueArg <= max;
 

package/lib/module/components/Stepper.js.map

@@ -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,YAAD,aAACA,YAAD,cAACA,YAAD,GAAiB,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"}
+{"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

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "46.0.1-696ea7.1+696ea7b4",
+  "version": "46.0.1-891ac6.2+891ac602",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -44,8 +44,8 @@
     "@draftbit/types": "^46.0.0",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
-    "@react-native-community/slider": "4.1.12",
-    "@react-native-picker/picker": "2.4.1",
+    "@react-native-community/slider": "4.2.3",
+    "@react-native-picker/picker": "2.4.2",
     "color": "^3.1.2",
     "date-fns": "^2.16.1",
     "dateformat": "^3.0.3",
@@ -78,5 +78,5 @@
       ]
     ]
   },
-  "gitHead": "696ea7b40bc30c3682e534d91dbdd5808dae00eb"
+  "gitHead": "891ac602891a7ac610c5f97c5fd45b3e65f361e5"
 }

package/src/components/Checkbox/Checkbox.tsx

@@ -27,94 +27,93 @@ export interface CheckboxProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const Checkbox: React.FC<CheckboxProps & TouchableHighlightProps & IconSlot> =
-  ({
-    Icon,
-    status,
-    disabled = false,
-    onPress,
-    onCheck,
-    onUncheck,
-    color,
-    uncheckedColor,
-    defaultValue,
-    checkedIcon = "MaterialCommunityIcons/checkbox-marked",
-    uncheckedIcon = "MaterialCommunityIcons/checkbox-blank-outline",
-    size = 24,
-    style,
-    ...rest
-  }) => {
-    const [internalValue, setInternalValue] = React.useState<boolean>(
-      status || defaultValue || false
-    );
+const Checkbox: React.FC<
+  CheckboxProps & TouchableHighlightProps & IconSlot
+> = ({
+  Icon,
+  status,
+  disabled = false,
+  onPress,
+  onCheck,
+  onUncheck,
+  color,
+  uncheckedColor,
+  defaultValue,
+  checkedIcon = "MaterialCommunityIcons/checkbox-marked",
+  uncheckedIcon = "MaterialCommunityIcons/checkbox-blank-outline",
+  size = 24,
+  style,
+  ...rest
+}) => {
+  const [internalValue, setInternalValue] = React.useState<boolean>(
+    status || defaultValue || false
+  );
 
-    React.useEffect(() => {
-      if (status != null) {
-        setInternalValue(status);
-      }
-    }, [status]);
+  React.useEffect(() => {
+    if (status != null) {
+      setInternalValue(status);
+    }
+  }, [status]);
 
-    // This special logic is to handle weird APIs like Airtable that return
-    // true or undefined for a boolean
-    const previousDefaultValue = usePrevious(defaultValue) as
-      | boolean
-      | undefined;
+  // This special logic is to handle weird APIs like Airtable that return
+  // true or undefined for a boolean
+  const previousDefaultValue = usePrevious(defaultValue) as boolean | undefined;
 
-    React.useEffect(() => {
-      if (defaultValue !== previousDefaultValue) {
-        setInternalValue(Boolean(defaultValue));
-      }
-    }, [defaultValue, previousDefaultValue]);
+  React.useEffect(() => {
+    if (defaultValue !== previousDefaultValue) {
+      setInternalValue(Boolean(defaultValue));
+    }
+  }, [defaultValue, previousDefaultValue]);
 
-    const { colors } = useTheme();
+  const { colors } = useTheme();
 
-    const checkboxColor = internalValue
-      ? color || colors.primary
-      : uncheckedColor || colors.primary;
+  const checkboxColor = internalValue
+    ? color || colors.primary
+    : uncheckedColor || colors.primary;
 
-    const handlePress = () => {
-      const newValue = !internalValue;
+  const handlePress = () => {
+    const newValue = !internalValue;
 
-      setInternalValue(newValue);
-      onPress?.(newValue);
+    setInternalValue(newValue);
+    onPress?.(newValue);
 
-      if (newValue) {
-        onCheck?.();
-      }
+    if (newValue) {
+      onCheck?.();
+    }
 
-      if (!newValue) {
-        onUncheck?.();
-      }
-    };
+    if (!newValue) {
+      onUncheck?.();
+    }
+  };
 
-    return (
-      <Touchable
-        {...rest}
-        onPress={handlePress}
-        disabled={disabled}
-        accessibilityState={{ disabled }}
-        accessibilityRole="button"
-        accessibilityLiveRegion="polite"
-        style={[styles.container, style, { width: size, height: size }]}
-      >
-        <Icon
-          style={styles.icon}
-          name={internalValue ? checkedIcon : uncheckedIcon}
-          size={size}
-          color={checkboxColor}
+  return (
+    <Touchable
+      {...rest}
+      onPress={handlePress}
+      disabled={disabled}
+      accessibilityState={{ disabled }}
+      accessibilityRole="button"
+      accessibilityLiveRegion="polite"
+      style={[styles.container, style, { width: size, height: size }]}
+    >
+      <Icon
+        style={styles.icon}
+        name={internalValue ? checkedIcon : uncheckedIcon}
+        size={size}
+        color={checkboxColor}
+      />
+      <View style={[StyleSheet.absoluteFill, styles.fillContainer]}>
+        <View
+          style={[
+            styles.fill,
+            { opacity: disabled ? 0.5 : 1 },
+            { borderColor: checkboxColor },
+          ]}
         />
-        <View style={[StyleSheet.absoluteFill, styles.fillContainer]}>
-          <View
-            style={[
-              styles.fill,
-              { opacity: disabled ? 0.5 : 1 },
-              { borderColor: checkboxColor },
-            ]}
-          />
-        </View>
-      </Touchable>
-    );
-  };
+      </View>
+    </Touchable>
+  );
+};
 
 const styles = StyleSheet.create({
   container: {