diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 123ae94d..00000000 --- a/.gitignore +++ /dev/null @@ -1,27 +0,0 @@ -# Logs -logs -*.log - -# Runtime data -pids -*.pid -*.seed - -# Directory for instrumented libs generated by jscoverage/JSCover -lib-cov - -# Coverage directory used by tools like istanbul -coverage - -# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) -.grunt - -# node-waf configuration -.lock-wscript - -# Compiled binary addons (http://nodejs.org/api/addons.html) -build/Release - -# Dependency directory -# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git -node_modules diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index 8af81502..00000000 --- a/.travis.yml +++ /dev/null @@ -1,3 +0,0 @@ -language: node_js -node_js: - - "0.12" \ No newline at end of file diff --git a/LICENSE b/LICENSE deleted file mode 100644 index 6945252b..00000000 --- a/LICENSE +++ /dev/null @@ -1,22 +0,0 @@ -The MIT License (MIT) - -Copyright (c) 2015 pqx Limited - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. - diff --git a/Makefile b/Makefile deleted file mode 100644 index 0964b325..00000000 --- a/Makefile +++ /dev/null @@ -1,7 +0,0 @@ -all: - babel lib --out-dir dist - lessc lib/react-ui-tree.less > dist/react-ui-tree.css - webpack -p -clean: - rm dist/* - rm example/bundle* diff --git a/README.md b/README.md deleted file mode 100644 index bc5406f8..00000000 --- a/README.md +++ /dev/null @@ -1,35 +0,0 @@ -# react-ui-tree [![Build Status](https://travis-ci.org/pqx/react-ui-tree.svg)](https://travis-ci.org/pqx/react-ui-tree) -React tree component - -This project was initially developed for a webpage builder. It maintains an internal tree structure within the component through [js-tree](https://github.com/wangzuo/js-tree). -### Demo -[https://pqx.github.io/react-ui-tree/example](https://pqx.github.io/react-ui-tree/example) -### Installation -``` sh -npm install react-ui-tree --save -``` -### Usage -``` javascript - - -// a sample tree object -// node.children, node.collapsed, node.leaf properties are hardcoded -{ - "module": "react-ui-tree", - "children": [{ - "collapsed": true, - "module": "dist", - "children": [{ - "module": "node.js" - }] - }] -} -``` -check [app.js](https://github.com/pqx/react-ui-tree/blob/gh-pages/example/app.js) for a working example -### License -MIT diff --git a/app.js b/app.js new file mode 100644 index 00000000..121b8e6d --- /dev/null +++ b/app.js @@ -0,0 +1,74 @@ +import '../lib/react-ui-tree.less'; +import './theme.less'; +import './app.less'; +import cx from 'classnames'; +import React, { Component } from 'react'; +import ReactDOM from 'react-dom'; +import Tree from '../lib/react-ui-tree.js'; +import tree from './tree'; +import packageJSON from '../package.json'; + +class App extends Component { + state = { + active: null, + tree: tree + }; + + renderNode = node => { + return ( + + {node.module} + + ); + }; + + onClickNode = node => { + this.setState({ + active: node + }); + }; + + render() { + return ( +
+
+ +
+
+

+ {packageJSON.name} {packageJSON.version} +

