sales-frontend-components 0.0.39 → 0.0.41

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { flexRender, useReactTable, getSortedRowModel, getCoreRowModel, getPaginationRowModel } from '@tanstack/react-table';
-import styles from './data-table/data-table.module.scss';
 import { Table, DatePicker, SegmentGroup, FormField, Button, Icon } from 'sales-frontend-design-system';
+import styles from './data-table/data-table.module.scss';
 import React, { useState, useRef, useEffect, useCallback, useImperativeHandle } from 'react';
 import { useController } from 'react-hook-form';
 import styles$1 from './form/form-signautre/form-signature.module.scss';
@@ -324,9 +324,13 @@ const FormSignature = ({
   const [currentStrokeLength, setCurrentStrokeLength] = useState(0);
   useEffect(() => {
     const canvas = canvasRef.current;
-    if (!canvas) return;
+    if (!canvas) {
+      return;
+    }
     const ctx = canvas.getContext("2d");
-    if (!ctx) return;
+    if (!ctx) {
+      return;
+    }
     ctx.strokeStyle = "#000000";
     ctx.lineWidth = Math.max(1, canvasWidth / 400);
     ctx.lineCap = "round";
@@ -346,7 +350,9 @@ const FormSignature = ({
   }, [isDrawing]);
   const getCanvasCoordinates = useCallback((e) => {
     const canvas = canvasRef.current;
-    if (!canvas) return { x: 0, y: 0 };
+    if (!canvas) {
+      return { x: 0, y: 0 };
+    }
     const rect = canvas.getBoundingClientRect();
     const scaleX = canvas.width / rect.width;
     const scaleY = canvas.height / rect.height;
@@ -361,9 +367,13 @@ const FormSignature = ({
   const startDrawing = useCallback(
     (e) => {
       const canvas = canvasRef.current;
-      if (!canvas) return;
+      if (!canvas) {
+        return;
+      }
       const ctx = canvas.getContext("2d");
-      if (!ctx) return;
+      if (!ctx) {
+        return;
+      }
       const { x, y } = getCanvasCoordinates(e);
       setIsDrawing(true);
       setIsMousePressed(true);
@@ -377,11 +387,17 @@ const FormSignature = ({
   );
   const draw = useCallback(
     (e) => {
-      if (!isDrawing) return;
+      if (!isDrawing) {
+        return;
+      }
       const canvas = canvasRef.current;
-      if (!canvas) return;
+      if (!canvas) {
+        return;
+      }
       const ctx = canvas.getContext("2d");
-      if (!ctx) return;
+      if (!ctx) {
+        return;
+      }
       const { x, y } = getCanvasCoordinates(e);
       const currentPoint = { x, y };
       if (lastPoint) {
@@ -411,9 +427,13 @@ const FormSignature = ({
     (e) => {
       if (isMousePressed && !isDrawing) {
         const canvas = canvasRef.current;
-        if (!canvas) return;
+        if (!canvas) {
+          return;
+        }
         const ctx = canvas.getContext("2d");
-        if (!ctx) return;
+        if (!ctx) {
+          return;
+        }
         const { x, y } = getCanvasCoordinates(e);
         setIsDrawing(true);
         setLastPoint({ x, y });
@@ -431,9 +451,13 @@ const FormSignature = ({
   }, [isDrawing]);
   const clearSignature = useCallback(() => {
     const canvas = canvasRef.current;
-    if (!canvas) return;
+    if (!canvas) {
+      return;
+    }
     const ctx = canvas.getContext("2d");
-    if (!ctx) return;
+    if (!ctx) {
+      return;
+    }
     ctx.clearRect(0, 0, canvasWidth, canvasHeight);
     setIsEmpty(true);
     setSignatureData("");
@@ -491,7 +515,9 @@ const FormSignature = ({
     };
   }, [signatureData, isEmpty, totalLineLength, strokeLengths]);
   const handleSubmit = useCallback(() => {
-    if (!validateForm()) return;
+    if (!validateForm()) {
+      return;
+    }
     const data = getSignatureDataObject();
     if (data) {
       console.log("\uC81C\uCD9C\uB41C \uB370\uC774\uD130:", data);
@@ -503,7 +529,9 @@ const FormSignature = ({
     onReset?.();
   }, [clearSignature, onReset]);
   const handleRecentSignatureLoad = useCallback(async () => {
-    if (!onRecentSignatureLoad) return;
+    if (!onRecentSignatureLoad) {
+      return;
+    }
     try {
       setIsLoadingSignature(true);
       const loadedSignature = await onRecentSignatureLoad();
@@ -640,10 +668,16 @@ const useFormSignature = ({ onSubmit, onError, onClear, minLength = 100 } = {})
   }, []);
   const isValid = useCallback(() => {
     const basicValid = signatureRef.current?.isValid() ?? false;
-    if (!basicValid) return false;
+    if (!basicValid) {
+      return false;
+    }
     const data = signatureRef.current?.getSignatureData();
-    if (!data) return false;
-    if (isLoadedFromRecent) return true;
+    if (!data) {
+      return false;
+    }
+    if (isLoadedFromRecent) {
+      return true;
+    }
     return data.totalLineLength >= minLength;
   }, [minLength, isLoadedFromRecent]);
   const getSignatureData = useCallback(() => {
@@ -720,7 +754,14 @@ const StepIndicator = ({
 };
 
 const cx = classNames.bind(styles$3);
-function Attachement({ photos, onAddPhoto, onRemovePhoto, show, type = "multiple" }) {
+function Attachment({
+  photos,
+  onAddPhoto,
+  onRemovePhoto,
+  show,
+  type = "multiple",
+  buttonText
+}) {
   const handleAddPhoto = () => {
     onAddPhoto();
   };
@@ -731,7 +772,7 @@ function Attachement({ photos, onAddPhoto, onRemovePhoto, show, type = "multiple
     if (photos.length === 0) {
       return /* @__PURE__ */ jsx("div", { className: cx("single-photo-item", "add-photo-item"), children: /* @__PURE__ */ jsxs("button", { className: cx("add-photo-button-single"), onClick: handleAddPhoto, children: [
         /* @__PURE__ */ jsx(Icon, { name: "illust/camera" }),
-        /* @__PURE__ */ jsx("span", { children: "\uC0AC\uC9C4 \uCCA8\uBD80\uD558\uAE30" })
+        /* @__PURE__ */ jsx("span", { children: buttonText || "\uC0AC\uC9C4 \uCCA8\uBD80\uD558\uAE30" })
       ] }) });
     }
     return photos.map((photo) => /* @__PURE__ */ jsxs("div", { className: cx("single-photo-item"), children: [
@@ -746,7 +787,7 @@ function Attachement({ photos, onAddPhoto, onRemovePhoto, show, type = "multiple
       gridItems.push(
         /* @__PURE__ */ jsx("div", { className: cx("photo-item", "add-photo-item"), children: /* @__PURE__ */ jsxs("button", { className: cx("add-photo-button"), onClick: handleAddPhoto, children: [
           /* @__PURE__ */ jsx(Icon, { name: "illust/camera" }),
-          /* @__PURE__ */ jsx("span", { children: "\uCCA8\uBD80\uD558\uAE30" }),
+          /* @__PURE__ */ jsx("span", { children: buttonText || "\uCCA8\uBD80\uD558\uAE30" }),
           /* @__PURE__ */ jsxs("span", { className: cx("photo-count"), children: [
             "(",
             /* @__PURE__ */ jsx("span", { className: cx("photo-count-number"), children: photos.length }),
@@ -829,7 +870,7 @@ function resize(image, options = { ext: "jpeg", filesize: maxImageSize }) {
               return;
             }
             const mimeType = ext === "png" ? "image/png" : "image/jpeg";
-            const fileName = image.name ? image.name.replace(/\.[^/.]+$/, "") + "." + ext : "resized." + ext;
+            const fileName = image.name ? `${image.name.replace(/\.[^/.]+$/, "")}.${ext}` : `resized.${ext}`;
             const resizedFile = new File([blob], fileName, { type: mimeType });
             resolve(resizedFile);
           },
@@ -867,7 +908,8 @@ function useCamera({
   cameraOnly,
   onDelete,
   show,
-  type = "multiple"
+  type = "multiple",
+  buttonText
 } = {}) {
   const [attachedPhotos, setAttachedPhotos] = useState([]);
   const findImage = (imageId) => {
@@ -882,7 +924,7 @@ function useCamera({
     }
     input.addEventListener("change", async (event) => {
       const target = event.target;
-      const files = target.files;
+      const { files } = target;
       if (files && files.length > 0) {
         const file = files[0];
         if (file) {
@@ -892,7 +934,11 @@ function useCamera({
             src: URL.createObjectURL(resizedFile),
             name: `\uC11C\uB958\uC0AC\uC9C4_${attachedPhotos.length + 1}`
           };
-          setAttachedPhotos([...attachedPhotos, newPhoto]);
+          if (type === "single") {
+            setAttachedPhotos([newPhoto]);
+          } else {
+            setAttachedPhotos([...attachedPhotos, newPhoto]);
+          }
           onChange && onChange(file);
         }
       }
@@ -906,14 +952,22 @@ function useCamera({
     const imageIndex = attachedPhotos.findIndex((image) => image.id === imageId);
     if (imageIndex > -1) {
       const item = attachedPhotos.splice(imageIndex, 1);
-      URL.revokeObjectURL(item[0].src);
+      item[0] && URL.revokeObjectURL(item[0].src);
       setAttachedPhotos([...attachedPhotos]);
       onDelete && onDelete(imageId);
     }
   };
-  const CameraComponent = useCallback(() => {
-    return /* @__PURE__ */ jsx(Attachement, { show: true, onAddPhoto: onClick, onRemovePhoto: deleteImage, photos: attachedPhotos, type });
-  }, [attachedPhotos, onClick, deleteImage, show]);
+  const CameraComponent = () => /* @__PURE__ */ jsx(
+    Attachment,
+    {
+      show: !!show,
+      onAddPhoto: onClick,
+      onRemovePhoto: deleteImage,
+      photos: attachedPhotos,
+      type,
+      buttonText
+    }
+  );
   useEffect(() => {
     return () => {
       attachedPhotos.forEach((image) => {
@@ -930,5 +984,5 @@ function useCamera({
   };
 }
 
-export { Attachement, DataTable, FormDatePicker, FormSegmentGroup, FormSignature, FormTextField, StepIndicator, resize, useCamera, useFormSignature, useTable };
+export { Attachment, DataTable, FormDatePicker, FormSegmentGroup, FormSignature, FormTextField, StepIndicator, resize, useCamera, useFormSignature, useTable };
 //# sourceMappingURL=index.esm.js.map