@gizwits/vantui
Version:
机智云组件库
195 lines • 6.74 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import { View } from '@tarojs/components';
import React, { useState, useCallback, useEffect, forwardRef, useImperativeHandle } from 'react';
import * as utils from '../../../wxs/utils';
import { getMonthEndDay, compareDay, getPrevDay, getNextDay } from '../../utils';
import * as computed from './wxs';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
function Index(props, ref) {
var date = props.date,
rowHeight = props.rowHeight,
showMonthTitle = props.showMonthTitle,
showMark = props.showMark,
color = props.color,
type = props.type,
firstDayOfWeek = props.firstDayOfWeek,
currentDate = props.currentDate,
onClick = props.onClick,
minDate = props.minDate,
maxDate = props.maxDate,
allowSameDay = props.allowSameDay,
formatter = props.formatter,
className = props.className,
id = props.id;
var _useState = useState(true),
_useState2 = _slicedToArray(_useState, 2),
visible = _useState2[0],
setVisible = _useState2[1];
var _useState3 = useState([]),
_useState4 = _slicedToArray(_useState3, 2),
days = _useState4[0],
setDays_ = _useState4[1];
var onClick_ = useCallback(function (event) {
var index = event.currentTarget.dataset.index;
var item = days[index];
if (item.type !== 'disabled') {
if (onClick) onClick(item);
}
}, [days, onClick]);
var getMultipleDayType = useCallback(function (day) {
if (!Array.isArray(currentDate)) {
return '';
}
var isSelected = function isSelected(date) {
return currentDate.some(function (item) {
return compareDay(item, date) === 0;
});
};
if (isSelected(day)) {
var prevDay = getPrevDay(day);
var nextDay = getNextDay(day);
var prevSelected = isSelected(prevDay);
var nextSelected = isSelected(nextDay);
if (prevSelected && nextSelected) {
return 'multiple-middle';
}
if (prevSelected) {
return 'end';
}
return nextSelected ? 'start' : 'multiple-selected';
}
return '';
}, [currentDate]);
var getRangeDayType = useCallback(function (day) {
if (!Array.isArray(currentDate)) {
return '';
}
var _currentDate = _slicedToArray(currentDate, 2),
startDay = _currentDate[0],
endDay = _currentDate[1];
if (!startDay) {
return '';
}
var compareToStart = compareDay(day, startDay);
if (!endDay) {
return compareToStart === 0 ? 'start' : '';
}
var compareToEnd = compareDay(day, endDay);
if (compareToStart === 0 && compareToEnd === 0 && allowSameDay) {
return 'start-end';
}
if (compareToStart === 0) {
return 'start';
}
if (compareToEnd === 0) {
return 'end';
}
if (compareToStart > 0 && compareToEnd < 0) {
return 'middle';
}
return '';
}, [allowSameDay, currentDate]);
var getDayType = useCallback(function (day) {
if (compareDay(day, minDate) < 0 || compareDay(day, maxDate) > 0) {
return 'disabled';
}
if (type === 'single') {
return compareDay(day, currentDate) === 0 ? 'selected' : '';
}
if (type === 'multiple') {
return getMultipleDayType(day);
}
/* istanbul ignore else */
if (type === 'range') {
return getRangeDayType(day);
}
return '';
}, [currentDate, getMultipleDayType, getRangeDayType, maxDate, minDate, type]);
var getBottomInfo = useCallback(function (type_) {
if (type === 'range') {
if (type_ === 'start') {
return '开始';
}
if (type_ === 'end') {
return '结束';
}
if (type_ === 'start-end') {
return '开始/结束';
}
}
}, [type]);
var setDays = useCallback(function () {
var days = [];
var startDate = new Date(date || 0);
var year = startDate.getFullYear();
var month = startDate.getMonth();
var totalDay = getMonthEndDay(startDate.getFullYear(), startDate.getMonth() + 1);
for (var day = 1; day <= totalDay; day++) {
var _date = new Date(year, month, day);
var _type = getDayType(_date);
var config = {
date: _date,
type: _type,
text: day,
bottomInfo: getBottomInfo(_type)
};
if (formatter) {
config = formatter(config);
}
days.push(config);
}
setDays_(days);
}, [date, formatter, getBottomInfo, getDayType]);
useEffect(function () {
setDays();
}, [setDays]);
useImperativeHandle(ref, function () {
return {
setVisible: setVisible,
visible: visible
};
});
return /*#__PURE__*/_jsxs(View, {
id: id,
className: "van-calendar__month ".concat(className),
style: computed.getMonthStyle(visible, date, rowHeight ? Number(rowHeight) : 0),
children: [showMonthTitle && /*#__PURE__*/_jsx(View, {
className: "van-calendar__month-title",
children: computed.formatMonthTitle(date)
}), visible && days.length > 0 && /*#__PURE__*/_jsxs(View, {
className: "van-calendar__days",
children: [showMark && /*#__PURE__*/_jsx(View, {
className: "van-calendar__month-mark",
children: computed.getMark(date)
}), days.map(function (item, index) {
return /*#__PURE__*/_jsx(View, {
style: computed.getDayStyle(item.type, index, date, rowHeight, color, firstDayOfWeek),
className: utils.bem('calendar__day', [item.type]) + ' ' + item.className,
"data-index": index,
onClick: onClick_,
children: item.type === 'selected' || currentDate === item.date.getTime() ? /*#__PURE__*/_jsxs(View, {
className: "van-calendar__selected-day",
style: "width: ".concat(rowHeight, "px; height: ").concat(rowHeight, "px;background:").concat(color),
children: [item.topInfo && /*#__PURE__*/_jsx(View, {
className: "van-calendar__top-info",
children: item.topInfo
}), item.text, item.bottomInfo && /*#__PURE__*/_jsx(View, {
className: "van-calendar__bottom-info",
children: item.bottomInfo
})]
}) : /*#__PURE__*/_jsxs(View, {
children: [item.topInfo && /*#__PURE__*/_jsx(View, {
className: "van-calendar__top-info",
children: item.topInfo
}), item.text, item.bottomInfo && /*#__PURE__*/_jsx(View, {
className: "van-calendar__bottom-info",
children: item.bottomInfo
})]
})
}, "van-calendar__month".concat(index));
})]
})]
});
}
export default /*#__PURE__*/forwardRef(Index);