amis 2.0.0-rc.9 → 2.0.0

package/esm/renderers/Form/Group.js

@@ -0,0 +1,99 @@
+/**
+ * amis v2.0.0
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __assign, __rest, __decorate, __metadata } from 'tslib';
+import React from 'react';
+import { isVisible, makeHorizontalDeeper, getWidthRate, FormItemWrap, Renderer } from 'amis-core';
+
+/** @class */ ((function (_super) {
+    __extends(ControlGroupRenderer, _super);
+    function ControlGroupRenderer(props) {
+        var _this = _super.call(this, props) || this;
+        _this.renderInput = _this.renderInput.bind(_this);
+        return _this;
+    }
+    ControlGroupRenderer.prototype.renderControl = function (control, index, otherProps) {
+        var _a = this.props, render = _a.render, disabled = _a.disabled; _a.data; var mode = _a.mode, horizontal = _a.horizontal, formMode = _a.formMode, formHorizontal = _a.formHorizontal, subFormMode = _a.subFormMode, subFormHorizontal = _a.subFormHorizontal;
+        if (!control) {
+            return null;
+        }
+        var subSchema = control;
+        return render("".concat(index), subSchema, __assign({ disabled: control.disabled || disabled, formMode: subFormMode || mode || formMode, formHorizontal: subFormHorizontal || horizontal || formHorizontal }, otherProps));
+    };
+    ControlGroupRenderer.prototype.renderVertical = function (props) {
+        var _this = this;
+        if (props === void 0) { props = this.props; }
+        var body = props.body, className = props.className, cx = props.classnames, mode = props.mode, formMode = props.formMode, data = props.data;
+        formMode = mode || formMode;
+        if (!Array.isArray(body)) {
+            return null;
+        }
+        return (React.createElement("div", { className: cx("Form-group Form-group--ver Form-group--".concat(formMode), className) }, body.map(function (control, index) {
+            if (!isVisible(control, data)) {
+                return null;
+            }
+            return _this.renderControl(control, index, {
+                key: index
+            });
+        })));
+    };
+    ControlGroupRenderer.prototype.renderHorizontal = function (props) {
+        var _this = this;
+        if (props === void 0) { props = this.props; }
+        var body = props.body, className = props.className, ns = props.classPrefix, cx = props.classnames, mode = props.mode, horizontal = props.horizontal, formMode = props.formMode, formHorizontal = props.formHorizontal, subFormMode = props.subFormMode, subFormHorizontal = props.subFormHorizontal, data = props.data, gap = props.gap;
+        if (!Array.isArray(body)) {
+            return null;
+        }
+        formMode = subFormMode || mode || formMode;
+        var horizontalDeeper = subFormHorizontal ||
+            horizontal ||
+            (formHorizontal
+                ? makeHorizontalDeeper(formHorizontal, body.filter(function (item) {
+                    return (item === null || item === void 0 ? void 0 : item.mode) !== 'inline' &&
+                        isVisible(item, data);
+                }).length)
+                : undefined);
+        return (React.createElement("div", { className: cx("Form-group Form-group--hor Form-group--".concat(formMode), gap ? "Form-group--".concat(gap) : '', className) }, body.map(function (control, index) {
+            if (!isVisible(control, data)) {
+                return null;
+            }
+            var controlMode = (control === null || control === void 0 ? void 0 : control.mode) || formMode;
+            if (controlMode === 'inline' ||
+                (control && control.type === 'formula')) {
+                return _this.renderControl(control, index, {
+                    key: index,
+                    className: cx(control.className, control.columnClassName)
+                });
+            }
+            var columnWidth = control.columnRatio ||
+                getWidthRate(control && control.columnClassName, true);
+            return (React.createElement("div", { key: index, className: cx("".concat(ns, "Form-groupColumn"), columnWidth ? "".concat(ns, "Form-groupColumn--").concat(columnWidth) : '', control && control.columnClassName) }, _this.renderControl(control, index, {
+                formHorizontal: horizontalDeeper,
+                formMode: controlMode
+            })));
+        })));
+    };
+    ControlGroupRenderer.prototype.renderInput = function (props) {
+        if (props === void 0) { props = this.props; }
+        var direction = props.direction;
+        return direction === 'vertical'
+            ? this.renderVertical(props)
+            : this.renderHorizontal(props);
+    };
+    ControlGroupRenderer.prototype.render = function () {
+        var _a = this.props, label = _a.label, rest = __rest(_a, ["label"]);
+        if (typeof label !== 'undefined') {
+            return (React.createElement(FormItemWrap, __assign({}, rest, { sizeMutable: false, label: label, renderControl: this.renderInput })));
+        }
+        return this.renderInput();
+    };
+    ControlGroupRenderer = __decorate([
+        Renderer({
+            type: 'group'
+        }),
+        __metadata("design:paramtypes", [Object])
+    ], ControlGroupRenderer);
+    return ControlGroupRenderer;
+})(React.Component));

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { FormControlProps } from 'amis-core';
+import { FormBaseControlSchema } from '../../Schema';
+/**
+ * Hidden 隐藏域。功能性组件
+ * 文档：https://baidu.gitee.io/amis/docs/components/form/hidden
+ */
+export interface HiddenControlSchema extends FormBaseControlSchema {
+    type: 'hidden';
+}
+export default class HiddenControl extends React.Component<FormControlProps, any> {
+    render(): null;
+}
+export declare class HiddenControlRenderer extends HiddenControl {
+}

