This repository was archived by the owner on Oct 19, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 18
Expand file tree
/
Copy pathhtml-jsx.js
More file actions
91 lines (85 loc) · 2.65 KB
/
html-jsx.js
File metadata and controls
91 lines (85 loc) · 2.65 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
/**
* Copyright 2013-2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
/**
* This is a web interface for the HTML to JSX converter contained in
* `html-jsx-lib.js`.
*/
"use strict";
;(function () {
var HELLO_COMPONENT = "\
<!-- Hello world -->\n\
<div class=\"awesome\" style=\"border: 1px solid red\">\n\
<label for=\"name\">Enter your name: </label>\n\
<input type=\"text\" id=\"name\" />\n\
</div>\n\
<p>Enter your HTML here</p>\
";
var HTMLtoJSXComponent = React.createClass({
displayName: "HTMLtoJSXComponent",
getInitialState: function getInitialState() {
return {
outputClassName: 'NewComponent',
createClass: true
};
},
onReactClassNameChange: function onReactClassNameChange(evt) {
this.setState({ outputClassName: evt.target.value });
},
onCreateClassChange: function onCreateClassChange(evt) {
this.setState({ createClass: evt.target.checked });
},
setInput: function setInput(input) {
this.setState({ input: input });
this.convertToJsx();
},
convertToJSX: function convertToJSX(input) {
var converter = new HTMLtoJSX({
outputClassName: this.state.outputClassName,
createClass: this.state.createClass
});
return converter.convert(input);
},
render: function render() {
return React.createElement(
"div",
null,
React.createElement(
"div",
{ id: "options" },
React.createElement(
"label",
null,
React.createElement("input", {
type: "checkbox",
checked: this.state.createClass,
onChange: this.onCreateClassChange }),
"Create class"
),
React.createElement(
"label",
{ style: { display: this.state.createClass ? '' : 'none' } },
"· Class name:",
React.createElement("input", {
type: "text",
value: this.state.outputClassName,
onChange: this.onReactClassNameChange })
)
),
React.createElement(ReactPlayground, {
codeText: HELLO_COMPONENT,
renderCode: true,
transformer: this.convertToJSX,
showCompiledJSTab: false,
editorTabTitle: "Live HTML Editor"
})
);
}
});
ReactDOM.render(React.createElement(HTMLtoJSXComponent, null), document.getElementById('jsxCompiler'));
})();