application/metaproperties/editortext-meta-property.js

import React from 'react';
import Codemirror from 'react-codemirror';
import Subheader from 'material-ui/Subheader';
require('codemirror/mode/htmlmixed/htmlmixed');
 
 
class EditortextMetaProperty extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'EditortextMetaProperty';
 
    }
 
    rando() {
        const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
 
        let str = [];
        for (let i=0; i<5; i++) {
            str.push(chars.charAt(Math.floor(Math.random() * chars.length)));
        }
 
        return str.join('');
    }
 
    shouldComponentUpdate(nextProps, nextState) {
        if (nextProps.value != this.props.value) {
            return true;
        }
        if (nextProps.disabled != this.props.disabled) {
            return true;
        }
        return false;
    }
 
    handleEditorChange(val) {
        const propName = this.props.name;
 
        let fakeEvent = {
            target: {
                getAttribute: function() {
                    return propName;
                },
                value: val
            }
        };
        this.props.onChange(fakeEvent);
    }
 
    render() {
        const cmOptions = {
            lineNumbers: true,
            mode: 'htmlmixed'
        };
        const name = this.props.name ? this.props.name : 'textfield_' + this.rando();
 
        return (
            <div>
                <Subheader>{this.props.floatingLabelText}</Subheader>
                <Codemirror
                    ref={name}
                    value={this.props.value}
                    onChange={this.handleEditorChange.bind(this)}
                    options={cmOptions} />
            </div>
        );
    }
}
 
export default EditortextMetaProperty;