fix(Clickable): more Components in checkClickable (#7390)

Добавляем больше компонентов в проверке кликабельности
VKCOM · Aug 15, 2024 · e1c5d25 · e1c5d25
1 parent b45785e
commit e1c5d25
Show file tree

Hide file tree

Showing 11 changed files with 28 additions and 29 deletions.
diff --git a/packages/vkui/src/components/Button/Button.tsx b/packages/vkui/src/components/Button/Button.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';
+import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { usePlatform } from '../../hooks/usePlatform';
 import { HasAlign } from '../../types';
@@ -70,7 +70,7 @@ export const Button = ({
   after,
   getRootRef,
   loading,
-  onClick = noop,
+  onClick,
   className,
   disableSpinnerAnimation,
   rounded,

diff --git a/packages/vkui/src/components/Cell/Cell.tsx b/packages/vkui/src/components/Cell/Cell.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { classNames, noop } from '@vkontakte/vkjs';
+import { classNames } from '@vkontakte/vkjs';
 import type { SwappedItemRange } from '../../hooks/useDraggableWithDomApi';
 import { useExternRef } from '../../hooks/useExternRef';
 import { usePlatform } from '../../hooks/usePlatform';
@@ -52,7 +52,7 @@ export const Cell: React.FC<CellProps> & {
   Checkbox: typeof CellCheckbox;
 } = ({
   mode,
-  onRemove = noop,
+  onRemove,
   removePlaceholder = 'Удалить',
   onDragFinish,
   before,
@@ -167,7 +167,7 @@ export const Cell: React.FC<CellProps> & {
         style={style}
         getRootRef={rootElRef}
         removePlaceholder={removePlaceholder}
-        onRemove={(e) => onRemove(e, rootElRef.current)}
+        onRemove={(e) => onRemove?.(e, rootElRef.current)}
         toggleButtonTestId={toggleButtonTestId}
         removeButtonTestId={removeButtonTestId}
       >

diff --git a/packages/vkui/src/components/ChipsInputBase/Chip/Chip.tsx b/packages/vkui/src/components/ChipsInputBase/Chip/Chip.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Icon16Cancel } from '@vkontakte/icons';
-import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';
+import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../../hooks/useAdaptivity';
 import { useFocusVisible } from '../../../hooks/useFocusVisible';
 import { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';
@@ -22,7 +22,7 @@ export const Chip = ({
   Component = 'span',
   value = '',
   removable = true,
-  onRemove = noop,
+  onRemove,
   removeLabel = 'Удалить',
   before,
   after,
@@ -54,7 +54,7 @@ export const Chip = ({
 
   const onRemoveWrapper = React.useCallback(
     (event: React.MouseEvent) => {
-      onRemove(event, value);
+      onRemove?.(event, value);
     },
     [onRemove, value],
   );

diff --git a/packages/vkui/src/components/Clickable/Clickable.tsx b/packages/vkui/src/components/Clickable/Clickable.tsx
@@ -116,7 +116,10 @@ export function checkClickable<T>(props: ClickableProps<T>): boolean {
     (props.href !== undefined ||
       props.onClick !== undefined ||
       props.onClickCapture !== undefined ||
-      props.Component === 'label') &&
+      props.Component === 'a' ||
+      props.Component === 'button' ||
+      props.Component === 'label' ||
+      props.Component === 'input') &&
     !props.disabled
   );
 }

diff --git a/packages/vkui/src/components/FormItem/FormItem.tsx b/packages/vkui/src/components/FormItem/FormItem.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';
+import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useObjectMemo } from '../../hooks/useObjectMemo';
@@ -89,7 +89,7 @@ export const FormItem: React.FC<FormItemProps> & {
   bottom,
   status = 'default',
   removable,
-  onRemove = noop,
+  onRemove,
   removePlaceholder = 'Удалить',
   getRootRef,
   htmlFor,
@@ -154,7 +154,7 @@ export const FormItem: React.FC<FormItemProps> & {
             align="start"
             onRemove={(e) => {
               if (rootEl?.current) {
-                onRemove(e, rootEl.current);
+                onRemove?.(e, rootEl.current);
               }
             }}
             removePlaceholder={removePlaceholder}

diff --git a/packages/vkui/src/components/FormLayoutGroup/FormLayoutGroup.tsx b/packages/vkui/src/components/FormLayoutGroup/FormLayoutGroup.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { classNames, noop } from '@vkontakte/vkjs';
+import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useExternRef } from '../../hooks/useExternRef';
 import { HTMLAttributesWithRootRef } from '../../types';
@@ -44,7 +44,7 @@ export const FormLayoutGroup = ({
   removable,
   segmented,
   removePlaceholder = 'Удалить',
-  onRemove = noop,
+  onRemove,
   getRootRef,
   ...restProps
 }: FormLayoutGroupProps): React.ReactNode => {
@@ -89,7 +89,7 @@ export const FormLayoutGroup = ({
           removePlaceholder={removePlaceholder}
           onRemove={(e) => {
             if (rootEl?.current) {
-              onRemove(e, rootEl.current);
+              onRemove?.(e, rootEl.current);
             }
           }}
           indent={removable === 'indent'}

diff --git a/packages/vkui/src/components/Link/Link.tsx b/packages/vkui/src/components/Link/Link.tsx
@@ -1,4 +1,4 @@
-import { classNames, noop } from '@vkontakte/vkjs';
+import { classNames } from '@vkontakte/vkjs';
 import { Tappable, TappableProps } from '../Tappable/Tappable';
 import styles from './Link.module.css';
 
@@ -16,13 +16,11 @@ export const Link = ({
   hasVisited,
   children,
   className,
-  onClick = noop,
   ...restProps
 }: LinkProps): React.ReactNode => {
   return (
     <Tappable
       Component={restProps.href ? 'a' : 'button'}
-      onClick={onClick}
       {...restProps}
       className={classNames(styles['Link'], hasVisited && styles['Link--has-visited'], className)}
       hasHover={false}

diff --git a/packages/vkui/src/components/Removable/Removable.tsx b/packages/vkui/src/components/Removable/Removable.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Icon24Cancel } from '@vkontakte/icons';
-import { classNames, noop } from '@vkontakte/vkjs';
+import { classNames } from '@vkontakte/vkjs';
 import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
 import { usePlatform } from '../../hooks/usePlatform';
 import { getTextFromChildren } from '../../lib/children';
@@ -155,7 +155,7 @@ interface RemovableOwnProps
  */
 export const Removable = ({
   children,
-  onRemove = noop,
+  onRemove,
   removePlaceholder = 'Удалить',
   align = 'center',
   indent = false,
@@ -167,7 +167,7 @@ export const Removable = ({
 
   const onRemoveClick = (e: React.MouseEvent) => {
     e.preventDefault();
-    onRemove(e);
+    onRemove?.(e);
   };
 
   const removePlaceholderString: string = getTextFromChildren(removePlaceholder);

diff --git a/packages/vkui/src/components/Search/Search.tsx b/packages/vkui/src/components/Search/Search.tsx
@@ -61,7 +61,7 @@ export const Search = ({
   after = 'Отмена',
   getRef,
   icon: iconProp,
-  onIconClick = noop,
+  onIconClick,
   style,
   autoComplete = 'off',
   onChange,
@@ -115,7 +115,7 @@ export const Search = ({
   }, [inputRef]);
 
   const onIconClickStart: React.PointerEventHandler<HTMLElement> = React.useCallback(
-    (e) => onIconClick(e),
+    (e) => onIconClick?.(e),
     [onIconClick],
   );
 

diff --git a/packages/vkui/src/components/Snackbar/Snackbar.tsx b/packages/vkui/src/components/Snackbar/Snackbar.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { classNames, noop } from '@vkontakte/vkjs';
+import { classNames } from '@vkontakte/vkjs';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useFocusWithin } from '../../hooks/useFocusWithin';
 import { useGlobalEscKeyDown } from '../../hooks/useGlobalEscKeyDown';
@@ -89,7 +89,7 @@ export const Snackbar: React.FC<SnackbarProps> & { Basic: typeof Basic } = ({
   before,
   after,
   duration = 4000,
-  onActionClick = noop,
+  onActionClick,
   onClose,
   mode = 'default',
   subtitle,
@@ -157,7 +157,7 @@ export const Snackbar: React.FC<SnackbarProps> & { Basic: typeof Basic } = ({
   const handleActionClick = (event: React.MouseEvent) => {
     close();
     if (action) {
-      onActionClick(event);
+      onActionClick?.(event);
     }
   };
 

diff --git a/packages/vkui/src/components/ToolButton/ToolButton.tsx b/packages/vkui/src/components/ToolButton/ToolButton.tsx
@@ -1,4 +1,4 @@
-import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';
+import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import {
   AdaptiveIconRenderer,
@@ -52,7 +52,6 @@ export const ToolButton = ({
   mode = 'primary',
   appearance = 'accent',
   direction = 'row',
-  onClick = noop,
   className,
   children,
   IconCompact,
@@ -69,7 +68,6 @@ export const ToolButton = ({
       activeMode={styles['ToolButton--active']}
       Component={restProps.href ? 'a' : 'button'}
       focusVisibleMode="outside"
-      onClick={onClick}
       className={classNames(
         className,
         styles['ToolButton'],