added column tooltip in table

lowcoder-org · FalkWolsky · Aug 6, 2024 · Jul 25, 2024 · Jul 25, 2024 · Jul 25, 2024
commit 2ef23dd017a4ed754c9c36059d19bca15d7e2736
diff --git 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<T extends JSONValue>(props: EditableCellProps<T>) {
       textOverflow={props.textOverflow}
     >
       {status === "toSave" && !isEditing && <EditableChip />}
-      {normalView}
+      {!editable && normalView}
       {/* overlay on normal view to handle double click for editing */}
       {editable && (
         <div
@@ -142,6 +142,7 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
           }}
           onDoubleClick={enterEditFn}
         >
+          {normalView}
         </div>
       )}
     </ColumnTypeView>

diff --git a/...t/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/ColumnNumberComp.tsx b/...t/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) && (
+        <Tooltip title={props.tooltip}>
+          {hasIcon(props.prefixIcon) && (
             <span>{props.prefixIcon}</span>
           )}
           <span>{props.prefix + formattedValue + props.suffix}</span>
           {hasIcon(props.suffixIcon) && (
             <span>{props.suffixIcon}</span>
-          )} </>
+          )}
+        </Tooltip>
       );
     },
     (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/.../packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnBooleanComp.tsx b/.../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 (
-          <IconWrapper $style={style} $ifChecked={value}>
-            {value === true ? ( hasIcon(props.iconTrue) ? props.iconTrue : <TableCheckedIcon /> ) 
-            : value === false ? ( hasIcon(props.iconFalse) ? props.iconFalse  : ( props.falseValues === "x" ? <TableUnCheckedIcon /> : props.falseValues )
-            ) : ( hasIcon(props.iconNull) ? props.iconNull : "No Value"
-            )}
-          </IconWrapper>
+          <Tooltip title={props.tooltip}>
+            <IconWrapper $style={style} $ifChecked={value}>
+              {value === true ? ( hasIcon(props.iconTrue) ? props.iconTrue : <TableCheckedIcon /> ) 
+              : value === false ? ( hasIcon(props.iconFalse) ? props.iconFalse  : ( props.falseValues === "x" ? <TableUnCheckedIcon /> : props.falseValues )
+              ) : ( hasIcon(props.iconNull) ? props.iconNull : "No Value"
+              )}
+            </IconWrapper>
+          </Tooltip>
         );
       };
       return <CheckBoxComp />;
@@ -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
@@ -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 (
+        <Tooltip title={props.tooltip}>
+          {view}
+        </Tooltip>
+      );
     },
     (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/...packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateTimeComp.tsx b/...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 (
+        <Tooltip title={props.tooltip}>
+          {view}
+        </Tooltip>
+      )
     },
     (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/...packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDropdownComp.tsx b/...packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDropdownComp.tsx
@@ -47,7 +47,9 @@ export const ColumnDropdownComp = (function () {
       const menu = (
         <Menu
           items={items}
-          onClick={({ key }) => 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
@@ -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<typeof childrenMap, string, string> = (props) => props.src;
@@ -22,7 +24,11 @@ export const ImageComp = (function () {
     childrenMap,
     (props, dispatch) => {
       const value = props.changeValue ?? getBaseValue(props, dispatch);
-      return <TacoImage style={{ pointerEvents: "auto" }} src={value} width={props.size} />;
+      return (
+        <Tooltip title={props.tooltip}>
+          <TacoImage style={{ pointerEvents: "auto" }} src={value} width={props.size} />;
+        </Tooltip>
+      );
     },
     (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
@@ -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 }) => (
   <StyledLink
     $disabled={props.disabled}
     onClick={() => {
       !props.disabled && props.onClick && props.onClick();
     }}
   >
-    {props.label}
+    <Tooltip title={props.tooltip}>
+      {props.label}
+    </Tooltip>
   </StyledLink>
 );
 
@@ -50,7 +54,7 @@ export const LinkComp = (function () {
     childrenMap,
     (props, dispatch) => {
       const value = props.changeValue ?? getBaseValue(props, dispatch);
-      return <ColumnLink disabled={props.disabled} label={value} onClick={props.onClick} />;
+      return <ColumnLink disabled={props.disabled} label={value} tooltip={props.tooltip} onClick={props.onClick} />;
     },
     (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/...nt/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinksComp.tsx b/...nt/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 (
-        <MenuWrapper>
-          <Menu mode="horizontal" items={menuItems}  />
-        </MenuWrapper>
+        <Tooltip title={props.tooltip}>
+          <MenuWrapper>
+            <Menu mode="horizontal" items={menuItems}  />
+          </MenuWrapper>
+        </Tooltip>
       )
     },
     () => ""
   )
     .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/...packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnMarkdownComp.tsx b/...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<typeof childrenMap, string, string> = (props) => props.text;
@@ -33,9 +35,11 @@ export const ColumnMarkdownComp = (function () {
     (props, dispatch) => {
       const value = props.changeValue ?? getBaseValue(props, dispatch);
       return (
-        <Wrapper>
-          <TacoMarkDown>{value}</TacoMarkDown>
-        </Wrapper>
+        <Tooltip title={props.tooltip}>
+          <Wrapper>
+            <TacoMarkDown>{value}</TacoMarkDown>
+          </Wrapper>
+        </Tooltip>
       );
     },
     (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();