@os-design-mobile/image-upload 1.0.67 → 1.0.69

package/package.json

@@ -1,12 +1,20 @@
 {
   "name": "@os-design-mobile/image-upload",
-  "version": "1.0.67",
+  "version": "1.0.69",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design-mobile.git",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "react-native": "src/index.tsx",
   "files": [
-    "dist"
+    "dist",
+    "src",
+    "!**/*.test.ts",
+    "!**/*.test.tsx",
+    "!**/__tests__",
+    "!**/*.stories.tsx",
+    "!**/*.stories.mdx",
+    "!**/*.example.tsx"
   ],
   "scripts": {
     "clean": "rimraf dist",
@@ -19,14 +27,14 @@
     "access": "public"
   },
   "dependencies": {
-    "@os-design-mobile/action-menu": "^1.0.66",
-    "@os-design-mobile/button": "^1.0.49",
-    "@os-design-mobile/icons": "^1.0.47",
-    "@os-design-mobile/image": "^1.0.33",
-    "@os-design-mobile/text": "^1.0.45",
-    "@os-design-mobile/theming": "^1.0.33",
-    "@os-design/omit-emotion-props": "^1.0.11",
-    "@os-design/use-forwarded-state": "^1.0.13"
+    "@os-design-mobile/action-menu": "^1.0.68",
+    "@os-design-mobile/button": "^1.0.51",
+    "@os-design-mobile/icons": "^1.0.49",
+    "@os-design-mobile/image": "^1.0.35",
+    "@os-design-mobile/text": "^1.0.47",
+    "@os-design-mobile/theming": "^1.0.35",
+    "@os-design/omit-emotion-props": "^1.0.13",
+    "@os-design/use-forwarded-state": "^1.0.15"
   },
   "peerDependencies": {
     "@emotion/native": ">=11",
@@ -39,5 +47,5 @@
     "react-native-safe-area-context": ">=3",
     "react-native-svg": ">=12"
   },
-  "gitHead": "4cac95fe2f5cd6dc74885a83b43a730008e20721"
+  "gitHead": "ea2e9015ca3ac20795b3fc1303df9016e0c868db"
 }

package/src/@types/emotion.d.ts

@@ -0,0 +1,7 @@
+import '@emotion/react';
+import { Theme as BaseTheme } from '@os-design-mobile/theming';
+
+declare module '@emotion/react' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface Theme extends BaseTheme {}
+}

package/src/index.tsx

