diff --git a/src/blocks/Icons/Icons.tsx b/src/blocks/Icons/Icons.tsx index 43ed83be2..2cc7459de 100644 --- a/src/blocks/Icons/Icons.tsx +++ b/src/blocks/Icons/Icons.tsx @@ -1,8 +1,9 @@ -import React, {Fragment, useContext} from 'react'; +import React, {Fragment, useCallback, useContext} from 'react'; import {Image, Title} from '../../components'; import {LocationContext} from '../../context/locationContext'; -import {IconsBlockProps} from '../../models'; +import {useAnalytics} from '../../hooks'; +import {IconsBlockItemProps, IconsBlockProps} from '../../models'; import {block, getLinkProps} from '../../utils'; import './Icons.scss'; @@ -18,6 +19,14 @@ const getItemContent = (item: IconsBlockProps['items'][number]) => ( const Icons = ({title, size = 's', items}: IconsBlockProps) => { const {hostname} = useContext(LocationContext); + const handleAnalytics = useAnalytics(); + + const onClick = useCallback( + ({analyticsEvents, url}: IconsBlockItemProps) => { + handleAnalytics(analyticsEvents, {url}); + }, + [handleAnalytics], + ); return (
@@ -33,6 +42,7 @@ const Icons = ({title, size = 's', items}: IconsBlockProps) => { aria-label={text} title={text} {...getLinkProps(url, hostname)} + onClick={() => onClick(item)} > {itemContent} diff --git a/src/blocks/Icons/schema.ts b/src/blocks/Icons/schema.ts index 2aae55644..b6496f6f8 100644 --- a/src/blocks/Icons/schema.ts +++ b/src/blocks/Icons/schema.ts @@ -1,4 +1,5 @@ import {AnimatableProps, BlockBaseProps} from '../../schema/validators/common'; +import {AnalyticsEventSchema} from '../../schema/validators/event'; export const IconsProps = { additionalProperties: false, @@ -33,6 +34,19 @@ export const IconsProps = { type: 'string', }, }, + analyticsEvents: { + oneOf: [ + { + ...AnalyticsEventSchema, + optionName: 'single', + }, + { + type: 'array', + items: AnalyticsEventSchema, + optionName: 'list', + }, + ], + }, }, }, }, diff --git a/src/models/constructor-items/blocks.ts b/src/models/constructor-items/blocks.ts index 64197f25e..1665fdfc0 100644 --- a/src/models/constructor-items/blocks.ts +++ b/src/models/constructor-items/blocks.ts @@ -2,6 +2,7 @@ import {ButtonSize} from '@gravity-ui/uikit'; import {GridColumnSize, GridColumnSizesType} from '../../grid/types'; import {ThemeSupporting} from '../../utils'; +import {AnalyticsEventsBase} from '../common'; import { AnchorProps, @@ -312,14 +313,16 @@ export interface FilterBlockProps extends Animatable, LoadableChildren { centered?: boolean; } +export interface IconsBlockItemProps extends AnalyticsEventsBase { + url: string; + text: string; + src: string; +} + export interface IconsBlockProps { title?: string; size?: 's' | 'm' | 'l'; - items: { - url: string; - text: string; - src: string; - }[]; + items: IconsBlockItemProps[]; } interface ContentLayoutBlockParams {