@tntd/codemirror/dist/CodeMirror/index.js

tntd codemirror

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

import React, { Component } from "react";
import codemirror from "codemirror";
import "codemirror/lib/codemirror.css";
import "codemirror/addon/display/placeholder";
import "./index.css";

require('codemirror/theme/material.css');
require('codemirror/theme/neat.css');

var CodeInput = function (_Component) {
	_inherits(CodeInput, _Component);

	function CodeInput(props) {
		_classCallCheck(this, CodeInput);

		var _this = _possibleConstructorReturn(this, (CodeInput.__proto__ || Object.getPrototypeOf(CodeInput)).call(this, props));

		_this.bindEvent = function () {
			_this.editBox.on("change", function (e) {
				_this.props.onChange && _this.props.onChange(e.getValue());
			});
			_this.editBox.on("blur", function (e) {
				_this.props.onBlur && _this.props.onBlur(e.getValue());
			});
			_this.editBox.on("scroll", function (e) {
				_this.props.onScroll && _this.props.onScroll();
			});
			_this.editBox.on("refresh", function (e) {
				_this.props.onRefresh && _this.props.onRefresh();
			});
			_this.editBox.on("keydown", function (e) {
				_this.props.onKeydown && _this.props.onKeydown();
			});
			_this.editBox.on("keypress", function (e) {
				_this.props.onKeypress && _this.props.onKeypress();
			});
			_this.editBox.on("keyup", function (e) {
				_this.props.onKeyup && _this.props.onKeyup();
			});
			_this.editBox.on("cut", function (e) {
				_this.props.onCut && _this.props.onCut();
			});
			_this.editBox.on("copy", function (e) {
				_this.props.onCopy && _this.props.onCopy();
			});
			_this.editBox.on("paste", function (e) {
				_this.props.onPaste && _this.props.onPaste();
			});
			_this.editBox.on("contextmenu", function (e) {
				_this.props.contextmenu && _this.props.contextmenu();
			});
			_this.editBox.on("dblclick", function (e) {
				_this.props.onDblClick && _this.props.onDblClick();
			});
			_this.editBox.on("mousedown", function (e) {
				_this.props.onMousedown && _this.props.onMousedown();
			});
		};

		_this.editBox = null;
		_this.randomId = window.parseInt(Math.random() * 10000);
		return _this;
	}

	_createClass(CodeInput, [{
		key: "componentDidMount",
		value: function componentDidMount() {
			var _props = this.props,
			    _props$mode = _props.mode,
			    mode = _props$mode === undefined ? "text" : _props$mode,
			    _props$theme = _props.theme,
			    theme = _props$theme === undefined ? 'neat' : _props$theme,
			    _props$readOnly = _props.readOnly,
			    readOnly = _props$readOnly === undefined ? false : _props$readOnly,
			    _props$lineNumbers = _props.lineNumbers,
			    lineNumbers = _props$lineNumbers === undefined ? true : _props$lineNumbers,
			    _props$autofocus = _props.autofocus,
			    autofocus = _props$autofocus === undefined ? true : _props$autofocus,
			    _props$tabSize = _props.tabSize,
			    tabSize = _props$tabSize === undefined ? 4 : _props$tabSize,
			    _props$placeholder = _props.placeholder,
			    placeholder = _props$placeholder === undefined ? '请输入...' : _props$placeholder,
			    lineSeparator = _props.lineSeparator,
			    _props$smartIndent = _props.smartIndent,
			    smartIndent = _props$smartIndent === undefined ? true : _props$smartIndent,
			    _props$indentWithTabs = _props.indentWithTabs,
			    indentWithTabs = _props$indentWithTabs === undefined ? false : _props$indentWithTabs,
			    _props$electricChars = _props.electricChars,
			    electricChars = _props$electricChars === undefined ? true : _props$electricChars,
			    _props$firstLineNumbe = _props.firstLineNumber,
			    firstLineNumber = _props$firstLineNumbe === undefined ? 1 : _props$firstLineNumbe;


			var themeInitMap = {
				day: "default",
				night: "material"
			};
			this.editBox = codemirror.fromTextArea(document.getElementById("fb_" + this.randomId), {
				mode: mode,
				theme: themeInitMap[theme] ? themeInitMap[theme] : theme,
				lineNumbers: lineNumbers,
				matchBrackets: true,
				readOnly: readOnly,
				Autofocus: readOnly ? false : autofocus,
				tabSize: tabSize,
				placeholder: placeholder,
				lineSeparator: lineSeparator,
				smartIndent: smartIndent,
				indentWithTabs: indentWithTabs,
				electricChars: electricChars,
				firstLineNumber: firstLineNumber
			});
			if (this.props.defaultValue && !this.props.value) {
				this.editBox.setValue(this.props.defaultValue);
			}
			if (this.props.value) {
				this.editBox.setValue(this.props.value);
			}
			this.bindEvent();
		}
	}, {
		key: "componentDidUpdate",
		value: function componentDidUpdate() {
			if (this.editBox.getValue() !== this.props.value) {
				this.editBox.setValue(this.props.value || "");
			}
		}
	}, {
		key: "render",
		value: function render() {
			var _props2 = this.props,
			    _props2$className = _props2.className,
			    className = _props2$className === undefined ? "" : _props2$className,
			    _props2$style = _props2.style,
			    style = _props2$style === undefined ? {} : _props2$style,
			    _props2$config = _props2.config,
			    config = _props2$config === undefined ? {} : _props2$config,
			    _props2$height = _props2.height,
			    height = _props2$height === undefined ? 300 : _props2$height,
			    placeholder = _props2.placeholder;


			style.height = height;

			return React.createElement(
				"div",
				{ className: "code-input " + className, style: style },
				React.createElement("textarea", { className: "formula-box", id: "fb_" + this.randomId, placeholder: placeholder })
			);
		}
	}, {
		key: "componentWillUnmount",
		value: function componentWillUnmount() {
			this.editBox.off("change");
		}
	}, {
		key: "shouldComponentUpdate",
		value: function shouldComponentUpdate(nextProps) {
			if (this.editBox.getValue() === nextProps.value) {
				return false;
			}
			return true;
		}
	}]);

	return CodeInput;
}(Component);

export default CodeInput;