@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
210 lines • 7.85 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
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 (item) {
if (item.type !== 'disabled') {
if (onClick) onClick(item);
}
}, [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
};
});
if (!props.ifRender) return /*#__PURE__*/_jsx(View, {
style: {
minHeight: 428
},
id: id,
className: "van-calendar__month ".concat(className)
});
return /*#__PURE__*/_jsxs(View, {
id: id,
className: "van-calendar__month ".concat(className),
style: _objectSpread(_objectSpread({}, computed.getMonthStyle(visible, date, rowHeight ? Number(rowHeight) : 0)), {}, {
minHeight: 428
}),
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,
onClick: function onClick() {
return onClick_(item);
},
children: item.type === 'selected' || currentDate === item.date.getTime() ? /*#__PURE__*/_jsxs(View, {
className: "van-calendar__selected-day",
style: {
width: rowHeight,
height: rowHeight,
background: 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);