package/esm/renderers/Form/Hidden.js

@@ -0,0 +1,35 @@
+/**
+ * amis v2.0.0
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __decorate } from 'tslib';
+import React from 'react';
+import { FormItem } from 'amis-core';
+
+var HiddenControl = /** @class */ (function (_super) {
+    __extends(HiddenControl, _super);
+    function HiddenControl() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    HiddenControl.prototype.render = function () {
+        return null;
+    };
+    return HiddenControl;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(HiddenControlRenderer, _super);
+    function HiddenControlRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    HiddenControlRenderer = __decorate([
+        FormItem({
+            type: 'hidden',
+            wrap: false,
+            sizeMutable: false
+        })
+    ], HiddenControlRenderer);
+    return HiddenControlRenderer;
+})(HiddenControl));
+
+export { HiddenControl as default };

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { StateChangeOptions } from 'downshift';
+import { FormControlProps } from 'amis-core';
+import { FormBaseControlSchema } from '../../Schema';
+/**
+ * 图标选择器
+ * 文档：https://baidu.gitee.io/amis/docs/components/form/icon-picker
+ */
+export interface IconPickerControlSchema extends FormBaseControlSchema {
+    type: 'icon-picker';
+}
+export interface IconPickerProps extends FormControlProps {
+    placeholder?: string;
+    resetValue?: any;
+    noDataTip?: string;
+    clearable?: boolean;
+}
+export interface IconPickerState {
+    isOpen?: boolean;
+    inputValue?: string;
+    isFocused?: boolean;
+    vendorIndex?: number;
+}
+export default class IconPickerControl extends React.PureComponent<IconPickerProps, IconPickerState> {
+    input?: HTMLInputElement;
+    state: IconPickerState;
+    static defaultProps: Pick<IconPickerProps, 'resetValue' | 'placeholder' | 'noDataTip'>;
+    componentDidUpdate(prevProps: IconPickerProps): void;
+    changeVendor(index: number): void;
+    formatOptions(): {
+        label: string;
+        value: string;
+    }[];
+    getVendors(): string[];
+    inputRef(ref: any): void;
+    focus(): void;
+    handleClick(): void;
+    handleFocus(e: any): void;
+    handleBlur(e: any): void;
+    handleInputChange(evt: React.ChangeEvent<HTMLInputElement>): void;
+    handleKeyDown(evt: React.KeyboardEvent<HTMLInputElement>): void;
+    handleChange(value: any): void;
+    handleStateChange(changes: StateChangeOptions<any>): void;
+    handleClear(): void;
+    renderFontIcons(): JSX.Element;
+    render(): JSX.Element;
+}
+export declare class IconPickerControlRenderer extends IconPickerControl {
+}

package/esm/renderers/Form/IconPicker.js

