@ncds/ui-admin 1.4.1 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/assets/scripts/comboBox.js +18 -0
- package/dist/cjs/assets/scripts/datePicker.js +60 -7
- package/dist/cjs/assets/scripts/imageFileInput/ImageFileInputModel.js +6 -19
- package/dist/cjs/assets/scripts/notification/MessageNotification.js +146 -0
- package/dist/cjs/assets/scripts/notification/Notification.js +6 -3
- package/dist/cjs/assets/scripts/notification/const/classNames.js +14 -0
- package/dist/cjs/assets/scripts/notification/const/index.js +14 -1
- package/dist/cjs/assets/scripts/notification/const/sizes.js +7 -1
- package/dist/cjs/assets/scripts/notification/const/types.js +10 -1
- package/dist/cjs/assets/scripts/notification/index.js +8 -0
- package/dist/cjs/assets/scripts/notification/utils.js +3 -3
- package/dist/cjs/assets/scripts/utils/selectbox/DropdownModel.js +7 -0
- package/dist/cjs/assets/scripts/utils/selectbox/UnifiedSelectBox.js +77 -43
- package/dist/cjs/src/components/button/ButtonStepper.js +22 -0
- package/dist/cjs/src/components/button/index.js +22 -0
- package/dist/cjs/src/components/date-picker/DatePicker.js +45 -6
- package/dist/cjs/src/components/date-picker/RangeDatePicker.js +3 -1
- package/dist/cjs/src/components/date-picker/RangeDatePickerWithButtons.js +7 -3
- package/dist/cjs/src/components/input/InputBase.js +1 -1
- package/dist/cjs/src/components/input/NumberInput.js +130 -0
- package/dist/cjs/src/components/input/index.js +11 -0
- package/dist/cjs/src/components/notification/MessageNotification.js +137 -0
- package/dist/cjs/src/components/notification/Notification.js +23 -9
- package/dist/cjs/src/components/notification/index.js +11 -0
- package/dist/cjs/src/components/tooltip/Tooltip.js +32 -21
- package/dist/esm/assets/scripts/comboBox.js +18 -0
- package/dist/esm/assets/scripts/datePicker.js +60 -7
- package/dist/esm/assets/scripts/imageFileInput/ImageFileInputModel.js +6 -19
- package/dist/esm/assets/scripts/notification/MessageNotification.js +141 -0
- package/dist/esm/assets/scripts/notification/Notification.js +6 -3
- package/dist/esm/assets/scripts/notification/const/classNames.js +14 -0
- package/dist/esm/assets/scripts/notification/const/index.js +2 -1
- package/dist/esm/assets/scripts/notification/const/sizes.js +6 -0
- package/dist/esm/assets/scripts/notification/const/types.js +8 -1
- package/dist/esm/assets/scripts/notification/index.js +1 -0
- package/dist/esm/assets/scripts/notification/utils.js +3 -3
- package/dist/esm/assets/scripts/utils/selectbox/DropdownModel.js +7 -0
- package/dist/esm/assets/scripts/utils/selectbox/UnifiedSelectBox.js +77 -43
- package/dist/esm/src/components/button/ButtonStepper.js +14 -0
- package/dist/esm/src/components/button/index.js +3 -1
- package/dist/esm/src/components/date-picker/DatePicker.js +46 -7
- package/dist/esm/src/components/date-picker/RangeDatePicker.js +3 -1
- package/dist/esm/src/components/date-picker/RangeDatePickerWithButtons.js +7 -3
- package/dist/esm/src/components/input/InputBase.js +1 -1
- package/dist/esm/src/components/input/NumberInput.js +124 -0
- package/dist/esm/src/components/input/index.js +1 -0
- package/dist/esm/src/components/notification/MessageNotification.js +130 -0
- package/dist/esm/src/components/notification/Notification.js +23 -9
- package/dist/esm/src/components/notification/index.js +2 -1
- package/dist/esm/src/components/tooltip/Tooltip.js +33 -22
- package/dist/types/assets/scripts/comboBox.d.ts +12 -0
- package/dist/types/assets/scripts/datePicker.d.ts +1 -0
- package/dist/types/assets/scripts/notification/MessageNotification.d.ts +23 -0
- package/dist/types/assets/scripts/notification/Notification.d.ts +1 -1
- package/dist/types/assets/scripts/notification/const/classNames.d.ts +14 -0
- package/dist/types/assets/scripts/notification/const/index.d.ts +2 -1
- package/dist/types/assets/scripts/notification/const/sizes.d.ts +5 -0
- package/dist/types/assets/scripts/notification/const/types.d.ts +1 -0
- package/dist/types/assets/scripts/notification/index.d.ts +1 -0
- package/dist/types/assets/scripts/utils/selectbox/DropdownModel.d.ts +4 -0
- package/dist/types/assets/scripts/utils/selectbox/UnifiedSelectBox.d.ts +20 -1
- package/dist/types/src/components/button/ButtonStepper.d.ts +10 -0
- package/dist/types/src/components/button/index.d.ts +2 -0
- package/dist/types/src/components/date-picker/DatePicker.d.ts +1 -0
- package/dist/types/src/components/date-picker/RangeDatePickerWithButtons.d.ts +4 -4
- package/dist/types/src/components/input/NumberInput.d.ts +10 -0
- package/dist/types/src/components/input/index.d.ts +1 -0
- package/dist/types/src/components/notification/MessageNotification.d.ts +40 -0
- package/dist/types/src/components/notification/Notification.d.ts +6 -1
- package/dist/types/src/components/notification/index.d.ts +1 -0
- package/dist/types/src/components/selectbox/SelectBox.d.ts +1 -1
- package/dist/types/src/components/tooltip/Tooltip.d.ts +4 -2
- package/dist/ui-admin/assets/styles/style.css +292 -10
- package/package.json +1 -1
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.ButtonStepper = void 0;
|
|
7
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
8
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
|
+
var ButtonStepper = function (_a) {
|
|
11
|
+
var size = _a.size,
|
|
12
|
+
direction = _a.direction,
|
|
13
|
+
disabled = _a.disabled,
|
|
14
|
+
onClick = _a.onClick,
|
|
15
|
+
className = _a.className;
|
|
16
|
+
return (0, _jsxRuntime.jsx)("button", {
|
|
17
|
+
className: (0, _classnames.default)('ncua-button-stepper', "ncua-button-stepper--".concat(size), "ncua-button-stepper--".concat(direction), className),
|
|
18
|
+
disabled: disabled,
|
|
19
|
+
onClick: onClick
|
|
20
|
+
});
|
|
21
|
+
};
|
|
22
|
+
exports.ButtonStepper = ButtonStepper;
|
|
@@ -14,6 +14,17 @@ Object.keys(_Button).forEach(function (key) {
|
|
|
14
14
|
}
|
|
15
15
|
});
|
|
16
16
|
});
|
|
17
|
+
var _ButtonCloseX = require("./ButtonCloseX");
|
|
18
|
+
Object.keys(_ButtonCloseX).forEach(function (key) {
|
|
19
|
+
if (key === "default" || key === "__esModule") return;
|
|
20
|
+
if (key in exports && exports[key] === _ButtonCloseX[key]) return;
|
|
21
|
+
Object.defineProperty(exports, key, {
|
|
22
|
+
enumerable: true,
|
|
23
|
+
get: function () {
|
|
24
|
+
return _ButtonCloseX[key];
|
|
25
|
+
}
|
|
26
|
+
});
|
|
27
|
+
});
|
|
17
28
|
var _ButtonGroup = require("./ButtonGroup");
|
|
18
29
|
Object.keys(_ButtonGroup).forEach(function (key) {
|
|
19
30
|
if (key === "default" || key === "__esModule") return;
|
|
@@ -24,4 +35,15 @@ Object.keys(_ButtonGroup).forEach(function (key) {
|
|
|
24
35
|
return _ButtonGroup[key];
|
|
25
36
|
}
|
|
26
37
|
});
|
|
38
|
+
});
|
|
39
|
+
var _ButtonStepper = require("./ButtonStepper");
|
|
40
|
+
Object.keys(_ButtonStepper).forEach(function (key) {
|
|
41
|
+
if (key === "default" || key === "__esModule") return;
|
|
42
|
+
if (key in exports && exports[key] === _ButtonStepper[key]) return;
|
|
43
|
+
Object.defineProperty(exports, key, {
|
|
44
|
+
enumerable: true,
|
|
45
|
+
get: function () {
|
|
46
|
+
return _ButtonStepper[key];
|
|
47
|
+
}
|
|
48
|
+
});
|
|
27
49
|
});
|
|
@@ -7,10 +7,11 @@ exports.DatePicker = void 0;
|
|
|
7
7
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
8
8
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
9
9
|
var _ko = require("flatpickr/dist/l10n/ko");
|
|
10
|
+
var _moment = _interopRequireDefault(require("moment"));
|
|
10
11
|
var _react = require("react");
|
|
11
12
|
var _reactFlatpickr = _interopRequireDefault(require("react-flatpickr"));
|
|
12
|
-
var _CustomInput = require("./CustomInput");
|
|
13
13
|
var _datePicker = require("../../utils/date-picker");
|
|
14
|
+
var _CustomInput = require("./CustomInput");
|
|
14
15
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
15
16
|
var __assign = void 0 && (void 0).__assign || function () {
|
|
16
17
|
__assign = Object.assign || function (t) {
|
|
@@ -42,7 +43,9 @@ var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(functi
|
|
|
42
43
|
size = _c === void 0 ? 'xs' : _c,
|
|
43
44
|
onChangeDate = _a.onChangeDate,
|
|
44
45
|
datePickerOptions = _a.datePickerOptions,
|
|
45
|
-
|
|
46
|
+
_d = _a.isEndDate,
|
|
47
|
+
isEndDate = _d === void 0 ? false : _d,
|
|
48
|
+
attrs = __rest(_a, ["shouldFocus", "currentDate", "size", "onChangeDate", "datePickerOptions", "isEndDate"]);
|
|
46
49
|
var onChangeDateHandler = function (dateTimeStamp, dateStr) {
|
|
47
50
|
var formattedDate = (0, _datePicker.formatDateInput)(dateStr);
|
|
48
51
|
isValidDate(formattedDate) ? onChangeDate(formattedDate) : onChangeDate(dateStr);
|
|
@@ -90,27 +93,63 @@ var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(functi
|
|
|
90
93
|
if (!hourInput || !minuteInput) return;
|
|
91
94
|
hourInput.addEventListener('input', onHourInputHandler);
|
|
92
95
|
minuteInput.addEventListener('input', onMinuteInputHandler);
|
|
96
|
+
var handleMouseDown = function (e) {
|
|
97
|
+
var _a;
|
|
98
|
+
var flatpickrCalendar = (_a = input.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('.flatpickr-calendar.open');
|
|
99
|
+
if (flatpickrCalendar && !flatpickrCalendar.contains(e.target)) {
|
|
100
|
+
var timeInputs = flatpickrCalendar.querySelectorAll('.flatpickr-time input');
|
|
101
|
+
timeInputs.forEach(function (timeInput) {
|
|
102
|
+
if (document.activeElement === timeInput) {
|
|
103
|
+
timeInput.blur();
|
|
104
|
+
}
|
|
105
|
+
});
|
|
106
|
+
}
|
|
107
|
+
};
|
|
108
|
+
document.addEventListener('mousedown', handleMouseDown, true);
|
|
109
|
+
instance._handleMouseDown = handleMouseDown;
|
|
93
110
|
},
|
|
94
111
|
onDestroy: function (selectedDates, dateStr, instance) {
|
|
95
|
-
var _a
|
|
112
|
+
var _a;
|
|
96
113
|
var input = instance.input;
|
|
97
114
|
if (!input) return;
|
|
98
115
|
// 메인 input 이벤트 리스너 제거
|
|
99
116
|
input.removeEventListener('input', onInputHandler);
|
|
117
|
+
var timeInputWrapper = (_a = input.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('.flatpickr-time');
|
|
118
|
+
if (!timeInputWrapper) return;
|
|
100
119
|
// 시간 input 이벤트 리스너 제거
|
|
101
|
-
var hourInput =
|
|
120
|
+
var hourInput = timeInputWrapper.querySelector('.flatpickr-hour');
|
|
102
121
|
if (hourInput) {
|
|
103
122
|
hourInput.removeEventListener('input', onHourInputHandler);
|
|
104
123
|
}
|
|
105
124
|
// 분 input 이벤트 리스너 제거
|
|
106
|
-
var minuteInput =
|
|
125
|
+
var minuteInput = timeInputWrapper.querySelector('.flatpickr-minute');
|
|
107
126
|
if (minuteInput) {
|
|
108
127
|
minuteInput.removeEventListener('input', onMinuteInputHandler);
|
|
109
128
|
}
|
|
129
|
+
var handleMouseDown = instance._handleMouseDown;
|
|
130
|
+
if (handleMouseDown) {
|
|
131
|
+
document.removeEventListener('mousedown', handleMouseDown, true);
|
|
132
|
+
}
|
|
110
133
|
}
|
|
111
134
|
}, datePickerOptions);
|
|
112
135
|
var hasTimeOption = datePickerOptions === null || datePickerOptions === void 0 ? void 0 : datePickerOptions.hasOwnProperty('enableTime');
|
|
113
136
|
var iconName = hasTimeOption && (datePickerOptions === null || datePickerOptions === void 0 ? void 0 : datePickerOptions.hasOwnProperty('noCalendar')) ? 'clock' : 'calendar';
|
|
137
|
+
var processedCurrentDate = (0, _react.useMemo)(function () {
|
|
138
|
+
var hasTime = options.enableTime;
|
|
139
|
+
var isTimeOnly = options.noCalendar;
|
|
140
|
+
var hasSeconds = options.enableSeconds;
|
|
141
|
+
if (!hasTime && !isTimeOnly) return currentDate;
|
|
142
|
+
if (currentDate === null || currentDate === void 0 ? void 0 : currentDate.includes(':')) return currentDate;
|
|
143
|
+
if (isTimeOnly) {
|
|
144
|
+
var endTime = hasSeconds ? '23:59:59' : '23:59';
|
|
145
|
+
var startTime = hasSeconds ? '00:00:00' : '00:00';
|
|
146
|
+
return isEndDate ? endTime : startTime;
|
|
147
|
+
}
|
|
148
|
+
if (!currentDate) return '';
|
|
149
|
+
var format = hasSeconds ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm';
|
|
150
|
+
var momentDate = (0, _moment.default)(currentDate);
|
|
151
|
+
return isEndDate ? momentDate.endOf('day').format(format) : momentDate.startOf('day').format(format);
|
|
152
|
+
}, [currentDate, isEndDate, options.enableSeconds, options.enableTime, options.noCalendar]);
|
|
114
153
|
return (0, _jsxRuntime.jsxs)("div", __assign({
|
|
115
154
|
className: (0, _classnames.default)('ncua-date-picker', "ncua-date-picker--".concat(size), {
|
|
116
155
|
'ncua-date-picker--disabled': attrs.disabled,
|
|
@@ -122,7 +161,7 @@ var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(functi
|
|
|
122
161
|
ref: ref || undefined,
|
|
123
162
|
className: (0, _classnames.default)('ncua-date-picker__input'),
|
|
124
163
|
options: options,
|
|
125
|
-
value:
|
|
164
|
+
value: processedCurrentDate,
|
|
126
165
|
render: function (_a, ref) {
|
|
127
166
|
var defaultValue = _a.defaultValue,
|
|
128
167
|
value = _a.value,
|
|
@@ -134,7 +134,9 @@ var RangeDatePicker = exports.RangeDatePicker = /*#__PURE__*/(0, _react.forwardR
|
|
|
134
134
|
children: [(0, _jsxRuntime.jsx)(_DatePicker.DatePicker, __assign({}, startDateOptions, {
|
|
135
135
|
ref: undefined,
|
|
136
136
|
size: size
|
|
137
|
-
})), "~", (0, _jsxRuntime.jsx)(_DatePicker.DatePicker, __assign({
|
|
137
|
+
})), "~", (0, _jsxRuntime.jsx)(_DatePicker.DatePicker, __assign({
|
|
138
|
+
isEndDate: true
|
|
139
|
+
}, endDateOptions, {
|
|
138
140
|
ref: undefined,
|
|
139
141
|
size: size
|
|
140
142
|
}))]
|
|
@@ -21,8 +21,8 @@ var __assign = void 0 && (void 0).__assign || function () {
|
|
|
21
21
|
return __assign.apply(this, arguments);
|
|
22
22
|
};
|
|
23
23
|
var RangeDatePickerWithButtons = function (_a) {
|
|
24
|
-
var _b = _a.
|
|
25
|
-
|
|
24
|
+
var _b = _a.useYesterdayAsEndDate,
|
|
25
|
+
useYesterdayAsEndDate = _b === void 0 ? false : _b,
|
|
26
26
|
_c = _a.size,
|
|
27
27
|
size = _c === void 0 ? 'xs' : _c,
|
|
28
28
|
currentButtonId = _a.currentButtonId,
|
|
@@ -47,7 +47,11 @@ var RangeDatePickerWithButtons = function (_a) {
|
|
|
47
47
|
unit: currentPeriodItem.unit
|
|
48
48
|
}));
|
|
49
49
|
startDateOptions.onChangeDate(startDate);
|
|
50
|
-
|
|
50
|
+
var endDate = useYesterdayAsEndDate ? (0, _datePicker2.getDateFormat)((0, _datePicker2.getSubtractDate)({
|
|
51
|
+
period: 1,
|
|
52
|
+
unit: 'days'
|
|
53
|
+
})) : (0, _datePicker2.getDateFormat)();
|
|
54
|
+
endDateOptions.onChangeDate(endDate);
|
|
51
55
|
};
|
|
52
56
|
var handleOnChangeDate = function (date, type) {
|
|
53
57
|
type === 'START' ? startDateOptions.onChangeDate(date) : endDateOptions.onChangeDate(date);
|
|
@@ -205,7 +205,7 @@ var InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)(function
|
|
|
205
205
|
type: "text",
|
|
206
206
|
disabled: disabled,
|
|
207
207
|
maxLength: maxLength
|
|
208
|
-
}, props)), renderClearButton(), trailingElement && renderInsideSlot(trailingElement, 'right')
|
|
208
|
+
}, props)), renderClearButton(), renderStatusIcon(), trailingElement && renderInsideSlot(trailingElement, 'right')]
|
|
209
209
|
})), trailingElement && renderOutsideSlot(trailingElement)]
|
|
210
210
|
})), showTextCount && maxLength && (0, _jsxRuntime.jsxs)("div", __assign({
|
|
211
211
|
className: "ncua-input__field-text-count"
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.NumberInput = void 0;
|
|
7
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
var _hooks = require("../../hooks");
|
|
10
|
+
var _button = require("../button");
|
|
11
|
+
var _InputBase = require("./InputBase");
|
|
12
|
+
var __assign = void 0 && (void 0).__assign || function () {
|
|
13
|
+
__assign = Object.assign || function (t) {
|
|
14
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
15
|
+
s = arguments[i];
|
|
16
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
17
|
+
}
|
|
18
|
+
return t;
|
|
19
|
+
};
|
|
20
|
+
return __assign.apply(this, arguments);
|
|
21
|
+
};
|
|
22
|
+
var __rest = void 0 && (void 0).__rest || function (s, e) {
|
|
23
|
+
var t = {};
|
|
24
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
25
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
26
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
27
|
+
}
|
|
28
|
+
return t;
|
|
29
|
+
};
|
|
30
|
+
var NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
|
|
31
|
+
var _b = _a.size,
|
|
32
|
+
size = _b === void 0 ? 'xs' : _b,
|
|
33
|
+
minValue = _a.minValue,
|
|
34
|
+
maxValue = _a.maxValue,
|
|
35
|
+
_c = _a.step,
|
|
36
|
+
step = _c === void 0 ? 1 : _c,
|
|
37
|
+
stepperPosition = _a.stepperPosition,
|
|
38
|
+
disabled = _a.disabled,
|
|
39
|
+
props = __rest(_a, ["size", "minValue", "maxValue", "step", "stepperPosition", "disabled"]);
|
|
40
|
+
var inputRef = (0, _react.useRef)(null);
|
|
41
|
+
var mergedRef = (0, _hooks.useMergeRefs)([ref, inputRef]);
|
|
42
|
+
var getCurrentValue = (0, _react.useCallback)(function () {
|
|
43
|
+
var _a;
|
|
44
|
+
var value = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value;
|
|
45
|
+
return value ? parseFloat(value) : 0;
|
|
46
|
+
}, []);
|
|
47
|
+
var updateValue = (0, _react.useCallback)(function (newValue) {
|
|
48
|
+
if (!inputRef.current) return;
|
|
49
|
+
// min/max 범위 체크
|
|
50
|
+
var clampedValue = newValue;
|
|
51
|
+
if (minValue !== undefined && clampedValue < minValue) {
|
|
52
|
+
clampedValue = minValue;
|
|
53
|
+
}
|
|
54
|
+
if (maxValue !== undefined && clampedValue > maxValue) {
|
|
55
|
+
clampedValue = maxValue;
|
|
56
|
+
}
|
|
57
|
+
inputRef.current.value = clampedValue.toString();
|
|
58
|
+
// onChange 이벤트 트리거
|
|
59
|
+
var event = new Event('input', {
|
|
60
|
+
bubbles: true
|
|
61
|
+
});
|
|
62
|
+
inputRef.current.dispatchEvent(event);
|
|
63
|
+
}, [minValue, maxValue]);
|
|
64
|
+
var handleIncrement = (0, _react.useCallback)(function () {
|
|
65
|
+
var currentValue = getCurrentValue();
|
|
66
|
+
var newValue = currentValue + step;
|
|
67
|
+
if (maxValue === undefined || newValue <= maxValue) {
|
|
68
|
+
updateValue(newValue);
|
|
69
|
+
}
|
|
70
|
+
}, [getCurrentValue, step, maxValue, updateValue]);
|
|
71
|
+
var handleDecrement = (0, _react.useCallback)(function () {
|
|
72
|
+
var currentValue = getCurrentValue();
|
|
73
|
+
var newValue = currentValue - step;
|
|
74
|
+
if (minValue === undefined || newValue >= minValue) {
|
|
75
|
+
updateValue(newValue);
|
|
76
|
+
}
|
|
77
|
+
}, [getCurrentValue, step, minValue, updateValue]);
|
|
78
|
+
var handleKeyDown = (0, _react.useCallback)(function (event) {
|
|
79
|
+
var _a;
|
|
80
|
+
if (disabled) return;
|
|
81
|
+
if (event.key === 'ArrowUp') {
|
|
82
|
+
event.preventDefault();
|
|
83
|
+
handleIncrement();
|
|
84
|
+
} else if (event.key === 'ArrowDown') {
|
|
85
|
+
event.preventDefault();
|
|
86
|
+
handleDecrement();
|
|
87
|
+
}
|
|
88
|
+
// 기존 onKeyDown prop이 있으면 호출
|
|
89
|
+
(_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, event);
|
|
90
|
+
}, [disabled, handleIncrement, handleDecrement, props]);
|
|
91
|
+
var renderStepperButtonGroup = function (position) {
|
|
92
|
+
if (position !== stepperPosition) {
|
|
93
|
+
return null;
|
|
94
|
+
}
|
|
95
|
+
return (0, _jsxRuntime.jsxs)("div", __assign({
|
|
96
|
+
className: "ncua-input__stepper-button-group"
|
|
97
|
+
}, {
|
|
98
|
+
children: [(0, _jsxRuntime.jsx)(_button.ButtonStepper, {
|
|
99
|
+
size: size,
|
|
100
|
+
direction: "up",
|
|
101
|
+
onClick: handleIncrement,
|
|
102
|
+
disabled: disabled
|
|
103
|
+
}), (0, _jsxRuntime.jsx)(_button.ButtonStepper, {
|
|
104
|
+
size: size,
|
|
105
|
+
direction: "down",
|
|
106
|
+
onClick: handleDecrement,
|
|
107
|
+
disabled: disabled
|
|
108
|
+
})]
|
|
109
|
+
}));
|
|
110
|
+
};
|
|
111
|
+
return (0, _jsxRuntime.jsx)(_InputBase.InputBase, __assign({
|
|
112
|
+
type: "number",
|
|
113
|
+
leadingElement: renderStepperButtonGroup('leading') ? {
|
|
114
|
+
type: 'custom',
|
|
115
|
+
children: renderStepperButtonGroup('leading')
|
|
116
|
+
} : props.leadingElement,
|
|
117
|
+
trailingElement: renderStepperButtonGroup('trailing') ? {
|
|
118
|
+
type: 'custom',
|
|
119
|
+
children: renderStepperButtonGroup('trailing')
|
|
120
|
+
} : props.trailingElement,
|
|
121
|
+
ref: mergedRef,
|
|
122
|
+
size: size,
|
|
123
|
+
disabled: disabled,
|
|
124
|
+
min: minValue,
|
|
125
|
+
max: maxValue,
|
|
126
|
+
step: step,
|
|
127
|
+
onKeyDown: handleKeyDown,
|
|
128
|
+
className: "ncua-input__number"
|
|
129
|
+
}, props));
|
|
130
|
+
});
|
|
@@ -14,6 +14,17 @@ Object.keys(_InputBase).forEach(function (key) {
|
|
|
14
14
|
}
|
|
15
15
|
});
|
|
16
16
|
});
|
|
17
|
+
var _NumberInput = require("./NumberInput");
|
|
18
|
+
Object.keys(_NumberInput).forEach(function (key) {
|
|
19
|
+
if (key === "default" || key === "__esModule") return;
|
|
20
|
+
if (key in exports && exports[key] === _NumberInput[key]) return;
|
|
21
|
+
Object.defineProperty(exports, key, {
|
|
22
|
+
enumerable: true,
|
|
23
|
+
get: function () {
|
|
24
|
+
return _NumberInput[key];
|
|
25
|
+
}
|
|
26
|
+
});
|
|
27
|
+
});
|
|
17
28
|
var _PasswordInput = require("./PasswordInput");
|
|
18
29
|
Object.keys(_PasswordInput).forEach(function (key) {
|
|
19
30
|
if (key === "default" || key === "__esModule") return;
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.MessageNotification = void 0;
|
|
7
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
8
|
+
var _dynamic = _interopRequireDefault(require("@ncds/ui-admin-icon/dynamic"));
|
|
9
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
10
|
+
var _react = require("react");
|
|
11
|
+
var _color = require("../../../constant/color");
|
|
12
|
+
var _button = require("../button");
|
|
13
|
+
var _FeaturedIcon = require("../featured-icon/FeaturedIcon");
|
|
14
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
15
|
+
var __assign = void 0 && (void 0).__assign || function () {
|
|
16
|
+
__assign = Object.assign || function (t) {
|
|
17
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
18
|
+
s = arguments[i];
|
|
19
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
23
|
+
return __assign.apply(this, arguments);
|
|
24
|
+
};
|
|
25
|
+
var __rest = void 0 && (void 0).__rest || function (s, e) {
|
|
26
|
+
var t = {};
|
|
27
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
28
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
29
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
30
|
+
}
|
|
31
|
+
return t;
|
|
32
|
+
};
|
|
33
|
+
var iconNameMap = {
|
|
34
|
+
neutral: 'pin-02',
|
|
35
|
+
error: 'alert-triangle',
|
|
36
|
+
warning: 'alert-circle',
|
|
37
|
+
success: 'check-circle'
|
|
38
|
+
};
|
|
39
|
+
var iconColorMap = {
|
|
40
|
+
neutral: 'gray700',
|
|
41
|
+
error: 'red500',
|
|
42
|
+
warning: 'orange500',
|
|
43
|
+
success: 'green600'
|
|
44
|
+
};
|
|
45
|
+
var MessageNotification = exports.MessageNotification = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
|
|
46
|
+
var title = _a.title,
|
|
47
|
+
supportingText = _a.supportingText,
|
|
48
|
+
icon = _a.icon,
|
|
49
|
+
_b = _a.color,
|
|
50
|
+
color = _b === void 0 ? 'neutral' : _b,
|
|
51
|
+
onClose = _a.onClose,
|
|
52
|
+
className = _a.className,
|
|
53
|
+
actions = _a.actions,
|
|
54
|
+
onHidePermanently = _a.onHidePermanently,
|
|
55
|
+
rest = __rest(_a, ["title", "supportingText", "icon", "color", "onClose", "className", "actions", "onHidePermanently"]);
|
|
56
|
+
// message 타입은 neutral, error, warning, success 4가지 색상만 지원
|
|
57
|
+
var validColor = color === 'info' ? 'neutral' : color;
|
|
58
|
+
var iconColor = validColor;
|
|
59
|
+
var featuredIconProps = {
|
|
60
|
+
name: icon || iconNameMap[validColor] || 'pin-02',
|
|
61
|
+
size: 'lg',
|
|
62
|
+
color: iconColor,
|
|
63
|
+
theme: 'light-circle'
|
|
64
|
+
};
|
|
65
|
+
var closeIconColor = _color.COLOR[iconColorMap[validColor] || 'gray700'];
|
|
66
|
+
return (0, _jsxRuntime.jsx)("div", __assign({
|
|
67
|
+
ref: ref,
|
|
68
|
+
className: (0, _classnames.default)('ncua-message-notification', "ncua-message-notification--".concat(validColor), className),
|
|
69
|
+
role: "alert"
|
|
70
|
+
}, rest, {
|
|
71
|
+
children: (0, _jsxRuntime.jsx)("div", __assign({
|
|
72
|
+
className: "ncua-message-notification__container"
|
|
73
|
+
}, {
|
|
74
|
+
children: (0, _jsxRuntime.jsxs)("div", __assign({
|
|
75
|
+
className: "ncua-message-notification__content"
|
|
76
|
+
}, {
|
|
77
|
+
children: [(0, _jsxRuntime.jsxs)("div", __assign({
|
|
78
|
+
className: "ncua-message-notification__content-wrapper"
|
|
79
|
+
}, {
|
|
80
|
+
children: [iconNameMap[validColor] && (0, _jsxRuntime.jsx)(_FeaturedIcon.FeaturedIcon, __assign({}, featuredIconProps, {
|
|
81
|
+
className: "ncua-message-notification__icon"
|
|
82
|
+
})), (0, _jsxRuntime.jsxs)("div", __assign({
|
|
83
|
+
className: "ncua-message-notification__text-container"
|
|
84
|
+
}, {
|
|
85
|
+
children: [(0, _jsxRuntime.jsx)("span", __assign({
|
|
86
|
+
className: "ncua-message-notification__title"
|
|
87
|
+
}, {
|
|
88
|
+
children: title
|
|
89
|
+
})), supportingText && (0, _jsxRuntime.jsx)("span", __assign({
|
|
90
|
+
className: "ncua-message-notification__supporting-text"
|
|
91
|
+
}, {
|
|
92
|
+
children: supportingText
|
|
93
|
+
}))]
|
|
94
|
+
}))]
|
|
95
|
+
})), (0, _jsxRuntime.jsx)("div", __assign({
|
|
96
|
+
className: "ncua-message-notification__actions-container"
|
|
97
|
+
}, {
|
|
98
|
+
children: actions && (0, _jsxRuntime.jsx)("div", __assign({
|
|
99
|
+
className: "ncua-message-notification__actions"
|
|
100
|
+
}, {
|
|
101
|
+
children: actions.map(function (action) {
|
|
102
|
+
return (0, _jsxRuntime.jsx)(_button.Button, {
|
|
103
|
+
size: "xs",
|
|
104
|
+
hierarchy: action.hierarchy || 'text',
|
|
105
|
+
label: action.label,
|
|
106
|
+
onClick: action === null || action === void 0 ? void 0 : action.onClick
|
|
107
|
+
}, "".concat(action.label, "-").concat(action.hierarchy));
|
|
108
|
+
})
|
|
109
|
+
}))
|
|
110
|
+
})), (0, _jsxRuntime.jsxs)("div", __assign({
|
|
111
|
+
className: "ncua-message-notification__footer-container"
|
|
112
|
+
}, {
|
|
113
|
+
children: [onHidePermanently && (0, _jsxRuntime.jsx)("button", __assign({
|
|
114
|
+
type: "button",
|
|
115
|
+
className: (0, _classnames.default)('ncua-notification__action-button', 'ncua-notification__action-button--text', 'ncua-message-notification__hide-link'),
|
|
116
|
+
onClick: onHidePermanently
|
|
117
|
+
}, {
|
|
118
|
+
children: "\uB2E4\uC2DC \uBCF4\uC9C0 \uC54A\uAE30"
|
|
119
|
+
})), onClose && (0, _jsxRuntime.jsx)("button", __assign({
|
|
120
|
+
type: "button",
|
|
121
|
+
className: "ncua-message-notification__close-button",
|
|
122
|
+
onClick: onClose,
|
|
123
|
+
"aria-label": "\uC54C\uB9BC \uB2EB\uAE30"
|
|
124
|
+
}, {
|
|
125
|
+
children: (0, _jsxRuntime.jsx)(_dynamic.default, {
|
|
126
|
+
name: "x-close",
|
|
127
|
+
width: 20,
|
|
128
|
+
height: 20,
|
|
129
|
+
color: closeIconColor
|
|
130
|
+
})
|
|
131
|
+
}))]
|
|
132
|
+
}))]
|
|
133
|
+
}))
|
|
134
|
+
}))
|
|
135
|
+
}));
|
|
136
|
+
});
|
|
137
|
+
MessageNotification.displayName = 'MessageNotification';
|
|
@@ -8,6 +8,7 @@ var _jsxRuntime = require("react/jsx-runtime");
|
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
var _FloatingNotification = require("./FloatingNotification");
|
|
10
10
|
var _FullWidthNotification = require("./FullWidthNotification");
|
|
11
|
+
var _MessageNotification = require("./MessageNotification");
|
|
11
12
|
var __assign = void 0 && (void 0).__assign || function () {
|
|
12
13
|
__assign = Object.assign || function (t) {
|
|
13
14
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
@@ -32,14 +33,27 @@ var Notification = exports.Notification = /*#__PURE__*/(0, _react.forwardRef)(fu
|
|
|
32
33
|
_c = _a.color,
|
|
33
34
|
color = _c === void 0 ? 'neutral' : _c,
|
|
34
35
|
rest = __rest(_a, ["type", "color"]);
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
|
|
36
|
+
if (type === 'floating') {
|
|
37
|
+
return (0, _jsxRuntime.jsx)(_FloatingNotification.FloatingNotification, __assign({
|
|
38
|
+
color: color
|
|
39
|
+
}, rest, {
|
|
40
|
+
ref: ref
|
|
41
|
+
}));
|
|
42
|
+
}
|
|
43
|
+
if (type === 'full-width') {
|
|
44
|
+
return (0, _jsxRuntime.jsx)(_FullWidthNotification.FullWidthNotification, __assign({
|
|
45
|
+
color: color
|
|
46
|
+
}, rest, {
|
|
47
|
+
ref: ref
|
|
48
|
+
}));
|
|
49
|
+
}
|
|
50
|
+
if (type === 'message') {
|
|
51
|
+
return (0, _jsxRuntime.jsx)(_MessageNotification.MessageNotification, __assign({
|
|
52
|
+
color: color
|
|
53
|
+
}, rest, {
|
|
54
|
+
ref: ref
|
|
55
|
+
}));
|
|
56
|
+
}
|
|
57
|
+
return null;
|
|
44
58
|
});
|
|
45
59
|
Notification.displayName = 'Notification';
|
|
@@ -35,4 +35,15 @@ Object.keys(_FullWidthNotification).forEach(function (key) {
|
|
|
35
35
|
return _FullWidthNotification[key];
|
|
36
36
|
}
|
|
37
37
|
});
|
|
38
|
+
});
|
|
39
|
+
var _MessageNotification = require("./MessageNotification");
|
|
40
|
+
Object.keys(_MessageNotification).forEach(function (key) {
|
|
41
|
+
if (key === "default" || key === "__esModule") return;
|
|
42
|
+
if (key in exports && exports[key] === _MessageNotification[key]) return;
|
|
43
|
+
Object.defineProperty(exports, key, {
|
|
44
|
+
enumerable: true,
|
|
45
|
+
get: function () {
|
|
46
|
+
return _MessageNotification[key];
|
|
47
|
+
}
|
|
48
|
+
});
|
|
38
49
|
});
|
|
@@ -74,22 +74,26 @@ var Tooltip = function (_a) {
|
|
|
74
74
|
hideArrow = _f === void 0 ? false : _f,
|
|
75
75
|
_g = _a.type,
|
|
76
76
|
type = _g === void 0 ? 'short' : _g,
|
|
77
|
+
_h = _a.iconColor,
|
|
78
|
+
iconColor = _h === void 0 ? 'var(--gray-300)' : _h,
|
|
79
|
+
_j = _a.iconStyle,
|
|
80
|
+
iconStyle = _j === void 0 ? 'help-circle' : _j,
|
|
77
81
|
className = _a.className;
|
|
78
82
|
var iconSize = size === 'sm' ? 14 : 16;
|
|
79
83
|
var tooltipRef = (0, _react.useRef)(null);
|
|
80
84
|
var tooltipBgRef = (0, _react.useRef)(null);
|
|
81
|
-
var
|
|
82
|
-
calculatedPosition =
|
|
83
|
-
setCalculatedPosition =
|
|
84
|
-
var _j = (0, _react.useState)(false),
|
|
85
|
-
isVisible = _j[0],
|
|
86
|
-
setIsVisible = _j[1];
|
|
87
|
-
var _k = (0, _react.useState)(false),
|
|
88
|
-
isManuallyClose = _k[0],
|
|
89
|
-
setIsManuallyClose = _k[1];
|
|
85
|
+
var _k = (0, _react.useState)(position === 'auto' ? 'bottom' : position),
|
|
86
|
+
calculatedPosition = _k[0],
|
|
87
|
+
setCalculatedPosition = _k[1];
|
|
90
88
|
var _l = (0, _react.useState)(false),
|
|
91
|
-
|
|
92
|
-
|
|
89
|
+
isVisible = _l[0],
|
|
90
|
+
setIsVisible = _l[1];
|
|
91
|
+
var _m = (0, _react.useState)(false),
|
|
92
|
+
isManuallyClose = _m[0],
|
|
93
|
+
setIsManuallyClose = _m[1];
|
|
94
|
+
var _o = (0, _react.useState)(false),
|
|
95
|
+
isMeasuring = _o[0],
|
|
96
|
+
setIsMeasuring = _o[1];
|
|
93
97
|
var handleMouseEnter = (0, _react.useCallback)(function () {
|
|
94
98
|
if (isManuallyClose) return;
|
|
95
99
|
setIsVisible(true);
|
|
@@ -137,15 +141,23 @@ var Tooltip = function (_a) {
|
|
|
137
141
|
onMouseEnter: handleMouseEnter,
|
|
138
142
|
onMouseLeave: handleMouseLeave
|
|
139
143
|
}, {
|
|
140
|
-
children: [iconType === 'stroke' ? (0, _jsxRuntime.jsx)(_uiAdminIcon.HelpCircle, {
|
|
144
|
+
children: [iconStyle === 'help-circle' && (iconType === 'stroke' ? (0, _jsxRuntime.jsx)(_uiAdminIcon.HelpCircle, {
|
|
141
145
|
width: iconSize,
|
|
142
146
|
height: iconSize,
|
|
143
|
-
color:
|
|
147
|
+
color: iconColor
|
|
144
148
|
}) : (0, _jsxRuntime.jsx)(_uiAdminIcon.HelpCircleFill, {
|
|
145
149
|
width: iconSize,
|
|
146
150
|
height: iconSize,
|
|
147
|
-
color:
|
|
148
|
-
}), (0, _jsxRuntime.
|
|
151
|
+
color: iconColor
|
|
152
|
+
})), iconStyle === 'alert-circle' && (iconType === 'stroke' ? (0, _jsxRuntime.jsx)(_uiAdminIcon.AlertCircle, {
|
|
153
|
+
width: iconSize,
|
|
154
|
+
height: iconSize,
|
|
155
|
+
color: iconColor
|
|
156
|
+
}) : (0, _jsxRuntime.jsx)(_uiAdminIcon.AlertCircleFill, {
|
|
157
|
+
width: iconSize,
|
|
158
|
+
height: iconSize,
|
|
159
|
+
color: iconColor
|
|
160
|
+
})), (0, _jsxRuntime.jsxs)("span", __assign({
|
|
149
161
|
ref: tooltipBgRef,
|
|
150
162
|
className: tooltipBgClassName
|
|
151
163
|
}, {
|
|
@@ -153,12 +165,11 @@ var Tooltip = function (_a) {
|
|
|
153
165
|
className: "ncua-tooltip__title"
|
|
154
166
|
}, {
|
|
155
167
|
children: title
|
|
156
|
-
})), content && (0, _jsxRuntime.jsx)("span", {
|
|
157
|
-
className: "ncua-tooltip__content"
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
}), type === 'long' && (0, _jsxRuntime.jsx)(_ButtonCloseX.ButtonCloseX, {
|
|
168
|
+
})), content && (0, _jsxRuntime.jsx)("span", __assign({
|
|
169
|
+
className: "ncua-tooltip__content"
|
|
170
|
+
}, {
|
|
171
|
+
children: content
|
|
172
|
+
})), type === 'long' && (0, _jsxRuntime.jsx)(_ButtonCloseX.ButtonCloseX, {
|
|
162
173
|
className: "ncua-tooltip__close-button",
|
|
163
174
|
size: "xs",
|
|
164
175
|
theme: tooltipType === 'white' ? 'dark' : 'light',
|
|
@@ -252,6 +252,24 @@ var ComboBox = /** @class */function () {
|
|
|
252
252
|
ComboBox.prototype.toggleSelectAll = function () {
|
|
253
253
|
this.unifiedSelectBox.toggleSelectAll();
|
|
254
254
|
};
|
|
255
|
+
/**
|
|
256
|
+
* 드롭다운을 스크롤의 바닥으로 이동
|
|
257
|
+
*/
|
|
258
|
+
ComboBox.prototype.scrollToBottom = function () {
|
|
259
|
+
this.unifiedSelectBox.scrollToBottom();
|
|
260
|
+
};
|
|
261
|
+
/**
|
|
262
|
+
* 전체 선택 버튼의 텍스트를 외부에서 변경
|
|
263
|
+
*/
|
|
264
|
+
ComboBox.prototype.setSelectAllButtonText = function (text) {
|
|
265
|
+
this.unifiedSelectBox.setSelectAllButtonText(text);
|
|
266
|
+
};
|
|
267
|
+
/**
|
|
268
|
+
* 특정 인덱스의 옵션으로 포커스 이동
|
|
269
|
+
*/
|
|
270
|
+
ComboBox.prototype.setFocusIndex = function (index) {
|
|
271
|
+
this.unifiedSelectBox.setFocusIndex(index);
|
|
272
|
+
};
|
|
255
273
|
return ComboBox;
|
|
256
274
|
}();
|
|
257
275
|
export { ComboBox };
|