react-window 2.0.0-alpha.2 → 2.0.0-alpha.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.md +21 -0
- package/dist/react-window.cjs +1 -1
- package/dist/react-window.d.ts +3 -3
- package/dist/react-window.js +262 -256
- package/docs/assets/index-C0dH_qJq.js +67 -0
- package/docs/assets/index-DuD8RcK_.css +1 -0
- package/docs/generated/code-snippets/CellComponent.json +2 -2
- package/docs/generated/code-snippets/FixedHeightList.json +2 -2
- package/docs/generated/code-snippets/FixedHeightRowComponent.json +2 -2
- package/docs/generated/code-snippets/FlexboxLayout.json +2 -2
- package/docs/generated/code-snippets/Grid.json +2 -2
- package/docs/generated/code-snippets/ListVariableRowHeights.json +2 -2
- package/docs/generated/code-snippets/columnWidth.json +2 -2
- package/docs/generated/code-snippets/gridRefClickEventHandler.json +2 -2
- package/docs/generated/code-snippets/listRefClickEventHandler.json +2 -2
- package/docs/generated/code-snippets/rowHeight.json +2 -2
- package/docs/generated/code-snippets/useGridCallbackRef.json +2 -2
- package/docs/generated/code-snippets/useGridRef.json +2 -2
- package/docs/generated/code-snippets/useGridRefImport.json +1 -1
- package/docs/generated/code-snippets/useListCallbackRef.json +2 -2
- package/docs/generated/code-snippets/useListRef.json +2 -2
- package/docs/generated/code-snippets/useListRefImport.json +1 -1
- package/docs/generated/js-docs/Grid.json +43 -27
- package/docs/index.html +2 -2
- package/docs/stats.html +1 -1
- package/package.json +1 -1
- package/docs/assets/index-BMf3NlnJ.css +0 -1
- package/docs/assets/index-BPRxcSBS.js +0 -67
|
@@ -0,0 +1 @@
|
|
|
1
|
+
/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-ease:initial;--tw-text-shadow-color:initial;--tw-text-shadow-alpha:100%}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-300:oklch(80.8% .114 19.571);--color-red-400:oklch(70.4% .191 22.216);--color-red-500:oklch(63.7% .237 25.331);--color-red-800:oklch(44.4% .177 26.899);--color-red-950:oklch(25.8% .092 26.042);--color-orange-400:oklch(75% .183 55.934);--color-amber-400:oklch(82.8% .189 84.429);--color-amber-500:oklch(76.9% .188 70.08);--color-amber-800:oklch(47.3% .137 46.201);--color-amber-950:oklch(27.9% .077 45.635);--color-green-400:oklch(79.2% .209 151.711);--color-emerald-200:oklch(90.5% .093 164.15);--color-emerald-300:oklch(84.5% .143 164.978);--color-emerald-400:oklch(76.5% .177 163.223);--color-emerald-500:oklch(69.6% .17 162.48);--color-emerald-800:oklch(43.2% .095 166.913);--color-emerald-950:oklch(26.2% .051 172.552);--color-teal-300:oklch(85.5% .138 181.071);--color-teal-400:oklch(77.7% .152 181.912);--color-teal-600:oklch(60% .118 184.704);--color-sky-300:oklch(82.8% .111 230.318);--color-sky-400:oklch(74.6% .16 232.661);--color-sky-500:oklch(68.5% .169 237.323);--color-sky-800:oklch(44.3% .11 240.79);--color-sky-950:oklch(29.3% .066 243.157);--color-blue-600:oklch(54.6% .245 262.881);--color-pink-400:oklch(71.8% .202 349.761);--color-pink-500:oklch(65.6% .241 354.308);--color-slate-300:oklch(86.9% .022 252.894);--color-slate-400:oklch(70.4% .04 256.788);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-600:oklch(44.6% .043 257.281);--color-slate-800:oklch(27.9% .041 260.031);--color-gray-400:oklch(70.7% .022 261.325);--color-black:#000;--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-3xl:1.875rem;--text-3xl--line-height: 1.2 ;--text-7xl:4.5rem;--text-7xl--line-height:1;--text-8xl:6rem;--text-8xl--line-height:1;--font-weight-bold:700;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-3xl:1.5rem;--drop-shadow-xs:0 1px 1px #0000000d;--drop-shadow-sm:0 1px 2px #00000026;--ease-in:cubic-bezier(.4,0,1,1);--animate-spin:spin 1s linear infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.\!visible{visibility:visible!important}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-y-0{inset-block:calc(var(--spacing)*0)}.top-0{top:calc(var(--spacing)*0)}.top-2{top:calc(var(--spacing)*2)}.right-0{right:calc(var(--spacing)*0)}.right-2{right:calc(var(--spacing)*2)}.left-0{left:calc(var(--spacing)*0)}.z-10{z-index:10}.z-400{z-index:400}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mx-2{margin-inline:calc(var(--spacing)*2)}.mx-auto{margin-inline:auto}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-2{margin-top:calc(var(--spacing)*2)}.ml-4{margin-left:calc(var(--spacing)*4)}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.size-4{width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.h-0{height:calc(var(--spacing)*0)}.h-2{height:calc(var(--spacing)*2)}.h-4{height:calc(var(--spacing)*4)}.h-6{height:calc(var(--spacing)*6)}.h-7{height:calc(var(--spacing)*7)}.h-8{height:calc(var(--spacing)*8)}.h-9{height:calc(var(--spacing)*9)}.h-12{height:calc(var(--spacing)*12)}.h-50{height:calc(var(--spacing)*50)}.h-55{height:calc(var(--spacing)*55)}.h-full{height:100%}.max-h-50{max-height:calc(var(--spacing)*50)}.w-0{width:calc(var(--spacing)*0)}.w-2{width:calc(var(--spacing)*2)}.w-4{width:calc(var(--spacing)*4)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.w-10{width:calc(var(--spacing)*10)}.w-fit{width:fit-content}.w-full{width:100%}.max-w-350{max-width:calc(var(--spacing)*350)}.flex-1{flex:1}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.shrink-1{flex-shrink:1}.grow{flex-grow:1}.grow-0{flex-grow:0}.grow-1{flex-grow:1}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.animate-spin{animation:var(--animate-spin)}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.resize{resize:both}.list-disc{list-style-type:disc}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-around{justify-content:space-around}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.justify-stretch{justify-content:stretch}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.gap-10{gap:calc(var(--spacing)*10)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-t-3xl{border-top-left-radius:var(--radius-3xl);border-top-right-radius:var(--radius-3xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-none\!{--tw-border-style:none!important;border-style:none!important}.border-amber-400{border-color:var(--color-amber-400)}.border-emerald-400{border-color:var(--color-emerald-400)}.border-red-400{border-color:var(--color-red-400)}.border-sky-400{border-color:var(--color-sky-400)}.border-transparent{border-color:#0000}.border-white\/40{border-color:#fff6}@supports (color:color-mix(in lab,red,red)){.border-white\/40{border-color:color-mix(in oklab,var(--color-white)40%,transparent)}}.border-r-slate-800{border-right-color:var(--color-slate-800)}.bg-amber-400{background-color:var(--color-amber-400)}.bg-black{background-color:var(--color-black)}.bg-black\/10{background-color:#0000001a}@supports (color:color-mix(in lab,red,red)){.bg-black\/10{background-color:color-mix(in oklab,var(--color-black)10%,transparent)}}.bg-black\/30{background-color:#0000004d}@supports (color:color-mix(in lab,red,red)){.bg-black\/30{background-color:color-mix(in oklab,var(--color-black)30%,transparent)}}.bg-black\/40{background-color:#0006}@supports (color:color-mix(in lab,red,red)){.bg-black\/40{background-color:color-mix(in oklab,var(--color-black)40%,transparent)}}.bg-black\/50{background-color:#00000080}@supports (color:color-mix(in lab,red,red)){.bg-black\/50{background-color:color-mix(in oklab,var(--color-black)50%,transparent)}}.bg-black\/90{background-color:#000000e6}@supports (color:color-mix(in lab,red,red)){.bg-black\/90{background-color:color-mix(in oklab,var(--color-black)90%,transparent)}}.bg-emerald-400{background-color:var(--color-emerald-400)}.bg-green-400{background-color:var(--color-green-400)}.bg-orange-400{background-color:var(--color-orange-400)}.bg-red-400{background-color:var(--color-red-400)}.bg-sky-400{background-color:var(--color-sky-400)}.bg-sky-950\/50{background-color:#052f4a80}@supports (color:color-mix(in lab,red,red)){.bg-sky-950\/50{background-color:color-mix(in oklab,var(--color-sky-950)50%,transparent)}}.bg-teal-600{background-color:var(--color-teal-600)}.bg-white\/10{background-color:#ffffff1a}@supports (color:color-mix(in lab,red,red)){.bg-white\/10{background-color:color-mix(in oklab,var(--color-white)10%,transparent)}}.\[mask-image\:linear-gradient\(to_bottom\,transparent\,black_1\.5rem\)\]{-webkit-mask-image:linear-gradient(#0000,#000 1.5rem);mask-image:linear-gradient(#0000,#000 1.5rem)}.fill-blue-600{fill:var(--color-blue-600)}.fill-current{fill:currentColor}.fill-slate-600{fill:var(--color-slate-600)}.fill-white{fill:var(--color-white)}.fill-white\/60{fill:#fff9}@supports (color:color-mix(in lab,red,red)){.fill-white\/60{fill:color-mix(in oklab,var(--color-white)60%,transparent)}}.p-0\!{padding:calc(var(--spacing)*0)!important}.p-1{padding:calc(var(--spacing)*1)}.p-2{padding:calc(var(--spacing)*2)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-1{padding-block:calc(var(--spacing)*1)}.py-2{padding-block:calc(var(--spacing)*2)}.py-4{padding-block:calc(var(--spacing)*4)}.pr-2{padding-right:calc(var(--spacing)*2)}.pl-4{padding-left:calc(var(--spacing)*4)}.pl-8{padding-left:calc(var(--spacing)*8)}.text-left{text-align:left}.indent-\[-1rem\]{text-indent:-1rem}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-7xl{font-size:var(--text-7xl);line-height:var(--tw-leading,var(--text-7xl--line-height))}.text-8xl{font-size:var(--text-8xl);line-height:var(--tw-leading,var(--text-8xl--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.whitespace-pre-wrap{white-space:pre-wrap}.text-amber-800{color:var(--color-amber-800)}.text-black{color:var(--color-black)}.text-emerald-200{color:var(--color-emerald-200)}.text-emerald-300{color:var(--color-emerald-300)}.text-emerald-800{color:var(--color-emerald-800)}.text-gray-400{color:var(--color-gray-400)}.text-red-300{color:var(--color-red-300)}.text-red-800{color:var(--color-red-800)}.text-sky-300{color:var(--color-sky-300)}.text-sky-800{color:var(--color-sky-800)}.text-slate-300{color:var(--color-slate-300)}.text-slate-400{color:var(--color-slate-400)}.text-slate-500{color:var(--color-slate-500)}.text-white{color:var(--color-white)}.text-white\!{color:var(--color-white)!important}.text-white\/50{color:#ffffff80}@supports (color:color-mix(in lab,red,red)){.text-white\/50{color:color-mix(in oklab,var(--color-white)50%,transparent)}}.text-white\/90{color:#ffffffe6}@supports (color:color-mix(in lab,red,red)){.text-white\/90{color:color-mix(in oklab,var(--color-white)90%,transparent)}}.uppercase{text-transform:uppercase}.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-100{opacity:1}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline-2{outline-style:var(--tw-outline-style);outline-width:2px}.outline-transparent{outline-color:#0000}.drop-shadow-sm{--tw-drop-shadow-size:drop-shadow(0 1px 2px var(--tw-drop-shadow-color,#00000026));--tw-drop-shadow:drop-shadow(var(--drop-shadow-sm));filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.drop-shadow-xs{--tw-drop-shadow-size:drop-shadow(0 1px 1px var(--tw-drop-shadow-color,#0000000d));--tw-drop-shadow:drop-shadow(var(--drop-shadow-xs));filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.drop-shadow-black\/20{--tw-drop-shadow-color:#0003}@supports (color:color-mix(in lab,red,red)){.drop-shadow-black\/20{--tw-drop-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-black)20%,transparent)var(--tw-drop-shadow-alpha),transparent)}}.drop-shadow-black\/20{--tw-drop-shadow:var(--tw-drop-shadow-size)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,visibility,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-100{--tw-duration:.1s;transition-duration:.1s}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.text-shadow-black\/20{--tw-text-shadow-color:#0003}@supports (color:color-mix(in lab,red,red)){.text-shadow-black\/20{--tw-text-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-black)20%,transparent)var(--tw-text-shadow-alpha),transparent)}}.text-shadow-sm{text-shadow:0px 1px 0px var(--tw-text-shadow-color,#00000013),0px 1px 1px var(--tw-text-shadow-color,#00000013),0px 2px 2px var(--tw-text-shadow-color,#00000013)}.text-shadow-white\/50{--tw-text-shadow-color:#ffffff80}@supports (color:color-mix(in lab,red,red)){.text-shadow-white\/50{--tw-text-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-white)50%,transparent)var(--tw-text-shadow-alpha),transparent)}}.text-shadow-xs{text-shadow:0px 1px 1px var(--tw-text-shadow-color,#0003)}.group-focus-within\:outline-blue-600:is(:where(.group):focus-within *){outline-color:var(--color-blue-600)}.group-data-hover\:fill-white\/50:is(:where(.group)[data-hover] *){fill:#ffffff80}@supports (color:color-mix(in lab,red,red)){.group-data-hover\:fill-white\/50:is(:where(.group)[data-hover] *){fill:color-mix(in oklab,var(--color-white)50%,transparent)}}.group-data-open\:rotate-90:is(:where(.group)[data-open] *){rotate:90deg}.focus-within\:bg-white\/10:focus-within{background-color:#ffffff1a}@supports (color:color-mix(in lab,red,red)){.focus-within\:bg-white\/10:focus-within{background-color:color-mix(in oklab,var(--color-white)10%,transparent)}}@media (hover:hover){.hover\:bg-amber-500:hover{background-color:var(--color-amber-500)}.hover\:bg-emerald-500:hover{background-color:var(--color-emerald-500)}.hover\:bg-red-500:hover{background-color:var(--color-red-500)}.hover\:bg-sky-500:hover{background-color:var(--color-sky-500)}.hover\:bg-sky-950:hover{background-color:var(--color-sky-950)}.hover\:text-amber-950:hover{color:var(--color-amber-950)}.hover\:text-emerald-950:hover{color:var(--color-emerald-950)}.hover\:text-red-950:hover{color:var(--color-red-950)}.hover\:text-sky-300:hover{color:var(--color-sky-300)}.hover\:text-sky-950:hover{color:var(--color-sky-950)}.hover\:text-white:hover{color:var(--color-white)}}.focus\:border-emerald-300:focus{border-color:var(--color-emerald-300)}.focus\:border-teal-300:focus{border-color:var(--color-teal-300)}.focus\:bg-white\/10:focus{background-color:#ffffff1a}@supports (color:color-mix(in lab,red,red)){.focus\:bg-white\/10:focus{background-color:color-mix(in oklab,var(--color-white)10%,transparent)}}.focus\:text-black:focus{color:var(--color-black)}.data-active\:bg-black[data-active]{background-color:var(--color-black)}.data-active\:text-teal-300[data-active]{color:var(--color-teal-300)}.data-focus\:bg-black[data-focus]{background-color:var(--color-black)}.data-focus\:bg-white\/10[data-focus]{background-color:#ffffff1a}@supports (color:color-mix(in lab,red,red)){.data-focus\:bg-white\/10[data-focus]{background-color:color-mix(in oklab,var(--color-white)10%,transparent)}}.data-focus\:text-teal-300[data-focus]{color:var(--color-teal-300)}.data-selected\:font-bold[data-selected]{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.data-selected\:text-teal-300[data-selected]{color:var(--color-teal-300)}@media (min-width:48rem){.md\:relative{position:relative}.md\:block{display:block}.md\:flex{display:flex}.md\:hidden{display:none}.md\:w-50{width:calc(var(--spacing)*50)}.md\:w-80{width:calc(var(--spacing)*80)}.md\:bg-black\/80{background-color:#000c}@supports (color:color-mix(in lab,red,red)){.md\:bg-black\/80{background-color:color-mix(in oklab,var(--color-black)80%,transparent)}}.md\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}.\[\&_code\]\:text-sky-300 code{color:var(--color-sky-300)}.\[\&_svg\]\:text-amber-400 svg{color:var(--color-amber-400)}.\[\&_svg\]\:text-emerald-400 svg{color:var(--color-emerald-400)}.\[\&_svg\]\:text-red-400 svg{color:var(--color-red-400)}.\[\&_svg\]\:text-sky-400 svg{color:var(--color-sky-400)}.\[\&_svg\]\:text-white\/60 svg{color:#fff9}@supports (color:color-mix(in lab,red,red)){.\[\&_svg\]\:text-white\/60 svg{color:color-mix(in oklab,var(--color-white)60%,transparent)}}}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.5}@media only screen and (max-width:600px){:root{font-size:16px}}:root{color-scheme:dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@keyframes background-gradient-animation{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}#root{background:linear-gradient(-45deg,var(--color-pink-500),var(--color-sky-500),var(--color-emerald-400));background-size:400% 400%;width:100dvw;height:100dvh;animation:20s infinite background-gradient-animation;overflow:auto}*{scrollbar-width:thin;scrollbar-color:#00000080 transparent;outline:none;transition:color .25s,background-color .25s,border-color .25s,outline-color .25s}main a{color:var(--color-teal-400)}main a:hover{color:var(--color-teal-300)}[data-focus]{border:2px solid #0000}[data-focus]:focus{border:2px solid var(--color-teal-300)}[data-focus-within]{border:2px solid #0000}[data-focus-within]:focus-within{border:2px solid var(--color-teal-300)}[data-focus-within][data-focus-within=bold]{border-color:var(--color-teal-600)}[data-focus-within][data-focus-within=bold]:focus-within{border:2px solid var(--color-teal-300)}code{color:var(--color-slate-300)}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-text-shadow-color{syntax:"*";inherits:false}@property --tw-text-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@keyframes spin{to{transform:rotate(360deg)}}.tok-comment{color:var(--color-slate-500)}.tok-keyword{color:var(--color-pink-400)}.tok-operator{color:var(--color-slate-400)}.tok-propertyName{color:var(--color-sky-300)}.tok-punctuation{color:var(--color-slate-400)}.tok-string{color:var(--color-teal-300)}.tok-string2{color:var(--color-sky-300)}.tok-typeName{color:var(--color-pink-400)}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
{
|
|
2
|
-
"javaScript": "<span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-window\"</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><
|
|
3
|
-
"typeScript": "<span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-keyword\">type</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">CellComponentProps</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-window\"</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><
|
|
2
|
+
"javaScript": "<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-window\"</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">CellComponent</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName\">contacts</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-propertyName\">columnIndex</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-propertyName\">rowIndex</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">const</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">address</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-variableName\">contacts</span><span class=\"tok-punctuation\">[</span><span class=\"tok-variableName\">rowIndex</span><span class=\"tok-punctuation\">]</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">const</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">content</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-variableName\">address</span><span class=\"tok-punctuation\">[</span><span class=\"tok-variableName\">indexToColumn</span><span class=\"tok-punctuation\">(</span><span class=\"tok-variableName\">columnIndex</span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">]</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"truncate\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">style</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">content</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span></div>",
|
|
3
|
+
"typeScript": "<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-keyword\">type</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">CellComponentProps</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-window\"</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">CellComponent</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">contacts</span><span class=\"tok-punctuation\">,</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">columnIndex</span><span class=\"tok-punctuation\">,</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">rowIndex</span><span class=\"tok-punctuation\">,</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">style</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">CellComponentProps</span><span class=\"\"><</span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName tok-definition\">contacts</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">Contact</span><span class=\"tok-punctuation\">[</span><span class=\"tok-punctuation\">]</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"\">></span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">const</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">address</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-variableName\">contacts</span><span class=\"tok-punctuation\">[</span><span class=\"tok-variableName\">rowIndex</span><span class=\"tok-punctuation\">]</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">const</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">content</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-variableName\">address</span><span class=\"tok-punctuation\">[</span><span class=\"tok-variableName\">indexToColumn</span><span class=\"tok-punctuation\">(</span><span class=\"tok-variableName\">columnIndex</span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">]</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"truncate\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">style</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">content</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span></div>"
|
|
4
4
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
{
|
|
2
|
-
"javaScript": "<span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">List</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-window\"</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><
|
|
3
|
-
"typeScript": "<span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">List</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-window\"</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><
|
|
2
|
+
"javaScript": "<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">List</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-window\"</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">Example</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName\">names</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">List</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">rowComponent</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">RowComponent</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">rowCount</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">names</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">length</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">rowHeight</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">25</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">rowProps</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName tok-definition\">names</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">/></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span></div>",
|
|
3
|
+
"typeScript": "<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">List</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-window\"</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">Example</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName\">names</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName tok-definition\">names</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">string</span><span class=\"tok-punctuation\">[</span><span class=\"tok-punctuation\">]</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">List</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">rowComponent</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">RowComponent</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">rowCount</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">names</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">length</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">rowHeight</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">25</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">rowProps</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName tok-definition\">names</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">/></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span></div>"
|
|
4
4
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
{
|
|
2
|
-
"javaScript": "<span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-window\"</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><
|
|
3
|
-
"typeScript": "<span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-keyword\">type</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">RowComponentProps</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-window\"</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><
|
|
2
|
+
"javaScript": "<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-window\"</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">RowComponent</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName\">index</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-propertyName\">names</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"flex items-center\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">style</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">names</span><span class=\"tok-punctuation\">[</span><span class=\"tok-variableName\">index</span><span class=\"tok-punctuation\">]</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span></div>",
|
|
3
|
+
"typeScript": "<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-keyword\">type</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">RowComponentProps</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-window\"</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">RowComponent</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">index</span><span class=\"tok-punctuation\">,</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">names</span><span class=\"tok-punctuation\">,</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">style</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">RowComponentProps</span><span class=\"\"><</span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName tok-definition\">names</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">string</span><span class=\"tok-punctuation\">[</span><span class=\"tok-punctuation\">]</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"\">></span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"flex items-center\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">style</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">names</span><span class=\"tok-punctuation\">[</span><span class=\"tok-variableName\">index</span><span class=\"tok-punctuation\">]</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span></div>"
|
|
4
4
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
{
|
|
2
|
-
"javaScript": "<span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">List</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-window\"</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">Example</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName\">addresses</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"h-55 flex flex-col\"</span><span class=\"tok-punctuation\">></span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"flex flex-row items-center gap-2 font-bold bg-teal-600 p-1 px-2\"</span><span class=\"tok-punctuation\">></span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"flex-1\"</span><span class=\"tok-punctuation\">></span><span class=\"\">City</span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"flex-1\"</span><span class=\"tok-punctuation\">></span><span class=\"\">State</span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"w-10\"</span><span class=\"tok-punctuation\">></span><span class=\"\">Zip</span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"overflow-hidden\"</span><span class=\"tok-punctuation\">></span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">List</span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-propertyName\">rowComponent</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">RowComponent</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-propertyName\">rowCount</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">addresses</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">length</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-propertyName\">rowHeight</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">25</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-propertyName\">rowProps</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName tok-definition\">addresses</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-punctuation\">/></span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">RowComponent</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName\">index</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-propertyName\">addresses</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-keyword\">const</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">address</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-variableName\">addresses</span><span class=\"tok-punctuation\">[</span><span class=\"tok-variableName\">index</span><span class=\"tok-punctuation\">]</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"flex flex-row items-center gap-2 px-2\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">style</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">></span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"flex-1\"</span><span class=\"tok-punctuation\">></span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">address</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">city</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"flex-1\"</span><span class=\"tok-punctuation\">></span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">address</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">state</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"w-10 text-xs\"</span><span class=\"tok-punctuation\">></span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">address</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">zip</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-punctuation\">}</span>",
|
|
3
|
-
"typeScript": "<span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">List</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-keyword\">type</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">RowComponentProps</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-window\"</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">Example</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName\">addresses</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName tok-definition\">addresses</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">Address</span><span class=\"tok-punctuation\">[</span><span class=\"tok-punctuation\">]</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"h-55 flex flex-col\"</span><span class=\"tok-punctuation\">></span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"flex flex-row items-center gap-2 font-bold bg-teal-600 p-1 px-2\"</span><span class=\"tok-punctuation\">></span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"flex-1\"</span><span class=\"tok-punctuation\">></span><span class=\"\">City</span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"flex-1\"</span><span class=\"tok-punctuation\">></span><span class=\"\">State</span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"w-10\"</span><span class=\"tok-punctuation\">></span><span class=\"\">Zip</span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"overflow-hidden\"</span><span class=\"tok-punctuation\">></span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">List</span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-propertyName\">rowComponent</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">RowComponent</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-propertyName\">rowCount</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">addresses</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">length</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-propertyName\">rowHeight</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">25</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-propertyName\">rowProps</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName tok-definition\">addresses</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-punctuation\">/></span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">RowComponent</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-propertyName\">index</span><span class=\"tok-punctuation\">,</span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-propertyName\">addresses</span><span class=\"tok-punctuation\">,</span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">RowComponentProps</span><span class=\"\"><</span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-propertyName tok-definition\">addresses</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">Address</span><span class=\"tok-punctuation\">[</span><span class=\"tok-punctuation\">]</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"\">></span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-keyword\">const</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">address</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-variableName\">addresses</span><span class=\"tok-punctuation\">[</span><span class=\"tok-variableName\">index</span><span class=\"tok-punctuation\">]</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"flex flex-row items-center gap-2 px-2\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">style</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">></span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"flex-1\"</span><span class=\"tok-punctuation\">></span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">address</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">city</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"flex-1\"</span><span class=\"tok-punctuation\">></span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">address</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">state</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"w-10 text-xs\"</span><span class=\"tok-punctuation\">></span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">address</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">zip</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span><br/><span class=\"\"> </span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-punctuation\">}</span>"
|
|
2
|
+
"javaScript": "<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">List</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-window\"</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">Example</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName\">addresses</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"h-55 flex flex-col\"</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"flex flex-row items-center gap-2 font-bold bg-teal-600 p-1 px-2\"</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 10ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"flex-1\"</span><span class=\"tok-punctuation\">></span><span class=\"\">City</span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 10ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"flex-1\"</span><span class=\"tok-punctuation\">></span><span class=\"\">State</span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 10ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"w-10\"</span><span class=\"tok-punctuation\">></span><span class=\"\">Zip</span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"overflow-hidden\"</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 10ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">List</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 12ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">rowComponent</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">RowComponent</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 12ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">rowCount</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">addresses</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">length</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 12ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">rowHeight</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">25</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 12ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">rowProps</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName tok-definition\">addresses</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 10ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">/></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">RowComponent</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName\">index</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-propertyName\">addresses</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">const</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">address</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-variableName\">addresses</span><span class=\"tok-punctuation\">[</span><span class=\"tok-variableName\">index</span><span class=\"tok-punctuation\">]</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"flex flex-row items-center gap-2 px-2\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">style</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"flex-1\"</span><span class=\"tok-punctuation\">></span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">address</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">city</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"flex-1\"</span><span class=\"tok-punctuation\">></span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">address</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">state</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"w-10 text-xs\"</span><span class=\"tok-punctuation\">></span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">address</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">zip</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span></div>",
|
|
3
|
+
"typeScript": "<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">List</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-keyword\">type</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">RowComponentProps</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-window\"</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">Example</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName\">addresses</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName tok-definition\">addresses</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">Address</span><span class=\"tok-punctuation\">[</span><span class=\"tok-punctuation\">]</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"h-55 flex flex-col\"</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"flex flex-row items-center gap-2 font-bold bg-teal-600 p-1 px-2\"</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 10ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"flex-1\"</span><span class=\"tok-punctuation\">></span><span class=\"\">City</span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 10ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"flex-1\"</span><span class=\"tok-punctuation\">></span><span class=\"\">State</span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 10ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"w-10\"</span><span class=\"tok-punctuation\">></span><span class=\"\">Zip</span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"overflow-hidden\"</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 10ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">List</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 12ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">rowComponent</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">RowComponent</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 12ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">rowCount</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">addresses</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">length</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 12ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">rowHeight</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">25</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 12ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">rowProps</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName tok-definition\">addresses</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 10ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">/></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">RowComponent</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">index</span><span class=\"tok-punctuation\">,</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">addresses</span><span class=\"tok-punctuation\">,</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">style</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">RowComponentProps</span><span class=\"\"><</span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName tok-definition\">addresses</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">Address</span><span class=\"tok-punctuation\">[</span><span class=\"tok-punctuation\">]</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"\">></span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">const</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">address</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-variableName\">addresses</span><span class=\"tok-punctuation\">[</span><span class=\"tok-variableName\">index</span><span class=\"tok-punctuation\">]</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"flex flex-row items-center gap-2 px-2\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">style</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"flex-1\"</span><span class=\"tok-punctuation\">></span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">address</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">city</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"flex-1\"</span><span class=\"tok-punctuation\">></span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">address</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">state</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"w-10 text-xs\"</span><span class=\"tok-punctuation\">></span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">address</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">zip</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span></div>"
|
|
4
4
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
{
|
|
2
|
-
"javaScript": "<span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">Grid</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-window\"</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><
|
|
3
|
-
"typeScript": "<span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">Grid</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-window\"</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><
|
|
2
|
+
"javaScript": "<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">Grid</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-window\"</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">Example</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName\">contacts</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">Grid</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">cellComponent</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">CellComponent</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">cellProps</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName tok-definition\">contacts</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">columnCount</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">10</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">columnWidth</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">columnWidth</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">rowCount</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">contacts</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">length</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">rowHeight</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">25</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">/></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span></div>",
|
|
3
|
+
"typeScript": "<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">Grid</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-window\"</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">Example</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName\">contacts</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName tok-definition\">contacts</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">Contact</span><span class=\"tok-punctuation\">[</span><span class=\"tok-punctuation\">]</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">Grid</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">cellComponent</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">CellComponent</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">cellProps</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName tok-definition\">contacts</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">columnCount</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">10</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">columnWidth</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">columnWidth</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">rowCount</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">contacts</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">length</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">rowHeight</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">25</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">/></span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span></div>"
|
|
4
4
|
}
|