Skip to content

Commit c809b72

Browse files
author
Tomáš Vojtášek
committed
Upgrade eslint & prettier
1 parent 191415f commit c809b72

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+1907
-1663
lines changed

‎.eslintrc.js

+10-5
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
module.exports = {
2-
parser: "babel-eslint",
2+
parser: 'babel-eslint',
33
env: {
44
browser: true,
55
es6: true,
6-
node: true
6+
node: true,
77
},
8-
plugins: ["prettier", "react"],
9-
extends: ["prettier", "plugin:react/recommended", "eslint:recommended"]
10-
};
8+
plugins: ['prettier', 'react'],
9+
extends: ['prettier', 'plugin:react/recommended', 'eslint:recommended'],
10+
settings: {
11+
react: {
12+
version: 'detect'
13+
}
14+
}
15+
}

‎.prettierrc.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
trailingComma: "es5",
3+
tabWidth: 2,
4+
semi: false,
5+
singleQuote: true
6+
}

‎package.json

+7-7
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@
1212
"storybook": "start-storybook -p 6006 -c .storybook",
1313
"build-storybook": "build-storybook -c .storybook",
1414
"prepare": "yarn build",
15-
"prettier": "prettier src/**/* --write",
16-
"lint": "eslint src/**/*"
15+
"prettier": "prettier {src,stories}/**/* --write",
16+
"lint": "eslint 'src/**/*' 'stories/**/*'"
1717
},
1818
"keywords": [
1919
"react",
@@ -36,12 +36,12 @@
3636
"babel-preset-stage-2": "^6.24.1",
3737
"babel-runtime": "^6.26.0",
3838
"d3-scale": "^1.0.6",
39-
"eslint": "^4.1.1",
40-
"eslint-config-prettier": "^2.9.0",
41-
"eslint-plugin-prettier": "^2.6.0",
42-
"eslint-plugin-react": "^7.8.2",
39+
"eslint": "^5.16.0",
40+
"eslint-config-prettier": "^4.3.0",
41+
"eslint-plugin-prettier": "^3.1.0",
42+
"eslint-plugin-react": "^7.13.0",
4343
"lodash.range": "^3.2.0",
44-
"prettier": "^1.12.1",
44+
"prettier": "^1.17.1",
4545
"react": "^16.8.6",
4646
"react-dom": "^16.8.6",
4747
"rimraf": "^2.6.2"

‎src/Canvas.js

+14-14
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,37 @@
1-
"use strict";
1+
'use strict'
22

33
// Note that this class intentionally does not use PooledClass.
44
// DrawingUtils manages <canvas> pooling for more fine-grained control.
55

66
function Canvas(width, height, scale) {
77
// Re-purposing an existing canvas element.
88
if (!this._canvas) {
9-
this._canvas = document.createElement("canvas");
9+
this._canvas = document.createElement('canvas')
1010
}
1111

12-
this.width = width;
13-
this.height = height;
14-
this.scale = scale || window.devicePixelRatio;
12+
this.width = width
13+
this.height = height
14+
this.scale = scale || window.devicePixelRatio
1515

16-
this._canvas.width = this.width * this.scale;
17-
this._canvas.height = this.height * this.scale;
18-
this._canvas.getContext("2d").scale(this.scale, this.scale);
16+
this._canvas.width = this.width * this.scale
17+
this._canvas.height = this.height * this.scale
18+
this._canvas.getContext('2d').scale(this.scale, this.scale)
1919
}
2020

2121
Object.assign(Canvas.prototype, {
2222
getRawCanvas: function() {
23-
return this._canvas;
23+
return this._canvas
2424
},
2525

2626
getContext: function() {
27-
return this._canvas.getContext("2d");
28-
}
29-
});
27+
return this._canvas.getContext('2d')
28+
},
29+
})
3030

3131
// PooledClass:
3232

3333
// Be fairly conserative - we are potentially drawing a large number of medium
3434
// to large size images.
35-
Canvas.poolSize = 30;
35+
Canvas.poolSize = 30
3636

