fix(Tappable): force activated/hovered state (#7906)

VKCOM · Nov 7, 2024 · 91bf3e9 · 91bf3e9
1 parent a8f0e1a
commit 91bf3e9
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 36 deletions.
diff --git a/packages/vkui/src/components/Clickable/useState.tsx b/packages/vkui/src/components/Clickable/useState.tsx
@@ -93,12 +93,13 @@ function useHover({ hovered, hasHover = true, lockState, setParentStateLock }: U
     (isHover: boolean) => {
       setHoveredStateLocal(isHover);
 
-      const isHovered = calculateStateValue({
-        hasState: hasHover,
-        isLocked: lockState,
-        stateValueControlled: Boolean(hovered),
-        stateValueLocal: isHover,
-      });
+      const isHovered =
+        hovered ??
+        calculateStateValue({
+          hasState: hasHover,
+          isLocked: lockState,
+          stateValueLocal: isHover,
+        });
 
       // проверка сделана чтобы реже вызывать обновление состояния
       // контекста родителя
@@ -122,12 +123,13 @@ function useHover({ hovered, hasHover = true, lockState, setParentStateLock }: U
     handleHover(false);
   };
 
-  const isHovered = calculateStateValue({
-    hasState: hasHover,
-    isLocked: lockState,
-    stateValueControlled: Boolean(hovered),
-    stateValueLocal: hoveredStateLocal,
-  });
+  const isHovered =
+    hovered ??
+    calculateStateValue({
+      hasState: hasHover,
+      isLocked: lockState,
+      stateValueLocal: hoveredStateLocal,
+    });
 
   return {
     isHovered,
@@ -194,12 +196,13 @@ function useActive({
     setActivated(false, activeEffectDelay);
   };
 
-  const isActivated = calculateStateValue({
-    hasState: hasActive,
-    isLocked: lockStateRef.current,
-    stateValueControlled: Boolean(activated),
-    stateValueLocal: activatedState,
-  });
+  const isActivated =
+    activated ??
+    calculateStateValue({
+      hasState: hasActive,
+      isLocked: lockStateRef.current,
+      stateValueLocal: activatedState,
+    });
 
   return {
     isActivated,
@@ -262,9 +265,12 @@ function useLockRef(
 export function useState({
   hovered,
   hasHover,
+  activated,
   hasActive,
+  activeEffectDelay,
   unlockParentHover,
-  ...restProps
+  hoverClassName,
+  activeClassName,
 }: StateProps): {
   stateClassName: string;
   setLockHoverBubblingImmediate: (...args: any[]) => void;
@@ -286,15 +292,14 @@ export function useState({
   });
 
   const { isActivated, ...activeEvent } = useActive({
-    ...restProps,
+    activated,
+    hasActive,
+    activeEffectDelay,
     lockStateRef: lockActiveStateRef,
     setParentStateLock: setParentStateLockActiveBubbling,
   });
 
-  const stateClassName = classNames(
-    isHovered && restProps.hoverClassName,
-    isActivated && restProps.activeClassName,
-  );
+  const stateClassName = classNames(isHovered && hoverClassName, isActivated && activeClassName);
   const handlers = mergeCalls(hoverEvent, activeEvent);
 
   return {
@@ -309,13 +314,11 @@ export function useState({
 function calculateStateValue({
   hasState,
   isLocked,
-  stateValueControlled,
   stateValueLocal,
 }: {
   hasState: boolean;
   isLocked: boolean;
-  stateValueControlled: boolean;
   stateValueLocal: boolean;
 }): boolean {
-  return hasState && !isLocked && (stateValueControlled || stateValueLocal);
+  return hasState && !isLocked && stateValueLocal;
 }
diff --git a/packages/vkui/src/components/Tappable/Tappable.test.tsx b/packages/vkui/src/components/Tappable/Tappable.test.tsx
@@ -210,11 +210,12 @@ describe(Tappable, () => {
     it('activates during longtap', async () => {
       render(<TappableTest onClick={noop} />);
       fireEvent.pointerDown(tappable());
-      expect(tappable()).not.toHaveClass(styles['Tappable--activated-background']);
-      await waitFor(() => expect(tappable()).toHaveClass(styles['Tappable--activated-background']));
+      act(jest.runOnlyPendingTimers);
+      expect(tappable()).toHaveClass(styles['Tappable--activated-background']);
 
       fireEvent.pointerUp(tappable());
-      expect(tappable()).toHaveClass(styles['Tappable--activated-background']);
+      act(jest.runOnlyPendingTimers);
+      expect(tappable()).not.toHaveClass(styles['Tappable--activated-background']);
     });
 
     it('does not activate on child Tappable click', async () => {
@@ -264,12 +265,16 @@ describe(Tappable, () => {
         expect(tappable()).not.toHaveClass(styles['Tappable--activated-background']);
       });
 
-      it('on hasActive=false', () => {
-        const h = render(<TappableTest />);
-        fireEvent.mouseDown(tappable());
-        act(jest.runAllTimers);
-        h.rerender(<TappableTest hasActive={false} />);
-        expect(tappable()).not.toHaveClass(styles['Tappable--activated-background']);
+      it('on hasActive=false', async () => {
+        render(<TappableTest hasActive={false} onClick={noop} />);
+        await userEvent.click(tappable());
+        let errored = false;
+        await waitFor(() =>
+          expect(tappable()).toHaveClass(styles['Tappable--activated-background']),
+        ).catch(() => {
+          errored = true;
+        });
+        expect(errored).toBeTruthy();
       });
 
       it('on child hover', async () => {