amis-ui 1.0.0-beta.0

package/esm-dist/components/calendar/CalendarContainer.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface CalendarProps {
+    view: string;
+    viewProps: any;
+}
+export default class CustomCalendarContainer extends React.Component<CalendarProps> {
+    viewComponents: any;
+    render(): React.CElement<any, React.Component<any, any, any>>;
+}
+export {};

package/esm-dist/components/calendar/CalendarContainer.js

@@ -0,0 +1,27 @@
+/**
+ * amis-ui v1.0.0-beta.0
+ * Copyright 2018-2022 fex
+ */
+
+import { __extends, __assign } from 'tslib';
+import React__default from 'react';
+import CustomDaysView from './DaysView.js';
+import CustomYearsView from './YearsView.js';
+import CustomMonthsView from './MonthsView.js';
+import CustomTimeView from './TimeView.js';
+import QuartersView from './QuartersView.js';
+
+var CustomCalendarContainer = /** @class */ (function (_super) {
+    __extends(CustomCalendarContainer, _super);
+    function CustomCalendarContainer() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.viewComponents = __assign(__assign({}, _this.viewComponents), { days: CustomDaysView, years: CustomYearsView, months: CustomMonthsView, time: CustomTimeView, quarters: QuartersView });
+        return _this;
+    }
+    CustomCalendarContainer.prototype.render = function () {
+        return React__default.createElement(this.viewComponents[this.props.view], this.props.viewProps);
+    };
+    return CustomCalendarContainer;
+}(React__default.Component));
+
+export { CustomCalendarContainer as default };

package/esm-dist/components/calendar/DaysView.d.ts

@@ -0,0 +1,170 @@
+/// <reference types="hoist-non-react-statics" />
+import moment from 'moment';
+import React from 'react';
+import { LocaleProps, ClassNamesFn } from 'amis-core';
+import { PickerOption } from '../PickerColumn';
+import { DateType } from './Calendar';
+import type { TimeScale } from './TimeView';
+interface CustomDaysViewProps extends LocaleProps {
+    classPrefix?: string;
+    prevIcon?: string;
+    nextIcon?: string;
+    viewDate: moment.Moment;
+    selectedDate: moment.Moment;
+    minDate: moment.Moment;
+    maxDate: moment.Moment;
+    useMobileUI: boolean;
+    embed: boolean;
+    timeFormat: string;
+    requiredConfirm?: boolean;
+    isEndDate?: boolean;
+    renderDay?: Function;
+    onClose?: () => void;
+    onChange: (value: moment.Moment) => void;
+    onConfirm?: (value: number[], types: DateType[]) => void;
+    setDateTimeState: (state: any) => void;
+    showTime: () => void;
+    setTime: (type: string, amount: number) => void;
+    scrollToTop: (type: string, amount: number, i: number, lable?: string) => void;
+    subtractTime: (amount: number, type: string, toSelected?: moment.Moment) => () => void;
+    addTime: (amount: number, type: string, toSelected?: moment.Moment) => () => void;
+    isValidDate?: (currentDate: moment.Moment, selected?: moment.Moment) => boolean;
+    showView: (view: string) => () => void;
+    updateSelectedDate: (event: React.MouseEvent<any>, close?: boolean) => void;
+    handleClickOutside: () => void;
+    classnames: ClassNamesFn;
+    schedules?: Array<{
+        startTime: Date;
+        endTime: Date;
+        content: any;
+        className?: string;
+    }>;
+    largeMode?: boolean;
+    onScheduleClick?: (scheduleData: any) => void;
+    hideHeader?: boolean;
+    getColumns: (types: DateType[], dateBoundary: void) => any;
+    getDateBoundary: (currentDate: moment.Moment) => any;
+    timeConstraints?: any;
+}
+export declare class CustomDaysView extends React.Component<CustomDaysViewProps> {
+    timeConstraints: {
+        hours: {
+            min: number;
+            max: number;
+            step: number;
+        };
+        minutes: {
+            min: number;
+            max: number;
+            step: number;
+        };
+        seconds: {
+            min: number;
+            max: number;
+            step: number;
+        };
+        milliseconds: {
+            min: number;
+            max: number;
+            step: number;
+        };
+    };
+    state: {
+        columns: {
+            options: PickerOption[];
+        }[];
+        types: DateType[];
+        pickerValue: number[];
+        uniqueTag: any;
+    };
+    getDaysOfWeek(locale: any): any[];
+    alwaysValidDate(): number;
+    renderDays(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>[];
+    constructor(props: any);
+    componentWillMount(): void;
+    componentDidMount(): void;
+    updateSelectedDate: (event: React.MouseEvent<any>) => void;
+    showTime: () => JSX.Element;
+    setTime: (type: 'hours' | 'minutes' | 'seconds' | 'milliseconds', value: number) => void;
+    scrollToTop: (type: 'hours' | 'minutes' | 'seconds' | 'milliseconds', value: number, i: number, label?: string) => void;
+    confirm: () => void;
+    cancel: () => void;
+    renderDay: (props: any, currentDate: moment.Moment) => JSX.Element;
+    /** 时间选择器数据源 */
+    computedTimeOptions(timeScale: TimeScale): {
+        label: string;
+        value: string;
+    }[];
+    renderTimes: () => JSX.Element;
+    renderFooter: () => JSX.Element | null;
+    onPickerConfirm: (value: number[]) => void;
+    onPickerChange: (value: number[], index: number) => void;
+    renderPicker: () => JSX.Element;
+    render(): JSX.Element;
+}
+declare const _default: {
+    new (props: Omit<CustomDaysViewProps, keyof LocaleProps> & {
+        locale?: string | undefined;
+        translate?: ((str: string, ...args: any[]) => string) | undefined;
+    }): {
+        ref: any;
+        childRef(ref: any): void;
+        getWrappedInstance(): any;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Omit<CustomDaysViewProps, keyof LocaleProps> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<Omit<CustomDaysViewProps, keyof LocaleProps> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<Omit<CustomDaysViewProps, keyof LocaleProps> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<CustomDaysViewProps, keyof LocaleProps> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<Omit<CustomDaysViewProps, keyof LocaleProps> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<Omit<CustomDaysViewProps, keyof LocaleProps> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Omit<CustomDaysViewProps, keyof LocaleProps> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Omit<CustomDaysViewProps, keyof LocaleProps> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<CustomDaysViewProps, keyof LocaleProps> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    displayName: string;
+    contextType: React.Context<string>;
+    ComposedComponent: React.ComponentType<React.ComponentClass<CustomDaysViewProps, any>>;
+} & import("hoist-non-react-statics").NonReactStatics<React.ComponentClass<CustomDaysViewProps, any>, {}> & {
+    ComposedComponent: React.ComponentClass<CustomDaysViewProps, any>;
+};
+export default _default;

package/esm-dist/components/calendar/DaysView.js

@@ -0,0 +1,440 @@
+/**
+ * amis-ui v1.0.0-beta.0
+ * Copyright 2018-2022 fex
+ */
+
+import { __extends, __assign } from 'tslib';
+import moment from 'moment';
+import React__default from 'react';
+import Downshift from 'downshift';
+import findIndex from 'lodash/findIndex';
+import merge from 'lodash/merge';
+import { convertArrayValueToMoment, isMobile, localeable } from 'amis-core';
+import Picker from '../Picker.js';
+
+// 最早基于 react-datetime 2.16.2 版本，后来大部分都自己写了
+var CustomDaysView = /** @class */ (function (_super) {
+    __extends(CustomDaysView, _super);
+    function CustomDaysView(props) {
+        var _this = _super.call(this, props) || this;
+        _this.timeConstraints = {
+            hours: {
+                min: 0,
+                max: 23,
+                step: 1
+            },
+            minutes: {
+                min: 0,
+                max: 59,
+                step: 1
+            },
+            seconds: {
+                min: 0,
+                max: 59,
+                step: 1
+            },
+            milliseconds: {
+                min: 0,
+                max: 999,
+                step: 1
+            }
+        };
+        _this.updateSelectedDate = function (event) {
+            // need confirm
+            if (_this.props.requiredConfirm) {
+                var viewDate = _this.props.viewDate.clone();
+                var currentDate = _this.props.selectedDate || viewDate;
+                var target = event.target;
+                var modifier = 0;
+                if (~target.className.indexOf('rdtNew')) {
+                    modifier = 1;
+                }
+                if (~target.className.indexOf('rdtOld')) {
+                    modifier = -1;
+                }
+                viewDate
+                    .month(viewDate.month() + modifier)
+                    .date(parseInt(target.getAttribute('data-value'), 10))
+                    .hours(currentDate.hours())
+                    .minutes(currentDate.minutes())
+                    .seconds(currentDate.seconds())
+                    .milliseconds(currentDate.milliseconds());
+                _this.props.setDateTimeState({
+                    viewDate: viewDate,
+                    selectedDate: viewDate.clone()
+                });
+                return;
+            }
+            _this.props.updateSelectedDate(event, true);
+        };
+        _this.showTime = function () {
+            var _a = _this.props, selectedDate = _a.selectedDate, viewDate = _a.viewDate, timeFormat = _a.timeFormat;
+            return (React__default.createElement("div", { key: "stb", className: "rdtShowTime" }, (selectedDate || viewDate || moment()).format(timeFormat)));
+        };
+        _this.setTime = function (type, value) {
+            var date = (_this.props.selectedDate || _this.props.viewDate).clone();
+            date[type](value);
+            _this.props.setDateTimeState({
+                viewDate: date.clone(),
+                selectedDate: date.clone()
+            });
+            if (!_this.props.requiredConfirm) {
+                _this.props.onChange(date);
+            }
+        };
+        _this.scrollToTop = function (type, value, i, label) {
+            var _a;
+            var elf = document.getElementById("".concat(_this.state.uniqueTag, "-").concat(i, "-input"));
+            var _b = _this.timeConstraints[type], min = _b.min, step = _b.step;
+            var offset = (value - min) / step;
+            var height = 28; /** 单个选项的高度 */
+            (_a = elf === null || elf === void 0 ? void 0 : elf.parentNode) === null || _a === void 0 ? void 0 : _a.scrollTo({
+                top: offset * height,
+                behavior: label === 'init' ? 'auto' : 'smooth'
+            });
+        };
+        _this.confirm = function () {
+            var _a, _b;
+            var date = (_this.props.selectedDate || _this.props.viewDate).clone();
+            // 如果 minDate 是可用的，且比当前日期晚，则用 minDate
+            if (((_a = _this.props.minDate) === null || _a === void 0 ? void 0 : _a.isValid()) && ((_b = _this.props.minDate) === null || _b === void 0 ? void 0 : _b.isAfter(date))) {
+                date = _this.props.minDate.clone();
+            }
+            _this.props.setDateTimeState({
+                selectedDate: date
+            });
+            _this.props.onChange(date);
+            _this.props.onClose && _this.props.onClose();
+        };
+        _this.cancel = function () {
+            _this.props.onClose && _this.props.onClose();
+        };
+        _this.renderDay = function (props, currentDate) {
+            if (_this.props.schedules) {
+                var schedule_1 = [];
+                _this.props.schedules.forEach(function (item) {
+                    if (currentDate.isSameOrAfter(moment(item.startTime).subtract(1, 'days')) &&
+                        currentDate.isSameOrBefore(item.endTime)) {
+                        schedule_1.push(item);
+                    }
+                });
+                if (schedule_1.length > 0) {
+                    var cx_1 = _this.props.classnames;
+                    var __ = _this.props.translate;
+                    // 日程数据
+                    var scheduleData_1 = {
+                        scheduleData: schedule_1.map(function (item) {
+                            return __assign(__assign({}, item), { time: moment(item.startTime).format('YYYY-MM-DD HH:mm:ss') +
+                                    ' - ' +
+                                    moment(item.endTime).format('YYYY-MM-DD HH:mm:ss') });
+                        }),
+                        currentDate: currentDate
+                    };
+                    // 放大模式
+                    if (_this.props.largeMode) {
+                        var showSchedule_1 = [];
+                        for (var i = 0; i < schedule_1.length; i++) {
+                            if (showSchedule_1.length > 3) {
+                                break;
+                            }
+                            if (moment(schedule_1[i].startTime).isSame(currentDate, 'day')) {
+                                showSchedule_1.push(schedule_1[i]);
+                            }
+                            else if (currentDate.weekday() === 0) {
+                                var width = Math.min(moment(schedule_1[i].endTime).diff(currentDate, 'days') + 1, 7);
+                                // 周一重新设置日程
+                                showSchedule_1.push(__assign(__assign({}, schedule_1[i]), { width: width, startTime: moment(currentDate), endTime: moment(currentDate).add(width - 1, 'days') }));
+                                schedule_1[i].height === undefined && (schedule_1[i].height = 0);
+                            }
+                            else {
+                                // 生成空白格占位
+                                showSchedule_1.push({
+                                    width: 1,
+                                    className: 'bg-transparent',
+                                    content: '',
+                                    height: schedule_1[i].height
+                                });
+                            }
+                        }
+                        [0, 1, 2].forEach(function (i) {
+                            // 排序
+                            var tempIndex = findIndex(showSchedule_1, function (item) { return item.height === i; });
+                            if (tempIndex === -1) {
+                                tempIndex = findIndex(showSchedule_1, function (item) { return item.height === undefined; });
+                            }
+                            if (tempIndex > -1 && tempIndex !== i) {
+                                var temp = showSchedule_1[i];
+                                showSchedule_1[i] = showSchedule_1[tempIndex];
+                                showSchedule_1[tempIndex] = temp;
+                            }
+                            if (showSchedule_1[i] && showSchedule_1[i].height === undefined) {
+                                showSchedule_1[i].height = i;
+                            }
+                        });
+                        // 最多展示3个
+                        showSchedule_1 = showSchedule_1.slice(0, 3);
+                        var scheduleDiv = showSchedule_1.map(function (item, index) {
+                            var width = item.width ||
+                                Math.min(moment(item.endTime).diff(moment(item.startTime), 'days') + 1, 7 - moment(item.startTime).weekday());
+                            return (React__default.createElement("div", { key: props.key + 'content' + index, className: cx_1('ScheduleCalendar-large-schedule-content', item.className), style: { width: width + '00%' }, onClick: function () {
+                                    return _this.props.onScheduleClick &&
+                                        _this.props.onScheduleClick(scheduleData_1);
+                                } },
+                                React__default.createElement("div", { className: cx_1('ScheduleCalendar-text-overflow') }, item.content)));
+                        });
+                        return (React__default.createElement("td", __assign({}, props),
+                            React__default.createElement("div", { className: cx_1('ScheduleCalendar-large-day-wrap') },
+                                React__default.createElement("div", { className: cx_1('ScheduleCalendar-large-schedule-header') },
+                                    React__default.createElement("span", null, currentDate.date())),
+                                scheduleDiv,
+                                schedule_1.length > 3 && (React__default.createElement("div", { className: cx_1('ScheduleCalendar-large-schedule-footer') },
+                                    schedule_1.length - 3,
+                                    " ",
+                                    __('more'))))));
+                    }
+                    // 正常模式
+                    var ScheduleIcon = (React__default.createElement("span", { className: cx_1('ScheduleCalendar-icon', schedule_1[0].className), onClick: function () {
+                            return _this.props.onScheduleClick &&
+                                _this.props.onScheduleClick(scheduleData_1);
+                        } }));
+                    return (React__default.createElement("td", __assign({}, props),
+                        React__default.createElement("span", null,
+                            currentDate.date(),
+                            ScheduleIcon)));
+                }
+            }
+            return (React__default.createElement("td", __assign({}, props),
+                React__default.createElement("span", null, currentDate.date())));
+        };
+        _this.renderTimes = function () {
+            var _a = _this.props, timeFormat = _a.timeFormat, selectedDate = _a.selectedDate, viewDate = _a.viewDate, isEndDate = _a.isEndDate, cx = _a.classnames;
+            var date = selectedDate || (isEndDate ? viewDate.endOf('day') : viewDate);
+            var inputs = [];
+            var timeConstraints = _this.timeConstraints;
+            inputs.push(_this.showTime());
+            timeFormat.split(':').forEach(function (format, i) {
+                var type = /h/i.test(format)
+                    ? 'hours'
+                    : /m/.test(format)
+                        ? 'minutes'
+                        : /s/.test(format)
+                            ? 'seconds'
+                            : '';
+                if (type) {
+                    var min_1 = timeConstraints[type].min;
+                    var max_1 = timeConstraints[type].max;
+                    var options_1 = _this.computedTimeOptions(type);
+                    var formatMap_1 = {
+                        hours: 'HH',
+                        minutes: 'mm',
+                        seconds: 'ss'
+                    };
+                    inputs.push(React__default.createElement(Downshift, { key: i + 'input', inputValue: date.format(formatMap_1[type]) }, function (_a) {
+                        var getInputProps = _a.getInputProps, openMenu = _a.openMenu, closeMenu = _a.closeMenu;
+                        getInputProps({
+                            onFocus: function () { return openMenu(); },
+                            onChange: function (e) {
+                                return _this.setTime(type, Math.max(min_1, Math.min(parseInt(e.currentTarget.value.replace(/\D/g, ''), 10) || 0, max_1)));
+                            }
+                        });
+                        return (React__default.createElement("div", { className: cx('CalendarInputWrapper', 'CalendarInputWrapperMT') },
+                            React__default.createElement("div", { className: cx('CalendarInput-sugs', type === 'hours'
+                                    ? 'CalendarInput-sugsHours'
+                                    : 'CalendarInput-sugsTimes'), id: "".concat(_this.state.uniqueTag, "-").concat(i, "-input") }, options_1.map(function (option) {
+                                var _a;
+                                return (React__default.createElement("div", { key: option.value, className: cx('CalendarInput-sugsItem', {
+                                        'is-highlight': selectedDate
+                                            ? option.value === date.format(formatMap_1[type])
+                                            : option.value === ((_a = options_1 === null || options_1 === void 0 ? void 0 : options_1[0]) === null || _a === void 0 ? void 0 : _a.value)
+                                    }), onClick: function () {
+                                        _this.setTime(type, parseInt(option.value, 10));
+                                        _this.scrollToTop(type, parseInt(option.value, 10), i);
+                                        closeMenu();
+                                    } }, option.value));
+                            }))));
+                    }));
+                    inputs.push(React__default.createElement("span", { key: i + 'divider' }));
+                }
+            });
+            inputs.length && inputs.pop();
+            return React__default.createElement("div", null, inputs);
+        };
+        _this.renderFooter = function () {
+            if (!_this.props.requiredConfirm) {
+                return null;
+            }
+            var _a = _this.props, __ = _a.translate, cx = _a.classnames;
+            return (React__default.createElement("tfoot", { key: "tf" },
+                React__default.createElement("tr", null,
+                    React__default.createElement("td", { colSpan: 7 }, _this.props.requiredConfirm ? (React__default.createElement("div", { key: "button", className: "rdtActions" },
+                        React__default.createElement("a", { className: cx('Button', 'Button--default'), onClick: _this.cancel }, __('cancel')),
+                        React__default.createElement("a", { className: cx('Button', 'Button--primary', 'm-l-sm'), onClick: _this.confirm }, __('confirm')))) : null))));
+        };
+        _this.onPickerConfirm = function (value) {
+            _this.props.onConfirm && _this.props.onConfirm(value, _this.state.types);
+        };
+        _this.onPickerChange = function (value, index) {
+            var _a = _this.props, selectedDate = _a.selectedDate, viewDate = _a.viewDate;
+            // 变更年份、月份的时候，需要更新columns
+            if (index === 1 || index === 0) {
+                var currentDate = (selectedDate || viewDate || moment()).clone();
+                // 只需计算year 、month
+                var selectDate = convertArrayValueToMoment(value, ['year', 'month'], currentDate);
+                var dateBoundary = _this.props.getDateBoundary(selectDate);
+                _this.setState({
+                    columns: _this.props.getColumns(_this.state.types, dateBoundary),
+                    pickerValue: value
+                });
+            }
+        };
+        _this.renderPicker = function () {
+            var __ = _this.props.translate;
+            var title = _this.state.types.length > 3 ? __('Date.titleTime') : __('Date.titleDate');
+            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.onPickerConfirm, onClose: _this.cancel }));
+        };
+        var selectedDate = props.selectedDate; props.viewDate; var timeFormat = props.timeFormat;
+        var currentDate = selectedDate || moment();
+        var types = ['year', 'month', 'date'];
+        timeFormat.split(':').forEach(function (format) {
+            var type = /h/i.test(format)
+                ? 'hours'
+                : /m/.test(format)
+                    ? 'minutes'
+                    : /s/.test(format)
+                        ? 'seconds'
+                        : '';
+            type && types.push(type);
+        });
+        var dateBoundary = _this.props.getDateBoundary(currentDate);
+        var columns = _this.props.getColumns(types, dateBoundary);
+        _this.state = {
+            columns: columns,
+            types: types,
+            pickerValue: currentDate.toArray(),
+            uniqueTag: 0
+        };
+        if (_this.props.timeConstraints) {
+            _this.timeConstraints = merge(_this.timeConstraints, props.timeConstraints);
+        }
+        return _this;
+    }
+    CustomDaysView.prototype.getDaysOfWeek = function (locale) {
+        var days = locale._weekdaysMin, first = locale.firstDayOfWeek(), dow = [], i = 0;
+        days.forEach(function (day) {
+            dow[(7 + i++ - first) % 7] = day;
+        });
+        return dow;
+    };
+    CustomDaysView.prototype.alwaysValidDate = function () {
+        return 1;
+    };
+    CustomDaysView.prototype.renderDays = function () {
+        var date = this.props.viewDate, selected = this.props.selectedDate && this.props.selectedDate.clone(), prevMonth = date.clone().subtract(1, 'months'), currentYear = date.year(), currentMonth = date.month(), weeks = [], days = [], renderer = this.props.renderDay || this.renderDay, isValid = this.props.isValidDate || this.alwaysValidDate, classes, isDisabled, dayProps, currentDate;
+        // Go to the last week of the previous month
+        prevMonth.date(prevMonth.daysInMonth()).startOf('week');
+        var lastDay = prevMonth.clone().add(42, 'd');
+        while (prevMonth.isBefore(lastDay)) {
+            classes = 'rdtDay';
+            currentDate = prevMonth.clone();
+            if ((prevMonth.year() === currentYear &&
+                prevMonth.month() < currentMonth) ||
+                prevMonth.year() < currentYear)
+                classes += ' rdtOld';
+            else if ((prevMonth.year() === currentYear &&
+                prevMonth.month() > currentMonth) ||
+                prevMonth.year() > currentYear)
+                classes += ' rdtNew';
+            if (selected && prevMonth.isSame(selected, 'day'))
+                classes += ' rdtActive';
+            if (prevMonth.isSame(moment(), 'day'))
+                classes += ' rdtToday';
+            isDisabled = !isValid(currentDate, selected);
+            if (isDisabled)
+                classes += ' rdtDisabled';
+            dayProps = {
+                'key': prevMonth.format('M_D'),
+                'data-value': prevMonth.date(),
+                'className': classes
+            };
+            if (!isDisabled)
+                dayProps.onClick = this.updateSelectedDate;
+            days.push(renderer(dayProps, currentDate, selected));
+            if (days.length === 7) {
+                weeks.push(React__default.createElement('tr', { key: prevMonth.format('M_D') }, days));
+                days = [];
+            }
+            prevMonth.add(1, 'd');
+        }
+        return weeks;
+    };
+    CustomDaysView.prototype.componentWillMount = function () {
+        this.setState({ uniqueTag: new Date().valueOf() });
+    };
+    CustomDaysView.prototype.componentDidMount = function () {
+        var _this = this;
+        var _a = this.props, timeFormat = _a.timeFormat, selectedDate = _a.selectedDate, viewDate = _a.viewDate, isEndDate = _a.isEndDate;
+        var formatMap = {
+            hours: 'HH',
+            minutes: 'mm',
+            seconds: 'ss'
+        };
+        var date = selectedDate || (isEndDate ? viewDate.endOf('day') : viewDate);
+        timeFormat.split(':').forEach(function (format, i) {
+            var type = /h/i.test(format)
+                ? 'hours'
+                : /m/.test(format)
+                    ? 'minutes'
+                    : /s/.test(format)
+                        ? 'seconds'
+                        : '';
+            if (type) {
+                _this.scrollToTop(type, parseInt(date.format(formatMap[type]), 10), i, 'init');
+            }
+        });
+    };
+    /** 时间选择器数据源 */
+    CustomDaysView.prototype.computedTimeOptions = function (timeScale) {
+        var _a;
+        var _b = (_a = this.timeConstraints) === null || _a === void 0 ? void 0 : _a[timeScale], min = _b.min, max = _b.max, step = _b.step;
+        return Array.from({ length: max - min + 1 }, function (item, index) {
+            var value = (index + min)
+                .toString()
+                .padStart(timeScale !== 'milliseconds' ? 2 : 3, '0');
+            return index % step === 0 ? { label: value, value: value } : undefined;
+        }).filter(function (item) { return !!item; });
+    };
+    CustomDaysView.prototype.render = function () {
+        var _a = this.props, date = _a.viewDate, useMobileUI = _a.useMobileUI, embed = _a.embed, timeFormat = _a.timeFormat; _a.classnames;
+        var locale = date.localeData();
+        var __ = this.props.translate;
+        if (isMobile() && useMobileUI && !embed) {
+            return React__default.createElement("div", { className: "rdtYears" }, this.renderPicker());
+        }
+        var tableChildren = [
+            this.props.hideHeader ? null : (React__default.createElement("thead", { key: "th" },
+                React__default.createElement("tr", null,
+                    React__default.createElement("th", { colSpan: 7 },
+                        React__default.createElement("div", { className: "rdtHeader" },
+                            React__default.createElement("a", { className: "rdtPrev", onClick: this.props.subtractTime(1, 'years') }, "\u00AB"),
+                            React__default.createElement("a", { className: "rdtPrev", onClick: this.props.subtractTime(1, 'months') }, "\u2039"),
+                            React__default.createElement("div", { className: "rdtCenter" },
+                                React__default.createElement("a", { className: "rdtSwitch", onClick: this.props.showView('years') }, date.format(__('dateformat.year'))),
+                                React__default.createElement("a", { className: "rdtSwitch", onClick: this.props.showView('months') }, date.format(__('MMM')))),
+                            React__default.createElement("a", { className: "rdtNext", onClick: this.props.addTime(1, 'months') }, "\u203A"),
+                            React__default.createElement("a", { className: "rdtNext", onClick: this.props.addTime(1, 'years') }, "\u00BB")))),
+                React__default.createElement("tr", null, this.getDaysOfWeek(locale).map(function (day, index) { return (React__default.createElement("th", { key: day + index, className: "dow" }, day)); })))),
+            React__default.createElement("tbody", { key: "tb" }, this.renderDays())
+        ];
+        return (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement("div", { className: timeFormat ? 'rdtDays' : '' },
+                React__default.createElement("table", { className: timeFormat ? 'rdtDaysPart' : '' }, tableChildren),
+                timeFormat ? (React__default.createElement("div", { className: timeFormat.toLowerCase().indexOf('s') > 0
+                        ? 'rdtTimePartWithS'
+                        : 'rdtTimePart' }, this.renderTimes())) : null),
+            React__default.createElement("table", null, this.renderFooter())));
+    };
+    return CustomDaysView;
+}(React__default.Component));
+var CustomDaysView$1 = localeable(CustomDaysView);
+
+export { CustomDaysView, CustomDaysView$1 as default };