import { CategoryDescriptionTextField , ColorIconButton , AlertDialog , AlertDialogActions , AlertDialogContent , AlertDialogTitle } from "@piximi/components" ; import * as React from "react" ; import { Category } from "@piximi/types" ; export const colors = [ "rgb(193,	 53,	19)" , "rgb(248,	 52,  35)" , "rgb(251,	  0,	66)" , "rgb(159,	 40,	20)" , "rgb(218,	 22,	69)" , "rgb(251,	 31,	94)" , "rgb( 99,	123,	38)" , "rgb(100,	145,  65)" , "rgb( 34,	227, 219)" , "rgb( 34,	107, 141)" , "rgb( 40,	209,	17)" , "rgb( 44,	208,	83)" , "rgb( 36,	 98, 121)" , "rgb( 16, 143, 200)" , "rgb( 44,  80, 191)" , "rgb( 19,	 55, 160)" , "rgb( 54, 133, 213)" , "rgb( 12, 103, 254)" ] ; type EditCategoryDialogProps = { category : Category ; updateColor : ( identifier : string , color : string ) => void ; updateDescription : ( identifier : string , description : string ) => void ; onClose : ( ) => void ; open : boolean ; } ; export const EditCategoryDialog = ( props ) => { const { category , updateColor , updateDescription , onClose , open } = props ; const [ color , setColor ] = React . useState < string > ( category . visualization . color ) ; const [ description , setDescription ] = React . useState < string > ( category . description ) ; const onAcceptance = ( ) => { updateColor ( category . identifier , color ) ; updateDescription ( category . identifier , description ) ; onClose ( ) ; } ; const onColorChange = ( color ) => { setColor ( color . hex ) ; } ; const onDescriptionChange = ( event ) : void => { const target = event . target as HTMLInputElement ; setDescription ( target . value ) ; } ; return ( < AlertDialog open = { open } onClose = { onClose } > < AlertDialogTitle title = "Edit category" / > < AlertDialogContent > < ColorIconButton color = { color } colors = { colors } onColorChange = { onColorChange } / > < CategoryDescriptionTextField description = { description } onDescriptionChange = { onDescriptionChange } / > < /AlertDialogContent> < AlertDialogActions acceptanceTitle = "Edit" cancellationTitle = "Cancel" onAcceptance = { onAcceptance } onCancellation = { onClose } / > < /AlertDialog>); } ;