@ncds/ui-admin 0.0.34 → 0.0.35

package/dist/cjs/src/components/date-picker/DatePicker.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatePicker = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _classnames = _interopRequireDefault(require("classnames"));
+require("flatpickr/dist/flatpickr.css");
+var _ko = require("flatpickr/dist/l10n/ko");
+var _react = require("react");
+var _reactFlatpickr = _interopRequireDefault(require("react-flatpickr"));
+var _color = require("../../../constant/color");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var __assign = void 0 && (void 0).__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 = void 0 && (void 0).__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 DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
+  var _b = _a.shouldFocus,
+    shouldFocus = _b === void 0 ? true : _b,
+    currentDate = _a.currentDate,
+    _c = _a.size,
+    size = _c === void 0 ? 'sm' : _c,
+    onChangeDate = _a.onChangeDate,
+    datePickerOptions = _a.datePickerOptions,
+    attrs = __rest(_a, ["shouldFocus", "currentDate", "size", "onChangeDate", "datePickerOptions"]);
+  var onChangeDateHandler = function (dateTimeStamp, dateStr) {
+    return onChangeDate(dateStr);
+  };
+  var options = __assign({
+    mode: 'single',
+    static: true,
+    locale: _ko.Korean,
+    dateFormat: 'Y-m-d',
+    clickOpens: true,
+    onChange: onChangeDateHandler,
+    allowInvalidPreload: true
+  }, datePickerOptions);
+  var svgSize = size === 'sm' ? 14 : 16;
+  return (0, _jsxRuntime.jsxs)("div", __assign({
+    className: (0, _classnames.default)('ncua-date-picker', "ncua-date-picker--".concat(size), {
+      'ncua-date-picker--disabled': attrs.disabled
+    })
+  }, {
+    children: [(0, _jsxRuntime.jsx)(_reactFlatpickr.default, __assign({}, attrs, {
+      ref: ref || undefined,
+      className: (0, _classnames.default)('ncua-date-picker__input'),
+      options: options,
+      value: currentDate
+    })), (0, _jsxRuntime.jsx)("span", __assign({
+      className: "ncua-date-picker__ico"
+    }, {
+      children: (0, _jsxRuntime.jsx)("svg", __assign({
+        xmlns: "http://www.w3.org/2000/svg",
+        width: svgSize,
+        height: svgSize,
+        viewBox: "0 0 16 16",
+        fill: "none"
+      }, {
+        children: (0, _jsxRuntime.jsx)("path", {
+          d: "M14 6.66671H2M10.6667 1.33337V4.00004M5.33333 1.33337V4.00004M5.2 14.6667H10.8C11.9201 14.6667 12.4802 14.6667 12.908 14.4487C13.2843 14.257 13.5903 13.951 13.782 13.5747C14 13.1469 14 12.5868 14 11.4667V5.86671C14 4.7466 14 4.18655 13.782 3.75873C13.5903 3.3824 13.2843 3.07644 12.908 2.88469C12.4802 2.66671 11.9201 2.66671 10.8 2.66671H5.2C4.0799 2.66671 3.51984 2.66671 3.09202 2.88469C2.71569 3.07644 2.40973 3.3824 2.21799 3.75873C2 4.18655 2 4.7466 2 5.86671V11.4667C2 12.5868 2 13.1469 2.21799 13.5747C2.40973 13.951 2.71569 14.257 3.09202 14.4487C3.51984 14.6667 4.0799 14.6667 5.2 14.6667Z",
+          stroke: attrs.disabled ? _color.COLOR.gray300 : 'black',
+          strokeWidth: "1.33333",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        })
+      }))
+    }))]
+  }));
+});
+DatePicker.displayName = 'DatePicker';

package/dist/cjs/src/components/date-picker/RangeDatePicker.js

