Skip to content

Commit fe1deda

Browse files
kamal-qureshikamal-qureshi
committed
Merge branch 'dev' into doubleClick_event_component
2 parents 5c18bfc + 6923e1b commit fe1deda

File tree

5 files changed

+86
-78
lines changed

5 files changed

+86
-78
lines changed

‎client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinkComp.tsx

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import {
44
ColumnTypeCompBuilder,
55
ColumnTypeViewFn,
66
} from "comps/comps/tableComp/column/columnTypeCompBuilder";
7-
import { ActionSelectorControlInContext } from "comps/controls/actionSelector/actionSelectorControl";
87
import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
98
import { trans } from "i18n";
109
import { disabledPropertyView } from "comps/utils/propertyUtils";
@@ -13,15 +12,16 @@ import { styleControl } from "comps/controls/styleControl";
1312
import { TableColumnLinkStyle } from "comps/controls/styleControlConstants";
1413
import { clickEvent, eventHandlerControl, doubleClickEvent } from "comps/controls/eventHandlerControl";
1514
import { ComponentClickHandler } from "@lowcoder-ee/comps/utils/componentClickHandler";
15+
import { migrateOldData } from "@lowcoder-ee/comps/generators/simpleGenerators";
16+
import { fixOldActionData } from "comps/comps/tableComp/column/simpleColumnTypeComps";
1617

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

1920
const LinkEventOptions = [clickEvent, doubleClickEvent] as const;
2021

2122
const childrenMap = {
2223
text: StringControl,
23-
onClick: ActionSelectorControlInContext,
24-
onEvent: eventHandlerControl(LinkEventOptions),
24+
onClick: eventHandlerControl(LinkEventOptions),
2525
disabled: BoolCodeControl,
2626
style: styleControl(TableColumnLinkStyle),
2727
};
@@ -39,7 +39,7 @@ const StyledLink = styled.a<{ $disabled: boolean }>`
3939
`;
4040

