Add Interaction with Keyboard story

stories/InteractionStory.js

@@ -1,90 +1,57 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import { action } from '@storybook/addon-actions';
 import PieChart from '../src';
 import { dataPropType } from '../src/propTypes';
 
-const FULL_WIDTH = 35;
-const NORMAL_WIDTH = 32;
+function DemoInteraction(props) {
+  const [selected, setSelected] = useState(undefined);
+  const [hovered, setHovered] = useState(undefined);
 
-class DemoInteraction extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      data: props.data.map((entry) => ({
-        ...entry,
-        ...{ style: { strokeWidth: NORMAL_WIDTH } },
-      })),
-      selected: undefined,
-    };
+  const onMouseOverHandler = (_, __, index) => {
+    setHovered(index);
+  };
 
-    this.onMouseOut = this.onMouseOut.bind(this);
-    this.onMouseOver = this.onMouseOver.bind(this);
-    this.onClick = this.onClick.bind(this);
-  }
+  const onMouseOutHandler = () => {
+    setHovered(undefined);
+  };
 
-  onMouseOut(event, propsData, index) {
-    const data = propsData.map((entry, i) => {
-      return i === index
-        ? {
-            ...entry,
-            color: this.props.data[index].color,
-          }
-        : entry;
-    });
-
-    this.setState({
-      data,
-    });
-  }
-
-  onMouseOver(event, propsData, index) {
-    const data = propsData.map((entry, i) => {
-      return i === index
-        ? {
-            ...entry,
-            color: 'grey',
-          }
-        : entry;
-    });
-
-    this.setState({
-      data,
-    });
-  }
-
-  onClick(event, propsData, index) {
+  const onClickHandler = (event, propsData, index) => {
     action('CLICK')(event, propsData, index);
     console.log('CLICK', { event, propsData, index });
-
-    const data = propsData.map((entry, i) => {
-      return {
-        ...entry,
-        ...{
-          style: {
-            ...entry.style,
-            strokeWidth: i === index ? FULL_WIDTH : NORMAL_WIDTH,
-          },
-        },
-      };
-    });
-
-    this.setState({
-      data,
+    setSelected(index);
+  };
+
+  const data = props.data
+    .map((entry, i) => {
+      if (hovered === i) {
+        return {
+          ...entry,
+          color: 'grey',
+        };
+      }
+      return entry;
+    })
+    .map((entry, i) => {
+      if (selected === i) {
+        return {
+          ...entry,
+          ...{ style: { strokeWidth: 35 } },
+        };
+      }
+      return entry;
     });
-  }
 
-  render() {
-    return (
-      <PieChart
-        data={this.state.data}
-        segmentsStyle={{ transition: 'stroke .3s' }}
-        onClick={this.onClick}
-        onMouseOver={this.onMouseOver}
-        onMouseOut={this.onMouseOut}
-        animate
-      />
-    );
-  }
+  return (
+    <PieChart
+      data={data}
+      radius={40}
+      lineWidth={75}
+      segmentsStyle={{ transition: 'stroke .3s' }}
+      onClick={onClickHandler}
+      onMouseOver={onMouseOverHandler}
+      onMouseOut={onMouseOutHandler}
+    />
+  );
 }
 
 DemoInteraction.propTypes = {

stories/InteractionTabStory.js

@@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+import { action } from '@storybook/addon-actions';
+import PieChart from '../src';
+import { dataPropType } from '../src/propTypes';
+
+function DemoInteractionTab(props) {
+  const [selected, setSelected] = useState(undefined);
+  const [focused, setFocused] = useState(undefined);
+
+  const onFocusHandler = (_, __, index) => {
+    setFocused(index);
+  };
+
+  const onBlurHandler = () => {
+    setFocused(undefined);
+    setSelected(undefined);
+  };
+
+  const onKeyDownHandler = (event, propsData, index) => {
+    // Enter keypress
+    if (event.keyCode === 13) {
+      action('CLICK')(event, propsData, index);
+      console.log('CLICK', { event, propsData, index });
+      setSelected(selected === index ? undefined : index);
+    }
+  };
+
+  const data = props.data
+    .map((entry, i) => {
+      if (focused === i) {
+        return {
+          ...entry,
+          color: 'grey',
+        };
+      }
+      return entry;
+    })
+    .map((entry, i) => {
+      if (selected === i) {
+        return {
+          ...entry,
+          ...{ style: { strokeWidth: 35 } },
+        };
+      }
+      return entry;
+    });
+
+  return (
+    <>
+      <p>
+        Press Tab until focus reaches the Chart or click on the yellow sector
+        and press Tab and then Enter.
+      </p>
+      <PieChart
+        data={data}
+        radius={40}
+        lineWidth={75}
+        segmentsStyle={{ transition: 'stroke .3s' }}
+        segmentsTabIndex={1}
+        onKeyDown={onKeyDownHandler}
+        onFocus={onFocusHandler}
+        onBlur={onBlurHandler}
+      />
+    </>
+  );
+}
+
+DemoInteractionTab.propTypes = {
+  data: dataPropType,
+};
+
+export default DemoInteractionTab;

stories/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import PieChart from '../src';
 import InteractionStory from './InteractionStory';
+import InteractionTabStory from './InteractionTabStory';
 import LoadingIndicatorStory from './LoadingIndicatorStory';
 import PartialLoadingIndicatorStory from './PartialLoadingIndicatorStory';
 
@@ -132,7 +133,8 @@ storiesOf('Interaction', module)
   .addParameters({ options: { showPanel: true, panelPosition: 'bottom' } })
   .add('click, mouseOver, mouseOut callbacks', () => (
     <InteractionStory data={dataMock} />
-  ));
+  ))
+  .add('Tab + Enter key press', () => <InteractionTabStory data={dataMock} />);
 
 storiesOf('Misc', module)
   .add('Single gradient', () => (