amis 1.9.0-beta.12 → 1.9.0-beta.15

package/lib/components/schema-editor/Object.js

@@ -0,0 +1,191 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SchemaEditorItemObject = void 0;
+var tslib_1 = require("tslib");
+var react_1 = (0, tslib_1.__importDefault)(require("react"));
+var helper_1 = require("../../utils/helper");
+var Button_1 = (0, tslib_1.__importDefault)(require("../Button"));
+var icons_1 = require("../icons");
+var InputBox_1 = (0, tslib_1.__importDefault)(require("../InputBox"));
+var Common_1 = require("./Common");
+var Item_1 = require("./Item");
+var SchemaEditorItemObject = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(SchemaEditorItemObject, _super);
+    function SchemaEditorItemObject() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            members: _this.propsToMembers(_this.props),
+            collapsed: false
+        };
+        return _this;
+    }
+    SchemaEditorItemObject.prototype.componentDidUpdate = function (prevProps) {
+        var props = this.props;
+        // 外部属性变化，更新 state
+        if (props.value !== prevProps.value &&
+            JSON.stringify(props.value) !== JSON.stringify(this.lastValue)) {
+            this.setState({
+                members: this.propsToMembers(props)
+            });
+        }
+    };
+    SchemaEditorItemObject.prototype.propsToMembers = function (props) {
+        var _a, _b;
+        var members = [];
+        var required = Array.isArray((_a = props.value) === null || _a === void 0 ? void 0 : _a.required)
+            ? props.value.required
+            : [];
+        if ((_b = props.value) === null || _b === void 0 ? void 0 : _b.properties) {
+            var properties_1 = props.value.properties;
+            Object.keys(properties_1).forEach(function (key) {
+                var value = properties_1[key];
+                members.push({
+                    id: (0, helper_1.guid)(),
+                    key: key || '',
+                    hasError: !key || members.some(function (i) { return i.key === key; }),
+                    required: !!~required.indexOf(key),
+                    schema: value
+                });
+            });
+        }
+        return members;
+    };
+    SchemaEditorItemObject.prototype.pipeOut = function () {
+        var members = this.state.members;
+        var _a = this.props, value = _a.value, onChange = _a.onChange;
+        var properties = {};
+        var required = [];
+        members
+            .filter(function (item) { return !item.hasError; })
+            .forEach(function (member) {
+            properties[member.key] = member.schema;
+            if (member.required) {
+                required.push(member.key);
+            }
+        });
+        this.lastValue = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, value), { properties: properties, required: required });
+        onChange === null || onChange === void 0 ? void 0 : onChange(this.lastValue);
+    };
+    SchemaEditorItemObject.prototype.handleAdd = function () {
+        var members = this.state.members.concat();
+        members.push({
+            id: (0, helper_1.guid)(),
+            key: '',
+            hasError: true,
+            required: false,
+            schema: {
+                type: 'string'
+            }
+        });
+        this.setState({
+            members: members
+        }, this.pipeOut);
+    };
+    SchemaEditorItemObject.prototype.handlePropKeyChange = function (index, key) {
+        var members = this.state.members.concat();
+        members[index] = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, members[index]), { key: key, hasError: !key || members.some(function (m, i) { return i !== index && m.key === key; }) });
+        this.setState({ members: members }, this.pipeOut);
+    };
+    SchemaEditorItemObject.prototype.handlePropTitleChange = function (index, title) {
+        var members = this.state.members.concat();
+        members[index] = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, members[index]), { schema: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, members[index].schema), { title: title }) });
+        this.setState({ members: members }, this.pipeOut);
+    };
+    SchemaEditorItemObject.prototype.handlePropRemove = function (index) {
+        var members = this.state.members.concat();
+        members.splice(index, 1);
+        this.setState({ members: members }, this.pipeOut);
+    };
+    SchemaEditorItemObject.prototype.handlePropChange = function (index, item) {
+        var members = this.state.members.concat();
+        members[index] = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, members[index]), { schema: (0, tslib_1.__assign)({}, item) });
+        this.setState({ members: members }, this.pipeOut);
+    };
+    SchemaEditorItemObject.prototype.handlePropRequiredChange = function (index, required) {
+        var members = this.state.members.concat();
+        members[index] = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, members[index]), { required: required });
+        this.setState({ members: members }, this.pipeOut);
+    };
+    SchemaEditorItemObject.prototype.toggleCollapsed = function () {
+        this.setState({
+            collapsed: !this.state.collapsed
+        });
+    };
+    SchemaEditorItemObject.prototype.rendererProps = function () {
+        var _this = this;
+        var _a = this.props, value = _a.value, __ = _a.translate, cx = _a.classnames, renderExtraProps = _a.renderExtraProps, locale = _a.locale, classPrefix = _a.classPrefix, disabled = _a.disabled, showInfo = _a.showInfo, types = _a.types, onTypeChange = _a.onTypeChange;
+        var members = this.state.members;
+        return (react_1.default.createElement("div", { className: cx('SchemaEditorProps', {
+                'SchemaEditorProps--depth': showInfo !== false
+            }) },
+            members.length ? (members.map(function (member, index) { return (react_1.default.createElement(Item_1.SchemaEditorItem, { key: member.id, types: types, onTypeChange: onTypeChange, prefix: react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(InputBox_1.default, { className: cx('SchemaEditor-key'), hasError: member.hasError, value: member.key || '', onChange: _this.handlePropKeyChange.bind(_this, index), placeholder: __('JSONSchema.key'), disabled: disabled || !!(value === null || value === void 0 ? void 0 : value.$ref) }),
+                    react_1.default.createElement(InputBox_1.default, { className: cx('SchemaEditor-title'), value: member.schema.title || '', onChange: _this.handlePropTitleChange.bind(_this, index), placeholder: __('JSONSchema.title'), disabled: disabled || !!(value === null || value === void 0 ? void 0 : value.$ref) })), affix: react_1.default.createElement(Button_1.default, { className: cx('SchemaEditor-btn'), onClick: _this.handlePropRemove.bind(_this, index), iconOnly: true, disabled: disabled || !!(value === null || value === void 0 ? void 0 : value.$ref) },
+                    react_1.default.createElement(icons_1.Icon, { icon: "remove", className: "icon" })), value: member.schema, onChange: _this.handlePropChange.bind(_this, index), renderExtraProps: renderExtraProps, locale: locale, translate: __, classnames: cx, classPrefix: classPrefix, disabled: disabled || !!(value === null || value === void 0 ? void 0 : value.$ref), required: member.required, onRequiredChange: _this.handlePropRequiredChange.bind(_this, index) })); })) : (react_1.default.createElement("div", { className: cx('SchemaEditorProps-placeholder') }, __('placeholder.empty'))),
+            react_1.default.createElement(Button_1.default, { level: "link", onClick: this.handleAdd, size: "xs", disabled: disabled || !!(value === null || value === void 0 ? void 0 : value.$ref) }, __('JSONSchema.add_prop'))));
+    };
+    SchemaEditorItemObject.prototype.render = function () {
+        var _a = this.props, cx = _a.classnames, showInfo = _a.showInfo, __ = _a.translate, disabled = _a.disabled;
+        return (react_1.default.createElement("div", { className: cx('SchemaEditorItem SchemaEditorObject', {
+                'is-collapsed': this.state.collapsed
+            }) },
+            showInfo !== false ? (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("a", { className: cx('SchemaEditor-caret', {
+                        'is-collapsed': this.state.collapsed
+                    }), onClick: this.toggleCollapsed },
+                    react_1.default.createElement(icons_1.Icon, { icon: "caret", className: "icon" })),
+                this.renderCommon())) : null,
+            this.state.collapsed ? null : this.rendererProps()));
+    };
+    (0, tslib_1.__decorate)([
+        helper_1.autobind,
+        (0, tslib_1.__metadata)("design:type", Function),
+        (0, tslib_1.__metadata)("design:paramtypes", []),
+        (0, tslib_1.__metadata)("design:returntype", void 0)
+    ], SchemaEditorItemObject.prototype, "pipeOut", null);
+    (0, tslib_1.__decorate)([
+        helper_1.autobind,
+        (0, tslib_1.__metadata)("design:type", Function),
+        (0, tslib_1.__metadata)("design:paramtypes", []),
+        (0, tslib_1.__metadata)("design:returntype", void 0)
+    ], SchemaEditorItemObject.prototype, "handleAdd", null);
+    (0, tslib_1.__decorate)([
+        helper_1.autobind,
+        (0, tslib_1.__metadata)("design:type", Function),
+        (0, tslib_1.__metadata)("design:paramtypes", [Number, String]),
+        (0, tslib_1.__metadata)("design:returntype", void 0)
+    ], SchemaEditorItemObject.prototype, "handlePropKeyChange", null);
+    (0, tslib_1.__decorate)([
+        helper_1.autobind,
+        (0, tslib_1.__metadata)("design:type", Function),
+        (0, tslib_1.__metadata)("design:paramtypes", [Number, String]),
+        (0, tslib_1.__metadata)("design:returntype", void 0)
+    ], SchemaEditorItemObject.prototype, "handlePropTitleChange", null);
+    (0, tslib_1.__decorate)([
+        helper_1.autobind,
+        (0, tslib_1.__metadata)("design:type", Function),
+        (0, tslib_1.__metadata)("design:paramtypes", [Number]),
+        (0, tslib_1.__metadata)("design:returntype", void 0)
+    ], SchemaEditorItemObject.prototype, "handlePropRemove", null);
+    (0, tslib_1.__decorate)([
+        helper_1.autobind,
+        (0, tslib_1.__metadata)("design:type", Function),
+        (0, tslib_1.__metadata)("design:paramtypes", [Number, Object]),
+        (0, tslib_1.__metadata)("design:returntype", void 0)
+    ], SchemaEditorItemObject.prototype, "handlePropChange", null);
+    (0, tslib_1.__decorate)([
+        helper_1.autobind,
+        (0, tslib_1.__metadata)("design:type", Function),
+        (0, tslib_1.__metadata)("design:paramtypes", [Number, Boolean]),
+        (0, tslib_1.__metadata)("design:returntype", void 0)
+    ], SchemaEditorItemObject.prototype, "handlePropRequiredChange", null);
+    (0, tslib_1.__decorate)([
+        helper_1.autobind,
+        (0, tslib_1.__metadata)("design:type", Function),
+        (0, tslib_1.__metadata)("design:paramtypes", []),
+        (0, tslib_1.__metadata)("design:returntype", void 0)
+    ], SchemaEditorItemObject.prototype, "toggleCollapsed", null);
+    return SchemaEditorItemObject;
+}(Common_1.SchemaEditorItemCommon));
+exports.SchemaEditorItemObject = SchemaEditorItemObject;
+//# sourceMappingURL=./components/schema-editor/Object.js.map

