You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
import{useState}from"react";import{Flipped,Flipper,spring}from"react-flip-toolkit";constDATA_FILTER=[{id: 1,title: "Twas brillig and the slithy toves"},{id: 2,title: "Did gyre and gimbel in the wabe"},{id: 3,title: "All mimsy were the borogroves"},{id: 4,title: "The mome raths outgrabe"},{id: 5,title: "Beware the jabberwock my son!!"},{id: 6,title: "The jaws that bite, the claws that snatch"}];functionCard({ id, title, type, stagger, addToFilteredIds }: {id,title: string,type,stagger,addToFilteredIds}){constonElementAppear=(el,index)=>spring({onUpdate: val=>{el.style.opacity=val;},delay: index*50});constonExit=type=>(el: HTMLElement,index: number,removeElement: ()=>void)=>{spring({config: {overshootClamping: true},onUpdate: val=>{el.style.transform=`scale${type==="grid" ? "X" : "Y"}(${1-(valasany)})`;},delay: index*50,onComplete: removeElement});return()=>{el.style.opacity="";removeElement();};};constonGridExit=onExit("grid");constonListExit=onExit("list");constshouldFlip=(prev,current)=>{if(prev.type!==current.type){returntrue;}returnfalse;};constflipId=`item-${id}`;return(<FlippedflipId={flipId}onAppear={onElementAppear}onExit={type ==="grid" ? onGridExit : onListExit}key={flipId}stagger={stagger}shouldInvert={shouldFlip}><liclassName="fm-item"><FlippedinverseFlipId={flipId}><div><FlippedflipId={`${flipId}-content`}translateshouldFlip={shouldFlip}delayUntil={flipId}><div><h3>{title}</h3> <p>{title}</p></div></Flipped><FlippedflipId={`${flipId}-button`}shouldFlip={shouldFlip}delayUntil={flipId}><buttonclassName="fm-remove"onClick={()=>addToFilteredIds(id)}>×</button></Flipped></div></Flipped></li></Flipped>);}exportfunctionListExample(){const[sort,setSort]=useState<"asc"|"desc">("asc")const[filteredIds,setFilteredIds]=useState<any[]>([])conststate={type: "grid",sort: sort,filteredIds: filteredIds,stagger: "none",spring: "noWobble"};constaddToFilteredIds=id=>{setFilteredIds([...filteredIds,id])};return(<divclassName="fm-example"><FlipperflipKey={`${state.type}-${state.sort}-${JSON.stringify(state.filteredIds)}-${JSON.stringify(state.stagger)}`}spring={state.spring}staggerConfig={{default: {reverse: state.stagger!=="forward",speed: 1}}}decisionData={state}><divclassName="fm-flex-container"><fieldset><legend>Sort</legend><labelonClick={()=>{setSort('asc')}}><inputtype="radio"name="sort"checked={state.sort==="asc"}/>asc</label><labelonClick={()=>{setSort('desc')}}><inputtype="radio"name="sort"checked={state.sort==="desc"}/>desc</label></fieldset></div><div>{!!state.filteredIds.length&&(<buttonclassName="fm-show-all"onClick={()=>{setFilteredIds([])}}>showallcards</button>)}</div><FlippedflipId="list"><divclassName={state.type==="grid" ? "fm-grid" : "fm-list"}><FlippedinverseFlipId="list"><ulclassName="list-contents">{[...DATA_FILTER].filter(d=>state.filteredIds.includes(d.id)===false).sort((a,b)=>{if(state.sort==="asc"){returna.id-b.id;}else{returnb.id-a.id;}}).map(({ title, id })=>(<Cardid={id}title={title}stagger={state.stagger}type={state.type}key={id}addToFilteredIds={addToFilteredIds}/>))}</ul></Flipped></div></Flipped></Flipper></div>);}
Each Flipped component must wrap a single child
I also test without remoove button and again error ...
no error on my lint*
The text was updated successfully, but these errors were encountered:
I also test without remoove button and again error ...
no error on my lint*
The text was updated successfully, but these errors were encountered: