sales-frontend-components 0.0.39 → 0.0.41

package/dist/camera/camera.module.scss

@@ -119,6 +119,7 @@
 }
 
 .add-photo-item {
+  background-color: colors(background-200);
   .add-photo-button {
     position: relative;
     display: flex;
@@ -146,6 +147,10 @@
       height: 40px;
     }
   }
+
+  span {
+    @include apply-typography(subtitle3);
+  }
 }
 
 .add-photo-button-single {

package/dist/index.cjs.js

@@ -2,8 +2,8 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var reactTable = require('@tanstack/react-table');
-var styles = require('./data-table/data-table.module.scss');
 var salesFrontendDesignSystem = require('sales-frontend-design-system');
+var styles = require('./data-table/data-table.module.scss');
 var React = require('react');
 var reactHookForm = require('react-hook-form');
 var styles$1 = require('./form/form-signautre/form-signature.module.scss');
@@ -326,9 +326,13 @@ const FormSignature = ({
   const [currentStrokeLength, setCurrentStrokeLength] = React.useState(0);
   React.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";
@@ -348,7 +352,9 @@ const FormSignature = ({
   }, [isDrawing]);
   const getCanvasCoordinates = React.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;
@@ -363,9 +369,13 @@ const FormSignature = ({
   const startDrawing = React.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);
@@ -379,11 +389,17 @@ const FormSignature = ({
   );
   const draw = React.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) {
@@ -413,9 +429,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 });
@@ -433,9 +453,13 @@ const FormSignature = ({
   }, [isDrawing]);
   const clearSignature = React.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("");
@@ -493,7 +517,9 @@ const FormSignature = ({
     };
   }, [signatureData, isEmpty, totalLineLength, strokeLengths]);
   const handleSubmit = React.useCallback(() => {
-    if (!validateForm()) return;
+    if (!validateForm()) {
+      return;
+    }
     const data = getSignatureDataObject();
     if (data) {
       console.log("\uC81C\uCD9C\uB41C \uB370\uC774\uD130:", data);
@@ -505,7 +531,9 @@ const FormSignature = ({
     onReset?.();
   }, [clearSignature, onReset]);
   const handleRecentSignatureLoad = React.useCallback(async () => {
-    if (!onRecentSignatureLoad) return;
+    if (!onRecentSignatureLoad) {
+      return;
+    }
     try {
       setIsLoadingSignature(true);
       const loadedSignature = await onRecentSignatureLoad();
@@ -642,10 +670,16 @@ const useFormSignature = ({ onSubmit, onError, onClear, minLength = 100 } = {})
   }, []);
   const isValid = React.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 = React.useCallback(() => {
@@ -722,7 +756,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();
   };
@@ -733,7 +774,7 @@ function Attachement({ photos, onAddPhoto, onRemovePhoto, show, type = "multiple
     if (photos.length === 0) {
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("single-photo-item", "add-photo-item"), children: /* @__PURE__ */ jsxRuntime.jsxs("button", { className: cx("add-photo-button-single"), onClick: handleAddPhoto, children: [
         /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Icon, { name: "illust/camera" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\uC0AC\uC9C4 \uCCA8\uBD80\uD558\uAE30" })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: buttonText || "\uC0AC\uC9C4 \uCCA8\uBD80\uD558\uAE30" })
       ] }) });
     }
     return photos.map((photo) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("single-photo-item"), children: [
@@ -748,7 +789,7 @@ function Attachement({ photos, onAddPhoto, onRemovePhoto, show, type = "multiple
       gridItems.push(
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("photo-item", "add-photo-item"), children: /* @__PURE__ */ jsxRuntime.jsxs("button", { className: cx("add-photo-button"), onClick: handleAddPhoto, children: [
           /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Icon, { name: "illust/camera" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\uCCA8\uBD80\uD558\uAE30" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: buttonText || "\uCCA8\uBD80\uD558\uAE30" }),
           /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx("photo-count"), children: [
             "(",
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx("photo-count-number"), children: photos.length }),
@@ -831,7 +872,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);
           },
@@ -869,7 +910,8 @@ function useCamera({
   cameraOnly,
   onDelete,
   show,
-  type = "multiple"
+  type = "multiple",
+  buttonText
 } = {}) {
   const [attachedPhotos, setAttachedPhotos] = React.useState([]);
   const findImage = (imageId) => {
@@ -884,7 +926,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) {
@@ -894,7 +936,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);
         }
       }
@@ -908,14 +954,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 = React.useCallback(() => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Attachement, { show: true, onAddPhoto: onClick, onRemovePhoto: deleteImage, photos: attachedPhotos, type });
-  }, [attachedPhotos, onClick, deleteImage, show]);
+  const CameraComponent = () => /* @__PURE__ */ jsxRuntime.jsx(
+    Attachment,
+    {
+      show: !!show,
+      onAddPhoto: onClick,
+      onRemovePhoto: deleteImage,
+      photos: attachedPhotos,
+      type,
+      buttonText
+    }
+  );
   React.useEffect(() => {
     return () => {
       attachedPhotos.forEach((image) => {
@@ -932,7 +986,7 @@ function useCamera({
   };
 }
 
-exports.Attachement = Attachement;
+exports.Attachment = Attachment;
 exports.DataTable = DataTable;
 exports.FormDatePicker = FormDatePicker;
 exports.FormSegmentGroup = FormSegmentGroup;