amis-editor 5.2.0-beta.1 → 5.2.0

package/lib/renderer/ValidationItem.js

@@ -1,147 +0,0 @@
-/**
- * amis-editor v5.2.0-beta.1
- * Copyright 2018-2022 @fex
- */
-
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib = require('tslib');
-var React = require('react');
-var cx = require('classnames');
-var amis = require('amis');
-var AMisCodeEditor = require('amis-editor-core');
-var BaseControl = require('../component/BaseControl.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
-/**
- * @file 校验项
- */
-var ValidationItem = /** @class */ (function (_super) {
-    tslib.__extends(ValidationItem, _super);
-    function ValidationItem(props) {
-        var _this = _super.call(this, props) || this;
-        var data = _this.props.data;
-        _this.validator = _this.props.validator;
-        _this.state = {
-            value: data === null || data === void 0 ? void 0 : data.value,
-            checked: data.value != null,
-            message: (data === null || data === void 0 ? void 0 : data.message) || '',
-            isBuiltIn: data === null || data === void 0 ? void 0 : data.isBuiltIn
-        };
-        return _this;
-    }
-    ValidationItem.prototype.handleEdit = function (value, action) {
-        var _a = this.props, onEdit = _a.onEdit, data = _a.data;
-        if ((action === null || action === void 0 ? void 0 : action.type) === 'submit') {
-            onEdit &&
-                onEdit(tslib.__assign({ name: data.name }, value));
-        }
-    };
-    ValidationItem.prototype.handleDelete = function () {
-        var _a = this.props, onDelete = _a.onDelete, data = _a.data;
-        onDelete && onDelete(data.name);
-    };
-    ValidationItem.prototype.handleSwitch = function (checked) {
-        var _a = this.props, onSwitch = _a.onSwitch, data = _a.data;
-        var _b = this.state, value = _b.value; _b.message;
-        this.setState({
-            checked: checked
-        });
-        if (checked) {
-            data.value = this.validator.schema ? value : true;
-            data.message = '';
-        }
-        onSwitch && onSwitch(checked, data);
-    };
-    ValidationItem.prototype.renderActions = function () {
-        var isDefault = this.props.isDefault;
-        var actions = [];
-        if (!isDefault) {
-            actions.push(React__default["default"].createElement(amis.Button, { className: "ae-ValidationControl-item-action", level: "link", size: "md", key: "delete", onClick: this.handleDelete },
-                React__default["default"].createElement("i", { className: "fa fa-trash" })));
-        }
-        return actions.length !== 0 ? (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement("div", { className: "ae-ValidationControl-item-actions" }, actions))) : null;
-    };
-    ValidationItem.prototype.renderInputControl = function () {
-        var _a = this.state, value = _a.value, message = _a.message, checked = _a.checked;
-        var control = [];
-        if (!checked) {
-            return null;
-        }
-        if (this.validator.schema) {
-            control = control.concat(this.validator.schema);
-        }
-        if (this.validator.message) {
-            control.push({
-                name: 'message',
-                type: 'input-text',
-                label: BaseControl.tipedLabel('错误提示', "\u7CFB\u7EDF\u9ED8\u8BA4\u63D0\u793A\uFF1A".concat(this.validator.message)),
-                placeholder: '默认使用系统定义提示'
-            });
-        }
-        return control.length !== 0 ? (React__default["default"].createElement("section", { className: cx__default["default"]('ae-ValidationControl-item-input', 'ae-ExtendMore') }, amis.render({
-            type: 'form',
-            className: 'w-full',
-            wrapWithPanel: false,
-            panelClassName: 'border-none shadow-none mb-0',
-            bodyClassName: 'p-none',
-            actionsClassName: 'border-none mt-2.5',
-            wrapperComponent: 'div',
-            mode: 'horizontal',
-            horizontal: {
-                justify: true,
-                left: 4,
-                right: 8
-            },
-            preventEnterSubmit: true,
-            submitOnChange: true,
-            body: control,
-            data: { value: value, message: message }
-        }, {
-            onSubmit: this.handleEdit
-        }))) : null;
-    };
-    ValidationItem.prototype.render = function () {
-        var _a = this.props, classPrefix = _a.classPrefix, data = _a.data; _a.isDefault;
-        var _b = this.state, checked = _b.checked, isBuiltIn = _b.isBuiltIn;
-        return (React__default["default"].createElement("div", { className: cx__default["default"]('ae-ValidationControl-item', {
-                'is-active': checked
-            }), key: data.name },
-            React__default["default"].createElement("section", { className: cx__default["default"]('ae-ValidationControl-item-control', {
-                    'is-active': checked && data.name !== 'required'
-                }) },
-                React__default["default"].createElement("label", { className: cx__default["default"]("".concat(classPrefix, "Form-label")) }, this.validator.label),
-                React__default["default"].createElement("div", null,
-                    this.renderActions(),
-                    React__default["default"].createElement(amis.Switch, { key: "switch", value: checked, disabled: isBuiltIn, onChange: this.handleSwitch }))),
-            this.renderInputControl()));
-    };
-    tslib.__decorate([
-        AMisCodeEditor.autobind,
-        tslib.__metadata("design:type", Function),
-        tslib.__metadata("design:paramtypes", [Object, Object]),
-        tslib.__metadata("design:returntype", void 0)
-    ], ValidationItem.prototype, "handleEdit", null);
-    tslib.__decorate([
-        AMisCodeEditor.autobind,
-        tslib.__metadata("design:type", Function),
-        tslib.__metadata("design:paramtypes", []),
-        tslib.__metadata("design:returntype", void 0)
-    ], ValidationItem.prototype, "handleDelete", null);
-    tslib.__decorate([
-        AMisCodeEditor.autobind,
-        tslib.__metadata("design:type", Function),
-        tslib.__metadata("design:paramtypes", [Boolean]),
-        tslib.__metadata("design:returntype", void 0)
-    ], ValidationItem.prototype, "handleSwitch", null);
-    return ValidationItem;
-}(React__default["default"].Component));
-
-exports["default"] = ValidationItem;

