amis-ui 2.0.2 → 2.2.0

package/esm/components/ColorPicker2.js

@@ -1,202 +0,0 @@
-/**
- * amis-ui v2.0.2
- * Copyright 2018-2022 fex
- */
-
-import { __extends, __decorate, __metadata } from 'tslib';
-import React__default from 'react';
-import { findDOMNode } from 'react-dom';
-import { SketchPicker, GithubPicker } from 'react-color';
-import { Icon } from './icons.js';
-import { isMobile, Overlay, PopOver, isObject, autobind, themeable, localeable, uncontrollable } from 'amis-core';
-import PopUp from './PopUp.js';
-
-/**
- * @file ColorPicker
- * @description 颜色选择器组件
- * @author fex
- */
-var ColorControl = /** @class */ (function (_super) {
-    __extends(ColorControl, _super);
-    function ColorControl(props) {
-        var _this = _super.call(this, props) || this;
-        _this.state = {
-            isOpened: false,
-            isFocused: false,
-            inputValue: _this.props.value || ''
-        };
-        _this.open = _this.open.bind(_this);
-        _this.close = _this.close.bind(_this);
-        _this.focus = _this.focus.bind(_this);
-        _this.blur = _this.blur.bind(_this);
-        _this.handleChange = _this.handleChange.bind(_this);
-        _this.handleFocus = _this.handleFocus.bind(_this);
-        _this.handleBlur = _this.handleBlur.bind(_this);
-        _this.clearValue = _this.clearValue.bind(_this);
-        _this.handleInputChange = _this.handleInputChange.bind(_this);
-        _this.handleClick = _this.handleClick.bind(_this);
-        _this.preview = React__default.createRef();
-        _this.input = React__default.createRef();
-        return _this;
-    }
-    ColorControl.prototype.componentDidUpdate = function (prevProps) {
-        var props = this.props;
-        if (prevProps.value !== props.value) {
-            this.setState({
-                inputValue: props.value || ''
-            });
-        }
-    };
-    ColorControl.prototype.handleFocus = function () {
-        this.setState({
-            isFocused: true
-        });
-    };
-    ColorControl.prototype.handleBlur = function () {
-        this.setState({
-            isFocused: false,
-            inputValue: this.props.value
-        });
-    };
-    ColorControl.prototype.focus = function () {
-        this.input.current && this.input.current.focus();
-    };
-    ColorControl.prototype.blur = function () {
-        this.input.current && this.input.current.blur();
-    };
-    ColorControl.prototype.open = function (fn) {
-        if (this.props.disabled) {
-            return;
-        }
-        this.setState({
-            isOpened: true
-        }, fn);
-    };
-    ColorControl.prototype.close = function () {
-        this.setState({
-            isOpened: false
-        });
-    };
-    ColorControl.prototype.clearValue = function () {
-        var _a = this.props, onChange = _a.onChange, resetValue = _a.resetValue;
-        onChange(resetValue || '');
-    };
-    ColorControl.prototype.handleClick = function () {
-        this.state.isOpened ? this.close() : this.open(this.focus);
-    };
-    ColorControl.prototype.handleInputChange = function (e) {
-        var _this = this;
-        if (!this.props.allowCustomColor) {
-            return;
-        }
-        var onChange = this.props.onChange;
-        this.setState({
-            inputValue: e.currentTarget.value
-        }, function () {
-            var isValidated = _this.validateColor(_this.state.inputValue);
-            if (isValidated) {
-                onChange(_this.state.inputValue);
-            }
-        });
-    };
-    ColorControl.prototype.validateColor = function (value) {
-        if (value === '') {
-            return false;
-        }
-        if (value === 'inherit') {
-            return false;
-        }
-        if (value === 'transparent') {
-            return false;
-        }
-        var image = document.createElement('img');
-        image.style.color = 'rgb(0, 0, 0)';
-        image.style.color = value;
-        if (image.style.color !== 'rgb(0, 0, 0)') {
-            return true;
-        }
-        image.style.color = 'rgb(255, 255, 255)';
-        image.style.color = value;
-        return image.style.color !== 'rgb(255, 255, 255)';
-    };
-    ColorControl.prototype.handleChange = function (color) {
-        var _a = this.props, onChange = _a.onChange, format = _a.format
-        // closeOnSelect
-        ;
-        if (format === 'rgba') {
-            onChange("rgba(".concat(color.rgb.r, ", ").concat(color.rgb.g, ", ").concat(color.rgb.b, ", ").concat(color.rgb.a, ")"));
-        }
-        else if (format === 'rgb') {
-            onChange("rgb(".concat(color.rgb.r, ", ").concat(color.rgb.g, ", ").concat(color.rgb.b, ")"));
-        }
-        else if (format === 'hsl') {
-            onChange("hsl(".concat(Math.round(color.hsl.h), ", ").concat(Math.round(color.hsl.s * 100), "%, ").concat(Math.round(color.hsl.l * 100), "%)"));
-        }
-        else {
-            onChange(color.hex);
-        }
-        // closeOnSelect && this.close();
-    };
-    ColorControl.prototype.render = function () {
-        var _this = this;
-        var _a = this.props, ns = _a.classPrefix, className = _a.className, popoverClassName = _a.popoverClassName, value = _a.value, placeholder = _a.placeholder, disabled = _a.disabled, popOverContainer = _a.popOverContainer, format = _a.format, clearable = _a.clearable, placement = _a.placement, cx = _a.classnames, presetColors = _a.presetColors, allowCustomColor = _a.allowCustomColor, useMobileUI = _a.useMobileUI;
-        var __ = this.props.translate;
-        var isOpened = this.state.isOpened;
-        var isFocused = this.state.isFocused;
-        var mobileUI = useMobileUI && isMobile();
-        return (React__default.createElement("div", { className: cx("ColorPicker", {
-                'is-disabled': disabled,
-                'is-focused': isFocused,
-                'is-opened': isOpened
-            }, className) },
-            React__default.createElement("span", { onClick: this.handleClick, className: cx('ColorPicker-preview') },
-                React__default.createElement("i", { ref: this.preview, className: "".concat(ns, "ColorPicker-previewIcon"), style: { background: this.state.inputValue || '#ccc' } })),
-            React__default.createElement("input", { ref: this.input, type: "text", autoComplete: "off", size: 10, className: cx('ColorPicker-input'), value: this.state.inputValue || '', placeholder: __(placeholder), disabled: disabled, onChange: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick, readOnly: mobileUI }),
-            clearable && !disabled && value ? (React__default.createElement("a", { onClick: this.clearValue, className: cx('ColorPicker-clear') },
-                React__default.createElement(Icon, { icon: "input-clear", className: "icon" }))) : null,
-            React__default.createElement("span", { className: cx('ColorPicker-arrow') },
-                React__default.createElement(Icon, { icon: "caret", className: "icon", onClick: this.handleClick })),
-            !mobileUI && isOpened ? (React__default.createElement(Overlay, { placement: placement || 'auto', target: function () { return findDOMNode(_this); }, onHide: this.close, container: popOverContainer || (function () { return findDOMNode(_this); }), rootClose: false, show: true },
-                React__default.createElement(PopOver, { classPrefix: ns, className: cx('ColorPicker-popover', popoverClassName), onHide: this.close, overlay: true }, allowCustomColor ? (React__default.createElement(SketchPicker, { styles: {}, disableAlpha: !!~['rgb', 'hex'].indexOf(format), color: value, presetColors: presetColors, onChangeComplete: this.handleChange })) : (React__default.createElement(GithubPicker, { color: value, colors: Array.isArray(presetColors)
-                        ? presetColors
-                            .filter(function (item) { return typeof item === 'string' || isObject(item); })
-                            .map(function (item) {
-                            return typeof item === 'string'
-                                ? item
-                                : isObject(item)
-                                    ? item === null || item === void 0 ? void 0 : item.color
-                                    : item;
-                        })
-                        : undefined, onChangeComplete: this.handleChange }))))) : null,
-            mobileUI && (React__default.createElement(PopUp, { className: cx("".concat(ns, "ColorPicker-popup")), container: popOverContainer, isShow: isOpened, onHide: this.handleClick }, allowCustomColor ? (React__default.createElement(SketchPicker, { styles: {}, disableAlpha: !!~['rgb', 'hex'].indexOf(format), color: value, presetColors: presetColors, onChangeComplete: this.handleChange })) : (React__default.createElement(GithubPicker, { color: value, colors: Array.isArray(presetColors)
-                    ? presetColors
-                        .filter(function (item) { return typeof item === 'string' || isObject(item); })
-                        .map(function (item) {
-                        return typeof item === 'string'
-                            ? item
-                            : isObject(item)
-                                ? item === null || item === void 0 ? void 0 : item.color
-                                : item;
-                    })
-                    : undefined, onChangeComplete: this.handleChange }))))));
-    };
-    ColorControl.defaultProps = {
-        format: 'hex',
-        clearable: true,
-        placeholder: 'ColorPicker.placeholder',
-        allowCustomColor: true
-        // closeOnSelect: true
-    };
-    __decorate([
-        autobind,
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [String]),
-        __metadata("design:returntype", void 0)
-    ], ColorControl.prototype, "validateColor", null);
-    return ColorControl;
-}(React__default.PureComponent));
-var ColorPicker = themeable(localeable(uncontrollable(ColorControl, {
-    value: 'onChange'
-})));
-
-export { ColorControl, ColorPicker as default };

