UNPKG

@juanddd/motion-canvas-table

Version:

![Motion Canvas Table](./assets/motion-canvas-table.png)

2 lines (1 loc) 3.46 kB
import{jsx as t,jsxs as e}from"@motion-canvas/2d/lib/jsx-runtime";import{initial as i,signal as l,Node as o,Rect as s,Circle as n,Shape as r,Layout as a,Txt as d}from"@motion-canvas/2d";import{createSignal as h,Color as c,createRef as f,all as p,tween as y,easeInOutCubic as g,makeRef as u}from"@motion-canvas/core";function m(t,e,i,l){var o,s=arguments.length,n=s<3?e:null===l?l=Object.getOwnPropertyDescriptor(e,i):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,i,l);else for(var r=t.length-1;r>=0;r--)(o=t[r])&&(n=(s<3?o(n):s>3?o(e,i,n):o(e,i))||n);return s>3&&n&&Object.defineProperty(e,i,n),n}"function"==typeof SuppressedError&&SuppressedError;class S extends o{isOn;indicatorPosition=h(0);offColor=new c("#242424");indicator=f();container=f();constructor(e){super({...e}),this.indicatorPosition(this.initialState?50:-50),this.isOn=this.initialState(),this.add(t(s,{ref:this.container,fill:this.offColor,size:[200,100],radius:100,children:t(n,{x:()=>this.indicatorPosition(),ref:this.indicator,size:[80,80],fill:"#ffffff"})}))}*toggle(t){yield*p(y(t,(t=>{const e=this.isOn?this.accent():this.offColor,i=this.isOn?this.offColor:this.accent();this.container().fill(c.lerp(e,i,g(t)))})),y(t,(t=>{const e=this.indicator().position();this.indicatorPosition(g(t,e.x,this.isOn?-50:50))}))),this.isOn=!this.isOn}}m([i(!1),l()],S.prototype,"initialState",void 0),m([i("#68ABDF"),l()],S.prototype,"accent",void 0);class w extends r{rows=[];cols=[];container=f();colNodes=[];cells=[];props;constructor(i){super(i),this.props=i,this.cols=i.data.headers.map((t=>i.data.rows.map((e=>e.find((e=>e.group===t.id)))))),this.add(t(s,{ref:this.container,width:i.width,height:i.height,fill:i.style?.background||"#fff",...i,layout:!0,padding:i.style?.gap||30,gap:i.style?.gap||30,children:i.data.headers.map(((l,n)=>e(a,{direction:"column",gap:i.style?.gap||30,children:[t(s,{fill:i.style?.headerStyle?.fill||"#444",alignItems:i.style?.headerStyle?.alignItems||"center",justifyContent:i.style?.headerStyle?.justifyContent||"center",padding:i.style?.headerStyle?.padding||10,width:"100%",children:["string","number"].includes(typeof l.label)?t(d,{fill:i.style?.headerStyle?.color||"#fff",children:l.label.toString()}):l.label}),t(o,{ref:u(this.colNodes,n),children:this.cols[n].map((e=>t(s,{width:"100%",height:"100%",fill:i.style?.rowStyle?.fill||"#444",alignItems:i.style?.rowStyle?.alignItems||"center",justifyContent:i.style?.rowStyle?.justifyContent||"center",padding:i.style?.rowStyle?.padding||10,children:e?["string","number"].includes(typeof e.label)?t(d,{fill:i.style?.headerStyle?.color||"#fff",children:e.label.toString()}):e.label:null})))})]})))}))}*addRow(e,i){const l=[];this.props.data.headers.map((t=>e.find((e=>e.group===t.id)))).map(((e,i)=>this.colNodes[i].add(t(s,{ref:u(l,i),width:"100%",fill:this.props.style?.rowStyle?.fill||"#444",alignItems:this.props.style?.rowStyle?.alignItems||"center",justifyContent:this.props.style?.rowStyle?.justifyContent||"center",height:"100%",padding:0,opacity:0,children:e?["string","number"].includes(typeof e.label)?t(d,{fill:this.props.style?.headerStyle?.color||"#fff",children:e.label.toString()}):e.label:null})))),yield*p(...l.map((t=>t.opacity(1,i))),...l.map((t=>t.padding(this.props.style?.rowStyle?.padding||10,i))))}*removeRow(t,e){}*addCol(t,e){}*removeCol(t,e){}*highlightRow(t,e){}*highlightCol(t,e){}*highlightCell(t,e,i){}}export{S as Switch,w as Table};