@draftbit/core 48.5.6 → 48.5.7-cd0364.2

package/src/components/NumberInput.tsx

@@ -1,103 +1,103 @@
-import React, { useEffect, useState } from "react";
-import { TextInput as NativeTextInput } from "react-native";
-import { isString, isNumber, isNaN } from "lodash";
-import { TextInputProps } from "./TextInput";
-import { useDebounce } from "../hooks";
-
-interface Props
-  extends Omit<
-    TextInputProps,
-    "value" | "onChangeText" | "defaultValue" | "onChangeTextDelayed"
-  > {
-  value?: number | string;
-  defaultValue?: number | string;
-  onChangeText?: (value?: number) => void;
-  onChangeTextDelayed?: (value?: number) => void;
-}
-
-const NumberInput = React.forwardRef<NativeTextInput, Props>(
-  (
-    {
-      onChangeText,
-      onChangeTextDelayed,
-      changeTextDelay = 500,
-      value,
-      defaultValue,
-      ...props
-    },
-    ref
-  ) => {
-    const [currentStringNumberValue, setCurrentStringNumberValue] =
-      useState("");
-
-    const delayedValue = useDebounce(value, changeTextDelay);
-
-    const formatValueToStringNumber = (valueToFormat?: number | string) => {
-      if (valueToFormat != null) {
-        if (isString(valueToFormat) && valueToFormat !== "") {
-          if (/^0[1-9]$/.test(valueToFormat)) {
-            return valueToFormat.slice(1);
-          } else if (/^[+-]?([0-9]+\.?[0-9]*|\.[0-9]+)$/.test(valueToFormat)) {
-            return valueToFormat;
-          } else {
-            return currentStringNumberValue;
-          }
-        } else if (isNumber(valueToFormat) && !isNaN(valueToFormat)) {
-          return valueToFormat.toString();
-        }
-      }
-
-      return "";
-    };
-
-    const handleChangeText = (newValue: string) => {
-      const newStringNumberValue = formatValueToStringNumber(newValue);
-      const number = parseFloat(newStringNumberValue);
-
-      setCurrentStringNumberValue(newStringNumberValue);
-      onChangeText?.(number);
-    };
-
-    // run handleChangeText with value prop only when value prop changes (and first render to reset currentStringNumberValue)
-    useEffect(() => {
-      const nextStringNumberValue = formatValueToStringNumber(value);
-
-      if (currentStringNumberValue !== nextStringNumberValue) {
-        handleChangeText(nextStringNumberValue);
-      }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [value]);
-
-    // set currentStringNumberValue as defaultValue prop if there is a differnce on first render only
-    useEffect(() => {
-      const defaultStringNumberValue = formatValueToStringNumber(defaultValue);
-
-      if (currentStringNumberValue !== defaultStringNumberValue) {
-        setCurrentStringNumberValue(defaultStringNumberValue);
-      }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    useEffect(() => {
-      if (delayedValue !== undefined) {
-        const newStringNumberValue = formatValueToStringNumber(delayedValue);
-        const number = parseFloat(newStringNumberValue);
-        onChangeTextDelayed?.(number);
-      }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [delayedValue]);
-
-    return (
-      <NativeTextInput
-        testID="native-text-input"
-        ref={ref}
-        keyboardType="numeric"
-        value={currentStringNumberValue}
-        onChangeText={handleChangeText}
-        {...props}
-      />
-    );
-  }
-);
-
-export default NumberInput;
+import React, { useEffect, useState } from "react";
+import { TextInput as NativeTextInput } from "react-native";
+import { isString, isNumber, isNaN } from "lodash";
+import { TextInputProps } from "./TextInput";
+import { useDebounce } from "../hooks";
+
+interface Props
+  extends Omit<
+    TextInputProps,
+    "value" | "onChangeText" | "defaultValue" | "onChangeTextDelayed"
+  > {
+  value?: number | string;
+  defaultValue?: number | string;
+  onChangeText?: (value?: number) => void;
+  onChangeTextDelayed?: (value?: number) => void;
+}
+
+const NumberInput = React.forwardRef<NativeTextInput, Props>(
+  (
+    {
+      onChangeText,
+      onChangeTextDelayed,
+      changeTextDelay = 500,
+      value,
+      defaultValue,
+      ...props
+    },
+    ref
+  ) => {
+    const [currentStringNumberValue, setCurrentStringNumberValue] =
+      useState("");
+
+    const delayedValue = useDebounce(value, changeTextDelay);
+
+    const formatValueToStringNumber = (valueToFormat?: number | string) => {
+      if (valueToFormat != null) {
+        if (isString(valueToFormat) && valueToFormat !== "") {
+          if (/^0[1-9]$/.test(valueToFormat)) {
+            return valueToFormat.slice(1);
+          } else if (/^[+-]?([0-9]+\.?[0-9]*|\.[0-9]+)$/.test(valueToFormat)) {
+            return valueToFormat;
+          } else {
+            return currentStringNumberValue;
+          }
+        } else if (isNumber(valueToFormat) && !isNaN(valueToFormat)) {
+          return valueToFormat.toString();
+        }
+      }
+
+      return "";
+    };
+
+    const handleChangeText = (newValue: string) => {
+      const newStringNumberValue = formatValueToStringNumber(newValue);
+      const number = parseFloat(newStringNumberValue);
+
+      setCurrentStringNumberValue(newStringNumberValue);
+      onChangeText?.(number);
+    };
+
+    // run handleChangeText with value prop only when value prop changes (and first render to reset currentStringNumberValue)
+    useEffect(() => {
+      const nextStringNumberValue = formatValueToStringNumber(value);
+
+      if (currentStringNumberValue !== nextStringNumberValue) {
+        handleChangeText(nextStringNumberValue);
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value]);
+
+    // set currentStringNumberValue as defaultValue prop if there is a differnce on first render only
+    useEffect(() => {
+      const defaultStringNumberValue = formatValueToStringNumber(defaultValue);
+
+      if (currentStringNumberValue !== defaultStringNumberValue) {
+        setCurrentStringNumberValue(defaultStringNumberValue);
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    useEffect(() => {
+      if (delayedValue !== undefined) {
+        const newStringNumberValue = formatValueToStringNumber(delayedValue);
+        const number = parseFloat(newStringNumberValue);
+        onChangeTextDelayed?.(number);
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [delayedValue]);
+
+    return (
+      <NativeTextInput
+        testID="native-text-input"
+        ref={ref}
+        keyboardType="numeric"
+        value={currentStringNumberValue}
+        onChangeText={handleChangeText}
+        {...props}
+      />
+    );
+  }
+);
+
+export default NumberInput;

package/src/components/Picker/NativePicker.js

@@ -0,0 +1,95 @@
+import * as React from "react";
+import { StyleSheet, Platform, Keyboard } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { Picker as NativePickerComponent } from "@react-native-picker/picker";
+import Portal from "../Portal/Portal";
+import { Button } from "../Button";
+import { useDeepCompareMemo } from "../../utilities";
+import { normalizeToPickerOptions, } from "./PickerCommon";
+import PickerInputContainer from "./PickerInputContainer";
+import { withTheme } from "../../theming";
+const isIos = Platform.OS === "ios";
+const isWeb = Platform.OS === "web";
+const NativePicker = ({ options: optionsProp = [], onValueChange, Icon, placeholder, value, autoDismissKeyboard = true, theme, disabled, ...rest }) => {
+    const pickerRef = React.useRef(null);
+    const [pickerVisible, setPickerVisible] = React.useState(false);
+    const options = useDeepCompareMemo(() => {
+        const normalizedOptions = normalizeToPickerOptions(optionsProp);
+        // Underlying Picker component defaults selection to first element when value is not provided (or undefined)
+        // Placholder must be the 1st option in order to allow selection of the 'actual' 1st option
+        if (placeholder) {
+            return [{ label: placeholder, value: placeholder }, ...normalizedOptions];
+        }
+        else {
+            return normalizedOptions;
+        }
+    }, [placeholder, optionsProp]);
+    // When no placeholder is provided then first item should be marked selected to reflect underlying Picker internal state
+    if (!placeholder && options.length && !value && value !== options[0].value) {
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(options[0].value);
+    }
+    const renderNativePicker = () => (React.createElement(NativePickerComponent, { ref: pickerRef, testID: "native-picker-component", selectedValue: value, onValueChange: (newValue) => {
+            if (newValue !== placeholder) {
+                onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue);
+            }
+            else if (newValue === placeholder) {
+                onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange("");
+            }
+        }, style: isIos ? styles.iosNativePicker : styles.nativePicker, onBlur: () => setPickerVisible(false) }, options.map((option) => (React.createElement(NativePickerComponent.Item, { testID: "native-picker-item", label: option.label.toString(), value: option.value, key: option.value })))));
+    const renderPicker = () => {
+        if (isIos) {
+            return (React.createElement(Portal, null,
+                React.createElement(SafeAreaView, { style: styles.iosPickerContent },
+                    React.createElement(Button, { Icon: Icon, onPress: () => setPickerVisible(!pickerVisible), style: [styles.iosButton, { color: theme.colors.primary }], title: "Close" }),
+                    renderNativePicker())));
+        }
+        else {
+            return renderNativePicker();
+        }
+    };
+    React.useEffect(() => {
+        var _a;
+        if (pickerVisible && pickerRef.current) {
+            (_a = pickerRef === null || pickerRef === void 0 ? void 0 : pickerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [pickerVisible, pickerRef]);
+    React.useEffect(() => {
+        if (pickerVisible && autoDismissKeyboard) {
+            Keyboard.dismiss();
+        }
+    }, [pickerVisible, autoDismissKeyboard]);
+    return (React.createElement(PickerInputContainer, { testID: "native-picker", Icon: Icon, placeholder: placeholder, selectedValue: value, options: options, onPress: () => setPickerVisible(!pickerVisible), disabled: disabled, ...rest }, (pickerVisible || isWeb) && !disabled && renderPicker()));
+};
+const styles = StyleSheet.create({
+    nativePicker: {
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        flexDirection: "row",
+        justifyContent: "center",
+        width: "100%",
+        backgroundColor: "white",
+        opacity: 0,
+        ...Platform.select({
+            web: {
+                height: "100%", //To have the <select/> element fill the height
+            },
+        }),
+    },
+    iosNativePicker: {
+        backgroundColor: "white",
+    },
+    iosPickerContent: {
+        width: "100%",
+        position: "absolute",
+        bottom: 0,
+        backgroundColor: "white",
+    },
+    iosButton: {
+        backgroundColor: "transparent",
+        borderWidth: 0,
+    },
+});
+export default withTheme(NativePicker);
+//# sourceMappingURL=NativePicker.js.map

package/src/components/Picker/NativePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativePicker.js","sourceRoot":"","sources":["NativePicker.tsx"],"names":[],"mappings":"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"}

package/src/components/Picker/NativePicker.tsx

@@ -1,158 +1,158 @@
-import * as React from "react";
-import { StyleSheet, Platform, Keyboard } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
-import { Picker as NativePickerComponent } from "@react-native-picker/picker";
-import Portal from "../Portal/Portal";
-import { Button } from "../Button";
-import { useDeepCompareMemo } from "../../utilities";
-import {
-  CommonPickerProps,
-  SinglePickerProps,
-  normalizeToPickerOptions,
-} from "./PickerCommon";
-import PickerInputContainer from "./PickerInputContainer";
-import { withTheme } from "../../theming";
-
-const isIos = Platform.OS === "ios";
-const isWeb = Platform.OS === "web";
-
-const NativePicker: React.FC<CommonPickerProps & SinglePickerProps> = ({
-  options: optionsProp = [],
-  onValueChange,
-  Icon,
-  placeholder,
-  value,
-  autoDismissKeyboard = true,
-  theme,
-  disabled,
-  ...rest
-}) => {
-  const pickerRef = React.useRef<NativePickerComponent<string | number>>(null);
-
-  const [pickerVisible, setPickerVisible] = React.useState(false);
-
-  const options = useDeepCompareMemo(() => {
-    const normalizedOptions = normalizeToPickerOptions(optionsProp);
-
-    // Underlying Picker component defaults selection to first element when value is not provided (or undefined)
-    // Placholder must be the 1st option in order to allow selection of the 'actual' 1st option
-    if (placeholder) {
-      return [{ label: placeholder, value: placeholder }, ...normalizedOptions];
-    } else {
-      return normalizedOptions;
-    }
-  }, [placeholder, optionsProp]);
-
-  // When no placeholder is provided then first item should be marked selected to reflect underlying Picker internal state
-  if (!placeholder && options.length && !value && value !== options[0].value) {
-    onValueChange?.(options[0].value);
-  }
-
-  const renderNativePicker = () => (
-    <NativePickerComponent
-      ref={pickerRef}
-      testID="native-picker-component"
-      selectedValue={value}
-      onValueChange={(newValue) => {
-        if (newValue !== placeholder) {
-          onValueChange?.(newValue);
-        } else if (newValue === placeholder) {
-          onValueChange?.("");
-        }
-      }}
-      style={isIos ? styles.iosNativePicker : styles.nativePicker}
-      onBlur={() => setPickerVisible(false)}
-    >
-      {options.map((option) => (
-        <NativePickerComponent.Item
-          testID="native-picker-item"
-          label={option.label.toString()}
-          value={option.value}
-          key={option.value}
-        />
-      ))}
-    </NativePickerComponent>
-  );
-
-  const renderPicker = () => {
-    if (isIos) {
-      return (
-        <Portal>
-          <SafeAreaView style={styles.iosPickerContent}>
-            <Button
-              Icon={Icon}
-              onPress={() => setPickerVisible(!pickerVisible)}
-              style={[styles.iosButton, { color: theme.colors.primary }]}
-              title="Close"
-            />
-            {renderNativePicker()}
-          </SafeAreaView>
-        </Portal>
-      );
-    } else {
-      return renderNativePicker();
-    }
-  };
-
-  React.useEffect(() => {
-    if (pickerVisible && pickerRef.current) {
-      pickerRef?.current?.focus();
-    }
-  }, [pickerVisible, pickerRef]);
-
-  React.useEffect(() => {
-    if (pickerVisible && autoDismissKeyboard) {
-      Keyboard.dismiss();
-    }
-  }, [pickerVisible, autoDismissKeyboard]);
-
-  return (
-    <PickerInputContainer
-      testID="native-picker"
-      Icon={Icon}
-      placeholder={placeholder}
-      selectedValue={value}
-      options={options}
-      onPress={() => setPickerVisible(!pickerVisible)}
-      disabled={disabled}
-      {...rest}
-    >
-      {/* Web version is collapsed by default, always show to allow direct expand */}
-      {(pickerVisible || isWeb) && !disabled && renderPicker()}
-    </PickerInputContainer>
-  );
-};
-
-const styles = StyleSheet.create({
-  nativePicker: {
-    position: "absolute",
-    bottom: 0,
-    left: 0,
-    right: 0,
-    flexDirection: "row",
-    justifyContent: "center",
-    width: "100%",
-    backgroundColor: "white",
-    opacity: 0,
-    ...Platform.select({
-      web: {
-        height: "100%", //To have the <select/> element fill the height
-      },
-    }),
-  },
-  iosNativePicker: {
-    backgroundColor: "white",
-  },
-  iosPickerContent: {
-    width: "100%",
-    position: "absolute",
-    bottom: 0,
-    backgroundColor: "white",
-  },
-  iosButton: {
-    backgroundColor: "transparent",
-    borderWidth: 0,
-  },
-});
-
-export default withTheme(NativePicker);
+import * as React from "react";
+import { StyleSheet, Platform, Keyboard } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { Picker as NativePickerComponent } from "@react-native-picker/picker";
+import Portal from "../Portal/Portal";
+import { Button } from "../Button";
+import { useDeepCompareMemo } from "../../utilities";
+import {
+  CommonPickerProps,
+  SinglePickerProps,
+  normalizeToPickerOptions,
+} from "./PickerCommon";
+import PickerInputContainer from "./PickerInputContainer";
+import { withTheme } from "../../theming";
+
+const isIos = Platform.OS === "ios";
+const isWeb = Platform.OS === "web";
+
+const NativePicker: React.FC<CommonPickerProps & SinglePickerProps> = ({
+  options: optionsProp = [],
+  onValueChange,
+  Icon,
+  placeholder,
+  value,
+  autoDismissKeyboard = true,
+  theme,
+  disabled,
+  ...rest
+}) => {
+  const pickerRef = React.useRef<NativePickerComponent<string | number>>(null);
+
+  const [pickerVisible, setPickerVisible] = React.useState(false);
+
+  const options = useDeepCompareMemo(() => {
+    const normalizedOptions = normalizeToPickerOptions(optionsProp);
+
+    // Underlying Picker component defaults selection to first element when value is not provided (or undefined)
+    // Placholder must be the 1st option in order to allow selection of the 'actual' 1st option
+    if (placeholder) {
+      return [{ label: placeholder, value: placeholder }, ...normalizedOptions];
+    } else {
+      return normalizedOptions;
+    }
+  }, [placeholder, optionsProp]);
+
+  // When no placeholder is provided then first item should be marked selected to reflect underlying Picker internal state
+  if (!placeholder && options.length && !value && value !== options[0].value) {
+    onValueChange?.(options[0].value);
+  }
+
+  const renderNativePicker = () => (
+    <NativePickerComponent
+      ref={pickerRef}
+      testID="native-picker-component"
+      selectedValue={value}
+      onValueChange={(newValue) => {
+        if (newValue !== placeholder) {
+          onValueChange?.(newValue);
+        } else if (newValue === placeholder) {
+          onValueChange?.("");
+        }
+      }}
+      style={isIos ? styles.iosNativePicker : styles.nativePicker}
+      onBlur={() => setPickerVisible(false)}
+    >
+      {options.map((option) => (
+        <NativePickerComponent.Item
+          testID="native-picker-item"
+          label={option.label.toString()}
+          value={option.value}
+          key={option.value}
+        />
+      ))}
+    </NativePickerComponent>
+  );
+
+  const renderPicker = () => {
+    if (isIos) {
+      return (
+        <Portal>
+          <SafeAreaView style={styles.iosPickerContent}>
+            <Button
+              Icon={Icon}
+              onPress={() => setPickerVisible(!pickerVisible)}
+              style={[styles.iosButton, { color: theme.colors.primary }]}
+              title="Close"
+            />
+            {renderNativePicker()}
+          </SafeAreaView>
+        </Portal>
+      );
+    } else {
+      return renderNativePicker();
+    }
+  };
+
+  React.useEffect(() => {
+    if (pickerVisible && pickerRef.current) {
+      pickerRef?.current?.focus();
+    }
+  }, [pickerVisible, pickerRef]);
+
+  React.useEffect(() => {
+    if (pickerVisible && autoDismissKeyboard) {
+      Keyboard.dismiss();
+    }
+  }, [pickerVisible, autoDismissKeyboard]);
+
+  return (
+    <PickerInputContainer
+      testID="native-picker"
+      Icon={Icon}
+      placeholder={placeholder}
+      selectedValue={value}
+      options={options}
+      onPress={() => setPickerVisible(!pickerVisible)}
+      disabled={disabled}
+      {...rest}
+    >
+      {/* Web version is collapsed by default, always show to allow direct expand */}
+      {(pickerVisible || isWeb) && !disabled && renderPicker()}
+    </PickerInputContainer>
+  );
+};
+
+const styles = StyleSheet.create({
+  nativePicker: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    flexDirection: "row",
+    justifyContent: "center",
+    width: "100%",
+    backgroundColor: "white",
+    opacity: 0,
+    ...Platform.select({
+      web: {
+        height: "100%", //To have the <select/> element fill the height
+      },
+    }),
+  },
+  iosNativePicker: {
+    backgroundColor: "white",
+  },
+  iosPickerContent: {
+    width: "100%",
+    position: "absolute",
+    bottom: 0,
+    backgroundColor: "white",
+  },
+  iosButton: {
+    backgroundColor: "transparent",
+    borderWidth: 0,
+  },
+});
+
+export default withTheme(NativePicker);

package/src/components/Picker/PickerCommon.js

@@ -0,0 +1,25 @@
+import { isObject } from "lodash";
+export function normalizeToPickerOptions(options) {
+    if (options.length === 0) {
+        return [];
+    }
+    const firstOption = options[0];
+    if (typeof firstOption === "string" || typeof firstOption === "number") {
+        return options.map((option) => ({
+            label: option,
+            value: option,
+        }));
+    }
+    if (isObject(firstOption) &&
+        firstOption.value !== undefined &&
+        firstOption.label !== undefined) {
+        return options.map((option) => {
+            return {
+                label: option.label,
+                value: option.value,
+            };
+        });
+    }
+    throw new Error('Picker options must be either an array of strings, numbers, or an array of { "label": string | number; "value": string | number; } objects.');
+}
+//# sourceMappingURL=PickerCommon.js.map

package/src/components/Picker/PickerCommon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PickerCommon.js","sourceRoot":"","sources":["PickerCommon.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAmDlC,MAAM,UAAU,wBAAwB,CACtC,OAA6C;IAE7C,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;QACxB,OAAO,EAAE,CAAC;KACX;IAED,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;IAE/B,IAAI,OAAO,WAAW,KAAK,QAAQ,IAAI,OAAO,WAAW,KAAK,QAAQ,EAAE;QACtE,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;YAC9B,KAAK,EAAE,MAAyB;YAChC,KAAK,EAAE,MAAyB;SACjC,CAAC,CAAC,CAAC;KACL;IAED,IACE,QAAQ,CAAC,WAAW,CAAC;QACrB,WAAW,CAAC,KAAK,KAAK,SAAS;QAC/B,WAAW,CAAC,KAAK,KAAK,SAAS,EAC/B;QACA,OAAQ,OAA0B,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;YAChD,OAAO;gBACL,KAAK,EAAE,MAAM,CAAC,KAAK;gBACnB,KAAK,EAAE,MAAM,CAAC,KAAK;aACpB,CAAC;QACJ,CAAC,CAAC,CAAC;KACJ;IAED,MAAM,IAAI,KAAK,CACb,6IAA6I,CAC9I,CAAC;AACJ,CAAC"}