@@ -0,0 +1,137 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RangeDatePicker = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _lodash = require("lodash");
+var _moment = _interopRequireDefault(require("moment"));
+var _DatePicker = require("./DatePicker");
+var _utils = require("./utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var __assign = void 0 && (void 0).__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 RangeDatePicker = exports.RangeDatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
+  var startDateOptions = _a.startDateOptions,
+    endDateOptions = _a.endDateOptions,
+    validationOption = _a.validationOption,
+    onDateValidation = _a.onDateValidation;
+  var resetDateAndAlert = (0, _react.useCallback)(function (type) {
+    var _a, _b;
+    var newDate = type === 'start' ? ((_a = validationOption === null || validationOption === void 0 ? void 0 : validationOption.initDate) === null || _a === void 0 ? void 0 : _a.startDate) || '' : ((_b = validationOption === null || validationOption === void 0 ? void 0 : validationOption.initDate) === null || _b === void 0 ? void 0 : _b.endDate) || '';
+    if (type === 'start') {
+      startDateOptions.onChangeDate(newDate);
+    } else {
+      endDateOptions.onChangeDate(newDate);
+    }
+    onDateValidation === null || onDateValidation === void 0 ? void 0 : onDateValidation({
+      type: type,
+      errorType: 'reset',
+      newDate: newDate,
+      currentDate: type === 'start' ? startDateOptions.currentDate : endDateOptions.currentDate
+    });
+  }, [startDateOptions, endDateOptions, validationOption, onDateValidation]);
+  var changeSettingDateAndAlert = (0, _react.useCallback)(function (type, isOverPeriod) {
+    if (isOverPeriod === void 0) {
+      isOverPeriod = false;
+    }
+    if (!(validationOption === null || validationOption === void 0 ? void 0 : validationOption.setting)) {
+      var newDate_1 = type === 'start' ? startDateOptions.currentDate : endDateOptions.currentDate;
+      var currentDate = type === 'start' ? endDateOptions.currentDate : startDateOptions.currentDate;
+      onDateValidation === null || onDateValidation === void 0 ? void 0 : onDateValidation({
+        type: type,
+        errorType: 'overlap',
+        newDate: newDate_1,
+        currentDate: currentDate
+      });
+      return;
+    }
+    var _a = validationOption.setting,
+      unit = _a.unit,
+      period = _a.period;
+    var newDate = '';
+    if (type === 'start') {
+      newDate = (0, _utils.getDateFormat)((0, _moment.default)(endDateOptions.currentDate).subtract(period, unit).toDate());
+    } else {
+      newDate = (0, _utils.getDateFormat)((0, _moment.default)(startDateOptions.currentDate).add(period, unit).toDate());
+    }
+    onDateValidation === null || onDateValidation === void 0 ? void 0 : onDateValidation({
+      type: type,
+      errorType: isOverPeriod ? 'period' : 'overlap',
+      newDate: newDate,
+      currentDate: type === 'start' ? startDateOptions.currentDate : endDateOptions.currentDate
+    });
+  }, [startDateOptions, endDateOptions, validationOption, onDateValidation]);
+  var validateDateType = function (date) {
+    return (0, _moment.default)(date).isValid();
+  };
+  (0, _react.useEffect)(function () {
+    var _a;
+    var needResetDate = validateDateType(startDateOptions.currentDate) && !(0, _lodash.isNil)((_a = validationOption === null || validationOption === void 0 ? void 0 : validationOption.initDate) === null || _a === void 0 ? void 0 : _a.startDate) && (0, _moment.default)(startDateOptions.currentDate).isAfter(endDateOptions.currentDate);
+    if (needResetDate) {
+      resetDateAndAlert('start');
+      return;
+    }
+    var isOverDate = (0, _moment.default)(startDateOptions.currentDate).isAfter(endDateOptions.currentDate);
+    if (isOverDate) {
+      changeSettingDateAndAlert('start');
+    }
+    if (!(validationOption === null || validationOption === void 0 ? void 0 : validationOption.setting)) {
+      return;
+    }
+    var _b = validationOption.setting,
+      unit = _b.unit,
+      period = _b.period;
+    var isValidPeriod = (0, _moment.default)(startDateOptions.currentDate).isSameOrAfter((0, _moment.default)(endDateOptions.currentDate).subtract(period, unit));
+    if (!isValidPeriod) {
+      changeSettingDateAndAlert('start', !isValidPeriod);
+    }
+  }, [startDateOptions.currentDate, endDateOptions.currentDate, validationOption, resetDateAndAlert, changeSettingDateAndAlert]);
+  (0, _react.useEffect)(function () {
+    var _a;
+    var needResetDate = validateDateType(endDateOptions.currentDate) && !(0, _lodash.isNil)((_a = validationOption === null || validationOption === void 0 ? void 0 : validationOption.initDate) === null || _a === void 0 ? void 0 : _a.endDate) && (0, _moment.default)(endDateOptions.currentDate).isBefore(startDateOptions.currentDate);
+    if (needResetDate) {
+      resetDateAndAlert('end');
+      return;
+    }
+    var isNotTodayEndDate = !(0, _moment.default)(endDateOptions.currentDate).isSame((0, _moment.default)(), 'day');
+    if (!isNotTodayEndDate) {
+      return;
+    }
+    var isOverDate = (0, _moment.default)(endDateOptions.currentDate).isBefore(startDateOptions.currentDate);
+    if (isOverDate) {
+      changeSettingDateAndAlert('end');
+    }
+    if (!(validationOption === null || validationOption === void 0 ? void 0 : validationOption.setting)) {
+      return;
+    }
+    var _b = validationOption.setting,
+      unit = _b.unit,
+      period = _b.period;
+    var isValidPeriod = (0, _moment.default)(endDateOptions.currentDate).isSameOrBefore((0, _moment.default)(startDateOptions.currentDate).add(period, unit));
+    if (!isValidPeriod) {
+      changeSettingDateAndAlert('end', !isValidPeriod);
+    }
+  }, [endDateOptions.currentDate, startDateOptions.currentDate, validationOption, resetDateAndAlert, changeSettingDateAndAlert]);
+  return (0, _jsxRuntime.jsxs)("div", __assign({
+    className: "ncua-range-date-picker",
+    ref: ref || undefined
+  }, {
+    children: [(0, _jsxRuntime.jsx)(_DatePicker.DatePicker, __assign({}, startDateOptions, {
+      ref: undefined
+    })), "-", (0, _jsxRuntime.jsx)(_DatePicker.DatePicker, __assign({}, endDateOptions, {
+      ref: undefined
+    }))]
+  }));
+});
+RangeDatePicker.displayName = 'RangeDatePicker';

package/dist/cjs/src/components/date-picker/RangeDatePickerWithButtons.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RangeDatePickerWithButtons = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _RangeDatePicker = require("./RangeDatePicker");
+var _button = require("../button");
+var _datePicker = require("../../utils/date-picker");
+var _datePicker2 = require("../../constant/date-picker");
+var __assign = void 0 && (void 0).__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 RangeDatePickerWithButtons = function (_a) {
+  var _b = _a.buttonGroupSize,
+    buttonGroupSize = _b === void 0 ? 'sm' : _b,
+    currentButtonId = _a.currentButtonId,
+    setCurrentButtonId = _a.setCurrentButtonId,
+    startDateOptions = _a.startDateOptions,
+    endDateOptions = _a.endDateOptions,
+    validationOption = _a.validationOption,
+    periodKeys = _a.periodKeys,
+    onDateValidation = _a.onDateValidation;
+  var setCalculatedDate = function () {
+    var currentPeriodItem = _datePicker2.PERIOD_ITEM[currentButtonId];
+    if (!currentPeriodItem) {
+      return;
+    }
+    if (currentButtonId === 'ENTIRE') {
+      startDateOptions.onChangeDate('');
+      endDateOptions.onChangeDate('');
+      return;
+    }
+    var startDate = (0, _datePicker.getDateFormat)((0, _datePicker.getSubtractDate)({
+      period: currentPeriodItem.period,
+      unit: currentPeriodItem.unit
+    }));
+    startDateOptions.onChangeDate(startDate);
+    if (endDateOptions.currentDate !== (0, _datePicker.getDateFormat)()) {
+      endDateOptions.onChangeDate((0, _datePicker.getDateFormat)());
+    }
+  };
+  var handleOnChangeDate = function (date, type) {
+    type === 'START' ? startDateOptions.onChangeDate(date) : endDateOptions.onChangeDate(date);
+    currentButtonId && setCurrentButtonId('NONE');
+  };
+  (0, _react.useEffect)(function () {
+    if (currentButtonId !== 'NONE') {
+      setCalculatedDate();
+    }
+  }, [currentButtonId]);
+  return (0, _jsxRuntime.jsxs)("div", __assign({
+    className: "ncua-range-date-picker-with-buttons"
+  }, {
+    children: [(0, _jsxRuntime.jsx)(_button.ButtonGroup, __assign({
+      size: buttonGroupSize
+    }, {
+      children: periodKeys.map(function (key) {
+        return (0, _jsxRuntime.jsx)(_button.ButtonGroup.Item, {
+          isCurrent: currentButtonId === key,
+          label: _datePicker2.PERIOD_ITEM[key].text,
+          onClick: function () {
+            return setCurrentButtonId(key);
+          }
+        }, key);
+      })
+    })), (0, _jsxRuntime.jsx)(_RangeDatePicker.RangeDatePicker, {
+      startDateOptions: __assign(__assign({}, startDateOptions), {
+        onChangeDate: function (date) {
+          return handleOnChangeDate(date, 'START');
+        }
+      }),
+      endDateOptions: __assign(__assign({}, endDateOptions), {
+        onChangeDate: function (date) {
+          return handleOnChangeDate(date, 'END');
+        }
+      }),
+      validationOption: validationOption,
+      onDateValidation: onDateValidation
+    })]
+  }));
+};
+exports.RangeDatePickerWithButtons = RangeDatePickerWithButtons;

