import * as React from 'react' ; import { v4 as uuid } from 'uuid' ; import { GroupSettingsTexts , Range } from '../ColumnManagerGroupSettings.types' ; import * as S from './RangesForm.styles' ; import RangeRow from './RangeRow' ; import { ColumnType } from '../../ColumnManagerItem/ColumManagerItem.types' ; interface RangeFormProps { ranges : Range [ ] ; setRanges : ( ranges : Range [ ] ) => void ; type : ColumnType ; texts : { [ k in GroupSettingsTexts ] : string | React . ReactNode ; } ; } const RangesForm = ( { ranges , setRanges , type , texts } ) : JSX . Element => { const setRange = React . useCallback ( ( range , index ) : void => { const updatedRanges = ranges . map ( ( currentRange , i ) => { if ( i === index ) { return range ; } return currentRange ; } ) ; setRanges ( updatedRanges ) ; } , [ setRanges , ranges ] ) ; const remove = ( rangeIndex ) : void => { setRanges ( ranges . filter ( ( range , index ) => index !== rangeIndex ) ) ; } ; return ( < S . RangesForm > { ranges . map ( ( range , index ) : JSX . Element => ( < RangeRow key = { uuid ( ) } first = { index === 0 } range = { range } setRange = { setRange } index = { index } type = { type } remove = { remove } texts = { texts } / > ) ) } < /S.RangesForm>); } ; export default RangesForm ;