@ornikar/kitt-universal 23.3.0 → 23.4.0

package/dist/index-node-20.10.cjs.js

@@ -16,6 +16,8 @@ const phosphor = require('@ornikar/kitt-icons/phosphor');
 const Downshift = require('downshift');
 const DateTimePicker = require('@react-native-community/datetimepicker');
 const reactIntl = require('react-intl');
+const expoDocumentPicker = require('expo-document-picker');
+const expoImagePicker = require('expo-image-picker');
 const useDebounce = require('use-debounce');
 const libphonenumberJs = require('libphonenumber-js');
 const Svg = require('react-native-svg');
@@ -5330,6 +5332,232 @@ const DatePicker = /*#__PURE__*/React.forwardRef(({
   });
 });
 
+function DocumentPicker({
+  onDocumentUpload,
+  children,
+  disabled,
+  documentPickerOptions
+}) {
+  const childElement = React.Children.only(children);
+  return /*#__PURE__*/React.cloneElement(childElement, {
+    // ensure that the press event is not prevented by Button component
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+    onPress: async () => {
+      if (disabled) return;
+      childElement.props.onPress?.();
+      const result = await expoDocumentPicker.getDocumentAsync({
+        ...documentPickerOptions,
+        multiple: false
+      });
+      if (!result.canceled && result.assets[0].file) {
+        onDocumentUpload(result.assets[0].file);
+      }
+    },
+    disabled
+  });
+}
+
+function ImagePicker({
+  onImageSelected,
+  children,
+  disabled,
+  imagePickerOptions
+}) {
+  const childElement = React.Children.only(children);
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    children: /*#__PURE__*/React.cloneElement(childElement, {
+      // eslint-disable-next-line @typescript-eslint/no-misused-promises
+      onPress: async () => {
+        if (disabled) return;
+        childElement.props.onPress?.();
+
+        // No permissions request is necessary for launching the image library
+        const result = await expoImagePicker.launchImageLibraryAsync({
+          ...imagePickerOptions,
+          allowsMultipleSelection: false
+        });
+        if (!result.canceled) {
+          onImageSelected(result.assets[0]);
+        }
+      },
+      disabled
+    })
+  });
+}
+
+function ListItemContent({
+  children,
+  ...rest
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    alignSelf: "center",
+    flexBasis: "0%",
+    flexGrow: 1,
+    flexShrink: 0,
+    ...rest,
+    children: children
+  });
+}
+
+// Handles the vertical alignment of the side elements of the list item
+function ListItemSideContainer({
+  children,
+  side = 'left',
+  ...rest
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    flexDirection: "row",
+    marginLeft: side === 'right' ? 'kitt.2' : undefined,
+    marginRight: side === 'left' ? 'kitt.2' : undefined,
+    ...rest,
+    children: children
+  });
+}
+function ListItemSideContent({
+  children,
+  align = 'auto',
+  ...rest
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    alignSelf: align,
+    ...rest,
+    children: children
+  });
+}
+
+function ListItem({
+  children,
+  withPadding,
+  borders,
+  left,
+  right,
+  onPress,
+  ...rest
+}) {
+  const Wrapper = onPress ? reactNative.Pressable : React.Fragment;
+  const wrapperProps = onPress ? {
+    accessibilityRole: 'button',
+    onPress,
+    ...rest
+  } : undefined;
+  const containerProps = onPress ? undefined : rest;
+  return /*#__PURE__*/jsxRuntime.jsx(Wrapper, {
+    ...wrapperProps,
+    children: /*#__PURE__*/jsxRuntime.jsxs(View, {
+      flexDirection: "row",
+      paddingX: withPadding ? 'kitt.listItem.horizontalPadding' : undefined,
+      paddingY: withPadding ? 'kitt.listItem.verticalPadding' : undefined,
+      borderColor: "kitt.listItem.borderColor",
+      backgroundColor: "kitt.uiBackgroundLight",
+      borderTopWidth: borders === 'top' || borders === 'both' ? 'kitt.listItem.borderWidth' : undefined,
+      borderBottomWidth: borders === 'bottom' || borders === 'both' ? 'kitt.listItem.borderWidth' : undefined,
+      ...containerProps,
+      children: [left ? /*#__PURE__*/jsxRuntime.jsx(ListItemSideContainer, {
+        side: "left",
+        children: left
+      }) : null, /*#__PURE__*/jsxRuntime.jsx(ListItemContent, {
+        children: children
+      }), right ? /*#__PURE__*/jsxRuntime.jsx(ListItemSideContainer, {
+        side: "right",
+        children: right
+      }) : null]
+    })
+  });
+}
+ListItem.Content = ListItemContent;
+ListItem.SideContent = ListItemSideContent;
+ListItem.SideContainer = ListItemSideContainer;
+
+function BottomSheetActionsItem({
+  title,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(reactNative.Pressable, {
+    ...props,
+    children: /*#__PURE__*/jsxRuntime.jsx(ListItem, {
+      withPadding: true,
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+        variant: "bold",
+        base: "body",
+        children: title
+      })
+    })
+  });
+}
+
+function BottomSheetActions({
+  onBottomSheetActionsChange,
+  imagePickerOptions,
+  documentPickerOptions,
+  disabled
+}) {
+  const isPlatformIOS = reactNative.Platform.OS === 'ios';
+  return /*#__PURE__*/jsxRuntime.jsxs(VStack, {
+    marginBottom: "kitt.8",
+    children: [/*#__PURE__*/jsxRuntime.jsx(ImagePicker, {
+      imagePickerOptions: imagePickerOptions,
+      disabled: disabled,
+      onImageSelected: onBottomSheetActionsChange,
+      children: /*#__PURE__*/jsxRuntime.jsx(BottomSheetActionsItem, {
+        title: /*#__PURE__*/jsxRuntime.jsx(reactIntl.FormattedMessage, {
+          id: "account.BottomSheetActions.openLibrary",
+          values: {
+            isPlatformIOS
+          }
+        })
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(DocumentPicker, {
+      disabled: disabled,
+      documentPickerOptions: documentPickerOptions,
+      onDocumentUpload: onBottomSheetActionsChange,
+      children: /*#__PURE__*/jsxRuntime.jsx(BottomSheetActionsItem, {
+        title: /*#__PURE__*/jsxRuntime.jsx(reactIntl.FormattedMessage, {
+          id: "account.BottomSheetActions.openFileExplorer",
+          values: {
+            isPlatformIOS
+          }
+        })
+      })
+    })]
+  });
+}
+
+function FilePicker({
+  onFileSelected,
+  children,
+  disabled,
+  imagePickerOptions,
+  documentPickerOptions
+}) {
+  const childElement = React.Children.only(children);
+  const {
+    bottomSheetRef,
+    BottomSheet
+  } = useStaticBottomSheet(BottomSheetActions);
+  const {
+    dismissAll
+  } = bottomSheet$1.useBottomSheetModal();
+  const handleBottomSheetActionsChange = file => {
+    dismissAll();
+    onFileSelected(file);
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/React.cloneElement(childElement, {
+      // ensure that the press event is not prevented by Button component
+      onPress: () => {
+        if (disabled) return;
+        childElement.props.onPress?.();
+        bottomSheetRef.current?.present({
+          onBottomSheetActionsChange: handleBottomSheetActionsChange,
+          imagePickerOptions,
+          documentPickerOptions
+        });
+      },
+      disabled
+    }), /*#__PURE__*/jsxRuntime.jsx(BottomSheet, {})]
+  });
+}
+
 const GoogleMapsApiKeyContext = /*#__PURE__*/React.createContext(undefined);
 function GoogleMapsApiKeyProvider({
   children,
@@ -7122,89 +7350,6 @@ function useKittMapConfig() {
   return context;
 }
 
-function ListItemContent({
-  children,
-  ...rest
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(View, {
-    alignSelf: "center",
-    flexBasis: "0%",
-    flexGrow: 1,
-    flexShrink: 0,
-    ...rest,
-    children: children
-  });
-}
-
-// Handles the vertical alignment of the side elements of the list item
-function ListItemSideContainer({
-  children,
-  side = 'left',
-  ...rest
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(View, {
-    flexDirection: "row",
-    marginLeft: side === 'right' ? 'kitt.2' : undefined,
-    marginRight: side === 'left' ? 'kitt.2' : undefined,
-    ...rest,
-    children: children
-  });
-}
-function ListItemSideContent({
-  children,
-  align = 'auto',
-  ...rest
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(View, {
-    alignSelf: align,
-    ...rest,
-    children: children
-  });
-}
-
-function ListItem({
-  children,
-  withPadding,
-  borders,
-  left,
-  right,
-  onPress,
-  ...rest
-}) {
-  const Wrapper = onPress ? reactNative.Pressable : React.Fragment;
-  const wrapperProps = onPress ? {
-    accessibilityRole: 'button',
-    onPress,
-    ...rest
-  } : undefined;
-  const containerProps = onPress ? undefined : rest;
-  return /*#__PURE__*/jsxRuntime.jsx(Wrapper, {
-    ...wrapperProps,
-    children: /*#__PURE__*/jsxRuntime.jsxs(View, {
-      flexDirection: "row",
-      paddingX: withPadding ? 'kitt.listItem.horizontalPadding' : undefined,
-      paddingY: withPadding ? 'kitt.listItem.verticalPadding' : undefined,
-      borderColor: "kitt.listItem.borderColor",
-      backgroundColor: "kitt.uiBackgroundLight",
-      borderTopWidth: borders === 'top' || borders === 'both' ? 'kitt.listItem.borderWidth' : undefined,
-      borderBottomWidth: borders === 'bottom' || borders === 'both' ? 'kitt.listItem.borderWidth' : undefined,
-      ...containerProps,
-      children: [left ? /*#__PURE__*/jsxRuntime.jsx(ListItemSideContainer, {
-        side: "left",
-        children: left
-      }) : null, /*#__PURE__*/jsxRuntime.jsx(ListItemContent, {
-        children: children
-      }), right ? /*#__PURE__*/jsxRuntime.jsx(ListItemSideContainer, {
-        side: "right",
-        children: right
-      }) : null]
-    })
-  });
-}
-ListItem.Content = ListItemContent;
-ListItem.SideContent = ListItemSideContent;
-ListItem.SideContainer = ListItemSideContainer;
-
 const SvgMarkerLargeinline = props => /*#__PURE__*/jsxRuntime.jsxs("svg", {
   fill: "currentColor",
   viewBox: "0 0 54 56",
@@ -11321,9 +11466,11 @@ exports.ChoicesElements = ChoicesElements;
 exports.CloseIconButton = CloseIconButton;
 exports.DatePicker = DatePicker;
 exports.DialogModal = DialogModal;
+exports.DocumentPicker = DocumentPicker;
 exports.Emoji = Emoji;
 exports.ExternalAppLink = ExternalAppLink;
 exports.ExternalLink = ExternalLink;
+exports.FilePicker = FilePicker;
 exports.FlatList = FlatList;
 exports.Flex = Flex;
 exports.FullscreenModal = FullscreenModal;
@@ -11334,6 +11481,7 @@ exports.Highlight = Highlight;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
 exports.Image = Image;
+exports.ImagePicker = ImagePicker;
 exports.InputAddress = InputAddress;
 exports.InputEmail = InputEmail;
 exports.InputFeedback = InputFeedback;