plot-plan-designer/lib/esm/components/common/InputTemplate.js

Design Editor Tools with React.js + ant.design + fabric.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ReactAce from 'react-ace';
import 'ace-builds/src-noconflict/mode-handlebars';
import 'ace-builds/src-noconflict/theme-github';
class InputTemplate extends Component {
    constructor() {
        super(...arguments);
        this.state = {
            text: this.props.value || '',
        };
        this.onChange = (value) => {
            const { onChange } = this.props;
            if (onChange) {
                onChange(value);
            }
            this.setState({
                text: value,
            });
        };
    }
    componentDidMount() {
        if (!this.props.newLineMode) {
            this.aceRef.editor.keyBinding.addKeyboardHandler((data, hashId, keyString, keyCode) => {
                if (keyCode === 13) {
                    return { command: 'null' }; // do nothing
                }
            });
        }
    }
    UNSAFE_componentWillReceiveProps(nextProps) {
        this.setState({
            text: nextProps.value,
        });
    }
    render() {
        const { defaultValue, width, height, showLineNumbers, newLineMode, disabled } = this.props;
        const { text } = this.state;
        return (React.createElement(ReactAce, { ref: (c) => {
                this.aceRef = c;
            }, mode: "handlebars", theme: "github", width: width, height: height, defaultValue: defaultValue || text, value: text, editorProps: {
                $blockScrolling: true,
            }, onChange: this.onChange, onValidate: this.onValidate, maxLines: !newLineMode ? 1 : null, setOptions: {
                showLineNumbers,
                newLineMode,
                readOnly: disabled,
            } }));
    }
}
InputTemplate.propTypes = {
    defaultValue: PropTypes.string,
    value: PropTypes.string,
    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    showLineNumbers: PropTypes.bool,
    newLineMode: PropTypes.bool,
    disabled: PropTypes.bool,
    onChange: PropTypes.func,
};
InputTemplate.defaultProps = {
    width: '100%',
    height: '200px',
    showLineNumbers: true,
    newLineMode: true,
    disabled: false,
};
export default InputTemplate;