joywok-material-components
Version:
<h1 align="center"> Joywok Material Components </h1>
194 lines (166 loc) • 14 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
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; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);
var _async = require('async');
var _async2 = _interopRequireDefault(_async);
var _antd = require('antd');
var _aloneTip = require('../tips/aloneTip');
var _aloneTip2 = _interopRequireDefault(_aloneTip);
var _joywokMaterialComponents = require('joywok-material-components');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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; } /**
*
* @api {} JSON编辑器
* @apiName 文本编辑组件
* @apiGroup 组件使用
*
* @apiParam {String } value 编辑器内容
* @apiParam {function } onChange 返回编辑器内容
*
* @apiSuccessExample {json} 使用案例:
import JsonEditor from "joywok-material-components/lib/editor/json";
<JsonEditor value={'{\n"JSON":"JSON"\n}'} onChange={(e)=>{console.log(e)}}></JsonEditor>
*
*
*/
var jschars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
require('./style/json.css');
function generateMixed(n) {
var res = "";
for (var i = 0; i < n; i++) {
var id = Math.ceil(Math.random() * 61);
res += jschars[id];
}
return res;
}
window.htmlencode = function (s) {
var div = document.createElement('div');
div.appendChild(document.createTextNode(s));
var html = div.innerHTML;
return html;
};
window.htmldecode = function (s) {
var div = document.createElement('div');
div.innerHTML = s;
var content = div.innerText || div.textContent;
return content;
};
var JsonEdit = function (_React$Component) {
_inherits(JsonEdit, _React$Component);
function JsonEdit(props) {
_classCallCheck(this, JsonEdit);
var _this = _possibleConstructorReturn(this, (JsonEdit.__proto__ || Object.getPrototypeOf(JsonEdit)).call(this, props));
_this.changeTime = null;
_this.id = generateMixed(16);
return _this;
}
_createClass(JsonEdit, [{
key: 'render',
value: function render() {
var self = this;
console.log('这个触发了么');
return _react2.default.createElement(
'div',
{ className: 'jw-json-editor ' + (this.props.className || '') },
_react2.default.createElement('div', { id: this.id })
);
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
var self = this;
if (window.JSONEditor == undefined) {
_async2.default.parallel({
css: function css(cb) {
$.get(window.filesrc + '/otherfiles/jsoneditor/dist/jsoneditor.css', function (d) {
$('body').append('<style type="text/css">' + d + '</style>');cb(null, 'css');
});
},
editor: function editor(cb) {
$.get(window.filesrc + '/otherfiles/jsoneditor/dist/jsoneditor.js', function () {
cb(null, 'editor');
});
}
}, function (err, ret) {
setTimeout(function () {
self.initEditor2();
}, 200);
});
} else {
self.initEditor2();
}
}
}, {
key: 'isJSON',
value: function isJSON(str) {
if (typeof str == 'string') {
try {
var obj = JSON.parse(str);
if ((typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) == 'object' && obj) {
return true;
} else {
return false;
}
} catch (e) {
return false;
}
}
}
}, {
key: 'initEditor2',
value: function initEditor2() {
var self = this;
console.log('这个走了么啊');
var container = document.getElementById(this.id);
var options = {
mode: 'code',
enableSort: false,
enableTransform: false,
search: false,
colorPicker: false,
repair: false,
onChangeText: function onChangeText(data) {
clearTimeout(self.changeTime);
self.changeTime = setTimeout(function () {
var isJSON = self.isJSON(data);
// if(isJSON){
self.props.onChange && self.props.onChange(data);
// }else{
// self.props.onChange && self.props.onChange(null)
// }
}, 500);
}
};
this.editor = new JSONEditor(container, options);
this.editor.setText(this.props.value || '');
var updatedJson = this.editor.getText();
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
// console.log(this.editor)
if (this.editor) {
var updatedJson = this.editor.getText();
if (updatedJson != nextProps.value) {
this.editor.setText(nextProps.value);
}
}
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
this.editor = null;
}
}]);
return JsonEdit;
}(_react2.default.Component);
exports.default = JsonEdit;