import { StructurePreviewProps , Properties , hidePropertiesIn } from "@mendix/piw-utils-internal" ; import { RadioButtonsPreviewProps } from "../typings/RadioButtonsProps" ; import darkRadioIcon from "./assets/radioButton_dark.svg" ; import lightRadioIcon from "./assets/radioButton_light.svg" ; import lightUnselectedRadioIcon from "./assets/radioButton_unselected_light.svg" ; import darkUnselectedRadioIcon from "./assets/radioButton_unselected_dark.svg" ; export function getPreview ( values , isDark ) { const EditableFontColor = isDark ? "#D6D6D6" : "#0A1324" ; const readOnlyFontColor = "#9DA1A8" ; const fontColor = values . readOnly ? readOnlyFontColor : EditableFontColor ; const radioButtonLabel = { type : "Container" , borders : false , children : [ { type : "Text" , content : values . label , fontColor } , { type : "Container" , padding : 4 } ] } ; const selectedRadioButtonImage = { type : "Image" , document : decodeURIComponent ( ( isDark ? darkRadioIcon : lightRadioIcon ) . replace ( "data:image/svg+xml," , "" ) ) , width : 16 , height : 16 } ; const unselectedRadioButtonImage = { type : "Image" , document : decodeURIComponent ( ( isDark ? darkUnselectedRadioIcon : lightUnselectedRadioIcon ) . replace ( "data:image/svg+xml," , "" ) ) , width : 16 , height : 16 } ; const radioButtonItemLabel = { type : "Text" , content : values . enum !== "" ? values . enum : "[No attribute selected]" , fontColor } ; const generateRadioButtonItem = ( enumValue ) : StructurePreviewProps [ ] => { const radioButtonItemTmp = { type : "Container" , children : [ enumValue !== "" ? selectedRadioButtonImage : unselectedRadioButtonImage ] , padding : 2 } ; const item = { type : "RowLayout" , columnSize : "grow" , children : [ { ... radioButtonItemTmp } , { type : "Container" , children : [ radioButtonItemLabel ] } , { type : "Container" } ] } ; if ( enumValue !== "" ) { const item2 = { ... item , children : [ { ... radioButtonItemTmp , children : [ unselectedRadioButtonImage ] } , { type : "Container" , children : [ radioButtonItemLabel ] } , { type : "Container" } ] } ; return [ item , item2 ] ; } return [ item ] ; } ; const radioButtonItems = generateRadioButtonItem ( values . enum ) ; const radioButtonListContainer = { type : "Container" , children : [ ... radioButtonItems ] } ; const radioButtonListRow = { type : "RowLayout" , children : [ ... radioButtonItems ] } ; const radioButtonListOrientation = values . orientation === "horizontal" ? radioButtonListRow : radioButtonListContainer ; const radioButtonList = values . showLabel ? [ radioButtonLabel , radioButtonListOrientation ] : [ radioButtonListOrientation ] ; const radioButtonContainer = { type : "Container" , children : radioButtonList } ; return { type : "Container" , borders : false , padding : 4 , children : [ radioButtonContainer ] } ; } export function getProperties ( values , defaultProperties ) { if ( ! values . showLabel ) { hidePropertiesIn ( defaultProperties , values , [ "label" ] ) ; } return defaultProperties ; }