feat: support vuejs slot and reactjs children

plantain-00 · Nov 3, 2019 · 767afc0 · 767afc0
1 parent eb32d41
commit 767afc0
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 18 deletions.
diff --git a/packages/react/demo/index.tsx b/packages/react/demo/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
-import { Tree, ContextMenuData, getNodeFromPath, EventData, DropData, TreeData, DragTargetData } from '../dist/'
+import { Tree, Node, ContextMenuData, getNodeFromPath, EventData, DropData, TreeData, DragTargetData } from '../dist/'
 import { data, clearSelectionOfTree, toggle, setSelectionOfTree, setParentsSelection, move, canMove, setContextMenu, Value } from 'tree-component/demo/'
 
 const DeleteButton: React.StatelessComponent<{ data: ContextMenuData<Value> }> = props => <button onClick={e => {
@@ -30,6 +30,7 @@ class Main extends React.Component<{}, {
   data8: TreeData<Value>[],
   data9: TreeData<Value>[],
   data10: TreeData<Value>[],
+  data11: TreeData<Value>[],
   dropAllowed: (dropData: DropData<Value>) => boolean,
   dragTarget?: DragTargetData | null
 }> {
@@ -47,6 +48,7 @@ class Main extends React.Component<{}, {
       data8: data8,
       data9: JSON.parse(JSON.stringify(data)),
       data10: JSON.parse(JSON.stringify(data)),
+      data11: JSON.parse(JSON.stringify(data)),
       dropAllowed: canMove
     }
   }
@@ -57,7 +59,7 @@ class Main extends React.Component<{}, {
         <a href='https://github.com/plantain-00/tree-component/tree/master/packages/react/demo' target='_blank'>the source code of the demo</a>
         <br />
         default:
-                <div className='default'>
+          <div className='default'>
           <Tree data={this.state.data}
             toggle={(eventData: EventData<Value>) => this.toggle(eventData)}
             change={(eventData: EventData<Value>) => this.change(eventData)}>
@@ -66,7 +68,7 @@ class Main extends React.Component<{}, {
         selected id: {this.state.selectedId}
         <hr />
         checkbox:
-                <div className='checkbox'>
+          <div className='checkbox'>
           <Tree data={this.state.data2}
             checkbox={true}
             toggle={(eventData: EventData<Value>) => this.toggle2(eventData)}
@@ -75,7 +77,7 @@ class Main extends React.Component<{}, {
         </div>
         <hr />
         draggable:
-                <div className='draggable'>
+          <div className='draggable'>
           <Tree data={this.state.data3}
             draggable={true}
             dropAllowed={this.state.dropAllowed}
@@ -87,7 +89,7 @@ class Main extends React.Component<{}, {
         </div>
         <hr />
         draggable 2:
-                <div className='draggable'>
+          <div className='draggable'>
           <Tree data={this.state.data10}
             draggable={true}
             dropAllowed={this.state.dropAllowed}
@@ -99,31 +101,31 @@ class Main extends React.Component<{}, {
         </div>
         <hr />
         no dots:
-                <div className='no-dots'>
+          <div className='no-dots'>
           <Tree data={this.state.data4}
             nodots={true}
             toggle={(eventData: EventData<Value>) => this.toggle4(eventData)}>
           </Tree>
         </div>
         <hr />
         large:
-                <div className='large'>
+          <div className='large'>
           <Tree data={this.state.data5}
             size='large'
             toggle={(eventData: EventData<Value>) => this.toggle5(eventData)}>
           </Tree>
         </div>
         <hr />
         small:
-                <div className='small'>
+          <div className='small'>
           <Tree data={this.state.data6}
             size='small'
             toggle={(eventData: EventData<Value>) => this.toggle6(eventData)}>
           </Tree>
         </div>
         <hr />
         dark theme:
-                <div className='dark-theme'>
+          <div className='dark-theme'>
           <Tree data={this.state.data7}
             theme='dark'
             checkbox={true}
@@ -135,19 +137,35 @@ class Main extends React.Component<{}, {
         </div>
         <hr />
         contextmenu:
-                <div className='contextmenu'>
+          <div className='contextmenu'>
           <Tree data={this.state.data8}
             toggle={(eventData: EventData<Value>) => this.toggle8(eventData)}>
           </Tree>
         </div>
         <hr />
         node id:
-                <div className='node-id'>
+          <div className='node-id'>
           <Tree data={this.state.data9}
             preid='test_'
             toggle={(eventData: EventData<Value>) => this.toggle9(eventData)}>
           </Tree>
         </div>
+        <hr />
+        children:
+          <div className='children'>
+          <Tree data={this.state.data11}>
+            {this.state.data11.map((child, i) => (
+              <Node data={child}
+                key={i}
+                last={i === this.state.data11.length - 1}
+                path={[i]}
+                root={this.state.data11}
+                parent={this}
+                toggle={(data) => {}}
+                change={(data) => {}}></Node>
+            ))}
+          </Tree>
+        </div>
       </div>
     )
   }

diff --git a/packages/react/src/index.tsx b/packages/react/src/index.tsx
@@ -5,7 +5,7 @@ export * from 'tree-component'
 /**
  * @public
  */
-class Node<T = any> extends React.PureComponent<{
+export class Node<T = any> extends React.PureComponent<{
   data: common.TreeData<T>;
   last: boolean;
   checkbox?: boolean;
@@ -29,8 +29,10 @@ class Node<T = any> extends React.PureComponent<{
   }
 
   render() {
-    let childrenElement: JSX.Element | null
-    if (this.props.data.children) {
+    let childrenElement: JSX.Element | React.ReactNode | null
+    if (this.props.children) {
+      childrenElement = this.props.children
+    } else if (this.props.data.children) {
       const nodesElement: JSX.Element[] = this.props.data.children.map((child, i) => (
         <Node data={child}
           key={i}
@@ -198,7 +200,7 @@ export class Tree<T = any> extends React.PureComponent<{
   private dropTarget: HTMLElement | null = null
 
   render() {
-    const childrenElement = this.props.data.map((child, i) => (
+    const childrenElement = this.props.children || this.props.data.map((child, i) => (
       <Node data={child}
         key={i}
         last={i === this.props.data.length - 1}

diff --git a/packages/vue/demo/index.ts b/packages/vue/demo/index.ts
@@ -120,6 +120,21 @@ Vue.component('custom-node', CustomNode)
             preid="test_"
             @toggle="toggle9($event)"></tree>
         </div>
+        <br/>
+        slot:
+        <div class="slot">
+        <tree :data="data11">
+          <node
+            v-for="(child, i) in data11"
+            :key="i"
+            :data="child"
+            :last="i === data11.length - 1"
+            :path="[i]"
+            :root="data11"
+          >
+          </node>
+        </tree>
+        </div>
     </div>
     `
 })
@@ -135,6 +150,7 @@ class App extends Vue {
   data8 = data8
   data9 = JSON.parse(JSON.stringify(data))
   data10 = JSON.parse(JSON.stringify(data))
+  data11 = JSON.parse(JSON.stringify(data))
   dropAllowed = canMove
   dragTarget: DragTargetData | null = null
 

diff --git a/packages/vue/src/node.template.html b/packages/vue/src/node.template.html
@@ -18,6 +18,7 @@
         </div>
     </a>
     <ul v-if="data.children" role="group" class="tree-children">
+      <slot>
         <node v-for="(child, i) in data.children"
             :key="i"
             :data="child"
@@ -31,5 +32,6 @@
             @toggle="ontoggle($event)"
             @change="onchange($event)">
         </node>
+      </slot>
     </ul>
 </li>
diff --git a/packages/vue/src/tree.template.html b/packages/vue/src/tree.template.html
@@ -6,6 +6,7 @@
         @dragenter="ondragenter($event)"
         @dragleave="ondragleave($event)"
         @drop="ondrop($event)">
+      <slot>
         <node v-for="(child, i) in data"
             :key="i"
             :data="child"
@@ -19,5 +20,6 @@
             @toggle="ontoggle($event)"
             @change="onchange($event)">
         </node>
+      </slot>
     </ul>
-</div>
+</div>
diff --git a/packages/vue/src/variables.ts b/packages/vue/src/variables.ts
@@ -7,11 +7,11 @@
 import { Node, Tree } from "./index"
 
 // @ts-ignore
-export function nodeTemplateHtml(this: Node<any>) {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('li',{class:_vm.nodeClassName,attrs:{"role":"treeitem","id":_vm.id}},[_c('i',{class:_vm.oclClassName,attrs:{"role":"presentation"},on:{"click":function($event){return _vm.ontoggle()}}}),_vm._v(" "),_c('a',{class:_vm.anchorClassName,attrs:{"href":"javascript:void(0)","draggable":_vm.draggable,"data-path":_vm.pathString},on:{"click":function($event){return _vm.onchange()},"dblclick":function($event){return _vm.ontoggle()},"mouseenter":function($event){return _vm.hover(true)},"mouseleave":function($event){return _vm.hover(false)},"contextmenu":function($event){return _vm.oncontextmenu($event)}}},[(_vm.checkbox)?_c('i',{class:_vm.checkboxClassName,staticStyle:{"margin-left":"-5px","margin-right":"-1px"},attrs:{"role":"presentation"}}):_vm._e(),_vm._v(" "),(_vm.data.icon !== false)?_c('i',{class:_vm.iconClassName,staticStyle:{"margin-left":"-5px","margin-right":"-4px"},attrs:{"role":"presentation"}}):_vm._e(),_vm._v(" "),(_vm.data.component)?_c(_vm.data.component,{tag:"component",attrs:{"data":_vm.data}}):[_vm._v(_vm._s(_vm.data.text))],_vm._v(" "),(_vm.hasMarker)?_c('span',{class:_vm.markerClassName},[_vm._v(" ")]):_vm._e(),_vm._v(" "),(_vm.data.contextmenu && _vm.contextmenuVisible)?_c('div',{style:(_vm.contextmenuStyle)},[_c(_vm.data.contextmenu,{tag:"component",attrs:{"data":_vm.contextmenuData}})],1):_vm._e()],2),_vm._v(" "),(_vm.data.children)?_c('ul',{staticClass:"tree-children",attrs:{"role":"group"}},_vm._l((_vm.data.children),function(child,i){return _c('node',{key:i,attrs:{"data":child,"last":i === _vm.data.children.length - 1,"checkbox":_vm.checkbox,"path":_vm.geChildPath(i),"draggable":_vm.draggable,"root":_vm.root,"zindex":_vm.zindex,"preid":_vm.preid},on:{"toggle":function($event){return _vm.ontoggle($event)},"change":function($event){return _vm.onchange($event)}}})}),1):_vm._e()])}
+export function nodeTemplateHtml(this: Node<any>) {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('li',{class:_vm.nodeClassName,attrs:{"role":"treeitem","id":_vm.id}},[_c('i',{class:_vm.oclClassName,attrs:{"role":"presentation"},on:{"click":function($event){return _vm.ontoggle()}}}),_vm._v(" "),_c('a',{class:_vm.anchorClassName,attrs:{"href":"javascript:void(0)","draggable":_vm.draggable,"data-path":_vm.pathString},on:{"click":function($event){return _vm.onchange()},"dblclick":function($event){return _vm.ontoggle()},"mouseenter":function($event){return _vm.hover(true)},"mouseleave":function($event){return _vm.hover(false)},"contextmenu":function($event){return _vm.oncontextmenu($event)}}},[(_vm.checkbox)?_c('i',{class:_vm.checkboxClassName,staticStyle:{"margin-left":"-5px","margin-right":"-1px"},attrs:{"role":"presentation"}}):_vm._e(),_vm._v(" "),(_vm.data.icon !== false)?_c('i',{class:_vm.iconClassName,staticStyle:{"margin-left":"-5px","margin-right":"-4px"},attrs:{"role":"presentation"}}):_vm._e(),_vm._v(" "),(_vm.data.component)?_c(_vm.data.component,{tag:"component",attrs:{"data":_vm.data}}):[_vm._v(_vm._s(_vm.data.text))],_vm._v(" "),(_vm.hasMarker)?_c('span',{class:_vm.markerClassName},[_vm._v(" ")]):_vm._e(),_vm._v(" "),(_vm.data.contextmenu && _vm.contextmenuVisible)?_c('div',{style:(_vm.contextmenuStyle)},[_c(_vm.data.contextmenu,{tag:"component",attrs:{"data":_vm.contextmenuData}})],1):_vm._e()],2),_vm._v(" "),(_vm.data.children)?_c('ul',{staticClass:"tree-children",attrs:{"role":"group"}},[_vm._t("default",_vm._l((_vm.data.children),function(child,i){return _c('node',{key:i,attrs:{"data":child,"last":i === _vm.data.children.length - 1,"checkbox":_vm.checkbox,"path":_vm.geChildPath(i),"draggable":_vm.draggable,"root":_vm.root,"zindex":_vm.zindex,"preid":_vm.preid},on:{"toggle":function($event){return _vm.ontoggle($event)},"change":function($event){return _vm.onchange($event)}}})}))],2):_vm._e()])}
 // @ts-ignore
 export var nodeTemplateHtmlStatic = [  ]
 // @ts-ignore
-export function treeTemplateHtml(this: Tree<any>) {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.rootClassName,attrs:{"role":"tree"}},[_c('ul',{class:_vm.containerClassName,attrs:{"role":"group"},on:{"dragstart":function($event){return _vm.ondragstart($event)},"dragend":function($event){return _vm.ondragend($event)},"dragover":function($event){return _vm.ondragover($event)},"dragenter":function($event){return _vm.ondragenter($event)},"dragleave":function($event){return _vm.ondragleave($event)},"drop":function($event){return _vm.ondrop($event)}}},_vm._l((_vm.data),function(child,i){return _c('node',{key:i,attrs:{"data":child,"last":i === _vm.data.length - 1,"checkbox":_vm.checkbox,"path":[i],"draggable":_vm.draggable,"root":_vm.data,"zindex":_vm.zindex,"preid":_vm.preid},on:{"toggle":function($event){return _vm.ontoggle($event)},"change":function($event){return _vm.onchange($event)}}})}),1)])}
+export function treeTemplateHtml(this: Tree<any>) {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.rootClassName,attrs:{"role":"tree"}},[_c('ul',{class:_vm.containerClassName,attrs:{"role":"group"},on:{"dragstart":function($event){return _vm.ondragstart($event)},"dragend":function($event){return _vm.ondragend($event)},"dragover":function($event){return _vm.ondragover($event)},"dragenter":function($event){return _vm.ondragenter($event)},"dragleave":function($event){return _vm.ondragleave($event)},"drop":function($event){return _vm.ondrop($event)}}},[_vm._t("default",_vm._l((_vm.data),function(child,i){return _c('node',{key:i,attrs:{"data":child,"last":i === _vm.data.length - 1,"checkbox":_vm.checkbox,"path":[i],"draggable":_vm.draggable,"root":_vm.data,"zindex":_vm.zindex,"preid":_vm.preid},on:{"toggle":function($event){return _vm.ontoggle($event)},"change":function($event){return _vm.onchange($event)}}})}))],2)])}
 // @ts-ignore
 export var treeTemplateHtmlStatic = [  ]
 /* eslint-enable */