From e1c5d25757a1034a8784478cb6015e04d8bbc8d2 Mon Sep 17 00:00:00 2001 From: Daniil Suvorov Date: Thu, 15 Aug 2024 12:19:28 +0300 Subject: [PATCH] fix(Clickable): more Components in checkClickable (#7390) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Добавляем больше компонентов в проверке кликабельности --- packages/vkui/src/components/Button/Button.tsx | 4 ++-- packages/vkui/src/components/Cell/Cell.tsx | 6 +++--- packages/vkui/src/components/ChipsInputBase/Chip/Chip.tsx | 6 +++--- packages/vkui/src/components/Clickable/Clickable.tsx | 5 ++++- packages/vkui/src/components/FormItem/FormItem.tsx | 6 +++--- .../vkui/src/components/FormLayoutGroup/FormLayoutGroup.tsx | 6 +++--- packages/vkui/src/components/Link/Link.tsx | 4 +--- packages/vkui/src/components/Removable/Removable.tsx | 6 +++--- packages/vkui/src/components/Search/Search.tsx | 4 ++-- packages/vkui/src/components/Snackbar/Snackbar.tsx | 6 +++--- packages/vkui/src/components/ToolButton/ToolButton.tsx | 4 +--- 11 files changed, 28 insertions(+), 29 deletions(-) diff --git a/packages/vkui/src/components/Button/Button.tsx b/packages/vkui/src/components/Button/Button.tsx index d0e5c6650e..d1f5e2dac4 100644 --- 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 index e0163b6271..4df061af00 100644 --- 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 & { Checkbox: typeof CellCheckbox; } = ({ mode, - onRemove = noop, + onRemove, removePlaceholder = 'Удалить', onDragFinish, before, @@ -167,7 +167,7 @@ export const Cell: React.FC & { 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 index ddf871505f..ef5763c3d2 100644 --- 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 index 058693d319..76b0a34894 100644 --- a/packages/vkui/src/components/Clickable/Clickable.tsx +++ b/packages/vkui/src/components/Clickable/Clickable.tsx @@ -116,7 +116,10 @@ export function checkClickable(props: ClickableProps): 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 index d93eee2546..edf152bedb 100644 --- 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 & { bottom, status = 'default', removable, - onRemove = noop, + onRemove, removePlaceholder = 'Удалить', getRootRef, htmlFor, @@ -154,7 +154,7 @@ export const FormItem: React.FC & { 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 index ac142b8d60..412bfb04c9 100644 --- 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 index f427255d60..4a69987eb9 100644 --- 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 ( { 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 index 0c305ef8c8..8939429961 100644 --- 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 = 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 index b844945751..cf245b8585 100644 --- 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 & { Basic: typeof Basic } = ({ before, after, duration = 4000, - onActionClick = noop, + onActionClick, onClose, mode = 'default', subtitle, @@ -157,7 +157,7 @@ export const Snackbar: React.FC & { 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 index fe43afd663..b12fdea718 100644 --- 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'],