@@ -0,0 +1,305 @@
+/**
+ * amis v2.0.0
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __assign, __decorate, __metadata } from 'tslib';
+import React from 'react';
+import cx from 'classnames';
+import { matchSorter } from 'match-sorter';
+import keycode from 'keycode';
+import Downshift from 'downshift';
+import { autobind, FormItem } from 'amis-core';
+import { ICONS } from './IconPickerIcons.js';
+import { Icon } from 'amis-ui';
+
+var IconPickerControl = /** @class */ (function (_super) {
+    __extends(IconPickerControl, _super);
+    function IconPickerControl() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            isOpen: false,
+            inputValue: '',
+            isFocused: false,
+            vendorIndex: 0
+        };
+        return _this;
+    }
+    IconPickerControl.prototype.componentDidUpdate = function (prevProps) {
+        var props = this.props;
+        if (prevProps.value !== props.value) {
+            this.setState({
+                inputValue: ''
+            });
+        }
+    };
+    IconPickerControl.prototype.changeVendor = function (index) {
+        this.setState({
+            vendorIndex: index
+        }, this.formatOptions);
+    };
+    IconPickerControl.prototype.formatOptions = function () {
+        var vendorIndex = this.state.vendorIndex || 0;
+        var _a = ICONS[vendorIndex], prefix = _a.prefix, icons = _a.icons;
+        return icons.map(function (icon) { return ({
+            label: prefix + icon,
+            value: prefix + icon
+        }); });
+    };
+    IconPickerControl.prototype.getVendors = function () {
+        return ICONS.map(function (icons) { return icons.name; });
+    };
+    IconPickerControl.prototype.inputRef = function (ref) {
+        this.input = ref;
+    };
+    IconPickerControl.prototype.focus = function () {
+        if (!this.input) {
+            return;
+        }
+        this.input.focus();
+        var len = this.input.value.length;
+        len && this.input.setSelectionRange(len, len);
+    };
+    IconPickerControl.prototype.handleClick = function () {
+        if (this.props.disabled) {
+            return;
+        }
+        this.focus();
+        this.setState({
+            isOpen: true
+        });
+    };
+    IconPickerControl.prototype.handleFocus = function (e) {
+        this.setState({
+            isOpen: true,
+            isFocused: true
+        });
+        this.props.onFocus && this.props.onFocus(e);
+    };
+    IconPickerControl.prototype.handleBlur = function (e) {
+        var _a = this.props, onBlur = _a.onBlur, trimContents = _a.trimContents, value = _a.value, onChange = _a.onChange;
+        this.setState({
+            isFocused: false
+        }, function () {
+            if (trimContents && value && typeof value === 'string') {
+                onChange(value.trim());
+            }
+        });
+        onBlur && onBlur(e);
+    };
+    IconPickerControl.prototype.handleInputChange = function (evt) {
+        var value = evt.currentTarget.value;
+        this.setState({
+            inputValue: value
+        });
+    };
+    IconPickerControl.prototype.handleKeyDown = function (evt) {
+        var code = keycode(evt.keyCode);
+        if (code !== 'backspace') {
+            return;
+        }
+        var onChange = this.props.onChange;
+        if (!this.state.inputValue) {
+            onChange('');
+            this.setState({
+                inputValue: ''
+            });
+        }
+    };
+    IconPickerControl.prototype.handleChange = function (value) {
+        var _a = this.props, onChange = _a.onChange, disabled = _a.disabled;
+        if (disabled) {
+            return;
+        }
+        onChange(value);
+        this.setState({
+            isFocused: false,
+            inputValue: ''
+        });
+    };
+    IconPickerControl.prototype.handleStateChange = function (changes) {
+        switch (changes.type) {
+            case Downshift.stateChangeTypes.itemMouseEnter:
+            case Downshift.stateChangeTypes.changeInput:
+                this.setState({
+                    isOpen: true
+                });
+                break;
+            default:
+                var state = {};
+                if (typeof changes.isOpen !== 'undefined') {
+                    state.isOpen = changes.isOpen;
+                }
+                if (this.state.isOpen && changes.isOpen === false) {
+                    state.inputValue = '';
+                }
+                this.setState(state);
+                break;
+        }
+    };
+    IconPickerControl.prototype.handleClear = function () {
+        var _this = this;
+        var _a = this.props, onChange = _a.onChange, resetValue = _a.resetValue;
+        onChange === null || onChange === void 0 ? void 0 : onChange(resetValue);
+        this.setState({
+            inputValue: resetValue,
+            isFocused: true
+        }, function () {
+            _this.focus();
+        });
+    };
+    IconPickerControl.prototype.renderFontIcons = function () {
+        var _this = this;
+        var _a = this.props, className = _a.className, inputOnly = _a.inputOnly, placeholder = _a.placeholder, cx = _a.classnames, name = _a.name, value = _a.value, noDataTip = _a.noDataTip, disabled = _a.disabled, clearable = _a.clearable, __ = _a.translate;
+        var options = this.formatOptions();
+        var vendors = this.getVendors();
+        return (React.createElement(Downshift, { isOpen: this.state.isOpen, inputValue: this.state.inputValue, onChange: this.handleChange, onOuterClick: this.handleBlur, onStateChange: this.handleStateChange, selectedItem: [value] }, function (_a) {
+            var getInputProps = _a.getInputProps, getItemProps = _a.getItemProps, isOpen = _a.isOpen, inputValue = _a.inputValue;
+            var filteredOptions = inputValue && isOpen
+                ? matchSorter(options, inputValue, { keys: ['label', 'value'] })
+                : options;
+            return (React.createElement("div", { className: cx("IconPickerControl-input IconPickerControl-input--withAC", inputOnly ? className : '', {
+                    'is-opened': isOpen
+                }), onClick: _this.handleClick },
+                React.createElement("div", { className: cx('IconPickerControl-valueWrap') },
+                    placeholder && !value && !_this.state.inputValue ? (React.createElement("div", { className: cx('IconPickerControl-placeholder') }, placeholder)) : null,
+                    !value || (inputValue && isOpen) ? null : (React.createElement("div", { className: cx('IconPickerControl-value') },
+                        React.createElement("i", { className: cx(value) }),
+                        value)),
+                    React.createElement("input", __assign({}, getInputProps({
+                        name: name,
+                        ref: _this.inputRef,
+                        onFocus: _this.handleFocus,
+                        onChange: _this.handleInputChange,
+                        onKeyDown: _this.handleKeyDown,
+                        value: _this.state.inputValue
+                    }), { autoComplete: "off", disabled: disabled, size: 10 })),
+                    clearable && !disabled && value ? (React.createElement("a", { onClick: _this.handleClear, className: cx('IconPickerControl-clear') },
+                        React.createElement(Icon, { icon: "input-clear", className: "icon" }))) : null),
+                isOpen ? (React.createElement("div", { className: cx('IconPickerControl-sugsPanel') },
+                    vendors.length > 1 ? (React.createElement("div", { className: cx('IconPickerControl-tabs') }, vendors.map(function (vendor, index) { return (React.createElement("div", { className: cx('IconPickerControl-tab', {
+                            active: _this.state.vendorIndex === index
+                        }), onClick: function () { return _this.changeVendor(index); }, key: index }, vendor)); }))) : null,
+                    filteredOptions.length ? (React.createElement("div", { className: cx('IconPickerControl-sugs', vendors.length > 1
+                            ? 'IconPickerControl-multiVendor'
+                            : 'IconPickerControl-singleVendor') }, filteredOptions.map(function (option, index) { return (React.createElement("div", __assign({}, getItemProps({
+                        item: option.value,
+                        className: cx("IconPickerControl-sugItem", {
+                            'is-active': value === option.value
+                        })
+                    }), { key: index }),
+                        React.createElement("i", { className: cx("".concat(option.value)), title: "".concat(option.value) }))); }))) : (React.createElement("div", { className: cx(vendors.length > 1
+                            ? 'IconPickerControl-multiVendor'
+                            : 'IconPickerControl-singleVendor') }, __(noDataTip))))) : null));
+        }));
+    };
+    IconPickerControl.prototype.render = function () {
+        var _a = this.props, className = _a.className, ns = _a.classPrefix, inputOnly = _a.inputOnly, disabled = _a.disabled;
+        var input = this.renderFontIcons();
+        if (inputOnly) {
+            return input;
+        }
+        return (React.createElement("div", { className: cx(className, "".concat(ns, "IconPickerControl"), {
+                'is-focused': this.state.isFocused,
+                'is-disabled': disabled
+            }) }, input));
+    };
+    IconPickerControl.defaultProps = {
+        resetValue: '',
+        placeholder: '',
+        noDataTip: 'placeholder.noData'
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Number]),
+        __metadata("design:returntype", void 0)
+    ], IconPickerControl.prototype, "changeVendor", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], IconPickerControl.prototype, "formatOptions", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], IconPickerControl.prototype, "getVendors", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], IconPickerControl.prototype, "inputRef", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], IconPickerControl.prototype, "focus", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], IconPickerControl.prototype, "handleClick", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], IconPickerControl.prototype, "handleFocus", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], IconPickerControl.prototype, "handleBlur", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], IconPickerControl.prototype, "handleInputChange", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], IconPickerControl.prototype, "handleKeyDown", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], IconPickerControl.prototype, "handleChange", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], IconPickerControl.prototype, "handleStateChange", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], IconPickerControl.prototype, "handleClear", null);
+    return IconPickerControl;
+}(React.PureComponent));
+/** @class */ ((function (_super) {
+    __extends(IconPickerControlRenderer, _super);
+    function IconPickerControlRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    IconPickerControlRenderer = __decorate([
+        FormItem({
+            type: 'icon-picker'
+        })
+    ], IconPickerControlRenderer);
+    return IconPickerControlRenderer;
+})(IconPickerControl));
+
+export { IconPickerControl as default };

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

