amis 2.0.0-rc.9 → 2.0.0

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

@@ -0,0 +1,121 @@
+import React from 'react';
+import { FormControlProps } from 'amis-core';
+import 'moment/locale/zh-cn';
+import { ActionObject } from 'amis-core';
+import type { ShortCuts } from 'amis-ui/lib/components/DatePicker';
+import { FormBaseControlSchema } from '../../Schema';
+/**
+ * DateRange 日期范围控件
+ * 文档：https://baidu.gitee.io/amis/docs/components/form/date-range
+ */
+export interface DateRangeControlSchema extends FormBaseControlSchema {
+    /**
+     * 指定为日期范围控件
+     */
+    type: 'input-date-range' | 'input-datetime-range' | 'input-time-range';
+    /**
+     * 分割符, 因为有两个值，开始时间和结束时间，所以要有连接符。默认为英文逗号。
+     *
+     */
+    delimiter?: string;
+    /**
+     * 默认 `X` 即时间戳格式，用来提交的时间格式。更多格式类型请参考 moment.
+     */
+    format?: string;
+    /**
+     * 默认 `YYYY-MM-DD` 用来配置显示的时间格式。
+     */
+    inputFormat?: string;
+    /**
+     * 开启后将选中的选项 value 的值用连接符拼接起来，作为当前表单项的值。如： `value1,value2` 否则为 `[value1, value2]`
+     */
+    joinValues?: boolean;
+    /**
+     * 最大日期限制，支持变量 $xxx 来取值，或者用相对值如：* `-2mins` 2分钟前\n * `+2days` 2天后\n* `-10week` 十周前\n可用单位： `min`、`hour`、`day`、`week`、`month`、`year`。所有单位支持复数形式。
+     */
+    maxDate?: string;
+    /**
+     * 最小日期限制，支持变量 $xxx 来取值，或者用相对值如：* `-2mins` 2分钟前\n * `+2days` 2天后\n* `-10week` 十周前\n可用单位： `min`、`hour`、`day`、`week`、`month`、`year`。所有单位支持复数形式。
+     */
+    minDate?: string;
+    /**
+     * 最大跨度，比如 2days
+     */
+    maxDuration?: string;
+    /**
+     * 最小跨度，比如 2days
+     */
+    minDuration?: string;
+    /**
+     * 这里面 value 需要特殊说明一下，因为支持相对值。* `-2mins` 2分钟前\n * `+2days` 2天后\n* `-10week` 十周前\n可用单位： `min`、`hour`、`day`、`week`、`month`、`year`。所有单位支持复数形式。
+     */
+    value?: any;
+    /**
+     * 边框模式，全边框，还是半边框，或者没边框。
+     */
+    borderMode?: 'full' | 'half' | 'none';
+    /**
+     * 开启后变成非弹出模式，即内联模式。
+     */
+    embed?: boolean;
+    /**
+     * 日期范围快捷键
+     */
+    ranges?: string | Array<ShortCuts>;
+    /**
+     * 日期范围开始时间-占位符
+     */
+    startPlaceholder?: string;
+    /**
+     * 日期范围结束时间-占位符
+     */
+    endPlaceholder?: string;
+}
+export interface DateRangeProps extends FormControlProps, Omit<DateRangeControlSchema, 'type' | 'className' | 'descriptionClassName' | 'inputClassName'> {
+    delimiter: string;
+    format: string;
+    joinValues: boolean;
+}
+export default class DateRangeControl extends React.Component<DateRangeProps> {
+    static defaultProps: {
+        format: string;
+        joinValues: boolean;
+        delimiter: string;
+    };
+    dateRef?: any;
+    constructor(props: DateRangeProps);
+    componentDidUpdate(prevProps: DateRangeProps): void;
+    getRef(ref: any): void;
+    dispatchEvent(eventName: string): void;
+    doAction(action: ActionObject, data: object, throwErrors: boolean): void;
+    handleChange(nextValue: any): Promise<void>;
+    render(): JSX.Element;
+}
+export declare class DateRangeControlRenderer extends DateRangeControl {
+    static defaultProps: {
+        timeFormat: string;
+        format: string;
+        joinValues: boolean;
+        delimiter: string;
+    };
+}
+export declare class DateTimeRangeControlRenderer extends DateRangeControl {
+    static defaultProps: {
+        timeFormat: string;
+        inputFormat: string;
+        format: string;
+        joinValues: boolean;
+        delimiter: string;
+    };
+}
+export declare class TimeRangeControlRenderer extends DateRangeControl {
+    static defaultProps: {
+        format: string;
+        timeFormat: string;
+        inputFormat: string;
+        viewMode: string;
+        ranges: string;
+        joinValues: boolean;
+        delimiter: string;
+    };
+}

package/esm/renderers/Form/InputDateRange.js

@@ -0,0 +1,166 @@
+/**
+ * amis v2.0.0
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __awaiter, __generator, __rest, __assign, __decorate, __metadata } from 'tslib';
+import React from 'react';
+import { filterDate, createObject, isMobile, parseDuration, autobind, FormItem } from 'amis-core';
+import cx from 'classnames';
+import 'moment/locale/zh-cn';
+import { DateRangePicker } from 'amis-ui';
+
+var DateRangeControl = /** @class */ (function (_super) {
+    __extends(DateRangeControl, _super);
+    function DateRangeControl(props) {
+        var _this = _super.call(this, props) || this;
+        var defaultValue = props.defaultValue, setPrinstineValue = props.setPrinstineValue, delimiter = props.delimiter, format = props.format, data = props.data, value = props.value, joinValues = props.joinValues, utc = props.utc;
+        if (defaultValue && value === defaultValue) {
+            var arr = typeof defaultValue === 'string'
+                ? defaultValue.split(delimiter)
+                : defaultValue;
+            setPrinstineValue(DateRangePicker.formatValue({
+                startDate: filterDate(arr[0], data, format),
+                endDate: filterDate(arr[1], data, format)
+            }, format, joinValues, delimiter, utc));
+        }
+        return _this;
+    }
+    DateRangeControl.prototype.componentDidUpdate = function (prevProps) {
+        var _a = this.props, defaultValue = _a.defaultValue, delimiter = _a.delimiter, joinValues = _a.joinValues, setPrinstineValue = _a.setPrinstineValue, data = _a.data, utc = _a.utc, format = _a.format;
+        if (prevProps.defaultValue !== defaultValue) {
+            var arr = typeof defaultValue === 'string'
+                ? defaultValue.split(delimiter)
+                : defaultValue;
+            setPrinstineValue(arr
+                ? DateRangePicker.formatValue({
+                    startDate: filterDate(arr[0], data, format),
+                    endDate: filterDate(arr[1], data, format)
+                }, format, joinValues, delimiter, utc)
+                : undefined);
+        }
+    };
+    DateRangeControl.prototype.getRef = function (ref) {
+        while (ref && ref.getWrappedInstance) {
+            ref = ref.getWrappedInstance();
+        }
+        this.dateRef = ref;
+    };
+    // 派发有event的事件
+    DateRangeControl.prototype.dispatchEvent = function (eventName) {
+        var _a = this.props, dispatchEvent = _a.dispatchEvent, data = _a.data, value = _a.value;
+        dispatchEvent(eventName, createObject(data, {
+            value: value
+        }));
+    };
+    // 动作
+    DateRangeControl.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();
+        }
+    };
+    // 值的变化
+    DateRangeControl.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*/];
+            });
+        });
+    };
+    DateRangeControl.prototype.render = function () {
+        var _this = this;
+        var _a;
+        var _b = this.props, className = _b.className, ns = _b.classPrefix; _b.defaultValue; _b.defaultData; var minDate = _b.minDate, maxDate = _b.maxDate, minDuration = _b.minDuration, maxDuration = _b.maxDuration, data = _b.data, format = _b.format, env = _b.env, useMobileUI = _b.useMobileUI, rest = __rest(_b, ["className", "classPrefix", "defaultValue", "defaultData", "minDate", "maxDate", "minDuration", "maxDuration", "data", "format", "env", "useMobileUI"]);
+        var mobileUI = useMobileUI && isMobile();
+        var comptType = (_a = this.props) === null || _a === void 0 ? void 0 : _a.type;
+        return (React.createElement("div", { className: cx("".concat(ns, "DateRangeControl"), {
+                'is-date': /date-/.test(comptType),
+                'is-datetime': /datetime-/.test(comptType)
+            }, className) },
+            React.createElement(DateRangePicker, __assign({}, rest, { useMobileUI: useMobileUI, classPrefix: ns, popOverContainer: mobileUI && env && env.getModalContainer
+                    ? env.getModalContainer
+                    : mobileUI
+                        ? undefined
+                        : rest.popOverContainer, onRef: this.getRef, data: data, format: format, minDate: minDate ? filterDate(minDate, data, format) : undefined, maxDate: maxDate ? filterDate(maxDate, data, format) : undefined, minDuration: minDuration ? parseDuration(minDuration) : undefined, maxDuration: maxDuration ? parseDuration(maxDuration) : undefined, onChange: this.handleChange, onFocus: function () { return _this.dispatchEvent('focus'); }, onBlur: function () { return _this.dispatchEvent('blur'); } }))));
+    };
+    DateRangeControl.defaultProps = {
+        format: 'X',
+        joinValues: true,
+        delimiter: ','
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], DateRangeControl.prototype, "getRef", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [String]),
+        __metadata("design:returntype", void 0)
+    ], DateRangeControl.prototype, "dispatchEvent", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", Promise)
+    ], DateRangeControl.prototype, "handleChange", null);
+    return DateRangeControl;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(DateRangeControlRenderer, _super);
+    function DateRangeControlRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DateRangeControlRenderer.defaultProps = __assign(__assign({}, DateRangeControl.defaultProps), { timeFormat: '' });
+    DateRangeControlRenderer = __decorate([
+        FormItem({
+            type: 'input-date-range'
+        })
+    ], DateRangeControlRenderer);
+    return DateRangeControlRenderer;
+})(DateRangeControl));
+/** @class */ ((function (_super) {
+    __extends(DateTimeRangeControlRenderer, _super);
+    function DateTimeRangeControlRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DateTimeRangeControlRenderer.defaultProps = __assign(__assign({}, DateRangeControl.defaultProps), { timeFormat: 'HH:mm', inputFormat: 'YYYY-MM-DD HH:mm' });
+    DateTimeRangeControlRenderer = __decorate([
+        FormItem({
+            type: 'input-datetime-range',
+            sizeMutable: false
+        })
+    ], DateTimeRangeControlRenderer);
+    return DateTimeRangeControlRenderer;
+})(DateRangeControl));
+/** @class */ ((function (_super) {
+    __extends(TimeRangeControlRenderer, _super);
+    function TimeRangeControlRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    TimeRangeControlRenderer.defaultProps = __assign(__assign({}, DateRangeControl.defaultProps), { format: 'HH:mm', timeFormat: 'HH:mm', inputFormat: 'HH:mm', viewMode: 'time', ranges: '' });
+    TimeRangeControlRenderer = __decorate([
+        FormItem({
+            type: 'input-time-range',
+            sizeMutable: false
+        })
+    ], TimeRangeControlRenderer);
+    return TimeRangeControlRenderer;
+})(DateRangeControl));
+
+export { DateRangeControl as default };

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import { FormControlProps } from 'amis-core';
+import { FormBaseControlSchema } from '../../Schema';
+/**
+ * Excel 解析
+ * 文档：https://baidu.gitee.io/amis/docs/components/form/input-excel
+ */
+export interface InputExcelControlSchema extends FormBaseControlSchema {
+    /**
+     * 指定为 Excel 解析
+     */
+    type: 'input-excel';
+    /**
+     * 是否解析所有 sheet，默认情况下只解析第一个
+     */
+    allSheets: boolean;
+    /**
+     * 解析模式，array 是解析成二维数组，object 是将第一列作为字段名，解析为对象数组
+     */
+    parseMode: 'array' | 'object';
+    /**
+     * 是否包含空内容，主要用于二维数组模式
+     */
+    includeEmpty: boolean;
+    /**
+     * 纯文本模式
+     */
+    plainText: boolean;
+}
+export interface ExcelProps extends FormControlProps, Omit<InputExcelControlSchema, 'type' | 'className' | 'descriptionClassName' | 'inputClassName'> {
+}
+export interface ExcelControlState {
+    filename: string;
+}
+export declare type InputExcelRendererEvent = 'change';
+export declare type InputExcelRendererAction = 'clear';
+export default class ExcelControl extends React.PureComponent<ExcelProps, ExcelControlState> {
+    static defaultProps: Partial<ExcelProps>;
+    state: ExcelControlState;
+    ExcelJS: any;
+    handleDrop(files: File[]): void;
+    dispatchEvent(eventName: string, eventData?: Record<string, any>): Promise<any>;
+    /**
+     * 读取单个 sheet 的内容
+     */
+    readWorksheet(worksheet: any): any[];
+    doAction(action: any, data: object, throwErrors: boolean): void;
+    render(): JSX.Element;
+}
+export declare class ExcelControlRenderer extends ExcelControl {
+}

package/esm/renderers/Form/InputExcel.js

@@ -0,0 +1,195 @@
+/**
+ * amis v2.0.0
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __awaiter, __generator, __assign, __decorate, __metadata } from 'tslib';
+import React from 'react';
+import DropZone from 'react-dropzone';
+import { createObject, autobind, FormItem } from 'amis-core';
+
+var ExcelControl = /** @class */ (function (_super) {
+    __extends(ExcelControl, _super);
+    function ExcelControl() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            filename: ''
+        };
+        return _this;
+    }
+    ExcelControl.prototype.handleDrop = function (files) {
+        var _this = this;
+        var _a = this.props, allSheets = _a.allSheets, onChange = _a.onChange; _a.dispatchEvent; _a.data;
+        var excel = files[0];
+        var reader = new FileReader();
+        reader.readAsArrayBuffer(excel);
+        reader.onload = function () { return __awaiter(_this, void 0, void 0, function () {
+            var _this = this;
+            return __generator(this, function (_a) {
+                if (reader.result) {
+                    import('exceljs').then(function (ExcelJS) { return __awaiter(_this, void 0, void 0, function () {
+                        var workbook, sheetsResult, worksheet, dispatcher;
+                        var _this = this;
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0:
+                                    this.ExcelJS = ExcelJS;
+                                    workbook = new ExcelJS.Workbook();
+                                    return [4 /*yield*/, workbook.xlsx.load(reader.result)];
+                                case 1:
+                                    _a.sent();
+                                    sheetsResult = [];
+                                    if (allSheets) {
+                                        workbook.eachSheet(function (worksheet) {
+                                            sheetsResult.push({
+                                                sheetName: worksheet.name,
+                                                data: _this.readWorksheet(worksheet)
+                                            });
+                                        });
+                                    }
+                                    else {
+                                        worksheet = workbook.worksheets[0];
+                                        sheetsResult = this.readWorksheet(worksheet);
+                                    }
+                                    return [4 /*yield*/, this.dispatchEvent('change', sheetsResult)];
+                                case 2:
+                                    dispatcher = _a.sent();
+                                    if (dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.prevented) {
+                                        return [2 /*return*/];
+                                    }
+                                    onChange(sheetsResult);
+                                    this.setState({ filename: files[0].name });
+                                    return [2 /*return*/];
+                            }
+                        });
+                    }); });
+                }
+                return [2 /*return*/];
+            });
+        }); };
+    };
+    ExcelControl.prototype.dispatchEvent = function (eventName, eventData) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, dispatchEvent, data;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = this.props, dispatchEvent = _a.dispatchEvent, data = _a.data;
+                        return [4 /*yield*/, dispatchEvent(eventName, createObject(data, {
+                                value: eventData
+                            }))];
+                    case 1: return [2 /*return*/, _b.sent()];
+                }
+            });
+        });
+    };
+    /**
+     * 读取单个 sheet 的内容
+     */
+    ExcelControl.prototype.readWorksheet = function (worksheet) {
+        var _this = this;
+        var result = [];
+        var _a = this.props, parseMode = _a.parseMode, plainText = _a.plainText, includeEmpty = _a.includeEmpty;
+        if (parseMode === 'array') {
+            worksheet.eachRow(function (row, rowNumber) {
+                var values = row.values;
+                values.shift(); // excel 返回的值是从 1 开始的，0 节点永远是 null
+                result.push(values);
+            });
+            return result;
+        }
+        else {
+            var firstRowValues_1 = [];
+            worksheet.eachRow(function (row, rowNumber) {
+                // 将第一列作为字段名
+                if (rowNumber == 1) {
+                    firstRowValues_1 = row.values;
+                }
+                else {
+                    var data_1 = {};
+                    if (includeEmpty) {
+                        firstRowValues_1.forEach(function (item) {
+                            data_1[item] = '';
+                        });
+                    }
+                    row.eachCell(function (cell, colNumber) {
+                        if (firstRowValues_1[colNumber]) {
+                            var value = cell.value;
+                            if (plainText) {
+                                var ExcelValueType = _this.ExcelJS.ValueType;
+                                if (cell.type === ExcelValueType.Hyperlink) {
+                                    value = cell.value.hyperlink;
+                                }
+                                else if (cell.type === ExcelValueType.Formula) {
+                                    value = cell.value.result;
+                                }
+                                else if (cell.type === ExcelValueType.RichText) {
+                                    value = cell.value.richText
+                                        .map(function (item) { return item.text; })
+                                        .join('');
+                                }
+                                else if (cell.type === ExcelValueType.Error) {
+                                    value = '';
+                                }
+                            }
+                            data_1[firstRowValues_1[colNumber]] = value;
+                        }
+                    });
+                    result.push(data_1);
+                }
+            });
+            return result;
+        }
+    };
+    ExcelControl.prototype.doAction = function (action, data, throwErrors) {
+        var actionType = action === null || action === void 0 ? void 0 : action.actionType;
+        var _a = this.props, onChange = _a.onChange, resetValue = _a.resetValue;
+        if (actionType === 'clear') {
+            onChange('');
+        }
+        else if (actionType === 'reset') {
+            onChange(resetValue !== null && resetValue !== void 0 ? resetValue : '');
+        }
+    };
+    ExcelControl.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, className = _a.className, cx = _a.classnames; _a.classPrefix; _a.value; var disabled = _a.disabled, __ = _a.translate;
+        return (React.createElement("div", { className: cx('ExcelControl', className) },
+            React.createElement(DropZone, { key: "drop-zone", onDrop: this.handleDrop, accept: ".xlsx", multiple: false, disabled: disabled }, function (_a) {
+                var getRootProps = _a.getRootProps, getInputProps = _a.getInputProps;
+                return (React.createElement("section", { className: cx('ExcelControl-container', className) },
+                    React.createElement("div", __assign({}, getRootProps({ className: cx('ExcelControl-dropzone') })),
+                        React.createElement("input", __assign({}, getInputProps())),
+                        _this.state.filename ? (__('Excel.parsed', {
+                            filename: _this.state.filename
+                        })) : (React.createElement("p", null, __('Excel.placeholder'))))));
+            })));
+    };
+    ExcelControl.defaultProps = {
+        allSheets: false,
+        parseMode: 'object',
+        includeEmpty: true,
+        plainText: true
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Array]),
+        __metadata("design:returntype", void 0)
+    ], ExcelControl.prototype, "handleDrop", null);
+    return ExcelControl;
+}(React.PureComponent));
+/** @class */ ((function (_super) {
+    __extends(ExcelControlRenderer, _super);
+    function ExcelControlRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ExcelControlRenderer = __decorate([
+        FormItem({
+            type: 'input-excel'
+        })
+    ], ExcelControlRenderer);
+    return ExcelControlRenderer;
+})(ExcelControl));
+
+export { ExcelControl as default };