Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 840678f

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /