@ncds/ui-admin 0.0.16 → 0.0.17

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

@@ -0,0 +1,118 @@
+"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 = function (_a) {
+  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: 'end',
+      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;
+    }
+    var _a = validationOption.setting,
+      unit = _a.unit,
+      period = _a.period;
+    var newDate = '';
+    if (type === 'start') {
+      newDate = (0, _utils.getDateFormat)((0, _moment.default)(startDateOptions.currentDate).add(period, unit).toDate());
+    } else {
+      newDate = (0, _utils.getDateFormat)((0, _moment.default)(endDateOptions.currentDate).subtract(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 !isNaN(Date.parse(date));
+  };
+  (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;
+    }
+    if (!(validationOption === null || validationOption === void 0 ? void 0 : validationOption.setting)) {
+      return;
+    }
+    var isOverDate = (0, _moment.default)(startDateOptions.currentDate).isAfter(endDateOptions.currentDate);
+    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 (isOverDate) {
+      changeSettingDateAndAlert('start');
+    }
+    if (!isValidPeriod) {
+      changeSettingDateAndAlert('start', !isValidPeriod);
+    }
+  }, [startDateOptions.currentDate]);
+  (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 = endDateOptions.currentDate !== (0, _utils.getDateFormat)();
+    if (!(validationOption === null || validationOption === void 0 ? void 0 : validationOption.setting) || !isNotTodayEndDate) {
+      return;
+    }
+    var isOverDate = (0, _moment.default)(startDateOptions.currentDate).isAfter(endDateOptions.currentDate);
+    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 (isOverDate) {
+      changeSettingDateAndAlert('end');
+    }
+    if (!isValidPeriod) {
+      changeSettingDateAndAlert('end', !isValidPeriod);
+    }
+  }, [endDateOptions.currentDate]);
+  return (0, _jsxRuntime.jsxs)("div", __assign({
+    className: "ncua-range-date-picker"
+  }, {
+    children: [(0, _jsxRuntime.jsx)(_DatePicker.DatePicker, __assign({}, startDateOptions)), "-", (0, _jsxRuntime.jsx)(_DatePicker.DatePicker, __assign({}, endDateOptions))]
+  }));
+};
+exports.RangeDatePicker = RangeDatePicker;

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

@@ -13,4 +13,26 @@ Object.keys(_DatePicker).forEach(function (key) {
       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 _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/ui-admin/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/esm/ui-admin/src/components/date-picker/RangeDatePicker.js

@@ -0,0 +1,110 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect } from 'react';
+import { isNil } from 'lodash';
+import moment from 'moment';
+import { DatePicker } from './DatePicker';
+import { getDateFormat } from './utils';
+export var RangeDatePicker = function (_a) {
+  var startDateOptions = _a.startDateOptions,
+    endDateOptions = _a.endDateOptions,
+    validationOption = _a.validationOption,
+    onDateValidation = _a.onDateValidation;
+  var resetDateAndAlert = 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: 'end',
+      errorType: 'reset',
+      newDate: newDate,
+      currentDate: type === 'start' ? startDateOptions.currentDate : endDateOptions.currentDate
+    });
+  }, [startDateOptions, endDateOptions, validationOption, onDateValidation]);
+  var changeSettingDateAndAlert = useCallback(function (type, isOverPeriod) {
+    if (isOverPeriod === void 0) {
+      isOverPeriod = false;
+    }
+    var _a = validationOption.setting,
+      unit = _a.unit,
+      period = _a.period;
+    var newDate = '';
+    if (type === 'start') {
+      newDate = getDateFormat(moment(startDateOptions.currentDate).add(period, unit).toDate());
+    } else {
+      newDate = getDateFormat(moment(endDateOptions.currentDate).subtract(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 !isNaN(Date.parse(date));
+  };
+  useEffect(function () {
+    var _a;
+    var needResetDate = validateDateType(startDateOptions.currentDate) && !isNil((_a = validationOption === null || validationOption === void 0 ? void 0 : validationOption.initDate) === null || _a === void 0 ? void 0 : _a.startDate) && moment(startDateOptions.currentDate).isAfter(endDateOptions.currentDate);
+    if (needResetDate) {
+      resetDateAndAlert('start');
+      return;
+    }
+    if (!(validationOption === null || validationOption === void 0 ? void 0 : validationOption.setting)) {
+      return;
+    }
+    var isOverDate = moment(startDateOptions.currentDate).isAfter(endDateOptions.currentDate);
+    var _b = validationOption.setting,
+      unit = _b.unit,
+      period = _b.period;
+    var isValidPeriod = moment(startDateOptions.currentDate).isSameOrAfter(moment(endDateOptions.currentDate).subtract(period, unit));
+    if (isOverDate) {
+      changeSettingDateAndAlert('start');
+    }
+    if (!isValidPeriod) {
+      changeSettingDateAndAlert('start', !isValidPeriod);
+    }
+  }, [startDateOptions.currentDate]);
+  useEffect(function () {
+    var _a;
+    var needResetDate = validateDateType(endDateOptions.currentDate) && !isNil((_a = validationOption === null || validationOption === void 0 ? void 0 : validationOption.initDate) === null || _a === void 0 ? void 0 : _a.endDate) && moment(endDateOptions.currentDate).isBefore(startDateOptions.currentDate);
+    if (needResetDate) {
+      resetDateAndAlert('end');
+      return;
+    }
+    var isNotTodayEndDate = endDateOptions.currentDate !== getDateFormat();
+    if (!(validationOption === null || validationOption === void 0 ? void 0 : validationOption.setting) || !isNotTodayEndDate) {
+      return;
+    }
+    var isOverDate = moment(startDateOptions.currentDate).isAfter(endDateOptions.currentDate);
+    var _b = validationOption.setting,
+      unit = _b.unit,
+      period = _b.period;
+    var isValidPeriod = moment(endDateOptions.currentDate).isSameOrBefore(moment(startDateOptions.currentDate).add(period, unit));
+    if (isOverDate) {
+      changeSettingDateAndAlert('end');
+    }
+    if (!isValidPeriod) {
+      changeSettingDateAndAlert('end', !isValidPeriod);
+    }
+  }, [endDateOptions.currentDate]);
+  return _jsxs("div", __assign({
+    className: "ncua-range-date-picker"
+  }, {
+    children: [_jsx(DatePicker, __assign({}, startDateOptions)), "-", _jsx(DatePicker, __assign({}, endDateOptions))]
+  }));
+};

package/dist/esm/ui-admin/src/components/date-picker/index.js

@@ -1 +1,3 @@
-export * from './DatePicker';
+export * from './DatePicker';
+export * from './RangeDatePicker';
+export * from './utils';

package/dist/esm/ui-admin/src/components/date-picker/utils.js

@@ -0,0 +1,10 @@
+import moment from 'moment';
+export function getToday() {
+  return moment().toDate();
+}
+export function getDateFormat(date) {
+  if (date === void 0) {
+    date = getToday();
+  }
+  return moment(date).format('YYYY-MM-DD');
+}

package/dist/types/ui-admin/src/components/date-picker/RangeDatePicker.d.ts

@@ -0,0 +1,24 @@
+import { unitOfTime } from 'moment';
+import { DatePickerProps } from './DatePicker';
+export type RangeDatePickerProps = {
+    startDateOptions: DatePickerProps;
+    endDateOptions: DatePickerProps;
+    validationOption?: {
+        initDate?: {
+            startDate?: string;
+            endDate?: string;
+        };
+        setting?: {
+            unit: unitOfTime.Diff;
+            period: number;
+        };
+    };
+    onDateValidation?: (params: {
+        type: 'start' | 'end';
+        errorType: 'reset' | 'period' | 'overlap';
+        newDate: string;
+        currentDate: string;
+    }) => void;
+};
+export declare const RangeDatePicker: ({ startDateOptions, endDateOptions, validationOption, onDateValidation, }: RangeDatePickerProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=RangeDatePicker.d.ts.map

package/dist/types/ui-admin/src/components/date-picker/index.d.ts

@@ -1,2 +1,4 @@
 export * from './DatePicker';
+export * from './RangeDatePicker';
+export * from './utils';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/ui-admin/src/components/date-picker/utils.d.ts

@@ -0,0 +1,3 @@
+export declare function getToday(): Date;
+export declare function getDateFormat(date?: Date | string): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/ui-admin/assets/styles/style.css

@@ -1616,6 +1616,7 @@ button {
 
 .ncua-date-picker {
   position: relative;
+  display: inline-block;
 }
 .ncua-date-picker .flatpickr-wrapper {
   border: 1px solid var(--gray-200);
@@ -1785,6 +1786,12 @@ button {
   color: var(--gray-300);
 }
 
+.ncua-range-date-picker {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .ncua-carousel-number-group {
   display: inline-flex;
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",