@@ -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 = [
2022value :"default" ,
2123} ,
2224{
23- label :trans ( "text" ) ,
25+ label :trans ( "table. text" ) ,
2426value :"text" ,
2527} ,
2628] as const ;
@@ -32,23 +34,36 @@ export const ButtonComp = (function () {
3234onClick :ActionSelectorControlInContext ,
3335loading :BoolCodeControl ,
3436disabled :BoolCodeControl ,
37+ prefixIcon :IconControl ,
38+ suffixIcon :IconControl ,
3539} ;
3640return new ColumnTypeCompBuilder (
3741childrenMap ,
3842( props ) => {
3943const ButtonStyled = ( ) => {
4044const 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+
4150return (
4251< Button100
4352type = { props . buttonType }
4453onClick = { props . onClick }
4554loading = { props . loading }
4655disabled = { 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 () {
6277label :trans ( "table.columnValue" ) ,
6378tooltip :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 ( {
6687label :trans ( "table.type" ) ,
6788radioButton :true ,