@gdjiami/jm-mrc-components
Version:
移动端可复用组件库
77 lines (76 loc) • 3.51 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';
var monthList = [];
for (var i = 1; i <= 12; i++) {
monthList.push(i);
}
var dayList = genMonthList();
var MonthDayPicker = /** @class */ (function (_super) {
__extends(MonthDayPicker, _super);
function MonthDayPicker() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
visible: false,
};
_this.handleSelectChange = function (_a) {
var _b = __read(_a, 2), month = _b[0], day = _b[1];
if (_this.props.onChange) {
_this.props.onChange([month, day]);
}
};
_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;
}
MonthDayPicker.prototype.render = function () {
var _a = this.props, children = _a.children, title = _a.title, _b = _a.value, value = _b === void 0 ? [1, 1] : _b;
var visible = this.state.visible;
return (React.createElement(React.Fragment, null,
children(value, this.handleShow),
React.createElement(Modal, { transparent: true, maskClosable: false, visible: !!visible, className: "jm-date-picker", wrapClassName: "jm-date-picker__wrapper" },
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, onValueChange: this.handleSelectChange },
React.createElement(Picker, { className: "jm-date-picker__date" }, monthList.map(function (i) { return (React.createElement(Picker.Item, { value: i, key: i },
i,
"\u6708")); })),
React.createElement(Picker, { className: "jm-date-picker__date" }, dayList[value[0]].map(function (i) { return (React.createElement(Picker.Item, { value: i, key: i },
i,
"\u65E5")); }))))));
};
MonthDayPicker.defaultProps = {
title: '选择月份',
};
return MonthDayPicker;
}(React.PureComponent));
export default MonthDayPicker;
function genMonthList() {
var list = {};
var date = new Date();
for (var i = 0; i < 12; i++) {
date.setMonth(i + 1);
date.setDate(0);
var end = date.getDate();
date.setDate(1);
var dayList_1 = (list[i + 1] = []);
for (var j = 1; j <= end; j++) {
dayList_1.push(j);
}
}
return list;
}