Skip to content

Commit 840678f

Browse files
freddysundownerfreddysundowner
committed
Merge branch 'dev' of https://github.com/lowcoder-org/lowcoder into feat-ShapeComp
2 parents 10d27dc + b9f936d commit 840678f

File tree

15 files changed

+356
-136
lines changed

15 files changed

+356
-136
lines changed

‎client/packages/lowcoder-comps/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "lowcoder-comps",
3-
"version": "0.0.29",
3+
"version": "0.0.30",
44
"type": "module",
55
"license": "MIT",
66
"dependencies": {

‎client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ let CalendarBasicComp = (function () {
9797
resources: any;
9898
resourceName : string
9999
onEvent?: any;
100-
onEventDrop?: any;
100+
onDropEvent?: any;
101101
editable?: boolean;
102102
showEventTime?: boolean;
103103
showWeekends?: boolean;
@@ -248,16 +248,16 @@ let CalendarBasicComp = (function () {
248248
return (
249249
<Event
250250
className={`event ${sizeClass} ${stateClass}`}
251-
bg={eventInfo.backgroundColor}
251+
$bg={eventInfo.backgroundColor}
252252
theme={theme?.theme}
253-
isList={isList}
254-
allDay={showAllDay}
253+
$isList={isList}
254+
$allDay={Boolean(showAllDay)}
255255
$style={props.style}
256256
>
257257
<div className="event-time">{eventInfo.timeText}</div>
258258
<div className="event-title">{eventInfo.event.title}</div>
259259
<Remove
260-
isList={isList}
260+
$isList={isList}
261261
className="event-remove"
262262
onClick={(e) => {
263263
e.stopPropagation();
@@ -526,7 +526,7 @@ let CalendarBasicComp = (function () {
526526
}}
527527
eventDragStop={(info) => {
528528
if (info.view) {
529-
props.onEventDrop("dropEvent");
529+
props.onDropEvent("dropEvent");
530530
}
531531
}}
532532
/>
@@ -540,8 +540,8 @@ let CalendarBasicComp = (function () {
540540
resourcesEvents: { propertyView: (arg0: {}) => any; };
541541
resources: { propertyView: (arg0: {}) => any; };
542542
resourceName: { propertyView: (arg0: {}) => any; };
543-
onEvent: { getPropertyView: () => any; };
544-
onDropEvent: { getPropertyView: () => any; };
543+
onEvent: { propertyView: ({title}?: {title?: string}) => any; };
544+
onDropEvent: { propertyView: ({title}?: {title?: string}) => any; };
545545
editable: { propertyView: (arg0: { label: string; }) => any; };
546546
showEventTime: { propertyView: (arg0: { label: string; tooltip: string; }) => any; };
547547
showWeekends: { propertyView: (arg0: { label: string; }) => any; };
@@ -573,8 +573,12 @@ let CalendarBasicComp = (function () {
573573
}
574574
<Section name={sectionNames.interaction}>
575575
{hiddenPropertyView(children)}
576-
{children.onEvent.getPropertyView()}
577-
{children.onDropEvent.getPropertyView()}
576+
<div style={{display: 'flex', flexDirection: 'column', gap: '8px'}}>
577+
{children.onEvent.propertyView()}
578+
</div>
579+
<div style={{display: 'flex', flexDirection: 'column', gap: '8px'}}>
580+
{children.onDropEvent.propertyView({title: trans("calendar.dragDropEventHandlers")})}
581+
</div>
578582
{children.editable.propertyView({ label: trans("calendar.editable"), })}
579583
</Section>
580584
<Section name={sectionNames.advanced}>

‎client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -635,7 +635,7 @@ export const Wrapper = styled.div<{
635635
}
636636
`;
637637

638-
export const Remove = styled.div<{ isList: boolean }>`
638+
export const Remove = styled.div<{ $isList: boolean }>`
639639
position: absolute;
640640
pointer-events: auto;
641641
top: 0;
@@ -652,21 +652,21 @@ export const Remove = styled.div<{ isList: boolean }>`
652652
`;
653653

654654
export const Event = styled.div<{
655-
bg: string;
655+
$bg: string;
656656
theme: Object;
657-
isList: boolean;
658-
allDay: boolean;
657+
$isList: boolean;
658+
$allDay: boolean;
659659
$style: CalendarStyleType;
660660
}>`
661661
height: 100%;
662662
width: 100%;
663663
pointer-events: none;
664664
border-radius: 4px;
665-
box-shadow: ${(props) => !props.isList && "0 0 5px 0 rgba(0, 0, 0, 0.15)"};
665+
box-shadow: ${(props) => !props.$isList && "0 0 5px 0 rgba(0, 0, 0, 0.15)"};
666666
border: 1px solid ${(props) => props.$style.border};
667-
display: ${(props) => props.isList && "flex"};
667+
display: ${(props) => props.$isList && "flex"};
668668
background-color: ${(props) =>
669-
!props.isList && lightenColor(props.$style.background, 0.1)};
669+
!props.$isList && lightenColor(props.$style.background, 0.1)};
670670
overflow: hidden;
671671
font-size: 13px;
672672
line-height: 19px;
@@ -682,12 +682,12 @@ export const Event = styled.div<{
682682
left: 2px;
683683
top: 2px;
684684
border-radius: 3px;
685-
background-color: ${(props) => props.bg};
685+
background-color: ${(props) => props.$bg};
686686
}
687687
688688
.event-time {
689689
color: ${(props) =>
690-
!props.isList &&
690+
!props.$isList &&
691691
(isDarkColor(props.$style.text)
692692
? lightenColor(props.$style.text, 0.2)
693693
: props.$style.text)};
@@ -696,7 +696,7 @@ export const Event = styled.div<{
696696
margin-top: 2px;
697697
}
698698
.event-title {
699-
color: ${(props) => !props.isList && props.$style.text};
699+
color: ${(props) => !props.$isList && props.$style.text};
700700
font-weight: 500;
701701
margin-left: 15px;
702702
white-space: pre-wrap;

‎client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx

Lines changed: 59 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import {
2727
withViewFn,
2828
ThemeContext,
2929
chartColorPalette,
30+
getPromiseAfterDispatch,
3031
} from "lowcoder-sdk";
3132
import { getEchartsLocale, trans } from "i18n/comps";
3233
import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -57,6 +58,7 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
5758
const mapZoomlevel = comp.children.mapZoomLevel.getView();
5859
const onUIEvent = comp.children.onUIEvent.getView();
5960
const onMapEvent = comp.children.onMapEvent.getView();
61+
const onEvent = comp.children.onEvent.getView();
6062

6163
const echartsCompRef = useRef<ReactECharts | null>();
6264
const [chartSize, setChartSize] = useState<ChartSize>();
@@ -75,7 +77,44 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
7577
log.error('theme chart error: ', error);
7678
}
7779

80+
const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
81+
await getPromiseAfterDispatch(
82+
dispatch,
83+
action,
84+
{ autoHandleAfterReduce: true }
85+
);
86+
onEvent('click');
87+
}
88+
7889
useEffect(() => {
90+
// click events for JSON/Map mode
91+
if (mode === 'ui') return;
92+
93+
const echartsCompInstance = echartsCompRef?.current?.getEchartsInstance();
94+
if (!echartsCompInstance) {
95+
return _.noop;
96+
}
97+
echartsCompInstance?.on("click", (param: any) => {
98+
document.dispatchEvent(new CustomEvent("clickEvent", {
99+
bubbles: true,
100+
detail: {
101+
action: 'click',
102+
data: param.data,
103+
}
104+
}));
105+
triggerClickEvent(
106+
comp.dispatch,
107+
changeChildAction("lastInteractionData", param.data, false)
108+
);
109+
});
110+
return () => {
111+
echartsCompInstance?.off("click");
112+
document.removeEventListener('clickEvent', clickEventCallback)
113+
};
114+
}, [mode, mapScriptLoaded]);
115+
116+
useEffect(() => {
117+
// click events for UI mode
79118
if(mode !== 'ui') return;
80119

81120
// bind events
@@ -87,21 +126,27 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
87126
const option: any = echartsCompInstance?.getOption();
88127
//log.log("chart select change", param);
89128
// trigger click event listener
129+
90130
document.dispatchEvent(new CustomEvent("clickEvent", {
91131
bubbles: true,
92132
detail: {
93133
action: param.fromAction,
94134
data: getSelectedPoints(param, option)
95135
}
96136
}));
97-
137+
98138
if (param.fromAction === "select") {
99-
comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option)));
139+
comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option), false));
100140
onUIEvent("select");
101141
} else if (param.fromAction === "unselect") {
102-
comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option)));
142+
comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option), false));
103143
onUIEvent("unselect");
104144
}
145+
146+
triggerClickEvent(
147+
comp.dispatch,
148+
changeChildAction("lastInteractionData", getSelectedPoints(param, option), false)
149+
);
105150
});
106151
// unbind
107152
return () => {
@@ -141,10 +186,12 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
141186

142187
useEffect(() => {
143188
if( mode !== 'map') {
144-
comp.children.mapInstance.dispatch(changeValueAction(undefined))
189+
comp.children.mapInstance.dispatch(changeValueAction(null, false))
145190
return;
146191
}
147192

193+
if(comp.children.mapInstance.value) return;
194+
148195
const gMapScript = loadGoogleMapsScript(apiKey);
149196
if(isMapScriptLoaded) {
150197
handleOnMapScriptLoad();
@@ -298,6 +345,14 @@ let ChartComp = withExposingConfigs(ChartTmpComp, [
298345
return input.selectedPoints;
299346
},
300347
}),
348+
depsConfig({
349+
name: "lastInteractionData",
350+
desc: trans("chart.lastInteractionDataDesc"),
351+
depKeys: ["lastInteractionData"],
352+
func: (input) => {
353+
return input.lastInteractionData;
354+
},
355+
}),
301356
depsConfig({
302357
name: "data",
303358
desc: trans("chart.dataDesc"),

‎client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
withType,
1616
ValueFromOption,
1717
uiChildren,
18+
clickEvent,
1819
} from "lowcoder-sdk";
1920
import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
2021
import { BarChartConfig } from "./chartConfigs/barChartConfig";
@@ -67,7 +68,6 @@ export const UIEventOptions = [
6768
value: "select",
6869
description: trans("chart.selectDesc"),
6970
},
70-
7171
{
7272
label: trans("chart.unSelect"),
7373
value: "unselect",
@@ -253,6 +253,10 @@ export const chartUiModeChildren = {
253253
onUIEvent: eventHandlerControl(UIEventOptions),
254254
};
255255

256+
const chartJsonModeChildren = {
257+
echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption),
258+
}
259+
256260
const chartMapModeChildren = {
257261
mapInstance: stateComp(),
258262
getMapInstance: FunctionControl,
@@ -265,21 +269,28 @@ const chartMapModeChildren = {
265269
showCharts: withDefault(BoolControl, true),
266270
}
267271

272+
export type UIChartDataType = {
273+
seriesName: string;
274+
// coordinate chart
275+
x?: any;
276+
y?: any;
277+
// pie or funnel
278+
itemName?: any;
279+
value?: any;
280+
};
281+
282+
export type NonUIChartDataType = {
283+
name: string;
284+
value: any;
285+
}
286+
268287
export const chartChildrenMap = {
269288
mode: dropdownControl(chartModeOptions, "ui"),
270-
echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption),
271-
selectedPoints: stateComp<
272-
Array<{
273-
seriesName: string;
274-
// coordinate chart
275-
x?: any;
276-
y?: any;
277-
// pie or funnel
278-
itemName?: any;
279-
value?: any;
280-
}>
281-
>([]),
289+
selectedPoints: stateComp<Array<UIChartDataType>>([]),
290+
lastInteractionData: stateComp<Array<UIChartDataType> | NonUIChartDataType>({}),
291+
onEvent: eventHandlerControl([clickEvent] as const),
282292
...chartUiModeChildren,
293+
...chartJsonModeChildren,
283294
...chartMapModeChildren,
284295
};
285296

‎client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,14 @@ export function chartPropertyView(
105105
dataIndex={(s) => s.getView().dataIndex}
106106
/>
107107
</Section>
108-
<Section name={sectionNames.interaction}>{children.onUIEvent.getPropertyView()}</Section>
108+
<Section name={sectionNames.interaction}>
109+
<div style={{display: 'flex', flexDirection: 'column', gap: '8px'}}>
110+
{children.onUIEvent.propertyView({title: trans("chart.chartEventHandlers")})}
111+
</div>
112+
<div style={{display: 'flex', flexDirection: 'column', gap: '8px'}}>
113+
{children.onEvent.propertyView()}
114+
</div>
115+
</Section>
109116
<Section name={sectionNames.layout}>
110117
{children.title.propertyView({ label: trans("chart.title") })}
111118
{children.chartConfig.children.compType.getView() !== "pie" && (
@@ -144,6 +151,9 @@ export function chartPropertyView(
144151
),
145152
})}
146153
</Section>
154+
<Section name={sectionNames.interaction}>
155+
{children.onEvent.propertyView()}
156+
</Section>
147157
<Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
148158
</>
149159
);
@@ -189,7 +199,14 @@ export function chartPropertyView(
189199
),
190200
})}
191201
</Section>
192-
<Section name={sectionNames.interaction}>{children.onMapEvent.getPropertyView()}</Section>
202+
<Section name={sectionNames.interaction}>
203+
<div style={{display: 'flex', flexDirection: 'column', gap: '8px'}}>
204+
{children.onMapEvent.propertyView({title: trans("chart.chartEventHandlers")})}
205+
</div>
206+
<div style={{display: 'flex', flexDirection: 'column', gap: '8px'}}>
207+
{children.onEvent.propertyView()}
208+
</div>
209+
</Section>
193210
<Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
194211
</>
195212
);

‎client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ export const en = {
6464
unselectDesc:
6565
"Triggered when a user unselects part of the data in the chart",
6666
selectedPointsDesc: "Selected Points",
67+
lastInteractionDataDesc: "Last Interaction Data",
6768
dataDesc: "JSON Data for the Chart",
6869
titleDesc: "Current Chart Title",
6970
scatterShape: "Scatter Shape",
@@ -82,6 +83,7 @@ export const en = {
8283
zoomLevelChangeDesc: "Triggers when the map zoom level changes",
8384
centerPositionChange: "Center Position Change",
8485
centerPositionChangeDesc: "Triggers when the map center position changes",
86+
chartEventHandlers: "Chart Event Handlers",
8587
},
8688
imageEditor: {
8789
defaultSrc: "",
@@ -216,5 +218,6 @@ export const en = {
216218
eventIdRequire: "Enter Event ID",
217219
eventIdTooltip: "Unique ID for each event",
218220
eventIdExist: "ID Exists",
221+
dragDropEventHandlers: "Drag/Drop Event Handlers",
219222
},
220223
};

0 commit comments

Comments
 (0)