4141
// Memoized link component
42-
export const ColumnLink = React.memo(({ disabled, label, onClick, onEvent }: { disabled: boolean; label: string; onClick?: () => void; onEvent?: (eventName: string) => void }) => {
42+
export const ColumnLink = React.memo(({ disabled, label, onClick }: { disabled: boolean; label: string; onClick?: (eventName: string) => void }) => {
4343
const handleClick = useCallback(() => {
4444
if (!disabled && onEvent) {
4545
ComponentClickHandler({onEvent})();
@@ -49,6 +49,9 @@ export const ColumnLink = React.memo(({ disabled, label, onClick, onEvent }: { d
4949
// onClick?.();
5050
// // onEvent?.("click");
5151
// }, [disabled, onClick, onEvent]);
52+
// if (disabled) return;
53+
// onClick?.("click");
54+
// }, [disabled, onClick]);
5255

5356
return (
5457
<StyledLink
@@ -110,7 +113,7 @@ LinkEdit.displayName = 'LinkEdit';
110113

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

113-
export const LinkComp = (function () {
116+
const LinkCompTmp = (function () {
114117
return new ColumnTypeCompBuilder(
115118
childrenMap,
116119
(props, dispatch) => {
@@ -134,11 +137,7 @@ export const LinkComp = (function () {
134137
tooltip: ColumnValueTooltip,
135138
})}
136139
{disabledPropertyView(children)}
137-
{/* {children.onEvent.propertyView()} */}
138-
{children.onClick.propertyView({
139-
label: trans("table.action"),
140-
placement: "table",
141-
})}
140+
{children.onClick.propertyView()}
142141
</>
143142
))
144143
.setStylePropertyViewFn((children) => (
@@ -148,3 +147,5 @@ export const LinkComp = (function () {
148147
))
149148
.build();
150149
})();
150+
151+
export const LinkComp = migrateOldData(LinkCompTmp, fixOldActionData);

‎client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinksComp.tsx

Lines changed: 35 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, { useState, useRef, useEffect, useCallback, useMemo } from "react";
22
import { default as Menu } from "antd/es/menu";
33
import { ColumnTypeCompBuilder } from "comps/comps/tableComp/column/columnTypeCompBuilder";
4-
import { ActionSelectorControlInContext } from "comps/controls/actionSelector/actionSelectorControl";
54
import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
65
import { manualOptionsControl } from "comps/controls/optionsControl";
76
import { MultiCompBuilder } from "comps/generators";
@@ -12,6 +11,8 @@ import { ColumnLink } from "comps/comps/tableComp/column/columnTypeComps/columnL
1211
import { LightActiveTextColor, PrimaryColor } from "constants/style";
1312
import { clickEvent, eventHandlerControl, doubleClickEvent } from "comps/controls/eventHandlerControl";
1413
import { ComponentClickHandler } from "@lowcoder-ee/comps/utils/componentClickHandler";
14+
import { migrateOldData } from "@lowcoder-ee/comps/generators/simpleGenerators";
15+
import { fixOldActionData } from "comps/comps/tableComp/column/simpleColumnTypeComps";
1516

1617
const MenuLinkWrapper = styled.div`
1718
> a {
@@ -39,16 +40,35 @@ const MenuWrapper = styled.div`
3940
}
4041
`;
4142

42-
const LinksEventOptions = [clickEvent, doubleClickEvent] as const;
43+
const LinkEventOptions = [clickEvent, doubleClickEvent] as const;
4344

44-
// Update OptionItem to include event handlers
45-
const OptionItem = new MultiCompBuilder(
45+
// Memoized menu item component
46+
const MenuItem = React.memo(({ option, index }: { option: any; index: number }) => {
47+
const handleClick = useCallback(() => {
48+
if (!option.disabled && option.onClick) {
49+
option.onClick("click");
50+
}
51+
}, [option.disabled, option.onClick]);
52+
53+
return (
54+
<MenuLinkWrapper>
55+
<ColumnLink
56+
disabled={option.disabled}
57+
label={option.label}
58+
onClick={handleClick}
59+
/>
60+
</MenuLinkWrapper>
61+
);
62+
});
63+
64+
MenuItem.displayName = 'MenuItem';
65+
66+
const OptionItemTmp = new MultiCompBuilder(
4667
{
4768
label: StringControl,
48-
onClick: ActionSelectorControlInContext,
69+
onClick: eventHandlerControl(LinkEventOptions),
4970
hidden: BoolCodeControl,
5071
disabled: BoolCodeControl,
51-
onEvent: eventHandlerControl(LinksEventOptions),
5272
},
5373
(props) => {
5474
return props;
@@ -58,56 +78,18 @@ const OptionItem = new MultiCompBuilder(
5878
return (
5979
<>
6080
{children.label.propertyView({ label: trans("label") })}
61-
{children.onClick.propertyView({
62-
label: trans("table.action"),
63-
placement: "table",
64-
})}
6581
{hiddenPropertyView(children)}
6682
{disabledPropertyView(children)}
67-
{/* {children.onEvent.propertyView()} */}
83+
{children.onClick.propertyView()}
6884
</>
6985
);
7086
})
7187
.build();
7288

73-
// Memoized menu item component
74-
const MenuItem = React.memo(({ option, index, onMainEvent }: { option: any; index: number; onMainEvent?: (eventName: string) => void }) => {
75-
const handleClick = useCallback(() => {
76-
if (!option.disabled) {
77-
// Handle both option's event and main event through ComponentClickHandler
78-
const combinedHandler = (event: "click" | "doubleClick") => {
79-
option.onEvent?.(event);
80-
onMainEvent?.(event);
81-
};
82-
ComponentClickHandler({onEvent: combinedHandler})();
83-
// if (option.onClick) {
84-
// option.onClick();
85-
// }
86-
// // if (option.onEvent) {
87-
// // option.onEvent("click");
88-
// // }
89-
// // Trigger the main component's event handler
90-
// if (onMainEvent) {
91-
// onMainEvent("click");
92-
// }
93-
}
94-
}, [option.disabled, option.onEvent, onMainEvent]);
95-
96-
return (
97-
<MenuLinkWrapper>
98-
<ColumnLink
99-
disabled={option.disabled}
100-
label={option.label}
101-
onEvent={handleClick}
102-
/>
103-
</MenuLinkWrapper>
104-
);
105-
});
106-
107-
MenuItem.displayName = 'MenuItem';
89+
const OptionItem = migrateOldData(OptionItemTmp, fixOldActionData);
10890

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

11395
// Cleanup on unmount
@@ -122,9 +104,9 @@ const LinksMenu = React.memo(({ options, onEvent }: { options: any[]; onEvent?:
122104
.filter((o) => !o.hidden)
123105
.map((option, index) => ({
124106
key: index,
125-
label: <MenuItem option={option} index={index} onMainEvent={onEvent} />
107+
label: <MenuItem option={option} index={index} />
126108
})),
127-
[options, onEvent]
109+
[options]
128110
);
129111

130112
return (
@@ -136,17 +118,16 @@ const LinksMenu = React.memo(({ options, onEvent }: { options: any[]; onEvent?:
136118

137119
LinksMenu.displayName = 'LinksMenu';
138120

139-
export const ColumnLinksComp = (function () {
121+
const ColumnLinksCompTmp = (function () {
140122
const childrenMap = {
141123
options: manualOptionsControl(OptionItem, {
142124
initOptions: [{ label: trans("table.option1") }],
143125
}),
144-
onEvent: eventHandlerControl(LinksEventOptions),
145126
};
146127
return new ColumnTypeCompBuilder(
147128
childrenMap,
148129
(props) => {
149-
return <LinksMenu options={props.options} onEvent={props.onEvent} />;
130+
return <LinksMenu options={props.options} />;
150131
},
151132
() => ""
152133
)
@@ -156,8 +137,9 @@ export const ColumnLinksComp = (function () {
156137
newOptionLabel: trans("table.option"),
157138
title: trans("table.optionList"),
158139
})}
159-
{children.onEvent.propertyView()}
160140
</>
161141
))
162142
.build();
163143
})();
144+
145+
export const ColumnLinksComp = migrateOldData(ColumnLinksCompTmp, fixOldActionData);

‎client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,21 @@ import { RecordConstructorToComp } from "lowcoder-core";
1515
import { ToViewReturn } from "@lowcoder-ee/comps/generators/multi";
1616
import { clickEvent, eventHandlerControl, doubleClickEvent } from "comps/controls/eventHandlerControl";
1717
import { ComponentClickHandler } from "@lowcoder-ee/comps/utils/componentClickHandler";
18+
import { migrateOldData } from "@lowcoder-ee/comps/generators/simpleGenerators";
1819

20+
export const fixOldActionData = (oldData: any) => {
21+
if (!oldData) return oldData;
22+
if (Boolean(oldData.onClick)) {
23+
return {
24+
...oldData,
25+
onClick: [{
26+
name: "click",
27+
handler: oldData.onClick,
28+
}],
29+
};
30+
}
31+
return oldData;
32+
}
1933
export const ColumnValueTooltip = trans("table.columnValueTooltip");
2034

2135
export const ButtonTypeOptions = [
@@ -38,8 +52,7 @@ const ButtonEventOptions = [clickEvent, doubleClickEvent] as const;
3852
const childrenMap = {
3953
text: StringControl,
4054
buttonType: dropdownControl(ButtonTypeOptions, "primary"),
41-
onEvent: eventHandlerControl(ButtonEventOptions),
42-
onClick: ActionSelectorControlInContext,
55+
onClick: eventHandlerControl(ButtonEventOptions),
4356
loading: BoolCodeControl,
4457
disabled: BoolCodeControl,
4558
prefixIcon: IconControl,
@@ -59,6 +72,8 @@ const ButtonStyled = React.memo(({ props }: { props: ToViewReturn<RecordConstruc
5972
// props.onClick?.();
6073
// // props.onEvent?.("click");
6174
// }, [props.onClick, props.onEvent]);
75+
// props.onClick?.("click");
76+
// }, [props.onClick]);
6277

6378
const buttonStyle = useMemo(() => ({
6479
margin: 0,
@@ -84,7 +99,7 @@ const ButtonStyled = React.memo(({ props }: { props: ToViewReturn<RecordConstruc
8499
);
85100
});
86101

87-
export const ButtonComp = (function () {
102+
const ButtonCompTmp = (function () {
88103
return new ColumnTypeCompBuilder(
89104
childrenMap,
90105
(props) => <ButtonStyled props={props} />,
@@ -108,12 +123,10 @@ export const ButtonComp = (function () {
108123
})}
109124
{loadingPropertyView(children)}
110125
{disabledPropertyView(children)}
111-
{/* {children.onEvent.propertyView()} */}
112-
{children.onClick.propertyView({
113-
label: trans("table.action"),
114-
placement: "table",
115-
})}
126+
{children.onClick.propertyView()}
116127
</>
117128
))
118129
.build();
119130
})();
131+
132+
export const ButtonComp = migrateOldData(ButtonCompTmp, fixOldActionData);

‎client/packages/lowcoder/src/comps/hooks/localStorageComp.ts

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { isEmpty } from "lodash";
33
import { simpleMultiComp, stateComp, withViewFn } from "../generators";
44
import { NameConfig, withExposingConfigs } from "../generators/withExposing";
55
import { JSONObject } from "../../util/jsonTypes";
6-
import { useEffect } from "react";
6+
import { useEffect, useMemo, useCallback } from "react";
77
import isEqual from "fast-deep-equal";
88
import { trans } from "i18n";
99
import log from "loglevel";
@@ -13,7 +13,22 @@ const APP_STORE_NAMESPACE = "lowcoder_app_local_storage";
1313
const LocalStorageCompBase = withViewFn(
1414
simpleMultiComp({ values: stateComp<JSONObject>({}) }),
1515
(comp) => {
16-
// add custom event listener to update values reactively
16+
const originStore = localStorage.getItem(APP_STORE_NAMESPACE) || "{}";
17+
18+
let parseStore = {};
19+
try {
20+
parseStore = JSON.parse(originStore);
21+
} catch (e) {
22+
log.error("application local storage invalid");
23+
}
24+
25+
useEffect(() => {
26+
const value = comp.children.values.value;
27+
if (!isEqual(value, parseStore)) {
28+
comp.children.values.dispatchChangeValueAction(parseStore);
29+
}
30+
}, [parseStore]);
31+
1732
useEffect(() => {
1833
const handler = () => {
1934
try {
@@ -28,9 +43,6 @@ const LocalStorageCompBase = withViewFn(
2843
// Add listener on mount
2944
window.addEventListener("lowcoder-localstorage-updated", handler);
3045

31-
// Run once on mount to initialize
32-
handler();
33-
3446
return () => {
3547
window.removeEventListener("lowcoder-localstorage-updated", handler);
3648
};

‎client/packages/lowcoder/src/pages/editor/editorView.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -498,8 +498,6 @@ function EditorView(props: EditorViewProps) {
498498

499499
return () => {
500500
window.removeEventListener(eventType, updateSize);
501-
savePanelStatus(panelStatus);
502-
saveEditorModeStatus(editorModeStatus);
503501
};
504502
}, [panelStatus, editorModeStatus]);
505503

@@ -553,6 +551,8 @@ function EditorView(props: EditorViewProps) {
553551
setShowShortcutList(false);
554552
setMenuKey(SiderKey.State);
555553
setHeight(undefined);
554+
savePanelStatus(panelStatus);
555+
saveEditorModeStatus(editorModeStatus);
556556
};
557557
}, []);
558558

0 commit comments

Comments
 (0)