@alifd/next/es/calendar/head/card-header.js

A configurable component library for web built on React.

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';
import ConfigProvider from '../../config-provider';

var CardHeader = (_temp2 = _class = function (_React$Component) {
    _inherits(CardHeader, _React$Component);

    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$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.selectContainerHandler = function (target) {
            var device = _this.props.device;

            if (device === 'phone') {
                return document.body;
            }
            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.Component), _class.propTypes = {
    yearRange: PropTypes.arrayOf(PropTypes.number),
    yearRangeOffset: PropTypes.number,
    locale: PropTypes.object
}, _class.defaultProps = {
    yearRangeOffset: 10
}, _temp2);
CardHeader.displayName = 'CardHeader';


export default ConfigProvider.config(CardHeader);