2 lines
1.8 KiB
JavaScript
2 lines
1.8 KiB
JavaScript
import t,{Component as s}from"react";var i=class extends s{constructor(s){super(s),this.t=()=>this.i.current.offsetWidth,this.h=()=>this.i.current.offsetHeight,this.i=t.createRef(),this.state={path:""},this.l=0,this.o=0,this.p=0,this.u=this.u.bind(this)}m(){const t=[];for(let s=0;s<=Math.max(this.props.points,1);s++){const i=100,h=s/this.props.points*this.t(),e=(this.p+(s+s%this.props.points))*this.props.speed*i,n=Math.sin(e/i)*this.props.amplitude,a=Math.sin(e/i)*n+this.props.height;t.push({x:h,y:a})}return t}$(t){let s=`M ${t[0].x} ${t[0].y}`;const i={x:(t[1].x-t[0].x)/2,y:t[1].y-t[0].y+t[0].y+(t[1].y-t[0].y)},h=(t,s)=>` C ${t.x} ${t.y} ${t.x} ${t.y} ${s.x} ${s.y}`;s+=h(i,t[1]);let e=i;for(let i=1;i<t.length-1;i++)e={x:t[i].x-e.x+t[i].x,y:t[i].y-e.y+t[i].y},s+=h(e,t[i+1]);return s+=` L ${this.t()} ${this.h()}`,s+=` L 0 ${this.h()} Z`,s}v(){this.setState({path:this.$(this.m())})}M(){if(!this.props.paused){const t=new Date;this.o+=t-this.l,this.l=t}this.p=this.o*Math.PI/1e3,this.v()}u(){this.M(),this._&&this.D()}D(){this._=window.requestAnimationFrame(this.u),this.l=new Date}componentDidMount(){this._||this.D()}componentWillUnmount(){window.cancelAnimationFrame(this._),this._=0}render(){const{style:s,className:i,fill:h,paused:e,children:n,id:a,svgId:d,svgPathId:l,d:o,ref:r,height:c,amplitude:p,speed:u,points:w,...f}=this.props;/*#__PURE__*/return t.createElement("div",{style:{width:"100%",display:"inline-block",...s},className:i,id:a,ref:this.i},/*#__PURE__*/t.createElement("svg",{width:"100%",height:"100%",version:"1.1",xmlns:"http://www.w3.org/2000/svg",id:d},n,/*#__PURE__*/t.createElement("path",Object.assign({},{d:this.state.path,fill:h,id:l},f))))}};const h={fill:"#fff",paused:!1,height:20,amplitude:20,speed:.15,points:3},e=s=>{let{options:e,...n}=s;/*#__PURE__*/return t.createElement(i,Object.assign({},h,e,n))};e.displayName="Wave";export{e as default};
|