import React , { useRef , useEffect } from 'react' ; import Icon from '@synerise/ds-icon' ; import { NOOP } from '@synerise/ds-utils' ; import { ItemProps } from '../Item.types' ; import { validateItemName } from '../../../utils' ; import Actions from '../../../Tree/Item/Actions' ; import * as S from '../Item.styles' ; export type BaseComponentProps = ItemProps & { icon : ( props : React . SVGProps < SVGSVGElement > ) => JSX . Element ; } ; export const BaseComponent = ( { icon : IconComponent , item , editMode = false , onDelete = NOOP , onCopy = NOOP , onPaste = NOOP , onCut = NOOP , onDuplicate = NOOP , onEditMode = NOOP , onEditModeChange = NOOP , onSelected = NOOP , onClick = NOOP , ... restProps } ) => { const inputRef = useRef < HTMLInputElement > ( null ) ; useEffect ( ( ) => { if ( editMode && inputRef . current ) inputRef . current . focus ( ) ; } , [ editMode ] ) ; const changeName = ( itemName , originalName ) : void => { if ( validateItemName ( itemName ) ) { const trimmedName = itemName . trim ( ) ; onEditModeChange ( trimmedName ) ; } else { onEditModeChange ( originalName ) ; } onEditMode ( false ) ; } ; const handleOnBlur = ( event ) : void => { changeName ( event . target . value , item . model . name ) ; } ; const handleOnKeyDown = ( event ) : void => { if ( event . key === 'Enter' ) { const target = event . target as HTMLInputElement ; changeName ( target . value , item . model . name ) ; } } ; const onVisibleChange = ( visible ) : void => { onSelected ( visible ) ; } ; const onEdit = ( ) : void => { onEditMode ( true ) ; onVisibleChange ( false ) ; } ; const suffixel = ! editMode ? ( < S . SuffixWrapper > < Actions item = { item } texts = { restProps . texts } onDelete = { onDelete } onCopy = { onCopy } onCut = { onCut } onDuplicate = { onDuplicate } onPaste = { onPaste } onEdit = { onEdit } onVisibilityChange = { NOOP } deleteMode = { false } onDeleteConfirmationVisibilityChange = { NOOP } / > < /S.SuffixWrapper>) : (undefined); return ( < S . Item suffixel = { suffixel } suffixVisibilityTrigger = "hover" prefixel = { < > < Icon /> < Icon component = { < IconComponent / > } size = "24" / > < />} {...restProps}> { editMode ? ( < S . InlineEditWrapper > < S . InlineEditInput defaultValue = { item . model . name } ref = { inputRef } onBlur = { handleOnBlur } onKeyDown = { handleOnKeyDown } / > < /S.InlineEditWrapper>) : (item.model.name)} < /S.Item>); } ;