@@ -7,6 +7,8 @@ import { trans } from "i18n";
77import { useStyle } from "comps/controls/styleControl" ;
88import { ButtonStyle } from "comps/controls/styleControlConstants" ;
99import { Button100 } from "comps/comps/buttonComp/buttonCompConstants" ;
10+ import { IconControl } from "comps/controls/iconControl" ;
11+ import { hasIcon } from "comps/utils" ;
1012
1113export const ColumnValueTooltip = trans ( "table.columnValueTooltip" ) ;
1214
@@ -20,7 +22,7 @@ export const ButtonTypeOptions = [
2022 value : "default" ,
2123 } ,
2224 {
23- label : trans ( "text" ) ,
25+ label : trans ( "table. text" ) ,
2426 value : "text" ,
2527 } ,
2628] as const ;
@@ -32,23 +34,36 @@ export const ButtonComp = (function () {
3234 onClick : ActionSelectorControlInContext ,
3335 loading : BoolCodeControl ,
3436 disabled : BoolCodeControl ,
37+ prefixIcon : IconControl ,
38+ suffixIcon : IconControl ,
3539 } ;
3640 return new ColumnTypeCompBuilder (
3741 childrenMap ,
3842 ( props ) => {
3943 const ButtonStyled = ( ) => {
4044 const style = useStyle ( ButtonStyle ) ;
45+ const hasText = ! ! props . text ;
46+ const hasPrefixIcon = hasIcon ( props . prefixIcon ) ;
47+ const hasSuffixIcon = hasIcon ( props . suffixIcon ) ;
48+ const iconOnly = ! hasText && ( hasPrefixIcon || hasSuffixIcon ) ;
49+
4150 return (
4251 < Button100
4352 type = { props . buttonType }
4453 onClick = { props . onClick }
4554 loading = { props . loading }
4655 disabled = { props . disabled }
4756 $buttonStyle = { props . buttonType === "primary" ? style : undefined }
48- style = { { margin : 0 } }
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 }
4964 >
50- { /* prevent the button from disappearing */ }
51- { ! props . text ? " " : props . text }
65+ { hasText ? props . text : ( iconOnly ? null : " " ) }
66+ { hasSuffixIcon && ! props . loading && < span style = { { marginLeft : hasText ? '8px' : 0 } } > { props . suffixIcon } </ span > }
5267 </ Button100 >
5368 ) ;
5469 } ;
@@ -62,6 +77,12 @@ export const ButtonComp = (function () {
6277 label : trans ( "table.columnValue" ) ,
6378 tooltip : ColumnValueTooltip ,
6479 } ) }
80+ { children . prefixIcon . propertyView ( {
81+ label : trans ( "button.prefixIcon" ) ,
82+ } ) }
83+ { children . suffixIcon . propertyView ( {
84+ label : trans ( "button.suffixIcon" ) ,
85+ } ) }
6586 { children . buttonType . propertyView ( {
6687 label : trans ( "table.type" ) ,
6788 radioButton : true ,
0 commit comments