react-window 2.0.1 → 2.0.2
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/README.md +8 -9
- package/dist/react-window.cjs +1 -1
- package/dist/react-window.cjs.map +1 -1
- package/dist/react-window.js +322 -317
- package/dist/react-window.js.map +1 -1
- package/docs/assets/CellComponent.example-B6rd3A81.js +2 -0
- package/docs/assets/{CellComponent.example-e4JJmmZM.js.map → CellComponent.example-B6rd3A81.js.map} +1 -1
- package/docs/assets/{ComponentProps-DMkeake1.js → ComponentProps-DjtQqosW.js} +2 -2
- package/docs/assets/{ComponentProps-DMkeake1.js.map → ComponentProps-DjtQqosW.js.map} +1 -1
- package/docs/assets/ContinueLink-BgDdBmAq.js +2 -0
- package/docs/assets/{ContinueLink-CbPhCk1k.js.map → ContinueLink-BgDdBmAq.js.map} +1 -1
- package/docs/assets/{FixedRowHeightsRoute-D8GuxxOL.js → FixedRowHeightsRoute-D2uTbdlK.js} +2 -2
- package/docs/assets/{FixedRowHeightsRoute-D8GuxxOL.js.map → FixedRowHeightsRoute-D2uTbdlK.js.map} +1 -1
- package/docs/assets/{FormattedCode-CAmuOSRw.js → FormattedCode-Bgu5KYpx.js} +2 -2
- package/docs/assets/{FormattedCode-CAmuOSRw.js.map → FormattedCode-Bgu5KYpx.js.map} +1 -1
- package/docs/assets/{GettingStartedRoute-zN9jVy3e.js → GettingStartedRoute-DFMvu5xc.js} +2 -2
- package/docs/assets/{GettingStartedRoute-zN9jVy3e.js.map → GettingStartedRoute-DFMvu5xc.js.map} +1 -1
- package/docs/assets/Grid-BmNZGHKY.js +2 -0
- package/docs/assets/Grid-BmNZGHKY.js.map +1 -0
- package/docs/assets/{Header-BYp8JKXz.js → Header-D5XYa_k5.js} +2 -2
- package/docs/assets/{Header-BYp8JKXz.js.map → Header-D5XYa_k5.js.map} +1 -1
- package/docs/assets/{HorizontalListsRoute-rNcKbQ1k.js → HorizontalListsRoute-BshOgFUz.js} +2 -2
- package/docs/assets/{HorizontalListsRoute-rNcKbQ1k.js.map → HorizontalListsRoute-BshOgFUz.js.map} +1 -1
- package/docs/assets/{ImperativeApiRoute-DntU9ReR.js → ImperativeApiRoute-BAWsk-vD.js} +2 -2
- package/docs/assets/{ImperativeApiRoute-DntU9ReR.js.map → ImperativeApiRoute-BAWsk-vD.js.map} +1 -1
- package/docs/assets/{ImperativeApiRoute-DD9Z7HWg.js → ImperativeApiRoute-DQIcyOMg.js} +2 -2
- package/docs/assets/ImperativeApiRoute-DQIcyOMg.js.map +1 -0
- package/docs/assets/List-C7ANWJ5i.js +2 -0
- package/docs/assets/List-C7ANWJ5i.js.map +1 -0
- package/docs/assets/{LoadingSpinner-Z5HQViRD.js → LoadingSpinner-C5G0kF8B.js} +2 -2
- package/docs/assets/{LoadingSpinner-Z5HQViRD.js.map → LoadingSpinner-C5G0kF8B.js.map} +1 -1
- package/docs/assets/{PageNotFound-B0nx-Cz_.js → PageNotFound-CmFn1Y8A.js} +2 -2
- package/docs/assets/{PageNotFound-B0nx-Cz_.js.map → PageNotFound-CmFn1Y8A.js.map} +1 -1
- package/docs/assets/{PlatformRequirementsRoute-C00ZSzCF.js → PlatformRequirementsRoute-DrlH5Zzd.js} +2 -2
- package/docs/assets/{PlatformRequirementsRoute-C00ZSzCF.js.map → PlatformRequirementsRoute-DrlH5Zzd.js.map} +1 -1
- package/docs/assets/PropsRoute-Du5tQlP4.js +2 -0
- package/docs/assets/{PropsRoute-D9jETWHk.js.map → PropsRoute-Du5tQlP4.js.map} +1 -1
- package/docs/assets/PropsRoute-Y6h__YZK.js +2 -0
- package/docs/assets/{PropsRoute-D77WXdPD.js.map → PropsRoute-Y6h__YZK.js.map} +1 -1
- package/docs/assets/{RTLGridsRoute-C49T7mLs.js → RTLGridsRoute-Bh6j-Do_.js} +2 -2
- package/docs/assets/{RTLGridsRoute-C49T7mLs.js.map → RTLGridsRoute-Bh6j-Do_.js.map} +1 -1
- package/docs/assets/{RenderingGridRoute-pTuxJ89O.js → RenderingGridRoute-BiAH8mBy.js} +2 -2
- package/docs/assets/{RenderingGridRoute-pTuxJ89O.js.map → RenderingGridRoute-BiAH8mBy.js.map} +1 -1
- package/docs/assets/{ScratchpadRoute-AXfI00Be.js → ScratchpadRoute-NKLpLi0x.js} +2 -2
- package/docs/assets/{ScratchpadRoute-AXfI00Be.js.map → ScratchpadRoute-NKLpLi0x.js.map} +1 -1
- package/docs/assets/{Select-C5ovWBbK.js → Select-DYzOjrIR.js} +2 -2
- package/docs/assets/{Select-C5ovWBbK.js.map → Select-DYzOjrIR.js.map} +1 -1
- package/docs/assets/{SupportRoute-C1V_AF9b.js → SupportRoute-B3HtlCgf.js} +2 -2
- package/docs/assets/{SupportRoute-C1V_AF9b.js.map → SupportRoute-B3HtlCgf.js.map} +1 -1
- package/docs/assets/{TabularDataRoute-B79B4UDS.js → TabularDataRoute-Dw2CznU_.js} +2 -2
- package/docs/assets/{TabularDataRoute-B79B4UDS.js.map → TabularDataRoute-Dw2CznU_.js.map} +1 -1
- package/docs/assets/{VariableRowHeightsRoute-Bf7uZQG0.js → VariableRowHeightsRoute-BtjBfaPU.js} +2 -2
- package/docs/assets/{VariableRowHeightsRoute-Bf7uZQG0.js.map → VariableRowHeightsRoute-BtjBfaPU.js.map} +1 -1
- package/docs/assets/arePropsEqual-J86giKVT.js +2 -0
- package/docs/assets/arePropsEqual-J86giKVT.js.map +1 -0
- package/docs/assets/{index-B_YQ7rlN.js → index-6dOV2kLd.js} +3 -3
- package/docs/assets/{index-B_YQ7rlN.js.map → index-6dOV2kLd.js.map} +1 -1
- package/docs/assets/{useCitiesByState-azL1M3ue.js → useCitiesByState-aLkpFxPh.js} +2 -2
- package/docs/assets/{useCitiesByState-azL1M3ue.js.map → useCitiesByState-aLkpFxPh.js.map} +1 -1
- package/docs/assets/{useContacts-BItVOkyi.js → useContacts-QMK0xyhD.js} +2 -2
- package/docs/assets/{useContacts-BItVOkyi.js.map → useContacts-QMK0xyhD.js.map} +1 -1
- package/docs/index.html +1 -1
- package/docs/stats.html +1 -1
- package/package.json +1 -1
- package/docs/assets/CellComponent.example-e4JJmmZM.js +0 -2
- package/docs/assets/ContinueLink-CbPhCk1k.js +0 -2
- package/docs/assets/Grid-DH-j7ODh.js +0 -2
- package/docs/assets/Grid-DH-j7ODh.js.map +0 -1
- package/docs/assets/ImperativeApiRoute-DD9Z7HWg.js.map +0 -1
- package/docs/assets/List-C4KHYcVU.js +0 -2
- package/docs/assets/List-C4KHYcVU.js.map +0 -1
- package/docs/assets/PropsRoute-D77WXdPD.js +0 -2
- package/docs/assets/PropsRoute-D9jETWHk.js +0 -2
- package/docs/assets/arePropsEqual-D3jAKwxp.js +0 -2
- package/docs/assets/arePropsEqual-D3jAKwxp.js.map +0 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{j as t,c as e,r as s}from"./index-
|
|
2
|
-
//# sourceMappingURL=useCitiesByState-
|
|
1
|
+
import{j as t,c as e,r as s}from"./index-6dOV2kLd.js";import{L as a}from"./List-C7ANWJ5i.js";import{u as i}from"./LoadingSpinner-C5G0kF8B.js";function n({items:e}){return t.jsx(a,{rowComponent:o,rowCount:e.length,rowHeight:r,rowProps:{items:e}})}function r(t,{items:e}){switch(e[t].type){case"state":return 30;case"zip":return 25}}function o({index:s,items:a,style:i}){const n=a[s],r=function(t){return e("flex items-center justify-between gap-2",{"text-3xl text-sky-300":"state"===t.type})}(n);return t.jsxs("div",{className:r,style:i,children:["state"===n.type?t.jsx("span",{children:n.state}):t.jsxs("span",{children:[n.city,", ",n.zip]}),t.jsx("div",{className:"text-slate-500 text-xs",children:`${s+1} of ${a.length}`})]})}function c(){const t=i("/data/addresses.json");return s.useMemo(()=>{const e=[];if(t){let s="";t.sort((t,e)=>t.state!==e.state?t.state.localeCompare(e.state):t.city!==e.city?t.city.localeCompare(e.city):t.zip.localeCompare(e.zip)).forEach(t=>{t.state!==s&&(s=t.state,e.push({type:"state",state:t.state})),e.push({type:"zip",city:t.city,zip:t.zip})})}return e},[t])}export{n as E,o as R,c as u};
|
|
2
|
+
//# sourceMappingURL=useCitiesByState-aLkpFxPh.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCitiesByState-
|
|
1
|
+
{"version":3,"file":"useCitiesByState-aLkpFxPh.js","sources":["../../src/routes/list/examples/ListVariableRowHeights.example.tsx","../../src/routes/list/hooks/useCitiesByState.ts"],"sourcesContent":["import { type Ref } from \"react\";\nimport { cn } from \"../../../utils/cn\";\n\n// <begin>\n\nimport {\n List,\n type ListImperativeAPI,\n type RowComponentProps\n} from \"react-window\";\n\ntype Item =\n | { type: \"state\"; state: string }\n | { type: \"zip\"; city: string; zip: string };\n\ntype RowProps = {\n items: Item[];\n};\n\nfunction Example({ items }: { items: Item[] }) {\n return (\n <List<RowProps>\n rowComponent={RowComponent}\n rowCount={items.length}\n rowHeight={rowHeight}\n rowProps={{ items }}\n />\n );\n}\n\nfunction rowHeight(index: number, { items }: RowProps) {\n switch (items[index].type) {\n case \"state\": {\n return 30;\n }\n case \"zip\": {\n return 25;\n }\n }\n}\n\nfunction RowComponent({ index, items, style }: RowComponentProps<RowProps>) {\n const item = items[index];\n\n const className = getClassName(item);\n\n return (\n <div className={className} style={style}>\n {item.type === \"state\" ? (\n <span>{item.state}</span>\n ) : (\n <span>\n {item.city}, {item.zip}\n </span>\n )}\n <div className=\"text-slate-500 text-xs\">{`${index + 1} of ${items.length}`}</div>\n </div>\n );\n}\n\n// <end>\n\nfunction ExampleWithRef({\n items,\n listRef\n}: {\n items: Item[];\n listRef: Ref<ListImperativeAPI>;\n}) {\n return (\n <List\n listRef={listRef}\n rowComponent={RowComponent}\n rowCount={items.length}\n rowHeight={rowHeight}\n rowProps={{ items }}\n />\n );\n}\n\nfunction getClassName(item: Item) {\n return cn(\"flex items-center justify-between gap-2\", {\n \"text-3xl text-sky-300\": item.type === \"state\"\n });\n}\n\nexport { Example, ExampleWithRef, RowComponent };\nexport type { Item, RowProps };\n","import { useMemo } from \"react\";\nimport type json from \"../../../../public/data/addresses.json\";\nimport { useJSONData } from \"../../../hooks/useJSONData\";\n\ntype Address = (typeof json)[0];\n\ntype Item =\n | { type: \"state\"; state: string }\n | { type: \"zip\"; city: string; zip: string };\n\nexport function useCitiesByState(): Item[] {\n const json = useJSONData<Address[]>(\"/data/addresses.json\");\n\n return useMemo(() => {\n const items: Item[] = [];\n\n if (json) {\n let currentState: string = \"\";\n\n json\n .sort((a, b) => {\n if (a.state !== b.state) {\n return a.state.localeCompare(b.state);\n } else if (a.city !== b.city) {\n return a.city.localeCompare(b.city);\n } else {\n return a.zip.localeCompare(b.zip);\n }\n })\n .forEach((address) => {\n if (address.state !== currentState) {\n currentState = address.state;\n\n items.push({\n type: \"state\",\n state: address.state\n });\n }\n\n items.push({\n type: \"zip\",\n city: address.city,\n zip: address.zip\n });\n });\n }\n\n return items;\n }, [json]);\n}\n"],"names":["Example","items","jsx","List","rowComponent","RowComponent","rowCount","length","rowHeight","rowProps","index","type","style","item","className","cn","getClassName","jsxs","children","state","city","zip","useCitiesByState","json","useJSONData","useMemo","currentState","sort","a","b","localeCompare","forEach","address","push"],"mappings":"8IAmBA,SAASA,GAAQC,MAAEA,IACjB,OACEC,EAAAA,IAACC,EAAA,CACCC,aAAcC,EACdC,SAAUL,EAAMM,OAChBC,YACAC,SAAU,CAAER,UAGlB,CAEA,SAASO,EAAUE,GAAeT,MAAEA,IAClC,OAAQA,EAAMS,GAAOC,MACnB,IAAK,QACH,OAAO,GAET,IAAK,MACH,OAAO,GAGb,CAEA,SAASN,GAAaK,MAAEA,EAAAT,MAAOA,EAAAW,MAAOA,IACpC,MAAMC,EAAOZ,EAAMS,GAEbI,EAoCR,SAAsBD,GACpB,OAAOE,EAAG,0CAA2C,CACnD,wBAAuC,UAAdF,EAAKF,MAElC,CAxCoBK,CAAaH,GAE/B,SACEI,KAAC,MAAA,CAAIH,YAAsBF,QACxBM,SAAA,CAAc,UAAdL,EAAKF,KACJT,EAAAA,IAAC,OAAA,CAAMgB,WAAKC,eAEX,OAAA,CACED,SAAA,CAAAL,EAAKO,KAAK,KAAGP,EAAKQ,OAGvBnB,EAAAA,IAAC,MAAA,CAAIY,UAAU,yBAA0BI,SAAA,GAAGR,EAAQ,QAAQT,EAAMM,aAGxE,CChDO,SAASe,IACd,MAAMC,EAAOC,EAAuB,wBAEpC,OAAOC,EAAAA,QAAQ,KACb,MAAMxB,EAAgB,GAEtB,GAAIsB,EAAM,CACR,IAAIG,EAAuB,GAE3BH,EACGI,KAAK,CAACC,EAAGC,IACJD,EAAET,QAAUU,EAAEV,MACTS,EAAET,MAAMW,cAAcD,EAAEV,OACtBS,EAAER,OAASS,EAAET,KACfQ,EAAER,KAAKU,cAAcD,EAAET,MAEvBQ,EAAEP,IAAIS,cAAcD,EAAER,MAGhCU,QAASC,IACJA,EAAQb,QAAUO,IACpBA,EAAeM,EAAQb,MAEvBlB,EAAMgC,KAAK,CACTtB,KAAM,QACNQ,MAAOa,EAAQb,SAInBlB,EAAMgC,KAAK,CACTtB,KAAM,MACNS,KAAMY,EAAQZ,KACdC,IAAKW,EAAQX,OAGrB,CAEA,OAAOpB,GACN,CAACsB,GACN"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e}from"./index-
|
|
2
|
-
//# sourceMappingURL=useContacts-
|
|
1
|
+
import{r as e}from"./index-6dOV2kLd.js";import{u as t}from"./LoadingSpinner-C5G0kF8B.js";const a=["title","first_name","last_name","email","gender","address","city","state","zip","timezone","company","job_title"];function r(e){return a[e]}function n(e){switch(r(e)){case"address":return 250;case"email":return 300;case"job_title":return 150;case"timezone":return 200;case"zip":return 75;default:return 100}}function s(){const a=t("/data/contacts.json");return e.useMemo(()=>a?a.sort((e,t)=>e.title!==t.title?e.title.localeCompare(t.title):e.first_name!==t.first_name?e.first_name.localeCompare(t.first_name):e.last_name.localeCompare(t.last_name)):[],[a])}export{a as C,n as c,r as i,s as u};
|
|
2
|
+
//# sourceMappingURL=useContacts-QMK0xyhD.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useContacts-
|
|
1
|
+
{"version":3,"file":"useContacts-QMK0xyhD.js","sources":["../../src/routes/grid/examples/shared.ts","../../src/routes/grid/examples/columnWidth.example.ts","../../src/routes/grid/hooks/useContacts.ts"],"sourcesContent":["import type { Contact } from \"./Grid.example\";\n\nexport const COLUMN_KEYS: (keyof Contact)[] = [\n \"title\",\n \"first_name\",\n \"last_name\",\n \"email\",\n \"gender\",\n \"address\",\n \"city\",\n \"state\",\n \"zip\",\n \"timezone\",\n \"company\",\n \"job_title\"\n];\n\nexport function indexToColumn(columnIndex: number): keyof Contact {\n return COLUMN_KEYS[columnIndex];\n}\n","import { indexToColumn } from \"./shared\";\n\n// <begin>\n\nfunction columnWidth(index: number) {\n switch (indexToColumn(index)) {\n case \"address\": {\n return 250;\n }\n case \"email\": {\n return 300;\n }\n case \"job_title\": {\n return 150;\n }\n case \"timezone\": {\n return 200;\n }\n case \"zip\": {\n return 75;\n }\n default: {\n return 100;\n }\n }\n}\n\n// <end>\n\nexport { columnWidth };\n","import { useMemo } from \"react\";\nimport type json from \"../../../../public/data/contacts.json\";\nimport { useJSONData } from \"../../../hooks/useJSONData\";\n\ntype Contact = (typeof json)[0];\n\nexport function useContacts(): Contact[] {\n const json = useJSONData<Contact[]>(\"/data/contacts.json\");\n\n return useMemo(() => {\n if (json) {\n return json.sort((a, b) => {\n if (a.title !== b.title) {\n return a.title.localeCompare(b.title);\n } else if (a.first_name !== b.first_name) {\n return a.first_name.localeCompare(b.first_name);\n } else {\n return a.last_name.localeCompare(b.last_name);\n }\n });\n }\n\n return [];\n }, [json]);\n}\n"],"names":["COLUMN_KEYS","indexToColumn","columnIndex","columnWidth","index","useContacts","json","useJSONData","useMemo","sort","a","b","title","localeCompare","first_name","last_name"],"mappings":"yFAEO,MAAMA,EAAiC,CAC5C,QACA,aACA,YACA,QACA,SACA,UACA,OACA,QACA,MACA,WACA,UACA,aAGK,SAASC,EAAcC,GAC5B,OAAOF,EAAYE,EACrB,CCfA,SAASC,EAAYC,GACnB,OAAQH,EAAcG,IACpB,IAAK,UACH,OAAO,IAET,IAAK,QACH,OAAO,IAET,IAAK,YACH,OAAO,IAET,IAAK,WACH,OAAO,IAET,IAAK,MACH,OAAO,GAET,QACE,OAAO,IAGb,CCnBO,SAASC,IACd,MAAMC,EAAOC,EAAuB,uBAEpC,OAAOC,EAAAA,QAAQ,IACTF,EACKA,EAAKG,KAAK,CAACC,EAAGC,IACfD,EAAEE,QAAUD,EAAEC,MACTF,EAAEE,MAAMC,cAAcF,EAAEC,OACtBF,EAAEI,aAAeH,EAAEG,WACrBJ,EAAEI,WAAWD,cAAcF,EAAEG,YAE7BJ,EAAEK,UAAUF,cAAcF,EAAEI,YAKlC,GACN,CAACT,GACN"}
|
package/docs/index.html
CHANGED
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
/>
|
|
27
27
|
<meta property="og:image:width" content="1500" />
|
|
28
28
|
<meta property="og:image:height" content="500" />
|
|
29
|
-
<script type="module" crossorigin src="/assets/index-
|
|
29
|
+
<script type="module" crossorigin src="/assets/index-6dOV2kLd.js"></script>
|
|
30
30
|
<link rel="stylesheet" crossorigin href="/assets/index-CQLn-JKf.css">
|
|
31
31
|
</head>
|
|
32
32
|
<body>
|