diff --git a/_expo/static/js/web/index-30b1ff8b93c1d32621e4e59e6c1fe2b9.js b/_expo/static/js/web/index-68f0008f5aa6f5a48e46e1afbcb7c889.js similarity index 99% rename from _expo/static/js/web/index-30b1ff8b93c1d32621e4e59e6c1fe2b9.js rename to _expo/static/js/web/index-68f0008f5aa6f5a48e46e1afbcb7c889.js index 930bac1c..6ace1fd4 100644 --- a/_expo/static/js/web/index-30b1ff8b93c1d32621e4e59e6c1fe2b9.js +++ b/_expo/static/js/web/index-68f0008f5aa6f5a48e46e1afbcb7c889.js @@ -567,7 +567,7 @@ __d((function(g,_r,i,a,m,_e,d){var e=_r(d[0]);Object.defineProperty(_e,"__esModu __d((function(g,_r,i,a,m,_e,d){var e=_r(d[0]);Object.defineProperty(_e,"__esModule",{value:!0}),_e.Spacer=void 0;var t=e(_r(d[1])),r=e(_r(d[2])),o=e(_r(d[3])),c=e(_r(d[4])),n=_r(d[5]);function p(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,o)}return r}function f(e){for(var r=1;r'number'==typeof r?(0,n.jsx)(u,{flex:r}):(0,n.jsx)(s,{direction:e,gap:t}),u=r.default.View((({flex:e})=>({flex:e}))),s=(0,r.default)(c.default,{shouldForwardProp:e=>'direction'!==e&&'gap'!==e})((({direction:e,gap:t,theme:r})=>f({},'vertical'===e?{height:r.spacings[t]}:{width:r.spacings[t]})));_e.Spacer=o.default.memo(l)}),508,[1,8,278,16,288,429]); __d((function(g,_r,i,a,m,_e,d){var e=_r(d[0]);Object.defineProperty(_e,"__esModule",{value:!0}),_e.Typography=void 0;var t=e(_r(d[1])),r=e(_r(d[2])),n=e(_r(d[3])),o=_r(d[4]);const c=["variant","fontWeight","children"];function p(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function f(e){for(var r=1;r{let{variant:t="body",fontWeight:n="regular",children:p}=e,u=(0,r.default)(e,c);return(0,o.jsx)(l,f(f({variant:t,fontWeight:n},u),{},{children:p}))};const l=n.default.Text((({variant:e,fontWeight:t,theme:r})=>f(f({},r.typography[e][t]),{},{color:'white',flexWrap:'wrap'})))}),509,[1,8,125,278,429]); __d((function(g,r,i,a,m,e,d){Object.defineProperty(e,"__esModule",{value:!0}),e.ProgramListWithTitleAndVariableSizes=e.ProgramListWithTitle=void 0;var t=r(d[0]),o=r(d[1]),s=r(d[2]),l=r(d[3]),n=r(d[4]);e.ProgramListWithTitle=({title:c,parentRef:h,listSize:p})=>(0,n.jsxs)(t.Box,{direction:"vertical",children:[(0,n.jsx)(s.Typography,{variant:"body",fontWeight:"strong",children:c}),(0,n.jsx)(o.Spacer,{direction:"vertical",gap:"$2"}),(0,n.jsx)(l.ProgramsRow,{parentRef:h,listSize:p})]});e.ProgramListWithTitleAndVariableSizes=({title:c,listSize:h})=>(0,n.jsxs)(t.Box,{direction:"vertical",children:[(0,n.jsx)(s.Typography,{variant:"body",fontWeight:"strong",children:c}),(0,n.jsx)(o.Spacer,{direction:"vertical",gap:"$2"}),(0,n.jsx)(l.ProgramsRow,{variant:"variable-size",listSize:h})]})}),510,[507,508,509,511,429]); -__d((function(g,_r,_i,_a,m,_e,d){var e=_r(d[0]);Object.defineProperty(_e,"__esModule",{value:!0}),_e.ProgramsRow=_e.ProgramList=void 0;var r=e(_r(d[1])),t=e(_r(d[2])),n=_r(d[3]),i=_r(d[4]),o=(function(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=y(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var o in e)if("default"!==o&&{}.hasOwnProperty.call(e,o)){var a=i?Object.getOwnPropertyDescriptor(e,o):null;a&&(a.get||a.set)?Object.defineProperty(n,o,a):n[o]=e[o]}return n.default=e,t&&t.set(e,n),n})(_r(d[5])),a=_r(d[6]),s=_r(d[7]),c=_r(d[8]),l=_r(d[9]),u=_r(d[10]),p=e(_r(d[11])),f=_r(d[12]),h=_r(d[13]),b=_r(d[14]),w=_r(d[15]);function y(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap,t=new WeakMap;return(y=function(e){return e?t:r})(e)}function v(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function O(e){for(var t=1;tparseInt(e.id,10)%2==0,A=_e.ProgramList=o.default.forwardRef((({orientation:e,containerStyle:r,data:t,parentRef:l,isActive:p,variant:f,listSize:y=1e3},v)=>{const O=(0,i.useNavigation)(),P=(0,n.useTheme)(),A=(0,o.useRef)(null),I=(0,o.useCallback)((({item:e,index:r})=>(0,w.jsx)(c.ProgramNode,{programInfo:e,onSelect:()=>O.push('ProgramDetail',{programInfo:e}),label:r.toString(),variant:'variable-size'===f&&S(e)?'landscape':'portrait'})),[O,f]),k=(0,i.useIsFocused)(),C=(0,o.useMemo)((()=>t??(0,s.getPrograms)(y)),[t,y]),R=(0,o.useMemo)((()=>'normal'===f?P.sizes.program.portrait.width+j:e=>S(e)?P.sizes.program.landscape.width+j:P.sizes.program.portrait.width+j),[P.sizes.program.landscape.width,P.sizes.program.portrait.width,f]),_=(0,o.useCallback)((e=>{const r=e===h.SupportedKeys.Back,t=p&&k,n=0===A.current.currentlyFocusedItemIndex;return!(!r||!t||n)&&(A.current.focus(0),!0)}),[p,k,A]);return(0,b.useKey)(h.SupportedKeys.Back,_),(0,w.jsx)(x,{isActive:p,style:r,ref:v,children:(0,w.jsx)(a.SpatialNavigationVirtualizedList,{orientation:e,data:C,renderItem:I,itemSize:R,numberOfRenderedItems:15,numberOfItemsVisibleOnScreen:7,onEndReachedThresholdItemsNumber:7,descendingArrow:p?(0,w.jsx)(u.LeftArrow,{}):null,descendingArrowContainerStyle:z.leftArrowContainer,ascendingArrow:p?(0,w.jsx)(u.RightArrow,{}):null,ascendingArrowContainerStyle:z.rightArrowContainer,ref:e=>{l&&(l.current=e),A.current=e}})})}));A.displayName='ProgramList';_e.ProgramsRow=({containerStyle:e,variant:r="normal",listSize:t,parentRef:i})=>{const o=(0,n.useTheme)();return(0,w.jsx)(a.SpatialNavigationNode,{children:({isActive:n})=>(0,w.jsx)(A,{containerStyle:O(O({},e),{},{height:o.sizes.program.portrait.height+P}),variant:r,listSize:t,parentRef:i,isActive:n})})};const x=t.default.View((({isActive:e,theme:r})=>({backgroundColor:e?r.colors.background.mainActive:r.colors.background.mainHover,padding:r.spacings.$8,borderRadius:(0,l.scaledPixels)(20),overflow:'hidden'}))),z=p.default.create({leftArrowContainer:{width:120,height:(0,l.scaledPixels)(260)+2*f.theme.spacings.$8,position:'absolute',top:0,justifyContent:'center',alignItems:'center',left:-f.theme.spacings.$8},rightArrowContainer:{width:120,height:(0,l.scaledPixels)(260)+2*f.theme.spacings.$8,position:'absolute',top:0,justifyContent:'center',alignItems:'center',right:-f.theme.spacings.$8}})}),511,[1,8,278,130,147,16,424,512,538,274,541,29,271,502,503,429]); +__d((function(g,_r,_i,_a,m,_e,d){var e=_r(d[0]);Object.defineProperty(_e,"__esModule",{value:!0}),_e.ProgramsRow=_e.ProgramList=void 0;var r=e(_r(d[1])),t=e(_r(d[2])),n=_r(d[3]),i=_r(d[4]),a=(function(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=y(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&{}.hasOwnProperty.call(e,a)){var o=i?Object.getOwnPropertyDescriptor(e,a):null;o&&(o.get||o.set)?Object.defineProperty(n,a,o):n[a]=e[a]}return n.default=e,t&&t.set(e,n),n})(_r(d[5])),o=_r(d[6]),s=_r(d[7]),c=_r(d[8]),l=_r(d[9]),u=_r(d[10]),p=e(_r(d[11])),f=_r(d[12]),h=_r(d[13]),b=_r(d[14]),w=_r(d[15]);function y(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap,t=new WeakMap;return(y=function(e){return e?t:r})(e)}function v(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function O(e){for(var t=1;tparseInt(e.id,10)%2==0,A=_e.ProgramList=a.default.forwardRef((({orientation:e,containerStyle:r,data:t,parentRef:l,isActive:p,variant:f,listSize:y=1e3},v)=>{const O=(0,i.useNavigation)(),P=(0,n.useTheme)(),A=(0,a.useRef)(null),I=(0,a.useCallback)((({item:e,index:r})=>(0,w.jsx)(c.ProgramNode,{programInfo:e,onSelect:()=>O.push('ProgramDetail',{programInfo:e}),label:r.toString(),variant:'variable-size'===f&&S(e)?'landscape':'portrait'})),[O,f]),k=(0,i.useIsFocused)(),C=(0,a.useMemo)((()=>t??(0,s.getPrograms)(y)),[t,y]),R=(0,a.useMemo)((()=>'normal'===f?P.sizes.program.portrait.width+j:e=>S(e)?P.sizes.program.landscape.width+j:P.sizes.program.portrait.width+j),[P.sizes.program.landscape.width,P.sizes.program.portrait.width,f]),_=(0,a.useCallback)((e=>{const r=e===h.SupportedKeys.Back,t=p&&k,n=0===A.current?.currentlyFocusedItemIndex;return!(!r||!t||n)&&(A.current?.focus(0),!0)}),[p,k,A]);return(0,b.useKey)(h.SupportedKeys.Back,_),(0,w.jsx)(x,{isActive:p,style:r,ref:v,children:(0,w.jsx)(o.SpatialNavigationVirtualizedList,{orientation:e,data:C,renderItem:I,itemSize:R,numberOfRenderedItems:15,numberOfItemsVisibleOnScreen:7,onEndReachedThresholdItemsNumber:7,descendingArrow:p?(0,w.jsx)(u.LeftArrow,{}):null,descendingArrowContainerStyle:z.leftArrowContainer,ascendingArrow:p?(0,w.jsx)(u.RightArrow,{}):null,ascendingArrowContainerStyle:z.rightArrowContainer,ref:e=>{l&&(l.current=e),A.current=e}})})}));A.displayName='ProgramList';_e.ProgramsRow=({containerStyle:e,variant:r="normal",listSize:t,parentRef:i,data:a})=>{const s=(0,n.useTheme)();return(0,w.jsx)(o.SpatialNavigationNode,{children:({isActive:n})=>(0,w.jsx)(A,{containerStyle:O(O({},e),{},{height:s.sizes.program.portrait.height+P}),variant:r,listSize:t,parentRef:i,isActive:n,data:a})})};const x=t.default.View((({isActive:e,theme:r})=>({backgroundColor:e?r.colors.background.mainActive:r.colors.background.mainHover,padding:r.spacings.$8,borderRadius:(0,l.scaledPixels)(20),overflow:'hidden'}))),z=p.default.create({leftArrowContainer:{width:120,height:(0,l.scaledPixels)(260)+2*f.theme.spacings.$8,position:'absolute',top:0,justifyContent:'center',alignItems:'center',left:-f.theme.spacings.$8},rightArrowContainer:{width:120,height:(0,l.scaledPixels)(260)+2*f.theme.spacings.$8,position:'absolute',top:0,justifyContent:'center',alignItems:'center',right:-f.theme.spacings.$8}})}),511,[1,8,278,130,147,16,424,512,538,274,541,29,271,502,503,429]); __d((function(g,r,_i,a,m,e,d){var i=r(d[0]);Object.defineProperty(e,"__esModule",{value:!0}),e.programInfos=e.getPrograms=void 0;var t=i(r(d[1])),o=i(r(d[2])),n=i(r(d[3])),s=i(r(d[4])),l=i(r(d[5])),c=i(r(d[6])),p=i(r(d[7])),P=i(r(d[8])),f=i(r(d[9])),u=i(r(d[10])),h=i(r(d[11])),M=i(r(d[12])),v=i(r(d[13])),_=i(r(d[14])),I=i(r(d[15])),b=i(r(d[16])),j=i(r(d[17])),y=i(r(d[18])),O=i(r(d[19])),k=i(r(d[20])),q=i(r(d[21])),w=i(r(d[22])),x=i(r(d[23])),z=i(r(d[24])),A=i(r(d[25]));const B=e.programInfos=[{id:'1',title:'Program 1',image:t.default,description:'Program 1 description'},{id:'2',title:'Program 2',image:o.default,description:'Program 2 description'},{id:'3',title:'Program 3',image:n.default,description:'Program 3 description'},{id:'4',title:'Program 4',image:s.default,description:'Program 4 description'},{id:'5',title:'Program 5',image:l.default,description:'Program 5 description'},{id:'6',title:'Program 6',image:c.default,description:'Program 6 description'},{id:'7',title:'Program 7',image:p.default,description:'Program 7 description'},{id:'8',title:'Program 8',image:P.default,description:'Program 8 description'},{id:'9',title:'Program 9',image:f.default,description:'Program 9 description'},{id:'10',title:'Program 10',image:u.default,description:'Program 10 description'},{id:'11',title:'Program 11',image:h.default,description:'Program 11 description'},{id:'12',title:'Program 12',image:M.default,description:'Program 12 description'},{id:'13',title:'Program 13',image:v.default,description:'Program 13 description'},{id:'14',title:'Program 14',image:_.default,description:'Program 14 description'},{id:'15',title:'Program 15',image:I.default,description:'Program 15 description'},{id:'16',title:'Program 16',image:b.default,description:'Program 16 description'},{id:'17',title:'Program 17',image:j.default,description:'Program 17 description'},{id:'18',title:'Program 18',image:y.default,description:'Program 18 description'},{id:'19',title:'Program 19',image:O.default,description:'Program 19 description'},{id:'20',title:'Program 20',image:k.default,description:'Program 20 description'},{id:'21',title:'Program 21',image:q.default,description:'Program 21 description'},{id:'22',title:'Program 22',image:w.default,description:'Program 22 description'},{id:'23',title:'Program 23',image:x.default,description:'Program 23 description'},{id:'24',title:'Program 24',image:z.default,description:'Program 24 description'},{id:'25',title:'Program 25',image:A.default,description:'Program 25 description'}],C=i=>{const t=[...i];for(let i=t.length-1;i>0;i--){const o=Math.floor(Math.random()*(i+1)),n=t[i];t[i]=t[o],t[o]=n}return t};e.getPrograms=i=>{if(!i)return C(B);const t=[];for(let o=0;o((0,o.useLockOverlay)({isModalVisible:v,hideModal:n}),(0,t.jsx)(l.SpatialNavigationRoot,{children:s}))}),2093,[437,2094,429]); __d((function(g,r,i,a,m,e,d){Object.defineProperty(e,"__esModule",{value:!0}),e.useLockOverlay=void 0;var o=r(d[0]),c=r(d[1]),s=r(d[2]),l=r(d[3]);e.useLockOverlay=({isModalVisible:o,hideModal:c})=>{u(o),t(o,c)};const u=s=>{const{lock:l,unlock:u}=(0,c.useLockSpatialNavigation)();(0,o.useEffect)((()=>{if(s)return l(),()=>{u()}}),[s,l,u])},t=(c,u)=>{const t=(0,o.useCallback)((()=>!!c&&(u(),!0)),[c,u]);(0,s.useKey)(l.SupportedKeys.Back,t)}}),2094,[16,443,503,502]); __d((function(g,r,i,a,m,e,d){var t=r(d[0]);Object.defineProperty(e,"__esModule",{value:!0}),e.NonVirtualizedGridPage=void 0;var n=r(d[1]),o=r(d[2]);r(d[3]);var s=r(d[4]),l=r(d[5]),c=t(r(d[6])),h=r(d[7]),u=r(d[8]),p=t(r(d[9])),w=r(d[10]),f=r(d[11]),x=r(d[12]),j=t(r(d[13])),v=r(d[14]);const A=(0,h.scaledPixels)(400),C=t=>(0,v.jsx)(P,{programs:t},t[0].id);e.NonVirtualizedGridPage=()=>{const t=(0,p.default)((0,s.getPrograms)(),7);return(0,v.jsx)(o.Page,{children:(0,v.jsx)(N,{children:(0,v.jsx)(S,{children:(0,v.jsxs)(n.SpatialNavigationScrollView,{offsetFromStart:A+20,descendingArrow:(0,v.jsx)(x.TopArrow,{}),ascendingArrow:(0,v.jsx)(x.BottomArrow,{}),descendingArrowContainerStyle:V.topArrowContainer,ascendingArrowContainerStyle:V.bottomArrowContainer,children:[(0,v.jsx)(f.Header,{title:"Example of a non-virtualized grid with spatial navigation",description:"The grid shown on this page is NOT virtualized, which means that when scrolling, the elements not shown in the screen ARE rendered.",verticalSize:A}),(0,v.jsx)(n.SpatialNavigationView,{alignInGrid:!0,direction:"vertical",children:(0,v.jsx)(n.DefaultFocus,{children:t.map(C)})})]})})})})};const P=({programs:t})=>{const n=(0,l.useNavigation)();return(0,v.jsx)(b,{direction:"horizontal",children:t.map((t=>(0,v.jsx)(u.ProgramNode,{programInfo:t,onSelect:()=>n.push('ProgramDetail',{programInfo:t})},t.id)))})},b=(0,c.default)(n.SpatialNavigationView)((({theme:t})=>({gap:t.spacings.$4,padding:t.spacings.$4}))),S=c.default.View({backgroundColor:w.theme.colors.background.mainHover,margin:'auto',height:'95%',width:'88%',borderRadius:(0,h.scaledPixels)(20),padding:(0,h.scaledPixels)(30)}),N=c.default.View({flex:1,justifyContent:'center',alignItems:'center'}),V=j.default.create({topArrowContainer:{width:'100%',height:100,position:'absolute',alignItems:'center',justifyContent:'center',top:-15,left:0},bottomArrowContainer:{width:'100%',height:100,position:'absolute',alignItems:'center',justifyContent:'center',bottom:-15,left:0}})}),2095,[1,424,499,506,512,147,278,274,538,460,271,545,541,29,429]); -__d((function(g,r,i,a,m,e,d){var o=r(d[0]);Object.defineProperty(e,"__esModule",{value:!0}),e.GridWithLongNodesPage=void 0;var t=r(d[1]),n=r(d[2]);r(d[3]);var s=r(d[4]),l=o(r(d[5])),c=r(d[6]),f=r(d[7]),p=r(d[8]),x=r(d[9]),u=o(r(d[10])),j=r(d[11]),h=r(d[12]),w=r(d[13]),I=r(d[14]),N=r(d[15]);const R=(0,c.scaledPixels)(400);e.GridWithLongNodesPage=()=>{const o=(0,x.useRef)(null),s=(0,x.useRef)(null),l=(0,x.useRef)(null);return(0,N.jsx)(n.Page,{children:(0,N.jsx)(C,{children:(0,N.jsx)(A,{children:(0,N.jsxs)(t.SpatialNavigationScrollView,{offsetFromStart:R+20,ascendingArrow:(0,N.jsx)(I.BottomArrow,{}),ascendingArrowContainerStyle:G.bottomArrowContainer,descendingArrow:(0,N.jsx)(I.TopArrow,{}),descendingArrowContainerStyle:G.topArrowContainer,children:[(0,N.jsx)(t.SpatialNavigationNode,{alignInGrid:!0,children:(0,N.jsx)(t.DefaultFocus,{children:(0,N.jsxs)(N.Fragment,{children:[(0,N.jsx)(S,{ref:o}),(0,N.jsx)(v,{ref:s}),(0,N.jsx)(P,{firstItemRef:o,lastItemRef:s})]})})}),(0,N.jsx)(h.Spacer,{gap:"$6"}),(0,N.jsx)(w.ProgramListWithTitle,{title:"Imperative focus on virtualized list",parentRef:l}),(0,N.jsxs)(y,{direction:"horizontal",children:[(0,N.jsx)(j.Button,{label:"Go to first",onSelect:()=>{l.current.focus(0)}}),(0,N.jsx)(j.Button,{label:"Go to last",onSelect:()=>{l.current.focus(999)}})]}),(0,N.jsx)(h.Spacer,{gap:"$20"})]})})})})};const S=(0,x.forwardRef)(((o,n)=>(0,N.jsx)(t.SpatialNavigationNode,{orientation:"horizontal",children:(0,N.jsxs)(b,{children:[(0,N.jsx)(f.ProgramNode,{variant:"landscape",programInfo:s.programInfos[0],indexRange:[0,1],ref:n}),(0,N.jsx)(f.ProgramNode,{programInfo:s.programInfos[1],indexRange:[2,2]}),(0,N.jsx)(f.ProgramNode,{programInfo:s.programInfos[2],indexRange:[3,3]}),(0,N.jsx)(f.ProgramNode,{variant:"landscape",programInfo:s.programInfos[3],indexRange:[4,5]}),(0,N.jsx)(f.ProgramNode,{programInfo:s.programInfos[4],indexRange:[6,6]})]})})));S.displayName='FirstRow';const v=(0,x.forwardRef)(((o,n)=>{const l=s.programInfos.slice(6,13);return(0,N.jsx)(t.SpatialNavigationNode,{orientation:"horizontal",children:(0,N.jsx)(b,{children:l.map(((o,t)=>(0,N.jsx)(f.ProgramNode,{programInfo:o,ref:t===l.length-1?n:null},o.id)))})})}));v.displayName='SecondRow';const P=({firstItemRef:o,lastItemRef:n})=>(0,N.jsx)(t.SpatialNavigationNode,{orientation:"horizontal",children:(0,N.jsxs)(b,{children:[(0,N.jsx)(j.Button,{label:"Go to first item",onSelect:()=>o.current.focus()}),(0,N.jsx)(j.Button,{label:"Go to last item",onSelect:()=>n.current.focus()})]})}),b=l.default.View((({theme:o})=>({flexDirection:'row',gap:o.spacings.$4,padding:o.spacings.$4}))),A=l.default.View({backgroundColor:p.theme.colors.background.mainHover,margin:'auto',height:'95%',width:'88%',borderRadius:(0,c.scaledPixels)(20),padding:(0,c.scaledPixels)(30)}),C=l.default.View({flex:1,justifyContent:'center',alignItems:'center'}),y=(0,l.default)(t.SpatialNavigationView)({flexDirection:'row',gap:p.theme.spacings.$4,padding:p.theme.spacings.$4}),G=u.default.create({topArrowContainer:{width:'100%',height:100,position:'absolute',alignItems:'center',justifyContent:'center',top:20,left:0},bottomArrowContainer:{width:'100%',height:100,position:'absolute',alignItems:'center',justifyContent:'center',bottom:-15,left:0}})}),2096,[1,424,499,506,512,278,274,538,271,16,29,546,508,510,541,429]); +__d((function(g,r,i,a,m,e,d){var o=r(d[0]);Object.defineProperty(e,"__esModule",{value:!0}),e.GridWithLongNodesPage=void 0;var t=r(d[1]),n=r(d[2]);r(d[3]);var s=r(d[4]),l=o(r(d[5])),c=r(d[6]),f=r(d[7]),p=r(d[8]),x=r(d[9]),u=o(r(d[10])),j=r(d[11]),h=r(d[12]),w=r(d[13]),I=r(d[14]),N=r(d[15]);const R=(0,c.scaledPixels)(400);e.GridWithLongNodesPage=()=>{const o=(0,x.useRef)(null),s=(0,x.useRef)(null),l=(0,x.useRef)(null);return(0,N.jsx)(n.Page,{children:(0,N.jsx)(C,{children:(0,N.jsx)(A,{children:(0,N.jsxs)(t.SpatialNavigationScrollView,{offsetFromStart:R+20,ascendingArrow:(0,N.jsx)(I.BottomArrow,{}),ascendingArrowContainerStyle:G.bottomArrowContainer,descendingArrow:(0,N.jsx)(I.TopArrow,{}),descendingArrowContainerStyle:G.topArrowContainer,children:[(0,N.jsx)(t.SpatialNavigationNode,{alignInGrid:!0,children:(0,N.jsx)(t.DefaultFocus,{children:(0,N.jsxs)(N.Fragment,{children:[(0,N.jsx)(S,{ref:o}),(0,N.jsx)(v,{ref:s}),(0,N.jsx)(P,{firstItemRef:o,lastItemRef:s})]})})}),(0,N.jsx)(h.Spacer,{gap:"$6"}),(0,N.jsx)(w.ProgramListWithTitle,{title:"Imperative focus on virtualized list",parentRef:l}),(0,N.jsxs)(y,{direction:"horizontal",children:[(0,N.jsx)(j.Button,{label:"Go to first",onSelect:()=>{l.current?.focus(0)}}),(0,N.jsx)(j.Button,{label:"Go to last",onSelect:()=>{l.current?.focus(999)}})]}),(0,N.jsx)(h.Spacer,{gap:"$20"})]})})})})};const S=(0,x.forwardRef)(((o,n)=>(0,N.jsx)(t.SpatialNavigationNode,{orientation:"horizontal",children:(0,N.jsxs)(b,{children:[(0,N.jsx)(f.ProgramNode,{variant:"landscape",programInfo:s.programInfos[0],indexRange:[0,1],ref:n}),(0,N.jsx)(f.ProgramNode,{programInfo:s.programInfos[1],indexRange:[2,2]}),(0,N.jsx)(f.ProgramNode,{programInfo:s.programInfos[2],indexRange:[3,3]}),(0,N.jsx)(f.ProgramNode,{variant:"landscape",programInfo:s.programInfos[3],indexRange:[4,5]}),(0,N.jsx)(f.ProgramNode,{programInfo:s.programInfos[4],indexRange:[6,6]})]})})));S.displayName='FirstRow';const v=(0,x.forwardRef)(((o,n)=>{const l=s.programInfos.slice(6,13);return(0,N.jsx)(t.SpatialNavigationNode,{orientation:"horizontal",children:(0,N.jsx)(b,{children:l.map(((o,t)=>(0,N.jsx)(f.ProgramNode,{programInfo:o,ref:t===l.length-1?n:null},o.id)))})})}));v.displayName='SecondRow';const P=({firstItemRef:o,lastItemRef:n})=>(0,N.jsx)(t.SpatialNavigationNode,{orientation:"horizontal",children:(0,N.jsxs)(b,{children:[(0,N.jsx)(j.Button,{label:"Go to first item",onSelect:()=>o.current?.focus()}),(0,N.jsx)(j.Button,{label:"Go to last item",onSelect:()=>n.current?.focus()})]})}),b=l.default.View((({theme:o})=>({flexDirection:'row',gap:o.spacings.$4,padding:o.spacings.$4}))),A=l.default.View({backgroundColor:p.theme.colors.background.mainHover,margin:'auto',height:'95%',width:'88%',borderRadius:(0,c.scaledPixels)(20),padding:(0,c.scaledPixels)(30)}),C=l.default.View({flex:1,justifyContent:'center',alignItems:'center'}),y=(0,l.default)(t.SpatialNavigationView)({flexDirection:'row',gap:p.theme.spacings.$4,padding:p.theme.spacings.$4}),G=u.default.create({topArrowContainer:{width:'100%',height:100,position:'absolute',alignItems:'center',justifyContent:'center',top:20,left:0},bottomArrowContainer:{width:'100%',height:100,position:'absolute',alignItems:'center',justifyContent:'center',bottom:-15,left:0}})}),2096,[1,424,499,506,512,278,274,538,271,16,29,546,508,510,541,429]); __d((function(g,r,i,a,m,e,d){Object.defineProperty(e,"__esModule",{value:!0}),e.useTVPanEvent=void 0;e.useTVPanEvent=()=>null}),2097,[]); -__d((function(g,r,i,a,m,e,d){var t=r(d[0]);Object.defineProperty(e,"__esModule",{value:!0}),e.ListWithVariableSize=void 0;var s=t(r(d[1])),l=r(d[2]),n=r(d[3]),o=r(d[4]),c=r(d[5]),h=r(d[6]),u=r(d[7]),x=r(d[8]),j=r(d[9]),p=r(d[10]),S=r(d[11]),f=r(d[12]),v=r(d[13]);const b=(0,c.scaledPixels)(70);e.ListWithVariableSize=()=>{const t=(0,f.useTheme)(),[s,c]=(0,p.useState)((0,n.getPrograms)(1e3)),[w,z]=(0,p.useState)(4),_=s.slice(0,w);return(0,v.jsx)(l.Page,{children:(0,v.jsx)(h.DefaultFocus,{children:(0,v.jsxs)(P,{children:[(0,v.jsx)(u.SpatialNavigationNode,{orientation:"horizontal",children:(0,v.jsx)(V,{children:(0,v.jsx)(S.ProgramList,{data:_,listRef:null,containerStyle:{height:t.sizes.program.portrait.height+b}})})}),(0,v.jsx)(x.Spacer,{gap:"$6"}),(0,v.jsxs)(o.SpatialNavigationView,{direction:"vertical",children:[(0,v.jsx)(j.Button,{label:"Add item",onSelect:()=>{z((t=>1e3===t?t:t+1))}}),(0,v.jsx)(j.Button,{label:"Remove item",onSelect:()=>{z((t=>0===t?t:t-1))}}),(0,v.jsx)(j.Button,{label:"Shuffle items",onSelect:()=>{c((t=>[...t].sort((()=>Math.random()-.5))))}})]})]})})})};const P=s.default.View({flex:1,padding:(0,c.scaledPixels)(30)}),V=s.default.View((({theme:t})=>({flexDirection:'row',gap:t.spacings.$4,padding:t.spacings.$4})))}),2098,[1,278,499,512,452,274,428,427,508,546,16,511,130,429]); -__d((function(g,r,i,a,m,e,d){var o=r(d[0]);Object.defineProperty(e,"__esModule",{value:!0}),e.AsynchronousContent=void 0;var t=r(d[1]),n=r(d[2]),s=r(d[3]),l=r(d[4]),h=r(d[5]),c=r(d[6]),u=r(d[7]),p=o(r(d[8])),y=o(r(d[9])),j=r(d[10]);e.AsynchronousContent=()=>{const[o,y]=(0,u.useState)(!1),[b,w]=(0,u.useState)(!1);return(0,j.jsx)(n.Page,{children:(0,j.jsxs)(h.Box,{padding:'$8',children:[(0,j.jsx)(l.Typography,{children:'Here are some details about a common pitfall with this library: how do I show/hide focusable elements properly?'}),(0,j.jsx)(l.Typography,{children:'Use this button to trigger an asynchronous show/hide'}),(0,j.jsxs)(t.SpatialNavigationView,{direction:"horizontal",children:[(0,j.jsx)(s.Button,{label:o?'Hide':'Show',onSelect:async()=>{var o;b||(w(!0),await(o=1e3,new Promise((t=>setTimeout(t,o)))),w(!1),y((o=>!o)))}}),(0,j.jsx)(c.Spacer,{gap:"$8",direction:"horizontal"}),b&&(0,j.jsx)(p.default,{color:"white",size:'large'})]}),(0,j.jsx)(c.Spacer,{gap:"$8"}),(0,j.jsx)(l.Typography,{children:'Then, try out the focus below. Focus should not be messed up after asynchronous modifications :)'}),(0,j.jsxs)(x,{direction:"horizontal",children:[(0,j.jsx)(s.Button,{label:"First button"}),(0,j.jsx)(t.SpatialNavigationNode,{children:o&&(0,j.jsx)(s.Button,{label:"Second button (asynchronously showed)"})}),(0,j.jsx)(s.Button,{label:"Third button"})]}),(0,j.jsx)(l.Typography,{children:"Check out the code to understand how it is done."})]})})};const x=(0,y.default)(t.SpatialNavigationView)({gap:40})}),2099,[1,424,499,546,509,507,508,16,380,278,429]); +__d((function(g,r,i,a,m,e,d){var t=r(d[0]);Object.defineProperty(e,"__esModule",{value:!0}),e.ListWithVariableSize=void 0;var s=t(r(d[1])),l=r(d[2]),n=r(d[3]),o=r(d[4]),c=r(d[5]),h=r(d[6]),u=r(d[7]),x=r(d[8]),j=r(d[9]),p=r(d[10]),S=r(d[11]),f=r(d[12]),v=r(d[13]);const b=(0,c.scaledPixels)(70);e.ListWithVariableSize=()=>{const t=(0,f.useTheme)(),[s,c]=(0,p.useState)((0,n.getPrograms)(1e3)),[V,z]=(0,p.useState)(4),_=s.slice(0,V);return(0,v.jsx)(l.Page,{children:(0,v.jsx)(h.DefaultFocus,{children:(0,v.jsxs)(P,{children:[(0,v.jsx)(u.SpatialNavigationNode,{orientation:"horizontal",children:(0,v.jsx)(w,{children:(0,v.jsx)(S.ProgramsRow,{data:_,containerStyle:{height:t.sizes.program.portrait.height+b}})})}),(0,v.jsx)(x.Spacer,{gap:"$6"}),(0,v.jsxs)(o.SpatialNavigationView,{direction:"vertical",children:[(0,v.jsx)(j.Button,{label:"Add item",onSelect:()=>{z((t=>1e3===t?t:t+1))}}),(0,v.jsx)(j.Button,{label:"Remove item",onSelect:()=>{z((t=>0===t?t:t-1))}}),(0,v.jsx)(j.Button,{label:"Shuffle items",onSelect:()=>{c((t=>[...t].sort((()=>Math.random()-.5))))}})]})]})})})};const P=s.default.View({flex:1,padding:(0,c.scaledPixels)(30)}),w=s.default.View((({theme:t})=>({flexDirection:'row',gap:t.spacings.$4,padding:t.spacings.$4})))}),2098,[1,278,499,512,452,274,428,427,508,546,16,511,130,429]); +__d((function(g,r,i,a,m,e,d){var o=r(d[0]);Object.defineProperty(e,"__esModule",{value:!0}),e.AsynchronousContent=void 0;var t=r(d[1]),n=r(d[2]),s=r(d[3]),l=r(d[4]),h=r(d[5]),c=r(d[6]),u=r(d[7]),p=o(r(d[8])),y=o(r(d[9])),j=r(d[10]);e.AsynchronousContent=()=>{const[o,y]=(0,u.useState)(!1),[b,w]=(0,u.useState)(!1);return(0,j.jsx)(n.Page,{children:(0,j.jsxs)(h.Box,{padding:'$8',children:[(0,j.jsx)(l.Typography,{children:'Here are some details about a common pitfall with this library: how do I show/hide focusable elements properly?'}),(0,j.jsx)(l.Typography,{children:'Use this button to trigger an asynchronous show/hide'}),(0,j.jsxs)(t.SpatialNavigationView,{direction:"horizontal",children:[(0,j.jsx)(s.Button,{label:o?'Hide':'Show',onSelect:async()=>{var o;b||(w(!0),await(o=1e3,new Promise((t=>setTimeout(t,o)))),w(!1),y((o=>!o)))}}),(0,j.jsx)(c.Spacer,{gap:"$8",direction:"horizontal"}),b&&(0,j.jsx)(p.default,{color:"white",size:'large'})]}),(0,j.jsx)(c.Spacer,{gap:"$8"}),(0,j.jsx)(l.Typography,{children:'Then, try out the focus below. Focus should not be messed up after asynchronous modifications :)'}),(0,j.jsxs)(x,{direction:"horizontal",children:[(0,j.jsx)(s.Button,{label:"First button"}),(0,j.jsx)(t.SpatialNavigationNode,{children:o?(0,j.jsx)(s.Button,{label:"Second button (asynchronously showed)"}):(0,j.jsx)(j.Fragment,{})}),(0,j.jsx)(s.Button,{label:"Third button"})]}),(0,j.jsx)(l.Typography,{children:"Check out the code to understand how it is done."})]})})};const x=(0,y.default)(t.SpatialNavigationView)({gap:40})}),2099,[1,424,499,546,509,507,508,16,380,278,429]); __r(0); \ No newline at end of file diff --git a/index.html b/index.html index 74aa18c7..2da598ad 100644 --- a/index.html +++ b/index.html @@ -32,6 +32,6 @@
- +