11import React from 'react' ;
22
3- import {
4- ActionTooltip ,
5- Button ,
6- Icon ,
7- List ,
8- Popup ,
9- PopupPlacement ,
10- PopupProps ,
11- } from '@gravity-ui/uikit' ;
3+ import { ActionTooltip , Icon , List , Popup , PopupPlacement , PopupProps } from '@gravity-ui/uikit' ;
124
135import { useAsideHeaderContext } from '../../AsideHeader/AsideHeaderContext' ;
146import { ASIDE_HEADER_ICON_SIZE } from '../../constants' ;
@@ -173,116 +165,50 @@ export const Item: React.FC<ItemInnerProps> = (props) => {
173165 ? [ 'a' as const , { href : item . link } ]
174166 : [ 'button' as const , { } ] ;
175167
176- const handleMouseEnter = ( ) => {
177- if ( ! compact ) {
178- onMouseEnter ?.( ) ;
179- }
180- } ;
181-
182- const handleMouseLeave = ( ) => {
183- if ( ! compact ) {
184- onMouseLeave ?.( ) ;
185- }
186- } ;
187-
188- const handleClick = (
189- event : React . MouseEvent <
190- HTMLAnchorElement | HTMLButtonElement | HTMLDivElement ,
191- MouseEvent
192- > ,
193- ) => {
194- const target = event . currentTarget ;
195- if ( collapsedItem ) {
196- /**
197- * If we call onItemClick for collapsedItem then:
198- * - User get unexpected item in onItemClick callback
199- * - onClosePanel calls twice for each popuped item, as result it will prevent opening of panelItems
200- */
201- toggleOpen ( ! open ) ;
202- } else if ( target instanceof HTMLDivElement ) {
203- onItemClick ?.( item , false , event as React . MouseEvent < HTMLDivElement , MouseEvent > ) ;
204- }
205- } ;
206-
207- const renderActionButton = ( ) => (
208- < div className = { compact ? b ( 'action-container-compact' ) : b ( 'action-container' ) } >
209- < Button
210- onClick = { handleClick }
211- className = { b ( 'action' , { compact, collapse : ! compact } , className ) }
168+ const createdNode = (
169+ < React . Fragment >
170+ < Tag
171+ { ...tagProps }
172+ className = { b ( { type, current, compact} , className ) }
212173 ref = { ref }
213174 data-qa = { item . qa }
214- onMouseEnter = { handleMouseEnter }
215- onMouseLeave = { handleMouseLeave }
216- size = "l"
217- view = "raised"
218- type = "button"
219- pin = "circle-circle"
220- { ...item . extraButtonProps }
175+ onClick = { ( event : React . MouseEvent < HTMLElement , MouseEvent > ) => {
176+ if ( collapsedItem ) {
177+ /**
178+ * If we call onItemClick for collapsedItem then:
179+ * - User get unexpected item in onItemClick callback
180+ * - onClosePanel calls twice for each popuped item, as result it will prevent opening of panelItems
181+ */
182+ toggleOpen ( ! open ) ;
183+ onCollapseItemClick ?.( ) ;
184+ } else {
185+ onItemClick ?.( item , false , event ) ;
186+ }
187+ } }
188+ onClickCapture = { onItemClickCapture }
189+ onMouseEnter = { ( ) => {
190+ if ( ! compact ) {
191+ onMouseEnter ?.( ) ;
192+ }
193+ } }
194+ onMouseLeave = { ( ) => {
195+ if ( ! compact ) {
196+ onMouseLeave ?.( ) ;
197+ }
198+ } }
221199 >
222- < div className = { b ( 'action-btn-container' ) } >
223- < div className = { b ( 'action-icon' ) } > { makeIconNode ( iconEl ) } </ div >
224-
225- { ! compact && (
226- < div
227- className = { b ( 'title' ) }
228- title = { typeof item . title === 'string' ? item . title : undefined }
229- >
230- { titleEl }
231- </ div >
232- ) }
200+ < div className = { b ( 'icon-place' ) } ref = { highlightedRef } >
201+ { makeIconNode ( iconEl ) }
233202 </ div >
234- </ Button >
235- </ div >
236- ) ;
237203
238- const renderTagContainer = ( ) => (
239- < Tag
240- { ...tagProps }
241- className = { b ( { type, current, compact} , className ) }
242- ref = { ref }
243- data-qa = { item . qa }
244- onClick = { ( event : React . MouseEvent < HTMLElement , MouseEvent > ) => {
245- if ( collapsedItem ) {
246- /**
247- * If we call onItemClick for collapsedItem then:
248- * - User get unexpected item in onItemClick callback
249- * - onClosePanel calls twice for each popuped item, as result it will prevent opening of panelItems
250- */
251- toggleOpen ( ! open ) ;
252- onCollapseItemClick ?.( ) ;
253- } else {
254- onItemClick ?.( item , false , event ) ;
255- }
256- } }
257- onClickCapture = { onItemClickCapture }
258- onMouseEnter = { ( ) => {
259- if ( ! compact ) {
260- onMouseEnter ?.( ) ;
261- }
262- } }
263- onMouseLeave = { ( ) => {
264- if ( ! compact ) {
265- onMouseLeave ?.( ) ;
266- }
267- } }
268- >
269- < div className = { b ( 'icon-place' ) } ref = { highlightedRef } >
270- { makeIconNode ( iconEl ) }
271- </ div >
272-
273- < div
274- className = { b ( 'title' ) }
275- title = { typeof item . title === 'string' ? item . title : undefined }
276- >
277- { titleEl }
278- </ div >
279- </ Tag >
280- ) ;
281-
282- const createdNode = (
283- < React . Fragment >
284- { type === 'action' ? renderActionButton ( ) : renderTagContainer ( ) }
285- { renderPopupContent && anchorRef ?. current && (
204+ < div
205+ className = { b ( 'title' ) }
206+ title = { typeof item . title === 'string' ? item . title : undefined }
207+ >
208+ { titleEl }
209+ </ div >
210+ </ Tag >
211+ { renderPopupContent && Boolean ( anchorRef ?. current ) && (
286212 < Popup
287213 strategy = "fixed"
288214 open = { popupVisible }
@@ -299,21 +225,12 @@ export const Item: React.FC<ItemInnerProps> = (props) => {
299225 </ React . Fragment >
300226 ) ;
301227
302- if ( item . link ) {
303- return (
304- < a href = { item . link } className = { b ( 'link' ) } >
305- { createdNode }
306- </ a >
307- ) ;
308- }
309-
310228 return createdNode ;
311229 } ;
312230
313231 const iconNode = icon ? (
314232 < Icon qa = { iconQa } data = { icon } size = { iconSize } className = { b ( 'icon' ) } />
315233 ) : null ;
316-
317234 const titleNode = renderItemTitle ( item ) ;
318235 const params = { icon : iconNode , title : titleNode } ;
319236 let highlightedNode = null ;
0 commit comments