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