+ + 
{JSON.stringify(this.state.tree, null, '  ')}
+
+
+ ); + } + + handleChange = tree => { + this.setState({ + tree: tree + }); + }; + + updateTree = () => { + const { tree } = this.state; + tree.children.push({ module: 'test' }); + this.setState({ + tree: tree + }); + }; +} + +ReactDOM.render(, document.getElementById('app')); diff --git a/example/app.less b/app.less similarity index 100% rename from example/app.less rename to app.less diff --git a/bundle.js b/bundle.js new file mode 100644 index 00000000..5cb7bb4d --- /dev/null +++ b/bundle.js @@ -0,0 +1,7 @@ +!function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/example/",t(t.s=4)}([function(e,t){function n(e,t){var n=e[1]||"",o=e[3];if(!o)return n;if(t&&"function"==typeof btoa){var i=r(o);return[n].concat(o.sources.map(function(e){return"/*# sourceURL="+o.sourceRoot+e+" */"})).concat([i]).join("\n")}return[n].join("\n")}function r(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var r=n(t,e);return t[2]?"@media "+t[2]+"{"+r+"}":r}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var r={},o=0;o=0&&y.splice(t,1)}function s(e){var t=document.createElement("style");return e.attrs.type="text/css",u(t,e.attrs),i(e,t),t}function l(e){var t=document.createElement("link");return e.attrs.type="text/css",e.attrs.rel="stylesheet",u(t,e.attrs),i(e,t),t}function u(e,t){Object.keys(t).forEach(function(n){e.setAttribute(n,t[n])})}function d(e,t){var n,r,o,i;if(t.transform&&e.css){if(!(i=t.transform(e.css)))return function(){};e.css=i}if(t.singleton){var u=b++;n=v||(v=s(t)),r=c.bind(null,n,u,!1),o=c.bind(null,n,u,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=l(t),r=p.bind(null,n,t),o=function(){a(n),n.href&&URL.revokeObjectURL(n.href)}):(n=s(t),r=f.bind(null,n),o=function(){a(n)});return r(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;r(e=t)}else o()}}function c(e,t,n,r){var o=n?"":r.css;if(e.styleSheet)e.styleSheet.cssText=N(t,o);else{var i=document.createTextNode(o),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(i,a[t]):e.appendChild(i)}}function f(e,t){var n=t.css,r=t.media;if(r&&e.setAttribute("media",r),e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}function p(e,t,n){var r=n.css,o=n.sourceMap,i=void 0===t.convertToAbsoluteUrls&&o;(t.convertToAbsoluteUrls||i)&&(r=x(r)),o&&(r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */");var a=new Blob([r],{type:"text/css"}),s=e.href;e.href=URL.createObjectURL(a),s&&URL.revokeObjectURL(s)}var h={},m=function(e){var t;return function(){return void 0===t&&(t=e.apply(this,arguments)),t}}(function(){return window&&document&&document.all&&!window.atob}),g=function(e){var t={};return function(n){return void 0===t[n]&&(t[n]=e.call(this,n)),t[n]}}(function(e){return document.querySelector(e)}),v=null,b=0,y=[],x=n(7);e.exports=function(e,t){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");t=t||{},t.attrs="object"==typeof t.attrs?t.attrs:{},t.singleton||(t.singleton=m()),t.insertInto||(t.insertInto="head"),t.insertAt||(t.insertAt="bottom");var n=o(e,t);return r(n,t),function(e){for(var i=[],a=0;a*{visibility:hidden}.m-node.placeholder{border:1px dashed #ccc}.m-node .inner{position:relative;cursor:pointer;padding-left:10px}.m-node .collapse{position:absolute;left:0;cursor:pointer}.m-node .caret-right:before{content:"\\25B8"}.m-node .caret-down:before{content:"\\25BE"}',""])},function(e,t){e.exports=function(e){var t="undefined"!=typeof window&&window.location;if(!t)throw new Error("fixUrls requires window.location");if(!e||"string"!=typeof e)return e;var n=t.protocol+"//"+t.host,r=n+t.pathname.replace(/\/[^\/]*$/,"/");return e.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi,function(e,t){var o=t.trim().replace(/^"(.*)"$/,function(e,t){return t}).replace(/^'(.*)'$/,function(e,t){return t});if(/^(#|data:|http:\/\/|https:\/\/|file:\/\/\/)/i.test(o))return e;var i;return i=0===o.indexOf("//")?o:0===o.indexOf("/")?n+o:r+o.replace(/^\.\//,""),"url("+JSON.stringify(i)+")"})}},function(e,t,n){var r=n(9);"string"==typeof r&&(r=[[e.i,r,""]]);var o={};o.transform=void 0;n(1)(r,o);r.locals&&(e.exports=r.locals)},function(e,t,n){t=e.exports=n(0)(void 0),t.push([e.i,".tree{position:fixed;top:0;left:0;bottom:0;width:300px;overflow-x:hidden;overflow-y:auto;background-color:#21252b}.m-node.placeholder{border:1px dashed #1385e5}.m-node .inner{color:#9da5b4;font-size:12px;font-family:Menlo}.m-node .node{display:inline-block;width:100%;padding:4px 5px}.m-node .node.is-active{background-color:#31363f}",""])},function(e,t,n){var r=n(11);"string"==typeof r&&(r=[[e.i,r,""]]);var o={};o.transform=void 0;n(1)(r,o);r.locals&&(e.exports=r.locals)},function(e,t,n){t=e.exports=n(0)(void 0),t.push([e.i,"*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body{margin:0;padding:0;font-size:100%}.inspector{margin-left:400px}.inspector pre{font-family:Menlo;font-size:13px}",""])},function(e,t){e.exports=ReactDOM},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var s=function(){function e(e,t){for(var n=0;no&&a.prev){var m=n.getIndex(a.prev).node;m.collapsed||m.leaf||(i=n.move(a.id,a.prev,"append"))}if(i&&(a=i,i.node.collapsed=s,r.id=i.id),h<0){var g=n.getNodeByTop(a.top-1);i=n.move(a.id,g.id,"before")}else if(h>r.h)if(a.next){var v=n.getIndex(a.next);i=v.children&&v.children.length&&!v.node.collapsed?n.move(a.id,a.next,"prepend"):n.move(a.id,a.next,"after")}else{var b=n.getNodeByTop(a.top+a.height);b&&b.parent!==a.id&&(i=b.children&&b.children.length&&!b.node.collapsed?n.move(a.id,b.id,"prepend"):n.move(a.id,b.id,"after"))}i&&(i.node.collapsed=s,r.id=i.id),e.setState({tree:n,dragging:r})},this.dragEnd=function(){e.setState({dragging:{id:null,x:null,y:null,w:null,h:null}}),e.change(e.state.tree),window.removeEventListener("mousemove",e.drag),window.removeEventListener("mouseup",e.dragEnd)},this.change=function(t){e._updated=!0,e.props.onChange&&e.props.onChange(t.obj)},this.toggleCollapse=function(t){var n=e.state.tree,r=n.getIndex(t),o=r.node;o.collapsed=!o.collapsed,n.updateNodesPosition(),e.setState({tree:n}),e.change(n)}};e.exports=g},function(e,t,n){e.exports=n(15)()},function(e,t,n){"use strict";var r=n(16),o=n(17),i=n(18);e.exports=function(){function e(e,t,n,r,a,s){s!==i&&o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t};return n.checkPropTypes=r,n.PropTypes=n,n}},function(e,t,n){"use strict";function r(e){return function(){return e}}var o=function(){};o.thatReturns=r,o.thatReturnsFalse=r(!1),o.thatReturnsTrue=r(!0),o.thatReturnsNull=r(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(e){return e},e.exports=o},function(e,t,n){"use strict";function r(e,t,n,r,i,a,s,l){if(o(t),!e){var u;if(void 0===t)u=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var d=[n,r,i,a,s,l],c=0;u=new Error(t.replace(/%s/g,function(){return d[c++]})),u.name="Invariant Violation"}throw u.framesToPop=1,u}}var o=function(e){};e.exports=r},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,n){"use strict";var r=n(20),o=r.prototype;o.updateNodesPosition=function(){function e(n,r,i,a){var s=1;return n.forEach(function(n){var r=o.getIndex(n);a?(r.top=null,r.left=null):(r.top=t++,r.left=i),r.children&&r.children.length?s+=e(r.children,r,i+1,a||r.node.collapsed):(r.height=1,s+=1)}),r.node.collapsed?r.height=1:r.height=s,r.height}var t=1,n=1,r=this.getIndex(1),o=this;r.top=t++,r.left=n++,r.children&&r.children.length&&e(r.children,r,n,r.node.collapsed)},o.move=function(e,t,n){if(e!==t&&1!==t){var r=this.remove(e),o=null;return"before"===n?o=this.insertBefore(r,t):"after"===n?o=this.insertAfter(r,t):"prepend"===n?o=this.prepend(r,t):"append"===n&&(o=this.append(r,t)),this.updateNodesPosition(),o}},o.getNodeByTop=function(e){var t=this.indexes;for(var n in t)if(t.hasOwnProperty(n)&&t[n].top===e)return t[n]},e.exports=r},function(e,t,n){e.exports=n(21)},function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var i=function(){function e(e,t){for(var n=0;n1&&void 0!==arguments[1]?arguments[1]:"children";o(this,e),this.cnt=1,this.obj=t||r({},n,[]),this.indexes={},this.childNodeName=n,this.build(this.obj)}return i(e,[{key:"build",value:function(e){function t(e,r){var i=[];e.forEach(function(e,a){var s={};s.id=o.cnt,s.node=e,r&&(s.parent=r.id),n[o.cnt+""]=s,i.push(o.cnt),o.cnt++,e[o.childNodeName]&&e[o.childNodeName].length&&t(e[o.childNodeName],s)}),r[o.childNodeName]=i,i.forEach(function(e,t){var r=n[e+""];t>0&&(r.prev=i[t-1]),t0&&(r.prev=e[n-1]),n\n\t// tags it will allow on a page\n\tif (!options.singleton) options.singleton = isOldIE();\n\n\t// By default, add