@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
409 lines (408 loc) • 16.5 kB
JavaScript
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
import React, { useCallback, useEffect, useState } from "react";
import classNames from "classnames";
import { ArrowLeft, ArrowRight, DoubleLeft, DoubleRight } from "./icon";
import { ComponentDefaults } from "../../utils/typings";
import { convertDateToDay, convertDayToDate, getCurrentMonthDays, getCurrentWeekDays, getPrevMonthDays } from "./utils";
import { useConfig } from "../configprovider";
import { usePropsValue } from "../../hooks/use-props-value";
var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
type: 'single',
firstDayOfWeek: 0
});
var prefixCls = 'nut-calendarcard';
export var CalendarCard = /*#__PURE__*/ React.forwardRef(function(props, ref) {
var locale = useConfig().locale;
var _$_object_spread = _object_spread({}, defaultProps, props), style = _$_object_spread.style, className = _$_object_spread.className, type = _$_object_spread.type, value = _$_object_spread.value, defaultValue = _$_object_spread.defaultValue, firstDayOfWeek = _$_object_spread.firstDayOfWeek, startDate = _$_object_spread.startDate, endDate = _$_object_spread.endDate, disableDay = _$_object_spread.disableDay, renderDay = _$_object_spread.renderDay, renderDayTop = _$_object_spread.renderDayTop, renderDayBottom = _$_object_spread.renderDayBottom, onDayClick = _$_object_spread.onDayClick, onPageChange = _$_object_spread.onPageChange, onChange = _$_object_spread.onChange;
// 当前月份信息
var _useState = _sliced_to_array(useState(function() {
var date = new Date(Date.now());
var val = value || defaultValue;
if (Array.isArray(val)) {
if (val.length) {
date = val[0];
}
} else if (val) {
date = val;
}
return {
year: date.getFullYear(),
month: date.getMonth() + 1
};
}), 2), month = _useState[0], setMonth = _useState[1];
// 当前月份对应的日期(6 * 7 视图)
var _useState1 = _sliced_to_array(useState([]), 2), days = _useState1[0], setDays = _useState1[1];
var valueToRange = function(val) {
if (Array.isArray(val)) {
return val.map(function(date) {
return convertDateToDay(date);
});
}
return val ? [
convertDateToDay(val)
] : [];
};
var rangeTovalue = function(range) {
if (Array.isArray(range)) {
return range.map(function(day) {
return convertDayToDate(day);
});
}
return range ? [
convertDayToDate(range)
] : [];
};
var _usePropsValue = _sliced_to_array(usePropsValue({
value: value ? valueToRange(value) : undefined,
defaultValue: defaultValue ? valueToRange(defaultValue) : undefined,
finalValue: []
}), 2), innerValue = _usePropsValue[0], setInnerValue = _usePropsValue[1];
var change = function(v) {
setInnerValue(v);
if (type === 'single') {
var date = convertDayToDate(v[0]);
onChange === null || onChange === void 0 ? void 0 : onChange(date);
} else if (type === 'multiple' || type === 'range' || type === 'week') {
var val = rangeTovalue(v);
onChange === null || onChange === void 0 ? void 0 : onChange(val);
}
};
var getDays = useCallback(function(month) {
var y = month.year;
var m = month.month;
var days = _to_consumable_array(getPrevMonthDays(y, m, firstDayOfWeek)).concat(_to_consumable_array(getCurrentMonthDays(y, m)));
var size = days.length;
var yearOfNextMonth = month.month === 12 ? month.year + 1 : month.year;
var monthOfNextMonth = month.month === 12 ? 1 : month.month + 1;
// 补全 6 行 7 列视图
for(var i = 1; i <= 42 - size; i++){
days.push({
type: 'next',
year: yearOfNextMonth,
month: monthOfNextMonth,
date: i
});
}
return days;
}, [
firstDayOfWeek
]);
useEffect(function() {
var newDays = getDays(month);
setDays(newDays);
onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(month);
}, [
month,
getDays,
onPageChange,
firstDayOfWeek
]);
var isSameDay = function(day1, day2) {
return (day1 === null || day1 === void 0 ? void 0 : day1.year) === (day2 === null || day2 === void 0 ? void 0 : day2.year) && (day1 === null || day1 === void 0 ? void 0 : day1.month) === (day2 === null || day2 === void 0 ? void 0 : day2.month) && (day1 === null || day1 === void 0 ? void 0 : day1.date) === (day2 === null || day2 === void 0 ? void 0 : day2.date);
};
var compareDay = function(day1, day2) {
if (day1 && day2) {
if (day1.year === day2.year) {
if (day1.month === day2.month) {
return day1.date - day2.date;
}
return day1.month - day2.month;
}
return day1.year - day2.year;
}
};
var isDisable = function(day) {
if (disableDay && disableDay(day)) {
return true;
}
if (startDate && Number(compareDay(day, convertDateToDay(startDate))) < 0) {
return true;
}
if (endDate && Number(compareDay(day, convertDateToDay(endDate))) > 0) {
return true;
}
return false;
};
var isActive = function(day) {
if (type === 'single' || type === 'multiple') {
var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
try {
for(var _iterator = innerValue[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
var val = _step.value;
if (isSameDay(day, val)) {
return true;
}
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally{
try {
if (!_iteratorNormalCompletion && _iterator.return != null) {
_iterator.return();
}
} finally{
if (_didIteratorError) {
throw _iteratorError;
}
}
}
} else if (type === 'range' && innerValue.length === 1 && isSameDay(innerValue[0], day)) {
return true;
}
return false;
};
var isStart = function(day) {
return (type === 'range' || type === 'week') && innerValue.length === 2 && isSameDay(day, innerValue[0]);
};
var isEnd = function(day) {
return (type === 'range' || type === 'week') && innerValue.length === 2 && isSameDay(day, innerValue[1]);
};
var isMid = function(day) {
if (type === 'range' || type === 'week') {
if (innerValue.length === 2) {
var c1 = compareDay(innerValue[0], day);
var c2 = compareDay(day, innerValue[1]);
if (c1 && c1 < 0 && c2 && c2 < 0) {
return true;
}
}
}
return false;
};
var isWeekend = function(day) {
var d = new Date(day.year, day.month - 1, day.date).getDay();
return d === 0 || d === 6;
};
var getClasses = function(day) {
/**
* active: single、multiple 激活日期
* start: 范围开始日期
* end: 范围结束日期
* mid: 范围中间日期
*/ if (isDisable(day)) {
return [
'disabled'
];
}
var res = [];
if (day.type === 'current') {
if (isActive(day)) {
res.push('active');
}
if (isStart(day)) {
res.push('start');
}
if (isEnd(day)) {
res.push('end');
}
if (isMid(day)) {
res.push('mid');
}
if (isWeekend(day)) {
res.push('weekend');
}
}
return res;
};
var jumpTo = function(year, month) {
if (startDate) {
var c = compareDay({
year: year,
month: month,
date: 31
}, convertDateToDay(startDate));
if (c && c < 0) {
return;
}
}
if (endDate) {
var c1 = compareDay({
year: year,
month: month,
date: 1
}, convertDateToDay(endDate));
if (c1 && c1 > 0) {
return;
}
}
setMonth({
year: year,
month: month
});
};
var jump = function() {
var step = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 1;
var current = month.year * 12 + month.month;
var newMonth = (current + step) % 12;
if (newMonth === 0) {
newMonth = 12;
}
var newYear = Math.floor((current + step - newMonth) / 12);
jumpTo(newYear, newMonth);
};
React.useImperativeHandle(ref, function() {
return {
jump: jump,
jumpTo: jumpTo
};
});
var handleDayClick = function(day) {
onDayClick === null || onDayClick === void 0 ? void 0 : onDayClick(day);
if (day.type === 'prev' || day.type === 'next' || isDisable(day)) {
return;
}
switch(type){
case 'single':
{
if (innerValue[0] && isSameDay(innerValue[0], day)) {
change([]);
} else {
change([
day
]);
}
break;
}
case 'multiple':
{
var t = innerValue.find(function(i) {
return isSameDay(i, day);
});
if (t) {
change(innerValue.filter(function(i) {
return i !== t;
}));
} else {
change(_to_consumable_array(innerValue).concat([
day
]));
}
break;
}
case 'range':
{
var len = innerValue.length;
if (len === 0 || len === 2) {
change([
day
]);
} else if (len === 1) {
var t1 = compareDay(innerValue[0], day);
if (t1 === null || t1 === undefined) {
change([]);
} else if (t1 < 0) {
change([
innerValue[0],
day
]);
} else {
change([
day,
innerValue[0]
]);
}
} else {
console.warn('[NutUI] Calendar range error');
}
break;
}
case 'week':
{
if (innerValue.length === 2 || innerValue.length === 0) {
var _getCurrentWeekDays = _sliced_to_array(getCurrentWeekDays(day, firstDayOfWeek), 2), left = _getCurrentWeekDays[0], right = _getCurrentWeekDays[1];
change([
left,
right
]);
} else {
console.warn('[NutUI] Calendar week error');
}
break;
}
default:
{
console.warn('[NutUI] Calendar type error');
}
}
};
var monthTitle = locale.calendaritem.monthTitle;
var renderHeader = function() {
return /*#__PURE__*/ React.createElement("div", {
className: "".concat(prefixCls, "-header")
}, /*#__PURE__*/ React.createElement("div", {
className: "".concat(prefixCls, "-header-left")
}, /*#__PURE__*/ React.createElement("div", {
className: "double-left",
onClick: function() {
return jump(-12);
}
}, /*#__PURE__*/ React.createElement(DoubleLeft, null)), /*#__PURE__*/ React.createElement("div", {
className: "left",
onClick: function() {
return jump(-1);
}
}, /*#__PURE__*/ React.createElement(ArrowLeft, null))), /*#__PURE__*/ React.createElement("div", {
className: "".concat(prefixCls, "-header-title")
}, monthTitle(month.year, month.month)), /*#__PURE__*/ React.createElement("div", {
className: "".concat(prefixCls, "-header-right")
}, /*#__PURE__*/ React.createElement("div", {
className: "right",
onClick: function() {
return jump(1);
}
}, /*#__PURE__*/ React.createElement(ArrowRight, null)), /*#__PURE__*/ React.createElement("div", {
className: "double-right",
onClick: function() {
return jump(12);
}
}, /*#__PURE__*/ React.createElement(DoubleRight, null))));
};
var _useState2 = _sliced_to_array(useState(function() {
var weekdays = locale.calendaritem.weekdays.map(function(day, index) {
return {
name: day,
key: index
};
});
return _to_consumable_array(weekdays.slice(firstDayOfWeek, 7)).concat(_to_consumable_array(weekdays.slice(0, firstDayOfWeek)));
}), 1), weekHeader = _useState2[0];
var renderContent = function() {
return /*#__PURE__*/ React.createElement("div", {
className: "".concat(prefixCls, "-content")
}, /*#__PURE__*/ React.createElement("div", {
className: "".concat(prefixCls, "-days")
}, weekHeader.map(function(day) {
return /*#__PURE__*/ React.createElement("div", {
className: classNames("".concat(prefixCls, "-day"), 'header', {
weekend: day.key === 0 || day.key === 6
}),
key: day.key
}, day.name);
})), /*#__PURE__*/ React.createElement("div", {
className: "".concat(prefixCls, "-days")
}, days.map(function(day) {
return /*#__PURE__*/ React.createElement("div", {
className: classNames("".concat(prefixCls, "-day"), day.type, getClasses(day)),
key: "".concat(day.year, "-").concat(day.month, "-").concat(day.date),
onClick: function() {
return handleDayClick(day);
}
}, /*#__PURE__*/ React.createElement("div", {
className: "".concat(prefixCls, "-day-top")
}, renderDayTop ? renderDayTop(day) : ''), /*#__PURE__*/ React.createElement("div", {
className: "".concat(prefixCls, "-day-inner")
}, renderDay ? renderDay(day) : day.date), /*#__PURE__*/ React.createElement("div", {
className: "".concat(prefixCls, "-day-bottom")
}, renderDayBottom ? renderDayBottom(day) : ''));
})));
};
return days.length > 0 ? /*#__PURE__*/ React.createElement("div", {
className: classNames(prefixCls, className),
style: style
}, renderHeader(), renderContent()) : null;
});
CalendarCard.displayName = 'NutCalendarCard';