@@ -0,0 +1,8 @@
+interface Vendor {
+    name: string;
+    prefix: string;
+    icons: string[];
+}
+export declare let ICONS: Vendor[];
+export declare function setIconVendor(icons: Vendor[]): void;
+export {};

package/esm/renderers/Form/IconPickerIcons.js

@@ -0,0 +1,26 @@
+/**
+ * amis v2.0.0
+ * Copyright 2018-2022 baidu
+ */
+
+var ICONS = [
+    {
+        name: 'Font Awesome 4.7',
+        prefix: 'fa fa-',
+        icons: [
+            'slideshare',
+            'snapchat',
+            'snapchat-ghost',
+            'snapchat-square',
+            'soundcloud',
+            'spotify',
+            'stack-exchange',
+            'stack-overflow'
+        ]
+    }
+];
+function setIconVendor(icons) {
+    ICONS = icons;
+}
+
+export { ICONS, setIconVendor };

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { FormControlProps } from 'amis-core';
+import { IComboStore } from 'amis-core';
+import { ComboControlSchema } from './Combo';
+import { SchemaCollection } from '../../Schema';
+/**
+ * InputArray 数组输入框。 combo 的别名。
+ * 文档：https://baidu.gitee.io/amis/docs/components/form/array
+ */
+export interface ArrayControlSchema extends Omit<ComboControlSchema, 'type' | 'controls' | 'conditions' | 'items'> {
+    /**
+     * 指定为数组输入框类型
+     */
+    type: 'input-array';
+    /**
+     * 成员渲染器配置
+     */
+    items: SchemaCollection;
+}
+export interface InputArrayProps extends FormControlProps, Omit<ArrayControlSchema, 'type' | 'className' | 'descriptionClassName' | 'inputClassName'> {
+    store: IComboStore;
+}
+export default class InputArrayControl extends React.Component<InputArrayProps> {
+    comboInstance: any;
+    constructor(props: InputArrayProps);
+    comboRef(ref: any): void;
+    validate(args: Array<any>): any;
+    render(): JSX.Element;
+}
+export declare class ArrayControlRenderer extends InputArrayControl {
+}