37-
export default Canvas;
37+
export default Canvas

‎src/CanvasComponent.js

+65-64
Original file line numberDiff line numberDiff line change
@@ -1,149 +1,150 @@
1-
import RenderLayer from "./RenderLayer";
2-
import { make } from "./FrameUtils";
3-
import * as EventTypes from "./EventTypes";
4-
import { emptyObject } from "./utils";
1+
import RenderLayer from './RenderLayer'
2+
import { make } from './FrameUtils'
3+
import * as EventTypes from './EventTypes'
4+
import { emptyObject } from './utils'
55

6-
let LAYER_GUID = 1;
6+
let LAYER_GUID = 1
77

88
export default class CanvasComponent {
99
constructor(type) {
10-
this.type = type;
11-
this.subscriptions = new Map();
12-
this.listeners = new Map();
13-
this.node = new RenderLayer(this);
14-
this._layerId = LAYER_GUID++;
10+
this.type = type
11+
this.subscriptions = new Map()
12+
this.listeners = new Map()
13+
this.node = new RenderLayer(this)
14+
this._layerId = LAYER_GUID++
1515
}
1616

1717
putEventListener = (type, listener) => {
18-
const subscriptions = this.subscriptions;
19-
const listeners = this.listeners;
18+
const subscriptions = this.subscriptions
19+
const listeners = this.listeners
2020

21-
let isListenerDifferent = false;
21+
let isListenerDifferent = false
2222
if (listeners.get(type) !== listener) {
23-
listeners.set(type, listener);
24-
isListenerDifferent = true;
23+
listeners.set(type, listener)
24+
isListenerDifferent = true
2525
}
2626

2727
if (listener) {
2828
// Add subscription if this is the first listener of the given type
2929
// or the new listener is different from the current listener.
3030
if (!subscriptions.has(type) || isListenerDifferent) {
31-
subscriptions.set(type, this.node.subscribe(type, listener, this));
31+
subscriptions.set(type, this.node.subscribe(type, listener, this))
3232
}
3333
} else {
34-
const subscription = subscriptions.get(type);
34+
const subscription = subscriptions.get(type)
3535
if (subscription) {
36-
subscription();
37-
subscriptions.delete(type);
36+
subscription()
37+
subscriptions.delete(type)
3838
}
3939
}
40-
};
40+
}
4141

4242
destroyEventListeners = () => {
43-
this.listeners.clear();
44-
this.subscriptions.clear();
45-
this.node.destroyEventListeners();
46-
};
43+
this.listeners.clear()
44+
this.subscriptions.clear()
45+
this.node.destroyEventListeners()
46+
}
4747

