@sendoutcards/quantum-design-ui 1.7.83 → 1.7.85

package/dist/index.es.js

@@ -22767,10 +22767,12 @@ var isDragEventType = function (event) {
   return 'dataTransfer' in event;
 };
 
-var useFileUpload = function (props) {
-  var _a = React.useState(null),
-      error = _a[0],
-      setError = _a[1];
+var ImageUploader = function (props) {
+  var _a, _b;
+
+  var _c = React.useState(null),
+      error = _c[0],
+      setError = _c[1];
 
   var onUpload = props.onUpload;
   var onDrop = useCallback(function (acceptedFiles, rejectedFiles, event) {
@@ -22801,34 +22803,19 @@ var useFileUpload = function (props) {
   var onDragEnter = useCallback(function () {
     setError(null);
   }, []);
-  var dropzone = useDropzone({
+
+  var _d = useDropzone({
     onDrop: onDrop,
     accept: parseAcceptedFiles(props.acceptedFiles),
-    multiple: props.hasMultiUpload,
+    multiple: props.hasMultiupload,
     maxFiles: props.maxAcceptedFiles,
     maxSize: props.maxFileSize,
     onDragEnter: onDragEnter
-  });
-  return [__assign({
-    onDragEnter: onDragEnter
-  }, dropzone), error];
-};
+  }),
+      getRootProps = _d.getRootProps,
+      getInputProps = _d.getInputProps,
+      isDragActive = _d.isDragActive;
 
-var ImageUploader = function (props) {
-  var _a, _b;
-
-  props.uploadTitle;
-      props.backgroundColor;
-      var hookProps = __rest(props, ["uploadTitle", "backgroundColor"]);
-
-  var _c = useFileUpload(hookProps),
-      dropzone = _c[0],
-      error = _c[1];
-
-  var isDragActive = dropzone.isDragActive,
-      getRootProps = dropzone.getRootProps,
-      getInputProps = dropzone.getInputProps,
-      onDragEnter = dropzone.onDragEnter;
   return jsx(React.Fragment, null, jsx(Flex, {
     inset: "x1",
     flexWrap: "wrap",
@@ -22869,9 +22856,6 @@ var ImageUploader = function (props) {
   }), jsx(Text, {
     type: "largeBody",
     content: (_b = props.uploadTitle) !== null && _b !== void 0 ? _b : 'Upload Photo'
-  }), jsx(Text, {
-    type: "footnote",
-    content: "Drag and Drop Image Here"
   })))), error && jsx(Text, {
     type: "footnote",
     content: error,
@@ -22893,26 +22877,25 @@ var ImageUploadWidget = function (_a) {
   var _b = _a.title,
       title = _b === void 0 ? 'Image Background' : _b,
       onFinished = _a.onFinished,
+      onUpload = _a.onUpload,
       x = _a.x,
       y = _a.y,
       isOpen = _a.isOpen,
+      _c = _a.hasMultiUpload,
+      hasMultiUpload = _c === void 0 ? false : _c,
       userImages = _a.userImages,
       hasMore = _a.hasMore,
       loadMore = _a.loadMore,
       endMessage = _a.endMessage,
       dataLength = _a.dataLength,
-      _c = _a.width,
-      width = _c === void 0 ? 264 : _c,
-      hookProps = __rest(_a, ["title", "onFinished", "x", "y", "isOpen", "userImages", "hasMore", "loadMore", "endMessage", "dataLength", "width"]);
+      _d = _a.width,
+      width = _d === void 0 ? 264 : _d;
 
-  var _d = useState(false),
-      shouldShowImageGrid = _d[0],
-      setShouldShowImageGrid = _d[1];
+  var _e = useState(false),
+      shouldShowImageGrid = _e[0],
+      setShouldShowImageGrid = _e[1];
 
   var inputRef = useRef(null);
-  var dropzone = useFileUpload(hookProps)[0];
-  var getInputProps = dropzone.getInputProps,
-      onDragEnter = dropzone.onDragEnter;
   return jsx(AnimatePresence, null, isOpen && jsx(Div, {
     initial: {
       opacity: 0
@@ -23021,7 +23004,11 @@ var ImageUploadWidget = function (_a) {
         url: image.url
       }
     })));
-  }))))) : jsx(ImageUploader, hookProps)), jsx(HStack, {
+  }))))) : jsx(ImageUploader, {
+    onUpload: onUpload,
+    acceptedFiles: ['gif', 'jpeg', 'jpg', 'png'],
+    hasMultiupload: hasMultiUpload
+  })), jsx(HStack, {
     outset: "x1",
     justify: "center",
     gap: "x1"
@@ -23041,10 +23028,23 @@ var ImageUploadWidget = function (_a) {
     size: "small",
     type: "smoke",
     title: "Upload..."
-  }), jsx("input", _extends({}, getInputProps(), {
+  }), jsx("input", {
     ref: inputRef,
-    onClick: onDragEnter
-  }))), jsx(Div, {
+    type: "file",
+    accept: "image/*",
+    style: {
+      display: 'none'
+    },
+    onChange: function (e) {
+      var _a, _b;
+
+      var file = (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0];
+      if (file) onUpload({
+        accepted: [file],
+        rejected: []
+      });
+    }
+  })), jsx(Div, {
     width: "120px"
   }, jsx(Button, {
     onClick: function () {

package/dist/src/organisms/imageUploadWidget/imageUploadWidget.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { UseFileUploadProps } from "../../hooks/useFileUpload";
+import { AcceptedFiles, RejectedFiles } from '../imageUploader/imageUploader';
 export declare type UserImage = {
     url: string;
     onClick: () => void;
@@ -7,8 +7,15 @@ export declare type UserImage = {
 };
 export declare type ImageUploadWidgetProps = {
     title: string;
+    maxHeight?: string;
+    onClose: () => void;
     onFinished: () => void;
     isOpen: boolean;
+    onUpload: (files: {
+        accepted: AcceptedFiles;
+        rejected: RejectedFiles;
+    }, fileList?: FileList | null) => void;
+    hasMultiUpload?: boolean;
     userImages?: UserImage[];
     x: number;
     y: number;
@@ -17,5 +24,5 @@ export declare type ImageUploadWidgetProps = {
     hasMore?: boolean;
     endMessage?: string;
     width?: number;
-} & UseFileUploadProps;
+};
 export declare const ImageUploadWidget: FC<ImageUploadWidgetProps>;

package/dist/src/organisms/imageUploader/imageUploader.d.ts

@@ -1,8 +1,20 @@
 /// <reference types="react" />
+import { FileRejection } from 'react-dropzone';
 import { BackgroundColor } from "../../helpers/hoc-types/hocBaseUnion";
-import { UseFileUploadProps } from "../../hooks/useFileUpload";
+declare type AcceptedFileType = 'jpg' | 'png' | 'gif' | 'jpeg';
 export declare type ImageUploaderProps = {
+    onUpload: (files: {
+        accepted: File[];
+        rejected: FileRejection[];
+    }, fileList?: FileList | null) => void;
+    acceptedFiles: AcceptedFileType[];
+    hasMultiupload?: boolean;
+    maxFileSize?: number;
+    maxAcceptedFiles?: number;
     uploadTitle?: string;
     backgroundColor?: BackgroundColor;
-} & UseFileUploadProps;
+};
+export declare type AcceptedFiles = File[];
+export declare type RejectedFiles = FileRejection[];
 export declare const ImageUploader: (props: ImageUploaderProps) => JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendoutcards/quantum-design-ui",
-  "version": "1.7.83",
+  "version": "1.7.85",
   "description": "UI component library for Quantum Design System",
   "module": "dist/index.es.js",
   "jsnext:main": "dist/index.es.js",

package/dist/src/atoms/companion/companion.d.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-import { HOCBaseProps } from "../../helpers/hoc-types/hocBasePropTypes";
-import { HOCMotionProps } from "../../helpers/hoc-types/hocMotionTypes";
-export declare type DivProps = {
-    children?: React.ReactNode;
-    outsideClick?: () => void;
-    clickElementBypass?: string;
-} & HOCBaseProps & HOCMotionProps;
-export declare const Companion: React.ForwardRefExoticComponent<{
-    children?: React.ReactNode;
-    outsideClick?: (() => void) | undefined;
-    clickElementBypass?: string | undefined;
-} & HOCBaseProps & {
-    className?: string | undefined;
-    motionKey?: string | number | undefined;
-    id?: string | undefined;
-} & import("framer-motion").MotionProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/hooks/useFileUpload.d.ts

@@ -1,32 +0,0 @@
-import React from 'react';
-import { DropzoneState, FileRejection } from 'react-dropzone';
-declare type AcceptedFileType = 'jpg' | 'png' | 'gif' | 'jpeg';
-export declare type AcceptedFiles = File[];
-export declare type RejectedFiles = FileRejection[];
-export declare type UseFileUploadProps = {
-    onUpload: (files: {
-        accepted: File[];
-        rejected: FileRejection[];
-    }, fileList?: FileList | null) => void;
-    acceptedFiles: AcceptedFileType[];
-    hasMultiUpload?: boolean;
-    maxFileSize?: number;
-    maxAcceptedFiles?: number;
-};
-export declare const useFileUpload: (props: UseFileUploadProps) => [import("react-dropzone").DropzoneRef & {
-    isFocused: boolean;
-    isDragActive: boolean;
-    isDragAccept: boolean;
-    isDragReject: boolean;
-    isFileDialogActive: boolean;
-    draggedFiles: File[];
-    acceptedFiles: File[];
-    fileRejections: FileRejection[];
-    rootRef: React.RefObject<HTMLElement>;
-    inputRef: React.RefObject<HTMLInputElement>;
-    getRootProps: <T extends import("react-dropzone").DropzoneRootProps>(props?: T | undefined) => T;
-    getInputProps: <T_1 extends import("react-dropzone").DropzoneInputProps>(props?: T_1 | undefined) => T_1;
-} & {
-    onDragEnter: () => void;
-}, string | null];
-export {};