Skip to content

Commit 53175c6

Browse files
kbrabrandagilgur5
authored andcommitted
(refactor): Move defaults from constructor to defaultProps
1 parent 84005d3 commit 53175c6

File tree

1 file changed

+25
-27
lines changed

1 file changed

+25
-27
lines changed

src/index.js

Lines changed: 25 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -16,19 +16,18 @@ export default class SignatureCanvas extends Component {
1616
onBegin: PropTypes.func,
1717
canvasProps: PropTypes.object
1818
}
19-
constructor(props) {
20-
super(props);
21-
22-
this.velocityFilterWeight = this.props.velocityFilterWeight || 0.7;
23-
this.minWidth = this.props.minWidth || 0.5;
24-
this.maxWidth = this.props.maxWidth || 2.5;
25-
this.dotSize = this.props.dotSize || function () {
26-
return (this.minWidth + this.maxWidth) / 2;
27-
};
28-
this.penColor = this.props.penColor || "black";
29-
this.backgroundColor = this.props.backgroundColor || "rgba(0,0,0,0)";
30-
this.onEnd = this.props.onEnd;
31-
this.onBegin = this.props.onBegin;
19+
20+
static defaultProps = {
21+
velocityFilterWeight: 0.7,
22+
minWidth: 0.5,
23+
maxWidth: 2.5,
24+
dotSize: () => {
25+
return (this.props.minWidth + this.props.maxWidth) / 2
26+
},
27+
penColor: 'black',
28+
backgroundColor: 'rgba(0,0,0,0)',
29+
onEnd: () => {},
30+
onBegin: () => {}
3231
}
3332

3433
componentDidMount () {
@@ -48,7 +47,7 @@ export default class SignatureCanvas extends Component {
4847
let ctx = this._ctx
4948
let canvas = this._canvas
5049

51-
ctx.fillStyle = this.backgroundColor
50+
ctx.fillStyle = this.props.backgroundColor
5251
ctx.clearRect(0, 0, canvas.width, canvas.height)
5352
ctx.fillRect(0, 0, canvas.width, canvas.height)
5453
this._reset()
@@ -110,9 +109,9 @@ export default class SignatureCanvas extends Component {
110109
_reset = () => {
111110
this.points = [];
112111
this._lastVelocity = 0;
113-
this._lastWidth = (this.minWidth + this.maxWidth) / 2;
112+
this._lastWidth = (this.props.minWidth + this.props.maxWidth) / 2
114113
this._isEmpty = true;
115-
this._ctx.fillStyle = this.penColor;
114+
this._ctx.fillStyle = this.props.penColor
116115
}
117116

118117
_handleMouseEvents = () => {
@@ -193,14 +192,14 @@ export default class SignatureCanvas extends Component {
193192
_strokeBegin = (ev) => {
194193
this._reset()
195194
this._strokeUpdate(ev)
196-
if (typeof this.onBegin === 'function') {
197-
this.onBegin(ev)
198-
}
195+
this.props.onBegin(ev)
199196
}
200197

201198
_strokeDraw = (point) => {
202-
var ctx = this._ctx,
203-
dotSize = typeof(this.dotSize) === 'function' ? this.dotSize() : this.dotSize;
199+
let ctx = this._ctx
200+
let dotSize = typeof(this.props.dotSize) === 'function'
201+
? this.props.dotSize()
202+
: this.props.dotSize
204203

205204
ctx.beginPath();
206205
this._drawPoint(point.x, point.y, dotSize);
@@ -215,9 +214,8 @@ export default class SignatureCanvas extends Component {
215214
if (!canDrawCurve && point) {
216215
this._strokeDraw(point);
217216
}
218-
if (typeof this.onEnd === 'function') {
219-
this.onEnd(ev)
220-
}
217+
218+
this.props.onEnd(ev)
221219
}
222220

223221
_createPoint = (ev) => {
@@ -281,8 +279,8 @@ export default class SignatureCanvas extends Component {
281279
velocity, newWidth;
282280

283281
velocity = endPoint.velocityFrom(startPoint);
284-
velocity = this.velocityFilterWeight * velocity
285-
+ (1 - this.velocityFilterWeight) * this._lastVelocity;
282+
velocity = this.props.velocityFilterWeight * velocity
283+
+ (1 - this.props.velocityFilterWeight) * this._lastVelocity;
286284

287285
newWidth = this._strokeWidth(velocity);
288286
this._drawCurve(curve, this._lastWidth, newWidth);
@@ -333,7 +331,7 @@ export default class SignatureCanvas extends Component {
333331
}
334332

335333
_strokeWidth = (velocity) => {
336-
return Math.max(this.maxWidth / (velocity + 1), this.minWidth);
334+
return Math.max(this.props.maxWidth / (velocity + 1), this.props.minWidth)
337335
}
338336

339337
render () {

0 commit comments

Comments
 (0)