@antmjs/vantui/lib/calendar/components/longSpan/index.js

一套适用于Taro3及React的vantui组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.LongSpan = LongSpan;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _components = require("@tarojs/components");
var _button = require("../../../button");
var _jsxRuntime = require("react/jsx-runtime");
function LongSpan(props) {
  var current = props.current,
    setScrollIntoView = props.setScrollIntoView;
  var _useState = (0, _react.useState)([]),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    monthData = _useState2[0],
    setMonthData = _useState2[1];
  var _useState3 = (0, _react.useState)(),
    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
    currentIndex = _useState4[0],
    setCurrentIndex = _useState4[1];
  var _useState5 = (0, _react.useState)(),
    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
    currentYear = _useState6[0],
    setCurrentYear = _useState6[1];
  var data = (0, _react.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]);
  (0, _react.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__*/(0, _jsxRuntime.jsxs)(_components.View, {
    className: "van-calendar-longspan",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
      className: "van-calendar__header-title",
      children: "\u5207\u6362\u5E74\u6708"
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.ScrollView, {
      scrollY: true,
      className: "van-calendar-longspan-content",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
        className: "van-calendar-longspan-title",
        children: "\u5E74\u4EFD\u9009\u62E9"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
        className: "van-calendar-longspan-box",
        children: data.map(function (item, index) {
          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_button.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__*/(0, _jsxRuntime.jsx)(_components.View, {
        className: "van-calendar-longspan-title",
        children: "\u6708\u9009\u62E9"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
        className: "van-calendar-longspan-box",
        children: monthData.map(function (item) {
          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_button.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__*/(0, _jsxRuntime.jsx)(_button.Button, {
      block: true,
      type: "primary",
      className: "van-calendar__switch",
      onClick: switchAction_,
      children: "\u5207\u6362"
    })]
  });
}