From 2484953807bc42cf122d246c13207d05f42552b2 Mon Sep 17 00:00:00 2001 From: meriadec Date: Tue, 22 May 2018 22:30:00 +0200 Subject: [PATCH] :art: Chart: Rename `interactive` to `isInteractive` --- src/components/DashboardPage/AccountCard.js | 2 +- src/components/DevTools.js | 20 +------------------- src/components/TopBar/ItemContainer.js | 6 +++--- src/components/TopBar/index.js | 4 ++-- src/components/base/Chart/index.js | 10 +++++----- src/components/base/Chart/refreshDraw.js | 6 +++--- src/components/base/Chart/refreshNodes.js | 10 +++++----- src/components/base/Chart/stories.js | 2 +- 8 files changed, 21 insertions(+), 39 deletions(-) diff --git a/src/components/DashboardPage/AccountCard.js b/src/components/DashboardPage/AccountCard.js index a5fca80e..43502b46 100644 --- a/src/components/DashboardPage/AccountCard.js +++ b/src/components/DashboardPage/AccountCard.js @@ -86,7 +86,7 @@ const AccountCard = ({ color={account.currency.color} height={52} hideAxis - interactive={false} + isInteractive={false} id={`account-chart-${account.id}`} unit={account.unit} /> diff --git a/src/components/DevTools.js b/src/components/DevTools.js index 1e6e1729..9baa004c 100644 --- a/src/components/DevTools.js +++ b/src/components/DevTools.js @@ -254,26 +254,8 @@ class DevTools extends PureComponent { color="#8884d8" height={50} hideAxis - interactive={false} + isInteractive={false} /> - {/* ( - - )} - /> */} ))} diff --git a/src/components/TopBar/ItemContainer.js b/src/components/TopBar/ItemContainer.js index a4019dde..d6b750e4 100644 --- a/src/components/TopBar/ItemContainer.js +++ b/src/components/TopBar/ItemContainer.js @@ -8,13 +8,13 @@ export default styled(Box).attrs({ px: 2, ml: 0, justifyContent: 'center', - cursor: p => (p.interactive ? 'pointer' : 'default'), + cursor: p => (p.isInteractive ? 'pointer' : 'default'), })` opacity: 0.7; &:hover { - opacity: ${p => (p.interactive ? 0.85 : 0.7)}; + opacity: ${p => (p.isInteractive ? 0.85 : 0.7)}; } &:active { - opacity: ${p => (p.interactive ? 1 : 0.7)}; + opacity: ${p => (p.isInteractive ? 1 : 0.7)}; } ` diff --git a/src/components/TopBar/index.js b/src/components/TopBar/index.js index 303e661c..57f2edab 100644 --- a/src/components/TopBar/index.js +++ b/src/components/TopBar/index.js @@ -93,7 +93,7 @@ class TopBar extends PureComponent { - + {hasPassword && ( // FIXME this should be a dedicated component. therefore this component don't need to connect() @@ -101,7 +101,7 @@ class TopBar extends PureComponent { - + diff --git a/src/components/base/Chart/index.js b/src/components/base/Chart/index.js index b2ec4264..7362b379 100644 --- a/src/components/base/Chart/index.js +++ b/src/components/base/Chart/index.js @@ -18,7 +18,7 @@ * * @@ -56,7 +56,7 @@ export type Props = { color?: string, // eslint-disable-line react/no-unused-prop-types hideAxis?: boolean, // eslint-disable-line react/no-unused-prop-types dateFormat?: string, // eslint-disable-line react/no-unused-prop-types - interactive?: boolean, // eslint-disable-line react/no-unused-prop-types + isInteractive?: boolean, // eslint-disable-line react/no-unused-prop-types renderTooltip?: Function, // eslint-disable-line react/no-unused-prop-types } @@ -67,7 +67,7 @@ class Chart extends PureComponent { height: 400, hideAxis: false, id: 'chart', - interactive: true, + isInteractive: true, tickXScale: 'month', unit: undefined, } @@ -113,7 +113,7 @@ class Chart extends PureComponent { this.refreshChart = prevProps => { const { _node: node, props } = this - const { data: raw, color, height, hideAxis, interactive, renderTooltip } = props + const { data: raw, color, height, hideAxis, isInteractive, renderTooltip } = props ctx.DATA = enrichData(raw) @@ -157,7 +157,7 @@ class Chart extends PureComponent { // Mouse handler mouseHandler && mouseHandler.remove() // eslint-disable-line no-unused-expressions - if (interactive) { + if (isInteractive) { mouseHandler = handleMouseEvents({ ctx, props, diff --git a/src/components/base/Chart/refreshDraw.js b/src/components/base/Chart/refreshDraw.js index 2b5381f3..30835ae9 100644 --- a/src/components/base/Chart/refreshDraw.js +++ b/src/components/base/Chart/refreshDraw.js @@ -31,7 +31,7 @@ function getRenderTickX(selectedTime) { export default function refreshDraw({ ctx, props }: { ctx: CTX, props: Props }) { const { NODES, WIDTH, HEIGHT, MARGINS, COLORS, INVALIDATED, DATA, x, y } = ctx - const { hideAxis, interactive, tickXScale, unit } = props + const { hideAxis, isInteractive, tickXScale, unit } = props const nbTicksX = getTickXCount(tickXScale) const renderTickX = getRenderTickX(tickXScale) @@ -62,7 +62,7 @@ export default function refreshDraw({ ctx, props }: { ctx: CTX, props: Props }) } if (INVALIDATED.color) { - if (interactive) { + if (isInteractive) { // Update focus bar colors NODES.xBar.attr('stroke', COLORS.focusBar) NODES.yBar.attr('stroke', COLORS.focusBar) @@ -78,7 +78,7 @@ export default function refreshDraw({ ctx, props }: { ctx: CTX, props: Props }) } // Hide interactive things - if (interactive) { + if (isInteractive) { NODES.focus.style('opacity', 0) NODES.tooltip.style('opacity', 0) NODES.xBar.style('opacity', 0) diff --git a/src/components/base/Chart/refreshNodes.js b/src/components/base/Chart/refreshNodes.js index 856bba10..d4280ad4 100644 --- a/src/components/base/Chart/refreshNodes.js +++ b/src/components/base/Chart/refreshNodes.js @@ -10,7 +10,7 @@ const debug = d('Chart') export default function refreshNodes({ ctx, node, props }: { ctx: CTX, node: any, props: Props }) { const { NODES, COLORS } = ctx - const { hideAxis, interactive, id } = props + const { hideAxis, isInteractive, id } = props // Container @@ -26,7 +26,7 @@ export default function refreshNodes({ ctx, node, props }: { ctx: CTX, node: any // Focus bars - ensure({ onlyIf: interactive, NODES, key: 'xBar' }, () => + ensure({ onlyIf: isInteractive, NODES, key: 'xBar' }, () => NODES.wrapper .append('line') .attr('stroke', COLORS.focusBar) @@ -34,7 +34,7 @@ export default function refreshNodes({ ctx, node, props }: { ctx: CTX, node: any .attr('stroke-dasharray', '3, 2'), ) - ensure({ onlyIf: interactive, NODES, key: 'yBar' }, () => + ensure({ onlyIf: isInteractive, NODES, key: 'yBar' }, () => NODES.wrapper .append('line') .attr('stroke', COLORS.focusBar) @@ -84,7 +84,7 @@ export default function refreshNodes({ ctx, node, props }: { ctx: CTX, node: any // Tooltip & focus point - ensure({ onlyIf: interactive, NODES, key: 'tooltip' }, () => + ensure({ onlyIf: isInteractive, NODES, key: 'tooltip' }, () => d3 .select(node) .append('div') @@ -94,7 +94,7 @@ export default function refreshNodes({ ctx, node, props }: { ctx: CTX, node: any .style('pointer-events', 'none'), ) - ensure({ onlyIf: interactive, NODES, key: 'focus' }, () => + ensure({ onlyIf: isInteractive, NODES, key: 'focus' }, () => NODES.wrapper .append('g') .append('circle') diff --git a/src/components/base/Chart/stories.js b/src/components/base/Chart/stories.js index 5f0c4076..79a90f08 100644 --- a/src/components/base/Chart/stories.js +++ b/src/components/base/Chart/stories.js @@ -43,7 +43,7 @@ class Wrapper extends Component { />