@ncds/ui-admin 1.8.15 → 1.8.17

package/dist/cjs/src/components/forms-and-input/file-input/FileInput.js

@@ -8,17 +8,36 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
+var _useObjectUrl = require("../../../hooks/useObjectUrl");
 var _button = require("../../action/button");
 var _Tag = require("../../feedback-and-status/tag/Tag");
 var _shared = require("../../shared");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Thumbnail next to a file tag.
+ *
+ * Split out so the object URL can live in a hook — hooks cannot be called
+ * from inside the file list's map callback.
+ */
+const FileTagImage = _ref2 => {
+  let {
+    file
+  } = _ref2;
+  const objectUrl = (0, _useObjectUrl.useObjectUrl)(file);
+  if (!objectUrl) return null;
+  return (0, _jsxRuntime.jsx)("img", {
+    className: "ncua-file-input__file-image",
+    src: objectUrl,
+    alt: file.name
+  });
+};
 var FileInputErrorType;
 (function (FileInputErrorType) {
   FileInputErrorType["ALREADY_UPLOADED"] = "ALREADY_UPLOADED";
   FileInputErrorType["EXCEED_MAX_FILE_SIZE"] = "EXCEED_MAX_FILE_SIZE";
   FileInputErrorType["EXCEED_MAX_FILE_COUNT"] = "EXCEED_MAX_FILE_COUNT";
 })(FileInputErrorType || (exports.FileInputErrorType = FileInputErrorType = {}));
