[Bug] Fix speed button input on timeline (#1376)

Signed-off-by: Nicolas Rojo <nicolas.martin.rojo@gmail.com>
keplergl · Dec 10, 2020 · e88b4f1 · e88b4f1
1 parent 7aeca21
commit e88b4f1
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 13 deletions.
diff --git a/src/components/common/animation-control/playback-controls.js b/src/components/common/animation-control/playback-controls.js
@@ -149,13 +149,24 @@ function PlaybackControlsFactory(AnimationSpeedSlider) {
     buttonStyle = 'secondary',
     buttonHeight = DEFAULT_BUTTON_HEIGHT
   }) => {
-    const [showSpeedControl, toggleSpeedControl] = useState(false);
+
+    const [isSpeedControlVisible, toggleSpeedControl] = useState(false);
     const [showAnimationWindowControl, setShowAnimationWindowControl] = useState(false);
+
     const toggleAnimationWindowControl = useCallback(() => {
       setShowAnimationWindowControl(!showAnimationWindowControl);
     }, [showAnimationWindowControl, setShowAnimationWindowControl]);
     const btnStyle = buttonStyle ? {[buttonStyle]: true} : {};
 
+    const hideAndShowSpeedControl = useCallback(() => {
+      if (!isSpeedControlVisible) {
+        toggleSpeedControl(true);
+      } else {
+        // TODO: A HACK to allow input onblur get triggered before the input is unmounted
+        // A better solution should be invested, see https://github.com/facebook/react/issues/12363
+        window.setTimeout(() => toggleSpeedControl(false), 200);
+      }
+    }, [isSpeedControlVisible, toggleSpeedControl]);
     return (
       <StyledAnimationControls
         className={classnames('playback-controls', {
@@ -201,28 +212,22 @@ function PlaybackControlsFactory(AnimationSpeedSlider) {
 
         {/** Speed */}
         {showAnimationWindowControl || !updateAnimationSpeed ? null : (
-          <StyledSpeedControl
-            onClick={() => {
-              toggleSpeedControl(!showSpeedControl);
-            }}
-          >
+          <StyledSpeedControl>
             <IconButton
               data-tip
               data-for="animate-speed"
               className="playback-control-button"
-              onClick={nop}
               {...btnStyle}
+              onClick={hideAndShowSpeedControl}
             >
               <playbackIcons.speed height={buttonHeight} />
               <Tooltip id="animate-speed" place="top" delayShow={DELAY_SHOW} effect="solid">
                 <span>{preciseRound(speed, 1)}x</span>
               </Tooltip>
             </IconButton>
-            {showSpeedControl ? (
+            {isSpeedControlVisible ? (
               <AnimationSpeedSlider
-                onHide={() => {
-                  toggleSpeedControl(false);
-                }}
+                onHide={hideAndShowSpeedControl}
                 updateAnimationSpeed={updateAnimationSpeed}
                 speed={speed}
               />
@@ -253,7 +258,7 @@ function PlaybackControlsFactory(AnimationSpeedSlider) {
             data-for="animate-play-pause"
             className={classnames('playback-control-button', {active: isAnimating})}
             onClick={isAnimating ? pauseAnimation : startAnimation}
-            hide={showSpeedControl}
+            hide={isSpeedControlVisible}
             {...btnStyle}
           >
             {isAnimating ? (

diff --git a/src/processors/index.js b/src/processors/index.js
@@ -35,7 +35,8 @@ export {
   readFileInBatches,
   processFileData,
   filesToDataPayload,
-  isKeplerGlMap
+  isKeplerGlMap,
+  readBatch
 } from './file-handler';
 
 export {Processors as default} from './data-processor';