import * as React from 'react' ; import { ReactSortable } from 'react-sortablejs-typescript' ; import Button from '@synerise/ds-button' ; import * as S from './CardTabs.styles' ; import { CardTabsProps } from './CardTabs.types' ; import { COLORS_TABS } from './CardTab/ColorsTabs' ; const SORTABLE_CONFIG = { ghostClass : 'sortable-card-ghost-element' , className : 'sortable-card' , animation : 150 , group : 'column-manager' , } ; const CardTabs = ( { className , onChangeOrder , onAddTab , maxTabsCount , children = [ ] } ) => { const handleChangeOrder = ( newOrder ) : void => { onChangeOrder && onChangeOrder ( newOrder . map ( item => ( { ... item . props , } ) ) ) ; } ; const renderChildren = ( ) : JSX . Element [ ] => React . Children . map ( children , ( child , i ) => React . cloneElement ( child , { color : COLORS_TABS [ i % COLORS_TABS . length ] , draggable : Boolean ( onChangeOrder ) || child . props . draggable , } ) ) ; return ( < S . CardTabsContainer className = { `ds-card-tabs ${ className || '' }` } data - testid = "card-tabs-container" > { onChangeOrder ? ( < div data - testid = "card-tabs-sortable" > < ReactSortable { ... SORTABLE_CONFIG } className = "ds-card-tags-sortable" list = { children } setList = { handleChangeOrder } > { renderChildren ( ) } < /ReactSortable> < /div>) : (<div className="ds-card-tags-sortable" data-testid="card-tabs-static"> { renderChildren ( ) } < /div>)} { onAddTab && ( < span data - testid = "card-tabs-add-button" > < Button . Creator disabled = { ! ! maxTabsCount && React . Children . toArray ( children ) . length >= maxTabsCount } onClick = { onAddTab } / > < /span>)} < /S.CardTabsContainer>); } ; export default CardTabs ;