Artifact
89633e68184cdde0c3a00ecdaf0e009dbf0f677d87d474a091a9d0c67f8762d8:
0000: 0a 3c 72 68 79 74 68 6d 72 6f 6c 6c 3e 0a 0a 20 .<rhythmroll>..
0010: 20 20 20 3c 64 69 76 20 63 6c 61 73 73 3d 22 72 <div class="r
0020: 6f 77 20 6d 74 2d 33 22 3e 0a 20 20 20 20 20 20 ow mt-3">.
0030: 20 20 20 20 20 20 3c 64 69 76 20 63 6c 61 73 73 <div class
0040: 3d 22 63 6f 6c 2d 6d 64 2d 33 22 3e 0a 20 20 20 ="col-md-3">.
0050: 20 20 20 20 20 20 20 20 20 20 20 20 20 3c 69 6e <in
0060: 70 75 74 20 74 79 70 65 3d 22 74 65 78 74 22 20 put type="text"
0070: 63 6c 61 73 73 3d 22 66 6f 72 6d 20 66 6f 72 6d class="form form
0080: 2d 63 6f 6e 74 72 6f 6c 20 6d 74 2d 31 22 20 69 -control mt-1" i
0090: 64 3d 22 70 61 74 74 65 72 6e 2d 7b 70 72 6f 70 d="pattern-{prop
00a0: 73 2e 74 69 7d 22 20 6f 6e 6b 65 79 75 70 3d 7b s.ti}" onkeyup={
00b0: 75 70 64 61 74 65 43 61 6c 6c 7d 20 76 61 6c 75 updateCall} valu
00c0: 65 3d 7b 70 72 6f 70 73 2e 76 7d 20 73 74 79 6c e={props.v} styl
00d0: 65 3d 22 77 69 64 74 68 3a 32 35 30 70 78 22 2f e="width:250px"/
00e0: 3e 0a 20 20 20 20 20 20 20 20 20 20 20 20 3c 2f >. </
00f0: 64 69 76 3e 0a 20 20 20 20 20 20 20 20 20 20 20 div>.
0100: 20 3c 64 69 76 20 63 6c 61 73 73 3d 22 63 6f 6c <div class="col
0110: 2d 6d 64 2d 35 20 6d 74 2d 32 22 3e 0a 20 20 20 -md-5 mt-2">.
0120: 20 20 20 20 20 20 20 20 20 20 20 20 20 3c 64 69 <di
0130: 76 20 73 74 79 6c 65 3d 22 64 69 73 70 6c 61 79 v style="display
0140: 3a 69 6e 6c 69 6e 65 3b 20 62 6f 72 64 65 72 3a :inline; border:
0150: 20 31 70 78 20 64 6f 74 74 65 64 20 62 6c 61 63 1px dotted blac
0160: 6b 3b 66 6f 6e 74 2d 73 69 7a 65 3a 20 31 36 70 k;font-size: 16p
0170: 78 3b 20 70 61 64 64 69 6e 67 3a 20 32 70 78 22 x; padding: 2px"
0180: 0a 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 .
0190: 20 20 20 20 20 65 61 63 68 3d 7b 20 6b 65 79 2c each={ key,
01a0: 20 69 6e 64 65 78 20 69 6e 20 70 61 74 74 65 72 index in patter
01b0: 6e 5f 63 6c 65 61 6e 28 24 28 22 23 70 61 74 74 n_clean($("#patt
01c0: 65 72 6e 2d 22 20 2b 20 70 72 6f 70 73 2e 74 69 ern-" + props.ti
01d0: 29 2e 76 61 6c 28 29 29 2e 73 70 6c 69 74 28 27 ).val()).split('
01e0: 27 29 7d 0a 20 20 20 20 20 20 20 20 20 20 20 20 ')}.
01f0: 20 20 20 20 20 20 20 20 63 6c 61 73 73 3d 22 72 class="r
0200: 6f 6c 6c 2d 7b 69 6e 64 65 78 20 2b 20 31 7d 20 oll-{index + 1}
0210: 72 6f 6c 6c 22 3e 0a 20 20 20 20 20 20 20 20 20 roll">.
0220: 20 20 20 20 20 20 20 20 20 20 20 7b 6b 65 79 7d {key}
0230: 0a 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 .
0240: 20 3c 2f 64 69 76 3e 0a 20 20 20 20 20 20 20 20 </div>.
0250: 20 20 20 20 3c 2f 64 69 76 3e 0a 20 20 20 20 3c </div>. <
0260: 2f 64 69 76 3e 0a 0a 20 20 20 20 3c 73 63 72 69 /div>.. <scri
0270: 70 74 3e 0a 20 20 20 20 20 20 20 20 74 68 69 73 pt>. this
0280: 2e 70 72 6f 70 73 20 3d 20 6f 70 74 73 3b 0a 0a .props = opts;..
0290: 20 20 20 20 20 20 20 20 20 20 20 20 75 70 64 61 upda
02a0: 74 65 43 61 6c 6c 28 29 20 7b 0a 20 20 20 20 20 teCall() {.
02b0: 20 20 20 20 20 20 20 20 20 20 20 74 68 69 73 2e this.
02c0: 75 70 64 61 74 65 28 29 3b 0a 20 20 20 20 20 20 update();.
02d0: 20 20 20 20 20 20 7d 0a 20 20 20 3c 2f 73 63 72 }. </scr
02e0: 69 70 74 3e 0a 0a 3c 2f 72 68 79 74 68 6d 72 6f ipt>..</rhythmro
02f0: 6c 6c 3e 0a ll>.