@gdjiami/jm-mrc-components
Version:
移动端可复用组件库
101 lines (100 loc) • 4.65 kB
JavaScript
import { __extends, __read } from "tslib";
import React from 'react';
import MultiPicker from '@gdjiami/rmc-picker/es/MultiPicker';
import Picker from '@gdjiami/rmc-picker/es/Picker';
import Modal from 'antd-mobile/es/modal';
import { Today } from '../calendar';
var defaultDisabledBefore = new Date(0);
var defaultDisabledAfter = new Date(2100, 1, 1);
var YearPicker = /** @class */ (function (_super) {
__extends(YearPicker, _super);
function YearPicker() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
yearList: genList(_this.props.value || Today, _this.props.disabledBefore, _this.props.disabledAfter),
visible: false,
};
_this.handleSelectChange = function (_a) {
var _b = __read(_a, 1), year = _b[0];
var value = new Date(_this.props.value || 0);
value.setFullYear(year);
if (_this.props.onChange) {
_this.props.onChange(value);
}
};
_this.handleCancel = function () {
_this.setState({ visible: false });
if (_this.props.onChange) {
_this.props.onChange(_this.state.lastValue);
}
};
_this.handleOk = function () {
_this.setState({ visible: false });
};
_this.handleShow = function () {
_this.setState({ visible: true, lastValue: _this.props.value });
};
return _this;
}
YearPicker.prototype.componentDidUpdate = function (prevProps, prevState) {
if (this.props.value &&
(this.props.disabledBefore !== prevProps.disabledBefore ||
this.props.disabledAfter !== prevProps.disabledAfter)) {
this.setState({
yearList: genList(this.props.value, this.props.disabledBefore, this.props.disabledAfter),
});
}
};
YearPicker.prototype.render = function () {
var _a = this.props, children = _a.children, _b = _a.value, value = _b === void 0 ? Today : _b, title = _a.title;
var _c = this.state, yearList = _c.yearList, visible = _c.visible;
return (React.createElement(React.Fragment, null,
children(value, this.handleShow),
React.createElement(Modal, { transparent: true, maskClosable: false, visible: !!visible, wrapClassName: "jm-date-picker__wrapper", className: "jm-date-picker" },
React.createElement("div", { className: "jm-date-picker__header-bar" },
React.createElement("div", { className: "jm-date-picker__action", onClick: this.handleCancel }, "\u53D6\u6D88"),
React.createElement("div", { className: "jm-date-picker__title" }, title),
React.createElement("div", { className: "jm-date-picker__action", onClick: this.handleOk }, "\u786E\u5B9A")),
React.createElement(MultiPicker, { className: "jm-date-picker__body", selectedValue: [value.getFullYear()], onValueChange: this.handleSelectChange },
React.createElement(Picker, { className: "jm-date-picker__date" }, yearList.map(function (i) { return (React.createElement(Picker.Item, { value: i, key: i },
i,
"\u5E74")); }))))));
};
YearPicker.defaultProps = {
title: '选择年份',
};
return YearPicker;
}(React.Component));
export default YearPicker;
function genList(date, disabledBefore, disabledAfter) {
if (disabledBefore === void 0) { disabledBefore = defaultDisabledBefore; }
if (disabledAfter === void 0) { disabledAfter = defaultDisabledAfter; }
var list = [date.getFullYear()];
var prev = new Date(date);
var next = new Date(date);
var prevFinished = false;
var nextFinished = false;
for (var i = 1; i <= 100; i++) {
if (!prevFinished) {
prev = new Date(prev);
prev.setFullYear(prev.getFullYear() - 1);
if (disabledBefore.getFullYear() > prev.getFullYear()) {
prevFinished = true;
}
else {
list.unshift(prev.getFullYear());
}
}
if (!nextFinished) {
next = new Date(next);
next.setFullYear(next.getFullYear() + 1);
if (next.getFullYear() > disabledAfter.getFullYear()) {
nextFinished = true;
}
else {
list.push(next.getFullYear());
}
}
}
return list;
}