import { getTheme , IDetailsColumnStyles , IDropdownStyles , IStackStyles , IStackTokens , ITextFieldStyles , mergeStyleSets } from "office-ui-fabric-react" ; import { ICellStyleRulesType } from "../types/cellstyleruletype" ; import { IColumnConfig } from "../types/columnconfigtype" ; import { EvaluateRule } from "./helper" ; export const stackStyles = { root : { width : 500 } } ; export const controlClass = mergeStyleSets ( { control : { marginBottom : '10px' , marginRight : '30px' , maxWidth : '300px' , } , searchStyles : { marginTop : '5px' , } , submitStyles : { marginTop : '20px' , marginLeft : '10px' , } , buttonStyles : { margin : 5 } , textFieldClass : { display : 'block' , margin : 10 } , spanStyles : { display : 'inline-block' , width : '100%' , height : '100%' , } , dialogSubMessageStyles : { margin : 10 , } , dialogHeaderStyles : { margin : 10 , } , submitStylesEditpanel : { marginTop : '20px' , marginLeft : '10px' , marginRight : '10px' , maxWidth : '300px' , } , labelValue : { fontWeight : 'bold' , } , pickerLabel : { color : '#323130' , fontWeight : 600 , padding : '5px 0px' , margin : '5px 0px' } } ) ; export const GetDynamicSpanStyles = ( column , cellValue ) : string => { var styleRule = column . cellStyleRule ?? undefined ; var isRuleTrue = EvaluateRule ( column . dataType ?? 'string' , cellValue , styleRule ) ; var styles = mergeStyleSets ( { dynamicSpanStyle : { display : 'inline-block' , width : '100%' , height : '100%' , color : ( ! column . cellStyleRule || ! column . cellStyleRule . enable ) ? undefined : ( isRuleTrue ? styleRule ?. whenTrue ?. textColor : styleRule ?. whenFalse ?. textColor ) , fontWeight : ( ! column . cellStyleRule || ! column . cellStyleRule . enable ) ? undefined : ( isRuleTrue ? styleRule ?. whenTrue ?. fontWeight : styleRule ?. whenFalse ?. fontWeight ) } } ) ; return styles . dynamicSpanStyle ; } ; export const verticalGapStackTokens = { childrenGap : 15 , padding : 10 , } ; export const horizontalGapStackTokens = { childrenGap : 10 , padding : 10 , } ; export const textFieldStyles = { fieldGroup : { } } ; export const dropdownStyles = { dropdown : { width : '90%' } , } ;