Try to simplify animation

h39s · Feb 14, 2023 · f963692 · f963692
1 parent c4afb71
commit f963692
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 74 deletions.
diff --git a/src/renderer/MainContent.tsx b/src/renderer/MainContent.tsx
@@ -1,4 +1,11 @@
-import { createRef, Fragment } from 'react';
+import {
+  createRef,
+  Fragment,
+  RefObject,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { MAX_NUM_FILTERS, MIN_NUM_FILTERS } from 'common/constants';
 import FrequencyBand from './components/FrequencyBand';
 import { useAquaContext } from './utils/AquaContext';
@@ -10,6 +17,18 @@ import Spinner from './icons/Spinner';
 const MainContent = () => {
   const { filters, isLoading } = useAquaContext();
   const wrapperRef = createRef<HTMLDivElement>();
+  const sliderRefs = useRef<Array<HTMLDivElement>>([]);
+  const dividerRefs = useRef<Array<HTMLDivElement>>([]);
+
+  useEffect(() => {
+    sliderRefs.current = sliderRefs.current.slice(0, filters.length);
+    dividerRefs.current = dividerRefs.current.slice(0, filters.length + 1);
+  }, [filters]);
+
+  useEffect(() => {
+    sliderRefs.current?.forEach((r) => {});
+  }, [filters]);
+
   return isLoading ? (
     <div className="center full row">
       <Spinner />
@@ -32,22 +51,30 @@ const MainContent = () => {
           sliderIndex={-1}
           isMaxSliderCount={filters.length >= MAX_NUM_FILTERS}
         />
-        <SortWrapper wrapperRef={wrapperRef}>
-          {filters.map((filter, sliderIndex) => (
-            <Fragment key={`slider-${filter.id}`}>
-              <FrequencyBand
-                sliderIndex={sliderIndex}
-                filter={filter}
-                isMinSliderCount={filters.length <= MIN_NUM_FILTERS}
-                ref={createRef()}
-              />
-              <AddSliderDivider
-                sliderIndex={sliderIndex}
-                isMaxSliderCount={filters.length >= MAX_NUM_FILTERS}
-              />
-            </Fragment>
-          ))}
-        </SortWrapper>
+        {filters.map((filter, sliderIndex) => (
+          <Fragment key={`slider-${filter.id}`}>
+            <FrequencyBand
+              sliderIndex={sliderIndex}
+              filter={filter}
+              isMinSliderCount={filters.length <= MIN_NUM_FILTERS}
+              style={{
+                position: 'fixed',
+                transform: `translateX(${28 + sliderIndex * (28 + 72.47)}px)`,
+                'transition-duration': '500ms',
+              }}
+              key="Test"
+            />
+            <AddSliderDivider
+              sliderIndex={sliderIndex}
+              isMaxSliderCount={filters.length >= MAX_NUM_FILTERS}
+              style={{
+                position: 'fixed',
+                transform: `translateX(${(sliderIndex + 1) * (28 + 72.47)}px)`,
+                'transition-duration': '500ms',
+              }}
+            />
+          </Fragment>
+        ))}
       </div>
     </div>
   );

diff --git a/src/renderer/components/AddSliderDivider.tsx b/src/renderer/components/AddSliderDivider.tsx
@@ -1,5 +1,13 @@
 import { ErrorDescription } from 'common/errors';
-import { KeyboardEvent, useMemo, useRef, useState } from 'react';
+import {
+  ForwardedRef,
+  forwardRef,
+  KeyboardEvent,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { addEqualizerSlider } from '../utils/equalizerApi';
 import PlusIcon from '../icons/PlusIcon';
 import { FilterActionEnum, useAquaContext } from '../utils/AquaContext';
@@ -8,65 +16,69 @@ import '../styles/AddSliderDivider.scss';
 interface IAddSliderDividerProps {
   sliderIndex: number;
   isMaxSliderCount: boolean;
+  style?: object;
 }
 
-const AddSliderDivider = ({
-  sliderIndex,
-  isMaxSliderCount,
-}: IAddSliderDividerProps) => {
-  const { dispatchFilter, setGlobalError } = useAquaContext();
-  const ref = useRef<HTMLDivElement>(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const isAddDisabled = useMemo(
-    () => isLoading || isMaxSliderCount,
-    [isLoading, isMaxSliderCount]
-  );
-
-  const onAddEqualizerSlider = async (insertIndex: number) => {
-    if (isAddDisabled) {
-      return;
-    }
+const AddSliderDivider = forwardRef(
+  (
+    { sliderIndex, isMaxSliderCount, style }: IAddSliderDividerProps,
+    ref: ForwardedRef<HTMLDivElement>
+  ) => {
+    const { dispatchFilter, setGlobalError } = useAquaContext();
+    const innerRef = useRef<HTMLDivElement>(null);
+    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement);
+    const [isLoading, setIsLoading] = useState(false);
+    const isAddDisabled = useMemo(
+      () => isLoading || isMaxSliderCount,
+      [isLoading, isMaxSliderCount]
+    );
 
-    setIsLoading(true);
-    try {
-      const filterId = await addEqualizerSlider(insertIndex);
-      dispatchFilter({
-        type: FilterActionEnum.ADD,
-        id: filterId,
-        index: insertIndex,
-      });
-    } catch (e) {
-      setGlobalError(e as ErrorDescription);
-    }
+    const onAddEqualizerSlider = async (insertIndex: number) => {
+      if (isAddDisabled) {
+        return;
+      }
 
-    ref.current?.blur();
-    setIsLoading(false);
-  };
+      setIsLoading(true);
+      try {
+        const filterId = await addEqualizerSlider(insertIndex);
+        dispatchFilter({
+          type: FilterActionEnum.ADD,
+          id: filterId,
+          index: insertIndex,
+        });
+      } catch (e) {
+        setGlobalError(e as ErrorDescription);
+      }
+      innerRef.current?.blur();
+      setIsLoading(false);
+    };
 
-  const handleKeyUp = (
-    e: KeyboardEvent<HTMLDivElement>,
-    insertIndex: number
-  ) => {
-    if (e.code === 'Enter') {
-      onAddEqualizerSlider(insertIndex);
-    }
-  };
+    const handleKeyUp = (
+      e: KeyboardEvent<HTMLDivElement>,
+      insertIndex: number
+    ) => {
+      if (e.code === 'Enter') {
+        onAddEqualizerSlider(insertIndex);
+      }
+    };
 
-  return (
-    <div
-      role="button"
-      ref={ref}
-      className="col center addFilter"
-      onClick={() => onAddEqualizerSlider(sliderIndex + 1)}
-      onKeyUp={(e) => handleKeyUp(e, sliderIndex + 1)}
-      tabIndex={0}
-      aria-disabled={isAddDisabled}
-    >
-      <div className="divider" />
-      <PlusIcon />
-      <div className="divider" />
-    </div>
-  );
-};
+    return (
+      <div
+        role="button"
+        ref={innerRef}
+        className="col center addFilter"
+        onClick={() => onAddEqualizerSlider(sliderIndex + 1)}
+        onKeyUp={(e) => handleKeyUp(e, sliderIndex + 1)}
+        tabIndex={0}
+        aria-disabled={isAddDisabled}
+        style={style}
+      >
+        <div className="divider" />
+        <PlusIcon />
+        <div className="divider" />
+      </div>
+    );
+  }
+);
 
 export default AddSliderDivider;
diff --git a/src/renderer/components/FrequencyBand.tsx b/src/renderer/components/FrequencyBand.tsx
@@ -30,11 +30,12 @@ interface IFrequencyBandProps {
   sliderIndex: number;
   filter: IFilter;
   isMinSliderCount: boolean;
+  style?: object;
 }
 
 const FrequencyBand = forwardRef(
   (
-    { sliderIndex, filter, isMinSliderCount }: IFrequencyBandProps,
+    { sliderIndex, filter, isMinSliderCount, style }: IFrequencyBandProps,
     ref: ForwardedRef<HTMLDivElement>
   ) => {
     const INTERVAL = 100;
@@ -149,7 +150,7 @@ const FrequencyBand = forwardRef(
 
     return (
       // Need to specify the id here for the sorting to work
-      <div ref={ref} id={filter.id} className="col bandWrapper">
+      <div ref={ref} id={filter.id} className="col bandWrapper" style={style}>
         <IconButton
           icon={IconName.TRASH}
           className="removeFilter"