zent
Version:
一套前端设计语言和基于React的实现
53 lines (52 loc) • 3.69 kB
JavaScript
import { __assign, __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cx from 'classnames';
import { useCallback, useMemo } from 'react';
import Tooltip from '../../tooltip';
var prefixCls = 'zent-datepicker-panel-body-cells';
var getCellClassName = function (_a) {
var _b;
var isInView = _a.isInView, isCurrent = _a.isCurrent, isSelected = _a.isSelected, isDisabled = _a.isDisabled, isInRange = _a.isInRange, isInHoverRange = _a.isInHoverRange;
return cx(prefixCls + "_item", (_b = {},
_b[prefixCls + "_over"] = !isInView,
_b[prefixCls + "_disabled"] = isDisabled,
_b[prefixCls + "_available"] = !isSelected && !isDisabled,
_b[prefixCls + "_current"] = isInView && isCurrent,
_b[prefixCls + "_selected"] = isSelected,
_b[prefixCls + "_in_range"] = !isDisabled && isInRange,
_b[prefixCls + "_in_hover_range"] = !isDisabled && isInHoverRange,
_b));
};
var PanelCell = function (_a) {
var cells = _a.cells, onSelected = _a.onSelected, col = _a.col, popText = _a.popText, onHover = _a.onHover;
var onCellClick = useCallback(function (_a) {
var isDisabled = _a.isDisabled, value = _a.value;
if (isDisabled)
return;
onSelected(value);
}, [onSelected]);
var onCellMouseOver = useCallback(function (_a) {
var isDisabled = _a.isDisabled, value = _a.value;
if (isDisabled)
return;
onHover === null || onHover === void 0 ? void 0 : onHover(value);
}, [onHover]);
var rows = useMemo(function () {
var uls = [];
var rowCells = [];
cells.map(function (_a, index) {
var value = _a.value, text = _a.text, lunarText = _a.lunarText, classNameProps = __rest(_a, ["value", "text", "lunarText"]);
var isSelected = classNameProps.isSelected, isDisabled = classNameProps.isDisabled;
var cellNode = (_jsx("li", __assign({ className: getCellClassName(classNameProps), onClick: function () { return onCellClick({ isDisabled: isDisabled, value: value }); }, "data-zv": '10.0.17' }, { children: lunarText ? (_jsxs("div", __assign({ className: "zent-datepicker-cell-inner zent-datepicker-lunar-cell", onMouseEnter: function () { return onCellMouseOver({ isDisabled: isDisabled, value: value }); }, onMouseLeave: function () { return onCellMouseOver({ isDisabled: isDisabled, value: null }); }, "data-zv": '10.0.17' }, { children: [_jsx("div", __assign({ "data-zv": '10.0.17' }, { children: text }), void 0), _jsx("div", __assign({ className: "zent-datepicker-lunar-cell_text", "data-zv": '10.0.17' }, { children: lunarText }), void 0)] }), void 0)) : (_jsx("div", __assign({ className: "zent-datepicker-cell-inner", onMouseEnter: function () { return onCellMouseOver({ isDisabled: isDisabled, value: value }); }, onMouseLeave: function () { return onCellMouseOver({ isDisabled: isDisabled, value: null }); }, "data-zv": '10.0.17' }, { children: text }), void 0)) }), value.getTime()));
var cell = popText && isSelected ? (_jsx(Tooltip, __assign({ visible: true, title: popText }, { children: cellNode }), value.getTime())) : (cellNode);
rowCells.push(cell);
if (index % col === col - 1) {
uls.push(_jsx("ul", __assign({ className: prefixCls + "_row", "data-zv": '10.0.17' }, { children: rowCells }), value.getTime()));
rowCells = [];
}
});
return uls;
}, [cells, col, popText, onCellClick, onCellMouseOver]);
return _jsx("ul", __assign({ className: prefixCls, "data-zv": '10.0.17' }, { children: rows }), void 0);
};
export default PanelCell;