@momo-kits/uploader 0.77.5-beta.1

package/index.tsx

@@ -0,0 +1,86 @@
+import React, {FC, useContext} from 'react';
+import {
+  ActivityIndicator,
+  ScrollView,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {UploaderProps, UploadImage} from './types';
+import {ApplicationContext, Icon, Image, Text} from '@momo-kits/foundation';
+import styles from './styles';
+
+const Uploader: FC<UploaderProps> = ({
+  images = [],
+  onAdd,
+  onCancel,
+  onPressImage,
+  numberOfImages = 1,
+  disabled,
+  width = 64,
+  height = 64,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const renderPicker = () => {
+    let mainColor = theme.colors.text.hint;
+    let borderColor = theme.colors.border.default;
+
+    if (disabled) {
+      mainColor = theme.colors.text.disable;
+      borderColor = theme.colors.border.disable;
+    }
+    return (
+      <TouchableOpacity
+        onPress={onAdd}
+        disabled={disabled}
+        style={[styles.picker, {borderColor, width, height}]}>
+        <Icon source={'16_navigation_plus'} color={mainColor} />
+        <Text typography={'description_xs'} color={mainColor}>
+          Thêm hình
+        </Text>
+      </TouchableOpacity>
+    );
+  };
+
+  const renderLoadingLayer = () => {
+    return (
+      <View style={styles.loading}>
+        <ActivityIndicator color={theme.colors.primary} />
+      </View>
+    );
+  };
+  const renderImageItem = (image: UploadImage, index: number) => {
+    const {uri, loading} = image;
+    return (
+      <TouchableOpacity
+        onPress={() => onPressImage?.(image, index)}
+        style={styles.imageWrapper}>
+        <Image source={{uri}} style={[styles.image, {width, height}]} />
+        {onCancel && !loading && (
+          <TouchableOpacity
+            onPress={() => onCancel(image, index)}
+            style={styles.cancelIcon}>
+            <Icon size={16} source={'navigation_close_circle_full'} />
+          </TouchableOpacity>
+        )}
+        {loading && renderLoadingLayer()}
+      </TouchableOpacity>
+    );
+  };
+
+  const shouldShowPicker = images.length < numberOfImages;
+
+  return (
+    <View style={styles.uploader}>
+      {shouldShowPicker && renderPicker()}
+      <ScrollView showsHorizontalScrollIndicator={false} horizontal>
+        {images?.map((image, index) => {
+          return renderImageItem(image, index);
+        })}
+      </ScrollView>
+    </View>
+  );
+};
+
+export default Uploader;
+
+export type {UploadImage};

package/package.json

@@ -0,0 +1,15 @@
+{
+    "name": "@momo-kits/uploader",
+    "version": "0.77.5-beta.01",
+    "private": false,
+    "main": "index.tsx",
+    "peerDependencies": {
+        "@momo-kits/foundation": "latest",
+        "react": "16.9.0",
+        "react-native": ">=0.55",
+        "prop-types": "^15.7.2"
+    },
+    "devDependencies": {},
+    "license": "MoMo",
+    "dependencies": {}
+}

package/publish.sh

@@ -0,0 +1,28 @@
+#!/bin/bash
+rm -rf dist
+mkdir dist
+
+cp . ./dist
+
+# GET VERSION from mck_package.json
+VERSIONSTRING=( v$(jq .version package.json) )
+VERSION=(${VERSIONSTRING//[\"]/})
+echo VERSION: $VERSION
+
+rsync -r --verbose --exclude '*.mdx' --exclude '*Demo.js'  --exclude 'props-type.js' --exclude 'prop-types.js' ./* dist
+
+# #babel component to dist
+#babel ./dist -d dist --copy-files
+
+#copy option
+#cp -r ./src/ dist
+
+
+#npm login
+#publish dist to npm
+cd dist
+npm publish --tag beta --access=public
+cd ..
+rm -rf dist
+
+##curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/bank new version release: '*"$VERSION"*' `https://www.npmjs.com/package/@momo-kits/avatar`"}'

package/styles.ts

@@ -0,0 +1,30 @@
+import {StyleSheet} from 'react-native';
+import {Radius, Spacing} from '@momo-kits/foundation';
+
+export default StyleSheet.create({
+  picker: {
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: Radius.XS,
+    borderStyle: 'dashed',
+  },
+  image: {
+    borderRadius: Radius.XS,
+  },
+  uploader: {
+    flexDirection: 'row',
+  },
+  cancelIcon: {position: 'absolute', top: Spacing.XXS, right: Spacing.XXS},
+  imageWrapper: {marginLeft: Spacing.S},
+  loading: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: 'rgba(255,255,255,0.4)',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/types.ts

@@ -0,0 +1,69 @@
+/**
+ * Represents an individual image being uploaded, containing details about its source and loading state.
+ */
+export type UploadImage = {
+  /**
+   * Optional. The URI (Uniform Resource Identifier) pointing to the image's location. This can be a web URL,
+   * local file path, or any other valid image source identifier.
+   */
+  uri?: string;
+
+  /**
+   * Optional. Indicates whether the image is currently being uploaded.
+   * If `true`, the image is in the process of being uploaded. Defaults to `false` if not provided.
+   */
+  loading?: boolean;
+};
+
+/**
+ * Properties for the Uploader component, designed for handling multiple image uploads.
+ */
+export type UploaderProps = {
+  /**
+   * An array of `UploadImage` objects, each representing an image to be uploaded.
+   */
+  images: UploadImage[];
+
+  /**
+   * Optional. Specifies the maximum number of images that can be uploaded.
+   * If not provided, there is no limit by default.
+   */
+  numberOfImages?: number;
+
+  /**
+   * Optional. If `true`, uploading new images is disabled, and any associated upload controls are not interactive.
+   * Defaults to `false` if not provided.
+   */
+  disabled?: boolean;
+
+  /**
+   * Optional. A callback function that is called when the user initiates the addition of a new image.
+   * Typically used to trigger the file selection dialog.
+   */
+  onAdd?: () => void;
+
+  /**
+   * Optional. A callback function invoked when the user cancels an ongoing upload.
+   * Receives the `UploadImage` object being canceled and its index in the images array as parameters.
+   */
+  onCancel?: (image: UploadImage, index: number) => void;
+
+  /**
+   * Optional. A callback function invoked when the user clicks or taps on an uploaded image.
+   * This can be used to open a preview overlay, for example.
+   * Receives the `UploadImage` object being interacted with and its index in the images array as parameters.
+   */
+  onPressImage?: (image: UploadImage, index: number) => void;
+
+  /**
+   * Optional. Specifies the width of the Uploader component's bounding box,
+   * typically in pixels (px). If not provided, the width will adapt based on container or content.
+   */
+  width?: number;
+
+  /**
+   * Optional. Specifies the height of the Uploader component's bounding box,
+   * typically in pixels (px). If not provided, the height will adapt based on container or content.
+   */
+  height?: number;
+};