diff --git a/babel.config.js b/babel.config.js index 274c7b18..56d4e85e 100755 --- a/babel.config.js +++ b/babel.config.js @@ -4,11 +4,11 @@ module.exports = { [ '@babel/plugin-transform-runtime', { - regenerator: true - } + regenerator: true, + }, ], ['@babel/plugin-proposal-decorators', { legacy: true }], '@babel/plugin-proposal-class-properties', - '@babel/plugin-proposal-export-default-from' - ] + '@babel/plugin-proposal-export-default-from', + ], }; diff --git a/docs/Integrations/Remote.md b/docs/Integrations/Remote.md index d154e4c7..f2c80d59 100644 --- a/docs/Integrations/Remote.md +++ b/docs/Integrations/Remote.md @@ -19,7 +19,7 @@ The client driver provides a way to connect to the server via websockets (see th ```js var socket = socketCluster.connect({ hostname: 'localhost', - port: 8000 + port: 8000, }); ``` @@ -39,13 +39,13 @@ SocketCluster client handles reconnecting for you, but you still might want to k ##### JavaScript ```js -socket.on('connect', status => { +socket.on('connect', (status) => { // Here will come the next step }); -socket.on('disconnect', code => { +socket.on('disconnect', (code) => { console.warn('Socket disconnected with code', code); }); -socket.on('error', error => { +socket.on('error', (error) => { console.warn('Socket error', error); }); ``` @@ -125,7 +125,7 @@ const message = { payload: state, id: socket.id, instanceId: window.btoa(location.href), - name: document.title + name: document.title, }; socket.emit(socket.id ? 'log' : 'log-noid', message); ``` diff --git a/jest.config.js b/jest.config.js index d05ce4eb..7e1daca2 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,3 +1,3 @@ module.exports = { - setupFiles: ['devui/tests/setup.js'] + setupFiles: ['devui/tests/setup.js'], }; diff --git a/package.json b/package.json index b21e9da9..f927d1f4 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "jest": "^26.2.2", "lerna": "^3.22.1", "lint-staged": "^10.2.11", - "prettier": "^1.19.1" + "prettier": "^2.0.5" }, "scripts": { "lerna": "lerna", diff --git a/packages/d3-state-visualizer/README.md b/packages/d3-state-visualizer/README.md index 6addc6a4..b74dc149 100644 --- a/packages/d3-state-visualizer/README.md +++ b/packages/d3-state-visualizer/README.md @@ -1,5 +1,5 @@ -d3-state-visualizer -=================== +# d3-state-visualizer + Enables real-time visualization of your application state. Created by [@romseguy](https://github.com/romseguy) and merged from [`reduxjs/d3-state-visualizer`](https://github.com/reduxjs/d3-state-visualizer). @@ -18,13 +18,13 @@ import { tree } from 'd3-state-visualizer'; const appState = { todoStore: { todos: [ - { title: 'd3'}, + { title: 'd3' }, { title: 'state' }, { title: 'visualizer' }, - { title: 'tree' } + { title: 'tree' }, ], - completedCount: 1 - } + completedCount: 1, + }, }; const render = tree(document.getElementById('root'), { @@ -35,40 +35,42 @@ const render = tree(document.getElementById('root'), { isSorted: false, widthBetweenNodesCoeff: 1.5, heightBetweenNodesCoeff: 2, - style: {border: '1px solid black'}, - tooltipOptions: {offset: {left: 30, top: 10}, indentationSize: 2} + style: { border: '1px solid black' }, + tooltipOptions: { offset: { left: 30, top: 10 }, indentationSize: 2 }, }); render(); ``` + ## Charts API The APIs are minimal and consists of a single function you provide with: + - a DOM element - a plain old JS object for options. #### Tree - This chart is a bit special as it accepts either one of the two following options, but **not both**: - +This chart is a bit special as it accepts either one of the two following options, but **not both**: + - `tree`: a properly formed tree structure such as one generated by [map2tree](https://github.com/reduxjs/redux-devtools/tree/master/packages/map2tree) or [react2tree](https://github.com/romseguy/react2tree) - `state`: a plain javascript object mapping arbitrarily nested keys to values – which will be transformed into a tree structure, again using [map2tree](https://github.com/reduxjs/redux-devtools/tree/master/packages/map2tree). Other options are listed below and have reasonable default values if you want to omit them: -Option | Type | Default | Description ---------------------------|----------|-------------|------------------------------------------------------------------------- -`id` | String | `'d3svg'` | Sets the identifier of the SVG element —i.e your chart— that will be added to the DOM element you passed as first argument -`style` | Object | `{}` | Sets the CSS style of the chart -`size` | Number | `500` | Sets size of the chart in pixels -`aspectRatio` | Float | `1.0` | Sets the chart height to `size * aspectRatio` and [viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox) in order to preserve the aspect ratio of the chart. [Great video](https://www.youtube.com/watch?v=FCOeMy7HrBc) if you want to learn more about how SVG works -`widthBetweenNodesCoeff` | Float | `1.0` | Alters the horizontal space between each node -`heightBetweenNodesCoeff` | Float | `1.0` | Alters the vertical space between each node -`isSorted` | Boolean | `false` | Sorts the chart in alphabetical order -`transitionDuration` | Number | `750` | Sets the duration of all the transitions used by the chart -`tooltipOptions` | Object | [here](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3tooltip) | Sets the options for the [tooltip](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3tooltip) that is showing up when you're hovering the nodes -`rootKeyName` | String | `'state'` | Sets the first node's name of the resulting tree structure. **Warning**: only works if you provide a `state` option -`pushMethod` | String | `'push'` | Sets the method that shall be used to add array children to the tree. **Warning**: only works if you provide a `state` option +| Option | Type | Default | Description | +| ------------------------- | ------- | -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `id` | String | `'d3svg'` | Sets the identifier of the SVG element —i.e your chart— that will be added to the DOM element you passed as first argument | +| `style` | Object | `{}` | Sets the CSS style of the chart | +| `size` | Number | `500` | Sets size of the chart in pixels | +| `aspectRatio` | Float | `1.0` | Sets the chart height to `size * aspectRatio` and [viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox) in order to preserve the aspect ratio of the chart. [Great video](https://www.youtube.com/watch?v=FCOeMy7HrBc) if you want to learn more about how SVG works | +| `widthBetweenNodesCoeff` | Float | `1.0` | Alters the horizontal space between each node | +| `heightBetweenNodesCoeff` | Float | `1.0` | Alters the vertical space between each node | +| `isSorted` | Boolean | `false` | Sorts the chart in alphabetical order | +| `transitionDuration` | Number | `750` | Sets the duration of all the transitions used by the chart | +| `tooltipOptions` | Object | [here](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3tooltip) | Sets the options for the [tooltip](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3tooltip) that is showing up when you're hovering the nodes | +| `rootKeyName` | String | `'state'` | Sets the first node's name of the resulting tree structure. **Warning**: only works if you provide a `state` option | +| `pushMethod` | String | `'push'` | Sets the method that shall be used to add array children to the tree. **Warning**: only works if you provide a `state` option | More to come... @@ -80,4 +82,4 @@ More to come... ## Roadmap -* Threshold for large arrays so only a single node is displayed instead of all the children. That single node would be exclude from searching until selected. +- Threshold for large arrays so only a single node is displayed instead of all the children. That single node would be exclude from searching until selected. diff --git a/packages/d3-state-visualizer/examples/tree/index.html b/packages/d3-state-visualizer/examples/tree/index.html index 4fea9f22..579dbccb 100644 --- a/packages/d3-state-visualizer/examples/tree/index.html +++ b/packages/d3-state-visualizer/examples/tree/index.html @@ -1,42 +1,39 @@ - - State tree with d3-state-visualizer - - - -
-
- - + .tooltip { + font-family: Consolas, Menlo, Monaco, monospace; + font-size: 0.8em; + background: rgba(0, 0, 0, 0.5); + color: white; + padding: 10px; + border-radius: 5px; + } + + + +
+ + diff --git a/packages/d3-state-visualizer/examples/tree/index.js b/packages/d3-state-visualizer/examples/tree/index.js index 8caf70f4..4e1954d3 100644 --- a/packages/d3-state-visualizer/examples/tree/index.js +++ b/packages/d3-state-visualizer/examples/tree/index.js @@ -6,18 +6,18 @@ const appState = { { title: 'd3' }, { title: 'state' }, { title: 'visualizer' }, - { title: 'tree' } + { title: 'tree' }, ], completedCount: 1, - alphabeticalOrder: true + alphabeticalOrder: true, }, someStore: { someProperty: 0, someObject: { anotherProperty: 'value', - someArray: [0, 1, 2] - } - } + someArray: [0, 1, 2], + }, + }, }; const render = tree(document.getElementById('root'), { @@ -29,7 +29,7 @@ const render = tree(document.getElementById('root'), { widthBetweenNodesCoeff: 1.5, heightBetweenNodesCoeff: 2, style: { border: '1px solid black' }, - tooltipOptions: { offset: { left: 30, top: 10 }, indentationSize: 2 } + tooltipOptions: { offset: { left: 30, top: 10 }, indentationSize: 2 }, }); render(); diff --git a/packages/d3-state-visualizer/examples/tree/server.js b/packages/d3-state-visualizer/examples/tree/server.js index 91d62452..3fced435 100644 --- a/packages/d3-state-visualizer/examples/tree/server.js +++ b/packages/d3-state-visualizer/examples/tree/server.js @@ -7,9 +7,9 @@ new WebpackDevServer(webpack(config), { hot: true, historyApiFallback: true, stats: { - colors: true - } -}).listen(3000, 'localhost', function(err) { + colors: true, + }, +}).listen(3000, 'localhost', function (err) { if (err) { // eslint-disable-next-line no-console console.log(err); diff --git a/packages/d3-state-visualizer/examples/tree/webpack.config.js b/packages/d3-state-visualizer/examples/tree/webpack.config.js index 20df4163..ae7a6613 100644 --- a/packages/d3-state-visualizer/examples/tree/webpack.config.js +++ b/packages/d3-state-visualizer/examples/tree/webpack.config.js @@ -7,16 +7,16 @@ module.exports = { entry: [ 'webpack-dev-server/client?http://localhost:3000', 'webpack/hot/only-dev-server', - './index' + './index', ], output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js', - publicPath: '/static/' + publicPath: '/static/', }, plugins: [new webpack.HotModuleReplacementPlugin()], resolve: { - extensions: ['.js'] + extensions: ['.js'], }, module: { rules: [ @@ -24,8 +24,8 @@ module.exports = { test: /\.js$/, loaders: ['babel-loader'], exclude: /node_modules/, - include: __dirname - } - ] - } + include: __dirname, + }, + ], + }, }; diff --git a/packages/d3-state-visualizer/src/charts/tree/sortAndSerialize.js b/packages/d3-state-visualizer/src/charts/tree/sortAndSerialize.js index d2f174f4..ff36ef6f 100644 --- a/packages/d3-state-visualizer/src/charts/tree/sortAndSerialize.js +++ b/packages/d3-state-visualizer/src/charts/tree/sortAndSerialize.js @@ -13,7 +13,7 @@ function sortObject(obj, strict) { const tObj = {}; Object.keys(obj) .sort() - .forEach(key => (tObj[key] = sortObject(obj[key]))); + .forEach((key) => (tObj[key] = sortObject(obj[key]))); return tObj; } diff --git a/packages/d3-state-visualizer/src/charts/tree/tree.js b/packages/d3-state-visualizer/src/charts/tree/tree.js index 605add6e..5c97a6b1 100644 --- a/packages/d3-state-visualizer/src/charts/tree/tree.js +++ b/packages/d3-state-visualizer/src/charts/tree/tree.js @@ -6,7 +6,7 @@ import { getTooltipString, toggleChildren, visit, - getNodeGroupByDepthCount + getNodeGroupByDepthCount, } from './utils'; import d3tooltip from 'd3tooltip'; @@ -21,20 +21,20 @@ const defaultOptions = { colors: { default: '#ccc', collapsed: 'lightsteelblue', - parent: 'white' + parent: 'white', }, - radius: 7 + radius: 7, }, text: { colors: { default: 'black', - hover: 'skyblue' - } + hover: 'skyblue', + }, }, link: { stroke: '#000', - fill: 'none' - } + fill: 'none', + }, }, size: 500, aspectRatio: 1.0, @@ -43,7 +43,7 @@ const defaultOptions = { top: 10, right: 10, bottom: 10, - left: 50 + left: 50, }, isSorted: false, heightBetweenNodesCoeff: 2, @@ -57,13 +57,13 @@ const defaultOptions = { right: undefined, offset: { left: 0, - top: 0 + top: 0, }, - style: undefined - } + style: undefined, + }, }; -export default function(DOMNode, options = {}) { +export default function (DOMNode, options = {}) { const { id, style, @@ -81,7 +81,7 @@ export default function(DOMNode, options = {}) { pushMethod, tree, tooltipOptions, - onClickText + onClickText, } = deepmerge(defaultOptions, options); const width = size - margin.left - margin.right; @@ -91,7 +91,7 @@ export default function(DOMNode, options = {}) { const attr = { id, - preserveAspectRatio: 'xMinYMin slice' + preserveAspectRatio: 'xMinYMin slice', }; if (!style.width) { @@ -103,10 +103,7 @@ export default function(DOMNode, options = {}) { } const root = d3.select(DOMNode); - const zoom = d3.behavior - .zoom() - .scaleExtent([0.1, 3]) - .scale(initialZoom); + const zoom = d3.behavior.zoom().scaleExtent([0.1, 3]).scale(initialZoom); const vis = root .append('svg') .attr(attr) @@ -121,7 +118,7 @@ export default function(DOMNode, options = {}) { .attr({ transform: `translate(${margin.left + style.node.radius}, ${ margin.top - }) scale(${initialZoom})` + }) scale(${initialZoom})`, }); let layout = d3.layout.tree().size([width, height]); @@ -141,8 +138,8 @@ export default function(DOMNode, options = {}) { id: 'root', parentId: null, x: height / 2, - y: 0 - } + y: 0, + }, }; // traverses a map with node positions by going through the chain @@ -169,7 +166,7 @@ export default function(DOMNode, options = {}) { if (isEmpty(data) || !data.name) { data = { name: 'error', - message: 'Please provide a state map or a tree structure' + message: 'Please provide a state map or a tree structure', }; } @@ -181,13 +178,13 @@ export default function(DOMNode, options = {}) { // top-level elemnt always has id "root" visit( data, - node => { + (node) => { maxLabelLength = Math.max(node.name.length, maxLabelLength); node.id = node.id || 'root'; }, - node => + (node) => node.children && node.children.length > 0 - ? node.children.map(c => { + ? node.children.map((c) => { c.id = `${node.id || ''}|${c.name}`; return c; }) @@ -200,69 +197,69 @@ export default function(DOMNode, options = {}) { function update() { // path generator for links - const diagonal = d3.svg.diagonal().projection(d => [d.y, d.x]); + const diagonal = d3.svg.diagonal().projection((d) => [d.y, d.x]); // set tree dimensions and spacing between branches and nodes const maxNodeCountByLevel = Math.max(...getNodeGroupByDepthCount(data)); layout = layout.size([ maxNodeCountByLevel * 25 * heightBetweenNodesCoeff, - width + width, ]); let nodes = layout.nodes(data); let links = layout.links(nodes); nodes.forEach( - node => + (node) => (node.y = node.depth * (maxLabelLength * 7 * widthBetweenNodesCoeff)) ); - const nodePositions = nodes.map(n => ({ + const nodePositions = nodes.map((n) => ({ parentId: n.parent && n.parent.id, id: n.id, x: n.x, - y: n.y + y: n.y, })); const nodePositionsById = {}; - nodePositions.forEach(node => (nodePositionsById[node.id] = node)); + nodePositions.forEach((node) => (nodePositionsById[node.id] = node)); // process the node selection let node = vis .selectAll('g.node') - .property('__oldData__', d => d) - .data(nodes, d => d.id || (d.id = ++nodeIndex)); + .property('__oldData__', (d) => d) + .data(nodes, (d) => d.id || (d.id = ++nodeIndex)); let nodeEnter = node .enter() .append('g') .attr({ class: 'node', - transform: d => { + transform: (d) => { const position = findParentNodePosition( nodePositionsById, d.id, - n => previousNodePositionsById[n.id] + (n) => previousNodePositionsById[n.id] ); const previousPosition = (position && previousNodePositionsById[position.id]) || previousNodePositionsById.root; return `translate(${previousPosition.y},${previousPosition.x})`; - } + }, }) .style({ fill: style.text.colors.default, - cursor: 'pointer' + cursor: 'pointer', }) .on({ mouseover: function mouseover() { d3.select(this).style({ - fill: style.text.colors.hover + fill: style.text.colors.hover, }); }, mouseout: function mouseout() { d3.select(this).style({ - fill: style.text.colors.default + fill: style.text.colors.default, }); - } + }, }); if (!tooltipOptions.disabled) { @@ -280,14 +277,14 @@ export default function(DOMNode, options = {}) { .append('circle') .attr({ class: 'nodeCircle', - r: 0 + r: 0, }) .on({ - click: clickedNode => { + click: (clickedNode) => { if (d3.event.defaultPrevented) return; toggleChildren(clickedNode); update(); - } + }, }); nodeEnterInnerGroup @@ -296,29 +293,29 @@ export default function(DOMNode, options = {}) { class: 'nodeText', 'text-anchor': 'middle', transform: 'translate(0,0)', - dy: '.35em' + dy: '.35em', }) .style({ - 'fill-opacity': 0 + 'fill-opacity': 0, }) - .text(d => d.name) + .text((d) => d.name) .on({ - click: onClickText + click: onClickText, }); // update the text to reflect whether node has children or not - node.select('text').text(d => d.name); + node.select('text').text((d) => d.name); // change the circle fill depending on whether it has children and is collapsed node.select('circle').style({ stroke: 'black', 'stroke-width': '1.5px', - fill: d => + fill: (d) => d._children ? style.node.colors.collapsed : d.children ? style.node.colors.parent - : style.node.colors.default + : style.node.colors.default, }); // transition nodes to their new position @@ -326,7 +323,7 @@ export default function(DOMNode, options = {}) { .transition() .duration(transitionDuration) .attr({ - transform: d => `translate(${d.y},${d.x})` + transform: (d) => `translate(${d.y},${d.x})`, }); // ensure circle radius is correct @@ -342,7 +339,7 @@ export default function(DOMNode, options = {}) { (d.children || d._children ? -1 : 1) * (this.getBBox().width / 2 + style.node.radius + 5); return `translate(${x},0)`; - } + }, }); // blink updated nodes @@ -366,17 +363,17 @@ export default function(DOMNode, options = {}) { .transition() .duration(transitionDuration) .attr({ - transform: d => { + transform: (d) => { const position = findParentNodePosition( previousNodePositionsById, d.id, - n => nodePositionsById[n.id] + (n) => nodePositionsById[n.id] ); const futurePosition = (position && nodePositionsById[position.id]) || nodePositionsById.root; return `translate(${futurePosition.y},${futurePosition.x})`; - } + }, }) .remove(); @@ -385,7 +382,7 @@ export default function(DOMNode, options = {}) { nodeExit.select('text').style('fill-opacity', 0); // update the links - let link = vis.selectAll('path.link').data(links, d => d.target.id); + let link = vis.selectAll('path.link').data(links, (d) => d.target.id); // enter any new links at the parent's previous position link @@ -393,30 +390,27 @@ export default function(DOMNode, options = {}) { .insert('path', 'g') .attr({ class: 'link', - d: d => { + d: (d) => { const position = findParentNodePosition( nodePositionsById, d.target.id, - n => previousNodePositionsById[n.id] + (n) => previousNodePositionsById[n.id] ); const previousPosition = (position && previousNodePositionsById[position.id]) || previousNodePositionsById.root; return diagonal({ source: previousPosition, - target: previousPosition + target: previousPosition, }); - } + }, }) .style(style.link); // transition links to their new position - link - .transition() - .duration(transitionDuration) - .attr({ - d: diagonal - }); + link.transition().duration(transitionDuration).attr({ + d: diagonal, + }); // transition exiting nodes to the parent's new position link @@ -424,20 +418,20 @@ export default function(DOMNode, options = {}) { .transition() .duration(transitionDuration) .attr({ - d: d => { + d: (d) => { const position = findParentNodePosition( previousNodePositionsById, d.target.id, - n => nodePositionsById[n.id] + (n) => nodePositionsById[n.id] ); const futurePosition = (position && nodePositionsById[position.id]) || nodePositionsById.root; return diagonal({ source: futurePosition, - target: futurePosition + target: futurePosition, }); - } + }, }) .remove(); diff --git a/packages/d3-state-visualizer/src/charts/tree/utils.js b/packages/d3-state-visualizer/src/charts/tree/utils.js index 96d24bb3..7b76058d 100644 --- a/packages/d3-state-visualizer/src/charts/tree/utils.js +++ b/packages/d3-state-visualizer/src/charts/tree/utils.js @@ -59,7 +59,7 @@ export function getNodeGroupByDepthCount(rootNode) { nodeGroupByDepthCount[depth + 1] += node.children.length; - node.children.forEach(childNode => { + node.children.forEach((childNode) => { traverseFrom(childNode, depth + 1); }); }; diff --git a/packages/d3-state-visualizer/webpack.config.base.js b/packages/d3-state-visualizer/webpack.config.base.js index a15e2e76..1c584203 100644 --- a/packages/d3-state-visualizer/webpack.config.base.js +++ b/packages/d3-state-visualizer/webpack.config.base.js @@ -3,14 +3,14 @@ module.exports = { module: { rules: [ - { test: /\.js$/, loaders: ['babel-loader'], exclude: /node_modules/ } - ] + { test: /\.js$/, loaders: ['babel-loader'], exclude: /node_modules/ }, + ], }, output: { library: 'd3-state-visualizer', - libraryTarget: 'umd' + libraryTarget: 'umd', }, resolve: { - extensions: ['.js'] - } + extensions: ['.js'], + }, }; diff --git a/packages/d3-state-visualizer/webpack.config.development.js b/packages/d3-state-visualizer/webpack.config.development.js index 703f597b..aa9d02ee 100644 --- a/packages/d3-state-visualizer/webpack.config.development.js +++ b/packages/d3-state-visualizer/webpack.config.development.js @@ -7,8 +7,8 @@ var config = Object.assign({}, baseConfig); config.mode = 'development'; config.plugins = [ new webpack.DefinePlugin({ - 'process.env.NODE_ENV': JSON.stringify('development') - }) + 'process.env.NODE_ENV': JSON.stringify('development'), + }), ]; module.exports = config; diff --git a/packages/d3-state-visualizer/webpack.config.production.js b/packages/d3-state-visualizer/webpack.config.production.js index 24b19db4..b5310704 100644 --- a/packages/d3-state-visualizer/webpack.config.production.js +++ b/packages/d3-state-visualizer/webpack.config.production.js @@ -7,8 +7,8 @@ var config = Object.assign({}, baseConfig); config.mode = 'production'; config.plugins = [ new webpack.DefinePlugin({ - 'process.env.NODE_ENV': JSON.stringify('production') - }) + 'process.env.NODE_ENV': JSON.stringify('production'), + }), ]; module.exports = config; diff --git a/packages/d3tooltip/src/index.js b/packages/d3tooltip/src/index.js index 6460f1cd..19d84255 100644 --- a/packages/d3tooltip/src/index.js +++ b/packages/d3tooltip/src/index.js @@ -6,7 +6,7 @@ const defaultOptions = { left: undefined, // mouseX top: undefined, // mouseY offset: { left: 0, top: 0 }, - root: undefined + root: undefined, }; export default function tooltip(d3, className = 'tooltip', options = {}) { @@ -22,7 +22,7 @@ export default function tooltip(d3, className = 'tooltip', options = {}) { function tip(selection) { selection.on({ - 'mouseover.tip': node => { + 'mouseover.tip': (node) => { let [mouseX, mouseY] = d3.mouse(rootNode); let [x, y] = [left || mouseX + offset.left, top || mouseY - offset.top]; @@ -36,22 +36,22 @@ export default function tooltip(d3, className = 'tooltip', options = {}) { 'z-index': 1001, left: x + 'px', top: y + 'px', - ...styles + ...styles, }) .html(() => text(node)); }, - 'mousemove.tip': node => { + 'mousemove.tip': (node) => { let [mouseX, mouseY] = d3.mouse(rootNode); let [x, y] = [left || mouseX + offset.left, top || mouseY - offset.top]; el.style({ left: x + 'px', - top: y + 'px' + top: y + 'px', }).html(() => text(node)); }, - 'mouseout.tip': () => el.remove() + 'mouseout.tip': () => el.remove(), }); } diff --git a/packages/d3tooltip/src/utils/index.js b/packages/d3tooltip/src/utils/index.js index 7893c5ca..ef868239 100644 --- a/packages/d3tooltip/src/utils/index.js +++ b/packages/d3tooltip/src/utils/index.js @@ -3,5 +3,5 @@ import functor from './functor'; export default { prependClass, - functor + functor, }; diff --git a/packages/d3tooltip/webpack.config.umd.js b/packages/d3tooltip/webpack.config.umd.js index e7ab53ca..6147c6fe 100644 --- a/packages/d3tooltip/webpack.config.umd.js +++ b/packages/d3tooltip/webpack.config.umd.js @@ -3,27 +3,27 @@ const path = require('path'); module.exports = (env = {}) => ({ mode: 'production', entry: { - app: ['./src/index.js'] + app: ['./src/index.js'], }, output: { library: 'd3tooltip', libraryTarget: 'umd', path: path.resolve(__dirname, 'dist'), - filename: env.minimize ? 'd3tooltip.min.js' : 'd3tooltip.js' + filename: env.minimize ? 'd3tooltip.min.js' : 'd3tooltip.js', }, module: { rules: [ { test: /\.js$/, loader: 'babel-loader', - exclude: /node_modules/ - } - ] + exclude: /node_modules/, + }, + ], }, optimization: { - minimize: !!env.minimize + minimize: !!env.minimize, }, performance: { - hints: false - } + hints: false, + }, }); diff --git a/packages/devui/.storybook/config.js b/packages/devui/.storybook/config.js index eefdbad6..9e67fb21 100755 --- a/packages/devui/.storybook/config.js +++ b/packages/devui/.storybook/config.js @@ -13,7 +13,7 @@ addDecorator( showStoriesPanel: true, showAddonPanel: true, showSearchBox: false, - addonPanelInRight: true + addonPanelInRight: true, }) ); @@ -24,7 +24,7 @@ addDecorator(withInfo); const req = require.context('../src/', true, /stories\/index\.js$/); function loadStories() { - req.keys().forEach(filename => req(filename)); + req.keys().forEach((filename) => req(filename)); } configure(loadStories, module); diff --git a/packages/devui/.storybook/themeAddon/Panel.js b/packages/devui/.storybook/themeAddon/Panel.js index 7e0ee5f4..1f2acae4 100644 --- a/packages/devui/.storybook/themeAddon/Panel.js +++ b/packages/devui/.storybook/themeAddon/Panel.js @@ -19,7 +19,7 @@ const themes = listThemes(); export default class Panel extends React.Component { state = DEFAULT_THEME_STATE; - onChange = o => { + onChange = (o) => { const state = { [o.name.split(' ').slice(-1)[0]]: o.value }; this.props.channel.emit(EVENT_ID_DATA, state); this.setState(state); @@ -37,19 +37,19 @@ export default class Panel extends React.Component { type: 'select', name: 'theme', value: theme, - options: themes + options: themes, }, { type: 'select', name: 'color scheme', value: scheme, - options: schemes + options: schemes, }, { type: 'boolean', name: 'light', - value: light - } + value: light, + }, ]} onFieldChange={this.onChange} onFieldClick={this.onClick} diff --git a/packages/devui/.storybook/themeAddon/constant.js b/packages/devui/.storybook/themeAddon/constant.js index 1e557be4..344c55d8 100644 --- a/packages/devui/.storybook/themeAddon/constant.js +++ b/packages/devui/.storybook/themeAddon/constant.js @@ -5,5 +5,5 @@ export const CSS_CLASS = 'redux-devtools-storybook'; export const DEFAULT_THEME_STATE = { theme: 'default', scheme: 'default', - light: true + light: true, }; diff --git a/packages/devui/.storybook/themeAddon/register.js b/packages/devui/.storybook/themeAddon/register.js index 1df4387a..4f74ae48 100644 --- a/packages/devui/.storybook/themeAddon/register.js +++ b/packages/devui/.storybook/themeAddon/register.js @@ -3,11 +3,11 @@ import addons from '@storybook/addons'; import Panel from './Panel'; import { ADDON_ID, PANEL_ID } from './constant'; -addons.register(ADDON_ID, api => { +addons.register(ADDON_ID, (api) => { const channel = addons.getChannel(); addons.addPanel(PANEL_ID, { title: 'Theme', render: ({ active }) => - active ? : null + active ? : null, }); }); diff --git a/packages/devui/.storybook/themeAddon/theme.js b/packages/devui/.storybook/themeAddon/theme.js index 120db290..3508ea67 100644 --- a/packages/devui/.storybook/themeAddon/theme.js +++ b/packages/devui/.storybook/themeAddon/theme.js @@ -16,7 +16,7 @@ class Theme extends React.Component { channel.removeListener(EVENT_ID_DATA, this.onChannel); } - onChannel = state => { + onChannel = (state) => { this.setState(state); }; @@ -25,4 +25,4 @@ class Theme extends React.Component { } } -export const withTheme = story => {story()}; +export const withTheme = (story) => {story()}; diff --git a/packages/devui/src/Button/Button.js b/packages/devui/src/Button/Button.js index a5211eaa..c172f998 100644 --- a/packages/devui/src/Button/Button.js +++ b/packages/devui/src/Button/Button.js @@ -21,7 +21,7 @@ export default class Button extends Component { ); } - onMouseUp = e => { + onMouseUp = (e) => { e.target.blur(); }; @@ -66,7 +66,7 @@ Button.propTypes = { 'bottom-left', 'bottom-right', 'top-left', - 'top-right' + 'top-right', ]), onClick: PropTypes.func, type: PropTypes.string, @@ -82,11 +82,11 @@ Button.propTypes = { 'base0C', 'base0D', 'base0E', - 'base0F' + 'base0F', ]), - theme: PropTypes.object + theme: PropTypes.object, }; Button.defaultProps = { - tooltipPosition: 'top' + tooltipPosition: 'top', }; diff --git a/packages/devui/src/Button/stories/index.js b/packages/devui/src/Button/stories/index.js index 29a89650..4835bf85 100755 --- a/packages/devui/src/Button/stories/index.js +++ b/packages/devui/src/Button/stories/index.js @@ -28,7 +28,7 @@ storiesOf('Button', module) 'bottom-left', 'bottom-right', 'top-left', - 'top-right' + 'top-right', ])} primary={boolean('primary', true)} size={select('size', ['big', 'normal', 'small'], 'normal')} @@ -52,7 +52,7 @@ storiesOf('Button', module) 'base0C', 'base0D', 'base0E', - 'base0F' + 'base0F', ], 'base08' )} @@ -65,7 +65,7 @@ storiesOf('Button', module) 'bottom-left', 'bottom-right', 'top-left', - 'top-right' + 'top-right', ])} size={select('size', ['big', 'normal', 'small'], 'normal')} disabled={boolean('Disabled', false)} diff --git a/packages/devui/src/Button/styles/common.js b/packages/devui/src/Button/styles/common.js index b3547507..31004788 100644 --- a/packages/devui/src/Button/styles/common.js +++ b/packages/devui/src/Button/styles/common.js @@ -2,7 +2,7 @@ import { css } from 'styled-components'; import { fadeIn } from '../../utils/animations'; import colorEffect from '../../utils/color'; -const both = tooltipPosition => { +const both = (tooltipPosition) => { switch (tooltipPosition) { case 'bottom': return ` @@ -46,7 +46,7 @@ const both = tooltipPosition => { } }; -const before = tooltipPosition => { +const before = (tooltipPosition) => { switch (tooltipPosition) { case 'bottom-left': return ` @@ -110,13 +110,13 @@ const after = (tooltipPosition, color) => { } }; -const getDirection = tooltipPosition => { +const getDirection = (tooltipPosition) => { return tooltipPosition.indexOf('-') > 0 ? tooltipPosition.substring(0, tooltipPosition.indexOf('-')) : tooltipPosition; }; -const getSize = size => { +const getSize = (size) => { switch (size) { case 'big': return 'min-height: 34px; padding: 2px 12px;'; @@ -146,7 +146,7 @@ export const commonStyle = ({ theme, mark, size }) => css` } ${mark && - ` + ` background-color: ${colorEffect( theme[mark], 'fade', @@ -169,7 +169,7 @@ export const tooltipStyle = ({ tooltipTitle, tooltipPosition, mark, - size + size, }) => css` ${commonStyle({ theme, mark, size })} @@ -208,7 +208,8 @@ export const tooltipStyle = ({ ${theme.type === 'material' ? `animation: ${fadeIn} 500ms;` : ''} } - ${theme.type !== 'material' && + ${ + theme.type !== 'material' && ` &:after { content: ""; @@ -218,7 +219,8 @@ export const tooltipStyle = ({ ${after(tooltipPosition, theme.base02)} ${getDirection(tooltipPosition)}: 7px; } - `} + ` + } &:hover:after, &:hover:before { diff --git a/packages/devui/src/Button/styles/default.js b/packages/devui/src/Button/styles/default.js index b2957d89..a3584eb7 100644 --- a/packages/devui/src/Button/styles/default.js +++ b/packages/devui/src/Button/styles/default.js @@ -33,14 +33,16 @@ export const style = ({ theme, primary, disabled }) => css` ` } - ${!disabled && + ${ + !disabled && ` &:hover, &:focus { background-color: ${primary ? theme.base07 : theme.base02}; box-shadow: 1px 1px 2px ${theme.base03}; } - `} + ` + } &:focus { border: 1px solid ${theme.base0D}; } diff --git a/packages/devui/src/Container/index.js b/packages/devui/src/Container/index.js index b0a66007..e6ed9ba7 100644 --- a/packages/devui/src/Container/index.js +++ b/packages/devui/src/Container/index.js @@ -26,7 +26,7 @@ Container.propTypes = { children: PropTypes.node, themeData: PropTypes.object, theme: PropTypes.object, - className: PropTypes.string + className: PropTypes.string, }; export default Container; diff --git a/packages/devui/src/Container/styles/index.js b/packages/devui/src/Container/styles/index.js index 33172f49..dab1ca8a 100644 --- a/packages/devui/src/Container/styles/index.js +++ b/packages/devui/src/Container/styles/index.js @@ -6,8 +6,8 @@ export const MainContainerWrapper = styled.div` height: 100%; width: 100%; flex-flow: column nowrap; - background-color: ${props => color(props.theme.base00, 'lighten', 0.03)}; - color: ${props => props.theme.base07}; + background-color: ${(props) => color(props.theme.base00, 'lighten', 0.03)}; + color: ${(props) => props.theme.base07}; font-size: 12px; div, @@ -16,13 +16,13 @@ export const MainContainerWrapper = styled.div` keygen, select, button { - font-family: ${props => props.theme.fontFamily || 'monaco, monospace'}; + font-family: ${(props) => props.theme.fontFamily || 'monaco, monospace'}; } .CodeMirror div, pre, .monitor-LogMonitor * { - font-family: ${props => + font-family: ${(props) => props.theme.codeFontFamily || props.theme.fontFamily || 'monospace'}; } diff --git a/packages/devui/src/ContextMenu/ContextMenu.js b/packages/devui/src/ContextMenu/ContextMenu.js index 93934455..ca5a89e2 100644 --- a/packages/devui/src/ContextMenu/ContextMenu.js +++ b/packages/devui/src/ContextMenu/ContextMenu.js @@ -30,11 +30,11 @@ export default class ContextMenu extends Component { } } - onMouseUp = e => { + onMouseUp = (e) => { e.target.blur(); }; - onClick = e => { + onClick = (e) => { this.props.onClick(e.target.value); }; @@ -64,7 +64,7 @@ export default class ContextMenu extends Component { } updateItems(items) { - this.items = items.map(item => { + this.items = items.map((item) => { const value = item.value || item.name; if (item.type === 'button') return item; return ( @@ -80,7 +80,7 @@ export default class ContextMenu extends Component { }); } - menuRef = c => { + menuRef = (c) => { this.menu = c; }; @@ -103,5 +103,5 @@ ContextMenu.propTypes = { onClick: PropTypes.func.isRequired, x: PropTypes.number.isRequired, y: PropTypes.number.isRequired, - visible: PropTypes.bool + visible: PropTypes.bool, }; diff --git a/packages/devui/src/ContextMenu/stories/data.js b/packages/devui/src/ContextMenu/stories/data.js index ec7a191f..366d00f5 100644 --- a/packages/devui/src/ContextMenu/stories/data.js +++ b/packages/devui/src/ContextMenu/stories/data.js @@ -1,11 +1,11 @@ export const items = [ { - name: 'Menu Item 1' + name: 'Menu Item 1', }, { - name: 'Menu Item 2' + name: 'Menu Item 2', }, { - name: 'Menu Item 3' - } + name: 'Menu Item 3', + }, ]; diff --git a/packages/devui/src/Dialog/Dialog.js b/packages/devui/src/Dialog/Dialog.js index aff3e709..a773d04b 100644 --- a/packages/devui/src/Dialog/Dialog.js +++ b/packages/devui/src/Dialog/Dialog.js @@ -13,11 +13,11 @@ export default class Dialog extends (PureComponent || Component) { else this.props.onSubmit(); }; - getFormButtonRef = node => { + getFormButtonRef = (node) => { this.submitButton = node; }; - onKeyDown = e => { + onKeyDown = (e) => { if (e.keyCode === 27 /* esc */) { e.preventDefault(); this.props.onDismiss(false); @@ -81,7 +81,7 @@ export default class Dialog extends (PureComponent || Component) { onClick={this.onSubmit} > {submitText} - + , ] : actions} @@ -111,5 +111,5 @@ Dialog.propTypes = { modal: PropTypes.bool, onDismiss: PropTypes.func, onSubmit: PropTypes.func, - theme: PropTypes.object + theme: PropTypes.object, }; diff --git a/packages/devui/src/Editor/Editor.js b/packages/devui/src/Editor/Editor.js index 7821e60e..3fe0a92c 100644 --- a/packages/devui/src/Editor/Editor.js +++ b/packages/devui/src/Editor/Editor.js @@ -18,7 +18,7 @@ export default class Editor extends Component { readOnly: this.props.readOnly, autofocus: this.props.autofocus, foldGutter: this.props.foldGutter, - gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'] + gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'], }); if (this.props.onChange) { @@ -56,7 +56,7 @@ export default class Editor extends Component { this.cm = null; } - getRef = node => { + getRef = (node) => { this.node = node; }; @@ -74,7 +74,7 @@ Editor.propTypes = { theme: PropTypes.object, foldGutter: PropTypes.bool, autofocus: PropTypes.bool, - onChange: PropTypes.func + onChange: PropTypes.func, }; Editor.defaultProps = { @@ -84,5 +84,5 @@ Editor.defaultProps = { lineWrapping: false, readOnly: false, foldGutter: true, - autofocus: false + autofocus: false, }; diff --git a/packages/devui/src/Editor/stories/WithTabs.js b/packages/devui/src/Editor/stories/WithTabs.js index 265992c3..07753aa6 100644 --- a/packages/devui/src/Editor/stories/WithTabs.js +++ b/packages/devui/src/Editor/stories/WithTabs.js @@ -14,7 +14,7 @@ const value2 = ` /* eslint-disable react/prop-types */ export default class WithTabs extends Component { state = { - selected: 'Function 1' + selected: 'Function 1', }; render() { @@ -25,16 +25,16 @@ export default class WithTabs extends Component { { name: 'Function 1', component: Editor, - selector: () => ({ value: value1, lineNumbers }) + selector: () => ({ value: value1, lineNumbers }), }, { name: 'Function 2', component: Editor, - selector: () => ({ value: value2, lineNumbers }) - } + selector: () => ({ value: value2, lineNumbers }), + }, ]} selected={this.state.selected} - onClick={selected => { + onClick={(selected) => { this.setState({ selected }); }} align={select('align', ['left', 'right', 'center'], 'left')} diff --git a/packages/devui/src/Editor/styles/index.js b/packages/devui/src/Editor/styles/index.js index f92082fc..f82f23d4 100644 --- a/packages/devui/src/Editor/styles/index.js +++ b/packages/devui/src/Editor/styles/index.js @@ -10,7 +10,7 @@ export const defaultStyle = ` } `; -export const themedStyle = theme => css` +export const themedStyle = (theme) => css` height: 100%; > div { diff --git a/packages/devui/src/Form/Form.js b/packages/devui/src/Form/Form.js index 2a289b71..f982269d 100644 --- a/packages/devui/src/Form/Form.js +++ b/packages/devui/src/Form/Form.js @@ -49,5 +49,5 @@ Form.propTypes = { formData: PropTypes.any, widgets: PropTypes.objectOf( PropTypes.oneOfType([PropTypes.func, PropTypes.object]) - ) + ), }; diff --git a/packages/devui/src/Form/stories/index.js b/packages/devui/src/Form/stories/index.js index 0a4f8530..7a5f9da1 100755 --- a/packages/devui/src/Form/stories/index.js +++ b/packages/devui/src/Form/stories/index.js @@ -22,6 +22,6 @@ storiesOf('Form', module) { info: 'Wrapper around [`react-jsonschema-form`](https://github.com/mozilla-services/react-jsonschema-form)' + - ' with custom widgets.' + ' with custom widgets.', } ); diff --git a/packages/devui/src/Form/stories/schema.js b/packages/devui/src/Form/stories/schema.js index 627a9bc6..d41417b6 100644 --- a/packages/devui/src/Form/stories/schema.js +++ b/packages/devui/src/Form/stories/schema.js @@ -7,83 +7,83 @@ module.exports = { properties: { name: { type: 'string', - title: 'Full name' + title: 'Full name', }, age: { type: 'integer', - title: 'Age' + title: 'Age', }, bio: { type: 'string', - title: 'Bio' + title: 'Bio', }, password: { type: 'string', title: 'Password', - minLength: 3 + minLength: 3, }, multipleChoicesList: { type: 'array', title: 'A multiple choices list', items: { type: 'string', - enum: ['foo', 'bar', 'fuzz'] + enum: ['foo', 'bar', 'fuzz'], }, - uniqueItems: true + uniqueItems: true, }, numberEnum: { type: 'number', title: 'Number enum', - enum: [1, 2, 3] + enum: [1, 2, 3], }, numberEnumRadio: { type: 'number', title: 'Number enum', - enum: [1, 2, 3] + enum: [1, 2, 3], }, integerRange: { title: 'Integer range', type: 'integer', minimum: 42, - maximum: 100 - } - } + maximum: 100, + }, + }, }, uiSchema: { name: { - 'ui:autofocus': true + 'ui:autofocus': true, }, age: { - 'ui:widget': 'updown' + 'ui:widget': 'updown', }, bio: { - 'ui:widget': 'textarea' + 'ui:widget': 'textarea', }, password: { 'ui:widget': 'password', - 'ui:help': 'Hint: Make it strong!' + 'ui:help': 'Hint: Make it strong!', }, date: { - 'ui:widget': 'alt-datetime' + 'ui:widget': 'alt-datetime', }, multipleChoicesList: { - 'ui:widget': 'checkboxes' + 'ui:widget': 'checkboxes', }, numberEnumRadio: { 'ui:widget': 'radio', 'ui:options': { - inline: true - } + inline: true, + }, }, integerRange: { - 'ui:widget': 'range' - } + 'ui:widget': 'range', + }, }, formData: { name: 'Chuck Norris', age: 75, bio: 'Roundhouse kicking asses since 1940', password: 'noneed', - integerRange: 52 - } + integerRange: 52, + }, }; diff --git a/packages/devui/src/Notification/Notification.js b/packages/devui/src/Notification/Notification.js index 8686afda..11a1509a 100644 --- a/packages/devui/src/Notification/Notification.js +++ b/packages/devui/src/Notification/Notification.js @@ -49,9 +49,9 @@ Notification.propTypes = { children: PropTypes.any.isRequired, type: PropTypes.oneOf(['info', 'success', 'warning', 'error']), onClose: PropTypes.func, - theme: PropTypes.object + theme: PropTypes.object, }; Notification.defaultProps = { - type: 'info' + type: 'info', }; diff --git a/packages/devui/src/SegmentedControl/SegmentedControl.js b/packages/devui/src/SegmentedControl/SegmentedControl.js index a626f2ac..bff5ccf1 100644 --- a/packages/devui/src/SegmentedControl/SegmentedControl.js +++ b/packages/devui/src/SegmentedControl/SegmentedControl.js @@ -13,11 +13,11 @@ export default class SegmentedControl extends Component { ); } - onClick = e => { + onClick = (e) => { this.props.onClick(e.target.value); }; - onMouseUp = e => { + onMouseUp = (e) => { e.target.blur(); }; @@ -25,7 +25,7 @@ export default class SegmentedControl extends Component { const { values, selected } = this.props; return ( - {values.map(button => ( + {values.map((button) => ( ); expect(renderToJson(wrapper)).toMatchSnapshot(); diff --git a/packages/devui/tests/Container.test.js b/packages/devui/tests/Container.test.js index 6be5fa64..13dbd680 100644 --- a/packages/devui/tests/Container.test.js +++ b/packages/devui/tests/Container.test.js @@ -3,7 +3,7 @@ import { render } from 'enzyme'; import { renderToJson } from 'enzyme-to-json'; import { Container } from '../src'; -describe('Container', function() { +describe('Container', function () { it('renders correctly', () => { const wrapper = render( { const wrapper = render( {}} x={100} y={100} /> @@ -17,10 +17,7 @@ describe('ContextMenu', function() { ); - wrapper - .find('button') - .first() - .simulate('click'); + wrapper.find('button').first().simulate('click'); expect(onClick).toBeCalled(); }); }); diff --git a/packages/devui/tests/Dialog.test.js b/packages/devui/tests/Dialog.test.js index ea999477..5a63f343 100644 --- a/packages/devui/tests/Dialog.test.js +++ b/packages/devui/tests/Dialog.test.js @@ -3,7 +3,7 @@ import { render, mount } from 'enzyme'; import { renderToJson } from 'enzyme-to-json'; import { Dialog } from '../src'; -describe('Dialog', function() { +describe('Dialog', function () { it('renders correctly', () => { const wrapper = render(); expect(renderToJson(wrapper)).toMatchSnapshot(); @@ -27,10 +27,7 @@ describe('Dialog', function() { const onDismiss = jest.fn(); const wrapper = mount(); - wrapper - .find('button') - .first() - .simulate('click'); + wrapper.find('button').first().simulate('click'); expect(onDismiss).toBeCalled(); }); @@ -38,10 +35,7 @@ describe('Dialog', function() { const onSubmit = jest.fn(); const wrapper = mount(); - wrapper - .find('button') - .last() - .simulate('click'); + wrapper.find('button').last().simulate('click'); expect(onSubmit).toBeCalled(); }); }); diff --git a/packages/devui/tests/Editor.test.js b/packages/devui/tests/Editor.test.js index f51e775b..fd922108 100644 --- a/packages/devui/tests/Editor.test.js +++ b/packages/devui/tests/Editor.test.js @@ -4,7 +4,7 @@ import { mountToJson } from 'enzyme-to-json'; import { Editor } from '../src'; import 'codemirror/mode/javascript/javascript'; -describe('Editor', function() { +describe('Editor', function () { const getBoundingClientRect = jest.fn(); const getClientRects = jest.fn(); @@ -19,7 +19,7 @@ describe('Editor', function() { return { item: () => null, length: 0, - [Symbol.iterator]: jest.fn() + [Symbol.iterator]: jest.fn(), }; }; diff --git a/packages/devui/tests/Form.test.js b/packages/devui/tests/Form.test.js index 36391073..4e8e54ba 100644 --- a/packages/devui/tests/Form.test.js +++ b/packages/devui/tests/Form.test.js @@ -4,7 +4,7 @@ import { shallowToJson } from 'enzyme-to-json'; import { Form } from '../src'; import { schema, uiSchema, formData } from '../src/Form/stories/schema'; -describe('Form', function() { +describe('Form', function () { it('renders correctly', () => { const wrapper = shallow(
diff --git a/packages/devui/tests/Notification.test.js b/packages/devui/tests/Notification.test.js index 12891081..6023ca8f 100644 --- a/packages/devui/tests/Notification.test.js +++ b/packages/devui/tests/Notification.test.js @@ -3,7 +3,7 @@ import { render, mount } from 'enzyme'; import { renderToJson } from 'enzyme-to-json'; import { Notification } from '../src'; -describe('Notification', function() { +describe('Notification', function () { it('renders correctly', () => { const wrapper = render(Message); expect(renderToJson(wrapper)).toMatchSnapshot(); diff --git a/packages/devui/tests/SegmentedControl.test.js b/packages/devui/tests/SegmentedControl.test.js index a3d3b0f8..121ec517 100644 --- a/packages/devui/tests/SegmentedControl.test.js +++ b/packages/devui/tests/SegmentedControl.test.js @@ -3,7 +3,7 @@ import { render, mount } from 'enzyme'; import { renderToJson } from 'enzyme-to-json'; import { SegmentedControl } from '../src'; -describe('SegmentedControl', function() { +describe('SegmentedControl', function () { it('renders correctly', () => { const wrapper = render( ); - wrapper - .find('button') - .first() - .simulate('click'); + wrapper.find('button').first().simulate('click'); expect(onClick).toBeCalled(); }); }); diff --git a/packages/devui/tests/Select.test.js b/packages/devui/tests/Select.test.js index eae319ab..31a55860 100644 --- a/packages/devui/tests/Select.test.js +++ b/packages/devui/tests/Select.test.js @@ -4,7 +4,7 @@ import { renderToJson, mountToJson } from 'enzyme-to-json'; import { Select } from '../src'; import { options } from '../src/Select/stories/options'; -describe('Select', function() { +describe('Select', function () { it('renders correctly', () => { const wrapper = render( onSearch(e.target.value)} + onChange={(e) => onSearch(e.target.value)} placeholder="filter..." /> {!hideMainButtons && (
- {getActiveButtons(hasSkippedActions).map(btn => ( + {getActiveButtons(hasSkippedActions).map((btn) => (
({ Commit: onCommit, - Sweep: onSweep + Sweep: onSweep, }[btn]()) } {...styling( diff --git a/packages/redux-devtools-inspector/src/ActionListRow.jsx b/packages/redux-devtools-inspector/src/ActionListRow.jsx index 838ca567..a9caf7df 100644 --- a/packages/redux-devtools-inspector/src/ActionListRow.jsx +++ b/packages/redux-devtools-inspector/src/ActionListRow.jsx @@ -20,9 +20,9 @@ export default class ActionListRow extends Component { onSelect: PropTypes.func.isRequired, timestamps: PropTypes.shape({ current: PropTypes.number.isRequired, - previous: PropTypes.number.isRequired + previous: PropTypes.number.isRequired, }).isRequired, - isSkipped: PropTypes.bool.isRequired + isSkipped: PropTypes.bool.isRequired, }; shouldComponentUpdate = shouldPureComponentUpdate; @@ -38,13 +38,13 @@ export default class ActionListRow extends Component { timestamps, isSkipped, isInFuture, - hideActionButtons + hideActionButtons, } = this.props; const { hover } = this.state; const timeDelta = timestamps.current - timestamps.previous; const showButtons = (hover && !isInitAction) || isSkipped; - const isButtonSelected = btn => btn === BUTTON_SKIP && isSkipped; + const isButtonSelected = (btn) => btn === BUTTON_SKIP && isSkipped; let actionType = action.type; if (typeof actionType === 'undefined') actionType = ''; @@ -64,7 +64,7 @@ export default class ActionListRow extends Component { 'actionListItem', isSelected && 'actionListItemSelected', isSkipped && 'actionListItemSkipped', - isInFuture && 'actionListFromFuture' + isInFuture && 'actionListFromFuture', ], isSelected, action @@ -73,7 +73,7 @@ export default class ActionListRow extends Component {
{actionType} @@ -104,7 +104,7 @@ export default class ActionListRow extends Component {
{[BUTTON_JUMP, BUTTON_SKIP].map( - btn => + (btn) => (!isInitAction || btn !== BUTTON_SKIP) && (
{ + handleMouseEnter = (e) => { if (this.hover) return; this.handleMouseLeave.cancel(); this.handleMouseEnterDebounced(e.buttons); }; - handleMouseEnterDebounced = debounce(buttons => { + handleMouseEnterDebounced = debounce((buttons) => { if (buttons) return; this.setState({ hover: true }); }, 150); @@ -160,7 +160,7 @@ export default class ActionListRow extends Component { if (this.state.hover) this.setState({ hover: false }); }, 100); - handleMouseDown = e => { + handleMouseDown = (e) => { if (e.target.className.indexOf('selectorButton') === 0) return; this.handleMouseLeave(); }; diff --git a/packages/redux-devtools-inspector/src/ActionPreview.jsx b/packages/redux-devtools-inspector/src/ActionPreview.jsx index 7a4e25f7..8de51b1c 100644 --- a/packages/redux-devtools-inspector/src/ActionPreview.jsx +++ b/packages/redux-devtools-inspector/src/ActionPreview.jsx @@ -8,21 +8,21 @@ import ActionTab from './tabs/ActionTab'; const DEFAULT_TABS = [ { name: 'Action', - component: ActionTab + component: ActionTab, }, { name: 'Diff', - component: DiffTab + component: DiffTab, }, { name: 'State', - component: StateTab - } + component: StateTab, + }, ]; class ActionPreview extends Component { static defaultProps = { - tabName: DEFAULT_STATE.tabName + tabName: DEFAULT_STATE.tabName, }; render() { @@ -46,7 +46,7 @@ class ActionPreview extends Component { tabs, dataTypeKey, monitorState, - updateMonitorState + updateMonitorState, } = this.props; const renderedTabs = @@ -57,8 +57,8 @@ class ActionPreview extends Component { : DEFAULT_TABS; const { component: TabComponent } = - renderedTabs.find(tab => tab.name === tabName) || - renderedTabs.find(tab => tab.name === DEFAULT_STATE.tabName); + renderedTabs.find((tab) => tab.name === tabName) || + renderedTabs.find((tab) => tab.name === DEFAULT_STATE.tabName); return (
@@ -84,7 +84,7 @@ class ActionPreview extends Component { action, nextState, monitorState, - updateMonitorState + updateMonitorState, }} />
@@ -105,7 +105,7 @@ class ActionPreview extends Component { onClick={() => onInspectPath([ ...inspectedPath.slice(0, inspectedPath.length - 1), - ...[key, ...rest].reverse() + ...[key, ...rest].reverse(), ]) } > diff --git a/packages/redux-devtools-inspector/src/ActionPreviewHeader.jsx b/packages/redux-devtools-inspector/src/ActionPreviewHeader.jsx index d6a87a4e..1b65c579 100644 --- a/packages/redux-devtools-inspector/src/ActionPreviewHeader.jsx +++ b/packages/redux-devtools-inspector/src/ActionPreviewHeader.jsx @@ -6,18 +6,18 @@ const ActionPreviewHeader = ({ onInspectPath, tabName, onSelectTab, - tabs + tabs, }) => (
- {tabs.map(tab => ( + {tabs.map((tab) => (
onSelectTab(tab.name)} key={tab.name} {...styling( [ 'selectorButton', - tab.name === tabName && 'selectorButtonSelected' + tab.name === tabName && 'selectorButtonSelected', ], tab.name === tabName )} diff --git a/packages/redux-devtools-inspector/src/DevtoolsInspector.js b/packages/redux-devtools-inspector/src/DevtoolsInspector.js index 62f772fa..4ef9193d 100644 --- a/packages/redux-devtools-inspector/src/DevtoolsInspector.js +++ b/packages/redux-devtools-inspector/src/DevtoolsInspector.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import { PropTypes } from 'prop-types'; import { createStylingFromTheme, - base16Themes + base16Themes, } from './utils/createStylingFromTheme'; import shouldPureComponentUpdate from 'react-pure-render/function'; import ActionList from './ActionList'; @@ -19,7 +19,7 @@ const { toggleAction, jumpToAction, jumpToState, - reorderAction + reorderAction, } = ActionCreators; function getLastActionId(props) { @@ -54,7 +54,7 @@ function createIntermediateState(props, monitorState) { stagedActionIds, actionsById: actions, diffObjectHash, - diffPropertyFilter + diffPropertyFilter, } = props; const { inspectedStatePath, inspectedActionPath } = monitorState; const currentActionId = getCurrentActionId(props, monitorState); @@ -93,7 +93,7 @@ function createIntermediateState(props, monitorState) { nextState: toState && getInspectedState(toState.state, inspectedStatePath, false), action: getInspectedState(currentAction, inspectedActionPath, false), - error + error, }; } @@ -112,7 +112,7 @@ export default class DevtoolsInspector extends Component { this.state = { ...createIntermediateState(props, props.monitorState), isWideLayout: false, - themeState: createThemeState(props) + themeState: createThemeState(props), }; } @@ -123,7 +123,7 @@ export default class DevtoolsInspector extends Component { actionsById: PropTypes.object, currentStateIndex: PropTypes.number, monitorState: PropTypes.shape({ - initialScrollTop: PropTypes.number + initialScrollTop: PropTypes.number, }), preserveScrollTop: PropTypes.bool, draggableActions: PropTypes.bool, @@ -138,17 +138,17 @@ export default class DevtoolsInspector extends Component { invertTheme: PropTypes.bool, skippedActionIds: PropTypes.array, dataTypeKey: PropTypes.any, - tabs: PropTypes.oneOfType([PropTypes.array, PropTypes.func]) + tabs: PropTypes.oneOfType([PropTypes.array, PropTypes.func]), }; static update = reducer; static defaultProps = { - select: state => state, + select: (state) => state, supportImmutable: false, draggableActions: true, theme: 'inspector', - invertTheme: true + invertTheme: true, }; shouldComponentUpdate = shouldPureComponentUpdate; @@ -162,7 +162,7 @@ export default class DevtoolsInspector extends Component { clearTimeout(this.updateSizeTimeout); } - updateMonitorState = monitorState => { + updateMonitorState = (monitorState) => { this.props.dispatch(updateMonitorState(monitorState)); }; @@ -199,7 +199,7 @@ export default class DevtoolsInspector extends Component { } } - inspectorCreateRef = node => { + inspectorCreateRef = (node) => { this.inspectorRef = node; }; @@ -216,13 +216,13 @@ export default class DevtoolsInspector extends Component { monitorState, dataTypeKey, hideMainButtons, - hideActionButtons + hideActionButtons, } = this.props; const { selectedActionId, startActionId, searchValue, - tabName + tabName, } = monitorState; const inspectedPathType = tabName === 'Action' ? 'inspectedActionPath' : 'inspectedStatePath'; @@ -232,7 +232,7 @@ export default class DevtoolsInspector extends Component { action, nextState, delta, - error + error, } = this.state; const { base16Theme, styling } = themeState; @@ -257,7 +257,7 @@ export default class DevtoolsInspector extends Component { draggableActions, hideMainButtons, hideActionButtons, - styling + styling, }} onSearch={this.handleSearch} onSelect={this.handleSelectAction} @@ -284,7 +284,7 @@ export default class DevtoolsInspector extends Component { actions, selectedActionId, startActionId, - dataTypeKey + dataTypeKey, }} monitorState={this.props.monitorState} updateMonitorState={this.updateMonitorState} @@ -297,11 +297,11 @@ export default class DevtoolsInspector extends Component { ); } - handleToggleAction = actionId => { + handleToggleAction = (actionId) => { this.props.dispatch(toggleAction(actionId)); }; - handleJumpToState = actionId => { + handleJumpToState = (actionId) => { if (jumpToAction) { this.props.dispatch(jumpToAction(actionId)); } else { @@ -324,7 +324,7 @@ export default class DevtoolsInspector extends Component { this.props.dispatch(sweep()); }; - handleSearch = val => { + handleSearch = (val) => { this.updateMonitorState({ searchValue: val }); }; @@ -371,7 +371,7 @@ export default class DevtoolsInspector extends Component { this.updateMonitorState({ [pathType]: path }); }; - handleSelectTab = tabName => { + handleSelectTab = (tabName) => { this.updateMonitorState({ tabName }); }; } diff --git a/packages/redux-devtools-inspector/src/RightSlider.jsx b/packages/redux-devtools-inspector/src/RightSlider.jsx index 2b1ebd45..15c93e48 100644 --- a/packages/redux-devtools-inspector/src/RightSlider.jsx +++ b/packages/redux-devtools-inspector/src/RightSlider.jsx @@ -7,7 +7,7 @@ const RightSlider = ({ styling, shown, children, rotate }) => ( 'rightSlider', shown && 'rightSliderShown', rotate && 'rightSliderRotate', - rotate && shown && 'rightSliderRotateShown' + rotate && shown && 'rightSliderRotateShown', ])} > {children} @@ -15,7 +15,7 @@ const RightSlider = ({ styling, shown, children, rotate }) => ( ); RightSlider.propTypes = { - shown: PropTypes.bool + shown: PropTypes.bool, }; export default RightSlider; diff --git a/packages/redux-devtools-inspector/src/createDiffPatcher.js b/packages/redux-devtools-inspector/src/createDiffPatcher.js index 4d85e235..53a7d4fc 100644 --- a/packages/redux-devtools-inspector/src/createDiffPatcher.js +++ b/packages/redux-devtools-inspector/src/createDiffPatcher.js @@ -13,7 +13,7 @@ const defaultPropertyFilter = (name, context) => const defaultDiffPatcher = new DiffPatcher({ arrays: { detectMove: false }, objectHash: defaultObjectHash, - propertyFilter: defaultPropertyFilter + propertyFilter: defaultPropertyFilter, }); export default function createDiffPatcher(objectHash, propertyFilter) { @@ -24,6 +24,6 @@ export default function createDiffPatcher(objectHash, propertyFilter) { return new DiffPatcher({ arrays: { detectMove: false }, objectHash: objectHash || defaultObjectHash, - propertyFilter: propertyFilter || defaultPropertyFilter + propertyFilter: propertyFilter || defaultPropertyFilter, }); } diff --git a/packages/redux-devtools-inspector/src/redux.js b/packages/redux-devtools-inspector/src/redux.js index 92033375..33f6208d 100644 --- a/packages/redux-devtools-inspector/src/redux.js +++ b/packages/redux-devtools-inspector/src/redux.js @@ -5,7 +5,7 @@ export const DEFAULT_STATE = { startActionId: null, inspectedActionPath: [], inspectedStatePath: [], - tabName: 'Diff' + tabName: 'Diff', }; export function updateMonitorState(monitorState) { @@ -16,13 +16,13 @@ function reduceUpdateState(state, action) { return action.type === UPDATE_MONITOR_STATE ? { ...state, - ...action.monitorState + ...action.monitorState, } : state; } export function reducer(props, state = DEFAULT_STATE, action) { return { - ...reduceUpdateState(state, action) + ...reduceUpdateState(state, action), }; } diff --git a/packages/redux-devtools-inspector/src/tabs/ActionTab.jsx b/packages/redux-devtools-inspector/src/tabs/ActionTab.jsx index e2a91800..c5cb77c8 100644 --- a/packages/redux-devtools-inspector/src/tabs/ActionTab.jsx +++ b/packages/redux-devtools-inspector/src/tabs/ActionTab.jsx @@ -10,7 +10,7 @@ const ActionTab = ({ invertTheme, labelRenderer, dataTypeKey, - isWideLayout + isWideLayout, }) => ( ( ); diff --git a/packages/redux-devtools-inspector/src/tabs/StateTab.jsx b/packages/redux-devtools-inspector/src/tabs/StateTab.jsx index 59064bad..c2991458 100644 --- a/packages/redux-devtools-inspector/src/tabs/StateTab.jsx +++ b/packages/redux-devtools-inspector/src/tabs/StateTab.jsx @@ -10,7 +10,7 @@ const StateTab = ({ invertTheme, labelRenderer, dataTypeKey, - isWideLayout + isWideLayout, }) => ( `${key}: ${getShortTypeString(data[key], isDiff)}`) + .map((key) => `${key}: ${getShortTypeString(data[key], isDiff)}`) .concat(keys.length > 3 ? ['…'] : []) .join(', '); @@ -55,7 +55,7 @@ function getText(type, data, isWideLayout, isDiff) { const str = data .slice(0, 4) - .map(val => getShortTypeString(val, isDiff)) + .map((val) => getShortTypeString(val, isDiff)) .concat(data.length > 4 ? ['…'] : []) .join(', '); diff --git a/packages/redux-devtools-inspector/src/tabs/getJsonTreeTheme.js b/packages/redux-devtools-inspector/src/tabs/getJsonTreeTheme.js index 7bb2942a..e936f291 100644 --- a/packages/redux-devtools-inspector/src/tabs/getJsonTreeTheme.js +++ b/packages/redux-devtools-inspector/src/tabs/getJsonTreeTheme.js @@ -4,14 +4,14 @@ export default function getJsonTreeTheme(base16Theme) { nestedNode: ({ style }, keyPath, nodeType, expanded) => ({ style: { ...style, - whiteSpace: expanded ? 'inherit' : 'nowrap' - } + whiteSpace: expanded ? 'inherit' : 'nowrap', + }, }), nestedNodeItemString: ({ style }, keyPath, nodeType, expanded) => ({ style: { ...style, - display: expanded ? 'none' : 'inline' - } - }) + display: expanded ? 'none' : 'inline', + }, + }), }; } diff --git a/packages/redux-devtools-inspector/src/themes/inspector.js b/packages/redux-devtools-inspector/src/themes/inspector.js index f39a79e9..701dbd42 100644 --- a/packages/redux-devtools-inspector/src/themes/inspector.js +++ b/packages/redux-devtools-inspector/src/themes/inspector.js @@ -16,5 +16,5 @@ export default { base0C: '#86c1b9', base0D: '#347BD9', base0E: '#EC31C0', - base0F: '#a16946' + base0F: '#a16946', }; diff --git a/packages/redux-devtools-inspector/src/utils/createStylingFromTheme.js b/packages/redux-devtools-inspector/src/utils/createStylingFromTheme.js index a4603412..ea59ae57 100644 --- a/packages/redux-devtools-inspector/src/utils/createStylingFromTheme.js +++ b/packages/redux-devtools-inspector/src/utils/createStylingFromTheme.js @@ -10,7 +10,7 @@ import * as inspectorThemes from '../themes'; jss.use(jssVendorPrefixer()); jss.use(jssNested()); -const colorMap = theme => ({ +const colorMap = (theme) => ({ TEXT_COLOR: theme.base06, TEXT_PLACEHOLDER_COLOR: rgba(theme.base06, 60), BACKGROUND_COLOR: theme.base00, @@ -33,10 +33,10 @@ const colorMap = theme => ({ DIFF_ARROW_COLOR: theme.base0E, LINK_COLOR: rgba(theme.base0E, 90), LINK_HOVER_COLOR: theme.base0E, - ERROR_COLOR: theme.base08 + ERROR_COLOR: theme.base08, }); -const getSheetFromColorMap = map => ({ +const getSheetFromColorMap = (map) => ({ inspector: { display: 'flex', 'flex-direction': 'column', @@ -48,11 +48,11 @@ const getSheetFromColorMap = map => ({ 'line-height': '1.5em', 'background-color': map.BACKGROUND_COLOR, - color: map.TEXT_COLOR + color: map.TEXT_COLOR, }, inspectorWide: { - 'flex-direction': 'row' + 'flex-direction': 'row', }, actionList: { @@ -66,7 +66,7 @@ const getSheetFromColorMap = map => ({ 'flex-direction': 'column', 'background-color': map.BACKGROUND_COLOR, - 'border-color': map.LIST_BORDER_COLOR + 'border-color': map.LIST_BORDER_COLOR, }, actionListHeader: { @@ -76,14 +76,14 @@ const getSheetFromColorMap = map => ({ 'border-bottom-width': '1px', 'border-bottom-style': 'solid', - 'border-color': map.LIST_BORDER_COLOR + 'border-color': map.LIST_BORDER_COLOR, }, actionListRows: { overflow: 'auto', '& div.gu-transit': { - opacity: '0.3' + opacity: '0.3', }, '& div.gu-mirror': { @@ -92,24 +92,24 @@ const getSheetFromColorMap = map => ({ height: 'auto !important', 'border-width': '1px', 'border-style': 'solid', - 'border-color': map.LIST_BORDER_COLOR + 'border-color': map.LIST_BORDER_COLOR, }, '& div.gu-hide': { - display: 'none' - } + display: 'none', + }, }, actionListHeaderSelector: { display: 'inline-flex', - 'margin-right': '10px' + 'margin-right': '10px', }, actionListWide: { 'flex-basis': '40%', 'border-bottom': 'none', 'border-right-width': '3px', - 'border-right-style': 'double' + 'border-right-style': 'double', }, actionListItem: { @@ -122,28 +122,28 @@ const getSheetFromColorMap = map => ({ 'user-select': 'none', '&:last-child': { - 'border-bottom-width': 0 + 'border-bottom-width': 0, }, - 'border-bottom-color': map.BORDER_COLOR + 'border-bottom-color': map.BORDER_COLOR, }, actionListItemSelected: { - 'background-color': map.SELECTED_BACKGROUND_COLOR + 'background-color': map.SELECTED_BACKGROUND_COLOR, }, actionListItemSkipped: { - 'background-color': map.SKIPPED_BACKGROUND_COLOR + 'background-color': map.SKIPPED_BACKGROUND_COLOR, }, actionListFromFuture: { - opacity: '0.6' + opacity: '0.6', }, actionListItemButtons: { position: 'relative', height: '20px', - display: 'flex' + display: 'flex', }, actionListItemTime: { @@ -155,22 +155,22 @@ const getSheetFromColorMap = map => ({ 'flex-shrink': 0, 'background-color': map.ACTION_TIME_BACK_COLOR, - color: map.ACTION_TIME_COLOR + color: map.ACTION_TIME_COLOR, }, actionListItemSelector: { - display: 'inline-flex' + display: 'inline-flex', }, actionListItemName: { overflow: 'hidden', 'text-overflow': 'ellipsis', - 'line-height': '20px' + 'line-height': '20px', }, actionListItemNameSkipped: { 'text-decoration': 'line-through', - opacity: 0.3 + opacity: 0.3, }, actionListHeaderSearch: { @@ -185,17 +185,17 @@ const getSheetFromColorMap = map => ({ color: map.TEXT_COLOR, '&::-webkit-input-placeholder': { - color: map.TEXT_PLACEHOLDER_COLOR + color: map.TEXT_PLACEHOLDER_COLOR, }, '&::-moz-placeholder': { - color: map.TEXT_PLACEHOLDER_COLOR - } + color: map.TEXT_PLACEHOLDER_COLOR, + }, }, actionListHeaderWrapper: { position: 'relative', - height: '20px' + height: '20px', }, actionPreview: { @@ -209,25 +209,25 @@ const getSheetFromColorMap = map => ({ border: 'inherit', 'border-radius': '3px', 'line-height': 'inherit', - color: 'inherit' + color: 'inherit', }, - 'background-color': map.BACKGROUND_COLOR + 'background-color': map.BACKGROUND_COLOR, }, actionPreviewContent: { flex: 1, - 'overflow-y': 'auto' + 'overflow-y': 'auto', }, stateDiff: { - padding: '5px 0' + padding: '5px 0', }, stateDiffEmpty: { padding: '10px', - color: map.TEXT_PLACEHOLDER_COLOR + color: map.TEXT_PLACEHOLDER_COLOR, }, stateError: { @@ -235,17 +235,17 @@ const getSheetFromColorMap = map => ({ 'margin-left': '14px', 'font-weight': 'bold', - color: map.ERROR_COLOR + color: map.ERROR_COLOR, }, inspectedPath: { - padding: '6px 0' + padding: '6px 0', }, inspectedPathKey: { '&:not(:last-child):after': { - content: '" > "' - } + content: '" > "', + }, }, inspectedPathKeyLink: { @@ -253,8 +253,8 @@ const getSheetFromColorMap = map => ({ color: map.LINK_COLOR, '&:hover': { 'text-decoration': 'underline', - color: map.LINK_HOVER_COLOR - } + color: map.LINK_HOVER_COLOR, + }, }, treeItemPin: { @@ -262,14 +262,14 @@ const getSheetFromColorMap = map => ({ 'padding-left': '5px', cursor: 'pointer', '&:hover': { - 'text-decoration': 'underline' + 'text-decoration': 'underline', }, - color: map.PIN_COLOR + color: map.PIN_COLOR, }, treeItemHint: { - color: map.ITEM_HINT_COLOR + color: map.ITEM_HINT_COLOR, }, previewHeader: { @@ -280,14 +280,14 @@ const getSheetFromColorMap = map => ({ 'border-bottom-style': 'solid', 'background-color': map.HEADER_BACKGROUND_COLOR, - 'border-bottom-color': map.HEADER_BORDER_COLOR + 'border-bottom-color': map.HEADER_BORDER_COLOR, }, tabSelector: { position: 'relative', 'z-index': 1, display: 'inline-flex', - float: 'right' + float: 'right', }, selectorButton: { @@ -301,30 +301,30 @@ const getSheetFromColorMap = map => ({ '&:first-child': { 'border-left-width': '1px', 'border-top-left-radius': '3px', - 'border-bottom-left-radius': '3px' + 'border-bottom-left-radius': '3px', }, '&:last-child': { 'border-top-right-radius': '3px', - 'border-bottom-right-radius': '3px' + 'border-bottom-right-radius': '3px', }, 'background-color': map.TAB_BACK_COLOR, '&:hover': { - 'background-color': map.TAB_BACK_HOVER_COLOR + 'background-color': map.TAB_BACK_HOVER_COLOR, }, - 'border-color': map.TAB_BORDER_COLOR + 'border-color': map.TAB_BORDER_COLOR, }, selectorButtonSmall: { padding: '0px 8px', - 'font-size': '0.8em' + 'font-size': '0.8em', }, selectorButtonSelected: { - 'background-color': map.TAB_BACK_SELECTED_COLOR + 'background-color': map.TAB_BACK_SELECTED_COLOR, }, diff: { @@ -332,34 +332,34 @@ const getSheetFromColorMap = map => ({ 'border-radius': '3px', position: 'relative', - color: map.TEXT_COLOR + color: map.TEXT_COLOR, }, diffWrap: { position: 'relative', - 'z-index': 1 + 'z-index': 1, }, diffAdd: { - 'background-color': map.DIFF_ADD_COLOR + 'background-color': map.DIFF_ADD_COLOR, }, diffRemove: { 'text-decoration': 'line-through', - 'background-color': map.DIFF_REMOVE_COLOR + 'background-color': map.DIFF_REMOVE_COLOR, }, diffUpdateFrom: { 'text-decoration': 'line-through', - 'background-color': map.DIFF_REMOVE_COLOR + 'background-color': map.DIFF_REMOVE_COLOR, }, diffUpdateTo: { - 'background-color': map.DIFF_ADD_COLOR + 'background-color': map.DIFF_ADD_COLOR, }, diffUpdateArrow: { - color: map.DIFF_ARROW_COLOR + color: map.DIFF_ARROW_COLOR, }, rightSlider: { @@ -367,28 +367,28 @@ const getSheetFromColorMap = map => ({ position: 'absolute', right: 0, transform: 'translateX(150%)', - transition: 'transform 0.2s ease-in-out' + transition: 'transform 0.2s ease-in-out', }, rightSliderRotate: { transform: 'rotateX(90deg)', - transition: 'transform 0.2s ease-in-out 0.08s' + transition: 'transform 0.2s ease-in-out 0.08s', }, rightSliderShown: { position: 'static', - transform: 'translateX(0)' + transform: 'translateX(0)', }, rightSliderRotateShown: { transform: 'rotateX(0)', - transition: 'transform 0.2s ease-in-out 0.18s' - } + transition: 'transform 0.2s ease-in-out 0.18s', + }, }); let themeSheet; -const getDefaultThemeStyling = theme => { +const getDefaultThemeStyling = (theme) => { if (themeSheet) { themeSheet.detach(); } @@ -404,5 +404,5 @@ export const base16Themes = { ...reduxThemes, ...inspectorThemes }; export const createStylingFromTheme = createStyling(getDefaultThemeStyling, { defaultBase16: inspector, - base16Themes + base16Themes, }); diff --git a/packages/redux-devtools-inspector/src/utils/deepMap.js b/packages/redux-devtools-inspector/src/utils/deepMap.js index 88d3dca0..b76e1217 100644 --- a/packages/redux-devtools-inspector/src/utils/deepMap.js +++ b/packages/redux-devtools-inspector/src/utils/deepMap.js @@ -1,7 +1,7 @@ function deepMapCached(obj, f, ctx, cache) { cache.push(obj); if (Array.isArray(obj)) { - return obj.map(function(val, key) { + return obj.map(function (val, key) { val = f.call(ctx, val, key); return typeof val === 'object' && cache.indexOf(val) === -1 ? deepMapCached(val, f, ctx, cache) diff --git a/packages/redux-devtools-inspector/src/utils/getInspectedState.js b/packages/redux-devtools-inspector/src/utils/getInspectedState.js index 321233fe..dd62c471 100644 --- a/packages/redux-devtools-inspector/src/utils/getInspectedState.js +++ b/packages/redux-devtools-inspector/src/utils/getInspectedState.js @@ -31,7 +31,7 @@ export default function getInspectedState(state, path, convertImmutable) { } return s[key]; - }, state) + }, state), } : state; diff --git a/packages/redux-devtools-inspector/webpack.config.js b/packages/redux-devtools-inspector/webpack.config.js index b5b9f6e1..6ce6e264 100644 --- a/packages/redux-devtools-inspector/webpack.config.js +++ b/packages/redux-devtools-inspector/webpack.config.js @@ -16,34 +16,34 @@ module.exports = { : [ 'webpack-dev-server/client?http://localhost:3000', 'webpack/hot/only-dev-server', - './demo/src/js/index' + './demo/src/js/index', ], output: { path: path.join(__dirname, 'demo/dist'), - filename: 'js/bundle.js' + filename: 'js/bundle.js', }, plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ inject: true, template: 'demo/src/index.html', - package: pkg + package: pkg, }), new webpack.DefinePlugin({ 'process.env': { - NODE_ENV: JSON.stringify(process.env.NODE_ENV) - } - }) + NODE_ENV: JSON.stringify(process.env.NODE_ENV), + }, + }), ].concat( isProduction ? [] : [ new ExportFilesWebpackPlugin('demo/dist/index.html'), - new webpack.HotModuleReplacementPlugin() + new webpack.HotModuleReplacementPlugin(), ] ), resolve: { - extensions: ['*', '.js', '.jsx'] + extensions: ['*', '.js', '.jsx'], }, module: { rules: [ @@ -52,10 +52,10 @@ module.exports = { loader: 'babel-loader', include: [ path.join(__dirname, 'src'), - path.join(__dirname, 'demo/src/js') - ] - } - ] + path.join(__dirname, 'demo/src/js'), + ], + }, + ], }, devServer: isProduction ? {} @@ -65,8 +65,8 @@ module.exports = { hot: true, stats: { chunkModules: false, - colors: true + colors: true, }, - historyApiFallback: true - } + historyApiFallback: true, + }, }; diff --git a/packages/redux-devtools-instrument/src/instrument.js b/packages/redux-devtools-instrument/src/instrument.js index d0157767..14afbbef 100644 --- a/packages/redux-devtools-instrument/src/instrument.js +++ b/packages/redux-devtools-instrument/src/instrument.js @@ -16,7 +16,7 @@ export const ActionTypes = { REORDER_ACTION: 'REORDER_ACTION', IMPORT_STATE: 'IMPORT_STATE', LOCK_CHANGES: 'LOCK_CHANGES', - PAUSE_RECORDING: 'PAUSE_RECORDING' + PAUSE_RECORDING: 'PAUSE_RECORDING', }; const isChrome = @@ -94,7 +94,7 @@ export const ActionCreators = { type: ActionTypes.PERFORM_ACTION, action, timestamp: Date.now(), - stack + stack, }; }, @@ -144,7 +144,7 @@ export const ActionCreators = { pauseRecording(status) { return { type: ActionTypes.PAUSE_RECORDING, status }; - } + }, }; export const INIT_ACTION = { type: '@@INIT' }; @@ -171,7 +171,7 @@ function computeWithTryCatch(reducer, action, state) { return { state: nextState, - error: nextError + error: nextError, }; } @@ -225,7 +225,7 @@ function recomputeStates( if (shouldCatchErrors && previousEntry && previousEntry.error) { entry = { state: previousState, - error: 'Interrupted by an error up the chain' + error: 'Interrupted by an error up the chain', }; } else { entry = computeNextEntry( @@ -273,7 +273,7 @@ export function liftReducerWith( currentStateIndex: 0, computedStates: [], isLocked: options.shouldStartLocked === true, - isPaused: options.shouldRecordChanges === false + isPaused: options.shouldRecordChanges === false, }; /** @@ -290,7 +290,7 @@ export function liftReducerWith( currentStateIndex, computedStates, isLocked, - isPaused + isPaused, } = liftedState || initialLiftedState; if (!liftedState) { @@ -315,7 +315,7 @@ export function liftReducerWith( } skippedActionIds = skippedActionIds.filter( - id => idsToDelete.indexOf(id) === -1 + (id) => idsToDelete.indexOf(id) === -1 ); stagedActionIds = [0, ...stagedActionIds.slice(excess + 1)]; committedState = computedStates[excess].state; @@ -348,7 +348,7 @@ export function liftReducerWith( currentStateIndex: 0, computedStates: [computedState], isLocked, - isPaused: true + isPaused: true, }; } if (shouldInit) { @@ -362,7 +362,7 @@ export function liftReducerWith( monitorState, actionsById: { ...actionsById, - [nextActionId - 1]: liftAction({ type: options.pauseActionType }) + [nextActionId - 1]: liftAction({ type: options.pauseActionType }), }, nextActionId, stagedActionIds, @@ -371,10 +371,10 @@ export function liftReducerWith( currentStateIndex, computedStates: [ ...computedStates.slice(0, stagedActionIds.length - 1), - computedState + computedState, ], isLocked, - isPaused: true + isPaused: true, }; } @@ -488,7 +488,7 @@ export function liftReducerWith( if (index === -1) { skippedActionIds = [actionId, ...skippedActionIds]; } else { - skippedActionIds = skippedActionIds.filter(id => id !== actionId); + skippedActionIds = skippedActionIds.filter((id) => id !== actionId); } // Optimization: we know history before this action hasn't changed minInvalidatedStateIndex = stagedActionIds.indexOf(actionId); @@ -557,7 +557,7 @@ export function liftReducerWith( ...stagedActionIds.slice(0, newIdx), actionId, ...stagedActionIds.slice(newIdx, idx), - ...stagedActionIds.slice(idx + 1) + ...stagedActionIds.slice(idx + 1), ]; minInvalidatedStateIndex = newIdx; } else if (diff < 0) { @@ -566,7 +566,7 @@ export function liftReducerWith( ...stagedActionIds.slice(0, idx), ...stagedActionIds.slice(idx + 1, newIdx), actionId, - ...stagedActionIds.slice(newIdx) + ...stagedActionIds.slice(newIdx), ]; minInvalidatedStateIndex = idx; } @@ -584,7 +584,7 @@ export function liftReducerWith( committedState = liftedAction.preloadedState; minInvalidatedStateIndex = 0; // iterate through actions - liftedAction.nextLiftedState.forEach(action => { + liftedAction.nextLiftedState.forEach((action) => { actionsById[nextActionId] = liftAction( action, options.trace || options.shouldIncludeCallstack @@ -602,7 +602,7 @@ export function liftReducerWith( skippedActionIds, committedState, currentStateIndex, - computedStates + computedStates, } = liftedAction.nextLiftedState); if (liftedAction.noRecompute) { @@ -662,7 +662,7 @@ export function liftReducerWith( currentStateIndex, computedStates, isLocked, - isPaused + isPaused, }; }; } @@ -727,9 +727,9 @@ export function unliftStore(liftedStore, liftReducer, options) { observeState(); const unsubscribe = liftedStore.subscribe(observeState); return { unsubscribe }; - } + }, }; - } + }, }; } @@ -744,7 +744,7 @@ export default function instrument(monitorReducer = () => null, options = {}) { ); } - return createStore => (reducer, initialState, enhancer) => { + return (createStore) => (reducer, initialState, enhancer) => { function liftReducer(r) { if (typeof r !== 'function') { if (r && typeof r.default === 'function') { diff --git a/packages/redux-devtools-instrument/test/instrument.spec.js b/packages/redux-devtools-instrument/test/instrument.spec.js index 5720ec69..5a59bfc6 100644 --- a/packages/redux-devtools-instrument/test/instrument.spec.js +++ b/packages/redux-devtools-instrument/test/instrument.spec.js @@ -85,7 +85,7 @@ describe('instrument', () => { let lastValue; // let calls = 0; - from(store).subscribe(state => { + from(store).subscribe((state) => { lastValue = state; // calls++; }); @@ -239,7 +239,7 @@ describe('instrument', () => { 1, 2, 3, - 4 + 4, ]); expect(store.getState()).toBe(2); @@ -249,7 +249,7 @@ describe('instrument', () => { 4, 1, 2, - 3 + 3, ]); expect(store.getState()).toBe(1); @@ -259,7 +259,7 @@ describe('instrument', () => { 4, 1, 2, - 3 + 3, ]); expect(store.getState()).toBe(1); @@ -269,7 +269,7 @@ describe('instrument', () => { 1, 4, 2, - 3 + 3, ]); expect(store.getState()).toBe(2); @@ -279,7 +279,7 @@ describe('instrument', () => { 4, 2, 3, - 1 + 1, ]); expect(store.getState()).toBe(1); @@ -289,7 +289,7 @@ describe('instrument', () => { 4, 2, 3, - 1 + 1, ]); expect(store.getState()).toBe(1); @@ -299,7 +299,7 @@ describe('instrument', () => { 1, 4, 2, - 3 + 3, ]); expect(store.getState()).toBe(2); @@ -309,7 +309,7 @@ describe('instrument', () => { 1, 4, 2, - 3 + 3, ]); expect(store.getState()).toBe(2); }); @@ -992,7 +992,7 @@ describe('instrument', () => { ); }); - it('should get stack trace inside setTimeout using a function', done => { + it('should get stack trace inside setTimeout using a function', (done) => { const stack = new Error().stack; setTimeout(() => { const traceFn = () => stack + new Error().stack; @@ -1069,7 +1069,7 @@ describe('instrument', () => { ); let expectedImportedState = Object.assign({}, noComputedExportedState, { - computedStates: undefined + computedStates: undefined, }); expect(importMonitoredLiftedStore.getState()).toEqual( expectedImportedState @@ -1102,7 +1102,7 @@ describe('instrument', () => { }); function filterStackAndTimestamps(state) { - state.actionsById = _.mapValues(state.actionsById, action => { + state.actionsById = _.mapValues(state.actionsById, (action) => { delete action.timestamp; delete action.stack; return action; @@ -1117,14 +1117,14 @@ describe('instrument', () => { let savedActions = [ { type: 'INCREMENT' }, { type: 'INCREMENT' }, - { type: 'INCREMENT' } + { type: 'INCREMENT' }, ]; beforeEach(() => { monitoredStore = createStore(counter, instrument()); monitoredLiftedStore = monitoredStore.liftedStore; // Pass actions through component - savedActions.forEach(action => monitoredStore.dispatch(action)); + savedActions.forEach((action) => monitoredStore.dispatch(action)); // get the final state exportedState = filterStackAndTimestamps(monitoredLiftedStore.getState()); }); @@ -1242,7 +1242,7 @@ describe('instrument', () => { expect(store.liftedStore.getState().isPaused).toBe(true); expect(store.liftedStore.getState().nextActionId).toBe(1); expect(store.liftedStore.getState().actionsById[0].action).toEqual({ - type: '@@INIT' + type: '@@INIT', }); expect(store.getState()).toBe(2); @@ -1250,7 +1250,7 @@ describe('instrument', () => { store.dispatch({ type: 'INCREMENT' }); expect(store.liftedStore.getState().nextActionId).toBe(1); expect(store.liftedStore.getState().actionsById[0].action).toEqual({ - type: '@@INIT' + type: '@@INIT', }); expect(store.getState()).toBe(4); @@ -1261,7 +1261,7 @@ describe('instrument', () => { store.dispatch({ type: 'INCREMENT' }); expect(store.liftedStore.getState().nextActionId).toBe(3); expect(store.liftedStore.getState().actionsById[2].action).toEqual({ - type: 'INCREMENT' + type: 'INCREMENT', }); expect(store.getState()).toBe(6); }); diff --git a/packages/redux-devtools-log-monitor/src/LogMonitor.js b/packages/redux-devtools-log-monitor/src/LogMonitor.js index 9ff2518c..4c0867d7 100644 --- a/packages/redux-devtools-log-monitor/src/LogMonitor.js +++ b/packages/redux-devtools-log-monitor/src/LogMonitor.js @@ -19,7 +19,7 @@ const styles = { width: '100%', height: '100%', minWidth: 300, - direction: 'ltr' + direction: 'ltr', }, elements: { position: 'absolute', @@ -28,8 +28,8 @@ const styles = { top: 0, bottom: 0, overflowX: 'hidden', - overflowY: 'auto' - } + overflowY: 'auto', + }, }; export default class LogMonitor extends Component { @@ -43,7 +43,7 @@ export default class LogMonitor extends Component { skippedActionIds: PropTypes.array, monitorState: PropTypes.shape({ initialScrollTop: PropTypes.number, - consecutiveToggleStartId: PropTypes.number + consecutiveToggleStartId: PropTypes.number, }), preserveScrollTop: PropTypes.bool, @@ -52,16 +52,16 @@ export default class LogMonitor extends Component { expandActionRoot: PropTypes.bool, expandStateRoot: PropTypes.bool, markStateDiff: PropTypes.bool, - hideMainButtons: PropTypes.bool + hideMainButtons: PropTypes.bool, }; static defaultProps = { - select: state => state, + select: (state) => state, theme: 'nicinabox', preserveScrollTop: true, expandActionRoot: true, expandStateRoot: true, - markStateDiff: false + markStateDiff: false, }; shouldComponentUpdate = shouldPureComponentUpdate; @@ -188,7 +188,7 @@ export default class LogMonitor extends Component { select, expandActionRoot, expandStateRoot, - markStateDiff + markStateDiff, } = this.props; const entryListProps = { @@ -204,7 +204,7 @@ export default class LogMonitor extends Component { expandStateRoot, markStateDiff, onActionClick: this.handleToggleAction, - onActionShiftClick: this.handleToggleConsecutiveAction + onActionShiftClick: this.handleToggleConsecutiveAction, }; return ( diff --git a/packages/redux-devtools-log-monitor/src/LogMonitorButton.js b/packages/redux-devtools-log-monitor/src/LogMonitorButton.js index f2f50a31..23e9587c 100644 --- a/packages/redux-devtools-log-monitor/src/LogMonitorButton.js +++ b/packages/redux-devtools-log-monitor/src/LogMonitorButton.js @@ -16,8 +16,8 @@ const styles = { display: 'inline-block', fontSize: '0.8em', color: 'white', - textDecoration: 'none' - } + textDecoration: 'none', + }, }; export default class LogMonitorButton extends React.Component { @@ -34,7 +34,7 @@ export default class LogMonitorButton extends React.Component { this.state = { hovered: false, - active: false + active: false, }; } @@ -66,12 +66,12 @@ export default class LogMonitorButton extends React.Component { render() { let style = { ...styles.base, - backgroundColor: this.props.theme.base02 + backgroundColor: this.props.theme.base02, }; if (this.props.enabled && this.state.hovered) { style = { ...style, - backgroundColor: brighten(this.props.theme.base02, 0.2) + backgroundColor: brighten(this.props.theme.base02, 0.2), }; } if (!this.props.enabled) { @@ -79,7 +79,7 @@ export default class LogMonitorButton extends React.Component { ...style, opacity: 0.2, cursor: 'text', - backgroundColor: 'transparent' + backgroundColor: 'transparent', }; } return ( diff --git a/packages/redux-devtools-log-monitor/src/LogMonitorButtonBar.js b/packages/redux-devtools-log-monitor/src/LogMonitorButtonBar.js index 2100a25a..27b5b34f 100644 --- a/packages/redux-devtools-log-monitor/src/LogMonitorButtonBar.js +++ b/packages/redux-devtools-log-monitor/src/LogMonitorButtonBar.js @@ -13,13 +13,13 @@ const style = { borderColor: 'transparent', zIndex: 1, display: 'flex', - flexDirection: 'row' + flexDirection: 'row', }; export default class LogMonitorButtonBar extends Component { static propTypes = { dispatch: PropTypes.func, - theme: PropTypes.object + theme: PropTypes.object, }; shouldComponentUpdate = shouldPureComponentUpdate; diff --git a/packages/redux-devtools-log-monitor/src/LogMonitorEntry.js b/packages/redux-devtools-log-monitor/src/LogMonitorEntry.js index c4cac702..6f4aea78 100644 --- a/packages/redux-devtools-log-monitor/src/LogMonitorEntry.js +++ b/packages/redux-devtools-log-monitor/src/LogMonitorEntry.js @@ -7,12 +7,12 @@ import shouldPureComponentUpdate from 'react-pure-render/function'; const styles = { entry: { display: 'block', - WebkitUserSelect: 'none' + WebkitUserSelect: 'none', }, root: { - marginLeft: 0 - } + marginLeft: 0, + }, }; const getDeepItem = (data, path) => @@ -36,7 +36,7 @@ export default class LogMonitorEntry extends Component { collapsed: PropTypes.bool, selected: PropTypes.bool, expandActionRoot: PropTypes.bool, - expandStateRoot: PropTypes.bool + expandStateRoot: PropTypes.bool, }; shouldComponentUpdate = shouldPureComponentUpdate; @@ -64,20 +64,20 @@ export default class LogMonitorEntry extends Component { ...style, backgroundColor: dataIsEqual(data, previousData, keyPath) ? 'transparent' - : this.props.theme.base01 - } + : this.props.theme.base01, + }, }); const getNestedNodeStyle = ({ style }, keyPath) => ({ style: { ...style, - ...(keyPath.length > 1 ? {} : styles.root) - } + ...(keyPath.length > 1 ? {} : styles.root), + }, }); theme = { extend: this.props.theme, tree: styles.tree, value: getValueStyle, - nestedNode: getNestedNodeStyle + nestedNode: getNestedNodeStyle, }; } else { theme = this.props.theme; @@ -104,7 +104,7 @@ export default class LogMonitorEntry extends Component { paddingTop: 20, paddingLeft: 30, paddingRight: 30, - paddingBottom: 35 + paddingBottom: 35, }} > {errorText} @@ -135,11 +135,11 @@ export default class LogMonitorEntry extends Component { state, collapsed, selected, - inFuture + inFuture, } = this.props; const styleEntry = { opacity: collapsed ? 0.5 : 1, - cursor: actionId > 0 ? 'pointer' : 'default' + cursor: actionId > 0 ? 'pointer' : 'default', }; return ( @@ -147,7 +147,7 @@ export default class LogMonitorEntry extends Component { style={{ opacity: selected ? 0.4 : inFuture ? 0.6 : 1, // eslint-disable-line no-nested-ternary textDecoration: collapsed ? 'line-through' : 'none', - color: this.props.theme.base06 + color: this.props.theme.base06, }} > {Object.keys(payload).length > 0 ? ( @@ -54,7 +54,7 @@ export default class LogMonitorAction extends Component { style={{ backgroundColor: this.props.theme.base02, color: this.props.theme.base06, - ...this.props.style + ...this.props.style, }} >
diff --git a/packages/redux-devtools-log-monitor/src/LogMonitorEntryList.js b/packages/redux-devtools-log-monitor/src/LogMonitorEntryList.js index adf648af..7acaa370 100644 --- a/packages/redux-devtools-log-monitor/src/LogMonitorEntryList.js +++ b/packages/redux-devtools-log-monitor/src/LogMonitorEntryList.js @@ -16,7 +16,7 @@ export default class LogMonitorEntryList extends Component { onActionClick: PropTypes.func.isRequired, theme: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), expandActionRoot: PropTypes.bool, - expandStateRoot: PropTypes.bool + expandStateRoot: PropTypes.bool, }; shouldComponentUpdate = shouldPureComponentUpdate; @@ -36,7 +36,7 @@ export default class LogMonitorEntryList extends Component { expandStateRoot, markStateDiff, onActionClick, - onActionShiftClick + onActionShiftClick, } = this.props; for (let i = 0; i < stagedActionIds.length; i++) { diff --git a/packages/redux-devtools-log-monitor/src/brighten.js b/packages/redux-devtools-log-monitor/src/brighten.js index aa68da46..257e2aa0 100644 --- a/packages/redux-devtools-log-monitor/src/brighten.js +++ b/packages/redux-devtools-log-monitor/src/brighten.js @@ -1,4 +1,4 @@ -export default function(hexColor, lightness) { +export default function (hexColor, lightness) { let hex = String(hexColor).replace(/[^0-9a-f]/gi, ''); if (hex.length < 6) { hex = hex.replace(/(.)/g, '$1$1'); diff --git a/packages/redux-devtools-log-monitor/src/reducers.js b/packages/redux-devtools-log-monitor/src/reducers.js index a18fed2d..1312a9b9 100644 --- a/packages/redux-devtools-log-monitor/src/reducers.js +++ b/packages/redux-devtools-log-monitor/src/reducers.js @@ -19,6 +19,6 @@ export default function reducer(props, state = {}, action) { props, state.consecutiveToggleStartId, action - ) + ), }; } diff --git a/packages/redux-devtools-slider-monitor/examples/todomvc/actions/TodoActions.js b/packages/redux-devtools-slider-monitor/examples/todomvc/actions/TodoActions.js index f8cfb289..f0122846 100644 --- a/packages/redux-devtools-slider-monitor/examples/todomvc/actions/TodoActions.js +++ b/packages/redux-devtools-slider-monitor/examples/todomvc/actions/TodoActions.js @@ -3,14 +3,14 @@ import * as types from '../constants/ActionTypes'; export function addTodo(text) { return { type: types.ADD_TODO, - text + text, }; } export function deleteTodo(id) { return { type: types.DELETE_TODO, - id + id, }; } @@ -18,25 +18,25 @@ export function editTodo(id, text) { return { type: types.EDIT_TODO, id, - text + text, }; } export function markTodo(id) { return { type: types.MARK_TODO, - id + id, }; } export function markAll() { return { - type: types.MARK_ALL + type: types.MARK_ALL, }; } export function clearMarked() { return { - type: types.CLEAR_MARKED + type: types.CLEAR_MARKED, }; } diff --git a/packages/redux-devtools-slider-monitor/examples/todomvc/components/Footer.js b/packages/redux-devtools-slider-monitor/examples/todomvc/components/Footer.js index 93c12166..f583f39e 100644 --- a/packages/redux-devtools-slider-monitor/examples/todomvc/components/Footer.js +++ b/packages/redux-devtools-slider-monitor/examples/todomvc/components/Footer.js @@ -6,7 +6,7 @@ import { SHOW_ALL, SHOW_MARKED, SHOW_UNMARKED } from '../constants/TodoFilters'; const FILTER_TITLES = { [SHOW_ALL]: 'All', [SHOW_UNMARKED]: 'Active', - [SHOW_MARKED]: 'Completed' + [SHOW_MARKED]: 'Completed', }; export default class Footer extends Component { @@ -15,7 +15,7 @@ export default class Footer extends Component { unmarkedCount: PropTypes.number.isRequired, filter: PropTypes.string.isRequired, onClearMarked: PropTypes.func.isRequired, - onShow: PropTypes.func.isRequired + onShow: PropTypes.func.isRequired, }; render() { @@ -23,7 +23,7 @@ export default class Footer extends Component {