4848
setStyleFromProps = (layer, props) => {
49-
let style = emptyObject;
49+
let style = emptyObject
5050

5151
if (props.style) {
52-
style = props.style;
53-
layer._originalStyle = style;
52+
style = props.style
53+
layer._originalStyle = style
5454
} else {
55-
layer._originalStyle = null;
55+
layer._originalStyle = null
5656
}
5757

5858
if (!layer.frame) {
59-
layer.frame = make(0, 0, 0, 0);
59+
layer.frame = make(0, 0, 0, 0)
6060
}
6161

62-
const frame = layer.frame;
63-
const l = style.left || 0;
64-
const t = style.top || 0;
65-
const w = style.width || 0;
66-
const h = style.height || 0;
62+
const frame = layer.frame
63+
const l = style.left || 0
64+
const t = style.top || 0
65+
const w = style.width || 0
66+
const h = style.height || 0
6767

68-
if (frame.x !== l) frame.x = l;
69-
if (frame.y !== t) frame.y = t;
70-
if (frame.width !== w) frame.width = w;
71-
if (frame.height !== h) frame.height = h;
68+
if (frame.x !== l) frame.x = l
69+
if (frame.y !== t) frame.y = t
70+
if (frame.width !== w) frame.width = w
71+
if (frame.height !== h) frame.height = h
7272

7373
// Common layer properties
74-
if (layer.alpha !== style.alpha) layer.alpha = style.alpha;
74+
if (layer.alpha !== style.alpha) layer.alpha = style.alpha
7575

7676
if (layer.backgroundColor !== style.backgroundColor)
77-
layer.backgroundColor = style.backgroundColor;
77+
layer.backgroundColor = style.backgroundColor
7878

7979
if (layer.borderColor !== style.borderColor)
80-
layer.borderColor = style.borderColor;
80+
layer.borderColor = style.borderColor
8181

8282
if (layer.borderWidth !== style.borderWidth)
83-
layer.borderWidth = style.borderWidth;
83+
layer.borderWidth = style.borderWidth
8484

8585
if (layer.borderRadius !== style.borderRadius)
86-
layer.borderRadius = style.borderRadius;
86+
layer.borderRadius = style.borderRadius
8787

88-
if (layer.clipRect !== style.clipRect) layer.clipRect = style.clipRect;
88+
if (layer.clipRect !== style.clipRect) layer.clipRect = style.clipRect
8989

90-
if (layer.scale !== style.scale) layer.scale = style.scale;
90+
if (layer.scale !== style.scale) layer.scale = style.scale
9191

9292
if (
9393
layer.translateX !== style.translateX ||
9494
layer.translateY !== style.translateY
9595
) {
96-
layer.translateX = style.translateX;
97-
layer.translateY = style.translateY;
96+
layer.translateX = style.translateX
97+
layer.translateY = style.translateY
9898
}
9999

100-
if (layer.zIndex !== style.zIndex) layer.zIndex = style.zIndex;
100+
if (layer.zIndex !== style.zIndex) layer.zIndex = style.zIndex
101101

102102
// Shadow
103103
if (layer.shadowColor !== style.shadowColor)
104-
layer.shadowColor = style.shadowColor;
104+
layer.shadowColor = style.shadowColor
105105

106106
if (layer.shadowBlur !== style.shadowBlur)
107-
layer.shadowBlur = style.shadowBlur;
107+
layer.shadowBlur = style.shadowBlur
108108

109109
if (layer.shadowOffsetX !== style.shadowOffsetX)
110-
layer.shadowOffsetX = style.shadowOffsetX;
110+
layer.shadowOffsetX = style.shadowOffsetX
111111

112112
if (layer.shadowOffsetY !== style.shadowOffsetY)
113-
layer.shadowOffsetY = style.shadowOffsetY;
114-
};
113+
layer.shadowOffsetY = style.shadowOffsetY
114+
}
115115

116116
applyCommonLayerProps = (prevProps, props) => {
117-
const layer = this.node;
117+
const layer = this.node
118118

119119
// Generate backing store ID as needed.
120120
if (props.useBackingStore && layer.backingStoreId !== this._layerId) {
121-
layer.backingStoreId = this._layerId;
121+
layer.backingStoreId = this._layerId
122122
} else if (!props.useBackingStore && layer.backingStoreId) {
123-
layer.backingStoreId = null;
123+
layer.backingStoreId = null
124124
}
125125

126126
// Register events
127127
for (const type in EventTypes) {
128128
if (prevProps[type] !== props[type]) {
129+
// eslint-disable-next-line no-console
129130
console.log(props[type], type)
130-
this.putEventListener(EventTypes[type], props[type]);
131+
this.putEventListener(EventTypes[type], props[type])
131132
}
132133
}
133134

134-
this.setStyleFromProps(layer, props);
135-
};
135+
this.setStyleFromProps(layer, props)
136+
}
136137

137-
getLayer = () => this.node;
138+
getLayer = () => this.node
138139

139140
/**
140141
* Resets all the state on this CanvasComponent so it can be added to a pool for re-use.
141142
*
142143
* @return {RenderLayer}
143144
*/
144145
reset = () => {
145-
this.destroyEventListeners();
146-
this._originalStyle = null;
147-
this.node.reset(this);
148-
};
146+
this.destroyEventListeners()
147+
this._originalStyle = null
148+
this.node.reset(this)
149+
}
149150
}

0 commit comments

Comments
 (0)