Artifact
56911daa5c666121ac25bc9990797f7258799325a17621c1c20240ff6f36e098:
0000: 3c 74 72 65 65 76 69 65 77 3e 0a 0a 20 20 3c 75 <treeview>.. <u
0010: 6c 20 69 64 3d 27 74 72 65 65 76 69 65 77 27 3e l id='treeview'>
0020: 0a 20 20 20 20 3c 6c 69 3e 0a 20 20 20 20 20 20 . <li>.
0030: 3c 74 72 65 65 69 74 65 6d 20 64 61 74 61 3d 7b <treeitem data={
0040: 20 74 72 65 65 64 61 74 61 20 7d 3e 3c 2f 74 72 treedata }></tr
0050: 65 65 69 74 65 6d 3e 0a 20 20 20 20 3c 2f 6c 69 eeitem>. </li
0060: 3e 0a 20 20 3c 2f 75 6c 3e 0a 0a 20 20 3c 73 63 >. </ul>.. <sc
0070: 72 69 70 74 3e 0a 20 20 74 68 69 73 2e 74 72 65 ript>. this.tre
0080: 65 64 61 74 61 20 3d 20 7b 0a 20 20 20 20 6e 61 edata = {. na
0090: 6d 65 3a 20 27 4d 79 20 54 72 65 65 27 2c 0a 20 me: 'My Tree',.
00a0: 20 20 20 6e 6f 64 65 73 3a 20 5b 0a 20 20 20 20 nodes: [.
00b0: 20 20 7b 20 6e 61 6d 65 3a 20 27 68 65 6c 6c 6f { name: 'hello
00c0: 27 20 7d 2c 0a 20 20 20 20 20 20 7b 20 6e 61 6d ' },. { nam
00d0: 65 3a 20 27 77 61 74 27 20 7d 2c 0a 20 20 20 20 e: 'wat' },.
00e0: 20 20 7b 0a 20 20 20 20 20 20 20 20 6e 61 6d 65 {. name
00f0: 3a 20 27 63 68 69 6c 64 20 66 6f 6c 64 65 72 27 : 'child folder'
0100: 2c 0a 20 20 20 20 20 20 20 20 6e 6f 64 65 73 3a ,. nodes:
0110: 20 5b 0a 20 20 20 20 20 20 20 20 20 20 7b 0a 20 [. {.
0120: 20 20 20 20 20 20 20 20 20 20 20 6e 61 6d 65 3a name:
0130: 20 27 63 68 69 6c 64 20 66 6f 6c 64 65 72 27 2c 'child folder',
0140: 0a 20 20 20 20 20 20 20 20 20 20 20 20 6e 6f 64 . nod
0150: 65 73 3a 20 5b 0a 20 20 20 20 20 20 20 20 20 20 es: [.
0160: 20 20 20 20 7b 20 6e 61 6d 65 3a 20 27 68 65 6c { name: 'hel
0170: 6c 6f 27 20 7d 2c 0a 20 20 20 20 20 20 20 20 20 lo' },.
0180: 20 20 20 20 20 7b 20 6e 61 6d 65 3a 20 27 77 61 { name: 'wa
0190: 74 27 20 7d 0a 20 20 20 20 20 20 20 20 20 20 20 t' }.
01a0: 20 5d 0a 20 20 20 20 20 20 20 20 20 20 7d 2c 0a ]. },.
01b0: 20 20 20 20 20 20 20 20 20 20 7b 20 6e 61 6d 65 { name
01c0: 3a 20 27 68 65 6c 6c 6f 27 20 7d 2c 0a 20 20 20 : 'hello' },.
01d0: 20 20 20 20 20 20 20 7b 20 6e 61 6d 65 3a 20 27 { name: '
01e0: 77 61 74 27 20 7d 2c 0a 20 20 20 20 20 20 20 20 wat' },.
01f0: 20 20 7b 0a 20 20 20 20 20 20 20 20 20 20 20 20 {.
0200: 6e 61 6d 65 3a 20 27 63 68 69 6c 64 20 66 6f 6c name: 'child fol
0210: 64 65 72 27 2c 0a 20 20 20 20 20 20 20 20 20 20 der',.
0220: 20 20 6e 6f 64 65 73 3a 20 5b 0a 20 20 20 20 20 nodes: [.
0230: 20 20 20 20 20 20 20 20 20 7b 20 6e 61 6d 65 3a { name:
0240: 20 27 68 65 6c 6c 6f 27 20 7d 2c 0a 20 20 20 20 'hello' },.
0250: 20 20 20 20 20 20 20 20 20 20 7b 20 6e 61 6d 65 { name
0260: 3a 20 27 77 61 74 27 20 7d 0a 20 20 20 20 20 20 : 'wat' }.
0270: 20 20 20 20 20 20 5d 0a 20 20 20 20 20 20 20 20 ].
0280: 20 20 7d 0a 20 20 20 20 20 20 20 20 5d 0a 20 20 }. ].
0290: 20 20 20 20 7d 0a 20 20 20 20 5d 0a 20 20 7d 0a }. ]. }.
02a0: 20 20 3c 2f 73 63 72 69 70 74 3e 0a 3c 2f 74 72 </script>.</tr
02b0: 65 65 76 69 65 77 3e 0a 0a 3c 74 72 65 65 69 74 eeview>..<treeit
02c0: 65 6d 3e 0a 0a 20 20 3c 64 69 76 20 63 6c 61 73 em>.. <div clas
02d0: 73 3d 7b 20 62 6f 6c 64 3a 20 69 73 46 6f 6c 64 s={ bold: isFold
02e0: 65 72 28 29 20 7d 20 6f 6e 63 6c 69 63 6b 3d 7b er() } onclick={
02f0: 20 74 6f 67 67 6c 65 20 7d 20 6f 6e 64 62 6c 63 toggle } ondblc
0300: 6c 69 63 6b 3d 7b 20 63 68 61 6e 67 65 54 79 70 lick={ changeTyp
0310: 65 20 7d 3e 0a 20 20 20 20 7b 20 6e 61 6d 65 20 e }>. { name
0320: 7d 0a 20 20 20 20 3c 73 70 61 6e 20 69 66 3d 7b }. <span if={
0330: 20 69 73 46 6f 6c 64 65 72 28 29 20 7d 3e 5b 7b isFolder() }>[{
0340: 6f 70 65 6e 20 3f 20 27 2d 27 20 3a 20 27 2b 27 open ? '-' : '+'
0350: 7d 5d 3c 2f 73 70 61 6e 3e 0a 20 20 3c 2f 64 69 }]</span>. </di
0360: 76 3e 0a 0a 20 20 3c 21 2d 2d 20 54 4f 44 4f 3a v>.. <!-- TODO:
0370: 20 6e 6f 77 20 69 66 20 69 73 20 69 6d 70 6c 65 now if is imple
0380: 6d 65 6e 74 65 64 20 61 73 20 43 53 53 20 64 69 mented as CSS di
0390: 73 70 6c 61 79 2c 20 73 6f 20 73 68 6f 77 20 6d splay, so show m
03a0: 75 73 74 20 75 73 65 20 69 73 46 6f 6c 64 65 72 ust use isFolder
03b0: 20 61 73 20 77 65 6c 6c 2c 20 77 68 69 63 68 20 as well, which
03c0: 73 68 6f 75 6c 64 20 62 65 20 72 65 6d 6f 76 65 should be remove
03d0: 64 20 2d 2d 3e 0a 0a 20 20 3c 75 6c 20 69 66 3d d -->.. <ul if=
03e0: 7b 20 69 73 46 6f 6c 64 65 72 28 29 20 7d 20 73 { isFolder() } s
03f0: 68 6f 77 3d 7b 20 69 73 46 6f 6c 64 65 72 28 29 how={ isFolder()
0400: 20 26 26 20 6f 70 65 6e 20 7d 3e 0a 20 20 20 20 && open }>.
0410: 3c 6c 69 20 65 61 63 68 3d 7b 20 63 68 69 6c 64 <li each={ child
0420: 2c 20 69 20 69 6e 20 6e 6f 64 65 73 20 7d 3e 0a , i in nodes }>.
0430: 20 20 20 20 20 20 3c 74 72 65 65 69 74 65 6d 20 <treeitem
0440: 64 61 74 61 3d 7b 63 68 69 6c 64 7d 3e 3c 2f 74 data={child}></t
0450: 72 65 65 69 74 65 6d 3e 0a 20 20 20 20 3c 2f 6c reeitem>. </l
0460: 69 3e 0a 20 20 20 20 3c 6c 69 20 6f 6e 63 6c 69 i>. <li oncli
0470: 63 6b 3d 7b 20 61 64 64 43 68 69 6c 64 20 7d 3e ck={ addChild }>
0480: 2b 3c 2f 6c 69 3e 0a 20 20 3c 2f 75 6c 3e 0a 0a +</li>. </ul>..
0490: 20 20 3c 73 63 72 69 70 74 3e 0a 20 20 76 61 72 <script>. var
04a0: 20 73 65 6c 66 20 3d 20 74 68 69 73 0a 20 20 73 self = this. s
04b0: 65 6c 66 2e 6e 61 6d 65 20 3d 20 6f 70 74 73 2e elf.name = opts.
04c0: 64 61 74 61 2e 6e 61 6d 65 0a 20 20 73 65 6c 66 data.name. self
04d0: 2e 6e 6f 64 65 73 20 3d 20 6f 70 74 73 2e 64 61 .nodes = opts.da
04e0: 74 61 2e 6e 6f 64 65 73 0a 0a 20 20 69 73 46 6f ta.nodes.. isFo
04f0: 6c 64 65 72 28 29 20 7b 0a 20 20 20 20 72 65 74 lder() {. ret
0500: 75 72 6e 20 73 65 6c 66 2e 6e 6f 64 65 73 20 26 urn self.nodes &
0510: 26 20 73 65 6c 66 2e 6e 6f 64 65 73 2e 6c 65 6e & self.nodes.len
0520: 67 74 68 0a 20 20 7d 0a 0a 20 20 74 6f 67 67 6c gth. }.. toggl
0530: 65 28 65 29 20 7b 0a 20 20 20 20 73 65 6c 66 2e e(e) {. self.
0540: 6f 70 65 6e 20 3d 20 21 73 65 6c 66 2e 6f 70 65 open = !self.ope
0550: 6e 0a 20 20 7d 0a 0a 20 20 63 68 61 6e 67 65 54 n. }.. changeT
0560: 79 70 65 28 65 29 20 7b 0a 20 20 20 20 69 66 20 ype(e) {. if
0570: 28 21 73 65 6c 66 2e 69 73 46 6f 6c 64 65 72 28 (!self.isFolder(
0580: 29 29 20 7b 0a 20 20 20 20 20 20 73 65 6c 66 2e )) {. self.
0590: 6e 6f 64 65 73 20 3d 20 5b 5d 0a 20 20 20 20 20 nodes = [].
05a0: 20 73 65 6c 66 2e 61 64 64 43 68 69 6c 64 28 29 self.addChild()
05b0: 0a 20 20 20 20 20 20 73 65 6c 66 2e 6f 70 65 6e . self.open
05c0: 20 3d 20 74 72 75 65 0a 20 20 20 20 7d 0a 20 20 = true. }.
05d0: 7d 0a 0a 20 20 61 64 64 43 68 69 6c 64 28 65 29 }.. addChild(e)
05e0: 20 7b 0a 20 20 20 20 73 65 6c 66 2e 6e 6f 64 65 {. self.node
05f0: 73 2e 70 75 73 68 28 7b 0a 20 20 20 20 20 20 6e s.push({. n
0600: 61 6d 65 3a 20 27 6e 65 77 20 73 74 75 66 66 27 ame: 'new stuff'
0610: 0a 20 20 20 20 7d 29 0a 20 20 7d 0a 20 20 3c 2f . }). }. </
0620: 73 63 72 69 70 74 3e 0a 3c 2f 74 72 65 65 69 74 script>.</treeit
0630: 65 6d 3e em>