amis 2.0.0-rc.14 → 2.0.0-rc.15

package/esm/renderers/Form/InputDate.d.ts

@@ -0,0 +1,359 @@
+import React from 'react';
+import { FormControlProps } from 'amis-core';
+import moment from 'moment';
+import 'moment/locale/zh-cn';
+import { FormBaseControlSchema } from '../../Schema';
+import { ActionObject } from 'amis-core';
+export interface InputDateBaseControlSchema extends FormBaseControlSchema {
+    /**
+     * 指定为日期选择控件
+     */
+    type: 'input-date' | 'input-datetime' | 'input-time' | 'input-month' | 'input-quarter' | 'input-year';
+    /**
+     * 是否显示清除按钮
+     */
+    clearable?: boolean;
+    /**
+     * 日期存储格式
+     */
+    format?: string;
+    /**
+     * 日期展示格式
+     */
+    inputFormat?: string;
+    /**
+     * 设定是否存储 utc 时间。
+     */
+    utc?: boolean;
+    /**
+     * 是否为内联模式？
+     */
+    emebed?: boolean;
+    /**
+     * 边框模式，全边框，还是半边框，或者没边框。
+     */
+    borderMode?: 'full' | 'half' | 'none';
+}
+/**
+ * Date日期选择控件
+ * 文档：https://baidu.gitee.io/amis/docs/components/form/date
+ */
+export interface DateControlSchema extends InputDateBaseControlSchema {
+    /**
+     * 指定为日期选择控件
+     */
+    type: 'input-date';
+    /**
+     * 日期存储格式
+     * @default X
+     */
+    format?: string;
+    /**
+     * 日期展示格式
+     * @default YYYY-MM-DD
+     */
+    inputFormat?: string;
+    /**
+     * 点选日期后是否关闭弹窗
+     */
+    closeOnSelect?: boolean;
+    /**
+     * 限制最小日期
+     */
+    minDate?: string;
+    /**
+     * 限制最大日期
+     */
+    maxDate?: string;
+}
+/**
+ * Datetime日期时间选择控件
+ * 文档：https://baidu.gitee.io/amis/docs/components/form/datetime
+ */
+export interface DateTimeControlSchema extends InputDateBaseControlSchema {
+    /**
+     * 指定为日期时间选择控件
+     */
+    type: 'input-datetime';
+    /**
+     * 日期存储格式
+     * @default X
+     */
+    format?: string;
+    /**
+     * 日期展示格式
+     * @default YYYY-MM-DD HH:mm
+     */
+    inputFormat?: string;
+    /**
+     * 时间的格式。
+     *
+     * @default HH:mm
+     */
+    timeFormat?: string;
+    /**
+     * 限制最小日期
+     */
+    minDate?: string;
+    /**
+     * 限制最大日期
+     */
+    maxDate?: string;
+    /**
+     * 时间输入范围限制
+     */
+    timeConstraints?: any;
+}
+/**
+ * Time 时间选择控件
+ * 文档：https://baidu.gitee.io/amis/docs/components/form/time
+ */
+export interface TimeControlSchema extends InputDateBaseControlSchema {
+    /**
+     * 指定为日期时间选择控件
+     */
+    type: 'input-time';
+    /**
+     * 日期存储格式
+     * @default X
+     */
+    format?: string;
+    /**
+     * 日期展示格式
+     * @default YYYY-MM-DD HH:mm
+     */
+    inputFormat?: string;
+    /**
+     * 时间的格式。
+     *
+     * @default HH:mm
+     */
+    timeFormat?: string;
+    /**
+     * 时间输入范围限制
+     */
+    timeConstraints?: any;
+}
+/**
+ * Month 月份选择控件
+ * 文档：https://baidu.gitee.io/amis/docs/components/form/Month
+ */
+export interface MonthControlSchema extends InputDateBaseControlSchema {
+    /**
+     * 指定为月份时间选择控件
+     */
+    type: 'input-month';
+    /**
+     * 月份存储格式
+     * @default X
+     */
+    format?: string;
+    /**
+     * 月份展示格式
+     * @default YYYY-MM
+     */
+    inputFormat?: string;
+}
+/**
+ * 季度选择控件
+ */
+export interface QuarterControlSchema extends InputDateBaseControlSchema {
+    /**
+     * 指定为月份时间选择控件
+     */
+    type: 'input-quarter';
+    /**
+     * 月份存储格式
+     * @default X
+     */
+    format?: string;
+    /**
+     * 月份展示格式
+     * @default YYYY-MM
+     */
+    inputFormat?: string;
+}
+/**
+ * 年份选择控件
+ */
+export interface YearControlSchema extends InputDateBaseControlSchema {
+    /**
+     * 指定为月份时间选择控件
+     */
+    type: 'input-year';
+    /**
+     * 月份存储格式
+     * @default X
+     */
+    format?: string;
+    /**
+     * 月份展示格式
+     * @default YYYY-MM
+     */
+    inputFormat?: string;
+}
+export interface DateProps extends FormControlProps {
+    inputFormat?: string;
+    timeFormat?: string;
+    format?: string;
+    valueFormat?: string;
+    timeConstraints?: {
+        hours?: {
+            min: number;
+            max: number;
+            step: number;
+        };
+        minutes?: {
+            min: number;
+            max: number;
+            step: number;
+        };
+        seconds: {
+            min: number;
+            max: number;
+            step: number;
+        };
+    };
+    closeOnSelect?: boolean;
+    disabled: boolean;
+    iconClassName?: string;
+    utc?: boolean;
+    minDate?: string;
+    maxDate?: string;
+}
+interface DateControlState {
+    minDate?: moment.Moment;
+    maxDate?: moment.Moment;
+    schedules?: Array<{
+        startTime: Date;
+        endTime: Date;
+        content: any;
+        className?: string;
+    }>;
+}
+export default class DateControl extends React.PureComponent<DateProps, DateControlState> {
+    static defaultProps: {
+        format: string;
+        viewMode: string;
+        inputFormat: string;
+        timeConstraints: {
+            minutes: {
+                step: number;
+            };
+        };
+        clearable: boolean;
+    };
+    dateRef?: any;
+    constructor(props: DateProps);
+    componentDidUpdate(prevProps: DateProps): void;
+    onScheduleClick(scheduleData: any): void;
+    getRef(ref: any): void;
+    dispatchEvent(e: React.SyntheticEvent<HTMLElement>): void;
+    doAction(action: ActionObject, data: object, throwErrors: boolean): void;
+    handleChange(nextValue: any): Promise<void>;
+    render(): JSX.Element;
+}
+export declare class DateControlRenderer extends DateControl {
+    static defaultProps: {
+        placeholder: string;
+        dateFormat: string;
+        timeFormat: string;
+        strictMode: boolean;
+        format: string;
+        viewMode: string;
+        inputFormat: string;
+        timeConstraints: {
+            minutes: {
+                step: number;
+            };
+        };
+        clearable: boolean;
+    };
+}
+export declare class DatetimeControlRenderer extends DateControl {
+    static defaultProps: {
+        placeholder: string;
+        inputFormat: string;
+        dateFormat: string;
+        timeFormat: string;
+        closeOnSelect: boolean;
+        strictMode: boolean;
+        format: string;
+        viewMode: string;
+        timeConstraints: {
+            minutes: {
+                step: number;
+            };
+        };
+        clearable: boolean;
+    };
+}
+export declare class TimeControlRenderer extends DateControl {
+    static defaultProps: {
+        placeholder: string;
+        inputFormat: string;
+        dateFormat: string;
+        timeFormat: string;
+        viewMode: string;
+        closeOnSelect: boolean;
+        format: string;
+        timeConstraints: {
+            minutes: {
+                step: number;
+            };
+        };
+        clearable: boolean;
+    };
+}
+export declare class MonthControlRenderer extends DateControl {
+    static defaultProps: {
+        placeholder: string;
+        inputFormat: string;
+        dateFormat: string;
+        timeFormat: string;
+        viewMode: string;
+        closeOnSelect: boolean;
+        format: string;
+        timeConstraints: {
+            minutes: {
+                step: number;
+            };
+        };
+        clearable: boolean;
+    };
+}
+export declare class QuarterControlRenderer extends DateControl {
+    static defaultProps: {
+        placeholder: string;
+        inputFormat: string;
+        dateFormat: string;
+        timeFormat: string;
+        viewMode: string;
+        closeOnSelect: boolean;
+        format: string;
+        timeConstraints: {
+            minutes: {
+                step: number;
+            };
+        };
+        clearable: boolean;
+    };
+}
+export declare class YearControlRenderer extends DateControl {
+    static defaultProps: {
+        placeholder: string;
+        inputFormat: string;
+        dateFormat: string;
+        timeFormat: string;
+        viewMode: string;
+        closeOnSelect: boolean;
+        format: string;
+        timeConstraints: {
+            minutes: {
+                step: number;
+            };
+        };
+        clearable: boolean;
+    };
+}
+export {};

