Skip to content

[Fix]: backward compatibility for button, link and links column types #1769

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 9 commits into from
Jun 14, 2025
Merged

[Fix]: backward compatibility for button, link and links column types #1769

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
2798f3f
revert back
iamfaran Jun 13, 2025
a87e00b
[Fix]: Add backward compatibility for button, link and links
iamfaran Jun 13, 2025
dfe87b3
Merge branch 'dev' of github.com:lowcoder-org/lowcoder into fix/event…
iamfaran Jun 13, 2025
e361299
fix simple column type (btn)
iamfaran Jun 13, 2025
3deda9b
Merge branch 'dev' of github.com:lowcoder-org/lowcoder into fix/event…
iamfaran Jun 13, 2025
4a2f13b
revert link column type
iamfaran Jun 13, 2025
28d3743
add backward compatibility for link type
iamfaran Jun 13, 2025
304c2c2
revert links type
iamfaran Jun 13, 2025
62285ce
add backward compatibility for links type
iamfaran Jun 13, 2025
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
23 changes: 10 additions & 13 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 @@ -4,23 +4,23 @@ import {
ColumnTypeCompBuilder,
ColumnTypeViewFn,
} from "comps/comps/tableComp/column/columnTypeCompBuilder";
import { ActionSelectorControlInContext } from "comps/controls/actionSelector/actionSelectorControl";
import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
import { trans } from "i18n";
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 { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
import { migrateOldData } from "@lowcoder-ee/comps/generators/simpleGenerators";
import { fixOldActionData } from "comps/comps/tableComp/column/simpleColumnTypeComps";

export const ColumnValueTooltip = trans("table.columnValueTooltip");

const LinkEventOptions = [clickEvent] as const;

const childrenMap = {
text: StringControl,
onClick: ActionSelectorControlInContext,
onEvent: eventHandlerControl(LinkEventOptions),
onClick: eventHandlerControl(LinkEventOptions),
disabled: BoolCodeControl,
style: styleControl(TableColumnLinkStyle),
};
Expand All @@ -38,12 +38,11 @@ const StyledLink = styled.a<{ $disabled: boolean }>`
`;

// Memoized link component
export const ColumnLink = React.memo(({ disabled, label, onClick, onEvent }: { disabled: boolean; label: string; onClick?: () => void; onEvent?: (eventName: string) => void }) => {
export const ColumnLink = React.memo(({ disabled, label, onClick }: { disabled: boolean; label: string; onClick?: (eventName: string) => void }) => {
const handleClick = useCallback(() => {
if (disabled) return;
onClick?.();
// onEvent?.("click");
}, [disabled, onClick, onEvent]);
onClick?.("click");
}, [disabled, onClick]);

return (
<StyledLink
Expand Down Expand Up @@ -105,7 +104,7 @@ LinkEdit.displayName = 'LinkEdit';

const getBaseValue: ColumnTypeViewFn<typeof childrenMap, string, string> = (props) => props.text;

export const LinkComp = (function () {
const LinkCompTmp = (function () {
return new ColumnTypeCompBuilder(
childrenMap,
(props, dispatch) => {
Expand All @@ -129,11 +128,7 @@ export const LinkComp = (function () {
tooltip: ColumnValueTooltip,
})}
{disabledPropertyView(children)}
{/* {children.onEvent.propertyView()} */}
{children.onClick.propertyView({
label: trans("table.action"),
placement: "table",
})}
{children.onClick.propertyView()}
</>
))
.setStylePropertyViewFn((children) => (
Expand All @@ -143,3 +138,5 @@ export const LinkComp = (function () {
))
.build();
})();

export const LinkComp = migrateOldData(LinkCompTmp, fixOldActionData);
82 changes: 35 additions & 47 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
@@ -1,7 +1,6 @@
import React, { useState, useRef, useEffect, useCallback, useMemo } from "react";
import { default as Menu } from "antd/es/menu";
import { ColumnTypeCompBuilder } from "comps/comps/tableComp/column/columnTypeCompBuilder";
import { ActionSelectorControlInContext } from "comps/controls/actionSelector/actionSelectorControl";
import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
import { manualOptionsControl } from "comps/controls/optionsControl";
import { MultiCompBuilder } from "comps/generators";
Expand All @@ -11,6 +10,8 @@ import styled from "styled-components";
import { ColumnLink } from "comps/comps/tableComp/column/columnTypeComps/columnLinkComp";
import { LightActiveTextColor, PrimaryColor } from "constants/style";
import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
import { migrateOldData } from "@lowcoder-ee/comps/generators/simpleGenerators";
import { fixOldActionData } from "comps/comps/tableComp/column/simpleColumnTypeComps";

const MenuLinkWrapper = styled.div`
> a {
Expand Down Expand Up @@ -38,16 +39,35 @@ const MenuWrapper = styled.div`
}
`;

const LinksEventOptions = [clickEvent] as const;
const LinkEventOptions = [clickEvent] as const;

// Update OptionItem to include event handlers
const OptionItem = new MultiCompBuilder(
// Memoized menu item component
const MenuItem = React.memo(({ option, index }: { option: any; index: number }) => {
const handleClick = useCallback(() => {
if (!option.disabled && option.onClick) {
option.onClick("click");
}
}, [option.disabled, option.onClick]);

return (
<MenuLinkWrapper>
<ColumnLink
disabled={option.disabled}
label={option.label}
onClick={handleClick}
/>
</MenuLinkWrapper>
);
});

MenuItem.displayName = 'MenuItem';

const OptionItemTmp = new MultiCompBuilder(
{
label: StringControl,
onClick: ActionSelectorControlInContext,
onClick: eventHandlerControl(LinkEventOptions),
hidden: BoolCodeControl,
disabled: BoolCodeControl,
onEvent: eventHandlerControl(LinksEventOptions),
},
(props) => {
return props;
Expand All @@ -57,50 +77,18 @@ const OptionItem = new MultiCompBuilder(
return (
<>
{children.label.propertyView({ label: trans("label") })}
{children.onClick.propertyView({
label: trans("table.action"),
placement: "table",
})}
{hiddenPropertyView(children)}
{disabledPropertyView(children)}
{/* {children.onEvent.propertyView()} */}
{children.onClick.propertyView()}
</>
);
})
.build();

// Memoized menu item component
const MenuItem = React.memo(({ option, index, onMainEvent }: { option: any; index: number; onMainEvent?: (eventName: string) => void }) => {
const handleClick = useCallback(() => {
if (!option.disabled) {
if (option.onClick) {
option.onClick();
}
// if (option.onEvent) {
// option.onEvent("click");
// }
// Trigger the main component's event handler
if (onMainEvent) {
onMainEvent("click");
}
}
}, [option.disabled, option.onClick, option.onEvent, onMainEvent]);

return (
<MenuLinkWrapper>
<ColumnLink
disabled={option.disabled}
label={option.label}
onEvent={handleClick}
/>
</MenuLinkWrapper>
);
});

MenuItem.displayName = 'MenuItem';
const OptionItem = migrateOldData(OptionItemTmp, fixOldActionData);

// Memoized menu component
const LinksMenu = React.memo(({ options, onEvent }: { options: any[]; onEvent?: (eventName: string) => void }) => {
const LinksMenu = React.memo(({ options }: { options: any[] }) => {
const mountedRef = useRef(true);

// Cleanup on unmount
Expand All @@ -115,9 +103,9 @@ const LinksMenu = React.memo(({ options, onEvent }: { options: any[]; onEvent?:
.filter((o) => !o.hidden)
.map((option, index) => ({
key: index,
label: <MenuItem option={option} index={index} onMainEvent={onEvent} />
label: <MenuItem option={option} index={index} />
})),
[options, onEvent]
[options]
);

return (
Expand All @@ -129,17 +117,16 @@ const LinksMenu = React.memo(({ options, onEvent }: { options: any[]; onEvent?:

LinksMenu.displayName = 'LinksMenu';

export const ColumnLinksComp = (function () {
const ColumnLinksCompTmp = (function () {
const childrenMap = {
options: manualOptionsControl(OptionItem, {
initOptions: [{ label: trans("table.option1") }],
}),
onEvent: eventHandlerControl(LinksEventOptions),
};
return new ColumnTypeCompBuilder(
childrenMap,
(props) => {
return <LinksMenu options={props.options} onEvent={props.onEvent} />;
return <LinksMenu options={props.options} />;
},
() => ""
)
Expand All @@ -149,8 +136,9 @@ export const ColumnLinksComp = (function () {
newOptionLabel: trans("table.option"),
title: trans("table.optionList"),
})}
{children.onEvent.propertyView()}
</>
))
.build();
})();

export const ColumnLinksComp = migrateOldData(ColumnLinksCompTmp, fixOldActionData);
Loading