// return
// rate: 30,
// min: 1000,
// max: 30000,
// step: 100,
// }}
// />;
// eslint-disable-next-line import/no-extraneous-dependencies
import React, { PureComponent } from 'react';
import './index.less';
// eslint-disable-next-line import/no-extraneous-dependencies
import cn from 'classnames';
import { connect } from '@alipay/bigfish/sdk';
const FPS = 60;
const STEP_WIDTH = 100;
const acc = 1000;
const doAnimation = fn => window.requestAnimationFrame ? window.requestAnimationFrame(fn) : setTimeout(fn, 1000 / FPS);
const cancelAnimation = identify => {
if (window.cancelAnimationFrame) {
window.cancelAnimationFrame(identify);
} else {
window.clearTimeout(identify);
}
};
@connect(({ context }) => ({ context }))
export class ProfitCalculator extends PureComponent {
position = 0;
lastPosition = -100;
hasStopped = true;
// eslint-disable-next-line react/sort-comp
moveRuler(delta) {
// eslint-disable-next-line react/destructuring-assignment
const { defaultValue, step } = this.props.config;
const nexPos = this.position - delta;
if (nexPos < this.minPos - STEP_WIDTH) {
this.position = this.minPos - STEP_WIDTH;
} else if (nexPos > this.maxPos + STEP_WIDTH) {
this.position = this.maxPos + STEP_WIDTH;
} else {
this.position = nexPos;
}
// 此段逻辑最好能抽离出去
const nextAmount = Math.round(this.position / STEP_WIDTH) * step + defaultValue;
// eslint-disable-next-line react/destructuring-assignment
if (this.state.amount !== nextAmount) {
this.setState({ amount: nextAmount });
}
}
onDeviceOrientation = e => {
const { gamma, beta } = e;
const motivation = gamma * (90 - beta);
if (motivation > 1000 || motivation < -1000) {
// begin drop
this.beginDrop(motivation);
} else {
// stop drop
this.endDrop();
}
};
beginDrop(motivation) {
this.hasStopped = false;
this.draw();
this.motivation = motivation;
if (!this.dropping) {
this.dropping = true;
this.drop(new Date());
}
}
endDrop() {
if (this.dropping) {
this.dropping = false;
if (this.decelerateToken) {
cancelAnimation(this.decelerateToken);
}
this.decelerate(new Date());
}
}
drop(dt) {
if (this.dropping) {
const now = new Date();
const sec = (now - dt) / 1000;
const speed = 1;
const delta = (this.motivation > 0 ? this.motivation - 1000 : this.motivation + 1000) * speed * sec;
this.moveRuler(delta);
this.dropToken = doAnimation(() => {
this.drop(now);
});
}
}
registerMotion() {
window.addEventListener('deviceorientation', this.onDeviceOrientation);
}
// eslint-disable-next-line no-unused-vars
draw(e) {
// draw logic // this.position
if (Math.abs(this.position - this.lastPosition) < 0.1) {
// do nothing because men cannot recognize very little movement
} else {
const { ctx, canvasWidth, canvasHeight, position } = this;
this.lastPosition = position;
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
// eslint-disable-next-line react/destructuring-assignment
const { defaultValue, min, max, step, magic } = this.props.config;
const begin = Math.floor((position - canvasWidth / 2) / STEP_WIDTH) * step + defaultValue;
const end = Math.ceil((position + canvasWidth / 2) / STEP_WIDTH) * step + defaultValue;
ctx.fillStyle = '#bbbbbb';
ctx.font = '24px "PingFang SC"';
for (let cur = begin; cur <= end; cur += (step / 10)) {
if (cur > max || cur < min || cur % step === 0) {
// eslint-disable-next-line no-continue
continue;
}
const posX = (cur - defaultValue) / step * STEP_WIDTH - position + canvasWidth / 2;
ctx.fillRect(posX - 0.5, canvasHeight - 10, 1, 10);
}
for (let cur = begin; cur <= end; cur += step) {
if (cur > max || cur < min) {
// eslint-disable-next-line no-continue
continue;
}
const posX = (cur - defaultValue) / step * STEP_WIDTH - position + canvasWidth / 2;
ctx.fillRect(posX - 0.5, canvasHeight - 20, 1, 20);
}
for (let cur = begin; cur <= end; cur += step) {
if (cur > max || cur < min) {
// eslint-disable-next-line no-continue
continue;
}
const posX = (cur - defaultValue) / step * STEP_WIDTH - position + canvasWidth / 2;
if (magic) {
// magic效果, 原本大小系数为30，改为25，为了解决6位数重叠问题
// eslint-disable-next-line no-restricted-properties
const fontSize = Math.pow((canvasWidth / 2 - Math.abs(posX - canvasWidth / 2)) / (canvasWidth / 2), 2) * 25 + 10;
const dark = parseInt(255 - fontSize * 170 / 40, 10);
ctx.font = ${fontSize}px "PingFang SC";
ctx.fillStyle = rgb(${dark}, ${dark}, ${dark});
}
ctx.fillText(cur, posX - ctx.measureText(cur).width / 2, canvasHeight - 40);
}
}
if (!this.hasStopped) {
// eslint-disable-next-line no-shadow
doAnimation(e => this.draw(e));
}
}
startRender() {
this.hasStopped = false;
this.draw();
}
endRender() {
this.hasStopped = true;
}
handleScroll(e) {
if (this.prevX) {
const curX = e.nativeEvent.touches[0].clientX;
const delta = curX - this.prevX;
this.prevSpeed = (curX - this.prevX) / (e.nativeEvent.timeStamp - this.prevStamp) * 1000;
this.prevX = curX;
this.prevStamp = e.nativeEvent.timeStamp;
this.moveRuler(delta);
}
}
handleTouchStart(e) {
this.prevX = e.nativeEvent.touches[0].clientX;
this.prevStamp = e.nativeEvent.timeStamp;
// stop decelerate
if (this.decelerateToken) {
cancelAnimation(this.decelerateToken);
}
if (this.dockToken) {
cancelAnimation(this.dockToken);
}
this.startRender();
// eslint-disable-next-line react/destructuring-assignment
const { onRulerTouchStart } = this.props.config;
// eslint-disable-next-line no-unused-expressions
onRulerTouchStart && onRulerTouchStart(e);
}
// eslint-disable-next-line no-unused-vars
handleTouchEnd(e) {
this.prevX = null;
this.decelerate(new Date());
}
decelerate(dt) {
const now = new Date();
if (this.position === this.minPos - STEP_WIDTH || this.position === this.maxPos + STEP_WIDTH) {
this.prevSpeed = 0;
this.dock(now);
return;
}
const sec = (now - dt) / 1000;
const desRate = Math.abs(this.prevSpeed * 2) > acc ? Math.abs(this.prevSpeed * 2) : acc;
const curSpeed = this.prevSpeed > 0 ? this.prevSpeed - sec * desRate : this.prevSpeed + sec * desRate;
if (curSpeed * this.prevSpeed > 0) {
this.moveRuler((this.prevSpeed + curSpeed) * sec / 2);
this.prevSpeed = curSpeed;
this.decelerateToken = doAnimation(() => {
this.decelerate(now);
});
} else {
this.prevSpeed = 0;
this.dockToken = doAnimation(() => {
this.dock(now);
});
}
}
dock(dt) {
let dockPostion = Math.round(this.position / STEP_WIDTH) * STEP_WIDTH;
if (dockPostion < this.minPos) {
dockPostion = this.minPos;
} else if (dockPostion > this.maxPos) {
dockPostion = this.maxPos;
}
const distance = this.position - dockPostion;
const now = new Date();
const sec = (now - dt) / 1000;
const curSpeed = this.prevSpeed + acc / 2 * sec;
const delta = distance > 0 ? (this.prevSpeed + curSpeed) * sec / 2 : -(this.prevSpeed + curSpeed) * sec / 2;
this.dockToken = doAnimation(() => {
if (Math.abs(delta) > Math.abs(distance)) {
this.moveRuler(distance);
this.endRender();
} else {
this.moveRuler(delta);
this.prevSpeed = curSpeed;
this.dock(now);
}
});
}
// eslint-disable-next-line class-methods-use-this
preventScroll(e) {
e.preventDefault();
}
componentDidMount() {
// 默认数据
// config={{
// defaultValue,
// rate, min, max, step,
// }}
// eslint-disable-next-line react/destructuring-assignment
if (this.props.config && this.props.config.defaultValue) {
// eslint-disable-next-line react/destructuring-assignment
this.setState({ amount: this.props.config.defaultValue });
this.draw();
}
// eslint-disable-next-line react/destructuring-assignment
if (this.props.config && this.props.config.motion) {
this.registerMotion();
}
}
// eslint-disable-next-line react/sort-comp
componentDidUpdate(prevProps) {
// eslint-disable-next-line react/destructuring-assignment
if (!prevProps.shown && this.props.shown) {
// add class .p2p-mbp-calc-shown
this.body.classList.add('p2p-mbp-calc-shown');
// eslint-disable-next-line no-unused-expressions
window.Ali && window.Ali.call('setGestureBack', { val: false });
const { onShown } = this.props.config;
// eslint-disable-next-line no-unused-expressions
onShown && onShown();
} else if (prevProps.shown && !this.props.shown) {
// remove class .p2p-mbp-calc-shown
// eslint-disable-next-line react/no-did-update-set-state
this.setState({ hiding: true });
setTimeout(() => {
this.setState({ hiding: false });
}, 300);
this.body.classList.remove('p2p-mbp-calc-shown');
// eslint-disable-next-line no-unused-expressions
window.Ali && window.Ali.call('setGestureBack', { val: true });
}
}
// eslint-disable-next-line react/sort-comp
componentWillUnmount() {
if (this.decelerateToken) {
cancelAnimation(this.decelerateToken);
}
if (this.dockToken) {
cancelAnimation(this.dockToken);
}
}
// eslint-disable-next-line react/sort-comp
constructor(props) {
super(props);
this.body = document.querySelector('body');
const { defaultValue, min, max, step } = props.config;
this.minPos = (-defaultValue + min) / step * STEP_WIDTH;
this.maxPos = STEP_WIDTH * max / step + (-defaultValue / step) * STEP_WIDTH;
}
render() {
// return
return (
ref={el => {
if (el) {
// 为了修复: onTouchMove={e => e.preventDefault()}，passive event将失效， https://www.chromestatus.com/features/5093566007214080
el.addEventListener('touchmove', this.preventScroll, { passive: false });
}
}}
>
onTouchStart={e => this.handleTouchStart(e)}
onTouchMove={e => this.handleScroll(e)}
onTouchEnd={e => this.handleTouchEnd(e)}
>
style={{ height: '100%', width: '100%' }}
ref={el => {
if (el && !this.ctx) {
this.ctx = el.getContext('2d');
const width = 750;
// eslint-disable-next-line no-multi-assign
this.canvasHeight = el.height = width / el.clientWidth * el.clientHeight;
// eslint-disable-next-line no-multi-assign
this.canvasWidth = el.width = width;
}
}}
/>