package/esm/renderers/Form/InputDate.js

@@ -0,0 +1,258 @@
+/**
+ * amis v2.0.0-rc.15
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __awaiter, __generator, __rest, __assign, __decorate, __metadata } from 'tslib';
+import React from 'react';
+import { filterDate, resolveVariableAndFilter, anyChanged, isPureVariable, createObject, isMobile, autobind, FormItem } from 'amis-core';
+import moment from 'moment';
+import 'moment/locale/zh-cn';
+import { DatePicker } from 'amis-ui';
+
+var DateControl = /** @class */ (function (_super) {
+    __extends(DateControl, _super);
+    function DateControl(props) {
+        var _this = _super.call(this, props) || this;
+        var minDate = props.minDate, maxDate = props.maxDate, value = props.value, defaultValue = props.defaultValue, setPrinstineValue = props.setPrinstineValue, data = props.data, format = props.format, utc = props.utc;
+        if (defaultValue && value === defaultValue) {
+            var date = filterDate(defaultValue, data, format);
+            setPrinstineValue((utc ? moment.utc(date) : date).format(format));
+        }
+        var schedulesData = props.schedules;
+        if (typeof schedulesData === 'string') {
+            var resolved = resolveVariableAndFilter(schedulesData, data, '| raw');
+            if (Array.isArray(resolved)) {
+                schedulesData = resolved;
+            }
+        }
+        _this.state = {
+            minDate: minDate ? filterDate(minDate, data, format) : undefined,
+            maxDate: maxDate ? filterDate(maxDate, data, format) : undefined,
+            schedules: schedulesData
+        };
+        return _this;
+    }
+    DateControl.prototype.componentDidUpdate = function (prevProps) {
+        var props = this.props;
+        if (prevProps.defaultValue !== props.defaultValue) {
+            var date = filterDate(props.defaultValue, props.data, props.format);
+            props.setPrinstineValue((props.utc ? moment.utc(date) : date).format(props.format));
+        }
+        if (prevProps.minDate !== props.minDate ||
+            prevProps.maxDate !== props.maxDate ||
+            prevProps.data !== props.data) {
+            this.setState({
+                minDate: props.minDate
+                    ? filterDate(props.minDate, props.data, this.props.format)
+                    : undefined,
+                maxDate: props.maxDate
+                    ? filterDate(props.maxDate, props.data, this.props.format)
+                    : undefined
+            });
+        }
+        if (anyChanged(['schedules', 'data'], prevProps, props) &&
+            typeof props.schedules === 'string' &&
+            isPureVariable(props.schedules)) {
+            var schedulesData = resolveVariableAndFilter(props.schedules, props.data, '| raw');
+            var preSchedulesData = resolveVariableAndFilter(prevProps.schedules, prevProps.data, '| raw');
+            if (Array.isArray(schedulesData) && preSchedulesData !== schedulesData) {
+                this.setState({
+                    schedules: schedulesData
+                });
+            }
+        }
+    };
+    // 日程点击事件
+    DateControl.prototype.onScheduleClick = function (scheduleData) {
+        var _a = this.props, scheduleAction = _a.scheduleAction, onAction = _a.onAction, data = _a.data, __ = _a.translate;
+        var defaultscheduleAction = {
+            actionType: 'dialog',
+            dialog: {
+                title: __('Schedule'),
+                actions: [],
+                body: {
+                    type: 'table',
+                    columns: [
+                        {
+                            name: 'time',
+                            label: __('Time')
+                        },
+                        {
+                            name: 'content',
+                            label: __('Content')
+                        }
+                    ],
+                    data: '${scheduleData}'
+                }
+            }
+        };
+        onAction &&
+            onAction(null, scheduleAction || defaultscheduleAction, createObject(data, scheduleData));
+    };
+    DateControl.prototype.getRef = function (ref) {
+        while (ref && ref.getWrappedInstance) {
+            ref = ref.getWrappedInstance();
+        }
+        this.dateRef = ref;
+    };
+    // 派发有event的事件
+    DateControl.prototype.dispatchEvent = function (e) {
+        var _a = this.props, dispatchEvent = _a.dispatchEvent, data = _a.data;
+        dispatchEvent(e, data);
+    };
+    // 动作
+    DateControl.prototype.doAction = function (action, data, throwErrors) {
+        var _a, _b;
+        var resetValue = this.props.resetValue;
+        if (action.actionType === 'clear') {
+            (_a = this.dateRef) === null || _a === void 0 ? void 0 : _a.clear();
+            return;
+        }
+        if (action.actionType === 'reset' && resetValue) {
+            (_b = this.dateRef) === null || _b === void 0 ? void 0 : _b.reset(resetValue);
+        }
+    };
+    // 值的变化
+    DateControl.prototype.handleChange = function (nextValue) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, dispatchEvent, data, dispatcher;
+            return __generator(this, function (_b) {
+                _a = this.props, dispatchEvent = _a.dispatchEvent, data = _a.data;
+                dispatcher = dispatchEvent('change', createObject(data, { value: nextValue }));
+                if (dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.prevented) {
+                    return [2 /*return*/];
+                }
+                this.props.onChange(nextValue);
+                return [2 /*return*/];
+            });
+        });
+    };
+    DateControl.prototype.render = function () {
+        var _a = this.props, className = _a.className; _a.defaultValue; _a.defaultData; var cx = _a.classnames; _a.minDate; _a.maxDate; var type = _a.type, format = _a.format, timeFormat = _a.timeFormat, valueFormat = _a.valueFormat, env = _a.env, largeMode = _a.largeMode; _a.render; var useMobileUI = _a.useMobileUI, rest = __rest(_a, ["className", "defaultValue", "defaultData", "classnames", "minDate", "maxDate", "type", "format", "timeFormat", "valueFormat", "env", "largeMode", "render", "useMobileUI"]);
+        var mobileUI = useMobileUI && isMobile();
+        if (type === 'time' && timeFormat) {
+            format = timeFormat;
+        }
+        return (React.createElement("div", { className: cx("DateControl", {
+                'is-date': /date$/.test(type),
+                'is-datetime': /datetime$/.test(type)
+            }, className) },
+            React.createElement(DatePicker, __assign({}, rest, { useMobileUI: useMobileUI, popOverContainer: mobileUI && env && env.getModalContainer
+                    ? env.getModalContainer
+                    : mobileUI
+                        ? undefined
+                        : rest.popOverContainer, timeFormat: timeFormat, format: valueFormat || format }, this.state, { classnames: cx, onRef: this.getRef, schedules: this.state.schedules, largeMode: largeMode, onScheduleClick: this.onScheduleClick.bind(this), onChange: this.handleChange, onFocus: this.dispatchEvent, onBlur: this.dispatchEvent }))));
+    };
+    DateControl.defaultProps = {
+        format: 'X',
+        viewMode: 'days',
+        inputFormat: 'YYYY-MM-DD',
+        timeConstraints: {
+            minutes: {
+                step: 1
+            }
+        },
+        clearable: true
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], DateControl.prototype, "getRef", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], DateControl.prototype, "dispatchEvent", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", Promise)
+    ], DateControl.prototype, "handleChange", null);
+    return DateControl;
+}(React.PureComponent));
+var DateControlRenderer = /** @class */ (function (_super) {
+    __extends(DateControlRenderer, _super);
+    function DateControlRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DateControlRenderer.defaultProps = __assign(__assign({}, DateControl.defaultProps), { placeholder: 'Date.placeholder', dateFormat: 'YYYY-MM-DD', timeFormat: '', strictMode: false });
+    DateControlRenderer = __decorate([
+        FormItem({
+            type: 'input-date',
+            weight: -150
+        })
+    ], DateControlRenderer);
+    return DateControlRenderer;
+}(DateControl));
+/** @class */ ((function (_super) {
+    __extends(DatetimeControlRenderer, _super);
+    function DatetimeControlRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DatetimeControlRenderer.defaultProps = __assign(__assign({}, DateControl.defaultProps), { placeholder: 'DateTime.placeholder', inputFormat: 'YYYY-MM-DD HH:mm:ss', dateFormat: 'LL', timeFormat: 'HH:mm:ss', closeOnSelect: false, strictMode: false });
+    DatetimeControlRenderer = __decorate([
+        FormItem({
+            type: 'input-datetime'
+        })
+    ], DatetimeControlRenderer);
+    return DatetimeControlRenderer;
+})(DateControl));
+/** @class */ ((function (_super) {
+    __extends(TimeControlRenderer, _super);
+    function TimeControlRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    TimeControlRenderer.defaultProps = __assign(__assign({}, DateControl.defaultProps), { placeholder: 'Time.placeholder', inputFormat: 'HH:mm', dateFormat: '', timeFormat: 'HH:mm', viewMode: 'time', closeOnSelect: false });
+    TimeControlRenderer = __decorate([
+        FormItem({
+            type: 'input-time'
+        })
+    ], TimeControlRenderer);
+    return TimeControlRenderer;
+})(DateControl));
+/** @class */ ((function (_super) {
+    __extends(MonthControlRenderer, _super);
+    function MonthControlRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    MonthControlRenderer.defaultProps = __assign(__assign({}, DateControl.defaultProps), { placeholder: 'Month.placeholder', inputFormat: 'YYYY-MM', dateFormat: 'MM', timeFormat: '', viewMode: 'months', closeOnSelect: true });
+    MonthControlRenderer = __decorate([
+        FormItem({
+            type: 'input-month'
+        })
+    ], MonthControlRenderer);
+    return MonthControlRenderer;
+})(DateControl));
+/** @class */ ((function (_super) {
+    __extends(QuarterControlRenderer, _super);
+    function QuarterControlRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    QuarterControlRenderer.defaultProps = __assign(__assign({}, DateControl.defaultProps), { placeholder: 'Quarter.placeholder', inputFormat: 'YYYY [Q]Q', dateFormat: 'YYYY [Q]Q', timeFormat: '', viewMode: 'quarters', closeOnSelect: true });
+    QuarterControlRenderer = __decorate([
+        FormItem({
+            type: 'input-quarter'
+        })
+    ], QuarterControlRenderer);
+    return QuarterControlRenderer;
+})(DateControl));
+/** @class */ ((function (_super) {
+    __extends(YearControlRenderer, _super);
+    function YearControlRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    YearControlRenderer.defaultProps = __assign(__assign({}, DateControl.defaultProps), { placeholder: 'Year.placeholder', inputFormat: 'YYYY', dateFormat: 'YYYY', timeFormat: '', viewMode: 'years', closeOnSelect: true });
+    YearControlRenderer = __decorate([
+        FormItem({
+            type: 'input-year'
+        })
+    ], YearControlRenderer);
+    return YearControlRenderer;
+})(DateControl));
+
+export { DateControlRenderer, DateControl as default };