package/lib/components/schema-editor/Object.js.map

@@ -0,0 +1,13 @@
+{
+    "version": 3,
+    "file": "Object.js",
+    "sourceRoot": "",
+    "sources": [
+        "/src/components/schema-editor/Object.tsx"
+    ],
+    "names": [],
+    "mappings": "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",
+    "sourcesContent": [
+        "import React from 'react';\nimport type {JSONSchema} from '../../utils/DataScope';\nimport {autobind, guid} from '../../utils/helper';\nimport Button from '../Button';\nimport {Icon} from '../icons';\nimport InputBox from '../InputBox';\nimport {SchemaEditorItemCommon, SchemaEditorItemCommonProps} from './Common';\nimport {SchemaEditorItem} from './Item';\n\nexport interface SchemaEditorItemObjectState {\n  members: Array<{\n    id: string;\n    key: string;\n    hasError?: boolean;\n    required?: boolean;\n    schema: JSONSchema;\n  }>;\n  collapsed: boolean;\n}\n\nexport class SchemaEditorItemObject extends SchemaEditorItemCommon<\n  SchemaEditorItemCommonProps,\n  SchemaEditorItemObjectState\n> {\n  state = {\n    members: this.propsToMembers(this.props),\n    collapsed: false\n  };\n\n  lastValue: any;\n\n  componentDidUpdate(prevProps: SchemaEditorItemCommonProps) {\n    const props = this.props;\n\n    // 外部属性变化，更新 state\n    if (\n      props.value !== prevProps.value &&\n      JSON.stringify(props.value) !== JSON.stringify(this.lastValue)\n    ) {\n      this.setState({\n        members: this.propsToMembers(props)\n      });\n    }\n  }\n\n  propsToMembers(props: SchemaEditorItemCommonProps) {\n    const members: Array<{\n      id: string;\n      key: string;\n      hasError?: boolean;\n      required?: boolean;\n      schema: JSONSchema;\n    }> = [];\n    const required = Array.isArray(props.value?.required)\n      ? props.value!.required\n      : [];\n\n    if (props.value?.properties) {\n      const properties = props.value.properties;\n      Object.keys(properties).forEach(key => {\n        const value = properties[key] as any;\n\n        members.push({\n          id: guid(),\n          key: key || '',\n          hasError: !key || members.some(i => i.key === key),\n          required: !!~required.indexOf(key),\n          schema: value\n        });\n      });\n    }\n\n    return members;\n  }\n\n  @autobind\n  pipeOut() {\n    const members = this.state.members;\n    const {value, onChange} = this.props;\n    const properties: any = {};\n    const required: Array<string> = [];\n\n    members\n      .filter(item => !item.hasError)\n      .forEach(member => {\n        properties[member.key] = member.schema;\n\n        if (member.required) {\n          required.push(member.key);\n        }\n      });\n\n    this.lastValue = {\n      ...value,\n      properties,\n      required\n    };\n    onChange?.(this.lastValue);\n  }\n\n  @autobind\n  handleAdd() {\n    const members = this.state.members.concat();\n    members.push({\n      id: guid(),\n      key: '',\n      hasError: true,\n      required: false,\n      schema: {\n        type: 'string'\n      }\n    });\n\n    this.setState(\n      {\n        members\n      },\n      this.pipeOut\n    );\n  }\n\n  @autobind\n  handlePropKeyChange(index: number, key: string) {\n    const members = this.state.members.concat();\n    members[index] = {\n      ...members[index],\n      key,\n      hasError: !key || members.some((m, i) => i !== index && m.key === key)\n    };\n\n    this.setState({members}, this.pipeOut);\n  }\n\n  @autobind\n  handlePropTitleChange(index: number, title: string) {\n    const members = this.state.members.concat();\n    members[index] = {\n      ...members[index],\n      schema: {\n        ...members[index].schema,\n        title\n      }\n    };\n\n    this.setState({members}, this.pipeOut);\n  }\n\n  @autobind\n  handlePropRemove(index: number) {\n    const members = this.state.members.concat();\n    members.splice(index, 1);\n    this.setState({members}, this.pipeOut);\n  }\n\n  @autobind\n  handlePropChange(index: number, item: any) {\n    const members = this.state.members.concat();\n    members[index] = {\n      ...members[index],\n      schema: {\n        ...item\n      }\n    };\n\n    this.setState({members}, this.pipeOut);\n  }\n\n  @autobind\n  handlePropRequiredChange(index: number, required: boolean) {\n    const members = this.state.members.concat();\n    members[index] = {\n      ...members[index],\n      required\n    };\n\n    this.setState({members}, this.pipeOut);\n  }\n\n  @autobind\n  toggleCollapsed() {\n    this.setState({\n      collapsed: !this.state.collapsed\n    });\n  }\n\n  rendererProps() {\n    const {\n      value,\n      translate: __,\n      classnames: cx,\n      renderExtraProps,\n      locale,\n      classPrefix,\n      disabled,\n      showInfo,\n      types,\n      onTypeChange\n    } = this.props;\n    const members = this.state.members;\n\n    return (\n      <div\n        className={cx('SchemaEditorProps', {\n          'SchemaEditorProps--depth': showInfo !== false\n        })}\n      >\n        {members.length ? (\n          members.map((member, index) => (\n            <SchemaEditorItem\n              key={member.id}\n              types={types}\n              onTypeChange={onTypeChange}\n              prefix={\n                <>\n                  <InputBox\n                    className={cx('SchemaEditor-key')}\n                    hasError={member.hasError}\n                    value={member.key || ''}\n                    onChange={this.handlePropKeyChange.bind(this, index)}\n                    placeholder={__('JSONSchema.key')}\n                    disabled={disabled || !!value?.$ref}\n                  />\n\n                  <InputBox\n                    className={cx('SchemaEditor-title')}\n                    value={member.schema.title || ''}\n                    onChange={this.handlePropTitleChange.bind(this, index)}\n                    placeholder={__('JSONSchema.title')}\n                    disabled={disabled || !!value?.$ref}\n                  />\n                </>\n              }\n              affix={\n                <Button\n                  className={cx('SchemaEditor-btn')}\n                  onClick={this.handlePropRemove.bind(this, index)}\n                  iconOnly\n                  disabled={disabled || !!value?.$ref}\n                >\n                  <Icon icon=\"remove\" className=\"icon\" />\n                </Button>\n              }\n              value={member.schema}\n              onChange={this.handlePropChange.bind(this, index)}\n              renderExtraProps={renderExtraProps}\n              locale={locale}\n              translate={__}\n              classnames={cx}\n              classPrefix={classPrefix}\n              disabled={disabled || !!value?.$ref}\n              required={member.required}\n              onRequiredChange={this.handlePropRequiredChange.bind(this, index)}\n            />\n          ))\n        ) : (\n          <div className={cx('SchemaEditorProps-placeholder')}>\n            {__('placeholder.empty')}\n          </div>\n        )}\n\n        <Button\n          level=\"link\"\n          onClick={this.handleAdd}\n          size=\"xs\"\n          disabled={disabled || !!value?.$ref}\n        >\n          {__('JSONSchema.add_prop')}\n        </Button>\n      </div>\n    );\n  }\n\n  render() {\n    const {classnames: cx, showInfo, translate: __, disabled} = this.props;\n\n    return (\n      <div\n        className={cx('SchemaEditorItem SchemaEditorObject', {\n          'is-collapsed': this.state.collapsed\n        })}\n      >\n        {showInfo !== false ? (\n          <>\n            <a\n              className={cx('SchemaEditor-caret', {\n                'is-collapsed': this.state.collapsed\n              })}\n              onClick={this.toggleCollapsed}\n            >\n              <Icon icon=\"caret\" className=\"icon\" />\n            </a>\n            {this.renderCommon()}\n          </>\n        ) : null}\n        {this.state.collapsed ? null : this.rendererProps()}\n      </div>\n    );\n  }\n}\n"
+    ]
+}

