@ncds/ui-admin 1.7.0 → 1.8.0

package/dist/esm/src/components/file-input/FileInput.js

@@ -1,30 +1,3 @@
-var __assign = this && this.__assign || function () {
-  __assign = Object.assign || function (t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-    }
-    return t;
-  };
-  return __assign.apply(this, arguments);
-};
-var __rest = this && this.__rest || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
-var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
-  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-    if (ar || !(i in from)) {
-      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-      ar[i] = from[i];
-    }
-  }
-  return to.concat(ar || Array.prototype.slice.call(from));
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HelpCircle, Upload01 } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
@@ -38,150 +11,134 @@ export var FileInputErrorType;
   FileInputErrorType["EXCEED_MAX_FILE_SIZE"] = "EXCEED_MAX_FILE_SIZE";
   FileInputErrorType["EXCEED_MAX_FILE_COUNT"] = "EXCEED_MAX_FILE_COUNT";
 })(FileInputErrorType || (FileInputErrorType = {}));
-export var FileInput = /*#__PURE__*/forwardRef(function (_a, _ref) {
-  var _b = _a.size,
-    size = _b === void 0 ? 'xs' : _b,
-    accept = _a.accept,
-    _c = _a.multiple,
-    multiple = _c === void 0 ? false : _c,
-    maxFileSize = _a.maxFileSize,
-    maxFileCount = _a.maxFileCount,
-    value = _a.value,
-    onChange = _a.onChange,
-    onFileSelect = _a.onFileSelect,
-    onFail = _a.onFail,
-    _d = _a.buttonLabel,
-    buttonLabel = _d === void 0 ? '파일 찾기' : _d,
-    disabled = _a.disabled,
-    label = _a.label,
-    hintItems = _a.hintItems,
-    validation = _a.validation,
-    destructive = _a.destructive,
-    isRequired = _a.isRequired,
-    showHelpIcon = _a.showHelpIcon,
-    hintText = _a.hintText,
-    props = __rest(_a, ["size", "accept", "multiple", "maxFileSize", "maxFileCount", "value", "onChange", "onFileSelect", "onFail", "buttonLabel", "disabled", "label", "hintItems", "validation", "destructive", "isRequired", "showHelpIcon", "hintText"]);
-  var fileInputRef = useRef(null);
-  var _e = useState([]),
-    internalFiles = _e[0],
-    setInternalFiles = _e[1];
+export const FileInput = /*#__PURE__*/forwardRef((_ref2, _ref) => {
+  let {
+    size = 'xs',
+    accept,
+    multiple = false,
+    maxFileSize,
+    maxFileCount,
+    value,
+    onChange,
+    onFileSelect,
+    onFail,
+    buttonLabel = '파일 찾기',
+    disabled,
+    label,
+    hintItems,
+    validation,
+    destructive,
+    isRequired,
+    showHelpIcon,
+    hintText,
+    ...props
+  } = _ref2;
+  const fileInputRef = useRef(null);
+  const [internalFiles, setInternalFiles] = useState([]);
   // Determine if component is controlled or uncontrolled
-  var isControlled = value !== undefined;
-  var files = isControlled ? value : internalFiles;
+  const isControlled = value !== undefined;
+  const files = isControlled ? value : internalFiles;
   // Sync internal state with controlled value
-  useEffect(function () {
+  useEffect(() => {
     if (isControlled && value) {
       setInternalFiles(value);
     }
   }, [isControlled, value]);
-  var updateFiles = function (newFiles) {
+  const updateFiles = newFiles => {
     if (isControlled) {
-      onChange === null || onChange === void 0 ? void 0 : onChange(newFiles);
+      onChange?.(newFiles);
     } else {
       setInternalFiles(newFiles);
-      onFileSelect === null || onFileSelect === void 0 ? void 0 : onFileSelect(newFiles);
+      onFileSelect?.(newFiles);
     }
   };
-  var handleFileChange = function (event) {
-    var selectedFiles = event.target.files;
+  const handleFileChange = event => {
+    const selectedFiles = event.target.files;
     if (!selectedFiles || selectedFiles.length === 0) return;
-    var _a = validateFiles(Array.from(selectedFiles)),
-      validFiles = _a.validFiles,
-      invalidFiles = _a.invalidFiles;
-    var nextFiles = __spreadArray(__spreadArray([], files, true), validFiles, true);
+    const {
+      validFiles,
+      invalidFiles
+    } = validateFiles(Array.from(selectedFiles));
+    const nextFiles = [...files, ...validFiles];
     updateFiles(nextFiles);
     if (onFail && invalidFiles.length > 0) {
       onFail(invalidFiles);
     }
   };
-  var validateFiles = function (fileList) {
-    var validFiles = [];
-    var invalidFiles = [];
-    var _loop_1 = function (file) {
-      if (files.some(function (f) {
-        return f.name === file.name && f.size === file.size;
-      })) {
-        invalidFiles.push(__assign(__assign({}, file), {
+  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({
+          ...file,
           errorType: FileInputErrorType.ALREADY_UPLOADED
-        }));
-        return "continue";
+        });
+        continue;
       }
       if (!!maxFileSize && file.size > maxFileSize) {
-        invalidFiles.push(__assign(__assign({}, file), {
+        invalidFiles.push({
+          ...file,
           errorType: FileInputErrorType.EXCEED_MAX_FILE_SIZE
-        }));
-        return "continue";
+        });
+        continue;
       }
       if (!!maxFileCount && files.length + validFiles.length >= maxFileCount) {
-        invalidFiles.push(__assign(__assign({}, file), {
+        invalidFiles.push({
+          ...file,
           errorType: FileInputErrorType.EXCEED_MAX_FILE_COUNT
-        }));
-        return "continue";
+        });
+        continue;
       }
       validFiles.push(file);
-    };
-    for (var _i = 0, fileList_1 = fileList; _i < fileList_1.length; _i++) {
-      var file = fileList_1[_i];
-      _loop_1(file);
     }
     return {
-      validFiles: validFiles,
-      invalidFiles: invalidFiles
+      validFiles,
+      invalidFiles
     };
   };
-  var handleBrowseClick = function () {
+  const handleBrowseClick = () => {
     if (fileInputRef.current && !disabled) {
       fileInputRef.current.click();
     }
   };
-  var handleRemoveFile = function (index) {
-    var newFiles = __spreadArray([], files, true);
+  const handleRemoveFile = index => {
+    const newFiles = [...files];
     newFiles.splice(index, 1);
     updateFiles(newFiles);
   };
-  var renderFileTagList = function () {
+  const renderFileTagList = () => {
     if (files.length === 0) return null;
-    return _jsx("div", __assign({
-      className: "ncua-file-input__file-tags"
-    }, {
-      children: files.map(function (file, index) {
-        return _jsxs("div", __assign({
-          className: "ncua-file-input__file-tag-container"
-        }, {
-          children: [_jsx(Tag, {
-            text: file.name,
-            size: size === 'xs' ? 'sm' : 'md',
-            close: true,
-            onButtonClick: function () {
-              return handleRemoveFile(index);
-            }
-          }), file.type.startsWith('image/') && _jsx("img", {
-            className: "ncua-file-input__file-image",
-            src: URL.createObjectURL(file),
-            alt: file.name
-          })]
-        }), "".concat(file.name, "-").concat(index));
-      })
-    }));
+    return _jsx("div", {
+      className: "ncua-file-input__file-tags",
+      children: files.map((file, index) => _jsxs("div", {
+        className: "ncua-file-input__file-tag-container",
+        children: [_jsx(Tag, {
+          text: file.name,
+          size: size === 'xs' ? 'sm' : 'md',
+          close: true,
+          onButtonClick: () => handleRemoveFile(index)
+        }), file.type.startsWith('image/') && _jsx("img", {
+          className: "ncua-file-input__file-image",
+          src: URL.createObjectURL(file),
+          alt: file.name
+        })]
+      }, `${file.name}-${index}`))
+    });
   };
-  var renderHintList = function () {
+  const renderHintList = () => {
     if (!hintItems || hintItems.length === 0) return null;
-    return _jsx("ul", __assign({
-      className: "ncua-file-input__hint-list"
-    }, {
-      children: hintItems.map(function (hint) {
-        return _jsx("li", __assign({
-          className: "ncua-file-input__hint-item"
-        }, {
-          children: hint
-        }), hint);
-      })
-    }));
+    return _jsx("ul", {
+      className: "ncua-file-input__hint-list",
+      children: hintItems.map(hint => _jsx("li", {
+        className: "ncua-file-input__hint-item",
+        children: hint
+      }, hint))
+    });
   };
-  return _jsxs("div", __assign({
-    className: classNames('ncua-file-input', "ncua-file-input--".concat(size))
-  }, {
-    children: [_jsx("input", __assign({
+  return _jsxs("div", {
+    className: classNames('ncua-file-input', `ncua-file-input--${size}`),
+    children: [_jsx("input", {
       hidden: true,
       ref: fileInputRef,
       type: "file",
@@ -189,21 +146,19 @@ export var FileInput = /*#__PURE__*/forwardRef(function (_a, _ref) {
       multiple: multiple,
       onChange: handleFileChange,
       tabIndex: -1,
-      "aria-hidden": "true"
-    }, props)), _jsxs("div", __assign({
-      className: "ncua-file-input__input-container"
-    }, {
-      children: [_jsxs("div", __assign({
-        className: "ncua-file-input__label"
-      }, {
-        children: [_jsx(Label, __assign({
-          isRequired: isRequired
-        }, {
+      "aria-hidden": "true",
+      ...props
+    }), _jsxs("div", {
+      className: "ncua-file-input__input-container",
+      children: [_jsxs("div", {
+        className: "ncua-file-input__label",
+        children: [_jsx(Label, {
+          isRequired: isRequired,
           children: label
-        })), showHelpIcon && _jsx(HelpCircle, {
+        }), showHelpIcon && _jsx(HelpCircle, {
           className: "ncua-input__help-icon"
         })]
-      })), _jsx(Button, {
+      }), _jsx(Button, {
         size: size,
         onClick: handleBrowseClick,
         disabled: disabled,
@@ -212,11 +167,10 @@ export var FileInput = /*#__PURE__*/forwardRef(function (_a, _ref) {
           icon: Upload01
         },
         label: buttonLabel
-      }), hintText && _jsx(HintText, __assign({
-        destructive: destructive
-      }, {
+      }), hintText && _jsx(HintText, {
+        destructive: destructive,
         children: hintText
-      }))]
-    })), renderHintList(), renderFileTagList()]
-  }));
+      })]
+    }), renderHintList(), renderFileTagList()]
+  });
 });

package/dist/esm/src/components/horizontal-tab/HorizontalTab.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { uniqueId } from 'lodash-es';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { TabButton } from '../tab/TabButton';
+const UNDERLINE_GAP = 16;
+const DEFAULT_GAP = 8;
+const HorizontalTab = _ref => {
+  let {
+    type = 'button-primary',
+    size = 'sm',
+    activeTab,
+    fullWidth = false,
+    menus = [],
+    className
+  } = _ref;
+  const getTabGap = type => {
+    const gap = {
+      underline: UNDERLINE_GAP
+    };
+    return gap[type] ?? DEFAULT_GAP;
+  };
+  if (!menus.length) return null;
+  return _jsx("div", {
+    className: classNames('ncua-horizontal-tab', `ncua-horizontal-tab--${type}`, `ncua-horizontal-tab--${size}`, {
+      'full-width': fullWidth
+    }, className),
+    children: _jsx(Swiper, {
+      slidesPerView: "auto",
+      spaceBetween: getTabGap(type),
+      children: menus.map(menu => {
+        const isActive = 'href' in menu && menu.href ? menu.href === activeTab : menu.id === activeTab;
+        return _jsx(SwiperSlide, {
+          className: "ncua-horizontal-tab__item",
+          children: _jsx(TabButton, {
+            ...menu,
+            isActive: isActive,
+            tabButtonType: type,
+            size: size
+          })
+        }, uniqueId('horizontal-tab'));
+      })
+    })
+  });
+};
+export { HorizontalTab };

package/dist/esm/src/components/horizontal-tab/index.js

@@ -0,0 +1 @@
+export * from './HorizontalTab';