mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-03-06 10:27:22 +00:00
157 lines
5.1 KiB
JavaScript
157 lines
5.1 KiB
JavaScript
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
|
|
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
|
|
import _inherits from 'babel-runtime/helpers/inherits';
|
|
|
|
var _class, _temp2;
|
|
|
|
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import Select from '../../select';
|
|
import Radio from '../../radio';
|
|
|
|
var CardHeader = (_temp2 = _class = function (_React$PureComponent) {
|
|
_inherits(CardHeader, _React$PureComponent);
|
|
|
|
function CardHeader() {
|
|
var _temp, _this, _ret;
|
|
|
|
_classCallCheck(this, CardHeader);
|
|
|
|
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
|
args[_key] = arguments[_key];
|
|
}
|
|
|
|
return _ret = (_temp = (_this = _possibleConstructorReturn(this, _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args))), _this), _this.selectContainerHandler = function (target) {
|
|
return target.parentNode;
|
|
}, _this.onYearChange = function (year) {
|
|
var _this$props = _this.props,
|
|
visibleMonth = _this$props.visibleMonth,
|
|
changeVisibleMonth = _this$props.changeVisibleMonth;
|
|
|
|
changeVisibleMonth(visibleMonth.clone().year(year), 'yearSelect');
|
|
}, _this.changeVisibleMonth = function (month) {
|
|
var _this$props2 = _this.props,
|
|
visibleMonth = _this$props2.visibleMonth,
|
|
changeVisibleMonth = _this$props2.changeVisibleMonth;
|
|
|
|
changeVisibleMonth(visibleMonth.clone().month(month), 'monthSelect');
|
|
}, _this.onModePanelChange = function (mode) {
|
|
_this.props.changeMode(mode);
|
|
}, _temp), _possibleConstructorReturn(_this, _ret);
|
|
}
|
|
|
|
CardHeader.prototype.getYearSelect = function getYearSelect(year) {
|
|
var _props = this.props,
|
|
prefix = _props.prefix,
|
|
yearRangeOffset = _props.yearRangeOffset,
|
|
_props$yearRange = _props.yearRange,
|
|
yearRange = _props$yearRange === undefined ? [] : _props$yearRange,
|
|
locale = _props.locale;
|
|
var startYear = yearRange[0],
|
|
endYear = yearRange[1];
|
|
|
|
if (!startYear || !endYear) {
|
|
startYear = year - yearRangeOffset;
|
|
endYear = year + yearRangeOffset;
|
|
}
|
|
|
|
var options = [];
|
|
for (var i = startYear; i <= endYear; i++) {
|
|
options.push(React.createElement(
|
|
Select.Option,
|
|
{ key: i, value: i },
|
|
i
|
|
));
|
|
}
|
|
|
|
return React.createElement(
|
|
Select,
|
|
{
|
|
prefix: prefix,
|
|
value: year,
|
|
'aria-label': locale.yearSelectAriaLabel,
|
|
onChange: this.onYearChange,
|
|
popupContainer: this.selectContainerHandler
|
|
},
|
|
options
|
|
);
|
|
};
|
|
|
|
CardHeader.prototype.getMonthSelect = function getMonthSelect(month) {
|
|
var _props2 = this.props,
|
|
prefix = _props2.prefix,
|
|
momentLocale = _props2.momentLocale,
|
|
locale = _props2.locale;
|
|
|
|
var localeMonths = momentLocale.monthsShort();
|
|
var options = [];
|
|
for (var i = 0; i < 12; i++) {
|
|
options.push(React.createElement(
|
|
Select.Option,
|
|
{ key: i, value: i },
|
|
localeMonths[i]
|
|
));
|
|
}
|
|
return React.createElement(
|
|
Select,
|
|
{
|
|
'aria-label': locale.monthSelectAriaLabel,
|
|
prefix: prefix,
|
|
value: month,
|
|
onChange: this.changeVisibleMonth,
|
|
popupContainer: this.selectContainerHandler
|
|
},
|
|
options
|
|
);
|
|
};
|
|
|
|
CardHeader.prototype.render = function render() {
|
|
var _props3 = this.props,
|
|
prefix = _props3.prefix,
|
|
mode = _props3.mode,
|
|
locale = _props3.locale,
|
|
visibleMonth = _props3.visibleMonth;
|
|
|
|
|
|
var yearSelect = this.getYearSelect(visibleMonth.year());
|
|
var monthSelect = mode === 'month' ? null : this.getMonthSelect(visibleMonth.month());
|
|
var panelSelect = React.createElement(
|
|
Radio.Group,
|
|
{
|
|
shape: 'button',
|
|
size: 'medium',
|
|
value: mode,
|
|
onChange: this.onModePanelChange
|
|
},
|
|
React.createElement(
|
|
Radio,
|
|
{ value: 'date' },
|
|
locale.month
|
|
),
|
|
React.createElement(
|
|
Radio,
|
|
{ value: 'month' },
|
|
locale.year
|
|
)
|
|
);
|
|
|
|
return React.createElement(
|
|
'div',
|
|
{ className: prefix + 'calendar-header' },
|
|
yearSelect,
|
|
monthSelect,
|
|
panelSelect
|
|
);
|
|
};
|
|
|
|
return CardHeader;
|
|
}(React.PureComponent), _class.propTypes = {
|
|
yearRange: PropTypes.arrayOf(PropTypes.number),
|
|
yearRangeOffset: PropTypes.number,
|
|
locale: PropTypes.object
|
|
}, _class.defaultProps = {
|
|
yearRangeOffset: 10
|
|
}, _temp2);
|
|
|
|
|
|
export default CardHeader; |