package/lib/components/schema-editor/SchemaVariableList.d.ts

@@ -0,0 +1,316 @@
+/// <reference types="hoist-non-react-statics" />
+import React from 'react';
+import { LocaleProps } from '../../locale';
+import { ThemeProps } from '../../theme';
+import { DataSchema } from '../../utils/DataSchema';
+import type { JSONSchema } from '../../utils/DataScope';
+import { VariableItem } from '../formula/Editor';
+export interface SchemaVariableListProps extends LocaleProps, ThemeProps {
+    schemas?: Array<JSONSchema> | JSONSchema;
+    value?: string;
+    onSelect?: (value: string, schema: JSONSchema) => void;
+}
+export interface SchemaVariableListState {
+    variables: Array<VariableItem>;
+}
+export declare class SchemaVariableList extends React.Component<SchemaVariableListProps, SchemaVariableListState> {
+    state: {
+        variables: any[];
+    };
+    dataSchema?: DataSchema;
+    constructor(props: SchemaVariableListProps);
+    componentDidUpdate(prevProps: SchemaVariableListProps): void;
+    schemasToVaraibles(props: SchemaVariableListProps): any[];
+    handleSelect(item: any): void;
+    itemRender(option: any): JSX.Element;
+    render(): JSX.Element;
+}
+declare const _default: {
+    new (props: (Omit<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps, keyof LocaleProps> & {
+        locale?: string | undefined;
+        translate?: ((str: string, ...args: any[]) => string) | undefined;
+    }) | Readonly<Omit<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps, keyof LocaleProps> & {
+        locale?: string | undefined;
+        translate?: ((str: string, ...args: any[]) => string) | undefined;
+    }>): {
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Omit<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps, 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<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps, 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<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps, 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<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps, keyof LocaleProps> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<Omit<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps, 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<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps, keyof LocaleProps> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Omit<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps, keyof LocaleProps> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Omit<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps, keyof LocaleProps> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps, keyof LocaleProps> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    new (props: Omit<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps, keyof LocaleProps> & {
+        locale?: string | undefined;
+        translate?: ((str: string, ...args: any[]) => string) | undefined;
+    }, context: any): {
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Omit<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps, 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<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps, 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<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps, 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<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps, keyof LocaleProps> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<Omit<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps, 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<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps, keyof LocaleProps> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Omit<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps, keyof LocaleProps> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Omit<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps, keyof LocaleProps> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps, 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<{
+        new (props: (Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps) | Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>): {
+            render(): JSX.Element;
+            context: any;
+            setState<K_1 extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>) => {} | Pick<{}, K_1> | null) | Pick<{}, K_1> | null, callback?: (() => void) | undefined): void;
+            forceUpdate(callback?: (() => void) | undefined): void;
+            readonly props: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps> & Readonly<{
+                children?: React.ReactNode;
+            }>;
+            state: Readonly<{}>;
+            refs: {
+                [key: string]: React.ReactInstance;
+            };
+            componentDidMount?(): void;
+            shouldComponentUpdate?(nextProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+            componentWillUnmount?(): void;
+            componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+            getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
+            componentDidUpdate?(prevProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
+            componentWillMount?(): void;
+            UNSAFE_componentWillMount?(): void;
+            componentWillReceiveProps?(nextProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextContext: any): void;
+            UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextContext: any): void;
+            componentWillUpdate?(nextProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+            UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        };
+        new (props: Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps, context: any): {
+            render(): JSX.Element;
+            context: any;
+            setState<K_1 extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>) => {} | Pick<{}, K_1> | null) | Pick<{}, K_1> | null, callback?: (() => void) | undefined): void;
+            forceUpdate(callback?: (() => void) | undefined): void;
+            readonly props: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps> & Readonly<{
+                children?: React.ReactNode;
+            }>;
+            state: Readonly<{}>;
+            refs: {
+                [key: string]: React.ReactInstance;
+            };
+            componentDidMount?(): void;
+            shouldComponentUpdate?(nextProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+            componentWillUnmount?(): void;
+            componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+            getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
+            componentDidUpdate?(prevProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
+            componentWillMount?(): void;
+            UNSAFE_componentWillMount?(): void;
+            componentWillReceiveProps?(nextProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextContext: any): void;
+            UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextContext: any): void;
+            componentWillUpdate?(nextProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+            UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        };
+        displayName: string;
+        contextType: React.Context<string>;
+        ComposedComponent: React.ComponentType<typeof SchemaVariableList>;
+    } & import("hoist-non-react-statics").NonReactStatics<typeof SchemaVariableList, {}> & {
+        ComposedComponent: typeof SchemaVariableList;
+    }>;
+} & import("hoist-non-react-statics").NonReactStatics<{
+    new (props: (Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps) | Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>): {
+        render(): JSX.Element;
+        context: any;
+        setState<K_1 extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>) => {} | Pick<{}, K_1> | null) | Pick<{}, K_1> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    new (props: Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps, context: any): {
+        render(): JSX.Element;
+        context: any;
+        setState<K_1 extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>) => {} | Pick<{}, K_1> | null) | Pick<{}, K_1> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    displayName: string;
+    contextType: React.Context<string>;
+    ComposedComponent: React.ComponentType<typeof SchemaVariableList>;
+} & import("hoist-non-react-statics").NonReactStatics<typeof SchemaVariableList, {}> & {
+    ComposedComponent: typeof SchemaVariableList;
+}, {}> & {
+    ComposedComponent: {
+        new (props: (Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps) | Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>): {
+            render(): JSX.Element;
+            context: any;
+            setState<K_1 extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>) => {} | Pick<{}, K_1> | null) | Pick<{}, K_1> | null, callback?: (() => void) | undefined): void;
+            forceUpdate(callback?: (() => void) | undefined): void;
+            readonly props: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps> & Readonly<{
+                children?: React.ReactNode;
+            }>;
+            state: Readonly<{}>;
+            refs: {
+                [key: string]: React.ReactInstance;
+            };
+            componentDidMount?(): void;
+            shouldComponentUpdate?(nextProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+            componentWillUnmount?(): void;
+            componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+            getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
+            componentDidUpdate?(prevProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
+            componentWillMount?(): void;
+            UNSAFE_componentWillMount?(): void;
+            componentWillReceiveProps?(nextProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextContext: any): void;
+            UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextContext: any): void;
+            componentWillUpdate?(nextProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+            UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        };
+        new (props: Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps, context: any): {
+            render(): JSX.Element;
+            context: any;
+            setState<K_1 extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>) => {} | Pick<{}, K_1> | null) | Pick<{}, K_1> | null, callback?: (() => void) | undefined): void;
+            forceUpdate(callback?: (() => void) | undefined): void;
+            readonly props: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps> & Readonly<{
+                children?: React.ReactNode;
+            }>;
+            state: Readonly<{}>;
+            refs: {
+                [key: string]: React.ReactInstance;
+            };
+            componentDidMount?(): void;
+            shouldComponentUpdate?(nextProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+            componentWillUnmount?(): void;
+            componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+            getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
+            componentDidUpdate?(prevProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
+            componentWillMount?(): void;
+            UNSAFE_componentWillMount?(): void;
+            componentWillReceiveProps?(nextProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextContext: any): void;
+            UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextContext: any): void;
+            componentWillUpdate?(nextProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+            UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<SchemaVariableListProps, keyof ThemeProps> & import("../../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        };
+        displayName: string;
+        contextType: React.Context<string>;
+        ComposedComponent: React.ComponentType<typeof SchemaVariableList>;
+    } & import("hoist-non-react-statics").NonReactStatics<typeof SchemaVariableList, {}> & {
+        ComposedComponent: typeof SchemaVariableList;
+    };
+};
+export default _default;

package/lib/components/schema-editor/SchemaVariableList.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SchemaVariableList = void 0;
+var tslib_1 = require("tslib");
+var react_1 = (0, tslib_1.__importDefault)(require("react"));
+var locale_1 = require("../../locale");
+var theme_1 = require("../../theme");
+var DataSchema_1 = require("../../utils/DataSchema");
+var helper_1 = require("../../utils/helper");
+var VariableList_1 = (0, tslib_1.__importDefault)(require("../formula/VariableList"));
+var TooltipWrapper_1 = (0, tslib_1.__importDefault)(require("../TooltipWrapper"));
+var SchemaVariableList = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(SchemaVariableList, _super);
+    function SchemaVariableList(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            variables: _this.schemasToVaraibles(_this.props)
+        };
+        return _this;
+    }
+    SchemaVariableList.prototype.componentDidUpdate = function (prevProps) {
+        var props = this.props;
+        if (props.schemas !== prevProps.schemas) {
+            this.setState({
+                variables: this.schemasToVaraibles(props)
+            });
+        }
+    };
+    SchemaVariableList.prototype.schemasToVaraibles = function (props) {
+        var schemas = Array.isArray(props.schemas)
+            ? props.schemas.concat()
+            : props.schemas
+                ? [props.schemas]
+                : [];
+        if (!schemas.length) {
+            return [];
+        }
+        var dataSchema = new DataSchema_1.DataSchema(schemas);
+        this.dataSchema = dataSchema;
+        return dataSchema.getDataPropsAsOptions();
+    };
+    SchemaVariableList.prototype.handleSelect = function (item) {
+        var _a;
+        var onSelect = this.props.onSelect;
+        var schema = (_a = this.dataSchema) === null || _a === void 0 ? void 0 : _a.getSchemaByPath(item.value);
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(item.value, schema);
+    };
+    SchemaVariableList.prototype.itemRender = function (option) {
+        var _a = this.props, cx = _a.classnames, __ = _a.translate;
+        return (react_1.default.createElement("span", { className: cx("FormulaEditor-VariableList-item") },
+            react_1.default.createElement("label", null, option.label),
+            react_1.default.createElement(TooltipWrapper_1.default, { tooltip: option.description, tooltipTheme: "dark" },
+                react_1.default.createElement("span", { className: cx("FormulaEditor-VariableList-item-tag") }, __("SchemaType.".concat(option.type || 'any'))))));
+    };
+    SchemaVariableList.prototype.render = function () {
+        return (react_1.default.createElement(VariableList_1.default, { data: this.state.variables, value: this.props.value, onSelect: this.handleSelect, selectMode: "tree", itemRender: this.itemRender }));
+    };
+    (0, tslib_1.__decorate)([
+        helper_1.autobind,
+        (0, tslib_1.__metadata)("design:type", Function),
+        (0, tslib_1.__metadata)("design:paramtypes", [Object]),
+        (0, tslib_1.__metadata)("design:returntype", void 0)
+    ], SchemaVariableList.prototype, "handleSelect", null);
+    (0, tslib_1.__decorate)([
+        helper_1.autobind,
+        (0, tslib_1.__metadata)("design:type", Function),
+        (0, tslib_1.__metadata)("design:paramtypes", [Object]),
+        (0, tslib_1.__metadata)("design:returntype", void 0)
+    ], SchemaVariableList.prototype, "itemRender", null);
+    return SchemaVariableList;
+}(react_1.default.Component));
+exports.SchemaVariableList = SchemaVariableList;
+exports.default = (0, locale_1.localeable)((0, theme_1.themeable)(SchemaVariableList));
+//# sourceMappingURL=./components/schema-editor/SchemaVariableList.js.map