react-window 2.0.2-alpha.0 → 2.0.2-alpha.1
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/dist/react-window.cjs +1 -1
- package/dist/react-window.cjs.map +1 -1
- package/dist/react-window.d.ts +2270 -9
- package/dist/react-window.js +430 -428
- package/dist/react-window.js.map +1 -1
- package/docs/assets/{AriaRolesRoute-BQ4l2o71.js → AriaRolesRoute-DUJio_Uq.js} +2 -2
- package/docs/assets/{AriaRolesRoute-BQ4l2o71.js.map → AriaRolesRoute-DUJio_Uq.js.map} +1 -1
- package/docs/assets/{AriaRolesRoute-ahe1aw6k.js → AriaRolesRoute-Dsxt70zK.js} +2 -2
- package/docs/assets/{AriaRolesRoute-ahe1aw6k.js.map → AriaRolesRoute-Dsxt70zK.js.map} +1 -1
- package/docs/assets/{AriaRolesRoute-BXnUEUK2.js → AriaRolesRoute-rvLAMJGg.js} +2 -2
- package/docs/assets/{AriaRolesRoute-BXnUEUK2.js.map → AriaRolesRoute-rvLAMJGg.js.map} +1 -1
- package/docs/assets/CellComponent.example-CFiu8zNV.js +2 -0
- package/docs/assets/{CellComponent.example-dKVH8ZYc.js.map → CellComponent.example-CFiu8zNV.js.map} +1 -1
- package/docs/assets/{ComponentProps-BA6jJCAT.js → ComponentProps-BFVtvKZW.js} +2 -2
- package/docs/assets/{ComponentProps-BA6jJCAT.js.map → ComponentProps-BFVtvKZW.js.map} +1 -1
- package/docs/assets/ContinueLink-DMnSPbdx.js +2 -0
- package/docs/assets/{ContinueLink-DN1_wnU9.js.map → ContinueLink-DMnSPbdx.js.map} +1 -1
- package/docs/assets/FixedHeightList-C81qGuc2.js +2 -0
- package/docs/assets/FixedHeightList-C81qGuc2.js.map +1 -0
- package/docs/assets/{FixedRowHeightsRoute-iwoWadtD.js → FixedRowHeightsRoute-BgFMqZ9J.js} +2 -2
- package/docs/assets/FixedRowHeightsRoute-BgFMqZ9J.js.map +1 -0
- package/docs/assets/{FormattedCode-CDzGfhdX.js → FormattedCode-B5NYyy8K.js} +2 -2
- package/docs/assets/{FormattedCode-CDzGfhdX.js.map → FormattedCode-B5NYyy8K.js.map} +1 -1
- package/docs/assets/{GettingStartedRoute-6onVm0dP.js → GettingStartedRoute-OLG6nuHW.js} +2 -2
- package/docs/assets/{GettingStartedRoute-6onVm0dP.js.map → GettingStartedRoute-OLG6nuHW.js.map} +1 -1
- package/docs/assets/Grid-BXEwl59J.js +2 -0
- package/docs/assets/Grid-BXEwl59J.js.map +1 -0
- package/docs/assets/{Header-DyQVANF3.js → Header-B_onM2vR.js} +2 -2
- package/docs/assets/{Header-DyQVANF3.js.map → Header-B_onM2vR.js.map} +1 -1
- package/docs/assets/{HorizontalListsRoute-BQxNRT_F.js → HorizontalListsRoute-YTu4ru_X.js} +2 -2
- package/docs/assets/{HorizontalListsRoute-BQxNRT_F.js.map → HorizontalListsRoute-YTu4ru_X.js.map} +1 -1
- package/docs/assets/{ImperativeApiRoute-ZdLgDzyA.js → ImperativeApiRoute-BxC-VyUh.js} +2 -2
- package/docs/assets/{ImperativeApiRoute-ZdLgDzyA.js.map → ImperativeApiRoute-BxC-VyUh.js.map} +1 -1
- package/docs/assets/{ImperativeApiRoute-DN4crA5x.js → ImperativeApiRoute-D8HOQfr3.js} +2 -2
- package/docs/assets/{ImperativeApiRoute-DN4crA5x.js.map → ImperativeApiRoute-D8HOQfr3.js.map} +1 -1
- package/docs/assets/List-CwFMf7n1.js +2 -0
- package/docs/assets/List-CwFMf7n1.js.map +1 -0
- package/docs/assets/{LoadingSpinner-DXcA8wXA.js → LoadingSpinner-BMzTPwZo.js} +2 -2
- package/docs/assets/{LoadingSpinner-DXcA8wXA.js.map → LoadingSpinner-BMzTPwZo.js.map} +1 -1
- package/docs/assets/{PageNotFound-I9Ugq07H.js → PageNotFound-kFYcmtEM.js} +2 -2
- package/docs/assets/{PageNotFound-I9Ugq07H.js.map → PageNotFound-kFYcmtEM.js.map} +1 -1
- package/docs/assets/{PlatformRequirementsRoute-Mn45V_j9.js → PlatformRequirementsRoute-D2r4s58b.js} +2 -2
- package/docs/assets/{PlatformRequirementsRoute-Mn45V_j9.js.map → PlatformRequirementsRoute-D2r4s58b.js.map} +1 -1
- package/docs/assets/PropsRoute-B_3n6IE5.js +2 -0
- package/docs/assets/{PropsRoute-BzcsHp2c.js.map → PropsRoute-B_3n6IE5.js.map} +1 -1
- package/docs/assets/PropsRoute-CUL_CRSw.js +2 -0
- package/docs/assets/{PropsRoute-CHeNkGKQ.js.map → PropsRoute-CUL_CRSw.js.map} +1 -1
- package/docs/assets/{RTLGridsRoute-RdjRBOG7.js → RTLGridsRoute-BXZTN5aZ.js} +2 -2
- package/docs/assets/{RTLGridsRoute-RdjRBOG7.js.map → RTLGridsRoute-BXZTN5aZ.js.map} +1 -1
- package/docs/assets/{RenderingGridRoute-bkYAfFEg.js → RenderingGridRoute-DjDJX4pV.js} +2 -2
- package/docs/assets/{RenderingGridRoute-bkYAfFEg.js.map → RenderingGridRoute-DjDJX4pV.js.map} +1 -1
- package/docs/assets/ScratchpadRoute-BvmbZ6RR.js +2 -0
- package/docs/assets/{ScratchpadRoute-B8OO7yyx.js.map → ScratchpadRoute-BvmbZ6RR.js.map} +1 -1
- package/docs/assets/{Select-Dtoy3zH8.js → Select-INFvG4Rz.js} +2 -2
- package/docs/assets/{Select-Dtoy3zH8.js.map → Select-INFvG4Rz.js.map} +1 -1
- package/docs/assets/StickyRowsRoute-D9QBSEk_.js +2 -0
- package/docs/assets/StickyRowsRoute-D9QBSEk_.js.map +1 -0
- package/docs/assets/{SupportRoute-Cy6JXaox.js → SupportRoute-DyO6dv_w.js} +2 -2
- package/docs/assets/{SupportRoute-Cy6JXaox.js.map → SupportRoute-DyO6dv_w.js.map} +1 -1
- package/docs/assets/{TabularDataRoute-EbsuxYEq.js → TabularDataRoute-CH8QvWD7.js} +2 -2
- package/docs/assets/{TabularDataRoute-EbsuxYEq.js.map → TabularDataRoute-CH8QvWD7.js.map} +1 -1
- package/docs/assets/{VariableRowHeightsRoute-Bmh2fNYt.js → VariableRowHeightsRoute--1XN3vDI.js} +2 -2
- package/docs/assets/{VariableRowHeightsRoute-Bmh2fNYt.js.map → VariableRowHeightsRoute--1XN3vDI.js.map} +1 -1
- package/docs/assets/{arePropsEqual-Bhv0L31F.js → arePropsEqual-Czc4-HWX.js} +2 -2
- package/docs/assets/{arePropsEqual-Bhv0L31F.js.map → arePropsEqual-Czc4-HWX.js.map} +1 -1
- package/docs/assets/{index-Dfhz9Ad4.js → index-C6NWGx8D.js} +3 -3
- package/docs/assets/index-C6NWGx8D.js.map +1 -0
- package/docs/assets/index-CTUnf-2d.css +1 -0
- package/docs/assets/{useCitiesByState-_PN38xmv.js → useCitiesByState-rFcDxGxC.js} +2 -2
- package/docs/assets/{useCitiesByState-_PN38xmv.js.map → useCitiesByState-rFcDxGxC.js.map} +1 -1
- package/docs/assets/{useContacts-CDDyJV-g.js → useContacts-Bu0Z6ao9.js} +2 -2
- package/docs/assets/{useContacts-CDDyJV-g.js.map → useContacts-Bu0Z6ao9.js.map} +1 -1
- package/docs/generated/code-snippets/FixedHeightList.json +2 -2
- package/docs/generated/code-snippets/FixedHeightRowComponent.json +2 -2
- package/docs/generated/code-snippets/ListWithStickyRows.json +4 -0
- package/docs/generated/js-docs/Grid.json +631 -0
- package/docs/generated/js-docs/List.json +631 -0
- package/docs/index.html +2 -2
- package/docs/stats.html +1 -1
- package/package.json +2 -1
- package/docs/assets/CellComponent.example-dKVH8ZYc.js +0 -2
- package/docs/assets/ContinueLink-DN1_wnU9.js +0 -2
- package/docs/assets/FixedHeightList-HNBwl6P8.js +0 -2
- package/docs/assets/FixedHeightList-HNBwl6P8.js.map +0 -1
- package/docs/assets/FixedRowHeightsRoute-iwoWadtD.js.map +0 -1
- package/docs/assets/Grid-BnGy9pmI.js +0 -2
- package/docs/assets/Grid-BnGy9pmI.js.map +0 -1
- package/docs/assets/List-CsalXuo6.js +0 -2
- package/docs/assets/List-CsalXuo6.js.map +0 -1
- package/docs/assets/PropsRoute-BzcsHp2c.js +0 -2
- package/docs/assets/PropsRoute-CHeNkGKQ.js +0 -2
- package/docs/assets/ScratchpadRoute-B8OO7yyx.js +0 -2
- package/docs/assets/index-DEYagqsv.css +0 -1
- package/docs/assets/index-Dfhz9Ad4.js.map +0 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{j as a,B as n,C as s,E as e}from"./index-Dfhz9Ad4.js";import{c as t}from"./FixedHeightList-HNBwl6P8.js";import{B as o}from"./arePropsEqual-Bhv0L31F.js";import{F as i}from"./FormattedCode-CDzGfhdX.js";import{C as p}from"./ContinueLink-DN1_wnU9.js";import{H as l}from"./Header-DyQVANF3.js";import{L as r}from"./List-CsalXuo6.js";const c=JSON.parse('["Aaden","Aarav","Aaron","Abdiel","Abdullah","Abel","Abraham","Abram","Ace","Achilles","Adam","Adan","Aden","Adonis","Adrian","Adriel","Adrien","Agustin","Ahmad","Ahmed","Aidan","Aiden","Alan","Alaric","Albert","Alberto","Alden","Aldo","Alec","Alejandro","Alessandro","Alex","Alexander","Alexis","Alexzander","Alfonso","Alfred","Alfredo","Ali","Alijah","Alistair","Allan","Allen","Alonso","Alonzo","Alvaro","Alvin","Amari","Ameer","Amir","Amos","Anakin","Anders","Anderson","Andre","Andres","Andrew","Andy","Angel","Angelo","Anson","Anthony","Anton","Antonio","Apollo","Archer","Ares","Ari","Arian","Ariel","Arjun","Arlo","Armando","Armani","Aron","Arthur","Arturo","Aryan","Asa","Asher","Ashton","Atlas","Atticus","August","Augustine","Augustus","Austin","Avery","Avi","Axel","Axl","Axton","Ayaan","Ayan","Ayden","Aydin","Azariah","Barrett","Baylor","Beau","Beckett","Beckham","Ben","Benjamin","Bennett","Benson","Bentlee","Bentley","Benton","Billy","Bishop","Bjorn","Blaine","Blaise","Blake","Blaze","Bo","Bobby","Bodhi","Bodie","Boone","Boston","Bowen","Braden","Bradley","Brady","Brandon","Branson","Brantley","Braxton","Brayan","Brayden","Braydon","Braylen","Braylon","Brayson","Brecken","Brendan","Brenden","Brennan","Brentley","Brett","Brian","Briar","Bridger","Briggs","Brixton","Brock","Brodie","Brody","Bronson","Brooks","Bruce","Bruno","Bryan","Bryant","Bryce","Brycen","Brysen","Bryson","Byron","Cade","Caden","Caiden","Cain","Cairo","Caleb","Callan","Callen","Callum","Calvin","Camden","Camdyn","Cameron","Camilo","Camron","Canaan","Cannon","Carl","Carlos","Carmelo","Carson","Carter","Case","Casen","Casey","Cash","Cason","Caspian","Cassius","Castiel","Cayden","Cayson","Cedric","Cesar","Chad","Chaim","Chance","Chandler","Channing","Charles","Charlie","Chase","Chris","Christian","Christopher","Clark","Clay","Clayton","Clyde","Cody","Coen","Cohen","Colby","Cole","Coleman","Colin","Collin","Colson","Colt","Colten","Colton","Conner","Connor","Conor","Conrad","Cooper","Corbin","Corey","Cory","Craig","Crew","Cristian","Cristiano","Crosby","Cruz","Cullen","Curtis","Cyrus","Dakota","Dallas","Dalton","Damari","Damian","Damien","Damon","Dane","Dangelo","Daniel","Danny","Dante","Darian","Dariel","Dario","Darius","Darrell","Darren","Darwin","Dash","Davian","David","Davion","Davis","Dawson","Dax","Daxton","Dayton","Deacon","Dean","Deandre","Decker","Declan","Demetrius","Dennis","Denver","Derek","Derrick","Desmond","Devin","Devon","Dexter","Diego","Dilan","Dillon","Dimitri","Dominic","Dominick","Dominik","Dominique","Donald","Donovan","Dorian","Douglas","Drake","Draven","Drew","Duke","Duncan","Dustin","Dwayne","Dylan","Eason","Easton","Eddie","Eden","Edgar","Edison","Eduardo","Edward","Edwin","Eli","Elian","Elias","Eliezer","Elijah","Eliseo","Elisha","Elliot","Elliott","Ellis","Emanuel","Emerson","Emery","Emiliano","Emilio","Emmanuel","Emmet","Emmett","Emmitt","Emory","Enoch","Enrique","Enzo","Ephraim","Eric","Erick","Erik","Ernest","Ernesto","Esteban","Ethan","Eugene","Evan","Everett","Ezekiel","Ezequiel","Ezra","Fabian","Felipe","Felix","Fernando","Finley","Finn","Finnegan","Finnley","Fisher","Fletcher","Flynn","Ford","Forrest","Foster","Fox","Francis","Francisco","Franco","Frank","Frankie","Franklin","Frederick","Gabriel","Gael","Gage","Gannon","Garrett","Gary","Gatlin","Gavin","George","Gerald","Gerardo","Giancarlo","Gianluca","Gianni","Gibson","Gideon","Giovanni","Gordon","Grady","Graham","Grant","Graysen","Grayson","Gregory","Grey","Greysen","Greyson","Griffin","Guillermo","Gunnar","Gunner","Gustavo","Hamza","Hank","Harlan","Harley","Harold","Harper","Harrison","Harry","Harvey","Hassan","Hayden","Hayes","Heath","Hector","Hendrix","Henrik","Henry","Hezekiah","Holden","Houston","Howard","Hudson","Hugh","Hugo","Hunter","Huxley","Ian","Ibrahim","Ignacio","Iker","Ira","Isaac","Isaiah","Isaias","Ishaan","Ismael","Israel","Issac","Ivan","Izaiah","Jabari","Jace","Jack","Jackson","Jacob","Jacoby","Jad","Jaden","Jadiel","Jagger","Jaiden","Jaime","Jairo","Jake","Jakob","Jalen","Jamal","Jamari","James","Jameson","Jamie","Jamir","Jamison","Jared","Jase","Jasiah","Jason","Jasper","Javier","Javion","Javon","Jax","Jaxen","Jaxon","Jaxson","Jaxton","Jaxx","Jaxxon","Jay","Jayce","Jayceon","Jayden","Jaylen","Jayson","Jaziel","Jedidiah","Jefferson","Jeffery","Jeffrey","Jensen","Jeremiah","Jeremias","Jeremy","Jermaine","Jerome","Jerry","Jesse","Jessie","Jesus","Jett","Jimmy","Joaquin","Joe","Joel","Joey","Johan","John","Johnathan","Johnny","Jon","Jonah","Jonas","Jonathan","Jordan","Jordy","Jorge","Jose","Joseph","Joshua","Josiah","Josue","Jovanni","Joziah","Juan","Judah","Jude","Judson","Juelz","Julian","Julien","Julio","Julius","Junior","Justice","Justin","Kace","Kade","Kaden","Kai","Kaiden","Kairo","Kaiser","Kaison","Kaleb","Kalel","Kamari","Kamden","Kameron","Kamryn","Kane","Kannon","Kareem","Karson","Karter","Kase","Kasen","Kash","Kashton","Kason","Kayden","Kaysen","Kayson","Keagan","Keanu","Keaton","Keegan","Keenan","Keith","Kellan","Kellen","Kelvin","Kendall","Kendrick","Kenneth","Kenny","Kevin","Khalid","Khalil","Khari","Kian","Kieran","Killian","King","Kingsley","Kingston","Knox","Koa","Kobe","Koda","Kody","Kohen","Kole","Kolten","Kolton","Konnor","Korbin","Kristian","Kristopher","Kye","Kylan","Kyle","Kylen","Kyler","Kyng","Kyree","Kyrie","Kyson","Lachlan","Lamar","Lance","Landen","Landon","Landry","Landyn","Lane","Langston","Larry","Lawrence","Lawson","Layne","Layton","Leandro","Ledger","Lee","Legend","Leif","Leighton","Leland","Lennon","Lennox","Leo","Leon","Leonard","Leonardo","Leonel","Leonidas","Leroy","Levi","Lewis","Liam","Lincoln","Lionel","Lochlan","Logan","London","Lorenzo","Louie","Louis","Luca","Lucas","Lucca","Lucian","Luciano","Luis","Luka","Lukas","Luke","Lyle","Lyric","Mack","Madden","Maddox","Maddux","Magnus","Maison","Major","Makai","Malachi","Malakai","Malcolm","Malik","Manuel","Marc","Marcel","Marcelo","Marco","Marcos","Marcus","Mario","Mark","Markus","Marley","Marlon","Marshall","Martin","Marvin","Mason","Mateo","Mathew","Mathias","Matias","Matteo","Matthew","Matthias","Maurice","Mauricio","Maverick","Max","Maxim","Maximilian","Maximiliano","Maximo","Maximus","Maxton","Maxwell","Mayson","Mekhi","Melvin","Memphis","Merrick","Messiah","Micah","Michael","Micheal","Miguel","Mike","Milan","Miles","Miller","Milo","Misael","Mitchell","Mohamed","Mohammad","Mohammed","Moises","Morgan","Moses","Moshe","Muhammad","Musa","Mustafa","Myles","Nash","Nasir","Nathan","Nathanael","Nathaniel","Nehemiah","Neil","Nelson","Nicholas","Nickolas","Nico","Nicolas","Niko","Nikolai","Nikolas","Nixon","Noah","Noe","Noel","Nolan","Nova","Oakley","Odin","Oliver","Omar","Omari","Orion","Orlando","Oscar","Otis","Otto","Owen","Pablo","Parker","Patrick","Paul","Paxton","Payton","Pedro","Peter","Peyton","Philip","Phillip","Phoenix","Pierce","Porter","Preston","Prince","Princeton","Quentin","Quincy","Quinn","Quinton","Rafael","Raiden","Ramiro","Ramon","Randall","Randy","Raphael","Rashad","Raul","Ray","Rayan","Rayden","Raylan","Raymond","Reagan","Reece","Reed","Reese","Reginald","Reid","Reign","Remington","Remy","Rene","Reuben","Rex","Rey","Reyansh","Rhett","Rhys","Ricardo","Richard","Ricky","Ridge","Riley","River","Robert","Roberto","Rocco","Rocky","Rodney","Rodrigo","Rogelio","Roger","Rohan","Roland","Roman","Romeo","Ronald","Ronan","Ronin","Ronnie","Rory","Rowan","Rowen","Roy","Royal","Royce","Ruben","Rudy","Russell","Ryan","Ryder","Ryker","Rylan","Ryland","Sage","Salvador","Salvatore","Sam","Samir","Samson","Samuel","Santana","Santiago","Santino","Santos","Saul","Sawyer","Scott","Seamus","Sean","Sebastian","Sergio","Seth","Shane","Shaun","Shawn","Shepard","Shepherd","Shiloh","Shmuel","Silas","Simeon","Simon","Sincere","Skylar","Skyler","Solomon","Sonny","Soren","Spencer","Stanley","Stefan","Stephen","Sterling","Stetson","Steven","Sullivan","Sutton","Sylas","Tadeo","Talon","Tanner","Tate","Tatum","Taylor","Terrance","Terrell","Terrence","Terry","Thaddeus","Thatcher","Theo","Theodore","Thiago","Thomas","Timothy","Titan","Titus","Tobias","Toby","Tomas","Tommy","Tony","Trace","Travis","Trent","Trenton","Trevor","Trey","Tripp","Tristan","Tristen","Tristian","Troy","Tucker","Ty","Tyler","Tyson","Ulises","Uriah","Uriel","Valentin","Valentino","Van","Vance","Vaughn","Vicente","Victor","Vihaan","Vincent","Vincenzo","Vivaan","Wade","Walker","Walter","Warren","Waylon","Wayne","Wells","Wesley","Wesson","Westin","Westley","Weston","Wilder","Will","William","Willie","Wilson","Winston","Wyatt","Xander","Xavier","Xzavier","Yadiel","Yahir","Yahya","Yehuda","Yisroel","Yosef","Yousef","Yusuf","Zachariah","Zachary","Zackary","Zahir","Zaid","Zaiden","Zain","Zaire","Zander","Zane","Zavier","Zayd","Zayden","Zayn","Zayne","Zechariah","Zeke","Zion","Zyaire"]'),d={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 justify-between"</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: 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">"text-slate-500 text-xs"</span><span class="tok-punctuation">></span><span class="tok-punctuation">{</span><span class="tok-string2">`</span><span class="tok-punctuation">${</span><span class="tok-variableName">index</span><span class=""> </span><span class="tok-operator">+</span><span class=""> </span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-string2"> of </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="tok-string2">`</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>',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 justify-between"</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: 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">"text-slate-500 text-xs"</span><span class="tok-punctuation">></span><span class="tok-punctuation">{</span><span class="tok-string2">`</span><span class="tok-punctuation">${</span><span class="tok-variableName">index</span><span class=""> </span><span class="tok-operator">+</span><span class=""> </span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-string2"> of </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="tok-string2">`</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>'};function h({index:n,names:s,style:e}){return a.jsxs("div",{className:"flex items-center justify-between",style:e,children:[s[n],a.jsx("div",{className:"text-slate-500 text-xs",children:`${n+1} of ${s.length}`})]})}function u({names:n}){return a.jsx(r,{rowComponent:h,rowCount:n.length,rowHeight:25,rowProps:{names:n}})}function m(){return a.jsxs(n,{direction:"column",gap:4,children:[a.jsx(l,{section:"Lists",title:"Fixed row heights"}),a.jsx("div",{children:"The simplest type of list to render is one with fixed row heights."}),a.jsx(o,{className:"h-50","data-focus-within":"bold",children:a.jsx(u,{names:c})}),a.jsxs("div",{children:["To render this type of list, you need to specify how many rows it contains (",a.jsx("code",{children:"rowCount"}),"), which component should render rows (",a.jsx("code",{children:"rowComponent"}),"), and the height of each row (",a.jsx("code",{children:"rowHeight"}),"):"]}),a.jsx(i,{markdown:t}),a.jsxs("div",{children:["The ",a.jsx("code",{children:"rowProps"})," object can also be used to share between components. Values passed in ",a.jsx("code",{children:"rowProps"})," will also be passed as props to the row component:"]}),a.jsx(i,{markdown:d}),a.jsx(s,{intent:"warning",children:a.jsxs(n,{direction:"column",gap:4,children:[a.jsxs("div",{children:["Lists require vertical space to render rows. Typically the"," ",a.jsx(e,{href:"https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver",children:"ResizeObserver"})," ","API is used to determine how much space there is available within the parent DOM element."]}),a.jsxs("div",{children:["If an explicit height is specified (in pixels) using the"," ",a.jsx("code",{children:"style"})," prop, ",a.jsx("code",{children:"ResizeObserver"})," will not be used."]})]})}),a.jsx(p,{to:"/list/variable-row-height",title:"variable row heights"})]})}export{m as default};
|
|
2
|
-
//# sourceMappingURL=FixedRowHeightsRoute-
|
|
1
|
+
import{j as a,B as n,C as s,E as e}from"./index-C6NWGx8D.js";import{c as t}from"./FixedHeightList-C81qGuc2.js";import{B as o}from"./arePropsEqual-Czc4-HWX.js";import{F as i}from"./FormattedCode-B5NYyy8K.js";import{C as p}from"./ContinueLink-DMnSPbdx.js";import{H as l}from"./Header-B_onM2vR.js";import{L as r}from"./List-CwFMf7n1.js";const c=JSON.parse('["Aaden","Aarav","Aaron","Abdiel","Abdullah","Abel","Abraham","Abram","Ace","Achilles","Adam","Adan","Aden","Adonis","Adrian","Adriel","Adrien","Agustin","Ahmad","Ahmed","Aidan","Aiden","Alan","Alaric","Albert","Alberto","Alden","Aldo","Alec","Alejandro","Alessandro","Alex","Alexander","Alexis","Alexzander","Alfonso","Alfred","Alfredo","Ali","Alijah","Alistair","Allan","Allen","Alonso","Alonzo","Alvaro","Alvin","Amari","Ameer","Amir","Amos","Anakin","Anders","Anderson","Andre","Andres","Andrew","Andy","Angel","Angelo","Anson","Anthony","Anton","Antonio","Apollo","Archer","Ares","Ari","Arian","Ariel","Arjun","Arlo","Armando","Armani","Aron","Arthur","Arturo","Aryan","Asa","Asher","Ashton","Atlas","Atticus","August","Augustine","Augustus","Austin","Avery","Avi","Axel","Axl","Axton","Ayaan","Ayan","Ayden","Aydin","Azariah","Barrett","Baylor","Beau","Beckett","Beckham","Ben","Benjamin","Bennett","Benson","Bentlee","Bentley","Benton","Billy","Bishop","Bjorn","Blaine","Blaise","Blake","Blaze","Bo","Bobby","Bodhi","Bodie","Boone","Boston","Bowen","Braden","Bradley","Brady","Brandon","Branson","Brantley","Braxton","Brayan","Brayden","Braydon","Braylen","Braylon","Brayson","Brecken","Brendan","Brenden","Brennan","Brentley","Brett","Brian","Briar","Bridger","Briggs","Brixton","Brock","Brodie","Brody","Bronson","Brooks","Bruce","Bruno","Bryan","Bryant","Bryce","Brycen","Brysen","Bryson","Byron","Cade","Caden","Caiden","Cain","Cairo","Caleb","Callan","Callen","Callum","Calvin","Camden","Camdyn","Cameron","Camilo","Camron","Canaan","Cannon","Carl","Carlos","Carmelo","Carson","Carter","Case","Casen","Casey","Cash","Cason","Caspian","Cassius","Castiel","Cayden","Cayson","Cedric","Cesar","Chad","Chaim","Chance","Chandler","Channing","Charles","Charlie","Chase","Chris","Christian","Christopher","Clark","Clay","Clayton","Clyde","Cody","Coen","Cohen","Colby","Cole","Coleman","Colin","Collin","Colson","Colt","Colten","Colton","Conner","Connor","Conor","Conrad","Cooper","Corbin","Corey","Cory","Craig","Crew","Cristian","Cristiano","Crosby","Cruz","Cullen","Curtis","Cyrus","Dakota","Dallas","Dalton","Damari","Damian","Damien","Damon","Dane","Dangelo","Daniel","Danny","Dante","Darian","Dariel","Dario","Darius","Darrell","Darren","Darwin","Dash","Davian","David","Davion","Davis","Dawson","Dax","Daxton","Dayton","Deacon","Dean","Deandre","Decker","Declan","Demetrius","Dennis","Denver","Derek","Derrick","Desmond","Devin","Devon","Dexter","Diego","Dilan","Dillon","Dimitri","Dominic","Dominick","Dominik","Dominique","Donald","Donovan","Dorian","Douglas","Drake","Draven","Drew","Duke","Duncan","Dustin","Dwayne","Dylan","Eason","Easton","Eddie","Eden","Edgar","Edison","Eduardo","Edward","Edwin","Eli","Elian","Elias","Eliezer","Elijah","Eliseo","Elisha","Elliot","Elliott","Ellis","Emanuel","Emerson","Emery","Emiliano","Emilio","Emmanuel","Emmet","Emmett","Emmitt","Emory","Enoch","Enrique","Enzo","Ephraim","Eric","Erick","Erik","Ernest","Ernesto","Esteban","Ethan","Eugene","Evan","Everett","Ezekiel","Ezequiel","Ezra","Fabian","Felipe","Felix","Fernando","Finley","Finn","Finnegan","Finnley","Fisher","Fletcher","Flynn","Ford","Forrest","Foster","Fox","Francis","Francisco","Franco","Frank","Frankie","Franklin","Frederick","Gabriel","Gael","Gage","Gannon","Garrett","Gary","Gatlin","Gavin","George","Gerald","Gerardo","Giancarlo","Gianluca","Gianni","Gibson","Gideon","Giovanni","Gordon","Grady","Graham","Grant","Graysen","Grayson","Gregory","Grey","Greysen","Greyson","Griffin","Guillermo","Gunnar","Gunner","Gustavo","Hamza","Hank","Harlan","Harley","Harold","Harper","Harrison","Harry","Harvey","Hassan","Hayden","Hayes","Heath","Hector","Hendrix","Henrik","Henry","Hezekiah","Holden","Houston","Howard","Hudson","Hugh","Hugo","Hunter","Huxley","Ian","Ibrahim","Ignacio","Iker","Ira","Isaac","Isaiah","Isaias","Ishaan","Ismael","Israel","Issac","Ivan","Izaiah","Jabari","Jace","Jack","Jackson","Jacob","Jacoby","Jad","Jaden","Jadiel","Jagger","Jaiden","Jaime","Jairo","Jake","Jakob","Jalen","Jamal","Jamari","James","Jameson","Jamie","Jamir","Jamison","Jared","Jase","Jasiah","Jason","Jasper","Javier","Javion","Javon","Jax","Jaxen","Jaxon","Jaxson","Jaxton","Jaxx","Jaxxon","Jay","Jayce","Jayceon","Jayden","Jaylen","Jayson","Jaziel","Jedidiah","Jefferson","Jeffery","Jeffrey","Jensen","Jeremiah","Jeremias","Jeremy","Jermaine","Jerome","Jerry","Jesse","Jessie","Jesus","Jett","Jimmy","Joaquin","Joe","Joel","Joey","Johan","John","Johnathan","Johnny","Jon","Jonah","Jonas","Jonathan","Jordan","Jordy","Jorge","Jose","Joseph","Joshua","Josiah","Josue","Jovanni","Joziah","Juan","Judah","Jude","Judson","Juelz","Julian","Julien","Julio","Julius","Junior","Justice","Justin","Kace","Kade","Kaden","Kai","Kaiden","Kairo","Kaiser","Kaison","Kaleb","Kalel","Kamari","Kamden","Kameron","Kamryn","Kane","Kannon","Kareem","Karson","Karter","Kase","Kasen","Kash","Kashton","Kason","Kayden","Kaysen","Kayson","Keagan","Keanu","Keaton","Keegan","Keenan","Keith","Kellan","Kellen","Kelvin","Kendall","Kendrick","Kenneth","Kenny","Kevin","Khalid","Khalil","Khari","Kian","Kieran","Killian","King","Kingsley","Kingston","Knox","Koa","Kobe","Koda","Kody","Kohen","Kole","Kolten","Kolton","Konnor","Korbin","Kristian","Kristopher","Kye","Kylan","Kyle","Kylen","Kyler","Kyng","Kyree","Kyrie","Kyson","Lachlan","Lamar","Lance","Landen","Landon","Landry","Landyn","Lane","Langston","Larry","Lawrence","Lawson","Layne","Layton","Leandro","Ledger","Lee","Legend","Leif","Leighton","Leland","Lennon","Lennox","Leo","Leon","Leonard","Leonardo","Leonel","Leonidas","Leroy","Levi","Lewis","Liam","Lincoln","Lionel","Lochlan","Logan","London","Lorenzo","Louie","Louis","Luca","Lucas","Lucca","Lucian","Luciano","Luis","Luka","Lukas","Luke","Lyle","Lyric","Mack","Madden","Maddox","Maddux","Magnus","Maison","Major","Makai","Malachi","Malakai","Malcolm","Malik","Manuel","Marc","Marcel","Marcelo","Marco","Marcos","Marcus","Mario","Mark","Markus","Marley","Marlon","Marshall","Martin","Marvin","Mason","Mateo","Mathew","Mathias","Matias","Matteo","Matthew","Matthias","Maurice","Mauricio","Maverick","Max","Maxim","Maximilian","Maximiliano","Maximo","Maximus","Maxton","Maxwell","Mayson","Mekhi","Melvin","Memphis","Merrick","Messiah","Micah","Michael","Micheal","Miguel","Mike","Milan","Miles","Miller","Milo","Misael","Mitchell","Mohamed","Mohammad","Mohammed","Moises","Morgan","Moses","Moshe","Muhammad","Musa","Mustafa","Myles","Nash","Nasir","Nathan","Nathanael","Nathaniel","Nehemiah","Neil","Nelson","Nicholas","Nickolas","Nico","Nicolas","Niko","Nikolai","Nikolas","Nixon","Noah","Noe","Noel","Nolan","Nova","Oakley","Odin","Oliver","Omar","Omari","Orion","Orlando","Oscar","Otis","Otto","Owen","Pablo","Parker","Patrick","Paul","Paxton","Payton","Pedro","Peter","Peyton","Philip","Phillip","Phoenix","Pierce","Porter","Preston","Prince","Princeton","Quentin","Quincy","Quinn","Quinton","Rafael","Raiden","Ramiro","Ramon","Randall","Randy","Raphael","Rashad","Raul","Ray","Rayan","Rayden","Raylan","Raymond","Reagan","Reece","Reed","Reese","Reginald","Reid","Reign","Remington","Remy","Rene","Reuben","Rex","Rey","Reyansh","Rhett","Rhys","Ricardo","Richard","Ricky","Ridge","Riley","River","Robert","Roberto","Rocco","Rocky","Rodney","Rodrigo","Rogelio","Roger","Rohan","Roland","Roman","Romeo","Ronald","Ronan","Ronin","Ronnie","Rory","Rowan","Rowen","Roy","Royal","Royce","Ruben","Rudy","Russell","Ryan","Ryder","Ryker","Rylan","Ryland","Sage","Salvador","Salvatore","Sam","Samir","Samson","Samuel","Santana","Santiago","Santino","Santos","Saul","Sawyer","Scott","Seamus","Sean","Sebastian","Sergio","Seth","Shane","Shaun","Shawn","Shepard","Shepherd","Shiloh","Shmuel","Silas","Simeon","Simon","Sincere","Skylar","Skyler","Solomon","Sonny","Soren","Spencer","Stanley","Stefan","Stephen","Sterling","Stetson","Steven","Sullivan","Sutton","Sylas","Tadeo","Talon","Tanner","Tate","Tatum","Taylor","Terrance","Terrell","Terrence","Terry","Thaddeus","Thatcher","Theo","Theodore","Thiago","Thomas","Timothy","Titan","Titus","Tobias","Toby","Tomas","Tommy","Tony","Trace","Travis","Trent","Trenton","Trevor","Trey","Tripp","Tristan","Tristen","Tristian","Troy","Tucker","Ty","Tyler","Tyson","Ulises","Uriah","Uriel","Valentin","Valentino","Van","Vance","Vaughn","Vicente","Victor","Vihaan","Vincent","Vincenzo","Vivaan","Wade","Walker","Walter","Warren","Waylon","Wayne","Wells","Wesley","Wesson","Westin","Westley","Weston","Wilder","Will","William","Willie","Wilson","Winston","Wyatt","Xander","Xavier","Xzavier","Yadiel","Yahir","Yahya","Yehuda","Yisroel","Yosef","Yousef","Yusuf","Zachariah","Zachary","Zackary","Zahir","Zaid","Zaiden","Zain","Zaire","Zander","Zane","Zavier","Zayd","Zayden","Zayn","Zayne","Zechariah","Zeke","Zion","Zyaire"]'),d={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">li</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"flex items-center justify-between"</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: 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">"text-slate-500 text-xs"</span><span class="tok-punctuation">></span><span class="tok-punctuation">{</span><span class="tok-string2">`</span><span class="tok-punctuation">${</span><span class="tok-variableName">index</span><span class=""> </span><span class="tok-operator">+</span><span class=""> </span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-string2"> of </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="tok-string2">`</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">li</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>',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">li</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"flex items-center justify-between"</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: 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">"text-slate-500 text-xs"</span><span class="tok-punctuation">></span><span class="tok-punctuation">{</span><span class="tok-string2">`</span><span class="tok-punctuation">${</span><span class="tok-variableName">index</span><span class=""> </span><span class="tok-operator">+</span><span class=""> </span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-string2"> of </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="tok-string2">`</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">li</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>'};function h({index:n,names:s,style:e}){return a.jsxs("li",{className:"flex items-center justify-between",style:e,children:[s[n],a.jsx("div",{className:"text-slate-500 text-xs",children:`${n+1} of ${s.length}`})]})}function u({names:n}){return a.jsx(r,{rowComponent:h,rowCount:n.length,rowHeight:25,rowProps:{names:n},tagName:"ul"})}function m(){return a.jsxs(n,{direction:"column",gap:4,children:[a.jsx(l,{section:"Lists",title:"Fixed row heights"}),a.jsx("div",{children:"The simplest type of list to render is one with fixed row heights."}),a.jsx(o,{className:"h-50","data-focus-within":"bold",children:a.jsx(u,{names:c})}),a.jsxs("div",{children:["To render this type of list, you need to specify how many rows it contains (",a.jsx("code",{children:"rowCount"}),"), which component should render rows (",a.jsx("code",{children:"rowComponent"}),"), and the height of each row (",a.jsx("code",{children:"rowHeight"}),"):"]}),a.jsx(i,{markdown:t}),a.jsxs("div",{children:["The ",a.jsx("code",{children:"rowProps"})," object can also be used to share between components. Values passed in ",a.jsx("code",{children:"rowProps"})," will also be passed as props to the row component:"]}),a.jsx(i,{markdown:d}),a.jsx(s,{intent:"warning",children:a.jsxs(n,{direction:"column",gap:4,children:[a.jsxs("div",{children:["Lists require vertical space to render rows. Typically the"," ",a.jsx(e,{href:"https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver",children:"ResizeObserver"})," ","API is used to determine how much space there is available within the parent DOM element."]}),a.jsxs("div",{children:["If an explicit height is specified (in pixels) using the"," ",a.jsx("code",{children:"style"})," prop, ",a.jsx("code",{children:"ResizeObserver"})," will not be used."]})]})}),a.jsx(p,{to:"/list/variable-row-height",title:"variable row heights"})]})}export{m as default};
|
|
2
|
+
//# sourceMappingURL=FixedRowHeightsRoute-BgFMqZ9J.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FixedRowHeightsRoute-BgFMqZ9J.js","sources":["../../src/routes/list/examples/FixedHeightRowComponent.example.tsx","../../src/routes/list/examples/FixedHeightList.example.tsx","../../src/routes/list/FixedRowHeightsRoute.tsx"],"sourcesContent":["import { type RowComponentProps } from \"react-window\";\n\nfunction RowComponent({\n index,\n names,\n style\n}: RowComponentProps<{\n names: string[];\n}>) {\n return (\n <li className=\"flex items-center justify-between\" style={style}>\n {names[index]}\n <div className=\"text-slate-500 text-xs\">{`${index + 1} of ${names.length}`}</div>\n </li>\n );\n}\n\n// <end>\n\nexport { RowComponent };\n","import { RowComponent } from \"./FixedHeightRowComponent.example\";\n\n// <begin>\n\nimport { List } from \"react-window\";\n\nfunction Example({ names }: { names: string[] }) {\n return (\n <List\n rowComponent={RowComponent}\n rowCount={names.length}\n rowHeight={25}\n rowProps={{ names }}\n tagName=\"ul\"\n />\n );\n}\n\n// <end>\n\nexport { Example };\n","import json from \"../../../public/data/names.json\";\nimport FixedHeightListMarkdown from \"../../../public/generated/code-snippets/FixedHeightList.json\";\nimport FixedHeightRowComponentMarkdown from \"../../../public/generated/code-snippets/FixedHeightRowComponent.json\";\nimport { Block } from \"../../components/Block\";\nimport { Box } from \"../../components/Box\";\nimport { Callout } from \"../../components/Callout\";\nimport { FormattedCode } from \"../../components/code/FormattedCode\";\nimport { ContinueLink } from \"../../components/ContinueLink\";\nimport { ExternalLink } from \"../../components/ExternalLink\";\nimport { Header } from \"../../components/Header\";\nimport { Example } from \"./examples/FixedHeightList.example\";\n\nexport default function FixedRowHeightsRoute() {\n return (\n <Box direction=\"column\" gap={4}>\n <Header section=\"Lists\" title=\"Fixed row heights\" />\n <div>\n The simplest type of list to render is one with fixed row heights.\n </div>\n <Block className=\"h-50\" data-focus-within=\"bold\">\n <Example names={json} />\n </Block>\n <div>\n To render this type of list, you need to specify how many rows it\n contains (<code>rowCount</code>), which component should render rows (\n <code>rowComponent</code>), and the height of each row (\n <code>rowHeight</code>):\n </div>\n <FormattedCode markdown={FixedHeightListMarkdown} />\n <div>\n The <code>rowProps</code> object can also be used to share between\n components. Values passed in <code>rowProps</code> will also be passed\n as props to the row component:\n </div>\n <FormattedCode markdown={FixedHeightRowComponentMarkdown} />\n <Callout intent=\"warning\">\n <Box direction=\"column\" gap={4}>\n <div>\n Lists require vertical space to render rows. Typically the{\" \"}\n <ExternalLink href=\"https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver\">\n ResizeObserver\n </ExternalLink>{\" \"}\n API is used to determine how much space there is available within\n the parent DOM element.\n </div>\n <div>\n If an explicit height is specified (in pixels) using the{\" \"}\n <code>style</code> prop, <code>ResizeObserver</code> will not be\n used.\n </div>\n </Box>\n </Callout>\n <ContinueLink\n to=\"/list/variable-row-height\"\n title=\"variable row heights\"\n />\n </Box>\n );\n}\n"],"names":["RowComponent","index","names","style","jsxs","className","children","jsx","length","Example","List","rowComponent","rowCount","rowHeight","rowProps","tagName","FixedRowHeightsRoute","Box","direction","gap","Header","section","title","Block","json","FormattedCode","markdown","FixedHeightListMarkdown","FixedHeightRowComponentMarkdown","Callout","intent","ExternalLink","href","ContinueLink","to"],"mappings":"45kBAEA,SAASA,GAAaC,MACpBA,EAAAC,MACAA,EAAAC,MACAA,IAIA,SACEC,KAAC,KAAA,CAAGC,UAAU,oCAAoCF,QAC/CG,SAAA,CAAAJ,EAAMD,GACPM,EAAAA,IAAC,MAAA,CAAIF,UAAU,yBAA0BC,SAAA,GAAGL,EAAQ,QAAQC,EAAMM,aAGxE,CCTA,SAASC,GAAQP,MAAEA,IACjB,OACEK,EAAAA,IAACG,EAAA,CACCC,aAAcX,EACdY,SAAUV,EAAMM,OAChBK,UAAW,GACXC,SAAU,CAAEZ,SACZa,QAAQ,MAGd,CCJA,SAAwBC,IACtB,OACEZ,EAAAA,KAACa,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3Bb,SAAA,CAAAC,EAAAA,IAACa,EAAA,CAAOC,QAAQ,QAAQC,MAAM,wBAC9Bf,IAAC,OAAID,SAAA,yEAGLC,IAACgB,EAAA,CAAMlB,UAAU,OAAO,oBAAkB,OACxCC,SAAAC,EAAAA,IAACE,EAAA,CAAQP,MAAOsB,aAEjB,MAAA,CAAIlB,SAAA,CAAA,iFAEOC,IAAC,QAAKD,SAAA,aAAe,4CAC/BC,IAAC,QAAKD,SAAA,iBAAmB,oCACzBC,IAAC,QAAKD,SAAA,cAAgB,UAExBC,IAACkB,EAAA,CAAcC,SAAUC,WACxB,MAAA,CAAIrB,SAAA,CAAA,SACCC,IAAC,QAAKD,SAAA,aAAe,4EACIC,IAAC,QAAKD,SAAA,aAAe,2DAGpDC,IAACkB,EAAA,CAAcC,SAAUE,IACzBrB,EAAAA,IAACsB,GAAQC,OAAO,UACdxB,gBAACW,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3Bb,SAAA,CAAAF,OAAC,MAAA,CAAIE,SAAA,CAAA,6DACwD,IAC3DC,EAAAA,IAACwB,EAAA,CAAaC,KAAK,kEAAkE1B,SAAA,mBAErE,IAAI,sGAIrB,MAAA,CAAIA,SAAA,CAAA,2DACsD,MACzDC,IAAC,QAAKD,SAAA,UAAY,YAAOC,IAAC,QAAKD,SAAA,mBAAqB,6BAK1DC,EAAAA,IAAC0B,EAAA,CACCC,GAAG,4BACHZ,MAAM,2BAId"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,j as t,c as r}from"./index-
|
|
2
|
-
//# sourceMappingURL=FormattedCode-
|
|
1
|
+
import{r as e,j as t,c as r}from"./index-C6NWGx8D.js";function n({className:e="",html:n}){return t.jsx("code",{className:r("text-xs md:text-sm block text-left whitespace-pre-wrap text-white! rounded-md p-3 bg-black","flex flex-col",e),dangerouslySetInnerHTML:{__html:n}})}function s({markdown:s}){const[a,l]=function(t,r){const[n,s]=e.useState(()=>{const e=localStorage.getItem(t);return null!=e?JSON.parse(e):r}),a=e.useRef({prevValue:null,value:JSON.stringify(n)});return e.useLayoutEffect(()=>{a.current.prevValue=a.current.value,a.current.value=JSON.stringify(n)}),e.useLayoutEffect(()=>{const e=e=>{t===e.key&&e.newValue&&e.newValue!==JSON.stringify(n)&&s(JSON.parse(e.newValue))};return window.addEventListener("storage",e),()=>{window.removeEventListener("storage",e)}},[t,n]),e.useLayoutEffect(()=>{window.dispatchEvent(new StorageEvent("storage",{key:t,newValue:a.current.value||"",oldValue:a.current.prevValue||""})),localStorage.setItem(t,a.current.value)},[t,n]),[n,s]}("CodeTabs::tab",!0);if("html"in s)return t.jsx(n,{html:s.html});const o=t.jsx(n,{html:a?s.typeScript??s.javaScript:s.javaScript});return s.typeScript?t.jsxs("div",{className:"relative",children:[o,t.jsxs("button",{className:r("absolute top-2 right-2 p-1 rounded-sm bg-white/10 cursor-pointer hover:text-sky-300 hover:bg-sky-950 text-xs flex flex-row items-center gap-1",{"text-white/50":!a,"text-sky-300 bg-sky-950/50":a}),onClick:()=>l(!a),children:[a?"TS":"JS",t.jsx("div",{className:r("w-2 h-2 rounded",{"bg-green-400":a,"bg-orange-400":!a})})]})]}):o}export{s as F};
|
|
2
|
+
//# sourceMappingURL=FormattedCode-B5NYyy8K.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormattedCode-
|
|
1
|
+
{"version":3,"file":"FormattedCode-B5NYyy8K.js","sources":["../../src/components/code/Code.tsx","../../src/components/code/FormattedCode.tsx","../../src/hooks/useLocalStorage.ts"],"sourcesContent":["import { cn } from \"../../utils/cn\";\nimport \"./code-mirror.css\";\n\nexport function Code({\n className = \"\",\n html\n}: {\n className?: string;\n html: string;\n}) {\n return (\n <code\n className={cn(\n \"text-xs md:text-sm block text-left whitespace-pre-wrap text-white! rounded-md p-3 bg-black\",\n \"flex flex-col\",\n className\n )}\n dangerouslySetInnerHTML={{ __html: html }}\n />\n );\n}\n","import useLocalStorage from \"../../hooks/useLocalStorage\";\nimport { cn } from \"../../utils/cn\";\nimport { Code } from \"./Code\";\n\ntype Markdown =\n | {\n javaScript: string;\n typeScript?: string;\n }\n | {\n html: string;\n };\n\nexport function FormattedCode({ markdown }: { markdown: Markdown }) {\n const [ts, setTS] = useLocalStorage(\"CodeTabs::tab\", true);\n\n if (\"html\" in markdown) {\n return <Code html={markdown.html} />;\n }\n\n const code = (\n <Code\n html={\n ts ? (markdown.typeScript ?? markdown.javaScript) : markdown.javaScript\n }\n />\n );\n\n if (!markdown.typeScript) {\n return code;\n }\n\n return (\n <div className=\"relative\">\n {code}\n <button\n className={cn(\n \"absolute top-2 right-2 p-1 rounded-sm bg-white/10 cursor-pointer hover:text-sky-300 hover:bg-sky-950 text-xs flex flex-row items-center gap-1\",\n {\n \"text-white/50\": !ts,\n \"text-sky-300 bg-sky-950/50\": ts\n }\n )}\n onClick={() => setTS(!ts)}\n >\n {ts ? \"TS\" : \"JS\"}\n <div\n className={cn(\"w-2 h-2 rounded\", {\n \"bg-green-400\": ts,\n \"bg-orange-400\": !ts\n })}\n />\n </button>\n </div>\n );\n}\n","import { useLayoutEffect, useRef, useState } from \"react\";\n\nexport default function useLocalStorage<Type>(\n key: string,\n defaultValue: Type\n): [value: Type, setValue: (newValue: Type) => void] {\n const [value, setValue] = useState<Type>(() => {\n const storedValue = localStorage.getItem(key);\n if (storedValue != null) {\n return JSON.parse(storedValue) as Type;\n } else {\n return defaultValue;\n }\n });\n\n const committedValuesRef = useRef<{\n prevValue: string | null;\n value: string;\n }>({\n prevValue: null,\n value: JSON.stringify(value)\n });\n useLayoutEffect(() => {\n committedValuesRef.current.prevValue = committedValuesRef.current.value;\n committedValuesRef.current.value = JSON.stringify(value);\n });\n\n // Sync changes from local storage\n useLayoutEffect(() => {\n const onStorage = (event: StorageEvent) => {\n if (\n key === event.key &&\n event.newValue &&\n event.newValue !== JSON.stringify(value)\n ) {\n setValue(JSON.parse(event.newValue));\n }\n };\n\n window.addEventListener(\"storage\", onStorage);\n\n return () => {\n window.removeEventListener(\"storage\", onStorage);\n };\n }, [key, value]);\n\n // Sync changes to local storage\n useLayoutEffect(() => {\n window.dispatchEvent(\n new StorageEvent(\"storage\", {\n key,\n newValue: committedValuesRef.current.value || \"\",\n oldValue: committedValuesRef.current.prevValue || \"\"\n })\n );\n\n localStorage.setItem(key, committedValuesRef.current.value);\n }, [key, value]);\n\n return [value, setValue];\n}\n"],"names":["Code","className","html","jsx","cn","dangerouslySetInnerHTML","__html","FormattedCode","markdown","ts","setTS","key","defaultValue","value","setValue","useState","storedValue","localStorage","getItem","JSON","parse","committedValuesRef","useRef","prevValue","stringify","useLayoutEffect","current","onStorage","event","newValue","window","addEventListener","removeEventListener","dispatchEvent","StorageEvent","oldValue","setItem","useLocalStorage","code","typeScript","javaScript","jsxs","children","onClick"],"mappings":"sDAGO,SAASA,GAAKC,UACnBA,EAAY,GAAAC,KACZA,IAKA,OACEC,EAAAA,IAAC,OAAA,CACCF,UAAWG,EACT,6FACA,gBACAH,GAEFI,wBAAyB,CAAEC,OAAQJ,IAGzC,CCPO,SAASK,GAAcC,SAAEA,IAC9B,MAAOC,EAAIC,GCZb,SACEC,EACAC,GAEA,MAAOC,EAAOC,GAAYC,EAAAA,SAAe,KACvC,MAAMC,EAAcC,aAAaC,QAAQP,GACzC,OAAmB,MAAfK,EACKG,KAAKC,MAAMJ,GAEXJ,IAILS,EAAqBC,EAAAA,OAGxB,CACDC,UAAW,KACXV,MAAOM,KAAKK,UAAUX,KAuCxB,OArCAY,EAAAA,gBAAgB,KACdJ,EAAmBK,QAAQH,UAAYF,EAAmBK,QAAQb,MAClEQ,EAAmBK,QAAQb,MAAQM,KAAKK,UAAUX,KAIpDY,EAAAA,gBAAgB,KACd,MAAME,EAAaC,IAEfjB,IAAQiB,EAAMjB,KACdiB,EAAMC,UACND,EAAMC,WAAaV,KAAKK,UAAUX,IAElCC,EAASK,KAAKC,MAAMQ,EAAMC,YAM9B,OAFAC,OAAOC,iBAAiB,UAAWJ,GAE5B,KACLG,OAAOE,oBAAoB,UAAWL,KAEvC,CAAChB,EAAKE,IAGTY,EAAAA,gBAAgB,KACdK,OAAOG,cACL,IAAIC,aAAa,UAAW,CAC1BvB,MACAkB,SAAUR,EAAmBK,QAAQb,OAAS,GAC9CsB,SAAUd,EAAmBK,QAAQH,WAAa,MAItDN,aAAamB,QAAQzB,EAAKU,EAAmBK,QAAQb,QACpD,CAACF,EAAKE,IAEF,CAACA,EAAOC,EACjB,CD9CsBuB,CAAgB,iBAAiB,GAErD,GAAI,SAAU7B,EACZ,SAAOL,IAACH,EAAA,CAAKE,KAAMM,EAASN,OAG9B,MAAMoC,EACJnC,EAAAA,IAACH,EAAA,CACCE,KACEO,EAAMD,EAAS+B,YAAc/B,EAASgC,WAAchC,EAASgC,aAKnE,OAAKhC,EAAS+B,aAKZE,KAAC,MAAA,CAAIxC,UAAU,WACZyC,SAAA,CAAAJ,EACDG,EAAAA,KAAC,SAAA,CACCxC,UAAWG,EACT,gJACA,CACE,iBAAkBK,EAClB,6BAA8BA,IAGlCkC,QAAS,IAAMjC,GAAOD,GAErBiC,SAAA,CAAAjC,EAAK,KAAO,KACbN,EAAAA,IAAC,MAAA,CACCF,UAAWG,EAAG,kBAAmB,CAC/B,eAAgBK,EAChB,iBAAkBA,YApBnB6B,CA0BX"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{j as e,B as s,E as i,C as t,L as l}from"./index-
|
|
2
|
-
//# sourceMappingURL=GettingStartedRoute-
|
|
1
|
+
import{j as e,B as s,E as i,C as t,L as l}from"./index-C6NWGx8D.js";import{H as o}from"./Header-B_onM2vR.js";function r(){return e.jsxs(s,{direction:"column",gap:4,children:[e.jsx(o,{title:"Getting started"}),e.jsxs("div",{children:[e.jsx("strong",{children:"react-window"})," is a component library that helps render large lists of data quickly and without the performance problems that often go along with rendering a lot of data. It's used in a lot of places, from"," ",e.jsx(i,{href:"https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en",children:"React DevTools"})," ","to the"," ",e.jsx(i,{href:"https://github.com/replayio/devtools",children:"Replay browser"}),"."]}),e.jsx("div",{className:"text-xl",children:"Installation"}),e.jsx("div",{children:"Begin by installing the library from NPM:"}),e.jsxs("code",{className:"grow text-xs md:text-sm block text-left whitespace-pre-wrap rounded-md p-3 bg-black text-white!",children:["npm install ",e.jsx("span",{className:"tok-keyword",children:"react-window"})]}),e.jsxs(t,{intent:"primary",children:["TypeScript definitions are included within the published"," ",e.jsx("code",{children:"dist"})," folder and documentation is included within the"," ",e.jsx("code",{children:"docs"})," folder."]}),e.jsx("div",{children:"This library provides two basic types of components; choose one below to learn more:"}),e.jsxs("ul",{className:"pl-8",children:[e.jsxs("li",{className:"list-disc",children:[e.jsx(l,{to:"/list/fixed-row-height",children:"Lists"})," (vertical scrolling)"]}),e.jsxs("li",{className:"list-disc",children:[e.jsx(l,{to:"/grid/grid",children:"Grids"})," (horizontal and vertical scrolling)"]})]}),e.jsxs("div",{children:["Check out the ",e.jsx(l,{to:"/support",children:"support page"})," if you need help."]})]})}export{r as default};
|
|
2
|
+
//# sourceMappingURL=GettingStartedRoute-OLG6nuHW.js.map
|
package/docs/assets/{GettingStartedRoute-6onVm0dP.js.map → GettingStartedRoute-OLG6nuHW.js.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GettingStartedRoute-
|
|
1
|
+
{"version":3,"file":"GettingStartedRoute-OLG6nuHW.js","sources":["../../src/routes/GettingStartedRoute.tsx"],"sourcesContent":["import { Box } from \"../components/Box\";\nimport { Callout } from \"../components/Callout\";\nimport { ExternalLink } from \"../components/ExternalLink\";\nimport { Header } from \"../components/Header\";\nimport { Link } from \"../components/Link\";\n\nexport default function GettingStartedRoute() {\n return (\n <Box direction=\"column\" gap={4}>\n <Header title=\"Getting started\" />\n <div>\n <strong>react-window</strong> is a component library that helps render\n large lists of data quickly and without the performance problems that\n often go along with rendering a lot of data. It's used in a lot of\n places, from{\" \"}\n <ExternalLink href=\"https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en\">\n React DevTools\n </ExternalLink>{\" \"}\n to the{\" \"}\n <ExternalLink href=\"https://github.com/replayio/devtools\">\n Replay browser\n </ExternalLink>\n .\n </div>\n <div className=\"text-xl\">Installation</div>\n <div>Begin by installing the library from NPM:</div>\n <code className=\"grow text-xs md:text-sm block text-left whitespace-pre-wrap rounded-md p-3 bg-black text-white!\">\n npm install <span className=\"tok-keyword\">react-window</span>\n </code>\n <Callout intent=\"primary\">\n TypeScript definitions are included within the published{\" \"}\n <code>dist</code> folder and documentation is included within the{\" \"}\n <code>docs</code> folder.\n </Callout>\n <div>\n This library provides two basic types of components; choose one below to\n learn more:\n </div>\n <ul className=\"pl-8\">\n <li className=\"list-disc\">\n <Link to=\"/list/fixed-row-height\">Lists</Link> (vertical scrolling)\n </li>\n <li className=\"list-disc\">\n <Link to=\"/grid/grid\">Grids</Link> (horizontal and vertical scrolling)\n </li>\n </ul>\n <div>\n Check out the <Link to=\"/support\">support page</Link> if you need help.\n </div>\n </Box>\n );\n}\n"],"names":["GettingStartedRoute","jsxs","Box","direction","gap","children","jsx","Header","title","ExternalLink","href","className","Callout","intent","Link","to"],"mappings":"6GAMA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,GAAAC,IAACC,EAAA,CAAOC,MAAM,2BACb,MAAA,CACCH,SAAA,GAAAC,IAAC,UAAOD,SAAA,iBAAqB,kMAGhB,IACbC,EAAAA,IAACG,EAAA,CAAaC,KAAK,wGAAwGL,SAAA,mBAE3G,IAAI,SACb,IACPC,EAAAA,IAACG,EAAA,CAAaC,KAAK,uCAAuCL,SAAA,mBAE3C,OAGjBC,EAAAA,IAAC,MAAA,CAAIK,UAAU,UAAUN,SAAA,mBACzBC,IAAC,OAAID,SAAA,gDACLJ,KAAC,OAAA,CAAKU,UAAU,kGAAkGN,SAAA,CAAA,eACpGC,EAAAA,IAAC,OAAA,CAAKK,UAAU,cAAcN,SAAA,sBAE5CJ,KAACW,EAAA,CAAQC,OAAO,UAAUR,SAAA,CAAA,2DACiC,MACzDC,IAAC,QAAKD,SAAA,SAAW,mDAAiD,MAClEC,IAAC,QAAKD,SAAA,SAAW,gBAEnBC,IAAC,OAAID,SAAA,2FAILJ,KAAC,KAAA,CAAGU,UAAU,OACZN,SAAA,GAAAJ,KAAC,KAAA,CAAGU,UAAU,YACZN,SAAA,CAAAC,EAAAA,IAACQ,EAAA,CAAKC,GAAG,yBAAyBV,SAAA,UAAY,6BAEhDJ,KAAC,KAAA,CAAGU,UAAU,YACZN,SAAA,CAAAC,EAAAA,IAACQ,EAAA,CAAKC,GAAG,aAAaV,SAAA,UAAY,oDAGrC,MAAA,CAAIA,SAAA,CAAA,iBACWC,EAAAA,IAACQ,EAAA,CAAKC,GAAG,WAAWV,SAAA,iBAAmB,0BAI7D"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,j as o}from"./index-C6NWGx8D.js";import{u as t,a as n,b as l}from"./arePropsEqual-Czc4-HWX.js";function r({cellComponent:r,cellProps:i,children:s,className:a,columnCount:c,columnWidth:d,defaultHeight:u=0,defaultWidth:f=0,dir:m,gridRef:x,onCellsRendered:h,onResize:p,overscanCount:g=3,rowCount:v,rowHeight:w,style:I,tagName:S="div",...C}){const z=t(i),T=e.useMemo(()=>e.memo(r,n),[r]),[E,b]=e.useState(null),y=function(o,t){const[n,l]=e.useState("rtl"===t);return e.useLayoutEffect(()=>{o&&(t||l(function(e){let o=e;for(;o;){if(o.dir)return"rtl"===o.dir;o=o.parentElement}return!1}(o)))},[t,o]),n}(E,m),{getCellBounds:O,getEstimatedSize:R,startIndex:j,scrollToIndex:H,stopIndex:P}=l({containerElement:E,defaultContainerSize:f,direction:"horizontal",isRtl:y,itemCount:c,itemProps:z,itemSize:d,onResize:p,overscanCount:g}),{getCellBounds:A,getEstimatedSize:L,startIndex:N,scrollToIndex:W,stopIndex:B}=l({containerElement:E,defaultContainerSize:u,direction:"vertical",itemCount:v,itemProps:z,itemSize:w,onResize:p,overscanCount:g});e.useImperativeHandle(x,()=>({get element(){return E},scrollToCell({behavior:e="auto",columnAlign:o="auto",columnIndex:t,rowAlign:n="auto",rowIndex:l}){const r=H({align:o,containerScrollOffset:E?.scrollLeft??0,index:t}),i=W({align:n,containerScrollOffset:E?.scrollTop??0,index:l});"function"==typeof E?.scrollTo&&E.scrollTo({behavior:e,left:r,top:i})},scrollToColumn({align:e="auto",behavior:o="auto",index:t}){const n=H({align:e,containerScrollOffset:E?.scrollLeft??0,index:t});"function"==typeof E?.scrollTo&&E.scrollTo({behavior:o,left:n})},scrollToRow({align:e="auto",behavior:o="auto",index:t}){const n=W({align:e,containerScrollOffset:E?.scrollTop??0,index:t});"function"==typeof E?.scrollTo&&E.scrollTo({behavior:o,top:n})}}),[E,H,W]),e.useEffect(()=>{j>=0&&P>=0&&N>=0&&B>=0&&h&&h({columnStartIndex:j,columnStopIndex:P,rowStartIndex:N,rowStopIndex:B})},[h,j,P,N,B]);const G=e.useMemo(()=>{const t=[];if(c>0&&v>0)for(let n=N;n<=B;n++){const l=A(n),r=[];for(let o=j;o<=P;o++){const t=O(o);r.push(e.createElement(T,{...z,ariaAttributes:{"aria-colindex":o+1,role:"gridcell"},columnIndex:o,key:o,rowIndex:n,style:{position:"absolute",left:y?void 0:0,right:y?0:void 0,transform:`translate(${y?-t.scrollOffset:t.scrollOffset}px, ${l.scrollOffset}px)`,height:v>1?l.size:"100%",width:t.size}}))}t.push(o.jsx("div",{role:"row","aria-rowindex":n+1,children:r},n))}return t},[T,z,c,j,P,O,A,y,v,N,B]),M=o.jsx("div",{"aria-hidden":!0,style:{height:L(),width:R(),zIndex:-1}});return e.createElement(S,{"aria-colcount":c,"aria-rowcount":v,role:"grid",...C,className:a,dir:m,ref:b,style:{position:"relative",width:"100%",height:"100%",maxHeight:"100%",maxWidth:"100%",flexGrow:1,overflow:"auto",...I}},G,s,M)}export{r as G};
|
|
2
|
+
//# sourceMappingURL=Grid-BXEwl59J.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Grid-BXEwl59J.js","sources":["../../lib/components/grid/Grid.tsx","../../lib/core/useIsRtl.ts","../../lib/utils/isRtl.ts"],"sourcesContent":["import {\n createElement,\n memo,\n useEffect,\n useImperativeHandle,\n useMemo,\n useState,\n type ReactNode\n} from \"react\";\nimport { useIsRtl } from \"../../core/useIsRtl\";\nimport { useVirtualizer } from \"../../core/useVirtualizer\";\nimport { useMemoizedObject } from \"../../hooks/useMemoizedObject\";\nimport type { Align, TagNames } from \"../../types\";\nimport { arePropsEqual } from \"../../utils/arePropsEqual\";\nimport type { GridProps } from \"./types\";\n\nexport function Grid<\n CellProps extends object,\n TagName extends TagNames = \"div\"\n>({\n cellComponent: CellComponentProp,\n cellProps: cellPropsUnstable,\n children,\n className,\n columnCount,\n columnWidth,\n defaultHeight = 0,\n defaultWidth = 0,\n dir,\n gridRef,\n onCellsRendered,\n onResize,\n overscanCount = 3,\n rowCount,\n rowHeight,\n style,\n tagName = \"div\" as TagName,\n ...rest\n}: GridProps<CellProps, TagName>) {\n const cellProps = useMemoizedObject(cellPropsUnstable);\n const CellComponent = useMemo(\n () => memo(CellComponentProp, arePropsEqual),\n [CellComponentProp]\n );\n\n const [element, setElement] = useState<HTMLDivElement | null>(null);\n\n const isRtl = useIsRtl(element, dir);\n\n const {\n getCellBounds: getColumnBounds,\n getEstimatedSize: getEstimatedWidth,\n startIndex: columnStartIndex,\n scrollToIndex: scrollToColumnIndex,\n stopIndex: columnStopIndex\n } = useVirtualizer({\n containerElement: element,\n defaultContainerSize: defaultWidth,\n direction: \"horizontal\",\n isRtl,\n itemCount: columnCount,\n itemProps: cellProps,\n itemSize: columnWidth,\n onResize,\n overscanCount\n });\n\n const {\n getCellBounds: getRowBounds,\n getEstimatedSize: getEstimatedHeight,\n startIndex: rowStartIndex,\n scrollToIndex: scrollToRowIndex,\n stopIndex: rowStopIndex\n } = useVirtualizer({\n containerElement: element,\n defaultContainerSize: defaultHeight,\n direction: \"vertical\",\n itemCount: rowCount,\n itemProps: cellProps,\n itemSize: rowHeight,\n onResize,\n overscanCount\n });\n\n useImperativeHandle(\n gridRef,\n () => ({\n get element() {\n return element;\n },\n\n scrollToCell({\n behavior = \"auto\",\n columnAlign = \"auto\",\n columnIndex,\n rowAlign = \"auto\",\n rowIndex\n }: {\n behavior?: ScrollBehavior;\n columnAlign?: Align;\n columnIndex: number;\n rowAlign?: Align;\n rowIndex: number;\n }) {\n const left = scrollToColumnIndex({\n align: columnAlign,\n containerScrollOffset: element?.scrollLeft ?? 0,\n index: columnIndex\n });\n const top = scrollToRowIndex({\n align: rowAlign,\n containerScrollOffset: element?.scrollTop ?? 0,\n index: rowIndex\n });\n\n if (typeof element?.scrollTo === \"function\") {\n element.scrollTo({\n behavior,\n left,\n top\n });\n }\n },\n\n scrollToColumn({\n align = \"auto\",\n behavior = \"auto\",\n index\n }: {\n align?: Align;\n behavior?: ScrollBehavior;\n index: number;\n }) {\n const left = scrollToColumnIndex({\n align,\n containerScrollOffset: element?.scrollLeft ?? 0,\n index\n });\n\n if (typeof element?.scrollTo === \"function\") {\n element.scrollTo({\n behavior,\n left\n });\n }\n },\n\n scrollToRow({\n align = \"auto\",\n behavior = \"auto\",\n index\n }: {\n align?: Align;\n behavior?: ScrollBehavior;\n index: number;\n }) {\n const top = scrollToRowIndex({\n align,\n containerScrollOffset: element?.scrollTop ?? 0,\n index\n });\n\n if (typeof element?.scrollTo === \"function\") {\n element.scrollTo({\n behavior,\n top\n });\n }\n }\n }),\n [element, scrollToColumnIndex, scrollToRowIndex]\n );\n\n useEffect(() => {\n if (\n columnStartIndex >= 0 &&\n columnStopIndex >= 0 &&\n rowStartIndex >= 0 &&\n rowStopIndex >= 0 &&\n onCellsRendered\n ) {\n onCellsRendered({\n columnStartIndex,\n columnStopIndex,\n rowStartIndex,\n rowStopIndex\n });\n }\n }, [\n onCellsRendered,\n columnStartIndex,\n columnStopIndex,\n rowStartIndex,\n rowStopIndex\n ]);\n\n const cells = useMemo(() => {\n const children: ReactNode[] = [];\n if (columnCount > 0 && rowCount > 0) {\n for (let rowIndex = rowStartIndex; rowIndex <= rowStopIndex; rowIndex++) {\n const rowBounds = getRowBounds(rowIndex);\n\n const columns: ReactNode[] = [];\n\n for (\n let columnIndex = columnStartIndex;\n columnIndex <= columnStopIndex;\n columnIndex++\n ) {\n const columnBounds = getColumnBounds(columnIndex);\n\n columns.push(\n <CellComponent\n {...(cellProps as CellProps)}\n ariaAttributes={{\n \"aria-colindex\": columnIndex + 1,\n role: \"gridcell\"\n }}\n columnIndex={columnIndex}\n key={columnIndex}\n rowIndex={rowIndex}\n style={{\n position: \"absolute\",\n left: isRtl ? undefined : 0,\n right: isRtl ? 0 : undefined,\n transform: `translate(${isRtl ? -columnBounds.scrollOffset : columnBounds.scrollOffset}px, ${rowBounds.scrollOffset}px)`,\n height: rowCount > 1 ? rowBounds.size : \"100%\",\n width: columnBounds.size\n }}\n />\n );\n }\n\n children.push(\n <div key={rowIndex} role=\"row\" aria-rowindex={rowIndex + 1}>\n {columns}\n </div>\n );\n }\n }\n return children;\n }, [\n CellComponent,\n cellProps,\n columnCount,\n columnStartIndex,\n columnStopIndex,\n getColumnBounds,\n getRowBounds,\n isRtl,\n rowCount,\n rowStartIndex,\n rowStopIndex\n ]);\n\n const sizingElement = (\n <div\n aria-hidden\n style={{\n height: getEstimatedHeight(),\n width: getEstimatedWidth(),\n zIndex: -1\n }}\n ></div>\n );\n\n return createElement(\n tagName,\n {\n \"aria-colcount\": columnCount,\n \"aria-rowcount\": rowCount,\n role: \"grid\",\n ...rest,\n className,\n dir,\n ref: setElement,\n style: {\n position: \"relative\",\n width: \"100%\",\n height: \"100%\",\n maxHeight: \"100%\",\n maxWidth: \"100%\",\n flexGrow: 1,\n overflow: \"auto\",\n ...style\n }\n },\n cells,\n children,\n sizingElement\n );\n}\n","import { useLayoutEffect, useState, type HTMLAttributes } from \"react\";\nimport { isRtl } from \"../utils/isRtl\";\n\nexport function useIsRtl(\n element: HTMLElement | null,\n dir: HTMLAttributes<HTMLElement>[\"dir\"]\n) {\n const [value, setValue] = useState(dir === \"rtl\");\n\n useLayoutEffect(() => {\n if (element) {\n if (!dir) {\n setValue(isRtl(element));\n }\n }\n }, [dir, element]);\n\n return value;\n}\n","export function isRtl(element: HTMLElement) {\n let currentElement: HTMLElement | null = element;\n while (currentElement) {\n if (currentElement.dir) {\n return currentElement.dir === \"rtl\";\n }\n\n currentElement = currentElement.parentElement;\n }\n\n return false;\n}\n"],"names":["Grid","cellComponent","CellComponentProp","cellProps","cellPropsUnstable","children","className","columnCount","columnWidth","defaultHeight","defaultWidth","dir","gridRef","onCellsRendered","onResize","overscanCount","rowCount","rowHeight","style","tagName","rest","useMemoizedObject","CellComponent","useMemo","memo","arePropsEqual","element","setElement","useState","isRtl","value","setValue","useLayoutEffect","currentElement","parentElement","useIsRtl","getCellBounds","getColumnBounds","getEstimatedSize","getEstimatedWidth","startIndex","columnStartIndex","scrollToIndex","scrollToColumnIndex","stopIndex","columnStopIndex","useVirtualizer","containerElement","defaultContainerSize","direction","itemCount","itemProps","itemSize","getRowBounds","getEstimatedHeight","rowStartIndex","scrollToRowIndex","rowStopIndex","useImperativeHandle","scrollToCell","behavior","columnAlign","columnIndex","rowAlign","rowIndex","left","align","containerScrollOffset","scrollLeft","index","top","scrollTop","scrollTo","scrollToColumn","scrollToRow","useEffect","cells","rowBounds","columns","columnBounds","push","createElement","ariaAttributes","role","key","position","right","transform","scrollOffset","height","size","width","jsx","sizingElement","zIndex","ref","maxHeight","maxWidth","flexGrow","overflow"],"mappings":"6GAgBO,SAASA,GAIdC,cAAeC,EACfC,UAAWC,EAAAC,SACXA,EAAAC,UACAA,EAAAC,YACAA,EAAAC,YACAA,EAAAC,cACAA,EAAgB,EAAAC,aAChBA,EAAe,EAAAC,IACfA,EAAAC,QACAA,EAAAC,gBACAA,EAAAC,SACAA,EAAAC,cACAA,EAAgB,EAAAC,SAChBA,EAAAC,UACAA,EAAAC,MACAA,EAAAC,QACAA,EAAU,SACPC,IAEH,MAAMjB,EAAYkB,EAAkBjB,GAC9BkB,EAAgBC,EAAAA,QACpB,IAAMC,EAAAA,KAAKtB,EAAmBuB,GAC9B,CAACvB,KAGIwB,EAASC,GAAcC,EAAAA,SAAgC,MAExDC,EC5CD,SACLH,EACAf,GAEA,MAAOmB,EAAOC,GAAYH,EAAAA,SAAiB,QAARjB,GAUnC,OARAqB,EAAAA,gBAAgB,KACVN,IACGf,GACHoB,ECZD,SAAeL,GACpB,IAAIO,EAAqCP,EACzC,KAAOO,GAAgB,CACrB,GAAIA,EAAetB,IACjB,MAA8B,QAAvBsB,EAAetB,IAGxBsB,EAAiBA,EAAeC,aAClC,CAEA,OAAO,CACT,CDCiBL,CAAMH,MAGlB,CAACf,EAAKe,IAEFI,CACT,CD6BgBK,CAAST,EAASf,IAG9ByB,cAAeC,EACfC,iBAAkBC,EAClBC,WAAYC,EACZC,cAAeC,EACfC,UAAWC,GACTC,EAAe,CACjBC,iBAAkBrB,EAClBsB,qBAAsBtC,EACtBuC,UAAW,aACXpB,MAAAA,EACAqB,UAAW3C,EACX4C,UAAWhD,EACXiD,SAAU5C,EACVM,WACAC,mBAIAqB,cAAeiB,EACff,iBAAkBgB,EAClBd,WAAYe,EACZb,cAAec,EACfZ,UAAWa,GACTX,EAAe,CACjBC,iBAAkBrB,EAClBsB,qBAAsBvC,EACtBwC,UAAW,WACXC,UAAWlC,EACXmC,UAAWhD,EACXiD,SAAUnC,EACVH,WACAC,kBAGF2C,EAAAA,oBACE9C,EACA,KAAA,CACE,WAAIc,GACF,OAAOA,CACT,EAEA,YAAAiC,EAAaC,SACXA,EAAW,OAAAC,YACXA,EAAc,OAAAC,YACdA,EAAAC,SACAA,EAAW,OAAAC,SACXA,IAQA,MAAMC,EAAOtB,EAAoB,CAC/BuB,MAAOL,EACPM,sBAAuBzC,GAAS0C,YAAc,EAC9CC,MAAOP,IAEHQ,EAAMd,EAAiB,CAC3BU,MAAOH,EACPI,sBAAuBzC,GAAS6C,WAAa,EAC7CF,MAAOL,IAGwB,mBAAtBtC,GAAS8C,UAClB9C,EAAQ8C,SAAS,CACfZ,WACAK,OACAK,OAGN,EAEA,cAAAG,EAAeP,MACbA,EAAQ,OAAAN,SACRA,EAAW,OAAAS,MACXA,IAMA,MAAMJ,EAAOtB,EAAoB,CAC/BuB,QACAC,sBAAuBzC,GAAS0C,YAAc,EAC9CC,UAG+B,mBAAtB3C,GAAS8C,UAClB9C,EAAQ8C,SAAS,CACfZ,WACAK,QAGN,EAEA,WAAAS,EAAYR,MACVA,EAAQ,OAAAN,SACRA,EAAW,OAAAS,MACXA,IAMA,MAAMC,EAAMd,EAAiB,CAC3BU,QACAC,sBAAuBzC,GAAS6C,WAAa,EAC7CF,UAG+B,mBAAtB3C,GAAS8C,UAClB9C,EAAQ8C,SAAS,CACfZ,WACAU,OAGN,IAEF,CAAC5C,EAASiB,EAAqBa,IAGjCmB,EAAAA,UAAU,KAENlC,GAAoB,GACpBI,GAAmB,GACnBU,GAAiB,GACjBE,GAAgB,GAChB5C,GAEAA,EAAgB,CACd4B,mBACAI,kBACAU,gBACAE,kBAGH,CACD5C,EACA4B,EACAI,EACAU,EACAE,IAGF,MAAMmB,EAAQrD,EAAAA,QAAQ,KACpB,MAAMlB,EAAwB,GAC9B,GAAIE,EAAc,GAAKS,EAAW,EAChC,IAAA,IAASgD,EAAWT,EAAeS,GAAYP,EAAcO,IAAY,CACvE,MAAMa,EAAYxB,EAAaW,GAEzBc,EAAuB,GAE7B,IAAA,IACMhB,EAAcrB,EAClBqB,GAAejB,EACfiB,IACA,CACA,MAAMiB,EAAe1C,EAAgByB,GAErCgB,EAAQE,KACNC,EAAAA,cAAC3D,EAAA,IACMnB,EACL+E,eAAgB,CACd,gBAAiBpB,EAAc,EAC/BqB,KAAM,YAERrB,cACAsB,IAAKtB,EACLE,WACA9C,MAAO,CACLmE,SAAU,WACVpB,KAAMpC,OAAQ,EAAY,EAC1ByD,MAAOzD,EAAQ,OAAI,EACnB0D,UAAW,aAAa1D,GAASkD,EAAaS,aAAeT,EAAaS,mBAAmBX,EAAUW,kBACvGC,OAAQzE,EAAW,EAAI6D,EAAUa,KAAO,OACxCC,MAAOZ,EAAaW,QAI5B,CAEArF,EAAS2E,KACPY,EAAAA,IAAC,OAAmBT,KAAK,MAAM,gBAAenB,EAAW,EACtD3D,YADO2D,GAId,CAEF,OAAO3D,GACN,CACDiB,EACAnB,EACAI,EACAkC,EACAI,EACAR,EACAgB,EACAxB,EACAb,EACAuC,EACAE,IAGIoC,EACJD,EAAAA,IAAC,MAAA,CACC,eAAW,EACX1E,MAAO,CACLuE,OAAQnC,IACRqC,MAAOpD,IACPuD,QAAQ,KAKd,OAAOb,EAAAA,cACL9D,EACA,CACE,gBAAiBZ,EACjB,gBAAiBS,EACjBmE,KAAM,UACH/D,EACHd,YACAK,MACAoF,IAAKpE,EACLT,MAAO,CACLmE,SAAU,WACVM,MAAO,OACPF,OAAQ,OACRO,UAAW,OACXC,SAAU,OACVC,SAAU,EACVC,SAAU,UACPjF,IAGP0D,EACAvE,EACAwF,EAEJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,j as t,B as s,F as i}from"./index-
|
|
2
|
-
//# sourceMappingURL=Header-
|
|
1
|
+
import{r as e,j as t,B as s,F as i}from"./index-C6NWGx8D.js";function n({section:n,title:c}){return e.useEffect(()=>{const e=document.title;return document.title=`react-window: ${n?`${n}: ${c}`:c}`,()=>{document.title=e}}),t.jsxs(s,{align:"center",direction:"row",gap:2,children:[n&&t.jsxs(t.Fragment,{children:[t.jsx("div",{className:"text-xl",children:n}),t.jsx(i,{className:"size-4 text-slate-400"})]}),t.jsx("div",{className:"text-xl",children:c})]})}export{n as H};
|
|
2
|
+
//# sourceMappingURL=Header-B_onM2vR.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header-
|
|
1
|
+
{"version":3,"file":"Header-B_onM2vR.js","sources":["../../src/components/Header.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"@heroicons/react/20/solid\";\nimport { Box } from \"./Box\";\nimport { useEffect } from \"react\";\n\nexport function Header({\n section,\n title\n}: {\n section?: string;\n title: string;\n}) {\n useEffect(() => {\n const originalTitle = document.title;\n\n document.title = `react-window: ${section ? `${section}: ${title}` : title}`;\n\n return () => {\n document.title = originalTitle;\n };\n });\n\n return (\n <Box align=\"center\" direction=\"row\" gap={2}>\n {section && (\n <>\n <div className=\"text-xl\">{section}</div>\n <ChevronRightIcon className=\"size-4 text-slate-400\" />\n </>\n )}\n <div className=\"text-xl\">{title}</div>\n </Box>\n );\n}\n"],"names":["Header","section","title","useEffect","originalTitle","document","Box","align","direction","gap","children","jsxs","Fragment","jsx","className","ChevronRightIcon"],"mappings":"6DAIO,SAASA,GAAOC,QACrBA,EAAAC,MACAA,IAeA,OAVAC,EAAAA,UAAU,KACR,MAAMC,EAAgBC,SAASH,MAI/B,OAFAG,SAASH,MAAQ,iBAAiBD,EAAU,GAAGA,MAAYC,IAAUA,IAE9D,KACLG,SAASH,MAAQE,YAKlBE,EAAA,CAAIC,MAAM,SAASC,UAAU,MAAMC,IAAK,EACtCC,SAAA,CAAAT,GACCU,EAAAA,KAAAC,WAAA,CACEF,SAAA,CAAAG,EAAAA,IAAC,MAAA,CAAIC,UAAU,UAAWJ,SAAAT,MAC1BY,IAACE,EAAA,CAAiBD,UAAU,6BAGhCD,EAAAA,IAAC,MAAA,CAAIC,UAAU,UAAWJ,SAAAR,MAGhC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{j as s,c as a,r as n,B as p}from"./index-Dfhz9Ad4.js";import{B as t}from"./arePropsEqual-Bhv0L31F.js";import{F as c}from"./FormattedCode-CDzGfhdX.js";import{L as e}from"./LoadingSpinner-DXcA8wXA.js";import{G as l}from"./Grid-BnGy9pmI.js";import{j as i}from"./contacts-Bxrk2JS2.js";const o={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">HorizontalList</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName">emails</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">emails</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-variableName">emails</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">columnWidth</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">150</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-number">1</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-string">"100%"</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>',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">HorizontalList</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName">emails</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">emails</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">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">emails</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-variableName">emails</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">columnWidth</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">150</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-number">1</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-string">"100%"</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>'},d={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">columnIndex</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-propertyName">emails</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></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">cn</span><span class="tok-punctuation">(</span><span class="tok-string">"px-2 truncate text-center leading-[2.5]"</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: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-string">"bg-white/10 rounded"</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-variableName">columnIndex</span><span class=""> </span><span class="tok-operator">%</span><span class=""> </span><span class="tok-number">2</span><span class=""> </span><span class="tok-operator">===</span><span class=""> </span><span class="tok-number">0</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-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">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=""></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: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">{</span><span class="tok-variableName">emails</span><span class="tok-punctuation">[</span><span class="tok-variableName">columnIndex</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>',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">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">emails</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><span class="tok-propertyName tok-definition">emails</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="">></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></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">cn</span><span class="tok-punctuation">(</span><span class="tok-string">"px-2 truncate text-center leading-[2.5]"</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: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-string">"bg-white/10 rounded"</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-variableName">columnIndex</span><span class=""> </span><span class="tok-operator">%</span><span class=""> </span><span class="tok-number">2</span><span class=""> </span><span class="tok-operator">===</span><span class=""> </span><span class="tok-number">0</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-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">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=""></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: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">{</span><span class="tok-variableName">emails</span><span class="tok-punctuation">[</span><span class="tok-variableName">columnIndex</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>'};function r({columnIndex:n,emails:p,style:t}){return s.jsx("div",{className:a("px-2 truncate text-center leading-[2.5]",{"bg-white/10 rounded":n%2==0}),style:t,children:p[n]})}function u({emails:a}){return s.jsx(l,{cellComponent:r,cellProps:{emails:a},columnCount:a.length,columnWidth:150,rowCount:1,rowHeight:"100%"})}function k(){const a=n.useMemo(()=>i?i.map(s=>s.email).sort((s,a)=>s.localeCompare(a)):[],[]);return s.jsxs(p,{direction:"column",gap:4,children:[s.jsx("div",{children:"A horizontal list is just a grid with only one row."}),s.jsx("div",{children:"Here's an example horizontal list (grid) of emails:"}),s.jsxs(t,{className:"h-20","data-focus-within":"bold",children:[!a.length&&s.jsx(e,{}),s.jsx(u,{emails:a})]}),s.jsx("div",{children:"Here's what the configuration for the grid above looks like:"}),s.jsx(c,{markdown:o}),s.jsx("div",{children:"And here's the cell renderer:"}),s.jsx(c,{markdown:d})]})}export{k as default};
|
|
2
|
-
//# sourceMappingURL=HorizontalListsRoute-
|
|
1
|
+
import{j as s,c as a,r as n,B as p}from"./index-C6NWGx8D.js";import{B as t}from"./arePropsEqual-Czc4-HWX.js";import{F as c}from"./FormattedCode-B5NYyy8K.js";import{L as e}from"./LoadingSpinner-BMzTPwZo.js";import{G as l}from"./Grid-BXEwl59J.js";import{j as i}from"./contacts-Bxrk2JS2.js";const o={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">HorizontalList</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName">emails</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">emails</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-variableName">emails</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">columnWidth</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">150</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-number">1</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-string">"100%"</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>',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">HorizontalList</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName">emails</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">emails</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">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">emails</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-variableName">emails</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">columnWidth</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">150</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-number">1</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-string">"100%"</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>'},d={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">columnIndex</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-propertyName">emails</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></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">cn</span><span class="tok-punctuation">(</span><span class="tok-string">"px-2 truncate text-center leading-[2.5]"</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: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-string">"bg-white/10 rounded"</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-variableName">columnIndex</span><span class=""> </span><span class="tok-operator">%</span><span class=""> </span><span class="tok-number">2</span><span class=""> </span><span class="tok-operator">===</span><span class=""> </span><span class="tok-number">0</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-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">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=""></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: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">{</span><span class="tok-variableName">emails</span><span class="tok-punctuation">[</span><span class="tok-variableName">columnIndex</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>',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">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">emails</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><span class="tok-propertyName tok-definition">emails</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="">></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></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">cn</span><span class="tok-punctuation">(</span><span class="tok-string">"px-2 truncate text-center leading-[2.5]"</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: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-string">"bg-white/10 rounded"</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-variableName">columnIndex</span><span class=""> </span><span class="tok-operator">%</span><span class=""> </span><span class="tok-number">2</span><span class=""> </span><span class="tok-operator">===</span><span class=""> </span><span class="tok-number">0</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-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">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=""></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: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">{</span><span class="tok-variableName">emails</span><span class="tok-punctuation">[</span><span class="tok-variableName">columnIndex</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>'};function r({columnIndex:n,emails:p,style:t}){return s.jsx("div",{className:a("px-2 truncate text-center leading-[2.5]",{"bg-white/10 rounded":n%2==0}),style:t,children:p[n]})}function u({emails:a}){return s.jsx(l,{cellComponent:r,cellProps:{emails:a},columnCount:a.length,columnWidth:150,rowCount:1,rowHeight:"100%"})}function k(){const a=n.useMemo(()=>i?i.map(s=>s.email).sort((s,a)=>s.localeCompare(a)):[],[]);return s.jsxs(p,{direction:"column",gap:4,children:[s.jsx("div",{children:"A horizontal list is just a grid with only one row."}),s.jsx("div",{children:"Here's an example horizontal list (grid) of emails:"}),s.jsxs(t,{className:"h-20","data-focus-within":"bold",children:[!a.length&&s.jsx(e,{}),s.jsx(u,{emails:a})]}),s.jsx("div",{children:"Here's what the configuration for the grid above looks like:"}),s.jsx(c,{markdown:o}),s.jsx("div",{children:"And here's the cell renderer:"}),s.jsx(c,{markdown:d})]})}export{k as default};
|
|
2
|
+
//# sourceMappingURL=HorizontalListsRoute-YTu4ru_X.js.map
|
package/docs/assets/{HorizontalListsRoute-BQxNRT_F.js.map → HorizontalListsRoute-YTu4ru_X.js.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HorizontalListsRoute-
|
|
1
|
+
{"version":3,"file":"HorizontalListsRoute-YTu4ru_X.js","sources":["../../src/routes/grid/examples/HorizontalListCellRenderer.example.tsx","../../src/routes/grid/examples/HorizontalList.example.tsx","../../src/routes/grid/HorizontalListsRoute.tsx","../../src/routes/grid/hooks/useEmails.ts"],"sourcesContent":["import { cn } from \"../../../utils/cn\";\n\n// <begin>\n\nimport { type CellComponentProps } from \"react-window\";\n\nfunction CellComponent({\n columnIndex,\n emails,\n style\n}: CellComponentProps<{ emails: string[] }>) {\n return (\n <div\n className={cn(\"px-2 truncate text-center leading-[2.5]\", {\n \"bg-white/10 rounded\": columnIndex % 2 === 0\n })}\n style={style}\n >\n {emails[columnIndex]}\n </div>\n );\n}\n\n// <end>\n\nexport { CellComponent };\n","import { CellComponent } from \"./HorizontalListCellRenderer.example\";\n\n// <begin>\n\nimport { Grid } from \"react-window\";\n\nfunction HorizontalList({ emails }: { emails: string[] }) {\n return (\n <Grid\n cellComponent={CellComponent}\n cellProps={{ emails }}\n columnCount={emails.length}\n columnWidth={150}\n rowCount={1}\n rowHeight=\"100%\"\n />\n );\n}\n\n// <end>\n\nexport { HorizontalList };\n","import HorizontalListMarkdown from \"../../../public/generated/code-snippets/HorizontalList.json\";\nimport HorizontalListCellRendererMarkdown from \"../../../public/generated/code-snippets/HorizontalListCellRenderer.json\";\nimport { Block } from \"../../components/Block\";\nimport { Box } from \"../../components/Box\";\nimport { FormattedCode } from \"../../components/code/FormattedCode\";\nimport { LoadingSpinner } from \"../../components/LoadingSpinner\";\nimport { HorizontalList } from \"./examples/HorizontalList.example\";\nimport { useEmails } from \"./hooks/useEmails\";\n\nexport default function HorizontalListsRoute() {\n const emails = useEmails();\n\n return (\n <Box direction=\"column\" gap={4}>\n <div>A horizontal list is just a grid with only one row.</div>\n <div>Here's an example horizontal list (grid) of emails:</div>\n <Block className=\"h-20\" data-focus-within=\"bold\">\n {!emails.length && <LoadingSpinner />}\n <HorizontalList emails={emails} />\n </Block>\n <div>Here's what the configuration for the grid above looks like:</div>\n <FormattedCode markdown={HorizontalListMarkdown} />\n <div>And here's the cell renderer:</div>\n <FormattedCode markdown={HorizontalListCellRendererMarkdown} />\n </Box>\n );\n}\n","import { useMemo } from \"react\";\nimport json from \"../../../../public/data/contacts.json\";\n\nexport function useEmails(): string[] {\n return useMemo(() => {\n if (json) {\n return json\n .map((contact) => contact.email)\n .sort((a, b) => a.localeCompare(b));\n }\n\n return [];\n }, []);\n}\n"],"names":["CellComponent","columnIndex","emails","style","jsx","className","cn","children","HorizontalList","Grid","cellComponent","cellProps","columnCount","length","columnWidth","rowCount","rowHeight","HorizontalListsRoute","useMemo","json","map","contact","email","sort","a","b","localeCompare","jsxs","Box","direction","gap","Block","LoadingSpinner","FormattedCode","markdown","HorizontalListMarkdown","HorizontalListCellRendererMarkdown"],"mappings":"69kBAMA,SAASA,GAAcC,YACrBA,EAAAC,OACAA,EAAAC,MACAA,IAEA,OACEC,EAAAA,IAAC,MAAA,CACCC,UAAWC,EAAG,0CAA2C,CACvD,sBAAuBL,EAAc,GAAM,IAE7CE,QAECI,WAAON,IAGd,CCfA,SAASO,GAAeN,OAAEA,IACxB,OACEE,EAAAA,IAACK,EAAA,CACCC,cAAeV,EACfW,UAAW,CAAET,UACbU,YAAaV,EAAOW,OACpBC,YAAa,IACbC,SAAU,EACVC,UAAU,QAGhB,CCRA,SAAwBC,IACtB,MAAMf,ECNCgB,EAAAA,QAAQ,IACTC,EACKA,EACJC,IAAKC,GAAYA,EAAQC,OACzBC,KAAK,CAACC,EAAGC,IAAMD,EAAEE,cAAcD,IAG7B,GACN,IDAH,OACEE,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BvB,SAAA,GAAAH,IAAC,OAAIG,SAAA,0DACLH,IAAC,OAAIG,SAAA,wDACLoB,EAAAA,KAACI,EAAA,CAAM1B,UAAU,OAAO,oBAAkB,OACvCE,SAAA,EAACL,EAAOW,cAAWmB,EAAA,CAAA,GACpB5B,MAACI,GAAeN,gBAElBE,IAAC,OAAIG,SAAA,mEACLH,IAAC6B,EAAA,CAAcC,SAAUC,MACzB/B,IAAC,OAAIG,SAAA,oCACLH,IAAC6B,EAAA,CAAcC,SAAUE,MAG/B"}
|