@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
127 lines • 4.48 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import { useState, useEffect, useMemo } from 'react';
import { ScrollView, View } from '@tarojs/components';
import { Button } from '../../../button';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export function LongSpan(props) {
var current = props.current,
setScrollIntoView = props.setScrollIntoView;
var _useState = useState([]),
_useState2 = _slicedToArray(_useState, 2),
monthData = _useState2[0],
setMonthData = _useState2[1];
var _useState3 = useState(),
_useState4 = _slicedToArray(_useState3, 2),
currentIndex = _useState4[0],
setCurrentIndex = _useState4[1];
var _useState5 = useState(),
_useState6 = _slicedToArray(_useState5, 2),
currentYear = _useState6[0],
setCurrentYear = _useState6[1];
var data = useMemo(function () {
var res = [];
var yearMap = {};
for (var i = 0; i < props.data.length; i++) {
// @ts-ignore
var dd = new Date(props.data[i]);
var year = dd.getFullYear();
var month = dd.getMonth() + 1;
if (yearMap[year] === undefined) {
yearMap[year] = res.length;
res.push({
year: year,
month: [{
name: month,
index: i
}]
});
} else {
var yearIndex = yearMap[year];
res[yearIndex].month.push({
name: month,
index: i
});
}
}
return res;
}, [props.data]);
useEffect(function () {
if (current) {
var dd = new Date(current);
var year = dd.getFullYear();
var month = dd.getMonth() + 1;
var ms = data.filter(function (item) {
return item.year === year;
})[0].month;
setMonthData(ms);
setCurrentYear(year);
var tIndex = ms.filter(function (item) {
return item.name === month;
})[0].index;
setCurrentIndex(tIndex);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [data]);
var switchAction_ = function switchAction_() {
if (currentIndex !== undefined) {
setScrollIntoView("month_".concat(props.data[currentIndex]), currentIndex);
}
};
return /*#__PURE__*/_jsxs(View, {
className: "van-calendar-longspan",
children: [/*#__PURE__*/_jsx(View, {
className: "van-calendar__header-title",
children: "\u5207\u6362\u5E74\u6708"
}), /*#__PURE__*/_jsxs(ScrollView, {
scrollY: true,
className: "van-calendar-longspan-content",
children: [/*#__PURE__*/_jsx(View, {
className: "van-calendar-longspan-title",
children: "\u5E74\u4EFD\u9009\u62E9"
}), /*#__PURE__*/_jsx(View, {
className: "van-calendar-longspan-box",
children: data.map(function (item, index) {
return /*#__PURE__*/_jsxs(Button, {
plain: item.year === currentYear ? false : true,
hairline: item.year === currentYear ? false : true,
type: "primary",
className: "van-calendar-longspan-item",
onClick: function onClick() {
if (currentYear !== item.year) {
var _item$month$;
setCurrentYear(item.year);
setMonthData(item.month);
setCurrentIndex((_item$month$ = item.month[0]) === null || _item$month$ === void 0 ? void 0 : _item$month$.index);
}
},
children: [item.year, "\u5E74"]
}, "longspan-year-item".concat(index));
})
}), /*#__PURE__*/_jsx(View, {
className: "van-calendar-longspan-title",
children: "\u6708\u9009\u62E9"
}), /*#__PURE__*/_jsx(View, {
className: "van-calendar-longspan-box",
children: monthData.map(function (item) {
return /*#__PURE__*/_jsxs(Button, {
plain: item.index === currentIndex ? false : true,
hairline: item.index === currentIndex ? false : true,
type: "primary",
className: "van-calendar-longspan-item",
onClick: function onClick() {
setCurrentIndex(item.index);
},
children: [item.name, "\u6708"]
}, "longspan-year-item-m".concat(item.index));
})
})]
}), /*#__PURE__*/_jsx(Button, {
block: true,
type: "primary",
className: "van-calendar__switch",
onClick: switchAction_,
children: "\u5207\u6362"
})]
});
}