package/esm/renderers/Form/InputArray.js

@@ -0,0 +1,45 @@
+/**
+ * amis v2.0.0
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __rest, __assign, __decorate } from 'tslib';
+import React from 'react';
+import { FormItem, ComboStore } from 'amis-core';
+import ComboControl from './Combo.js';
+
+var InputArrayControl = /** @class */ (function (_super) {
+    __extends(InputArrayControl, _super);
+    function InputArrayControl(props) {
+        var _this = _super.call(this, props) || this;
+        _this.comboRef = _this.comboRef.bind(_this);
+        return _this;
+    }
+    InputArrayControl.prototype.comboRef = function (ref) {
+        this.comboInstance = ref;
+    };
+    InputArrayControl.prototype.validate = function (args) {
+        var _a;
+        return this.comboInstance ? (_a = this.comboInstance).validate.apply(_a, args) : null;
+    };
+    InputArrayControl.prototype.render = function () {
+        var _a = this.props, items = _a.items, rest = __rest(_a, ["items"]);
+        return (React.createElement(ComboControl, __assign({}, rest, { items: [items], flat: true, multiple: true, multiLine: false, ref: this.comboRef })));
+    };
+    return InputArrayControl;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(ArrayControlRenderer, _super);
+    function ArrayControlRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ArrayControlRenderer = __decorate([
+        FormItem({
+            type: 'input-array',
+            storeType: ComboStore.name
+        })
+    ], ArrayControlRenderer);
+    return ArrayControlRenderer;
+})(InputArrayControl));
+
+export { InputArrayControl as default };