amis-rev-ui 6.13.0

package/esm/components/calendar/MonthsView.js

@@ -0,0 +1,175 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __extends, __rest, __assign, __spreadArray, __read } from 'tslib';
+import moment from 'moment';
+import React__default from 'react';
+import { getRange, localeable } from 'amis-rev-core';
+import Picker from '../Picker.js';
+
+var CustomMonthsView = /** @class */ (function (_super) {
+    __extends(CustomMonthsView, _super);
+    function CustomMonthsView(props) {
+        var _this = _super.call(this, props) || this;
+        _this.renderMonth = function (props, month, year, date) {
+            var _a = _this.props, __ = _a.translate, testIdBuilder = _a.testIdBuilder;
+            var localMoment = props.viewDate, rest = __rest(props, ["viewDate"]);
+            var monthStr = localMoment.month(month).format(__('MMM'));
+            var strLength = 3;
+            // Because some months are up to 5 characters long, we want to
+            // use a fixed string length for consistency
+            var monthStrFixedLength = monthStr.substring(0, strLength);
+            return (React__default.createElement("td", __assign({}, rest),
+                React__default.createElement("span", __assign({}, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild(props.key).getTestId()), monthStrFixedLength)));
+        };
+        _this.onConfirm = function (value, types) {
+            _this.props.onConfirm && _this.props.onConfirm(value, ['year', 'month']);
+        };
+        _this.onPickerChange = function (value, index) {
+            var _a = _this.props, maxDate = _a.maxDate, minDate = _a.minDate;
+            var year = moment().year();
+            var columns = __spreadArray([], __read(_this.state.columns), false);
+            var maxDateObject = maxDate
+                ? maxDate.toObject()
+                : {
+                    years: year + 100,
+                    months: 11
+                };
+            var minDateObject = minDate
+                ? minDate.toObject()
+                : {
+                    years: year - 100,
+                    months: 0
+                };
+            var range = [];
+            // 选择年份是最大值的年或者最小值的月时，需要重新计算月分选择的cloumn
+            if (index === 0) {
+                if (value[0] === minDateObject.years &&
+                    value[0] === maxDateObject.years) {
+                    range = getRange(minDateObject.months, maxDateObject.months, 1);
+                }
+                else if (value[0] === minDateObject.years) {
+                    range = getRange(minDateObject.months, 11, 1);
+                }
+                else if (value[0] === maxDateObject.years) {
+                    range = getRange(0, maxDateObject.months, 1);
+                }
+                else {
+                    range = getRange(0, 11, 1);
+                }
+                columns[1] = {
+                    options: range.map(function (i) {
+                        return {
+                            text: _this.props.timeCell(i + 1, 'month'),
+                            value: i
+                        };
+                    })
+                };
+                _this.setState({
+                    columns: _this.getColumnsWithUnit(columns),
+                    pickerValue: value
+                });
+            }
+        };
+        _this.renderPicker = function () {
+            var __ = _this.props.translate;
+            var title = __('Date.titleMonth');
+            return (React__default.createElement(Picker, { translate: _this.props.translate, locale: _this.props.locale, title: title, columns: _this.state.columns, value: _this.state.pickerValue, onChange: _this.onPickerChange, onConfirm: _this.onConfirm, onClose: _this.props.onClose }));
+        };
+        var selectedDate = props.selectedDate, viewDate = props.viewDate;
+        var currentDate = selectedDate || viewDate || moment();
+        var dateBoundary = _this.props.getDateBoundary(currentDate);
+        var columns = _this.props.getColumns(['year', 'month'], dateBoundary);
+        _this.state = {
+            columns: _this.getColumnsWithUnit(columns),
+            pickerValue: currentDate.toArray()
+        };
+        _this.updateSelectedMonth = _this.updateSelectedMonth.bind(_this);
+        return _this;
+    }
+    CustomMonthsView.prototype.renderMonths = function () {
+        this.props.testIdBuilder;
+        var date = this.props.selectedDate; this.props.viewDate.month(); var year = this.props.viewDate.year(), rows = [], i = 0, months = [], renderer = this.props.renderMonth || this.renderMonth, isValid = this.props.isValidDate || this.alwaysValidDate, classes, props, currentMonth, isDisabled, noOfDaysInMonth, daysInMonth, validDay, 
+        // Date is irrelevant because we're only interested in month
+        irrelevantDate = 1;
+        while (i < 12) {
+            classes = 'rdtMonth';
+            currentMonth = this.props.viewDate
+                .clone()
+                .set({ year: year, month: i, date: irrelevantDate });
+            noOfDaysInMonth = parseInt(currentMonth.endOf('month').format('D'), 10);
+            daysInMonth = Array.from({ length: noOfDaysInMonth }, function (e, i) {
+                return i + 1;
+            });
+            validDay = daysInMonth.find(function (d) {
+                var day = currentMonth.clone().set('date', d);
+                return isValid(day);
+            });
+            isDisabled = validDay === undefined;
+            if (isDisabled)
+                classes += ' rdtDisabled';
+            if (date && i === date.month() && year === date.year())
+                classes += ' rdtActive';
+            props = {
+                'key': i,
+                'data-value': i,
+                'className': classes,
+                'viewDate': this.props.viewDate
+            };
+            if (!isDisabled)
+                props.onClick =
+                    this.props.updateOn === 'months'
+                        ? this.updateSelectedMonth
+                        : this.props.setDate && this.props.setDate('month');
+            months.push(renderer(props, i, year, date && date.clone()));
+            if (months.length === 3) {
+                rows.push(React__default.createElement('tr', { key: i }, months));
+                months = [];
+            }
+            i++;
+        }
+        return rows;
+    };
+    CustomMonthsView.prototype.updateSelectedMonth = function (event) {
+        this.props.updateSelectedDate(event);
+    };
+    CustomMonthsView.prototype.getColumnsWithUnit = function (columns) {
+        return this.props.locale === 'zh-CN' && columns.length === 2
+            ? columns.map(function (item, index) {
+                var _a;
+                (_a = item.options) === null || _a === void 0 ? void 0 : _a.map(function (option) {
+                    option.text = option.text + (index === 0 ? '年' : '月');
+                    return option;
+                });
+                return item;
+            })
+            : columns;
+    };
+    CustomMonthsView.prototype.alwaysValidDate = function () {
+        return true;
+    };
+    CustomMonthsView.prototype.render = function () {
+        var __ = this.props.translate;
+        var testIdBuilder = this.props.testIdBuilder;
+        var showYearHead = !/^mm$/i.test(this.props.inputFormat || '') && !this.props.hideHeader;
+        var canClick = /yy/i.test(this.props.inputFormat || '');
+        if (this.props.mobileUI) {
+            return React__default.createElement("div", { className: "rdtYears" }, this.renderPicker());
+        }
+        return (React__default.createElement("div", { className: "rdtMonths" },
+            showYearHead && (React__default.createElement("table", { className: "headerTable" },
+                React__default.createElement("thead", null,
+                    React__default.createElement("tr", null,
+                        React__default.createElement("th", __assign({ className: "rdtPrev", onClick: this.props.subtractTime(1, 'years') }, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('prev-year').getTestId()), "\u00AB"),
+                        canClick ? (React__default.createElement("th", __assign({ className: "rdtSwitch", onClick: this.props.showView('years') }, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('switch-year').getTestId()), this.props.viewDate.format(__('dateformat.year')))) : (React__default.createElement("th", { className: "rdtSwitch" }, this.props.viewDate.format(__('dateformat.year')))),
+                        React__default.createElement("th", __assign({ className: "rdtNext", onClick: this.props.addTime(1, 'years') }, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('next-year').getTestId()), "\u00BB"))))),
+            React__default.createElement("table", null,
+                React__default.createElement("tbody", null, this.renderMonths()))));
+    };
+    return CustomMonthsView;
+}(React__default.Component));
+var CustomMonthsView$1 = localeable(CustomMonthsView);
+
+export { CustomMonthsView, CustomMonthsView$1 as default };

