@@ -42,9 +42,7 @@ export default class XML extends Component {
ref={this.code}
value={this.state.code}
options={options}
- onBeforeChange={(editor, data, code) => {
- this.setState({code});
- }}
+ onChange={this.updateCode}
/>
Toggle Code Display
{this.state.viewOpToggle &&
diff --git a/src/components/Tree.css b/src/components/Tree.css
new file mode 100644
index 0000000..01f731e
--- /dev/null
+++ b/src/components/Tree.css
@@ -0,0 +1,25 @@
+#child-name {
+ top : 50%;
+ left : 50%;
+ right : auto;
+ bottom : auto;
+ margin-right : -50%;
+ transform : translate(2%, 25%);
+ width : 250px;
+ height : 30px;
+ background-color: rgb(255, 225, 235);
+ border: 2px solid rgb(32, 32, 32);
+}
+
+#child-name:focus {
+ outline-width: 0;
+}
+
+.submit {
+ margin-top: 50%;
+ margin-left: -30px;
+}
+
+form{
+ overflow: hidden;
+}
\ No newline at end of file
diff --git a/src/components/Tree.js b/src/components/Tree.js
new file mode 100644
index 0000000..5c4f474
--- /dev/null
+++ b/src/components/Tree.js
@@ -0,0 +1,268 @@
+import React, { Component } from 'react'
+import {Treebeard, animations} from 'react-treebeard';
+import Modal from 'react-modal';
+import './Tree.css'
+
+const customStyles = {
+ content : {
+ top : '50%',
+ left : '50%',
+ right : 'auto',
+ bottom : 'auto',
+ marginRight : '-50%',
+ transform : 'translate(-50%, -50%)',
+ width : '300px',
+ height : '300px',
+ backgroundColor : '#FF80AB',
+ overflow : 'hidden'
+ }
+ };
+ // Modal.setAppElement('#root')
+
+let data = {
+ name: 'root',
+ toggled: true,
+ children: [
+ {
+ name: 'App',
+ children: [
+ { name: 'server.js' },
+ { name: 'data.js' }
+ ]
+ },
+ {
+ name: 'styles',
+ children: [
+ {name: 'header.css'},
+ {name: 'footer.css'},
+ ]
+ },
+ {
+ name: 'client',
+ children: [
+ {
+ name: 'App',
+ children: [
+ { name: 'index.js' },
+ { name: 'context.js' }
+ ]
+ }
+ ]
+ }
+ ]
+};
+export default class Tree extends Component {
+ constructor(props){
+ super(props);
+ this.state = {
+ data,
+ modalAddIsOpen: false,
+ value: "",
+ deleteNode: "",
+ activeNode:{},
+ elToDel: {}
+ };
+ }
+
+ openAddModal = (node) => {
+ this.setState({ modalAddIsOpen: true, activeNode:node });
+ const found = this.state.data.children.filter((data)=> data.name === node.name)
+ console.log(found);
+ // this.findParent(node);
+ }
+ closeModal = () => {
+ this.setState({modalAddIsOpen: false, modalDeleteIsOpen: false});
+ }
+
+ addIcon = (node) => {
+
+ node.map((child, index)=> {
+ const name1 = child.name;
+ (name1.indexOf('.') === -1) ?
+ child.name =
this.selected = selected}>
+
+ {name1} this.openAddModal(child, e)}>
+ this.deleteElement(child, index, e)} className="far fa-trash-alt pl-2">
+
+ : child.name =
+ {name1}
+ this.deleteElement(child, index, e)} className="far fa-trash-alt pl-2">
+
+ if(child.children){
+ this.addIcon(child.children);
+ }
+ })
+ }
+ componentWillMount = () => {
+ this.addIcon(this.state.data.children)
+ }
+
+ // findParent = (item) => {
+ // const data = this.state.data;
+ // let member, i, array;
+ // for (member in data) {
+ // if (data.hasOwnProperty(member) && typeof data[member] === 'object' && data[member] instanceof Array) {
+ // array = data[member];
+ // for(i = 0; i < array.length; i += 1) {
+ // if (array[i] === item) {
+ // console.log(array)
+ // if(array.children){
+ // this.findParent(array[i].children[0])
+ // debugger;
+ // }//
+ // return array;
+ // }
+ // }
+ // }
+ // }
+ // }
+
+ handleSubmit = (e) =>{
+ e.preventDefault();
+ if(this.state.activeNode.children){
+ this.state.activeNode.children.push({name: this.state.value});
+ }
+ const newData = this.state.data;
+ this.setState({data: newData});
+ this.closeModal();
+ }
+ deleteElement = (_,index,e) => {
+ e.preventDefault();
+ console.log(index);
+ const newData = this.state.data.children.splice(index,1);
+ this.setState({data: newData})
+ }
+
+ handleChange(event) {
+ this.setState({value: event.target.value});
+ }
+
+ onToggle = (node, toggled) => {
+ const {cursor, data} = this.state;
+ if (cursor) {
+ this.setState(() => ({cursor, active: false}));
+ }
+ node.active = true;
+ if (node.children) {
+ node.toggled = toggled;
+ }
+ this.setState(() => ({cursor: node, data: Object.assign({}, data)}));
+ }
+ render() {
+ // const {data} = this.state;
+ return (
+
+
+
+
+ {/*
+
+ */}
+
+
+
+ )
+ }
+}
+
+
+const style = {
+ tree: {
+ base: {
+ listStyle: 'none',
+ backgroundColor: '#fff1ff',
+ margin: '10px',
+ padding: '10px',
+ color: '#b00020',
+ fontFamily: 'lucida grande ,tahoma,verdana,arial,sans-serif',
+ fontSize: '18px'
+ },
+ node: {
+ base: {
+ position: 'relative'
+ },
+ link: {
+ cursor: 'pointer',
+ position: 'relative',
+ padding: '10px 5px',
+ display: 'block'
+ },
+ activeLink: {
+ background: '#fff'
+ },
+ toggle: {
+ base: {
+ position: 'relative',
+ display: 'inline-block',
+ verticalAlign: 'top',
+ marginLeft: '-5px',
+ height: '24px',
+ width: '24px'
+ },
+ wrapper: {
+ position: 'absolute',
+ top: '50%',
+ left: '50%',
+ margin: '-9px 0 0 -9px',
+ height: '18px'
+ },
+ height: 14,
+ width: 14,
+ arrow: {
+ fill: '#b00020',
+ strokeWidth: 0
+ }
+ },
+ header: {
+ base: {
+ display: 'inline-block',
+ verticalAlign: 'top',
+ color: '#b00020'
+ },
+ connector: {
+ width: '2px',
+ height: '12px',
+ borderLeft: 'solid 2px black',
+ borderBottom: 'solid 2px black',
+ position: 'absolute',
+ top: '0px',
+ left: '-21px'
+ },
+ title: {
+ lineHeight: '24px',
+ verticalAlign: 'middle'
+ }
+ },
+ subtree: {
+ listStyle: 'none',
+ paddingLeft: '19px'
+ },
+ loading: {
+ color: '#E2C089'
+ }
+ }
+ }
+ };
\ No newline at end of file
diff --git a/src/components/XML.js b/src/components/XML.js
index 54f3ae7..3219af1 100644
--- a/src/components/XML.js
+++ b/src/components/XML.js
@@ -1,9 +1,23 @@
import React, { Component } from 'react'
import 'codemirror/lib/codemirror.css';
import '../App.css'
-import {Controlled as CodeMirror} from 'react-codemirror2'
+import CodeMirror from 'react-codemirror'
import 'codemirror/mode/xml/xml.js'
+import 'codemirror/mode/htmlmixed/htmlmixed'
+import 'codemirror/addon/edit/closetag'
+import 'codemirror/addon/edit/matchtags'
+import 'codemirror/addon/edit/matchbrackets'
+import 'codemirror/addon/edit/closebrackets'
import 'codemirror/theme/dracula.css'
+
+import 'codemirror/keymap/sublime'
+
+import 'codemirror/addon/hint/xml-hint'
+import 'codemirror/addon/hint/show-hint'
+import 'codemirror/addon/hint/show-hint.css'
+
+import 'codemirror/addon/comment/comment'
+
import Hello from './Hello'
@@ -12,14 +26,77 @@ export default class XML extends Component {
super(props);
this.state = {
name: 'CodeMirror',
- code: '🌹💕🐱🚀
: ',
- viewOpToggle : false
+ code: '\n\t\n\n\n\tCtrl+Space\n\n\n\tSublime\n ',
+ viewOpToggle : false,
};
+
}
+ autoComplete = cm => {
+ const codeMirror = this.refs['CodeMirror'].getCodeMirrorInstance();
+ const customTags = {
+ '!top': ['add','hello'],
+ '!attrs': {},
+ 'add': {
+ attrs: {
+ 'id': null
+ },
+ children: ['Student', 'hello']
+ },
+ 'hello': {
+ attrs: {
+ 'id': null
+ },
+ children: ['A-Child']
+ },
+ 'Student': {
+ attrs: {
+ name: null
+ },
+ children: ['A-Child']
+ },
+ 'A-Child': {
+ attrs: {
+ roll_no: null
+ },
+ children: ['marks']
+ },
+ 'marks': {
+ children: [],
+ },
+ };
+
+ const hintOptions = {
+ schemaInfo: customTags,
+ completeSingle: false,
+ completeOnSingleClick: true,
+ matchInMiddle: true
+ };
+ codeMirror.showHint(cm, codeMirror.hint.auto, hintOptions);
+
+ };
+
+ toggleComment = function(cm) {
+ cm.toggleComment({ indent: true });
+ }
+
+ // toggleSelection = cm => {
+ // const {from, to} = this.getSelectedRange(cm);
+ // cm.lineComment(from, to, { indent: true });
+ // }
+
+ indentToggle = (cm) => {
+ cm.execCommand('indentAuto');
+ }
+
+ // getSelectedRange = cm => {
+ // return { from: cm.getCursor(true), to: cm.getCursor(false) };
+ // }
+
updateCode = (newCode) => {
this.setState({
code: newCode,
+ // viewOpToggle: true
});
}
@@ -29,28 +106,39 @@ export default class XML extends Component {
{viewOpToggle: !this.state.viewOpToggle}
)
}
+
render() {
const options = {
lineNumbers: true,
+ tabSize: 2,
matchBrackets: true,
- mode: 'xml',
- theme: 'dracula'
+ mode: 'htmlmixed',
+ theme: 'dracula',
+ autoCloseTags: true,
+ matchTags: true,
+ extraKeys: {
+ "Ctrl-Space": this.autoComplete,
+ "Shift-Alt": this.indentToggle,
+ "Ctrl-Alt": this.toggleComment
+ },
+ autoCloseBrackets: true,
+ keyMap: "sublime"
};
return (
-
-
{
- this.setState({code});
- }}
- />
- Toggle Code Display
- {this.state.viewOpToggle &&
-
- }
-
+
+
To Indent, Select and Shift+Alt
To Comment, Select and Ctrl-Alt
+
Toggle Code Display
+ {/*
Toggle indent
*/}
+ {this.state.viewOpToggle &&
+
+ }
+