Skip to content

Table column separator and column tooltip #1083

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 2, 2024
Merged

Table column separator and column tooltip #1083

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e76fd45
added column separator option for downloaded table's csv
raheeliftikhar5 Aug 1, 2024
2ef23dd
added column tooltip in table
raheeliftikhar5 Aug 1, 2024
4e21471
removed tooltip from column types and placed in abstract level for al…
raheeliftikhar5 Aug 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
added column tooltip in table
  • Loading branch information
@raheeliftikhar5
raheeliftikhar5 committed Aug 1, 2024
commit 2ef23dd017a4ed754c9c36059d19bca15d7e2736
3 changes: 2 additions & 1 deletion client/packages/lowcoder/src/components/table/EditableCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -142,6 +142,7 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
}}
onDoubleClick={enterEditFn}
>
{normalView}
</div>
)}
</ColumnTypeView>
Expand Down
12 changes: 10 additions & 2 deletions ...t/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/ColumnNumberComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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"),
Expand Down
27 changes: 18 additions & 9 deletions .../packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnBooleanComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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)}
Expand All @@ -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;
Expand All @@ -50,6 +52,7 @@ const falseValuesOptions = [

const childrenMap = {
text: BoolCodeControl,
tooltip: StringControl,
falseValues: dropdownControl(falseValuesOptions, ""),
iconTrue: IconControl,
iconFalse: IconControl,
Expand Down Expand Up @@ -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 />;
Expand All @@ -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,
Expand Down
13 changes: 12 additions & 1 deletion client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down Expand Up @@ -136,6 +137,7 @@ export function formatDate(date: string, format: string) {

const childrenMap = {
text: StringControl,
tooltip: StringControl,
format: withDefault(StringControl, DATE_FORMAT),
};

Expand Down Expand Up @@ -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
Expand All @@ -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 })}
</>
))
Expand Down
13 changes: 12 additions & 1 deletion ...packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateTimeComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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),
};

Expand All @@ -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
Expand All @@ -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 })}
</>
))
Expand Down
4 changes: 3 additions & 1 deletion ...packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDropdownComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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")
}}
/>
);

Expand Down
12 changes: 11 additions & 1 deletion client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnImgComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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
Expand All @@ -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"),
})}
Expand Down
14 changes: 11 additions & 3 deletions client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinkComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand All @@ -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>
);

Expand All @@ -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
Expand All @@ -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"),
Expand Down
16 changes: 12 additions & 4 deletions ...nt/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinksComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -67,6 +68,7 @@ export const ColumnLinksComp = (function () {
options: manualOptionsControl(OptionItem, {
initOptions: [{ label: trans("table.option1") }],
}),
tooltip: StringControl,
};
return new ColumnTypeCompBuilder(
childrenMap,
Expand All @@ -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"),
Expand Down
14 changes: 11 additions & 3 deletions ...packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnMarkdownComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { default as Input } from "antd/es/input";
import Tooltip from "antd/es/tooltip";
import {
ColumnTypeCompBuilder,
ColumnTypeViewFn,
Expand All @@ -23,6 +24,7 @@ const Wrapper = styled.div`

const childrenMap = {
text: StringControl,
tooltip: StringControl,
};

const getBaseValue: ColumnTypeViewFn<typeof childrenMap, string, string> = (props) => props.text;
Expand All @@ -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,
Expand All @@ -60,6 +64,10 @@ export const ColumnMarkdownComp = (function () {
label: trans("table.columnValue"),
tooltip: ColumnValueTooltip,
})}
{children.tooltip.propertyView({
label: trans("table.columnTooltip"),
tooltip: ColumnValueTooltip,
})}
</>
))
.build();
Expand Down
Loading
Loading