@shinyongjun/react-datepicker
Version:
DatePicker component in React App.
48 lines • 2.6 kB
JavaScript
;
'use client';
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);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = TimePickerSelectorList;
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var core_1 = require("../../constants/core");
var datetime_1 = require("../../utils/datetime");
var string_1 = require("../../utils/string");
function TimePickerSelectorList(_a) {
var value = _a.value, timeKey = _a.timeKey, items = _a.items, timeValue = _a.timeValue, onChange = _a.onChange;
var listRef = (0, react_1.useRef)(null);
(0, react_1.useEffect)(function () {
var _a, _b, _c;
// Scroll 가운데 정렬
if (!listRef.current)
return;
var clientHeight = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight;
var scrollHeight = (_b = listRef.current) === null || _b === void 0 ? void 0 : _b.scrollHeight;
var itemsCount = items.length;
var itemHeight = scrollHeight / itemsCount;
var activeIndex = items.findIndex(function (item) { return item === timeValue[timeKey]; });
(_c = listRef.current) === null || _c === void 0 ? void 0 : _c.scrollTo({
top: activeIndex * itemHeight - (clientHeight - itemHeight) / 2,
});
}, [items, timeKey, timeValue]);
var handleClick = function (v) {
var _a;
var newTimeValue = __assign(__assign({}, timeValue), (_a = {}, _a[timeKey] = v, _a));
var newDate = (0, datetime_1.valueToDateObj)(value, newTimeValue);
if (onChange) {
onChange(newDate);
}
};
return ((0, jsx_runtime_1.jsx)("div", { className: "".concat(core_1.NAME_SPACE, "__timepicker-list"), ref: listRef, children: items.map(function (item, index) { return ((0, jsx_runtime_1.jsx)("div", { className: "".concat(core_1.NAME_SPACE, "__timepicker-list-item"), children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "".concat(core_1.NAME_SPACE, "__timepicker-list-button"), "data-active": item === timeValue[timeKey], onClick: function () { return handleClick(item); }, children: (0, string_1.addLeadingZero)(item) }) }, index)); }) }));
}
//# sourceMappingURL=SelectorList.js.map