1import{r as s,j as a,P as n,Q as t,R as p,$ as o,U as e,w as l,d as i,b as c}from"./index-DgsjQSlN.js";import{L as r}from"./List-DOphYsXR.js";import{u,a as d}from"./useListRef-Y83K2772.js";import{u as k,R as m}from"./useCitiesByState-6fauwHYY.js";import"./arePropsEqual-7Sr-9K-8.js";import"./addresses-CDQyd4n9.js";const h=s.useRef,v='<div><span class="tok-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">onClick</span><span class=""> </span><span class="tok-operator">=</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-punctuation">{</span><span class=""></span></div>\n<div><span class=""> </span><span class="tok-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">list</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">listRef</span><span class="tok-operator">.</span><span class="tok-propertyName">current</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div><span class=""> </span><span class="tok-variableName">list</span><span class="">?.</span><span class="tok-propertyName">scrollToRow</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div><span class=""> </span><span class="tok-propertyName tok-definition">align</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-string">"auto"</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-comment">// optional</span><span class=""></span></div>\n<div><span class=""> </span><span class="tok-propertyName tok-definition">behavior</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-string">"auto"</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-comment">// optional</span><span class=""></span></div>\n<div><span class=""> </span><span class="tok-propertyName tok-definition">index</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-number">250</span><span class=""></span></div>\n<div><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div><span class=""></span><span class="tok-punctuation">}</span><span class="tok-punctuation">;</span></div>',f='<div><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">useListRef</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></div>';function x(s,{items:a}){return"state"===a[s].type?30:25}const j={label:"",value:""},g=["auto","center","end","smart","start"].map(s=>({label:`align: ${s}`,value:s}));g.unshift(j);const b=["auto","instant","smooth"].map(s=>({label:`behavior: ${s}`,value:s}));function w(){const[w,y]=s.useState(),[N,R]=s.useState(),[C,A]=s.useState(j),I=k(),P=s.useMemo(()=>{const s=I.filter(s=>"state"===s.type).map(s=>({label:s.state,value:s.state}));return s.unshift(j),s},[I]),S=h(null);return a.jsxs(n,{direction:"column",gap:4,children:[a.jsx(t,{section:"Lists",title:"Imperative methods"}),a.jsx("div",{children:"List provides an imperative API for responding to events. The recommended way to access this API is to use the exported ref hook:"}),a.jsx(p,{html:f}),a.jsx("div",{children:"Attach the ref during render:"}),a.jsx(p,{html:u.html}),a.jsx("div",{children:"And call API methods in an event handler:"}),a.jsx(p,{html:v}),a.jsx("div",{children:"The form below uses the imperative API to scroll the list:"}),a.jsxs(n,{direction:"row",gap:4,children:[a.jsx(o,{className:"flex-1",onChange:y,options:g,placeholder:"Align",value:w}),a.jsx(o,{className:"flex-1",onChange:R,options:b,placeholder:"Scroll behavior",value:N})]}),a.jsxs(n,{direction:"row",gap:4,children:[a.jsx(o,{className:"flex-1",onChange:A,options:P,placeholder:"State",value:C}),a.jsx(e,{className:"shrink-0",disabled:!C.value,onClick:()=>{const s=I.findIndex(s=>"state"===s.type&&s.state===C.value);S.current?.scrollToRow({align:w?.value,behavior:N?.value,index:s})},children:"Scroll"})]}),a.jsxs(l,{className:"h-50","data-focus-within":"bold",children:[!I.length&&a.jsx(i,{}),a.jsx(r,{listRef:S,rowComponent:m,rowCount:I.length,rowHeight:x,rowProps:{items:I}})]}),a.jsxs(c,{intent:"primary",children:[a.jsx("strong",{className:"text-sky-300",children:"Note"})," If you are passing the ref to another component or hook, use the ref callback function instead."]}),a.jsx(p,{html:d.html})]})}b.unshift(j);export{w as default}; 2//# sourceMappingURL=ScrollToRowRoute-BIbBOX5C.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.