Add support for events on RangeSelector buttons. Fixes #79

Author: whawker

packages/react-jsx-highcharts/src/utils/events.js

@@ -13,27 +13,27 @@ export const getNonEventHandlerProps = props => {
   return omitBy(props, _isEventKey);
 };
 
+export const getEventsConfig = props => {
+  const eventProps = getEventHandlerProps(props);
+
+  return mapKeys(eventProps, (handler, eventName) => {
+    return lowerFirst(eventName.replace(/^on/, ''));
+  });
+}
+
 export const addEventHandlersManually = (Highcharts, context, props) => {
-  const eventProps = _getEventProps(props);
+  const eventProps = getEventsConfig(props);
 
   forEach(eventProps, (handler, eventName) => {
     Highcharts.addEvent(context, eventName, handler);
   });
 };
 
 export const addEventHandlers = (updateFn, props) => {
-  const events = _getEventProps(props);
+  const events = getEventsConfig(props);
   updateFn({ events });
 };
 
 const _isEventKey = (value, key) => (key.indexOf('on') === 0) && isFunction(value);
 
-const _getEventProps = props => {
-  const eventProps = getEventHandlerProps(props);
-
-  return mapKeys(eventProps, (handler, eventName) => {
-    return lowerFirst(eventName.replace(/^on/, ''));
-  });
-}
-
 export default addEventHandlers;

packages/react-jsx-highstock/src/components/RangeSelector/RangeSelectorButton.js

@@ -1,15 +1,25 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
+import { getEventsConfig } from 'react-jsx-highcharts/src/utils/events';
 
 class RangeSelectorButton extends Component {
 
   static propTypes = {
     count: PropTypes.number,
-    type: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['millisecond', 'second', 'minute', 'hour', 'day', 'week', 'month', 'ytd', 'all']),
+    offsetMin: PropTypes.number.isRequired,
+    offsetMax: PropTypes.number.isRequired,
+    dataGrouping: PropTypes.object,
     update: PropTypes.func, // Provided by ChartProvider
     getChart: PropTypes.func // Provided by ChartProvider
   };
 
+  static defaultProps = {
+    count: 1,
+    offsetMin: 0,
+    offsetMax: 0
+  };
+
   constructor (props) {
     super(props);
     this.getButtons = this.getButtons.bind(this);
@@ -21,13 +31,18 @@ class RangeSelectorButton extends Component {
     const button = this.getButtonIndex();
     if (button > -1) return; // Button already present
 
-    const { count, type, children } = this.props;
+    const { count, type, offsetMin, offsetMax, dataGrouping, children, ...rest } = this.props;
+
     const buttons = [
       ...this.getButtons(),
       {
         count,
         type,
-        text: children
+        offsetMin,
+        offsetMax,
+        dataGrouping,
+        text: children,
+        events: getEventsConfig(rest)
       }
     ];
     this.updateRangeSelectorButtons(buttons);