Fix plotband to work when used outside of axis context

whawker · Sep 30, 2019 · 9e3ccd2 · 9e3ccd2
1 parent 01a4516
commit 9e3ccd2
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/packages/react-jsx-highcharts/src/components/PlotBandLine/PlotBandLineLabel.js b/packages/react-jsx-highcharts/src/components/PlotBandLine/PlotBandLineLabel.js
@@ -3,23 +3,25 @@ import { attempt } from 'lodash-es';
 import usePlotBandLine from './UsePlotBandLine';
 
 const PlotBandLineLabel = memo(props => {
-  const { object: plotbandline } = usePlotBandLine();
+  const providedPlotbandline = usePlotBandLine();
 
   useEffect(() => {
+    if (!providedPlotbandline) return;
     const { children: text, id, ...rest } = props;
-    updatePlotBandLineLabel(plotbandline, {
+    updatePlotBandLineLabel(providedPlotbandline.object, {
       text,
       ...rest
     });
   });
 
   useEffect(() => {
     return () => {
-      attempt(updatePlotBandLineLabel, plotbandline, {
+      if (!providedPlotbandline) return;
+      attempt(updatePlotBandLineLabel, providedPlotbandline.object, {
         text: null
       });
     };
-  }, [plotbandline]);
+  }, [providedPlotbandline]);
 
   return null;
 });

diff --git a/packages/react-jsx-highcharts/src/components/PlotBandLine/UsePlotBandLineLifecycle.js b/packages/react-jsx-highcharts/src/components/PlotBandLine/UsePlotBandLineLifecycle.js
@@ -4,10 +4,10 @@ import { attempt } from 'lodash-es';
 import useModifiedProps from '../UseModifiedProps';
 import useAxis from '../UseAxis';
 
-export default function usePlotBandLine(props, plotType) {
-  const { id = uuid, children, ...rest } = props;
+export default function usePlotBandLineLifecycle(props, plotType) {
+  const { id = uuid, axisId, children, ...rest } = props;
 
-  const axis = useAxis();
+  const axis = useAxis(axisId);
   const idRef = useRef();
   const [plotbandline, setPlotbandline] = useState(null);
   const modifiedProps = useModifiedProps(rest);