package/esm/components/calendar/QuartersView.js

@@ -0,0 +1,125 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __extends, __spreadArray, __read, __assign, __decorate, __metadata } from 'tslib';
+import moment from 'moment';
+import React__default from 'react';
+import { getRange, autobind, localeable } from 'amis-rev-core';
+import Picker from '../Picker.js';
+
+var QuarterView = /** @class */ (function (_super) {
+    __extends(QuarterView, _super);
+    function QuarterView() {
+        var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
+        _this.state = {
+            columns: [],
+            pickerValue: [_this.props.viewDate.year(), _this.props.viewDate.quarter()]
+        };
+        _this.renderQuarter = function (props, quartar, year, date) {
+            var testIdBuilder = _this.props.testIdBuilder;
+            return (React__default.createElement("td", __assign({}, props),
+                React__default.createElement("span", __assign({}, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild(props.key).getTestId()),
+                    "Q",
+                    quartar)));
+        };
+        _this.updateSelectedQuarter = function (event) {
+            _this.props.updateSelectedDate(event);
+        };
+        _this.onPickerConfirm = function (value) {
+            _this.props.onConfirm && _this.props.onConfirm(value, ['year', 'quarter']);
+        };
+        _this.onPickerChange = function (value, index) {
+            _this.setState({ pickerValue: value });
+        };
+        return _this;
+    }
+    QuarterView.prototype.renderYear = function () {
+        var _a = this.props, __ = _a.translate, testIdBuilder = _a.testIdBuilder;
+        var showYearHead = !/^mm$/i.test(this.props.inputFormat || '');
+        if (!showYearHead) {
+            return null;
+        }
+        var canClick = /yy/i.test(this.props.inputFormat || '');
+        return (React__default.createElement("table", null,
+            React__default.createElement("thead", null,
+                React__default.createElement("tr", null,
+                    React__default.createElement("th", __assign({ className: "rdtPrev", onClick: this.props.subtractTime(1, 'years') }, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('prev-year').getTestId()), "\u00AB"),
+                    canClick ? (React__default.createElement("th", __assign({ className: "rdtSwitch", onClick: this.props.showView('years') }, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('switch-year').getTestId()), this.props.viewDate.format(__('dateformat.year')))) : (React__default.createElement("th", { className: "rdtSwitch" }, this.props.viewDate.format(__('dateformat.year')))),
+                    React__default.createElement("th", __assign({ className: "rdtNext", onClick: this.props.addTime(1, 'years') }, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('next-year').getTestId()), "\u00BB")))));
+    };
+    QuarterView.prototype.renderQuarters = function () {
+        var date = this.props.selectedDate, quarter = this.props.viewDate.quarter(), year = this.props.viewDate.year(), rows = [], i = 1, quarters = [], renderer = this.props.renderQuarter || this.renderQuarter, isValid = this.props.isValidDate || this.alwaysValidDate, classes, props, isDisabled;
+        while (i < 5) {
+            classes = 'rdtQuarter';
+            isDisabled = !isValid(moment("".concat(year, "-").concat(i), 'YYYY-Q'));
+            if (isDisabled)
+                classes += ' rdtDisabled';
+            if (date && i === date.quarter() && year === date.year())
+                classes += ' rdtActive';
+            props = {
+                'key': i,
+                'data-value': i,
+                'className': classes
+            };
+            if (!isDisabled) {
+                props.onClick =
+                    this.props.updateOn === 'quarters'
+                        ? this.updateSelectedQuarter
+                        : this.props.setDate('quarter');
+            }
+            quarters.push(renderer(props, i, year, date && date.clone()));
+            if (quarters.length === 2) {
+                rows.push(React__default.createElement('tr', { key: quarter + '_' + rows.length }, quarters));
+                quarters = [];
+            }
+            i++;
+        }
+        return rows;
+    };
+    QuarterView.prototype.alwaysValidDate = function () {
+        return true;
+    };
+    QuarterView.prototype.cancel = function () {
+        var _a, _b;
+        (_b = (_a = this.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+    };
+    QuarterView.prototype.renderPicker = function () {
+        var __ = this.props.translate;
+        var title = __('Date.titleQuarter');
+        var minYear = new Date().getFullYear() - 100;
+        var maxYear = new Date().getFullYear() + 100;
+        var columns = [
+            {
+                options: getRange(minYear, maxYear, 1)
+            },
+            {
+                options: getRange(1, 4).map(function (item) {
+                    return {
+                        text: 'Q' + item,
+                        value: item
+                    };
+                })
+            }
+        ];
+        return (React__default.createElement(Picker, { translate: this.props.translate, locale: this.props.locale, title: title, columns: columns, value: this.state.pickerValue, onChange: this.onPickerChange, onConfirm: this.onPickerConfirm, onClose: this.cancel }));
+    };
+    QuarterView.prototype.render = function () {
+        var _a = this.props, cx = _a.classnames, hideHeader = _a.hideHeader, mobileUI = _a.mobileUI;
+        return mobileUI ? (this.renderPicker()) : (React__default.createElement("div", { className: cx('ClalendarQuarter') },
+            hideHeader ? null : this.renderYear(),
+            React__default.createElement("table", null,
+                React__default.createElement("tbody", null, this.renderQuarters()))));
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], QuarterView.prototype, "cancel", null);
+    return QuarterView;
+}(React__default.Component));
+var QuartersView = localeable(QuarterView);
+
+export { QuarterView, QuartersView as default };