Artifact
d8d193625870f36a59e604f07722fe6e32d6e90a0456d756211c04ecddfceb34:
0000: 3c 6c 6f 6f 70 2d 69 6e 68 65 72 69 74 3e 0a 20 <loop-inherit>.
0010: 20 3c 64 69 76 20 65 61 63 68 3d 7b 20 69 74 65 <div each={ ite
0020: 6d 2c 20 69 6e 64 65 78 20 69 6e 20 69 74 65 6d m, index in item
0030: 73 7d 20 63 6c 61 73 73 3d 7b 20 61 63 74 69 76 s} class={ activ
0040: 65 3a 20 69 74 65 6d 20 3d 3d 20 27 61 63 74 69 e: item == 'acti
0050: 76 65 27 20 7d 3e 0a 20 20 20 20 3c 6c 6f 6f 70 ve' }>. <loop
0060: 2d 69 6e 68 65 72 69 74 2d 69 74 65 6d 20 69 64 -inherit-item id
0070: 3d 7b 20 69 6e 64 65 78 20 7d 20 72 65 66 3d 7b ={ index } ref={
0080: 20 69 74 65 6d 20 7d 20 6e 61 6d 65 3d 7b 20 69 item } name={ i
0090: 74 65 6d 20 7d 20 6e 69 63 65 3d 7b 20 69 73 46 tem } nice={ isF
00a0: 75 6e 20 7d 20 6f 6e 6d 6f 75 73 65 65 6e 74 65 un } onmouseente
00b0: 72 3d 7b 20 6f 6e 4d 6f 75 73 65 45 6e 74 65 72 r={ onMouseEnter
00c0: 20 7d 3e 3c 2f 6c 6f 6f 70 2d 69 6e 68 65 72 69 }></loop-inheri
00d0: 74 2d 69 74 65 6d 3e 0a 20 20 3c 2f 64 69 76 3e t-item>. </div>
00e0: 0a 0a 20 20 3c 6c 6f 6f 70 2d 69 6e 68 65 72 69 .. <loop-inheri
00f0: 74 2d 6c 69 73 74 20 65 61 63 68 3d 7b 20 69 74 t-list each={ it
0100: 65 6d 20 69 6e 20 69 74 65 6d 73 20 7d 20 69 66 em in items } if
0110: 3d 7b 20 69 74 65 6d 20 21 3d 20 27 6d 65 27 20 ={ item != 'me'
0120: 7d 3e 3c 2f 6c 6f 6f 70 2d 69 6e 68 65 72 69 74 }></loop-inherit
0130: 2d 6c 69 73 74 3e 0a 0a 20 20 3c 6c 6f 6f 70 2d -list>.. <loop-
0140: 69 6e 68 65 72 69 74 2d 69 74 65 6d 20 72 65 66 inherit-item ref
0150: 3d 22 62 6f 68 22 20 6e 61 6d 65 3d 22 62 6f 68 ="boh" name="boh
0160: 22 20 6f 6e 6d 6f 75 73 65 65 6e 74 65 72 3d 7b " onmouseenter={
0170: 20 6f 6e 4d 6f 75 73 65 45 6e 74 65 72 20 7d 3e onMouseEnter }>
0180: 3c 2f 6c 6f 6f 70 2d 69 6e 68 65 72 69 74 2d 69 </loop-inherit-i
0190: 74 65 6d 3e 0a 0a 20 20 3c 62 75 74 74 6f 6e 20 tem>.. <button
01a0: 6f 6e 63 6c 69 63 6b 3d 7b 20 61 64 64 20 7d 3e onclick={ add }>
01b0: 0a 20 20 20 20 61 64 64 0a 20 20 3c 2f 62 75 74 . add. </but
01c0: 74 6f 6e 3e 0a 0a 20 20 3c 62 75 74 74 6f 6e 20 ton>.. <button
01d0: 6f 6e 63 6c 69 63 6b 3d 7b 20 72 65 6d 6f 76 65 onclick={ remove
01e0: 20 7d 3e 0a 20 20 20 20 72 65 6d 6f 76 65 20 73 }>. remove s
01f0: 65 63 6f 6e 64 20 6c 61 73 74 0a 20 20 3c 2f 62 econd last. </b
0200: 75 74 74 6f 6e 3e 0a 0a 20 20 76 61 72 20 77 6f utton>.. var wo
0210: 72 64 73 20 3d 20 5b 27 77 68 61 74 27 2c 20 27 rds = ['what', '
0220: 6f 68 27 2c 20 27 67 6f 6f 64 27 2c 20 27 66 6f oh', 'good', 'fo
0230: 6f 27 2c 20 27 62 61 72 27 5d 0a 0a 20 20 74 68 o', 'bar'].. th
0240: 69 73 2e 69 74 65 6d 73 20 3d 20 5b 0a 20 20 20 is.items = [.
0250: 20 27 6d 65 27 2c 0a 20 20 20 20 27 79 6f 75 27 'me',. 'you'
0260: 2c 0a 20 20 20 20 27 65 76 65 72 79 62 6f 64 79 ,. 'everybody
0270: 27 0a 20 20 5d 0a 0a 20 20 74 68 69 73 2e 69 73 '. ].. this.is
0280: 46 75 6e 20 3d 20 74 72 75 65 0a 0a 20 20 61 64 Fun = true.. ad
0290: 64 28 29 20 7b 0a 20 20 20 20 74 68 69 73 2e 69 d() {. this.i
02a0: 74 65 6d 73 2e 70 75 73 68 28 77 6f 72 64 73 5b tems.push(words[
02b0: 7e 7e 28 4d 61 74 68 2e 72 61 6e 64 6f 6d 28 29 ~~(Math.random()
02c0: 20 2a 20 77 6f 72 64 73 2e 6c 65 6e 67 74 68 29 * words.length)
02d0: 5d 29 0a 20 20 7d 0a 0a 20 20 72 65 6d 6f 76 65 ]). }.. remove
02e0: 28 29 20 7b 0a 20 20 20 20 74 68 69 73 2e 69 74 () {. this.it
02f0: 65 6d 73 2e 73 70 6c 69 63 65 28 74 68 69 73 2e ems.splice(this.
0300: 69 74 65 6d 73 2e 6c 65 6e 67 74 68 20 2d 20 32 items.length - 2
0310: 2c 20 31 29 0a 20 20 7d 0a 0a 20 20 6f 6e 4d 6f , 1). }.. onMo
0320: 75 73 65 45 6e 74 65 72 28 29 20 7b 0a 20 20 20 useEnter() {.
0330: 20 69 66 28 21 74 68 69 73 2e 77 61 73 48 6f 76 if(!this.wasHov
0340: 65 72 65 64 29 20 74 68 69 73 2e 61 64 64 28 29 ered) this.add()
0350: 0a 20 20 20 20 74 68 69 73 2e 77 61 73 48 6f 76 . this.wasHov
0360: 65 72 65 64 20 3d 20 74 72 75 65 0a 20 20 7d 0a ered = true. }.
0370: 0a 3c 2f 6c 6f 6f 70 2d 69 6e 68 65 72 69 74 3e .</loop-inherit>
0380: 0a 0a 3c 6c 6f 6f 70 2d 69 6e 68 65 72 69 74 2d ..<loop-inherit-
0390: 69 74 65 6d 20 6f 6e 63 6c 69 63 6b 3d 7b 20 6f item onclick={ o
03a0: 6e 43 6c 69 63 6b 20 7d 3e 0a 0a 20 20 3c 70 20 nClick }>.. <p
03b0: 63 6c 61 73 73 3d 7b 20 6e 69 63 65 3a 20 6f 70 class={ nice: op
03c0: 74 73 2e 6e 69 63 65 20 7d 3e 7b 20 6c 61 62 65 ts.nice }>{ labe
03d0: 6c 20 7d 20 23 7b 20 69 64 20 7d 3c 2f 70 3e 0a l } #{ id }</p>.
03e0: 0a 20 20 74 68 69 73 2e 6c 61 62 65 6c 20 3d 20 . this.label =
03f0: 6f 70 74 73 2e 6e 61 6d 65 0a 20 20 74 68 69 73 opts.name. this
0400: 2e 69 64 20 3d 20 6f 70 74 73 2e 69 64 0a 0a 20 .id = opts.id..
0410: 20 6f 6e 43 6c 69 63 6b 28 29 20 7b 0a 20 20 20 onClick() {.
0420: 20 74 68 69 73 2e 77 61 73 43 6c 69 63 6b 65 64 this.wasClicked
0430: 20 3d 20 74 72 75 65 0a 20 20 7d 0a 0a 20 20 74 = true. }.. t
0440: 68 69 73 2e 6f 6e 28 27 75 70 64 61 74 65 27 2c his.on('update',
0450: 20 66 75 6e 63 74 69 6f 6e 28 29 20 7b 0a 20 20 function() {.
0460: 20 20 74 68 69 73 2e 6c 61 62 65 6c 20 3d 20 6f this.label = o
0470: 70 74 73 2e 6e 61 6d 65 0a 20 20 20 20 74 68 69 pts.name. thi
0480: 73 2e 69 64 20 3d 20 6f 70 74 73 2e 69 64 0a 20 s.id = opts.id.
0490: 20 7d 29 0a 0a 3c 2f 6c 6f 6f 70 2d 69 6e 68 65 })..</loop-inhe
04a0: 72 69 74 2d 69 74 65 6d 3e 0a 0a 3c 6c 6f 6f 70 rit-item>..<loop
04b0: 2d 69 6e 68 65 72 69 74 2d 6c 69 73 74 3e 0a 20 -inherit-list>.
04c0: 20 3c 6c 6f 6f 70 2d 69 6e 68 65 72 69 74 2d 69 <loop-inherit-i
04d0: 74 65 6d 3e 3c 2f 6c 6f 6f 70 2d 69 6e 68 65 72 tem></loop-inher
04e0: 69 74 2d 69 74 65 6d 3e 0a 3c 2f 6c 6f 6f 70 2d it-item>.</loop-
04f0: 69 6e 68 65 72 69 74 2d 6c 69 73 74 3e 0a inherit-list>.