new(brush): expose updateBrush method (#934)

* Expose updateBrush method in ref API * Fix formatting * Fix innerRef type * Satisfy type requirements * Add null to innerRef types * Fix lint errors * Change 1 week button to reset and reset to clear
airbnb · Nov 23, 2020 · 45199f4 · 45199f4
1 parent e40edb9
commit 45199f4
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 9 deletions.
diff --git a/packages/visx-brush/src/Brush.tsx b/packages/visx-brush/src/Brush.tsx
@@ -56,6 +56,8 @@ export type BrushProps = {
   resetOnEnd?: boolean;
   /** Size of Brush handles, applies to all `resizeTriggerAreas`. */
   handleSize: number;
+  /** Reference to the BaseBrush component. */
+  innerRef?: React.MutableRefObject<BaseBrush | null>;
 };
 
 class Brush extends Component<BrushProps> {
@@ -160,6 +162,7 @@ class Brush extends Component<BrushProps> {
       margin,
       brushDirection,
       initialBrushPosition,
+      innerRef,
       resizeTriggerAreas,
       brushRegion,
       yAxisOrientation,
@@ -216,20 +219,21 @@ class Brush extends Component<BrushProps> {
         height={brushRegionHeight}
         left={left}
         top={top}
+        brushDirection={brushDirection}
+        disableDraggingSelection={disableDraggingSelection}
+        handleSize={handleSize}
         inheritedMargin={margin}
         initialBrushPosition={initialBrushPosition}
-        onChange={this.handleChange}
-        onBrushEnd={this.handleBrushEnd}
-        onBrushStart={this.handleBrushStart}
-        handleSize={handleSize}
+        ref={innerRef}
+        resetOnEnd={resetOnEnd}
         resizeTriggerAreas={resizeTriggerAreas}
-        brushDirection={brushDirection}
         selectedBoxStyle={selectedBoxStyle}
-        disableDraggingSelection={disableDraggingSelection}
-        resetOnEnd={resetOnEnd}
+        onBrushEnd={this.handleBrushEnd}
+        onBrushStart={this.handleBrushStart}
+        onChange={this.handleChange}
+        onClick={onClick}
         onMouseLeave={onMouseLeave}
         onMouseMove={onMouseMove}
-        onClick={onClick}
       />
     );
   }

diff --git a/packages/visx-demo/src/sandboxes/visx-brush/Example.tsx b/packages/visx-demo/src/sandboxes/visx-brush/Example.tsx
@@ -1,8 +1,9 @@
-import React, { useState, useMemo } from 'react';
+import React, { useRef, useState, useMemo } from 'react';
 import { scaleTime, scaleLinear } from '@visx/scale';
 import appleStock, { AppleStock } from '@visx/mock-data/lib/mocks/appleStock';
 import { Brush } from '@visx/brush';
 import { Bounds } from '@visx/brush/lib/types';
+import BaseBrush, { BaseBrushState, UpdateBrush } from '@visx/brush/lib/BaseBrush';
 import { PatternLines } from '@visx/pattern';
 import { LinearGradient } from '@visx/gradient';
 import { max, extent } from 'd3-array';
@@ -45,6 +46,7 @@ function BrushChart({
     right: 20,
   },
 }: BrushProps) {
+  const brushRef = useRef<BaseBrush | null>(null);
   const [filteredStock, setFilteredStock] = useState(stock);
 
   const onBrushChange = (domain: Bounds | null) => {
@@ -113,6 +115,35 @@ function BrushChart({
     [brushDateScale],
   );
 
+  // event handlers
+  const handleClearClick = () => {
+    if (brushRef?.current) {
+      setFilteredStock(stock);
+      brushRef.current.reset();
+    }
+  };
+
+  const handleResetClick = () => {
+    if (brushRef?.current) {
+      const updater: UpdateBrush = prevBrush => {
+        const newExtent = brushRef.current!.getExtent(
+          initialBrushPosition.start,
+          initialBrushPosition.end,
+        );
+
+        const newState: BaseBrushState = {
+          ...prevBrush,
+          start: { y: newExtent.y0, x: newExtent.x0 },
+          end: { y: newExtent.y1, x: newExtent.x1 },
+          extent: newExtent,
+        };
+
+        return newState;
+      };
+      brushRef.current.updateBrush(updater);
+    }
+  };
+
   return (
     <div>
       <svg width={width} height={height}>
@@ -155,6 +186,7 @@ function BrushChart({
             height={yBrushMax}
             margin={brushMargin}
             handleSize={8}
+            innerRef={brushRef}
             resizeTriggerAreas={['left', 'right']}
             brushDirection="horizontal"
             initialBrushPosition={initialBrushPosition}
@@ -164,6 +196,8 @@ function BrushChart({
           />
         </AreaChart>
       </svg>
+      <button onClick={handleClearClick}>Clear</button>&nbsp;
+      <button onClick={handleResetClick}>Reset</button>
     </div>
   );
 }