From 318571a2d58b0663cc97bbe4dc39576622f97613 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Wed, 30 Apr 2025 19:39:09 +0500 Subject: [PATCH 1/2] [FEAT]: #1579 Add Icon as a button for the Button Column type --- .../column/simpleColumnTypeComps.tsx | 44 ++++++++++++++++--- .../packages/lowcoder/src/i18n/locales/en.ts | 3 ++ 2 files changed, 42 insertions(+), 5 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx index 8839c3202..019608099 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx @@ -7,6 +7,8 @@ import { trans } from "i18n"; import { useStyle } from "comps/controls/styleControl"; import { ButtonStyle } from "comps/controls/styleControlConstants"; import { Button100 } from "comps/comps/buttonComp/buttonCompConstants"; +import { IconControl } from "comps/controls/iconControl"; +import { hasIcon } from "comps/utils"; export const ColumnValueTooltip = trans("table.columnValueTooltip"); @@ -20,11 +22,26 @@ export const ButtonTypeOptions = [ value: "default", }, { - label: trans("text"), + label: trans("table.text"), value: "text", }, ] as const; +export const ButtonDisplayOptions = [ + { + label: trans("table.text"), + value: "text", + }, + { + label: trans("table.icon"), + value: "icon", + }, + { + label: trans("table.textAndIcon"), + value: "textAndIcon", + }, +] as const; + export const ButtonComp = (function () { const childrenMap = { text: StringControl, @@ -32,12 +49,17 @@ export const ButtonComp = (function () { onClick: ActionSelectorControlInContext, loading: BoolCodeControl, disabled: BoolCodeControl, + displayMode: dropdownControl(ButtonDisplayOptions, "text"), + icon: IconControl, }; return new ColumnTypeCompBuilder( childrenMap, (props) => { const ButtonStyled = () => { const style = useStyle(ButtonStyle); + const showIcon = props.displayMode === "icon" || props.displayMode === "textAndIcon"; + const showText = props.displayMode === "text" || props.displayMode === "textAndIcon"; + return ( {/* prevent the button from disappearing */} - {!props.text ? " " : props.text} + {showText ? (!props.text ? " " : props.text) : null} ); }; @@ -58,10 +81,21 @@ export const ButtonComp = (function () { ) .setPropertyViewFn((children) => ( <> - {children.text.propertyView({ - label: trans("table.columnValue"), - tooltip: ColumnValueTooltip, + {children.displayMode.propertyView({ + label: trans("table.displayMode"), + radioButton: true, })} + {(children.displayMode.getView() === "text" || children.displayMode.getView() === "textAndIcon") && + children.text.propertyView({ + label: trans("table.columnValue"), + tooltip: ColumnValueTooltip, + }) + } + {(children.displayMode.getView() === "icon" || children.displayMode.getView() === "textAndIcon") && + children.icon.propertyView({ + label: trans("table.icon"), + }) + } {children.buttonType.propertyView({ label: trans("table.type"), radioButton: true, diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index d1eff10d7..69e8dd22a 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -2066,6 +2066,9 @@ export const en = { "primaryButton": "Primary", "defaultButton": "Default", "type": "Type", + "displayMode": "Display Mode", + "textAndIcon": "Text and Icon", + "icon": "Icon", "tableSize": "Table Size", "hideHeader": "Hide Table Header", "hideToolbar": "Hide Table Toolbar (Footer)", From 7bf7051c5e459d55442c03e0817582e32957fc5c Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Fri, 2 May 2025 14:33:08 +0500 Subject: [PATCH 2/2] [FEAT]: #1579 Replace Display Mode with Prefix/Suffix Icons approach --- .../column/simpleColumnTypeComps.tsx | 61 ++++++++----------- .../packages/lowcoder/src/i18n/locales/en.ts | 3 - 2 files changed, 24 insertions(+), 40 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx index 019608099..8940fc822 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx @@ -27,21 +27,6 @@ export const ButtonTypeOptions = [ }, ] as const; -export const ButtonDisplayOptions = [ - { - label: trans("table.text"), - value: "text", - }, - { - label: trans("table.icon"), - value: "icon", - }, - { - label: trans("table.textAndIcon"), - value: "textAndIcon", - }, -] as const; - export const ButtonComp = (function () { const childrenMap = { text: StringControl, @@ -49,16 +34,18 @@ export const ButtonComp = (function () { onClick: ActionSelectorControlInContext, loading: BoolCodeControl, disabled: BoolCodeControl, - displayMode: dropdownControl(ButtonDisplayOptions, "text"), - icon: IconControl, + prefixIcon: IconControl, + suffixIcon: IconControl, }; return new ColumnTypeCompBuilder( childrenMap, (props) => { const ButtonStyled = () => { const style = useStyle(ButtonStyle); - const showIcon = props.displayMode === "icon" || props.displayMode === "textAndIcon"; - const showText = props.displayMode === "text" || props.displayMode === "textAndIcon"; + const hasText = !!props.text; + const hasPrefixIcon = hasIcon(props.prefixIcon); + const hasSuffixIcon = hasIcon(props.suffixIcon); + const iconOnly = !hasText && (hasPrefixIcon || hasSuffixIcon); return ( - {/* prevent the button from disappearing */} - {showText ? (!props.text ? " " : props.text) : null} + {hasText ? props.text : (iconOnly ? null : " ")} + {hasSuffixIcon && !props.loading && {props.suffixIcon}} ); }; @@ -81,21 +73,16 @@ export const ButtonComp = (function () { ) .setPropertyViewFn((children) => ( <> - {children.displayMode.propertyView({ - label: trans("table.displayMode"), - radioButton: true, + {children.text.propertyView({ + label: trans("table.columnValue"), + tooltip: ColumnValueTooltip, + })} + {children.prefixIcon.propertyView({ + label: trans("button.prefixIcon"), + })} + {children.suffixIcon.propertyView({ + label: trans("button.suffixIcon"), })} - {(children.displayMode.getView() === "text" || children.displayMode.getView() === "textAndIcon") && - children.text.propertyView({ - label: trans("table.columnValue"), - tooltip: ColumnValueTooltip, - }) - } - {(children.displayMode.getView() === "icon" || children.displayMode.getView() === "textAndIcon") && - children.icon.propertyView({ - label: trans("table.icon"), - }) - } {children.buttonType.propertyView({ label: trans("table.type"), radioButton: true, diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 69e8dd22a..d1eff10d7 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -2066,9 +2066,6 @@ export const en = { "primaryButton": "Primary", "defaultButton": "Default", "type": "Type", - "displayMode": "Display Mode", - "textAndIcon": "Text and Icon", - "icon": "Icon", "tableSize": "Table Size", "hideHeader": "Hide Table Header", "hideToolbar": "Hide Table Toolbar (Footer)",