@sendoutcards/quantum-design-ui 1.7.82 → 1.7.83

package/dist/index.es.js

@@ -22767,12 +22767,10 @@ var isDragEventType = function (event) {
   return 'dataTransfer' in event;
 };
 
-var ImageUploader = function (props) {
-  var _a, _b;
-
-  var _c = React.useState(null),
-      error = _c[0],
-      setError = _c[1];
+var useFileUpload = function (props) {
+  var _a = React.useState(null),
+      error = _a[0],
+      setError = _a[1];
 
   var onUpload = props.onUpload;
   var onDrop = useCallback(function (acceptedFiles, rejectedFiles, event) {
@@ -22803,19 +22801,34 @@ var ImageUploader = function (props) {
   var onDragEnter = useCallback(function () {
     setError(null);
   }, []);
-
-  var _d = useDropzone({
+  var dropzone = useDropzone({
     onDrop: onDrop,
     accept: parseAcceptedFiles(props.acceptedFiles),
-    multiple: props.hasMultiupload,
+    multiple: props.hasMultiUpload,
     maxFiles: props.maxAcceptedFiles,
     maxSize: props.maxFileSize,
     onDragEnter: onDragEnter
-  }),
-      getRootProps = _d.getRootProps,
-      getInputProps = _d.getInputProps,
-      isDragActive = _d.isDragActive;
+  });
+  return [__assign({
+    onDragEnter: onDragEnter
+  }, dropzone), error];
+};
+
+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",
@@ -22856,6 +22869,9 @@ 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,
@@ -22877,24 +22893,26 @@ 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,
-      _d = _a.width,
-      width = _d === void 0 ? 264 : _d;
+      _c = _a.width,
+      width = _c === void 0 ? 264 : _c,
+      hookProps = __rest(_a, ["title", "onFinished", "x", "y", "isOpen", "userImages", "hasMore", "loadMore", "endMessage", "dataLength", "width"]);
 
-  var _e = useState(false),
-      shouldShowImageGrid = _e[0],
-      setShouldShowImageGrid = _e[1];
+  var _d = useState(false),
+      shouldShowImageGrid = _d[0],
+      setShouldShowImageGrid = _d[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
@@ -23003,11 +23021,7 @@ var ImageUploadWidget = function (_a) {
         url: image.url
       }
     })));
-  }))))) : jsx(ImageUploader, {
-    onUpload: onUpload,
-    acceptedFiles: ['gif', 'jpeg', 'jpg', 'png'],
-    hasMultiupload: hasMultiUpload
-  })), jsx(HStack, {
+  }))))) : jsx(ImageUploader, hookProps)), jsx(HStack, {
     outset: "x1",
     justify: "center",
     gap: "x1"
@@ -23015,13 +23029,22 @@ var ImageUploadWidget = function (_a) {
     width: "120px"
   }, jsx(Button, {
     onClick: function () {
-      return setShouldShowImageGrid(false);
+      var _a;
+
+      setShouldShowImageGrid(false);
+
+      if (inputRef.current) {
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+      }
     },
     fullWidth: true,
     size: "small",
     type: "smoke",
     title: "Upload..."
-  })), jsx(Div, {
+  }), jsx("input", _extends({}, getInputProps(), {
+    ref: inputRef,
+    onClick: onDragEnter
+  }))), jsx(Div, {
     width: "120px"
   }, jsx(Button, {
     onClick: function () {

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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,32 @@
+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 {};

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

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { AcceptedFiles, RejectedFiles } from '../imageUploader/imageUploader';
+import { UseFileUploadProps } from "../../hooks/useFileUpload";
 export declare type UserImage = {
     url: string;
     onClick: () => void;
@@ -7,15 +7,8 @@ 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;
@@ -24,5 +17,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,20 +1,8 @@
 /// <reference types="react" />
-import { FileRejection } from 'react-dropzone';
 import { BackgroundColor } from "../../helpers/hoc-types/hocBaseUnion";
-declare type AcceptedFileType = 'jpg' | 'png' | 'gif' | 'jpeg';
+import { UseFileUploadProps } from "../../hooks/useFileUpload";
 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;
-};
-export declare type AcceptedFiles = File[];
-export declare type RejectedFiles = FileRejection[];
+} & UseFileUploadProps;
 export declare const ImageUploader: (props: ImageUploaderProps) => JSX.Element;
-export {};

package/package.json

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