@@ -0,0 +1,294 @@
+import React, { forwardRef, useCallback, useMemo, useState } from 'react';
+import { View, ViewProps } from 'react-native';
+import { RectButton, RectButtonProps } from 'react-native-gesture-handler';
+import ActionMenu, { MenuItem } from '@os-design-mobile/action-menu';
+import { Picture, Camera, Delete } from '@os-design-mobile/icons';
+import {
+  launchImageLibrary,
+  launchCamera,
+  Asset,
+  ImagePickerResponse,
+} from 'react-native-image-picker';
+import Text from '@os-design-mobile/text';
+import Image from '@os-design-mobile/image';
+import useForwardedState from '@os-design/use-forwarded-state';
+import styled from '@emotion/native';
+import omitEmotionProps from '@os-design/omit-emotion-props';
+import { clr, ThemeOverrider, useTheme } from '@os-design-mobile/theming';
+import Button from '@os-design-mobile/button';
+import {
+  CameraOptions,
+  ImageLibraryOptions,
+} from 'react-native-image-picker/src/types';
+import defaultLocale, { ImageUploadLocale } from './utils/defaultLocale';
+
+export interface ImageUploadProps extends RectButtonProps {
+  /**
+   * The url of the image.
+   * @default undefined
+   */
+  url?: string;
+  /**
+   * The locale of the component.
+   * @default undefined
+   */
+  locale?: ImageUploadLocale;
+  /**
+   * The image library options.
+   * @default undefined
+   */
+  imageLibraryOptions?: Pick<
+    ImageLibraryOptions,
+    'maxWidth' | 'maxHeight' | 'quality'
+  >;
+  /**
+   * The camera options.
+   * @default undefined
+   */
+  cameraOptions?: Pick<
+    CameraOptions,
+    'maxWidth' | 'maxHeight' | 'quality' | 'saveToPhotos' | 'cameraType'
+  >;
+  /**
+   * The selected local file, or null if the image is marked as deleted.
+   * @default undefined
+   */
+  value?: Asset | null;
+  /**
+   * The default value.
+   * @default undefined
+   */
+  defaultValue?: Asset | null;
+  /**
+   * The change event handler.
+   * @default undefined
+   */
+  onChange?: (value: Asset | null) => void;
+}
+
+const overlayHasImageStyles = (p) =>
+  p.hasImage
+    ? {
+        backgroundColor: clr([0, 0, 0, p.theme.imageUploadOverlayOpacity]),
+        borderRadius: p.theme.borderRadius * p.theme.fontSize,
+      }
+    : {};
+
+interface OverlayProps {
+  hasImage: boolean;
+}
+const Overlay = styled(
+  View,
+  omitEmotionProps('hasImage')
+)<OverlayProps>((p) => ({
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  justifyContent: 'center',
+  alignItems: 'center',
+  padding: p.theme.imageUploadOverlayPadding * p.theme.fontSize,
+  ...overlayHasImageStyles(p),
+}));
+
+const StyledRectButton = styled(RectButton)((p) => ({
+  width: '100%',
+  maxWidth: p.theme.imageUploadMaxWidth * p.theme.fontSize,
+  minHeight: p.theme.imageUploadMinHeight * p.theme.fontSize,
+  borderRadius: p.theme.borderRadius * p.theme.fontSize,
+}));
+
+const notHasImageStyles = (p): Partial<ViewProps> =>
+  !p.hasImage
+    ? ({
+        backgroundColor: clr(p.theme.imageUploadNoImageColorBg),
+        borderWidth: 2,
+        borderColor: clr(p.theme.imageUploadNoImageColorBorder),
+        borderStyle: 'dashed',
+      } as Partial<ViewProps>)
+    : {};
+
+interface ContainerProps {
+  hasImage: boolean;
+}
+
+const Container = styled(
+  View,
+  omitEmotionProps('hasImage')
+)<ContainerProps>((p) => ({
+  minHeight: p.theme.imageUploadMinHeight * p.theme.fontSize,
+  borderRadius: p.theme.borderRadius * p.theme.fontSize,
+  ...notHasImageStyles(p),
+}));
+
+const Content = styled.View({
+  flex: 1,
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+const Title = styled(Text)((p) => ({
+  marginTop: 0.5 * p.theme.fontSize,
+  textAlign: 'center',
+}));
+
+const StyledImage = styled(Image)({
+  resizeMode: 'cover',
+  aspectRatio: 1,
+});
+
+const DeleteButtonContainer = styled.View((p) => ({
+  position: 'absolute',
+  top: 0.5 * p.theme.fontSize,
+  right: 0.5 * p.theme.fontSize,
+}));
+
+/**
+ * The component to upload an image.
+ */
+const ImageUpload = forwardRef<RectButton, ImageUploadProps>(
+  (
+    {
+      url,
+      locale = defaultLocale,
+      imageLibraryOptions = {},
+      cameraOptions = {},
+      value,
+      defaultValue,
+      onChange,
+      onPress = () => {},
+      ...rest
+    },
+    ref
+  ) => {
+    const [forwardedValue, setForwardedValue] = useForwardedState({
+      value,
+      defaultValue,
+      onChange,
+    });
+
+    const [modalVisible, setModalVisible] = useState(false);
+    const { theme } = useTheme();
+
+    const chooseFromPhotoLibraryHandler = useCallback(async () => {
+      try {
+        const { assets } = await new Promise<ImagePickerResponse>((resolve) => {
+          launchImageLibrary(
+            {
+              mediaType: 'photo',
+              ...imageLibraryOptions,
+            },
+            resolve
+          );
+        });
+        setModalVisible(false);
+        if (assets) setForwardedValue(assets[0]);
+      } catch (e) {} // eslint-disable-line no-empty
+    }, [imageLibraryOptions, setForwardedValue]);
+
+    const takePhotoHandler = useCallback(async () => {
+      try {
+        const { assets } = await new Promise<ImagePickerResponse>((resolve) => {
+          launchCamera(
+            {
+              mediaType: 'photo',
+              ...cameraOptions,
+            },
+            resolve
+          );
+        });
+        setModalVisible(false);
+        if (assets) setForwardedValue(assets[0]);
+      } catch (e) {} // eslint-disable-line no-empty
+    }, [cameraOptions, setForwardedValue]);
+
+    const source = useMemo(() => {
+      if (forwardedValue === null) return null;
+      if (forwardedValue) return forwardedValue.uri; // If the user select an image
+      if (url) return url; // If the image already exists
+      return null;
+    }, [forwardedValue, url]);
+
+    const hasImage = useMemo(() => !!source, [source]);
+
+    return (
+      <>
+        <ThemeOverrider overrides={hasImage ? { colorText: [0, 0, 100] } : {}}>
+          <StyledRectButton
+            onPress={(e) => {
+              setModalVisible(true);
+              onPress(e);
+            }}
+            underlayColor={
+              hasImage
+                ? clr([0, 0, 100])
+                : clr(theme.imageUploadNoImageBgHighlight)
+            }
+            rippleColor={
+              hasImage
+                ? clr([0, 0, 100])
+                : clr(theme.imageUploadNoImageBgRipple)
+            }
+            activeOpacity={hasImage ? 0.8 : 1}
+            {...rest}
+            ref={ref}
+          >
+            <Container
+              hasImage={hasImage}
+              accessible
+              accessibilityRole='imagebutton'
+            >
+              {source && <StyledImage source={{ uri: source }} />}
+
+              <Overlay hasImage={hasImage}>
+                <Content>
+                  <ThemeOverrider
+                    overrides={(t) => ({ fontSize: 2.5 * t.fontSize })}
+                  >
+                    <Picture />
+                  </ThemeOverrider>
+                  <Title>{locale?.title}</Title>
+                </Content>
+
+                {hasImage && (
+                  <ThemeOverrider
+                    overrides={{
+                      buttonGhostColorText: [0, 0, 100],
+                      buttonGhostColorBgHighlight: [0, 0, 100, 0.1],
+                    }}
+                  >
+                    <DeleteButtonContainer>
+                      <Button
+                        type='ghost'
+                        onPress={() => setForwardedValue(null)}
+                      >
+                        <Delete />
+                      </Button>
+                    </DeleteButtonContainer>
+                  </ThemeOverrider>
+                )}
+              </Overlay>
+            </Container>
+          </StyledRectButton>
+        </ThemeOverrider>
+
+        <ActionMenu
+          visible={modalVisible}
+          onClose={() => setModalVisible(false)}
+        >
+          <MenuItem left={<Picture />} onPress={chooseFromPhotoLibraryHandler}>
+            {locale?.chooseFromLibrary}
+          </MenuItem>
+          <MenuItem left={<Camera />} onPress={takePhotoHandler}>
+            {locale?.takePhoto}
+          </MenuItem>
+        </ActionMenu>
+      </>
+    );
+  }
+);
+
+ImageUpload.displayName = 'ImageUpload';
+
+export default ImageUpload;

package/src/utils/defaultLocale.ts

@@ -0,0 +1,13 @@
+export interface ImageUploadLocale {
+  title: string;
+  chooseFromLibrary: string;
+  takePhoto: string;
+}
+
+const defaultLocale: ImageUploadLocale = {
+  title: 'Click here to choose an image',
+  chooseFromLibrary: 'Choose from Library',
+  takePhoto: 'Take a Photo',
+};
+
+export default defaultLocale;