package/dist/cjs/src/components/date-picker/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _DatePicker = require("./DatePicker");
+Object.keys(_DatePicker).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DatePicker[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DatePicker[key];
+    }
+  });
+});
+var _RangeDatePicker = require("./RangeDatePicker");
+Object.keys(_RangeDatePicker).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _RangeDatePicker[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _RangeDatePicker[key];
+    }
+  });
+});
+var _RangeDatePickerWithButtons = require("./RangeDatePickerWithButtons");
+Object.keys(_RangeDatePickerWithButtons).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _RangeDatePickerWithButtons[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _RangeDatePickerWithButtons[key];
+    }
+  });
+});
+var _utils = require("./utils");
+Object.keys(_utils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _utils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _utils[key];
+    }
+  });
+});

package/dist/cjs/src/components/date-picker/utils.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDateFormat = getDateFormat;
+exports.getToday = getToday;
+var _moment = _interopRequireDefault(require("moment"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function getToday() {
+  return (0, _moment.default)().toDate();
+}
+function getDateFormat(date) {
+  if (date === void 0) {
+    date = getToday();
+  }
+  return (0, _moment.default)(date).format('YYYY-MM-DD');
+}

package/dist/cjs/src/components/divider/Divider.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Divider = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var __assign = void 0 && (void 0).__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);
+};
+/**
+ * @param {DividerProps} props
+ * @param {ReactNode} props.children Button 컴포넌트는 xs로 ButtonGroup은 sm 사이즈로 추가하는 것이 권장됩니다.
+ * @returns {ReactNode}
+ */
+var Divider = exports.Divider = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
+  var className = _a.className,
+    type = _a.type,
+    _b = _a.style,
+    style = _b === void 0 ? 'single-line' : _b,
+    children = _a.children;
+  return (0, _jsxRuntime.jsxs)("div", __assign({
+    className: (0, _classnames.default)('ncua-divider', "ncua-divider--".concat(type), "ncua-divider--".concat(style), className),
+    ref: ref
+  }, {
+    children: [style === 'single-line' && (0, _jsxRuntime.jsx)("div", {
+      className: "ncua-divider__line"
+    }), (0, _jsxRuntime.jsx)("div", __assign({
+      className: "ncua-divider__content"
+    }, {
+      children: children
+    })), style === 'single-line' && (0, _jsxRuntime.jsx)("div", {
+      className: "ncua-divider__line"
+    })]
+  }));
+});
+Divider.displayName = 'Divider';

package/dist/cjs/src/components/divider/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Divider = require("./Divider");
+Object.keys(_Divider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Divider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Divider[key];
+    }
+  });
+});

package/dist/cjs/src/components/dot/Dot.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Dot = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var __assign = void 0 && (void 0).__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 = void 0 && (void 0).__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 Dot = exports.Dot = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
+  var _b = _a.color,
+    color = _b === void 0 ? 'success' : _b,
+    _c = _a.size,
+    size = _c === void 0 ? 'md' : _c,
+    className = _a.className,
+    props = __rest(_a, ["color", "size", "className"]);
+  return (0, _jsxRuntime.jsx)("span", __assign({
+    ref: ref,
+    className: (0, _classnames.default)('ncua-dot', "ncua-dot--".concat(color), "ncua-dot--".concat(size), className)
+  }, props));
+});
+Dot.displayName = 'Dot';

package/dist/cjs/src/components/dot/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Dot = require("./Dot");
+Object.keys(_Dot).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Dot[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Dot[key];
+    }
+  });
+});