package/esm/components/Markdown2.js

@@ -1,60 +0,0 @@
-/**
- * amis-ui v2.0.2
- * Copyright 2018-2022 fex
- */
-
-import { __extends, __awaiter, __generator } from 'tslib';
-import React__default from 'react';
-import markdownIt from 'markdown-it';
-import { html5Media } from 'markdown-it-html5-media';
-
-var doMarkdown = markdownIt();
-doMarkdown.use(html5Media);
-function markdown(content, options) {
-    if (options) {
-        doMarkdown.set(options);
-    }
-    return doMarkdown.render(content);
-}
-var Markdown = /** @class */ (function (_super) {
-    __extends(Markdown, _super);
-    function Markdown(props) {
-        var _this = _super.call(this, props) || this;
-        _this.htmlRef = _this.htmlRef.bind(_this);
-        return _this;
-    }
-    Markdown.prototype.htmlRef = function (dom) {
-        this.dom = dom;
-        if (!dom) {
-            return;
-        }
-        this._render();
-    };
-    Markdown.prototype.componentDidUpdate = function (nextProps) {
-        if (this.props.content !== nextProps.content) {
-            this._render();
-        }
-    };
-    Markdown.prototype._render = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            var _a, content, options;
-            return __generator(this, function (_b) {
-                _a = this.props, content = _a.content, options = _a.options;
-                this.dom.innerHTML = markdown(content, options);
-                return [2 /*return*/];
-            });
-        });
-    };
-    Markdown.prototype.render = function () {
-        return (React__default.createElement("div", { "data-testid": "markdown-body", className: "markdown-body", ref: this.htmlRef }));
-    };
-    Markdown.defaultProps = {
-        content: '',
-        options: {
-            linkify: true
-        }
-    };
-    return Markdown;
-}(React__default.Component));
-
-export { Markdown as default, markdown };

