@@ -27,38 +27,25 @@ export const ButtonTypeOptions = [
2727} ,
2828] as const ;
2929
30- export const ButtonDisplayOptions = [
31- {
32- label :trans ( "table.text" ) ,
33- value :"text" ,
34- } ,
35- {
36- label :trans ( "table.icon" ) ,
37- value :"icon" ,
38- } ,
39- {
40- label :trans ( "table.textAndIcon" ) ,
41- value :"textAndIcon" ,
42- } ,
43- ] as const ;
44-
4530export const ButtonComp = ( function ( ) {
4631const childrenMap = {
4732text :StringControl ,
4833buttonType :dropdownControl ( ButtonTypeOptions , "primary" ) ,
4934onClick :ActionSelectorControlInContext ,
5035loading :BoolCodeControl ,
5136disabled :BoolCodeControl ,
52- displayMode : dropdownControl ( ButtonDisplayOptions , "text" ) ,
53- icon :IconControl ,
37+ prefixIcon : IconControl ,
38+ suffixIcon :IconControl ,
5439} ;
5540return new ColumnTypeCompBuilder (
5641childrenMap ,
5742( props ) => {
5843const ButtonStyled = ( ) => {
5944const style = useStyle ( ButtonStyle ) ;
60- const showIcon = props . displayMode === "icon" || props . displayMode === "textAndIcon" ;
61- const showText = props . displayMode === "text" || props . displayMode === "textAndIcon" ;
45+ const hasText = ! ! props . text ;
46+ const hasPrefixIcon = hasIcon ( props . prefixIcon ) ;
47+ const hasSuffixIcon = hasIcon ( props . suffixIcon ) ;
48+ const iconOnly = ! hasText && ( hasPrefixIcon || hasSuffixIcon ) ;
6249
6350return (
6451< Button100
@@ -67,11 +54,16 @@ export const ButtonComp = (function () {
6754loading = { props . loading }
6855disabled = { props . disabled }
6956$buttonStyle = { props . buttonType === "primary" ?style :undefined }
70- style = { { margin :0 } }
71- icon = { showIcon && hasIcon ( props . icon ) ?props . icon :undefined }
57+ style = { {
58+ margin :0 ,
59+ width :iconOnly ?'auto' :undefined ,
60+ minWidth :iconOnly ?'auto' :undefined ,
61+ padding :iconOnly ?'0 8px' :undefined
62+ } }
63+ icon = { hasPrefixIcon ?props . prefixIcon :undefined }
7264>
73- { /* prevent the button from disappearing */ }
74- { showText ? ( ! props . text ? " " : props . text ) : null }
65+ { hasText ? props . text : ( iconOnly ? null : " " ) }
66+ { hasSuffixIcon && ! props . loading && < span style = { { marginLeft : hasText ? '8px' : 0 } } > { props . suffixIcon } </ span > }
7567</ Button100 >
7668) ;
7769} ;
@@ -81,21 +73,16 @@ export const ButtonComp = (function () {
8173)
8274. setPropertyViewFn ( ( children ) => (
8375< >
84- { children . displayMode . propertyView ( {
85- label :trans ( "table.displayMode" ) ,
86- radioButton :true ,
76+ { children . text . propertyView ( {
77+ label :trans ( "table.columnValue" ) ,
78+ tooltip :ColumnValueTooltip ,
79+ } ) }
80+ { children . prefixIcon . propertyView ( {
81+ label :trans ( "button.prefixIcon" ) ,
82+ } ) }
83+ { children . suffixIcon . propertyView ( {
84+ label :trans ( "button.suffixIcon" ) ,
8785} ) }
88- { ( children . displayMode . getView ( ) === "text" || children . displayMode . getView ( ) === "textAndIcon" ) &&
89- children . text . propertyView ( {
90- label :trans ( "table.columnValue" ) ,
91- tooltip :ColumnValueTooltip ,
92- } )
93- }
94- { ( children . displayMode . getView ( ) === "icon" || children . displayMode . getView ( ) === "textAndIcon" ) &&
95- children . icon . propertyView ( {
96- label :trans ( "table.icon" ) ,
97- } )
98- }
9986{ children . buttonType . propertyView ( {
10087label :trans ( "table.type" ) ,
10188radioButton :true ,