-const FileInput = exports.FileInput = /*#__PURE__*/(0, _react.forwardRef)((_ref2, _ref) => {
+const FileInput = exports.FileInput = /*#__PURE__*/(0, _react.forwardRef)((_ref3, _ref) => {
   let {
     size = 'xs',
     accept,
@@ -38,8 +57,9 @@ const FileInput = exports.FileInput = /*#__PURE__*/(0, _react.forwardRef)((_ref2
     isRequired,
     showHelpIcon,
     hintText,
+    showFileTags = true,
     ...props
-  } = _ref2;
+  } = _ref3;
   const fileInputRef = (0, _react.useRef)(null);
   const [internalFiles, setInternalFiles] = (0, _react.useState)([]);
   // Determine if component is controlled or uncontrolled
@@ -115,7 +135,7 @@ const FileInput = exports.FileInput = /*#__PURE__*/(0, _react.forwardRef)((_ref2
     updateFiles(newFiles);
   };
   const renderFileTagList = () => {
-    if (files.length === 0) return null;
+    if (!showFileTags || files.length === 0) return null;
     return (0, _jsxRuntime.jsx)("div", {
       className: "ncua-file-input__file-tags",
       children: files.map((file, index) => (0, _jsxRuntime.jsxs)("div", {
@@ -125,10 +145,8 @@ const FileInput = exports.FileInput = /*#__PURE__*/(0, _react.forwardRef)((_ref2
           size: size === 'xs' ? 'sm' : 'md',
           close: true,
           onButtonClick: () => handleRemoveFile(index)
-        }), file.type.startsWith('image/') && (0, _jsxRuntime.jsx)("img", {
-          className: "ncua-file-input__file-image",
-          src: URL.createObjectURL(file),
-          alt: file.name
+        }), file.type.startsWith('image/') && (0, _jsxRuntime.jsx)(FileTagImage, {
+          file: file
         })]
       }, `${file.name}-${index}`))
     });

package/dist/cjs/src/components/forms-and-input/file-input/__tests__/FileInput.test.js

@@ -0,0 +1,168 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _FileInput = require("../FileInput");
+// @vitest-environment jsdom
+
+const originalCreateObjectURL = URL.createObjectURL;
+const originalRevokeObjectURL = URL.revokeObjectURL;
+let createObjectURL;
+let revokeObjectURL;
+(0, _vitest.beforeEach)(() => {
+  let issued = 0;
+  createObjectURL = _vitest.vi.fn(() => `blob:mock/${++issued}`);
+  revokeObjectURL = _vitest.vi.fn();
+  URL.createObjectURL = createObjectURL;
+  URL.revokeObjectURL = revokeObjectURL;
+});
+(0, _vitest.afterEach)(() => {
+  URL.createObjectURL = originalCreateObjectURL;
+  URL.revokeObjectURL = originalRevokeObjectURL;
+});
+/** 내용은 검증 대상이 아니므로 최소 크기만 채운다 */
+const DUMMY_FILE_BYTES = 4;
+const makeFile = (name, type) => new File([new Uint8Array(DUMMY_FILE_BYTES)], name, {
+  type
+});
+function mountFileInput(files) {
+  let extraProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = (0, _client.createRoot)(container);
+  const render = () => {
+    (0, _testUtils.act)(() => {
+      root.render(/*#__PURE__*/(0, _react.createElement)(_FileInput.FileInput, {
+        value: files,
+        onChange: () => undefined,
+        ...extraProps
+      }));
+    });
+  };
+  render();
+  const unmount = () => {
+    (0, _testUtils.act)(() => {
+      root.unmount();
+    });
+    container.remove();
+  };
+  return {
+    container,
+    render,
+    unmount
+  };
+}
+(0, _vitest.describe)('FileInput — 이미지 썸네일 object URL 해제', () => {
+  (0, _vitest.it)('이미지 파일의 썸네일을 렌더한다', () => {
+    const view = mountFileInput([makeFile('a.jpg', 'image/jpeg')]);
+    const img = view.container.querySelector('.ncua-file-input__file-image');
+    (0, _vitest.expect)(img).not.toBeNull();
+    (0, _vitest.expect)(img?.getAttribute('src')).toBe('blob:mock/1');
+    (0, _vitest.expect)(img?.getAttribute('alt')).toBe('a.jpg');
+    view.unmount();
+  });
+  (0, _vitest.it)('리렌더를 반복해도 파일당 object URL을 한 번만 만든다', () => {
+    const view = mountFileInput([makeFile('a.jpg', 'image/jpeg')]);
+    view.render();
+    view.render();
+    view.render();
+    (0, _vitest.expect)(createObjectURL).toHaveBeenCalledTimes(1);
+    view.unmount();
+  });
+  (0, _vitest.it)('언마운트하면 만들었던 object URL을 해제한다', () => {
+    const view = mountFileInput([makeFile('a.jpg', 'image/jpeg')]);
+    (0, _vitest.expect)(revokeObjectURL).not.toHaveBeenCalled();
+    view.unmount();
+    (0, _vitest.expect)(revokeObjectURL).toHaveBeenCalledTimes(1);
+    (0, _vitest.expect)(revokeObjectURL).toHaveBeenCalledWith('blob:mock/1');
+  });
+  (0, _vitest.it)('이미지가 아닌 파일에는 object URL을 만들지 않는다', () => {
+    const view = mountFileInput([makeFile('doc.pdf', 'application/pdf')]);
+    (0, _vitest.expect)(createObjectURL).not.toHaveBeenCalled();
+    (0, _vitest.expect)(view.container.querySelector('.ncua-file-input__file-image')).toBeNull();
+    view.unmount();
+  });
+  (0, _vitest.it)('이미지가 여러 개면 각각 하나씩만 만들고 언마운트 시 모두 해제한다', () => {
+    const view = mountFileInput([makeFile('a.jpg', 'image/jpeg'), makeFile('b.png', 'image/png')]);
+    (0, _vitest.expect)(createObjectURL).toHaveBeenCalledTimes(2);
+    view.unmount();
+    (0, _vitest.expect)(revokeObjectURL).toHaveBeenCalledTimes(2);
+  });
+});
+/** 숨겨진 file input 에 파일을 넣고 change 를 발생시킨다 */
+function selectFiles(container, files) {
+  const input = container.querySelector('input[type="file"]');
+  if (!input) throw new Error('file input을 찾을 수 없다');
+  Object.defineProperty(input, 'files', {
+    value: files,
+    configurable: true
+  });
+  (0, _testUtils.act)(() => {
+    input.dispatchEvent(new Event('change', {
+      bubbles: true
+    }));
+  });
+}
+(0, _vitest.describe)('FileInput — showFileTags', () => {
+  (0, _vitest.it)('기본값에서는 파일 태그 목록을 렌더한다', () => {
+    const view = mountFileInput([makeFile('doc.pdf', 'application/pdf')]);
+    (0, _vitest.expect)(view.container.querySelector('.ncua-file-input__file-tags')).not.toBeNull();
+    (0, _vitest.expect)(view.container.querySelector('.ncua-tag')).not.toBeNull();
+    view.unmount();
+  });
+  (0, _vitest.it)('false면 파일 태그 목록을 렌더하지 않는다', () => {
+    const view = mountFileInput([makeFile('doc.pdf', 'application/pdf')], {
+      showFileTags: false
+    });
+    (0, _vitest.expect)(view.container.querySelector('.ncua-file-input__file-tags')).toBeNull();
+    (0, _vitest.expect)(view.container.querySelector('.ncua-tag')).toBeNull();
+    view.unmount();
+  });
+  (0, _vitest.it)('false여도 파일 찾기 버튼과 안내 문구는 그대로 렌더한다', () => {
+    const view = mountFileInput([makeFile('doc.pdf', 'application/pdf')], {
+      showFileTags: false,
+      hintItems: ['파일은 5MB 이내입니다.']
+    });
+    (0, _vitest.expect)(view.container.querySelector('.ncua-btn')).not.toBeNull();
+    (0, _vitest.expect)(view.container.querySelector('.ncua-file-input__hint-list')?.textContent).toContain('5MB');
+    view.unmount();
+  });
+  (0, _vitest.it)('false면 이미지 썸네일 object URL을 만들지 않는다', () => {
+    const view = mountFileInput([makeFile('a.jpg', 'image/jpeg')], {
+      showFileTags: false
+    });
+    (0, _vitest.expect)(createObjectURL).not.toHaveBeenCalled();
+    (0, _vitest.expect)(view.container.querySelector('.ncua-file-input__file-image')).toBeNull();
+    view.unmount();
+  });
+  (0, _vitest.it)('false여도 선택한 파일을 onChange로 전달한다', () => {
+    const onChange = _vitest.vi.fn();
+    const view = mountFileInput([], {
+      showFileTags: false,
+      onChange
+    });
+    const picked = makeFile('a.pdf', 'application/pdf');
+    selectFiles(view.container, [picked]);
+    (0, _vitest.expect)(onChange).toHaveBeenCalledTimes(1);
+    (0, _vitest.expect)(onChange).toHaveBeenCalledWith([picked]);
+    view.unmount();
+  });
+  (0, _vitest.it)('false여도 이미 등록된 파일은 중복으로 걸러 onFail로 알린다', () => {
+    const already = makeFile('a.pdf', 'application/pdf');
+    const onChange = _vitest.vi.fn();
+    const onFail = _vitest.vi.fn();
+    const view = mountFileInput([already], {
+      showFileTags: false,
+      onChange,
+      onFail
+    });
+    selectFiles(view.container, [makeFile('a.pdf', 'application/pdf')]);
+    (0, _vitest.expect)(onChange).toHaveBeenCalledWith([already]);
+    (0, _vitest.expect)(onFail).toHaveBeenCalledTimes(1);
+    (0, _vitest.expect)(onFail.mock.calls[0][0]).toHaveLength(1);
+    (0, _vitest.expect)(onFail.mock.calls[0][0][0].errorType).toBe('ALREADY_UPLOADED');
+    view.unmount();
+  });
+});

package/dist/cjs/src/components/forms-and-input/image-file-input/ImageFileInput.js

@@ -4,6 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ImageFileInput = void 0;
+Object.defineProperty(exports, "ImageFileInputErrorType", {
+  enumerable: true,
+  get: function () {
+    return _FileInput.FileInputErrorType;
+  }
+});
 var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -37,6 +43,8 @@ const ImageFileInput = exports.ImageFileInput = /*#__PURE__*/(0, _react.forwardR
     maxFileCount,
     value,
     onChange,
+    uploadedFiles = [],
+    onUploadedFilesChange,
     onFileSelect,
     onFail,
     buttonLabel = '파일 찾기',
@@ -61,6 +69,9 @@ const ImageFileInput = exports.ImageFileInput = /*#__PURE__*/(0, _react.forwardR
   // Determine if component is controlled or uncontrolled
   const isControlled = value !== undefined;
   const files = isControlled ? value : internalFiles;
+  // An entry without a URL has nothing to render, so it must not occupy a slot either.
+  // TypeScript requires fileImageUrl, but CDN/vanilla consumers are untyped.
+  const visibleUploadedFiles = uploadedFiles.filter(uploadedFile => Boolean(uploadedFile.fileImageUrl));
   // Sync internal state with controlled value
   (0, _react.useEffect)(() => {
     if (isControlled && value) {
@@ -82,32 +93,57 @@ const ImageFileInput = exports.ImageFileInput = /*#__PURE__*/(0, _react.forwardR
       validFiles,
       invalidFiles
     } = validateFiles(Array.from(selectedFiles));
-    // Replace existing file if maxFileCount is 1
-    const nextFiles = maxFileCount === 1 ? validFiles : [...files, ...validFiles];
-    updateFiles(nextFiles);
+    // Nothing passed validation — keep what the caller already had.
+    // Without this, a single slot would be overwritten with an empty list.
+    if (validFiles.length > 0) {
+      // Replace existing file if maxFileCount is 1
+      const nextFiles = maxFileCount === 1 ? validFiles : [...files, ...validFiles];
+      updateFiles(nextFiles);
+      // A single slot holds one image, so a new selection also clears the stored one.
+      // Entries we never rendered occupy no slot, so they are left in the caller's list.
+      if (maxFileCount === 1 && visibleUploadedFiles.length > 0) {
+        onUploadedFilesChange?.(uploadedFiles.filter(uploadedFile => !uploadedFile.fileImageUrl));
+      }
+    }
     if (onFail && invalidFiles.length > 0) {
       onFail(invalidFiles);
     }
     event.target.value = '';
   };
+  /**
+   * Returns why a file must be rejected, or null when it is acceptable.
+   * `acceptedCount` is how many files of the same selection already passed.
+   */
+  const findRejectionReason = (file, acceptedCount) => {
+    if (files.some(f => f.name === file.name && f.size === file.size)) {
+      return _FileInput.FileInputErrorType.ALREADY_UPLOADED;
+    }
+    // Stored images carry no size, so they can only be matched by name.
+    // A single slot is meant to be replaced, so re-picking the same name is allowed there.
+    if (maxFileCount !== 1 && visibleUploadedFiles.some(uploadedFile => uploadedFile.fileName === file.name)) {
+      return _FileInput.FileInputErrorType.ALREADY_UPLOADED;
+    }
+    if (!!maxFileSize && file.size > maxFileSize) {
+      return _FileInput.FileInputErrorType.EXCEED_MAX_FILE_SIZE;
+    }
+    // Skip max count check if maxFileCount is 1 (allow replacement).
+    // Stored images occupy slots too, so they count toward the limit.
+    const usedSlots = visibleUploadedFiles.length + files.length + acceptedCount;
+    if (!!maxFileCount && maxFileCount !== 1 && usedSlots >= maxFileCount) {
+      return _FileInput.FileInputErrorType.EXCEED_MAX_FILE_COUNT;
+    }
+    return null;
+  };
   const validateFiles = fileList => {
     const validFiles = [];
     const invalidFiles = [];
     for (const file of fileList) {
-      if (files.some(f => f.name === file.name && f.size === file.size)) {
-        invalidFiles.push(toInvalidFile(file, _FileInput.FileInputErrorType.ALREADY_UPLOADED));
-        continue;
-      }
-      if (!!maxFileSize && file.size > maxFileSize) {
-        invalidFiles.push(toInvalidFile(file, _FileInput.FileInputErrorType.EXCEED_MAX_FILE_SIZE));
-        continue;
+      const rejectionReason = findRejectionReason(file, validFiles.length);
+      if (rejectionReason) {
+        invalidFiles.push(toInvalidFile(file, rejectionReason));
+      } else {
+        validFiles.push(file);
       }
-      // Skip max count check if maxFileCount is 1 (allow replacement)
-      if (!!maxFileCount && maxFileCount !== 1 && files.length + validFiles.length >= maxFileCount) {
-        invalidFiles.push(toInvalidFile(file, _FileInput.FileInputErrorType.EXCEED_MAX_FILE_COUNT));
-        continue;
-      }
-      validFiles.push(file);
     }
     return {
       validFiles,
@@ -124,13 +160,28 @@ const ImageFileInput = exports.ImageFileInput = /*#__PURE__*/(0, _react.forwardR
     newFiles.splice(index, 1);
     updateFiles(newFiles);
   };
+  // Removed by identity, not index, so keys stay stable and the caller's
+  // untouched entries (including ones we skip rendering) are preserved
+  const handleRemoveUploadedFile = target => {
+    onUploadedFilesChange?.(uploadedFiles.filter(uploadedFile => uploadedFile !== target));
+  };
   const renderImagePreview = function () {
     let files = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    const showEmptySlot = maxFileCount ? files.length < maxFileCount : files.length === 0;
+    const totalCount = visibleUploadedFiles.length + files.length;
+    const showEmptySlot = maxFileCount ? totalCount < maxFileCount : totalCount === 0;
     return (0, _jsxRuntime.jsxs)("div", {
       className: "ncua-image-file-input__previews",
-      children: [files.map((file, index) => (0, _jsxRuntime.jsx)(_ImagePreview.ImagePreview, {
+      children: [visibleUploadedFiles.map((uploadedFile, index) => (0, _jsxRuntime.jsx)(_ImagePreview.ImagePreview
+      // Removal is by identity, so the index here only breaks ties between
+      // entries that share both URL and file name.
+      , {
+        imageUrl: uploadedFile.fileImageUrl,
+        alt: uploadedFile.fileName,
+        disabled: disabled,
+        onRemove: () => handleRemoveUploadedFile(uploadedFile)
+      }, `uploaded-${index}-${uploadedFile.fileImageUrl}-${uploadedFile.fileName}`)), files.map((file, index) => (0, _jsxRuntime.jsx)(_ImagePreview.ImagePreview, {
         file: file,
+        disabled: disabled,
         onRemove: () => handleRemoveFile(index)
       }, `${file.name}-${index}`)), showEmptySlot && (0, _jsxRuntime.jsxs)("div", {
         className: "ncua-image-file-input__empty-slot-wrapper",
@@ -206,4 +257,10 @@ const ImageFileInput = exports.ImageFileInput = /*#__PURE__*/(0, _react.forwardR
       }), showHintText && renderHintList()]
     })]
   });
-});
+});
+/**
+ * Rejection reasons reported through `onFail`.
+ *
+ * Re-exported under the ImageFileInput name so callers do not have to reach
+ * into FileInput for it. Same enum, same values.
+ */