package/esm/components/RichText2.js

@@ -1,262 +0,0 @@
-/**
- * amis-ui v2.0.2
- * Copyright 2018-2022 fex
- */
-
-import { __extends, __assign } from 'tslib';
-import React__default from 'react';
-import FroalaEditor from 'froala-editor';
-import Froala from 'froala-editor/js/froala_editor.min.js';
-import 'froala-editor/js/plugins/align.min';
-import 'froala-editor/js/plugins/colors.min';
-import 'froala-editor/js/plugins/char_counter.min';
-import 'froala-editor/js/plugins/code_view.min';
-import 'froala-editor/js/plugins/draggable.min';
-import 'froala-editor/js/plugins/entities.min';
-import 'froala-editor/js/plugins/font_family.min';
-import 'froala-editor/js/plugins/font_size.min';
-import 'froala-editor/js/plugins/forms.min';
-import 'froala-editor/js/plugins/fullscreen.min';
-import 'froala-editor/js/plugins/help.min';
-import 'froala-editor/js/plugins/image.min';
-import 'froala-editor/js/plugins/inline_class.min';
-import 'froala-editor/js/plugins/inline_style.min';
-import 'froala-editor/js/plugins/line_breaker.min';
-import 'froala-editor/js/plugins/line_height.min';
-import 'froala-editor/js/plugins/link.min';
-import 'froala-editor/js/plugins/lists.min';
-import 'froala-editor/js/plugins/paragraph_format.min';
-import 'froala-editor/js/plugins/paragraph_style.min';
-import 'froala-editor/js/plugins/print.min';
-import 'froala-editor/js/plugins/quick_insert.min';
-import 'froala-editor/js/plugins/quote.min';
-import 'froala-editor/js/plugins/save.min';
-import 'froala-editor/js/plugins/special_characters.min';
-import 'froala-editor/js/plugins/table.min';
-import 'froala-editor/js/plugins/url.min';
-import 'froala-editor/js/plugins/video.min';
-import 'froala-editor/js/plugins/word_paste.min';
-import 'froala-editor/js/languages/zh_cn.js';
-
-/**
- * @file RichText
- * @description
- * @author fex
- */
-// 代码来源于：https://github.com/froala/react-froala-wysiwyg/blob/master/lib/FroalaEditorFunctionality.jsx
-// 改动原因是model 同步有些问题，有时候不更新，所以基于官方代码改造一下。
-// 目前发现的问题是，如果 model 数据修改，如果此时 editor 还没有初始化完成则不会同步成功
-var FroalaEditorComponent = /** @class */ (function (_super) {
-    __extends(FroalaEditorComponent, _super);
-    function FroalaEditorComponent(props) {
-        var _this = _super.call(this, props) || this;
-        _this.listeningEvents = [];
-        _this.element = null;
-        _this.editor = null;
-        _this.config = {
-            immediateReactModelUpdate: false,
-            reactIgnoreAttrs: null
-        };
-        _this.editorInitialized = false;
-        _this.INNER_HTML_ATTR = 'innerHTML';
-        _this.oldModel = null;
-        return _this;
-    }
-    // After first time render.
-    FroalaEditorComponent.prototype.componentDidMount = function () {
-        this.createEditor();
-    };
-    FroalaEditorComponent.prototype.componentWillUnmount = function () {
-        this.destroyEditor();
-    };
-    FroalaEditorComponent.prototype.componentDidUpdate = function () {
-        if (JSON.stringify(this.oldModel) == JSON.stringify(this.props.model)) {
-            return;
-        }
-        this.setContent();
-    };
-    // Return cloned object
-    FroalaEditorComponent.prototype.clone = function (item) {
-        var me = this;
-        if (!item) {
-            return item;
-        } // null, undefined values check
-        var types = [Number, String, Boolean], result;
-        // normalizing primitives if someone did new String('aaa'), or new Number('444');
-        types.forEach(function (type) {
-            if (item instanceof type) {
-                result = type(item);
-            }
-        });
-        if (typeof result == 'undefined') {
-            if (Object.prototype.toString.call(item) === '[object Array]') {
-                result = [];
-                item.forEach(function (child, index, array) {
-                    result[index] = me.clone(child);
-                });
-            }
-            else if (typeof item == 'object') {
-                // testing that this is DOM
-                if (item.nodeType && typeof item.cloneNode == 'function') {
-                    result = item.cloneNode(true);
-                }
-                else if (!item.prototype) {
-                    // check that this is a literal
-                    if (item instanceof Date) {
-                        result = new Date(item);
-                    }
-                    else {
-                        // it is an object literal
-                        result = {};
-                        for (var i in item) {
-                            result[i] = me.clone(item[i]);
-                        }
-                    }
-                }
-                else {
-                    {
-                        result = item;
-                    }
-                }
-            }
-            else {
-                result = item;
-            }
-        }
-        return result;
-    };
-    FroalaEditorComponent.prototype.createEditor = function () {
-        var _this = this;
-        if (this.editorInitialized) {
-            return;
-        }
-        this.config = this.clone(this.props.config || this.config);
-        this.config = __assign({}, this.config);
-        this.element = this.el;
-        if (this.props.model) {
-            this.element.innerHTML = this.props.model;
-        }
-        this.setContent();
-        // Default initialized.
-        this.registerEvent('initialized', this.config.events && this.config.events.initialized);
-        // Check if events are set.
-        if (!this.config.events)
-            this.config.events = {};
-        this.config.events.initialized = function () {
-            _this.editorInitialized = true;
-            _this.initListeners();
-        };
-        this.editor = new FroalaEditor(this.element, this.config);
-    };
-    FroalaEditorComponent.prototype.setContent = function () {
-        var _this = this;
-        if (this.props.model || this.props.model == '') {
-            this.oldModel = this.props.model;
-            if (this.editorInitialized) {
-                this.setNormalTagContent();
-            }
-            else {
-                if (!this._initEvents)
-                    this._initEvents = [];
-                this._initEvents.push(function () { return _this.setNormalTagContent(); });
-            }
-        }
-    };
-    FroalaEditorComponent.prototype.setNormalTagContent = function () {
-        var self = this;
-        self.editor.html && self.editor.html.set(self.props.model || '');
-        if (self.editorInitialized && self.editor.undo) {
-            //This will reset the undo stack everytime the model changes externally. Can we fix this?
-            self.editor.undo.reset();
-            self.editor.undo.saveStep();
-        }
-    };
-    FroalaEditorComponent.prototype.destroyEditor = function () {
-        if (this.element) {
-            this.editor.destroy && this.editor.destroy();
-            this.listeningEvents.length = 0;
-            this.element = null;
-            this.editorInitialized = false;
-            this._initEvents = [];
-        }
-    };
-    FroalaEditorComponent.prototype.getEditor = function () {
-        if (this.element) {
-            return this.editor;
-        }
-        return null;
-    };
-    FroalaEditorComponent.prototype.updateModel = function () {
-        if (!this.props.onModelChange) {
-            return;
-        }
-        var modelContent = '';
-        var returnedHtml = this.editor.html.get();
-        if (typeof returnedHtml === 'string') {
-            modelContent = returnedHtml;
-        }
-        this.oldModel = modelContent;
-        this.props.onModelChange(modelContent);
-    };
-    FroalaEditorComponent.prototype.initListeners = function () {
-        var self = this;
-        // bind contentChange and keyup event to froalaModel
-        this.editor.events.on('contentChanged', function () {
-            self.updateModel();
-        });
-        if (this.config.immediateReactModelUpdate) {
-            this.editor.events.on('keyup', function () {
-                self.updateModel();
-            });
-        }
-        // Call init events.
-        if (this._initEvents) {
-            for (var i = 0; i < this._initEvents.length; i++) {
-                this._initEvents[i].call(this.editor);
-            }
-        }
-    };
-    // register event on jquery editor element
-    FroalaEditorComponent.prototype.registerEvent = function (eventName, callback) {
-        if (!eventName || !callback) {
-            return;
-        }
-        if (eventName == 'initialized') {
-            if (!this._initEvents)
-                this._initEvents = [];
-            this._initEvents.push(callback);
-        }
-        else {
-            if (!this.config.events) {
-                this.config.events = {};
-            }
-            this.config.events[eventName] = callback;
-        }
-    };
-    FroalaEditorComponent.prototype.render = function () {
-        var _this = this;
-        return (React__default.createElement("textarea", { ref: function (el) { return (_this.el = el); } }, this.props.children));
-    };
-    return FroalaEditorComponent;
-}(React__default.Component));
-var default_1 = /** @class */ (function (_super) {
-    __extends(default_1, _super);
-    function default_1(props) {
-        var _this = _super.call(this, props) || this;
-        Froala.VIDEO_PROVIDERS = [
-            {
-                test_regex: /.*/,
-                url_regex: '',
-                url_text: '',
-                html: '<span class="fr-video fr-dvb fr-draggable" contenteditable="false" draggable="true"><video class="fr-draggable" controls="" data-msg="ok" data-status="0" src="{url}" style="width: 600px;"></video></span>'
-            }
-        ];
-        return _this;
-    }
-    default_1.prototype.render = function () {
-        return (React__default.createElement(FroalaEditorComponent, { config: this.props.config, model: this.props.model, onModelChange: this.props.onModelChange }));
-    };
-    return default_1;
-}(React__default.Component));
-
-export { default_1 as default };