@shinyongjun/react-datepicker
Version:
DatePicker component in React App.
45 lines • 2.39 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);
};
import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useRef } from 'react';
import { NAME_SPACE } from '../../constants/core';
import { valueToDateObj } from '../../utils/datetime';
import { addLeadingZero } from '../../utils/string';
export default function TimePickerSelectorList(_a) {
var value = _a.value, timeKey = _a.timeKey, items = _a.items, timeValue = _a.timeValue, onChange = _a.onChange;
var listRef = useRef(null);
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 = valueToDateObj(value, newTimeValue);
if (onChange) {
onChange(newDate);
}
};
return (_jsx("div", { className: "".concat(NAME_SPACE, "__timepicker-list"), ref: listRef, children: items.map(function (item, index) { return (_jsx("div", { className: "".concat(NAME_SPACE, "__timepicker-list-item"), children: _jsx("button", { type: "button", className: "".concat(NAME_SPACE, "__timepicker-list-button"), "data-active": item === timeValue[timeKey], onClick: function () { return handleClick(item); }, children: addLeadingZero(item) }) }, index)); }) }));
}
//# sourceMappingURL=SelectorList.js.map