From e76fd45399d74d205eff19da122d156c31673074 Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Thu, 1 Aug 2024 19:44:01 +0500 Subject: [PATCH 1/3] added column separator option for downloaded table's csv --- .../lowcoder/src/comps/comps/tableComp/tableComp.tsx | 1 + .../src/comps/comps/tableComp/tableToolbarComp.tsx | 7 ++++++- client/packages/lowcoder/src/i18n/locales/de.ts | 2 ++ client/packages/lowcoder/src/i18n/locales/en.ts | 2 ++ client/packages/lowcoder/src/i18n/locales/pt.ts | 2 ++ client/packages/lowcoder/src/i18n/locales/zh.ts | 2 ++ client/packages/lowcoder/src/util/fileUtils.ts | 11 ++++++++--- 7 files changed, 23 insertions(+), 4 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx index 67e05da3e..553a36a0d 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx @@ -97,6 +97,7 @@ export class TableImplComp extends TableInitComp implements IContainer { data: (this as any).exposingValues["displayData"], filename: fileName, fileType: "csv", + delimiter: this.children.toolbar.children.columnSeparator.getView(), }); } diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx index 742734052..84f17e42d 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx @@ -8,7 +8,7 @@ import { BoolControl } from "comps/controls/boolControl"; import { StringControl } from "comps/controls/codeControl"; import { dropdownControl } from "comps/controls/dropdownControl"; import { TableToolbarStyleType } from "comps/controls/styleControlConstants"; -import { stateComp } from "comps/generators"; +import { stateComp, withDefault } from "comps/generators"; import { genRandomKey } from "comps/utils/idGenerator"; import { ThemeContext } from "comps/utils/themeContext"; import { trans } from "i18n"; @@ -560,6 +560,7 @@ export const TableToolbarComp = (function () { // searchText: StringControl, filter: stateComp({ stackType: "and", filters: [] }), position: dropdownControl(positionOptions, "below"), + columnSeparator: withDefault(StringControl, ','), }; return new ControlNodeCompBuilder(childrenMap, (props, dispatch) => { @@ -588,6 +589,10 @@ export const TableToolbarComp = (function () { children.showFilter.propertyView({ label: trans("table.showFilter") }), children.showRefresh.propertyView({ label: trans("table.showRefresh") }), children.showDownload.propertyView({ label: trans("table.showDownload") }), + children.showDownload.getView() && children.columnSeparator.propertyView({ + label: trans("table.columnSeparator"), + tooltip: trans("table.columnSeparatorTooltip"), + }), children.columnSetting.propertyView({ label: trans("table.columnSetting") }), /* children.searchText.propertyView({ label: trans("table.searchText"), diff --git a/client/packages/lowcoder/src/i18n/locales/de.ts b/client/packages/lowcoder/src/i18n/locales/de.ts index 857193a35..1e78d8583 100644 --- a/client/packages/lowcoder/src/i18n/locales/de.ts +++ b/client/packages/lowcoder/src/i18n/locales/de.ts @@ -1381,6 +1381,8 @@ export const de: typeof en = { "showFilter": "Schaltfläche Filter anzeigen", "showRefresh": "Schaltfläche \"Aktualisieren\" anzeigen", "showDownload": "Download-Schaltfläche anzeigen", + "columnSeparator": "Spaltentrennzeichen", + "columnSeparatorTooltip": "Spaltentrennzeichen („Trennzeichen“) in der heruntergeladenen CSV-Datei. \n\nEmpfehlungen:\n- Komma (,)\n- Semikolon (;)\n- Pipe (|)\n- Tabulator (\\t)", "columnSetting": "Schaltfläche Spalteneinstellung anzeigen", "searchText": "Text suchen", "searchTextTooltip": "Suche und Filterung der in der Tabelle dargestellten Daten", diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 4a818862b..6b38979fd 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -1836,6 +1836,8 @@ export const en = { "showFilter": "Show Filter Button", "showRefresh": "Show Refresh Button", "showDownload": "Show Download Button", + "columnSeparator": "Column Separator", + "columnSeparatorTooltip": "Column Separator (\"delimiter\") in downloaded CSV file. \n\nRecommendations:\n- Comma (,)\n- Semicolon (;)\n- Pipe (|)\n- Tab (\\t)", "columnSetting": "Show Column Setting Button", "searchText": "Search Text", "searchTextTooltip": "Search and Filter the Data Presented in the Table", diff --git a/client/packages/lowcoder/src/i18n/locales/pt.ts b/client/packages/lowcoder/src/i18n/locales/pt.ts index 4cbc223e7..f31d1c3a3 100644 --- a/client/packages/lowcoder/src/i18n/locales/pt.ts +++ b/client/packages/lowcoder/src/i18n/locales/pt.ts @@ -1903,6 +1903,8 @@ export const pt: typeof en = { "showFilter": "Mostrar Botão de Filtro", "showRefresh": "Mostrar Botão de Atualização", "showDownload": "Mostrar Botão de Download", + "columnSeparator": "Separador de colunas", + "columnSeparatorTooltip": "Separador de colunas (\"delimitador\") no arquivo CSV baixado. \n\nRecomendações:\n- Vírgula (,)\n- Ponto e vírgula (;)\n- Barra vertical (|)\n- Tabulação (\\t)", "columnSetting": "Mostrar Botão de Configuração de Coluna", "searchText": "Texto de Busca", "searchTextTooltip": "Pesquisar e filtrar os dados apresentados na tabela", diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts index 6e9207adf..a16eef9d0 100644 --- a/client/packages/lowcoder/src/i18n/locales/zh.ts +++ b/client/packages/lowcoder/src/i18n/locales/zh.ts @@ -1403,6 +1403,8 @@ export const zh: typeof en = { showFilter: "显示筛选按钮", showRefresh: "显示刷新按钮", showDownload: "显示下载按钮", + columnSeparator: "柱分离器", + columnSeparatorTooltip: "下载的 CSV 文件中的列分隔符（\“分隔符\”）。 \n\n建议：\n- 逗号 (,)\n- 分号 (;)\n- 竖线 (|)\n- 制表符 (\\t)", columnSetting: "显示列设置按钮", searchText: "搜索文本", searchTextTooltip: "搜索和筛选在表格中呈现的数据", diff --git a/client/packages/lowcoder/src/util/fileUtils.ts b/client/packages/lowcoder/src/util/fileUtils.ts index 7b98e21ff..716330748 100644 --- a/client/packages/lowcoder/src/util/fileUtils.ts +++ b/client/packages/lowcoder/src/util/fileUtils.ts @@ -31,9 +31,10 @@ interface SaveDataAsFileParams { filename: string; fileType: "empty" | "txt" | "json" | "csv" | "xlsx" | string; dataType?: "url" | "base64"; + delimiter?: string; } -export async function saveDataAsFile({ data, filename, fileType, dataType }: SaveDataAsFileParams) { +export async function saveDataAsFile({ data, filename, fileType, dataType, delimiter }: SaveDataAsFileParams) { if (dataType === "url") { return saveAs(data, filename, { autoBom: true }); } @@ -72,11 +73,15 @@ export async function saveDataAsFile({ data, filename, fileType, dataType }: Sav } else { wb = XLSX.read(data, { type: "string" }); } - blobData = XLSX.write(wb, { + let writeOptions: any = { bookType: finalFileType, bookSST: false, // whether to generate Shared String Table? setting true will slow down the generating speed, but more compatible for lower versioned iOS devices type: "buffer", - }); + } + if (finalFileType === 'csv' && delimiter) { + writeOptions['FS'] = delimiter; + } + blobData = XLSX.write(wb, writeOptions); break; } const blob = new Blob([blobData], { From 2ef23dd017a4ed754c9c36059d19bca15d7e2736 Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Thu, 1 Aug 2024 23:35:31 +0500 Subject: [PATCH 2/3] added column tooltip in table --- .../src/components/table/EditableCell.tsx | 3 +- .../columnTypeComps/ColumnNumberComp.tsx | 12 ++++++-- .../columnTypeComps/columnBooleanComp.tsx | 27 +++++++++++------ .../column/columnTypeComps/columnDateComp.tsx | 13 +++++++- .../columnTypeComps/columnDateTimeComp.tsx | 13 +++++++- .../columnTypeComps/columnDropdownComp.tsx | 4 ++- .../column/columnTypeComps/columnImgComp.tsx | 12 +++++++- .../column/columnTypeComps/columnLinkComp.tsx | 14 +++++++-- .../columnTypeComps/columnLinksComp.tsx | 16 +++++++--- .../columnTypeComps/columnMarkdownComp.tsx | 14 +++++++-- .../columnTypeComps/columnProgressComp.tsx | 12 ++++++-- .../columnTypeComps/columnRatingComp.tsx | 14 +++++++-- .../columnTypeComps/columnSelectComp.tsx | 10 +++++-- .../columnTypeComps/columnStatusComp.tsx | 13 +++++++- .../columnTypeComps/columnSwitchComp.tsx | 30 ++++++++++++------- .../column/columnTypeComps/columnTagsComp.tsx | 14 +++++++-- .../column/columnTypeComps/simpleTextComp.tsx | 26 +++++++++++----- .../tableComp/column/tableColumnComp.tsx | 6 ++-- .../src/comps/comps/tableComp/tableUtils.tsx | 2 +- .../packages/lowcoder/src/i18n/locales/de.ts | 2 ++ .../packages/lowcoder/src/i18n/locales/en.ts | 2 ++ .../packages/lowcoder/src/i18n/locales/pt.ts | 2 ++ .../packages/lowcoder/src/i18n/locales/zh.ts | 2 ++ 23 files changed, 205 insertions(+), 58 deletions(-) diff --git a/client/packages/lowcoder/src/components/table/EditableCell.tsx b/client/packages/lowcoder/src/components/table/EditableCell.tsx index 936f1a047..beb574552 100644 --- a/client/packages/lowcoder/src/components/table/EditableCell.tsx +++ b/client/packages/lowcoder/src/components/table/EditableCell.tsx @@ -129,7 +129,7 @@ export function EditableCell(props: EditableCellProps) { textOverflow={props.textOverflow} > {status === "toSave" && !isEditing && } - {normalView} + {!editable && normalView} {/* overlay on normal view to handle double click for editing */} {editable && (
(props: EditableCellProps) { }} onDoubleClick={enterEditFn} > + {normalView}
)} diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/ColumnNumberComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/ColumnNumberComp.tsx index 871d7fbf9..06354de4c 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/ColumnNumberComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/ColumnNumberComp.tsx @@ -8,6 +8,7 @@ import { withDefault } from "comps/generators"; import styled from "styled-components"; import { IconControl } from "comps/controls/iconControl"; import { hasIcon } from "comps/utils"; +import Tooltip from "antd/es/tooltip"; const InputNumberWrapper = styled.div` .ant-input-number { @@ -26,6 +27,7 @@ const InputNumberWrapper = styled.div` const childrenMap = { text: NumberControl, + tooltip: StringControl, step: withDefault(NumberControl, 1), precision: RangeControl.closed(0, 20, 0), float: BoolControl, @@ -58,13 +60,15 @@ export const ColumnNumberComp = (function () { formattedValue = formattedValue.toFixed(precision + 1); } return ( - <>{hasIcon(props.prefixIcon) && ( + + {hasIcon(props.prefixIcon) && ( {props.prefixIcon} )} {props.prefix + formattedValue + props.suffix} {hasIcon(props.suffixIcon) && ( {props.suffixIcon} - )} + )} + ); }, (nodeValue) => nodeValue.text.value, @@ -95,6 +99,10 @@ export const ColumnNumberComp = (function () { label: trans("table.columnValue"), tooltip: ColumnValueTooltip, })} + {children.tooltip.propertyView({ + label: trans("table.columnTooltip"), + tooltip: ColumnValueTooltip, + })} {children.step.propertyView({ label: trans("table.numberStep"), tooltip: trans("table.numberStepTooltip"), diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnBooleanComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnBooleanComp.tsx index b98924193..bc71cae1c 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnBooleanComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnBooleanComp.tsx @@ -1,4 +1,4 @@ -import { BoolCodeControl } from "comps/controls/codeControl"; +import { BoolCodeControl, StringControl } from "comps/controls/codeControl"; import { trans } from "i18n"; import { default as Checkbox } from "antd/es/checkbox"; import { ColumnTypeCompBuilder, ColumnTypeViewFn } from "../columnTypeCompBuilder"; @@ -11,6 +11,7 @@ import { dropdownControl } from "comps/controls/dropdownControl"; import { TableCheckedIcon, TableUnCheckedIcon } from "lowcoder-design"; import { IconControl } from "comps/controls/iconControl"; import { hasIcon } from "comps/utils"; +import Tooltip from "antd/es/tooltip"; const CheckboxStyled = styled(Checkbox)<{ $style: CheckboxStyleType }>` ${(props) => props.$style && getStyle(props.$style)} @@ -21,9 +22,10 @@ const Wrapper = styled.div` padding: 0 8px; `; -const IconWrapper = styled.div<{ $style: CheckboxStyleType; $ifChecked: boolean }>` - pointer-events: none; +const IconWrapper = styled.span<{ $style: CheckboxStyleType; $ifChecked: boolean }>` + // pointer-events: none; height: 22px; + display: inline-block; svg { width: 14px; height: 22px; @@ -50,6 +52,7 @@ const falseValuesOptions = [ const childrenMap = { text: BoolCodeControl, + tooltip: StringControl, falseValues: dropdownControl(falseValuesOptions, ""), iconTrue: IconControl, iconFalse: IconControl, @@ -93,12 +96,14 @@ export const BooleanComp = (function () { const CheckBoxComp = () => { const style = useStyle(CheckboxStyle); return ( - - {value === true ? ( hasIcon(props.iconTrue) ? props.iconTrue : ) - : value === false ? ( hasIcon(props.iconFalse) ? props.iconFalse : ( props.falseValues === "x" ? : props.falseValues ) - ) : ( hasIcon(props.iconNull) ? props.iconNull : "No Value" - )} - + + + {value === true ? ( hasIcon(props.iconTrue) ? props.iconTrue : ) + : value === false ? ( hasIcon(props.iconFalse) ? props.iconFalse : ( props.falseValues === "x" ? : props.falseValues ) + ) : ( hasIcon(props.iconNull) ? props.iconNull : "No Value" + )} + + ); }; return ; @@ -122,6 +127,10 @@ export const BooleanComp = (function () { label: trans("table.columnValue"), tooltip: ColumnValueTooltip, })} + {children.tooltip.propertyView({ + label: trans("table.columnTooltip"), + tooltip: ColumnValueTooltip, + })} {children.falseValues.propertyView({ label: trans("table.falseValues"), radioButton: true, diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateComp.tsx index 11a3107c4..004dfec13 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateComp.tsx @@ -15,6 +15,7 @@ import { CalendarCompIconSmall, PrevIcon, SuperPrevIcon } from "lowcoder-design" import { useState } from "react"; import styled from "styled-components"; import { DateParser, DATE_FORMAT } from "util/dateTimeUtils"; +import Tooltip from "antd/es/tooltip"; dayjs.extend(utc) @@ -136,6 +137,7 @@ export function formatDate(date: string, format: string) { const childrenMap = { text: StringControl, + tooltip: StringControl, format: withDefault(StringControl, DATE_FORMAT), }; @@ -195,7 +197,12 @@ export const DateComp = (function () { childrenMap, (props, dispatch) => { const value = props.changeValue ?? getBaseValue(props, dispatch); - return formatDate(value, props.format); + const view = formatDate(value, props.format); + return ( + + {view} + + ); }, (nodeValue) => formatDate(nodeValue.text.value, nodeValue.format.value), getBaseValue @@ -214,6 +221,10 @@ export const DateComp = (function () { label: trans("table.columnValue"), tooltip: ColumnValueTooltip, })} + {children.tooltip.propertyView({ + label: trans("table.columnTooltip"), + tooltip: ColumnValueTooltip, + })} {formatPropertyView({ children, placeholder: DATE_FORMAT })} )) diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateTimeComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateTimeComp.tsx index b28724fde..4f3e9b401 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateTimeComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateTimeComp.tsx @@ -9,9 +9,11 @@ import { formatPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { DATE_TIME_FORMAT } from "util/dateTimeUtils"; import { DateEdit, formatDate } from "./columnDateComp"; +import Tooltip from "antd/es/tooltip"; const childrenMap = { text: StringControl, + tooltip: StringControl, format: withDefault(StringControl, DATE_TIME_FORMAT), }; @@ -22,7 +24,12 @@ export const DateTimeComp = (function () { childrenMap, (props, dispatch) => { const value = props.changeValue ?? getBaseValue(props, dispatch); - return formatDate(value, props.format); + const view = formatDate(value, props.format); + return ( + + {view} + + ) }, (nodeValue) => formatDate(nodeValue.text.value, nodeValue.format.value), getBaseValue @@ -41,6 +48,10 @@ export const DateTimeComp = (function () { label: trans("table.columnValue"), tooltip: ColumnValueTooltip, })} + {children.tooltip.propertyView({ + label: trans("table.columnTooltip"), + tooltip: ColumnValueTooltip, + })} {formatPropertyView({ children, placeholder: DATE_TIME_FORMAT })} )) diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDropdownComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDropdownComp.tsx index c3e35b13e..c09a74215 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDropdownComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDropdownComp.tsx @@ -47,7 +47,9 @@ export const ColumnDropdownComp = (function () { const menu = ( items.find((o) => o.key === key)?.onEvent?.("click")} + onClick={({ key }) => { + items.find((o) => o.key === key)?.onEvent?.("click") + }} /> ); diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnImgComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnImgComp.tsx index 566da4aa9..9df3e5d04 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnImgComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnImgComp.tsx @@ -7,12 +7,14 @@ import { StringControl, NumberControl } from "comps/controls/codeControl"; import { trans } from "i18n"; import { withDefault } from "comps/generators"; import { TacoImage } from "lowcoder-design"; +import Tooltip from "antd/es/tooltip"; export const ColumnValueTooltip = trans("table.columnValueTooltip"); const childrenMap = { src: withDefault(StringControl, "{{currentCell}}"), size: withDefault(NumberControl, "50"), + tooltip: StringControl, }; const getBaseValue: ColumnTypeViewFn = (props) => props.src; @@ -22,7 +24,11 @@ export const ImageComp = (function () { childrenMap, (props, dispatch) => { const value = props.changeValue ?? getBaseValue(props, dispatch); - return ; + return ( + + ; + + ); }, (nodeValue) => nodeValue.src.value, getBaseValue @@ -47,6 +53,10 @@ export const ImageComp = (function () { label: trans("table.imageSrc"), tooltip: ColumnValueTooltip, })} + {children.tooltip.propertyView({ + label: trans("table.columnTooltip"), + tooltip: ColumnValueTooltip, + })} {children.size.propertyView({ label: trans("table.imageSize"), })} diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinkComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinkComp.tsx index 9a28d1830..2af6e5aef 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinkComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinkComp.tsx @@ -10,11 +10,13 @@ import { disabledPropertyView } from "comps/utils/propertyUtils"; import styled, { css } from "styled-components"; import { styleControl } from "comps/controls/styleControl"; import { TableColumnLinkStyle } from "comps/controls/styleControlConstants"; +import Tooltip from "antd/es/tooltip"; export const ColumnValueTooltip = trans("table.columnValueTooltip"); const childrenMap = { text: StringControl, + tooltip: StringControl, onClick: ActionSelectorControlInContext, disabled: BoolCodeControl, style: styleControl(TableColumnLinkStyle), @@ -32,14 +34,16 @@ const StyledLink = styled.a<{ $disabled: boolean }>` ${(props) => props.$disabled && disableCss}; `; -export const ColumnLink = (props: { disabled: boolean; label: string; onClick?: () => void }) => ( +export const ColumnLink = (props: { disabled: boolean; label: string; tooltip?: string, onClick?: () => void }) => ( { !props.disabled && props.onClick && props.onClick(); }} > - {props.label} + + {props.label} + ); @@ -50,7 +54,7 @@ export const LinkComp = (function () { childrenMap, (props, dispatch) => { const value = props.changeValue ?? getBaseValue(props, dispatch); - return ; + return ; }, (nodeValue) => nodeValue.text.value, getBaseValue @@ -74,6 +78,10 @@ export const LinkComp = (function () { label: trans("table.columnValue"), tooltip: ColumnValueTooltip, })} + {children.tooltip.propertyView({ + label: trans("table.columnTooltip"), + tooltip: ColumnValueTooltip, + })} {disabledPropertyView(children)} {children.onClick.propertyView({ label: trans("table.action"), diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinksComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinksComp.tsx index 06f7fcb38..5d42a1c03 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinksComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinksComp.tsx @@ -7,8 +7,9 @@ import { MultiCompBuilder } from "comps/generators"; import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import styled from "styled-components"; -import { ColumnLink } from "comps/comps/tableComp/column/columnTypeComps/columnLinkComp"; +import { ColumnLink, ColumnValueTooltip } from "comps/comps/tableComp/column/columnTypeComps/columnLinkComp"; import { LightActiveTextColor, PrimaryColor } from "constants/style"; +import Tooltip from "antd/es/tooltip"; const MenuLinkWrapper = styled.div` > a { @@ -67,6 +68,7 @@ export const ColumnLinksComp = (function () { options: manualOptionsControl(OptionItem, { initOptions: [{ label: trans("table.option1") }], }), + tooltip: StringControl, }; return new ColumnTypeCompBuilder( childrenMap, @@ -89,15 +91,21 @@ export const ColumnLinksComp = (function () { )); return ( - - - + + + + + ) }, () => "" ) .setPropertyViewFn((children) => ( <> + {children.tooltip.propertyView({ + label: trans("table.columnTooltip"), + tooltip: ColumnValueTooltip, + })} {children.options.propertyView({ newOptionLabel: trans("table.option"), title: trans("table.optionList"), diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnMarkdownComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnMarkdownComp.tsx index aa131c04e..a0c62d4e9 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnMarkdownComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnMarkdownComp.tsx @@ -1,4 +1,5 @@ import { default as Input } from "antd/es/input"; +import Tooltip from "antd/es/tooltip"; import { ColumnTypeCompBuilder, ColumnTypeViewFn, @@ -23,6 +24,7 @@ const Wrapper = styled.div` const childrenMap = { text: StringControl, + tooltip: StringControl, }; const getBaseValue: ColumnTypeViewFn = (props) => props.text; @@ -33,9 +35,11 @@ export const ColumnMarkdownComp = (function () { (props, dispatch) => { const value = props.changeValue ?? getBaseValue(props, dispatch); return ( - - {value} - + + + {value} + + ); }, (nodeValue) => nodeValue.text.value, @@ -60,6 +64,10 @@ export const ColumnMarkdownComp = (function () { label: trans("table.columnValue"), tooltip: ColumnValueTooltip, })} + {children.tooltip.propertyView({ + label: trans("table.columnTooltip"), + tooltip: ColumnValueTooltip, + })} )) .build(); diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnProgressComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnProgressComp.tsx index 1c5e02814..f98795923 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnProgressComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnProgressComp.tsx @@ -1,4 +1,4 @@ -import { NumberControl } from "comps/controls/codeControl"; +import { NumberControl, StringControl } from "comps/controls/codeControl"; import { trans } from "i18n"; import { default as InputNumber } from "antd/es/input-number"; import { ColumnTypeCompBuilder, ColumnTypeViewFn } from "../columnTypeCompBuilder"; @@ -9,6 +9,7 @@ import { BoolControl } from "comps/controls/boolControl"; import { ProgressStyled as Progress } from "comps/comps/progressComp"; import { TableMinusIcon, TablePlusIcon } from "lowcoder-design"; import styled from "styled-components"; +import Tooltip from "antd/es/tooltip"; const ProgressStyled = styled(Progress)` display: flex; @@ -66,6 +67,7 @@ const InputNumberStyled = styled(InputNumber)` const childrenMap = { text: NumberControl, + tooltip: StringControl, showValue: BoolControl, }; @@ -79,7 +81,9 @@ export const ProgressComp = (function () { const Progress = () => { const style = useStyle(ProgressStyle); return ( - + + + ); }; return ; @@ -111,6 +115,10 @@ export const ProgressComp = (function () { label: trans("table.columnValue"), tooltip: ColumnValueTooltip, })} + {children.tooltip.propertyView({ + label: trans("table.columnTooltip"), + tooltip: ColumnValueTooltip, + })} {children.showValue.propertyView({ label: trans("table.showValue"), })} diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnRatingComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnRatingComp.tsx index 8aca4df27..fd498bf59 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnRatingComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnRatingComp.tsx @@ -1,9 +1,10 @@ -import { NumberControl } from "comps/controls/codeControl"; +import { NumberControl, StringControl } from "comps/controls/codeControl"; import { trans } from "i18n"; import { ColumnTypeCompBuilder, ColumnTypeViewFn } from "../columnTypeCompBuilder"; import { ColumnValueTooltip } from "../simpleColumnTypeComps"; import styled from "styled-components"; import { default as Rate } from "antd/es/rate"; +import Tooltip from "antd/es/tooltip"; const RateStyled = styled(Rate)<{ isEdit?: boolean }>` display: inline-flex; @@ -46,6 +47,7 @@ const Wrapper = styled.div` const childrenMap = { text: NumberControl, + tooltip: StringControl, }; const getBaseValue: ColumnTypeViewFn = (props) => props.text; @@ -55,7 +57,11 @@ export const RatingComp = (function () { childrenMap, (props, dispatch) => { const value = props.changeValue ?? getBaseValue(props, dispatch); - return ; + return ( + + + + ); }, (nodeValue) => nodeValue.text.value, getBaseValue @@ -90,6 +96,10 @@ export const RatingComp = (function () { label: trans("table.columnValue"), tooltip: ColumnValueTooltip, })} + {children.tooltip.propertyView({ + label: trans("table.columnTooltip"), + tooltip: ColumnValueTooltip, + })} ); }) diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSelectComp.tsx index 8cd83d4e9..201f12f54 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSelectComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSelectComp.tsx @@ -7,9 +7,11 @@ import { StringControl } from "comps/controls/codeControl"; import { trans } from "i18n"; import { ColumnTypeCompBuilder, ColumnTypeViewFn } from "../columnTypeCompBuilder"; import { ColumnValueTooltip } from "../simpleColumnTypeComps"; +import Tooltip from "antd/es/tooltip"; const childrenMap = { text: StringControl, + tooltip: StringControl, options: SelectOptionControl, }; @@ -56,10 +58,10 @@ export const ColumnSelectComp = (function () { const value = props.changeValue ?? getBaseValue(props, dispatch); const option = props.options.find(x => x.value === value); return ( - <> + {option?.prefixIcon} {option?.label} - + ); }, (nodeValue) => nodeValue.text.value, @@ -82,6 +84,10 @@ export const ColumnSelectComp = (function () { label: trans("table.columnValue"), tooltip: ColumnValueTooltip, })} + {children.tooltip.propertyView({ + label: trans("table.columnTooltip"), + tooltip: ColumnValueTooltip, + })} {children.options.propertyView({ title: trans("optionsControl.optionList"), })} diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnStatusComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnStatusComp.tsx index 5579a4cc6..da8b19cc4 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnStatusComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnStatusComp.tsx @@ -10,6 +10,7 @@ import { ReactNode, useContext, useState } from "react"; import { StatusContext } from "components/table/EditableCell"; import { CustomSelect, PackUpIcon, ScrollBar } from "lowcoder-design"; import { PresetStatusColorType } from "antd/es/_util/colors"; +import Tooltip from "antd/es/tooltip"; export const ColumnValueTooltip = trans("table.columnValueTooltip"); @@ -26,6 +27,7 @@ export type StatusType = PresetStatusColorType | "none"; const childrenMap = { text: StringControl, + tooltip: StringControl, status: stringUnionControl(BadgeStatusOptions, "none"), }; @@ -119,7 +121,12 @@ export const BadgeStatusComp = (function () { (props, dispatch) => { const text = props.changeValue?.value ?? getBaseValue(props, dispatch).value; const status = props.changeValue?.status ?? getBaseValue(props, dispatch).status; - return status === "none" ? text : ; + const view = status === "none" ? text : ; + return ( + + {view} + + ) }, (nodeValue) => [nodeValue.status.value, nodeValue.text.value].filter((t) => t).join(" "), getBaseValue @@ -136,6 +143,10 @@ export const BadgeStatusComp = (function () { label: trans("table.columnValue"), tooltip: ColumnValueTooltip, })} + {children.tooltip.propertyView({ + label: trans("table.columnTooltip"), + tooltip: ColumnValueTooltip, + })} {children.status.propertyView({ label: trans("table.status"), tooltip: trans("table.statusTooltip"), diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSwitchComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSwitchComp.tsx index 62a868fc0..30dec3ee1 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSwitchComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSwitchComp.tsx @@ -1,4 +1,4 @@ -import { BoolCodeControl } from "comps/controls/codeControl"; +import { BoolCodeControl, StringControl } from "comps/controls/codeControl"; import { trans } from "i18n"; import { default as Checkbox } from "antd/es/checkbox"; import { ColumnTypeCompBuilder, ColumnTypeViewFn } from "../columnTypeCompBuilder"; @@ -13,6 +13,7 @@ import { RefControl } from "comps/controls/refControl"; import { booleanExposingStateControl } from "comps/controls/codeStateControl"; import { changeEvent, eventHandlerControl } from "comps/controls/eventHandlerControl"; import { disabledPropertyView } from "comps/utils/propertyUtils"; +import Tooltip from "antd/es/tooltip"; interface SwitchWrapperProps { disabled: boolean; @@ -65,6 +66,7 @@ const childrenMap = { disabled: BoolCodeControl, style: styleControl(InputFieldStyle), viewRef: RefControl, + tooltip: StringControl, }; const getBaseValue: ColumnTypeViewFn = (props) => props.switchState; @@ -76,16 +78,18 @@ export const SwitchComp = (function () { const value = props.changeValue ?? getBaseValue(props, dispatch); const CheckBoxComp = () => { return ( - { - props.value.onChange(checked); - props.onEvent("change"); - props.onEvent(checked ? "true" : "false"); - }} - /> + + { + props.value.onChange(checked); + props.onEvent("change"); + props.onEvent(checked ? "true" : "false"); + }} + /> + ); }; return ; @@ -118,6 +122,10 @@ export const SwitchComp = (function () { label: trans("table.columnValue"), tooltip: ColumnValueTooltip, })} + {children.tooltip.propertyView({ + label: trans("table.columnTooltip"), + tooltip: ColumnValueTooltip, + })} {children.onEvent.propertyView()} {disabledPropertyView(children)} diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTagsComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTagsComp.tsx index 97278acf8..120b63ffe 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTagsComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTagsComp.tsx @@ -6,7 +6,7 @@ import { ColumnTypeViewFn, } from "comps/comps/tableComp/column/columnTypeCompBuilder"; import { ColumnValueTooltip } from "comps/comps/tableComp/column/simpleColumnTypeComps"; -import { codeControl } from "comps/controls/codeControl"; +import { codeControl, StringControl } from "comps/controls/codeControl"; import { trans } from "i18n"; import styled from "styled-components"; import _ from "lodash"; @@ -16,6 +16,7 @@ import { hashToNum } from "util/stringUtils"; import { CustomSelect, PackUpIcon } from "lowcoder-design"; import { ScrollBar } from "lowcoder-design"; import { ColoredTagOptionControl } from "comps/controls/optionsControl"; +import Tooltip from "antd/es/tooltip"; const colors = PresetStatusColorTypes; @@ -71,6 +72,7 @@ function getTagIcon(tagText: any, tagOptions: any[]) { const childrenMap = { text: TagsControl, + tooltip: StringControl, tagColors: ColoredTagOptionControl, }; @@ -271,7 +273,11 @@ export const ColumnTagsComp = (function () { ); }); - return view; + return ( + + {view} + + ); }, (nodeValue) => { const text = nodeValue.text.value; @@ -290,6 +296,10 @@ export const ColumnTagsComp = (function () { label: trans("table.columnValue"), tooltip: ColumnValueTooltip, })} + {children.tooltip.propertyView({ + label: trans("table.columnTooltip"), + tooltip: ColumnValueTooltip, + })} {children.tagColors.propertyView({ title: "test", })} diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/simpleTextComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/simpleTextComp.tsx index e312c0011..372d43a8c 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/simpleTextComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/simpleTextComp.tsx @@ -1,13 +1,15 @@ import { default as Input } from "antd/es/input"; -import { StringOrNumberControl } from "comps/controls/codeControl"; +import { StringControl, StringOrNumberControl } from "comps/controls/codeControl"; import { trans } from "i18n"; import { ColumnTypeCompBuilder, ColumnTypeViewFn } from "../columnTypeCompBuilder"; import { ColumnValueTooltip } from "../simpleColumnTypeComps"; import { IconControl } from "comps/controls/iconControl"; import { hasIcon } from "comps/utils"; +import Tooltip from "antd/es/tooltip"; const childrenMap = { text: StringOrNumberControl, + tooltip: StringControl, prefixIcon: IconControl, suffixIcon: IconControl, }; @@ -21,13 +23,17 @@ export const SimpleTextComp = (function () { childrenMap, (props, dispatch) => { const value = props.changeValue ?? getBaseValue(props, dispatch); - return <>{hasIcon(props.prefixIcon) && ( - {props.prefixIcon} - )} - {value} - {hasIcon(props.suffixIcon) && ( - {props.suffixIcon} - )} ; + return( + + {hasIcon(props.prefixIcon) && ( + {props.prefixIcon} + )} + {value} + {hasIcon(props.suffixIcon) && ( + {props.suffixIcon} + )} + + ); }, (nodeValue) => nodeValue.text.value, getBaseValue @@ -52,6 +58,10 @@ export const SimpleTextComp = (function () { label: trans("table.columnValue"), tooltip: ColumnValueTooltip, })} + {children.tooltip.propertyView({ + label: trans("table.columnTooltip"), + tooltip: ColumnValueTooltip, + })} {children.prefixIcon.propertyView({ label: trans("button.prefixIcon"), })} diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx index 613a0b910..38ad44d87 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx @@ -86,7 +86,7 @@ export type CellColorViewType = (param: { export const columnChildrenMap = { // column title title: StringControl, - tooltip: StringControl, + titleTooltip: StringControl, showTitle: withDefault(BoolControl, true), // a custom column or a data column isCustom: valueComp(false), @@ -208,8 +208,8 @@ export class ColumnComp extends ColumnInitComp { label: trans("table.columnTitle"), placeholder: this.children.dataIndex.getView(), })} - {this.children.tooltip.propertyView({ - label: trans("labelProp.tooltip"), + {this.children.titleTooltip.propertyView({ + label: trans("table.columnTitleTooltip"), })} Date: Fri, 2 Aug 2024 20:08:33 +0500 Subject: [PATCH 3/3] removed tooltip from column types and placed in abstract level for all columns --- .../src/components/table/EditableCell.tsx | 66 +++++++++++++------ .../columnTypeComps/ColumnNumberComp.tsx | 12 +--- .../columnTypeComps/columnBooleanComp.tsx | 22 ++----- .../column/columnTypeComps/columnDateComp.tsx | 13 +--- .../columnTypeComps/columnDateTimeComp.tsx | 13 +--- .../column/columnTypeComps/columnImgComp.tsx | 12 +--- .../column/columnTypeComps/columnLinkComp.tsx | 14 +--- .../columnTypeComps/columnLinksComp.tsx | 16 ++--- .../columnTypeComps/columnMarkdownComp.tsx | 14 +--- .../columnTypeComps/columnProgressComp.tsx | 12 +--- .../columnTypeComps/columnRatingComp.tsx | 14 +--- .../columnTypeComps/columnSelectComp.tsx | 10 +-- .../columnTypeComps/columnStatusComp.tsx | 13 +--- .../columnTypeComps/columnSwitchComp.tsx | 30 ++++----- .../column/columnTypeComps/columnTagsComp.tsx | 14 +--- .../column/columnTypeComps/simpleTextComp.tsx | 12 +--- .../tableComp/column/tableColumnComp.tsx | 40 +++++++++++ .../src/comps/comps/tableComp/tableUtils.tsx | 8 ++- .../packages/lowcoder/src/i18n/locales/de.ts | 6 +- .../packages/lowcoder/src/i18n/locales/pt.ts | 4 +- .../packages/lowcoder/src/i18n/locales/zh.ts | 4 +- 21 files changed, 144 insertions(+), 205 deletions(-) diff --git a/client/packages/lowcoder/src/components/table/EditableCell.tsx b/client/packages/lowcoder/src/components/table/EditableCell.tsx index beb574552..3e68cfdff 100644 --- a/client/packages/lowcoder/src/components/table/EditableCell.tsx +++ b/client/packages/lowcoder/src/components/table/EditableCell.tsx @@ -7,6 +7,7 @@ import styled from "styled-components"; import { JSONValue } from "util/jsonTypes"; import ColumnTypeView from "./columnTypeView"; import { TableCellContext } from "comps/comps/tableComp/tableContext"; +import Tooltip from "antd/es/tooltip"; type StatusType = PresetStatusColorType | "none"; export const TABLE_EDITABLE_SWITCH_ON = true; @@ -35,6 +36,7 @@ export interface CellProps { candidateTags?: string[]; candidateStatus?: { text: string; status: StatusType }[]; textOverflow?: boolean; + cellTooltip?: string; onTableEvent?: (eventName: any) => void; } @@ -54,6 +56,25 @@ const BorderDiv = styled.div` left: 0; `; +const CellWrapper = ({ + children, + tooltipTitle, +}: { + children: ReactNode, + tooltipTitle?: string, +}) => { + if (tooltipTitle) { + return ( + + {children} + + ) + } + return ( + <>{children} + ) +}; + interface EditableCellProps extends CellProps { normalView: ReactNode; dispatch: DispatchType; @@ -123,28 +144,31 @@ export function EditableCell(props: EditableCellProps) { ); } - + return ( - - {status === "toSave" && !isEditing && } - {!editable && normalView} - {/* overlay on normal view to handle double click for editing */} - {editable && ( -
+ + {status === "toSave" && !isEditing && } + {normalView} -
- )} - + + {/* overlay on normal view to handle double click for editing */} + {editable && ( + +
+
+ + )} + ); } diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/ColumnNumberComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/ColumnNumberComp.tsx index 06354de4c..871d7fbf9 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/ColumnNumberComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/ColumnNumberComp.tsx @@ -8,7 +8,6 @@ import { withDefault } from "comps/generators"; import styled from "styled-components"; import { IconControl } from "comps/controls/iconControl"; import { hasIcon } from "comps/utils"; -import Tooltip from "antd/es/tooltip"; const InputNumberWrapper = styled.div` .ant-input-number { @@ -27,7 +26,6 @@ const InputNumberWrapper = styled.div` const childrenMap = { text: NumberControl, - tooltip: StringControl, step: withDefault(NumberControl, 1), precision: RangeControl.closed(0, 20, 0), float: BoolControl, @@ -60,15 +58,13 @@ export const ColumnNumberComp = (function () { formattedValue = formattedValue.toFixed(precision + 1); } return ( - - {hasIcon(props.prefixIcon) && ( + <>{hasIcon(props.prefixIcon) && ( {props.prefixIcon} )} {props.prefix + formattedValue + props.suffix} {hasIcon(props.suffixIcon) && ( {props.suffixIcon} - )} - + )} ); }, (nodeValue) => nodeValue.text.value, @@ -99,10 +95,6 @@ export const ColumnNumberComp = (function () { label: trans("table.columnValue"), tooltip: ColumnValueTooltip, })} - {children.tooltip.propertyView({ - label: trans("table.columnTooltip"), - tooltip: ColumnValueTooltip, - })} {children.step.propertyView({ label: trans("table.numberStep"), tooltip: trans("table.numberStepTooltip"), diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnBooleanComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnBooleanComp.tsx index bc71cae1c..8c53650a8 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnBooleanComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnBooleanComp.tsx @@ -1,4 +1,4 @@ -import { BoolCodeControl, StringControl } from "comps/controls/codeControl"; +import { BoolCodeControl } from "comps/controls/codeControl"; import { trans } from "i18n"; import { default as Checkbox } from "antd/es/checkbox"; import { ColumnTypeCompBuilder, ColumnTypeViewFn } from "../columnTypeCompBuilder"; @@ -11,7 +11,6 @@ import { dropdownControl } from "comps/controls/dropdownControl"; import { TableCheckedIcon, TableUnCheckedIcon } from "lowcoder-design"; import { IconControl } from "comps/controls/iconControl"; import { hasIcon } from "comps/utils"; -import Tooltip from "antd/es/tooltip"; const CheckboxStyled = styled(Checkbox)<{ $style: CheckboxStyleType }>` ${(props) => props.$style && getStyle(props.$style)} @@ -52,7 +51,6 @@ const falseValuesOptions = [ const childrenMap = { text: BoolCodeControl, - tooltip: StringControl, falseValues: dropdownControl(falseValuesOptions, ""), iconTrue: IconControl, iconFalse: IconControl, @@ -96,14 +94,12 @@ export const BooleanComp = (function () { const CheckBoxComp = () => { const style = useStyle(CheckboxStyle); return ( - - - {value === true ? ( hasIcon(props.iconTrue) ? props.iconTrue : ) - : value === false ? ( hasIcon(props.iconFalse) ? props.iconFalse : ( props.falseValues === "x" ? : props.falseValues ) - ) : ( hasIcon(props.iconNull) ? props.iconNull : "No Value" - )} - - + + {value === true ? ( hasIcon(props.iconTrue) ? props.iconTrue : ) + : value === false ? ( hasIcon(props.iconFalse) ? props.iconFalse : ( props.falseValues === "x" ? : props.falseValues ) + ) : ( hasIcon(props.iconNull) ? props.iconNull : "No Value" + )} + ); }; return ; @@ -127,10 +123,6 @@ export const BooleanComp = (function () { label: trans("table.columnValue"), tooltip: ColumnValueTooltip, })} - {children.tooltip.propertyView({ - label: trans("table.columnTooltip"), - tooltip: ColumnValueTooltip, - })} {children.falseValues.propertyView({ label: trans("table.falseValues"), radioButton: true, diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateComp.tsx index 004dfec13..11a3107c4 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateComp.tsx @@ -15,7 +15,6 @@ import { CalendarCompIconSmall, PrevIcon, SuperPrevIcon } from "lowcoder-design" import { useState } from "react"; import styled from "styled-components"; import { DateParser, DATE_FORMAT } from "util/dateTimeUtils"; -import Tooltip from "antd/es/tooltip"; dayjs.extend(utc) @@ -137,7 +136,6 @@ export function formatDate(date: string, format: string) { const childrenMap = { text: StringControl, - tooltip: StringControl, format: withDefault(StringControl, DATE_FORMAT), }; @@ -197,12 +195,7 @@ export const DateComp = (function () { childrenMap, (props, dispatch) => { const value = props.changeValue ?? getBaseValue(props, dispatch); - const view = formatDate(value, props.format); - return ( - - {view} - - ); + return formatDate(value, props.format); }, (nodeValue) => formatDate(nodeValue.text.value, nodeValue.format.value), getBaseValue @@ -221,10 +214,6 @@ export const DateComp = (function () { label: trans("table.columnValue"), tooltip: ColumnValueTooltip, })} - {children.tooltip.propertyView({ - label: trans("table.columnTooltip"), - tooltip: ColumnValueTooltip, - })} {formatPropertyView({ children, placeholder: DATE_FORMAT })} )) diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateTimeComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateTimeComp.tsx index 4f3e9b401..b28724fde 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateTimeComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateTimeComp.tsx @@ -9,11 +9,9 @@ import { formatPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { DATE_TIME_FORMAT } from "util/dateTimeUtils"; import { DateEdit, formatDate } from "./columnDateComp"; -import Tooltip from "antd/es/tooltip"; const childrenMap = { text: StringControl, - tooltip: StringControl, format: withDefault(StringControl, DATE_TIME_FORMAT), }; @@ -24,12 +22,7 @@ export const DateTimeComp = (function () { childrenMap, (props, dispatch) => { const value = props.changeValue ?? getBaseValue(props, dispatch); - const view = formatDate(value, props.format); - return ( - - {view} - - ) + return formatDate(value, props.format); }, (nodeValue) => formatDate(nodeValue.text.value, nodeValue.format.value), getBaseValue @@ -48,10 +41,6 @@ export const DateTimeComp = (function () { label: trans("table.columnValue"), tooltip: ColumnValueTooltip, })} - {children.tooltip.propertyView({ - label: trans("table.columnTooltip"), - tooltip: ColumnValueTooltip, - })} {formatPropertyView({ children, placeholder: DATE_TIME_FORMAT })} )) diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnImgComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnImgComp.tsx index 9df3e5d04..566da4aa9 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnImgComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnImgComp.tsx @@ -7,14 +7,12 @@ import { StringControl, NumberControl } from "comps/controls/codeControl"; import { trans } from "i18n"; import { withDefault } from "comps/generators"; import { TacoImage } from "lowcoder-design"; -import Tooltip from "antd/es/tooltip"; export const ColumnValueTooltip = trans("table.columnValueTooltip"); const childrenMap = { src: withDefault(StringControl, "{{currentCell}}"), size: withDefault(NumberControl, "50"), - tooltip: StringControl, }; const getBaseValue: ColumnTypeViewFn = (props) => props.src; @@ -24,11 +22,7 @@ export const ImageComp = (function () { childrenMap, (props, dispatch) => { const value = props.changeValue ?? getBaseValue(props, dispatch); - return ( - - ; - - ); + return ; }, (nodeValue) => nodeValue.src.value, getBaseValue @@ -53,10 +47,6 @@ export const ImageComp = (function () { label: trans("table.imageSrc"), tooltip: ColumnValueTooltip, })} - {children.tooltip.propertyView({ - label: trans("table.columnTooltip"), - tooltip: ColumnValueTooltip, - })} {children.size.propertyView({ label: trans("table.imageSize"), })} diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinkComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinkComp.tsx index 2af6e5aef..9a28d1830 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinkComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinkComp.tsx @@ -10,13 +10,11 @@ import { disabledPropertyView } from "comps/utils/propertyUtils"; import styled, { css } from "styled-components"; import { styleControl } from "comps/controls/styleControl"; import { TableColumnLinkStyle } from "comps/controls/styleControlConstants"; -import Tooltip from "antd/es/tooltip"; export const ColumnValueTooltip = trans("table.columnValueTooltip"); const childrenMap = { text: StringControl, - tooltip: StringControl, onClick: ActionSelectorControlInContext, disabled: BoolCodeControl, style: styleControl(TableColumnLinkStyle), @@ -34,16 +32,14 @@ const StyledLink = styled.a<{ $disabled: boolean }>` ${(props) => props.$disabled && disableCss}; `; -export const ColumnLink = (props: { disabled: boolean; label: string; tooltip?: string, onClick?: () => void }) => ( +export const ColumnLink = (props: { disabled: boolean; label: string; onClick?: () => void }) => ( { !props.disabled && props.onClick && props.onClick(); }} > - - {props.label} - + {props.label} ); @@ -54,7 +50,7 @@ export const LinkComp = (function () { childrenMap, (props, dispatch) => { const value = props.changeValue ?? getBaseValue(props, dispatch); - return ; + return ; }, (nodeValue) => nodeValue.text.value, getBaseValue @@ -78,10 +74,6 @@ export const LinkComp = (function () { label: trans("table.columnValue"), tooltip: ColumnValueTooltip, })} - {children.tooltip.propertyView({ - label: trans("table.columnTooltip"), - tooltip: ColumnValueTooltip, - })} {disabledPropertyView(children)} {children.onClick.propertyView({ label: trans("table.action"), diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinksComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinksComp.tsx index 5d42a1c03..06f7fcb38 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinksComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinksComp.tsx @@ -7,9 +7,8 @@ import { MultiCompBuilder } from "comps/generators"; import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import styled from "styled-components"; -import { ColumnLink, ColumnValueTooltip } from "comps/comps/tableComp/column/columnTypeComps/columnLinkComp"; +import { ColumnLink } from "comps/comps/tableComp/column/columnTypeComps/columnLinkComp"; import { LightActiveTextColor, PrimaryColor } from "constants/style"; -import Tooltip from "antd/es/tooltip"; const MenuLinkWrapper = styled.div` > a { @@ -68,7 +67,6 @@ export const ColumnLinksComp = (function () { options: manualOptionsControl(OptionItem, { initOptions: [{ label: trans("table.option1") }], }), - tooltip: StringControl, }; return new ColumnTypeCompBuilder( childrenMap, @@ -91,21 +89,15 @@ export const ColumnLinksComp = (function () { )); return ( - - - - - + + + ) }, () => "" ) .setPropertyViewFn((children) => ( <> - {children.tooltip.propertyView({ - label: trans("table.columnTooltip"), - tooltip: ColumnValueTooltip, - })} {children.options.propertyView({ newOptionLabel: trans("table.option"), title: trans("table.optionList"), diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnMarkdownComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnMarkdownComp.tsx index a0c62d4e9..aa131c04e 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnMarkdownComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnMarkdownComp.tsx @@ -1,5 +1,4 @@ import { default as Input } from "antd/es/input"; -import Tooltip from "antd/es/tooltip"; import { ColumnTypeCompBuilder, ColumnTypeViewFn, @@ -24,7 +23,6 @@ const Wrapper = styled.div` const childrenMap = { text: StringControl, - tooltip: StringControl, }; const getBaseValue: ColumnTypeViewFn = (props) => props.text; @@ -35,11 +33,9 @@ export const ColumnMarkdownComp = (function () { (props, dispatch) => { const value = props.changeValue ?? getBaseValue(props, dispatch); return ( - - - {value} - - + + {value} + ); }, (nodeValue) => nodeValue.text.value, @@ -64,10 +60,6 @@ export const ColumnMarkdownComp = (function () { label: trans("table.columnValue"), tooltip: ColumnValueTooltip, })} - {children.tooltip.propertyView({ - label: trans("table.columnTooltip"), - tooltip: ColumnValueTooltip, - })} )) .build(); diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnProgressComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnProgressComp.tsx index f98795923..1c5e02814 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnProgressComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnProgressComp.tsx @@ -1,4 +1,4 @@ -import { NumberControl, StringControl } from "comps/controls/codeControl"; +import { NumberControl } from "comps/controls/codeControl"; import { trans } from "i18n"; import { default as InputNumber } from "antd/es/input-number"; import { ColumnTypeCompBuilder, ColumnTypeViewFn } from "../columnTypeCompBuilder"; @@ -9,7 +9,6 @@ import { BoolControl } from "comps/controls/boolControl"; import { ProgressStyled as Progress } from "comps/comps/progressComp"; import { TableMinusIcon, TablePlusIcon } from "lowcoder-design"; import styled from "styled-components"; -import Tooltip from "antd/es/tooltip"; const ProgressStyled = styled(Progress)` display: flex; @@ -67,7 +66,6 @@ const InputNumberStyled = styled(InputNumber)` const childrenMap = { text: NumberControl, - tooltip: StringControl, showValue: BoolControl, }; @@ -81,9 +79,7 @@ export const ProgressComp = (function () { const Progress = () => { const style = useStyle(ProgressStyle); return ( - - - + ); }; return ; @@ -115,10 +111,6 @@ export const ProgressComp = (function () { label: trans("table.columnValue"), tooltip: ColumnValueTooltip, })} - {children.tooltip.propertyView({ - label: trans("table.columnTooltip"), - tooltip: ColumnValueTooltip, - })} {children.showValue.propertyView({ label: trans("table.showValue"), })} diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnRatingComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnRatingComp.tsx index fd498bf59..8aca4df27 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnRatingComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnRatingComp.tsx @@ -1,10 +1,9 @@ -import { NumberControl, StringControl } from "comps/controls/codeControl"; +import { NumberControl } from "comps/controls/codeControl"; import { trans } from "i18n"; import { ColumnTypeCompBuilder, ColumnTypeViewFn } from "../columnTypeCompBuilder"; import { ColumnValueTooltip } from "../simpleColumnTypeComps"; import styled from "styled-components"; import { default as Rate } from "antd/es/rate"; -import Tooltip from "antd/es/tooltip"; const RateStyled = styled(Rate)<{ isEdit?: boolean }>` display: inline-flex; @@ -47,7 +46,6 @@ const Wrapper = styled.div` const childrenMap = { text: NumberControl, - tooltip: StringControl, }; const getBaseValue: ColumnTypeViewFn = (props) => props.text; @@ -57,11 +55,7 @@ export const RatingComp = (function () { childrenMap, (props, dispatch) => { const value = props.changeValue ?? getBaseValue(props, dispatch); - return ( - - - - ); + return ; }, (nodeValue) => nodeValue.text.value, getBaseValue @@ -96,10 +90,6 @@ export const RatingComp = (function () { label: trans("table.columnValue"), tooltip: ColumnValueTooltip, })} - {children.tooltip.propertyView({ - label: trans("table.columnTooltip"), - tooltip: ColumnValueTooltip, - })} ); }) diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSelectComp.tsx index 201f12f54..8cd83d4e9 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSelectComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSelectComp.tsx @@ -7,11 +7,9 @@ import { StringControl } from "comps/controls/codeControl"; import { trans } from "i18n"; import { ColumnTypeCompBuilder, ColumnTypeViewFn } from "../columnTypeCompBuilder"; import { ColumnValueTooltip } from "../simpleColumnTypeComps"; -import Tooltip from "antd/es/tooltip"; const childrenMap = { text: StringControl, - tooltip: StringControl, options: SelectOptionControl, }; @@ -58,10 +56,10 @@ export const ColumnSelectComp = (function () { const value = props.changeValue ?? getBaseValue(props, dispatch); const option = props.options.find(x => x.value === value); return ( - + <> {option?.prefixIcon} {option?.label} - + ); }, (nodeValue) => nodeValue.text.value, @@ -84,10 +82,6 @@ export const ColumnSelectComp = (function () { label: trans("table.columnValue"), tooltip: ColumnValueTooltip, })} - {children.tooltip.propertyView({ - label: trans("table.columnTooltip"), - tooltip: ColumnValueTooltip, - })} {children.options.propertyView({ title: trans("optionsControl.optionList"), })} diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnStatusComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnStatusComp.tsx index da8b19cc4..5579a4cc6 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnStatusComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnStatusComp.tsx @@ -10,7 +10,6 @@ import { ReactNode, useContext, useState } from "react"; import { StatusContext } from "components/table/EditableCell"; import { CustomSelect, PackUpIcon, ScrollBar } from "lowcoder-design"; import { PresetStatusColorType } from "antd/es/_util/colors"; -import Tooltip from "antd/es/tooltip"; export const ColumnValueTooltip = trans("table.columnValueTooltip"); @@ -27,7 +26,6 @@ export type StatusType = PresetStatusColorType | "none"; const childrenMap = { text: StringControl, - tooltip: StringControl, status: stringUnionControl(BadgeStatusOptions, "none"), }; @@ -121,12 +119,7 @@ export const BadgeStatusComp = (function () { (props, dispatch) => { const text = props.changeValue?.value ?? getBaseValue(props, dispatch).value; const status = props.changeValue?.status ?? getBaseValue(props, dispatch).status; - const view = status === "none" ? text : ; - return ( - - {view} - - ) + return status === "none" ? text : ; }, (nodeValue) => [nodeValue.status.value, nodeValue.text.value].filter((t) => t).join(" "), getBaseValue @@ -143,10 +136,6 @@ export const BadgeStatusComp = (function () { label: trans("table.columnValue"), tooltip: ColumnValueTooltip, })} - {children.tooltip.propertyView({ - label: trans("table.columnTooltip"), - tooltip: ColumnValueTooltip, - })} {children.status.propertyView({ label: trans("table.status"), tooltip: trans("table.statusTooltip"), diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSwitchComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSwitchComp.tsx index 30dec3ee1..62a868fc0 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSwitchComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSwitchComp.tsx @@ -1,4 +1,4 @@ -import { BoolCodeControl, StringControl } from "comps/controls/codeControl"; +import { BoolCodeControl } from "comps/controls/codeControl"; import { trans } from "i18n"; import { default as Checkbox } from "antd/es/checkbox"; import { ColumnTypeCompBuilder, ColumnTypeViewFn } from "../columnTypeCompBuilder"; @@ -13,7 +13,6 @@ import { RefControl } from "comps/controls/refControl"; import { booleanExposingStateControl } from "comps/controls/codeStateControl"; import { changeEvent, eventHandlerControl } from "comps/controls/eventHandlerControl"; import { disabledPropertyView } from "comps/utils/propertyUtils"; -import Tooltip from "antd/es/tooltip"; interface SwitchWrapperProps { disabled: boolean; @@ -66,7 +65,6 @@ const childrenMap = { disabled: BoolCodeControl, style: styleControl(InputFieldStyle), viewRef: RefControl, - tooltip: StringControl, }; const getBaseValue: ColumnTypeViewFn = (props) => props.switchState; @@ -78,18 +76,16 @@ export const SwitchComp = (function () { const value = props.changeValue ?? getBaseValue(props, dispatch); const CheckBoxComp = () => { return ( - - { - props.value.onChange(checked); - props.onEvent("change"); - props.onEvent(checked ? "true" : "false"); - }} - /> - + { + props.value.onChange(checked); + props.onEvent("change"); + props.onEvent(checked ? "true" : "false"); + }} + /> ); }; return ; @@ -122,10 +118,6 @@ export const SwitchComp = (function () { label: trans("table.columnValue"), tooltip: ColumnValueTooltip, })} - {children.tooltip.propertyView({ - label: trans("table.columnTooltip"), - tooltip: ColumnValueTooltip, - })} {children.onEvent.propertyView()} {disabledPropertyView(children)} diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTagsComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTagsComp.tsx index 120b63ffe..97278acf8 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTagsComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTagsComp.tsx @@ -6,7 +6,7 @@ import { ColumnTypeViewFn, } from "comps/comps/tableComp/column/columnTypeCompBuilder"; import { ColumnValueTooltip } from "comps/comps/tableComp/column/simpleColumnTypeComps"; -import { codeControl, StringControl } from "comps/controls/codeControl"; +import { codeControl } from "comps/controls/codeControl"; import { trans } from "i18n"; import styled from "styled-components"; import _ from "lodash"; @@ -16,7 +16,6 @@ import { hashToNum } from "util/stringUtils"; import { CustomSelect, PackUpIcon } from "lowcoder-design"; import { ScrollBar } from "lowcoder-design"; import { ColoredTagOptionControl } from "comps/controls/optionsControl"; -import Tooltip from "antd/es/tooltip"; const colors = PresetStatusColorTypes; @@ -72,7 +71,6 @@ function getTagIcon(tagText: any, tagOptions: any[]) { const childrenMap = { text: TagsControl, - tooltip: StringControl, tagColors: ColoredTagOptionControl, }; @@ -273,11 +271,7 @@ export const ColumnTagsComp = (function () { ); }); - return ( - - {view} - - ); + return view; }, (nodeValue) => { const text = nodeValue.text.value; @@ -296,10 +290,6 @@ export const ColumnTagsComp = (function () { label: trans("table.columnValue"), tooltip: ColumnValueTooltip, })} - {children.tooltip.propertyView({ - label: trans("table.columnTooltip"), - tooltip: ColumnValueTooltip, - })} {children.tagColors.propertyView({ title: "test", })} diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/simpleTextComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/simpleTextComp.tsx index 372d43a8c..04330e9c6 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/simpleTextComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/simpleTextComp.tsx @@ -1,15 +1,13 @@ import { default as Input } from "antd/es/input"; -import { StringControl, StringOrNumberControl } from "comps/controls/codeControl"; +import { StringOrNumberControl } from "comps/controls/codeControl"; import { trans } from "i18n"; import { ColumnTypeCompBuilder, ColumnTypeViewFn } from "../columnTypeCompBuilder"; import { ColumnValueTooltip } from "../simpleColumnTypeComps"; import { IconControl } from "comps/controls/iconControl"; import { hasIcon } from "comps/utils"; -import Tooltip from "antd/es/tooltip"; const childrenMap = { text: StringOrNumberControl, - tooltip: StringControl, prefixIcon: IconControl, suffixIcon: IconControl, }; @@ -24,7 +22,7 @@ export const SimpleTextComp = (function () { (props, dispatch) => { const value = props.changeValue ?? getBaseValue(props, dispatch); return( - + <> {hasIcon(props.prefixIcon) && ( {props.prefixIcon} )} @@ -32,7 +30,7 @@ export const SimpleTextComp = (function () { {hasIcon(props.suffixIcon) && ( {props.suffixIcon} )} - + ); }, (nodeValue) => nodeValue.text.value, @@ -58,10 +56,6 @@ export const SimpleTextComp = (function () { label: trans("table.columnValue"), tooltip: ColumnValueTooltip, })} - {children.tooltip.propertyView({ - label: trans("table.columnTooltip"), - tooltip: ColumnValueTooltip, - })} {children.prefixIcon.propertyView({ label: trans("button.prefixIcon"), })} diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx index 38ad44d87..c9057ed73 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx @@ -28,6 +28,7 @@ import { JSONValue } from "util/jsonTypes"; import styled from "styled-components"; import { TextOverflowControl } from "comps/controls/textOverflowControl"; import { default as Divider } from "antd/es/divider"; +import { ColumnValueTooltip } from "./simpleColumnTypeComps"; export type Render = ReturnType["getOriginalComp"]>; export const RenderComp = withSelectedMultiContext(ColumnTypeComp); @@ -83,11 +84,39 @@ export type CellColorViewType = (param: { currentCell: JSONValue | undefined; //number | string; }) => string; +const cellTooltipLabel = trans("table.columnTooltip"); +const CellTooltipTempComp = withContext( + new MultiCompBuilder({ tooltip: StringControl }, (props) => props.tooltip) + .setPropertyViewFn((children) => + children.tooltip.propertyView({ + label: cellTooltipLabel, + tooltip: ColumnValueTooltip, + }) + ) + .build(), + ["currentCell", "currentRow", "currentIndex"] as const +); + +// @ts-ignore +export class CellTooltipComp extends CellTooltipTempComp { + override getPropertyView() { + return controlItem({ filterText: cellTooltipLabel }, super.getPropertyView()); + } +} + +// fixme, should be infer from RowColorComp, but withContext type incorrect +export type CellTooltipViewType = (param: { + currentRow: any; + currentCell: JSONValue | undefined; //number | string; +}) => string; + + export const columnChildrenMap = { // column title title: StringControl, titleTooltip: StringControl, showTitle: withDefault(BoolControl, true), + cellTooltip: CellTooltipComp, // a custom column or a data column isCustom: valueComp(false), // If it is a data column, it must be the name of the column and cannot be duplicated as a react key @@ -158,6 +187,16 @@ export class ColumnComp extends ColumnInitComp { }) ) ); + comp = comp.setChild( + "cellTooltip", + comp.children.cellTooltip.reduce( + CellTooltipComp.changeContextDataAction({ + currentCell: undefined, + currentRow: {}, + currentIndex: 0, + }) + ) + ); } if (action.type === CompActionTypes.CHANGE_VALUE) { const title = comp.children.title.unevaledValue; @@ -211,6 +250,7 @@ export class ColumnComp extends ColumnInitComp { {this.children.titleTooltip.propertyView({ label: trans("table.columnTitleTooltip"), })} + {this.children.cellTooltip.getPropertyView()} { + const row = _.omit(record, OB_ROW_ORI_INDEX); return column .render( { currentCell: value, - currentRow: _.omit(record, OB_ROW_ORI_INDEX), + currentRow: row, currentIndex: index, currentOriginalIndex: tryToNumber(record[OB_ROW_ORI_INDEX]), initialColumns, @@ -384,6 +385,11 @@ export function columnsToAntdFormat( candidateTags: tags, candidateStatus: status, textOverflow: column.textOverflow, + cellTooltip: column.cellTooltip({ + currentCell: value, + currentRow: row, + currentIndex: index, + }), onTableEvent, }); }, diff --git a/client/packages/lowcoder/src/i18n/locales/de.ts b/client/packages/lowcoder/src/i18n/locales/de.ts index 041abe2b0..9c4538827 100644 --- a/client/packages/lowcoder/src/i18n/locales/de.ts +++ b/client/packages/lowcoder/src/i18n/locales/de.ts @@ -1415,12 +1415,12 @@ export const de: typeof en = { "action": "Aktion", "columnValue": "Spalte Wert", "columnValueTooltip": "\\'{{currentCell}}\\': Aktuelle Zelldaten\n \\'{{currentRow}}\\': Aktuelle Zeilendaten\n \\'{{currentIndex}}\\': Aktueller Datenindex (beginnend bei 0)\n Beispiel: \\'{{currentCell * 5}}\\' Show 5 Times the Original Value Data.", - "columnTooltip": "Column Tooltip", + "columnTooltip": "Spalten-Tooltip", "imageSrc": "Bildquelle", "imageSize": "Bildgröße", "columnTitle": "Titel anzeigen", - "columnTitleTooltip": "Title Tooltip", - "showTitle": "Show Title", + "columnTitleTooltip": "Titel-Tooltip", + "showTitle": "Titel anzeigen", "showTitleTooltip": "Spaltentitel im Tabellenkopf ein-/ausblenden", "sortable": "Sortierbar", "align": "Ausrichtung", diff --git a/client/packages/lowcoder/src/i18n/locales/pt.ts b/client/packages/lowcoder/src/i18n/locales/pt.ts index c872da7bc..f8f6c41a9 100644 --- a/client/packages/lowcoder/src/i18n/locales/pt.ts +++ b/client/packages/lowcoder/src/i18n/locales/pt.ts @@ -1937,11 +1937,11 @@ export const pt: typeof en = { "action": "Ação", "columnValue": "Valor da Coluna", "columnValueTooltip": "'{{currentCell}}': Dados da Célula Atual\n '{{currentRow}}': Dados da Linha Atual\n '{{currentIndex}}': Índice de Dados Atual (Começando de 0)\n Exemplo: '{{currentCell * 5}}' Mostra 5 Vezes o Valor Original dos Dados.", - "columnTooltip": "Column Tooltip", + "columnTooltip": "Dica de coluna", "imageSrc": "Fonte da Imagem", "imageSize": "Tamanho da Imagem", "columnTitle": "Título", - "columnTitleTooltip": "Title Tooltip", + "columnTitleTooltip": "Dica de título", "showTitle": "Mostrar Título", "showTitleTooltip": "Mostrar/Ocultar título da coluna no cabeçalho da tabela", "sortable": "Classificável", diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts index f3357b78f..cd54a777a 100644 --- a/client/packages/lowcoder/src/i18n/locales/zh.ts +++ b/client/packages/lowcoder/src/i18n/locales/zh.ts @@ -1437,11 +1437,11 @@ export const zh: typeof en = { action: "操作", columnValue: "列值", columnValueTooltip: "'{{currentCell}}': 当前单元格数据\n" + "'{{currentRow}}': 当前行数据\n" + "'{{currentIndex}}': 当前数据索引(从0开始)\n" + "示例: '{{currentCell * 5}}' 显示原始值数据的5倍.", - columnTooltip: "Column Tooltip", + columnTooltip: "列工具提示", imageSrc: "图片链接", imageSize: "图片尺寸", columnTitle: "标题", - columnTitleTooltip: "Title Tooltip", + columnTitleTooltip: "标题工具提示", dataMapping: "数据映射", showTitle: "显示标题", showTitleTooltip: "显示/隐藏表标题中的列标题",