package/lib/renderer/style-control/Background.js

@@ -1,493 +0,0 @@
-/**
- * amis-editor v5.2.0-beta.1
- * Copyright 2018-2022 @fex
- */
-
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib = require('tslib');
-require('axios');
-var cx = require('classnames');
-var pick = require('lodash/pick');
-var omit = require('lodash/omit');
-var React = require('react');
-var amis = require('amis');
-var AMisCodeEditor = require('amis-editor-core');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-var pick__default = /*#__PURE__*/_interopDefaultLegacy(pick);
-var omit__default = /*#__PURE__*/_interopDefaultLegacy(omit);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-/**
- * @file Background.ts
- * @description 背景设置
- */
-var Background = function (props) {
-    var _a, _b, _c;
-    var _d = React.useState(0), tabIndex = _d[0], setTabIndex = _d[1];
-    var noImage = props.noImage;
-    var tabList = noImage
-        ? ['pure', 'gradient', 'noset']
-        : ['pure', 'gradient', 'image', 'noset'];
-    function onChange(key) {
-        return function (e) {
-            var _a;
-            var _b, _c, _d;
-            var eventValue = e !== null && typeof e === 'object'
-                ? typeof e.target === 'object'
-                    ? e.target.value
-                    : e.value
-                : e;
-            var value = props.value, onChange = props.onChange;
-            var result = tslib.__assign(tslib.__assign({}, value), (_a = {}, _a[key] = eventValue, _a));
-            // 透明度
-            if (key === 'alpha') {
-                result.backgroundColor = (_b = result.backgroundColor) === null || _b === void 0 ? void 0 : _b.replace(/,\s(1|0){1}.?[0-9]*\)$/g, ", ".concat(e / 100, ")"));
-            }
-            // 位置
-            if (key === 'backgroundPosition') {
-                result.backgroundPosition = e.target.getAttribute('data-pos');
-            }
-            // 背景大小级平铺模式
-            if (key === 'backgroundSize') {
-                var bsValue = eventValue !== null && eventValue !== void 0 ? eventValue : '';
-                var bsArr = bsValue.split(' ');
-                // 0位size 1位平铺方式
-                if (bsArr.length > 1) {
-                    result.backgroundSize = bsArr[0];
-                    result.backgroundRepeat = bsArr[1];
-                }
-                else {
-                    result.backgroundSize = bsValue;
-                    result.backgroundRepeat = 'no-repeat';
-                }
-            }
-            // 渐变色角度
-            if (key === 'angle') {
-                var backgroundImage = (_c = result.backgroundImage) !== null && _c !== void 0 ? _c : '';
-                var lineraGradient = backgroundImage.indexOf('linear-gradient') !== -1
-                    ? backgroundImage
-                    : 'linear-gradient(180deg, transparent, transparent)';
-                result.backgroundImage = lineraGradient.replace(/linear-gradient\(\d{1,3}/g, "linear-gradient(".concat(eventValue));
-            }
-            // 渐变色
-            if (key === 'gradientPrev' || key === 'gradientNext') {
-                var backgroundImage = (_d = result.backgroundImage) !== null && _d !== void 0 ? _d : '';
-                var lineraGradient = backgroundImage.indexOf('linear-gradient') !== -1
-                    ? backgroundImage
-                    : 'linear-gradient(180deg, transparent, transparent)';
-                var tempArr = lineraGradient.split(', ');
-                var len = tempArr.length;
-                // 前景色
-                if (key === 'gradientPrev') {
-                    if (len === 3) {
-                        tempArr[1] = eventValue;
-                    }
-                    else if (len === 5 || len === 6) {
-                        var startPos = 0;
-                        var endPos = 0;
-                        for (var i = 0; i < len; i++) {
-                            if (tempArr[i].indexOf('rgb') !== -1) {
-                                startPos = i;
-                            }
-                            if (tempArr[i].indexOf(')') !== -1 && endPos === 0) {
-                                endPos = i;
-                            }
-                        }
-                        // 后景色是rgb或rgba
-                        if (endPos === len - 1) {
-                            tempArr.splice(1, 1, eventValue);
-                        }
-                        else {
-                            tempArr.splice(startPos, endPos + 1, eventValue);
-                        }
-                    }
-                    else if (len >= 7) {
-                        // 前景色和后景色都是rgb
-                        for (var i = 0; i < len; i++) {
-                            var pos = tempArr[i].indexOf(')');
-                            if (pos !== -1) {
-                                tempArr.splice(1, i, eventValue);
-                                break;
-                            }
-                        }
-                    }
-                }
-                // 后景色
-                if (key === 'gradientNext') {
-                    if (len === 3) {
-                        tempArr[2] = eventValue + ')';
-                    }
-                    else if (len === 5 || len === 6) {
-                        var startPos = 0;
-                        var endPos = 0;
-                        for (var i = 0; i < len; i++) {
-                            if (tempArr[i].indexOf('rgb') !== -1) {
-                                startPos = i;
-                            }
-                            if (tempArr[i].indexOf(')') !== -1 && endPos === 0) {
-                                endPos = i;
-                            }
-                        }
-                        // 后景色是rgb或rgba
-                        if (endPos === len - 1) {
-                            tempArr.splice(startPos, endPos + 1, eventValue + ')');
-                        }
-                        else {
-                            tempArr.splice(-1, 1, eventValue + ')');
-                        }
-                    }
-                    else if (len >= 7) {
-                        // 前景色和后景色都是rgb
-                        var flag = 0;
-                        for (var i = 0; i < len; i++) {
-                            var pos = tempArr[i].indexOf('rgb');
-                            if (pos !== -1) {
-                                flag++;
-                                if (flag === 2) {
-                                    tempArr.splice(i, len - i + 1, eventValue);
-                                    break;
-                                }
-                            }
-                        }
-                    }
-                }
-                result.backgroundImage = tempArr.join(', ');
-                result = pick__default["default"](result, 'backgroundImage');
-            }
-            // 删除无用属性
-            if (key === 'alpha' || key === 'backgroundColor') {
-                result = pick__default["default"](result, 'backgroundColor');
-            }
-            if (key === 'backgroundImage' ||
-                key === 'backgroundPosition' ||
-                key === 'backgroundSize') {
-                if (/linear-gradient/g.test(result === null || result === void 0 ? void 0 : result.backgroundImage)) {
-                    result = pick__default["default"](result, 'backgroundPosition', 'backgroundSize', 'backgroundRepeat');
-                }
-                else {
-                    result = pick__default["default"](result, 'backgroundImage', 'backgroundPosition', 'backgroundSize', 'backgroundRepeat');
-                }
-            }
-            onChange(tslib.__assign(tslib.__assign({}, omit__default["default"](value, [
-                'backgroundColor',
-                'backgroundImage',
-                'backgroundPosition',
-                'backgroundSize',
-                'backgroundRepeat',
-                'angle',
-                'gradientNext',
-                'gradientPrev'
-            ])), result));
-        };
-    }
-    // 获取渐变颜色
-    function getGradient(type) {
-        var _a;
-        var linearGradient = (_a = props.value) === null || _a === void 0 ? void 0 : _a.backgroundImage;
-        var prevColor = '';
-        var nextColor = '';
-        if (/linear-gradient/g.test(linearGradient)) {
-            var tempArr = linearGradient.split(', ');
-            var len = tempArr.length;
-            if (len === 3) {
-                // 非rgb颜色
-                prevColor = tempArr[1];
-                nextColor = tempArr[2].slice(0, -1);
-            }
-            else if (len === 5 || len === 6) {
-                // rgb或rgba颜色
-                var startPos = 0;
-                var endPos = 0;
-                for (var i = 0; i < len; i++) {
-                    if (tempArr[i].indexOf('rgb') !== -1) {
-                        startPos = i;
-                    }
-                    if (tempArr[i].indexOf(')') !== -1 && endPos === 0) {
-                        endPos = i;
-                        if (i !== len - 1) {
-                            prevColor = tempArr.slice(startPos, i + 1).join(', ');
-                            nextColor = tempArr
-                                .slice(i + 1)
-                                .join('')
-                                .slice(0, -1);
-                        }
-                        else {
-                            prevColor = tempArr.slice(1, startPos).join('');
-                            nextColor = tempArr.slice(startPos, len - 1).join(', ');
-                        }
-                    }
-                }
-            }
-            else if (len >= 7) {
-                // 前景色和后景色都是rgb或rgba
-                var prevStartPos = 0;
-                var prevEndPos = 0;
-                var nextStartPos = 0;
-                var nextEndPos = 0;
-                for (var i = 0; i < len; i++) {
-                    if (tempArr[i].indexOf('rgb') !== -1) {
-                        if (prevStartPos === 0) {
-                            prevStartPos = i;
-                        }
-                        else if (nextStartPos === 0) {
-                            nextStartPos = i;
-                        }
-                    }
-                    if (tempArr[i].indexOf(')') !== -1) {
-                        if (prevEndPos === 0) {
-                            prevEndPos = i;
-                        }
-                        else if (nextEndPos === 0) {
-                            nextEndPos = i;
-                        }
-                    }
-                }
-                prevColor = tempArr.slice(prevStartPos, prevEndPos + 1).join(', ');
-                nextColor = tempArr.slice(nextStartPos, nextEndPos).join(', ');
-            }
-            linearGradient.split('');
-        }
-        var returnColor = type === 'prev' ? prevColor : nextColor;
-        if (returnColor === 'transparent') {
-            return '';
-        }
-        return returnColor;
-    }
-    // 获取渐变角度
-    function getGradientAngle() {
-        var _a;
-        var linearGradient = (_a = props.value) === null || _a === void 0 ? void 0 : _a.backgroundImage;
-        var angle = 180;
-        var match = /linear-gradient\((\d{1,3})/.exec(String(linearGradient || ''));
-        if (match) {
-            angle = +match[1];
-        }
-        return +angle;
-    }
-    // 获取激活的tab
-    function setActiveTab() {
-        var value = props.value;
-        if ((value === null || value === void 0 ? void 0 : value.backgroundColor) || (value === null || value === void 0 ? void 0 : value.alpha)) {
-            // 背景色
-            setTabIndex(0);
-        }
-        else if (value === null || value === void 0 ? void 0 : value.backgroundImage) {
-            if (/linear-gradient/g.test(value.backgroundImage)) {
-                // 渐变色
-                setTabIndex(1);
-            }
-            else {
-                // 图片
-                setTabIndex(2);
-            }
-        }
-        else if ((value === null || value === void 0 ? void 0 : value.backgroundPosition) || (value === null || value === void 0 ? void 0 : value.backgroundSize)) {
-            // 图片
-            setTabIndex(2);
-        }
-        else {
-            // 无背景
-            setTabIndex(tabList.length - 1);
-        }
-    }
-    // 背景图尺寸设置
-    function getbsValue() {
-        var _a, _b;
-        var backgroundSize = (_a = props.value) === null || _a === void 0 ? void 0 : _a.backgroundSize;
-        var backgroundRepeat = (_b = props.value) === null || _b === void 0 ? void 0 : _b.backgroundRepeat;
-        var returnVal = backgroundSize || '';
-        if (backgroundSize === 'auto' && backgroundRepeat) {
-            returnVal = backgroundSize + ' ' + backgroundRepeat;
-        }
-        return returnVal;
-    }
-    // 清空背景颜色、渐变色、背景图
-    function clearValues() {
-        var value = props.value, onChange = props.onChange;
-        var result = tslib.__assign(tslib.__assign({}, value), { backgroundSize: '', backgroundPosition: '', backgroundColor: '', backgroundImage: '' });
-        onChange(result);
-    }
-    function tabChange(index, item) {
-        if (item === 'noset') {
-            clearValues();
-        }
-        setTabIndex(index);
-    }
-    function handleChange(key, keyValue) {
-        var _a;
-        var value = props.value, onChange = props.onChange;
-        var result = tslib.__assign(tslib.__assign({}, value), (_a = {}, _a[key] = keyValue, _a));
-        onChange(result);
-    }
-    var currentItem = tabList[tabIndex];
-    React.useEffect(function () {
-        setActiveTab();
-    }, []);
-    return (React__default["default"].createElement("div", { className: "ae-Background" },
-        React__default["default"].createElement("div", { className: "ae-Background_tabs" },
-            React__default["default"].createElement("ul", { className: "ae-Background_tabs-nav" }, tabList.map(function (item, index) {
-                return (React__default["default"].createElement("li", { key: index, className: cx__default["default"](item, {
-                        active: tabIndex === index
-                    }), onClick: function () { return tabChange(index, item); } }));
-            })),
-            React__default["default"].createElement("div", { className: "ae-Background_tabs-content" },
-                currentItem === 'pure' && (React__default["default"].createElement("div", { className: "ae-Background_setting" }, amis.render({
-                    type: 'input-color',
-                    label: '背景色',
-                    format: 'rgba',
-                    mode: 'normal',
-                    value: (_a = props.value) === null || _a === void 0 ? void 0 : _a.backgroundColor
-                }, {
-                    onChange: function (value) {
-                        return handleChange('backgroundColor', value);
-                    }
-                }))),
-                currentItem === 'gradient' && (React__default["default"].createElement("div", { className: "ae-Background_setting" },
-                    React__default["default"].createElement("div", { className: "ae-Background_setting-item" },
-                        React__default["default"].createElement("div", { className: "ae-Background_setting-item_color" }, amis.render({
-                            type: 'input-color',
-                            label: '开始颜色',
-                            clearable: false,
-                            placeholder: '起始色',
-                            inputClassName: 'ae-Background-colorpicker',
-                            value: getGradient('prev')
-                        }, {
-                            onChange: onChange('gradientPrev')
-                        })),
-                        React__default["default"].createElement("div", { className: "ae-Background_setting-item_pic" }),
-                        React__default["default"].createElement("div", { className: "ae-Background_setting-item_color" }, amis.render({
-                            type: 'input-color',
-                            label: '结束颜色',
-                            clearable: false,
-                            placeholder: '结束色',
-                            inputClassName: 'ae-Background-colorpicker',
-                            value: getGradient('next')
-                        }, {
-                            onChange: onChange('gradientNext')
-                        }))),
-                    React__default["default"].createElement("div", { className: "ae-Background_setting-item" }, amis.render({
-                        type: 'input-number',
-                        label: '渐变角度',
-                        mode: 'row',
-                        step: 10,
-                        min: 0,
-                        max: 360,
-                        value: getGradientAngle(),
-                        description: '* 角度范围0-360度，0度表示从下至上渐变'
-                    }, {
-                        onChange: function (value) { return handleChange('angle', value); }
-                    })))),
-                currentItem === 'image' && (React__default["default"].createElement("div", { className: "ae-Background_setting" },
-                    amis.render({
-                        type: 'group',
-                        mode: 'horizontal',
-                        body: [
-                            AMisCodeEditor.getSchemaTpl('backgroundImageUrl', {
-                                name: 'backgroundImage',
-                                placeholder: '点击或拖拽图片上传',
-                                fixedSize: true,
-                                value: (_c = (_b = props.data) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.backgroundImage,
-                                onChange: onChange('backgroundImage'),
-                                fixedSizeClassName: 'ae-Background-upload',
-                                accept: '.jpg,.png,.svg,.gif',
-                                crop: true,
-                                columnRatio: 6,
-                                horizontal: {
-                                    left: 4,
-                                    right: 8
-                                }
-                            }),
-                            {
-                                type: '',
-                                label: '图片位置',
-                                name: 'backgroundPosition',
-                                asFormItem: true,
-                                columnRatio: 6,
-                                horizontal: {
-                                    left: 4,
-                                    right: 8
-                                },
-                                children: function () { return (React__default["default"].createElement("ul", { className: "ae-Background_setting\u2014pos" }, [
-                                    '0 0',
-                                    '50% 0',
-                                    '100% 0',
-                                    '0 50%',
-                                    '50% 50%',
-                                    '100% 50%',
-                                    '0 100%',
-                                    '50% 100%',
-                                    '100% 100%'
-                                ].map(function (item) {
-                                    var _a;
-                                    return (React__default["default"].createElement("li", { key: item, "data-pos": item, className: cx__default["default"]('ae-Background_setting—pos_item', {
-                                            active: item === ((_a = props.value) === null || _a === void 0 ? void 0 : _a.backgroundPosition)
-                                        }), onClick: onChange('backgroundPosition') }));
-                                }))); }
-                            }
-                        ]
-                    }),
-                    amis.render({
-                        type: 'select',
-                        label: '图片尺寸',
-                        name: 'backgroundSize',
-                        mode: 'horizontal',
-                        placeholder: '图片尺寸',
-                        value: getbsValue(),
-                        options: [
-                            {
-                                label: '充满',
-                                value: 'cover'
-                            },
-                            {
-                                label: '合适',
-                                value: 'contain'
-                            },
-                            {
-                                label: '拉伸',
-                                value: '100%'
-                            },
-                            {
-                                label: '平铺',
-                                value: 'auto repeat'
-                            },
-                            {
-                                label: '横向平铺',
-                                value: 'auto repeat-x'
-                            },
-                            {
-                                label: '纵向平铺',
-                                value: 'auto repeat-y'
-                            },
-                            {
-                                label: '原始尺寸',
-                                value: 'auto no-repeat'
-                            }
-                        ]
-                    }, {
-                        onChange: function (value) {
-                            return handleChange('backgroundSize', value);
-                        }
-                    }))),
-                currentItem === 'noset' && (React__default["default"].createElement("div", { className: "ae-Background_setting noset" }))))));
-};
-/** @class */ ((function (_super) {
-    tslib.__extends(BackgroundRenderer, _super);
-    function BackgroundRenderer() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    BackgroundRenderer.prototype.render = function () {
-        return React__default["default"].createElement(Background, tslib.__assign({}, this.props));
-    };
-    BackgroundRenderer = tslib.__decorate([
-        amis.FormItem({ type: 'style-background' })
-    ], BackgroundRenderer);
-    return BackgroundRenderer;
-})(React__default["default"].Component));
-
-exports["default"] = Background;