@gdjiami/jm-mrc-components
Version:
移动端可复用组件库
63 lines (62 loc) • 2.78 kB
JavaScript
import { __extends } from "tslib";
/**
* 选择一个月的哪一天
*/
import React from 'react';
import Modal from 'antd-mobile/es/modal';
import { SingleMonth } from '../calendar';
var month = new Date(2018, 9, 1);
var DayPicker = /** @class */ (function (_super) {
__extends(DayPicker, _super);
function DayPicker() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
visible: false,
};
_this.handleSelect = function (date) {
if (_this.props.onChange) {
_this.props.onChange(date.getDate());
}
};
_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;
}
DayPicker.prototype.render = function () {
var _a = this.props, children = _a.children, _b = _a.value, value = _b === void 0 ? 1 : _b, title = _a.title;
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")),
this.renderCalendar())));
};
DayPicker.prototype.renderCalendar = function () {
var _a = this.props.value, value = _a === void 0 ? 1 : _a;
return (React.createElement("div", { className: "jm-date-picker__body" },
React.createElement(SingleMonth, { date: month, currentSelect: getValue(value), onSelect: this.handleSelect, showHoliday: false, showLunar: false })));
};
DayPicker.defaultProps = {
title: '选择天数',
};
return DayPicker;
}(React.PureComponent));
export default DayPicker;
var getValue = function (value) {
var date = new Date(month);
date.setDate(value);
return date;
};