@draftbit/core 50.1.0 → 50.1.1-1cea51.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "50.1.0",
+  "version": "50.1.1-1cea51.2+1cea512",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/src/index.d.ts",
@@ -41,7 +41,7 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/types": "50.1.0",
+    "@draftbit/types": "^50.1.1-1cea51.2+1cea512",
     "@expo/vector-icons": "^14.0.0",
     "@gorhom/bottom-sheet": "5.0.0-alpha.7",
     "@material-ui/core": "^4.11.0",
@@ -66,6 +66,7 @@
     "react-native-modal-datetime-picker": "^13.0.0",
     "react-native-pager-view": "6.2.3",
     "react-native-reanimated": "~3.6.2",
+    "react-native-select-dropdown": "4.0.1",
     "react-native-shadow-2": "^7.0.7",
     "react-native-svg": "14.1.0",
     "react-native-swipe-list-view": "^3.2.9",
@@ -114,5 +115,5 @@
     ],
     "testEnvironment": "node"
   },
-  "gitHead": "30996f93fbaac367cf545cecef4188a813d2ede2"
+  "gitHead": "1cea51282b60cf6e5b0f30a827036d0605259014"
 }

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

@@ -1 +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"}
+{"version":3,"file":"PickerCommon.js","sourceRoot":"","sources":["PickerCommon.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAuDlC,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"}

package/src/components/Picker/PickerCommon.ts

@@ -40,6 +40,10 @@ export interface MultiSelectPickerProps {
   onValueChange: (value: (string | number)[]) => void;
 }
 
+export interface ModalPickerProps {
+  dropdownOverlayColor?: string;
+}
+
 export interface CommonDropDownPickerProps extends CommonPickerProps {
   selectedIconName?: string;
   selectedIconColor?: string;

package/src/components/Picker/index.js

@@ -1,6 +1,7 @@
 import React from "react";
 import NativePicker from "./NativePicker";
 import DropDownPicker from "./dropdown/DropDownPicker";
+import ModalPicker from "./modal/ModalPicker";
 import { withTheme } from "../../theming";
 const SinglePicker = ({ mode = "native", ...rest }) => {
     switch (mode) {
@@ -10,6 +11,9 @@ const SinglePicker = ({ mode = "native", ...rest }) => {
         case "dropdown":
             //@ts-ignore
             return React.createElement(DropDownPicker, { ...rest });
+        case "modal":
+            //@ts-ignore Ignore theme type issues
+            return React.createElement(ModalPicker, { ...rest });
     }
 };
 export const Picker = withTheme(SinglePicker);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,cAAc,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAM1C,MAAM,YAAY,GAAmD,CAAC,EACpE,IAAI,GAAG,QAAQ,EACf,GAAG,IAAI,EACR,EAAE,EAAE;IACH,QAAQ,IAAI,EAAE;QACZ,KAAK,QAAQ;YACX,qCAAqC;YACrC,OAAO,oBAAC,YAAY,OAAK,IAAI,GAAI,CAAC;QACpC,KAAK,UAAU;YACb,YAAY;YACZ,OAAO,oBAAC,cAAc,OAAK,IAAI,GAAI,CAAC;KACvC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,SAAS,CAAC,YAAY,CAAC,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,cAAc,MAAM,2BAA2B,CAAC;AACvD,OAAO,WAAW,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAS1C,MAAM,YAAY,GAAmD,CAAC,EACpE,IAAI,GAAG,QAAQ,EACf,GAAG,IAAI,EACR,EAAE,EAAE;IACH,QAAQ,IAAI,EAAE;QACZ,KAAK,QAAQ;YACX,qCAAqC;YACrC,OAAO,oBAAC,YAAY,OAAK,IAAI,GAAI,CAAC;QACpC,KAAK,UAAU;YACb,YAAY;YACZ,OAAO,oBAAC,cAAc,OAAK,IAAI,GAAI,CAAC;QACtC,KAAK,OAAO;YACV,qCAAqC;YACrC,OAAO,oBAAC,WAAW,OAAK,IAAI,GAAI,CAAC;KACpC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,SAAS,CAAC,YAAY,CAAC,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAC"}

package/src/components/Picker/index.tsx

@@ -1,11 +1,19 @@
 import React from "react";
-import { CommonDropDownPickerProps, SinglePickerProps } from "./PickerCommon";
+import {
+  CommonDropDownPickerProps,
+  ModalPickerProps,
+  SinglePickerProps,
+} from "./PickerCommon";
 import NativePicker from "./NativePicker";
 import DropDownPicker from "./dropdown/DropDownPicker";
+import ModalPicker from "./modal/ModalPicker";
 import { withTheme } from "../../theming";
 
-interface PickerProps extends CommonDropDownPickerProps, SinglePickerProps {
-  mode?: "native" | "dropdown";
+interface PickerProps
+  extends CommonDropDownPickerProps,
+    SinglePickerProps,
+    ModalPickerProps {
+  mode?: "native" | "dropdown" | "modal";
 }
 
 const SinglePicker: React.FC<React.PropsWithChildren<PickerProps>> = ({
@@ -19,6 +27,9 @@ const SinglePicker: React.FC<React.PropsWithChildren<PickerProps>> = ({
     case "dropdown":
       //@ts-ignore
       return <DropDownPicker {...rest} />;
+    case "modal":
+      //@ts-ignore Ignore theme type issues
+      return <ModalPicker {...rest} />;
   }
 };
 

package/src/components/Picker/modal/ModalPicker.js

@@ -0,0 +1,88 @@
+import * as React from "react";
+import { View, Text, Keyboard } from "react-native";
+import { extractStyles, flattenReactFragments, useDeepCompareMemo, } from "../../../utilities";
+import { normalizeToPickerOptions, } from "../PickerCommon";
+import PickerInputContainer from "../PickerInputContainer";
+import ModalPickerComponent from "react-native-select-dropdown";
+import { withTheme } from "../../../theming";
+import PickerItem from "../dropdown/PickerItem";
+import { useOnUpdate } from "../../../hooks";
+const ModalPicker = ({ theme, options: optionsProp = [], onValueChange, Icon, placeholder, value, autoDismissKeyboard = true, selectedIconName = "Feather/check", selectedIconColor = theme.colors.strong, selectedIconSize = 20, dropDownBackgroundColor = theme.colors.background, dropDownBorderColor = theme.colors.divider, dropDownTextColor = theme.colors.strong, dropDownBorderWidth = 1, dropDownBorderRadius = 8, children: childrenProp, disabled, dropdownOverlayColor, ...rest }) => {
+    const dropdownRef = React.useRef();
+    const [pickerVisible, setPickerVisible] = React.useState(false);
+    const [internalValue, setInternalValue] = React.useState(value);
+    const isMultiSelect = Array.isArray(value);
+    const pickerItemProps = React.useMemo(() => {
+        const children = flattenReactFragments(React.Children.toArray(childrenProp));
+        // Only the props of the first PickerItem are used, any others are ignored
+        const firstPickerItem = children.find((child) => child.type === PickerItem);
+        return (firstPickerItem === null || firstPickerItem === void 0 ? void 0 : firstPickerItem.props) || {};
+    }, [childrenProp]);
+    const { viewStyles: pickerItemViewStyles, textStyles: pickerItemTextStyles } = extractStyles(pickerItemProps.style);
+    const options = useDeepCompareMemo(() => normalizeToPickerOptions(optionsProp).map((option) => ({
+        label: option.label.toString(),
+        value: option.value,
+    })), [optionsProp]);
+    useOnUpdate(() => {
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange((isMultiSelect ? internalValue !== null && internalValue !== void 0 ? internalValue : [] : internalValue !== null && internalValue !== void 0 ? internalValue : "") // cannot determine if multiselect or not on compile time
+        );
+        // onValueChange excluded to prevent running on every re-render when using an anoymous function, which is the common case
+    }, [internalValue]);
+    React.useEffect(() => {
+        if (pickerVisible && autoDismissKeyboard) {
+            Keyboard.dismiss();
+        }
+    }, [pickerVisible, autoDismissKeyboard]);
+    React.useEffect(() => {
+        if (disabled) {
+            setPickerVisible(false);
+        }
+    }, [disabled]);
+    const defaultValue = options.find((item) => item.value === value);
+    return (React.createElement(PickerInputContainer, { testID: "dropdown-picker", Icon: Icon, placeholder: placeholder, selectedValue: value, options: options, onPress: () => {
+            setPickerVisible(!pickerVisible);
+            // @ts-ignore
+            dropdownRef.current.openDropdown();
+        }, zIndex: pickerVisible ? 100 : undefined, disabled: disabled, ...rest },
+        React.createElement(ModalPickerComponent
+        // @ts-ignore
+        , { 
+            // @ts-ignore
+            ref: dropdownRef, data: options, defaultValue: defaultValue, onSelect: (selectedItem, index) => {
+                console.log(selectedItem, index);
+                setInternalValue(selectedItem.value);
+            }, renderButton: () => {
+                return React.createElement(View, null);
+            }, renderItem: (item, _index, isSelected) => {
+                const selectedBackgroundColor = isSelected
+                    ? pickerItemProps.selectedBackgroundColor
+                    : pickerItemViewStyles.backgroundColor;
+                const selectedTextColor = isSelected
+                    ? pickerItemProps.selectedTextColor || dropDownTextColor
+                    : dropDownTextColor;
+                const selectedTextSize = isSelected
+                    ? pickerItemProps.selectedTextSize || 14
+                    : 14;
+                const iconColor = isSelected ? selectedIconColor : "transparent";
+                return (React.createElement(View, { style: {
+                        padding: 10,
+                        flexDirection: "row",
+                        alignItems: "center",
+                        backgroundColor: selectedBackgroundColor,
+                    } },
+                    React.createElement(Text, { style: {
+                            color: selectedTextColor,
+                            fontSize: selectedTextSize,
+                            flex: 1,
+                            ...pickerItemTextStyles,
+                        } }, item.label),
+                    React.createElement(Icon, { name: selectedIconName, size: selectedIconSize, color: iconColor })));
+            }, showsVerticalScrollIndicator: false, dropdownOverlayColor: dropdownOverlayColor, dropdownStyle: {
+                borderColor: dropDownBorderColor,
+                borderWidth: dropDownBorderWidth,
+                borderRadius: dropDownBorderRadius,
+                backgroundColor: dropDownBackgroundColor,
+            }, disableAutoScroll: true })));
+};
+export default withTheme(ModalPicker);
+//# sourceMappingURL=ModalPicker.js.map

package/src/components/Picker/modal/ModalPicker.js.map

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

package/src/components/Picker/modal/ModalPicker.tsx

@@ -0,0 +1,179 @@
+import * as React from "react";
+import { View, Text, Keyboard } from "react-native";
+import {
+  extractStyles,
+  flattenReactFragments,
+  useDeepCompareMemo,
+} from "../../../utilities";
+import {
+  CommonDropDownPickerProps,
+  ModalPickerProps,
+  SinglePickerProps,
+  normalizeToPickerOptions,
+} from "../PickerCommon";
+import PickerInputContainer from "../PickerInputContainer";
+import ModalPickerComponent from "react-native-select-dropdown";
+import { withTheme } from "../../../theming";
+import PickerItem, { PickerItemProps } from "../dropdown/PickerItem";
+import { useOnUpdate } from "../../../hooks";
+
+const ModalPicker: React.FC<
+  React.PropsWithChildren<
+    CommonDropDownPickerProps & SinglePickerProps & ModalPickerProps
+  >
+> = ({
+  theme,
+  options: optionsProp = [],
+  onValueChange,
+  Icon,
+  placeholder,
+  value,
+  autoDismissKeyboard = true,
+  selectedIconName = "Feather/check",
+  selectedIconColor = theme.colors.strong,
+  selectedIconSize = 20,
+  dropDownBackgroundColor = theme.colors.background,
+  dropDownBorderColor = theme.colors.divider,
+  dropDownTextColor = theme.colors.strong,
+  dropDownBorderWidth = 1,
+  dropDownBorderRadius = 8,
+  children: childrenProp,
+  disabled,
+  dropdownOverlayColor,
+  ...rest
+}) => {
+  const dropdownRef = React.useRef();
+
+  const [pickerVisible, setPickerVisible] = React.useState(false);
+  const [internalValue, setInternalValue] = React.useState<
+    string | number | (string | number)[] | undefined
+  >(value);
+
+  const isMultiSelect = Array.isArray(value);
+
+  const pickerItemProps: PickerItemProps = React.useMemo(() => {
+    const children = flattenReactFragments(
+      React.Children.toArray(childrenProp) as React.ReactElement[]
+    );
+
+    // Only the props of the first PickerItem are used, any others are ignored
+    const firstPickerItem = children.find((child) => child.type === PickerItem);
+
+    return firstPickerItem?.props || {};
+  }, [childrenProp]);
+
+  const { viewStyles: pickerItemViewStyles, textStyles: pickerItemTextStyles } =
+    extractStyles(pickerItemProps.style);
+
+  const options = useDeepCompareMemo(
+    () =>
+      normalizeToPickerOptions(optionsProp).map((option) => ({
+        label: option.label.toString(),
+        value: option.value,
+      })),
+    [optionsProp]
+  );
+
+  useOnUpdate(() => {
+    onValueChange?.(
+      (isMultiSelect ? internalValue ?? [] : internalValue ?? "") as any // cannot determine if multiselect or not on compile time
+    );
+    // onValueChange excluded to prevent running on every re-render when using an anoymous function, which is the common case
+  }, [internalValue]);
+
+  React.useEffect(() => {
+    if (pickerVisible && autoDismissKeyboard) {
+      Keyboard.dismiss();
+    }
+  }, [pickerVisible, autoDismissKeyboard]);
+
+  React.useEffect(() => {
+    if (disabled) {
+      setPickerVisible(false);
+    }
+  }, [disabled]);
+
+  const defaultValue = options.find((item) => item.value === value);
+
+  return (
+    <PickerInputContainer
+      testID="dropdown-picker"
+      Icon={Icon}
+      placeholder={placeholder}
+      selectedValue={value}
+      options={options}
+      onPress={() => {
+        setPickerVisible(!pickerVisible);
+        // @ts-ignore
+        dropdownRef.current.openDropdown();
+      }}
+      zIndex={pickerVisible ? 100 : undefined} // Guarantees drop down is rendered above all sibling components
+      disabled={disabled}
+      {...rest}
+    >
+      <ModalPickerComponent
+        // @ts-ignore
+        ref={dropdownRef}
+        data={options}
+        defaultValue={defaultValue}
+        onSelect={(selectedItem, index) => {
+          console.log(selectedItem, index);
+          setInternalValue(selectedItem.value);
+        }}
+        renderButton={() => {
+          return <View />;
+        }}
+        renderItem={(item, _index, isSelected) => {
+          const selectedBackgroundColor = isSelected
+            ? pickerItemProps.selectedBackgroundColor
+            : pickerItemViewStyles.backgroundColor;
+          const selectedTextColor = isSelected
+            ? pickerItemProps.selectedTextColor || dropDownTextColor
+            : dropDownTextColor;
+          const selectedTextSize = isSelected
+            ? pickerItemProps.selectedTextSize || 14
+            : 14;
+          const iconColor = isSelected ? selectedIconColor : "transparent";
+
+          return (
+            <View
+              style={{
+                padding: 10,
+                flexDirection: "row",
+                alignItems: "center",
+                backgroundColor: selectedBackgroundColor,
+              }}
+            >
+              <Text
+                style={{
+                  color: selectedTextColor,
+                  fontSize: selectedTextSize,
+                  flex: 1,
+                  ...pickerItemTextStyles,
+                }}
+              >
+                {item.label}
+              </Text>
+              <Icon
+                name={selectedIconName}
+                size={selectedIconSize}
+                color={iconColor}
+              />
+            </View>
+          );
+        }}
+        showsVerticalScrollIndicator={false}
+        dropdownOverlayColor={dropdownOverlayColor}
+        dropdownStyle={{
+          borderColor: dropDownBorderColor,
+          borderWidth: dropDownBorderWidth,
+          borderRadius: dropDownBorderRadius,
+          backgroundColor: dropDownBackgroundColor,
+        }}
+        disableAutoScroll={true}
+      />
+    </PickerInputContainer>
+  );
+};
+
+export default withTheme(ModalPicker);