From 54e7a1dbdce9a8364dfa93ed87bc421a247fd8c8 Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Wed, 17 Apr 2024 23:25:24 +0500 Subject: [PATCH 1/3] export util/promiseUtils from lowcoder --- client/packages/lowcoder/src/index.sdk.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/client/packages/lowcoder/src/index.sdk.ts b/client/packages/lowcoder/src/index.sdk.ts index 9bec411fc..54316b68c 100644 --- a/client/packages/lowcoder/src/index.sdk.ts +++ b/client/packages/lowcoder/src/index.sdk.ts @@ -29,6 +29,7 @@ export * from "util/objectUtils"; export * from "util/objectUtils"; export * from "util/perfUtils"; export * from "util/permissionUtils"; +export * from "util/promiseUtils"; export * from "util/reducerUtils"; export * from "util/scheduleUtils"; export * from "util/stringUtils"; From c70b2bffdf371620d75907a2a8ee3bc72b55e895 Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Wed, 17 Apr 2024 23:26:57 +0500 Subject: [PATCH 2/3] fix multiple event handlers in calendar comp --- .../src/comps/calendarComp/calendarComp.tsx | 24 +++++++++++-------- .../comps/calendarComp/calendarConstants.tsx | 20 ++++++++-------- 2 files changed, 24 insertions(+), 20 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx index e3d3b1ddb..f4d3d32cc 100644 --- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx @@ -97,7 +97,7 @@ let CalendarBasicComp = (function () { resources: any; resourceName : string onEvent?: any; - onEventDrop?: any; + onDropEvent?: any; editable?: boolean; showEventTime?: boolean; showWeekends?: boolean; @@ -248,16 +248,16 @@ let CalendarBasicComp = (function () { return (
{eventInfo.timeText}
{eventInfo.event.title}
{ e.stopPropagation(); @@ -526,7 +526,7 @@ let CalendarBasicComp = (function () { }} eventDragStop={(info) => { if (info.view) { - props.onEventDrop("dropEvent"); + props.onDropEvent("dropEvent"); } }} /> @@ -540,8 +540,8 @@ let CalendarBasicComp = (function () { resourcesEvents: { propertyView: (arg0: {}) => any; }; resources: { propertyView: (arg0: {}) => any; }; resourceName: { propertyView: (arg0: {}) => any; }; - onEvent: { getPropertyView: () => any; }; - onDropEvent: { getPropertyView: () => any; }; + onEvent: { propertyView: ({title}?: {title?: string}) => any; }; + onDropEvent: { propertyView: ({title}?: {title?: string}) => any; }; editable: { propertyView: (arg0: { label: string; }) => any; }; showEventTime: { propertyView: (arg0: { label: string; tooltip: string; }) => any; }; showWeekends: { propertyView: (arg0: { label: string; }) => any; }; @@ -573,8 +573,12 @@ let CalendarBasicComp = (function () { }
{hiddenPropertyView(children)} - {children.onEvent.getPropertyView()} - {children.onDropEvent.getPropertyView()} +
+ {children.onEvent.propertyView()} +
+
+ {children.onDropEvent.propertyView({title: trans("calendar.dragDropEventHandlers")})} +
{children.editable.propertyView({ label: trans("calendar.editable"), })}
diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx index 437f0d649..0250b299f 100644 --- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx @@ -635,7 +635,7 @@ export const Wrapper = styled.div<{ } `; -export const Remove = styled.div<{ isList: boolean }>` +export const Remove = styled.div<{ $isList: boolean }>` position: absolute; pointer-events: auto; top: 0; @@ -652,21 +652,21 @@ export const Remove = styled.div<{ isList: boolean }>` `; export const Event = styled.div<{ - bg: string; + $bg: string; theme: Object; - isList: boolean; - allDay: boolean; + $isList: boolean; + $allDay: boolean; $style: CalendarStyleType; }>` height: 100%; width: 100%; pointer-events: none; border-radius: 4px; - box-shadow: ${(props) => !props.isList && "0 0 5px 0 rgba(0, 0, 0, 0.15)"}; + box-shadow: ${(props) => !props.$isList && "0 0 5px 0 rgba(0, 0, 0, 0.15)"}; border: 1px solid ${(props) => props.$style.border}; - display: ${(props) => props.isList && "flex"}; + display: ${(props) => props.$isList && "flex"}; background-color: ${(props) => - !props.isList && lightenColor(props.$style.background, 0.1)}; + !props.$isList && lightenColor(props.$style.background, 0.1)}; overflow: hidden; font-size: 13px; line-height: 19px; @@ -682,12 +682,12 @@ export const Event = styled.div<{ left: 2px; top: 2px; border-radius: 3px; - background-color: ${(props) => props.bg}; + background-color: ${(props) => props.$bg}; } .event-time { color: ${(props) => - !props.isList && + !props.$isList && (isDarkColor(props.$style.text) ? lightenColor(props.$style.text, 0.2) : props.$style.text)}; @@ -696,7 +696,7 @@ export const Event = styled.div<{ margin-top: 2px; } .event-title { - color: ${(props) => !props.isList && props.$style.text}; + color: ${(props) => !props.$isList && props.$style.text}; font-weight: 500; margin-left: 15px; white-space: pre-wrap; From ef64c80edfbf06a7fca781f5b4edda041d799b4e Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Wed, 17 Apr 2024 23:27:43 +0500 Subject: [PATCH 3/3] added click event handler in charts --- .../src/comps/chartComp/chartComp.tsx | 39 +++++++++++++++++-- .../src/comps/chartComp/chartConstants.tsx | 37 +++++++++++------- .../src/comps/chartComp/chartPropertyView.tsx | 21 +++++++++- .../src/i18n/comps/locales/en.ts | 3 ++ .../src/i18n/comps/locales/zh.ts | 5 ++- 5 files changed, 85 insertions(+), 20 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx index 105cfb5d6..53873b2b5 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx @@ -27,6 +27,7 @@ import { withViewFn, ThemeContext, chartColorPalette, + getPromiseAfterDispatch, } from "lowcoder-sdk"; import { getEchartsLocale, trans } from "i18n/comps"; import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig"; @@ -57,6 +58,7 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => { const mapZoomlevel = comp.children.mapZoomLevel.getView(); const onUIEvent = comp.children.onUIEvent.getView(); const onMapEvent = comp.children.onMapEvent.getView(); + const onEvent = comp.children.onEvent.getView(); const echartsCompRef = useRef(); const [chartSize, setChartSize] = useState(); @@ -75,6 +77,15 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => { log.error('theme chart error: ', error); } + const triggerClickEvent = async (dispatch: any, action: CompAction) => { + await getPromiseAfterDispatch( + dispatch, + action, + { autoHandleAfterReduce: true } + ); + onEvent('click'); + } + useEffect(() => { // click events for JSON/Map mode if (mode === 'ui') return; @@ -91,6 +102,10 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => { data: param.data, } })); + triggerClickEvent( + comp.dispatch, + changeChildAction("lastInteractionData", param.data, false) + ); }); return () => { echartsCompInstance?.off("click"); @@ -111,6 +126,7 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => { const option: any = echartsCompInstance?.getOption(); //log.log("chart select change", param); // trigger click event listener + document.dispatchEvent(new CustomEvent("clickEvent", { bubbles: true, detail: { @@ -118,14 +134,19 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => { data: getSelectedPoints(param, option) } })); - + if (param.fromAction === "select") { - comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option))); + comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option), false)); onUIEvent("select"); } else if (param.fromAction === "unselect") { - comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option))); + comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option), false)); onUIEvent("unselect"); } + + triggerClickEvent( + comp.dispatch, + changeChildAction("lastInteractionData", getSelectedPoints(param, option), false) + ); }); // unbind return () => { @@ -165,10 +186,12 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => { useEffect(() => { if( mode !== 'map') { - comp.children.mapInstance.dispatch(changeValueAction(undefined)) + comp.children.mapInstance.dispatch(changeValueAction(null, false)) return; } + if(comp.children.mapInstance.value) return; + const gMapScript = loadGoogleMapsScript(apiKey); if(isMapScriptLoaded) { handleOnMapScriptLoad(); @@ -322,6 +345,14 @@ let ChartComp = withExposingConfigs(ChartTmpComp, [ return input.selectedPoints; }, }), + depsConfig({ + name: "lastInteractionData", + desc: trans("chart.lastInteractionDataDesc"), + depKeys: ["lastInteractionData"], + func: (input) => { + return input.lastInteractionData; + }, + }), depsConfig({ name: "data", desc: trans("chart.dataDesc"), diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx index 763851512..4242a5090 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx @@ -15,6 +15,7 @@ import { withType, ValueFromOption, uiChildren, + clickEvent, } from "lowcoder-sdk"; import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core"; import { BarChartConfig } from "./chartConfigs/barChartConfig"; @@ -67,7 +68,6 @@ export const UIEventOptions = [ value: "select", description: trans("chart.selectDesc"), }, - { label: trans("chart.unSelect"), value: "unselect", @@ -253,6 +253,10 @@ export const chartUiModeChildren = { onUIEvent: eventHandlerControl(UIEventOptions), }; +const chartJsonModeChildren = { + echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption), +} + const chartMapModeChildren = { mapInstance: stateComp(), getMapInstance: FunctionControl, @@ -265,21 +269,28 @@ const chartMapModeChildren = { showCharts: withDefault(BoolControl, true), } +export type UIChartDataType = { + seriesName: string; + // coordinate chart + x?: any; + y?: any; + // pie or funnel + itemName?: any; + value?: any; +}; + +export type NonUIChartDataType = { + name: string; + value: any; +} + export const chartChildrenMap = { mode: dropdownControl(chartModeOptions, "ui"), - echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption), - selectedPoints: stateComp< - Array<{ - seriesName: string; - // coordinate chart - x?: any; - y?: any; - // pie or funnel - itemName?: any; - value?: any; - }> - >([]), + selectedPoints: stateComp>([]), + lastInteractionData: stateComp | NonUIChartDataType>({}), + onEvent: eventHandlerControl([clickEvent] as const), ...chartUiModeChildren, + ...chartJsonModeChildren, ...chartMapModeChildren, }; diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx index 41055d133..3b183d235 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx @@ -105,7 +105,14 @@ export function chartPropertyView( dataIndex={(s) => s.getView().dataIndex} />
-
{children.onUIEvent.getPropertyView()}
+
+
+ {children.onUIEvent.propertyView({title: trans("chart.chartEventHandlers")})} +
+
+ {children.onEvent.propertyView()} +
+
{children.title.propertyView({ label: trans("chart.title") })} {children.chartConfig.children.compType.getView() !== "pie" && ( @@ -144,6 +151,9 @@ export function chartPropertyView( ), })}
+
+ {children.onEvent.propertyView()} +
{hiddenPropertyView(children)}
); @@ -189,7 +199,14 @@ export function chartPropertyView( ), })} -
{children.onMapEvent.getPropertyView()}
+
+
+ {children.onMapEvent.propertyView({title: trans("chart.chartEventHandlers")})} +
+
+ {children.onEvent.propertyView()} +
+
{hiddenPropertyView(children)}
); diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts index 74a1b1e19..53b106826 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -64,6 +64,7 @@ export const en = { unselectDesc: "Triggered when a user unselects part of the data in the chart", selectedPointsDesc: "Selected Points", + lastInteractionDataDesc: "Last Interaction Data", dataDesc: "JSON Data for the Chart", titleDesc: "Current Chart Title", scatterShape: "Scatter Shape", @@ -82,6 +83,7 @@ export const en = { zoomLevelChangeDesc: "Triggers when the map zoom level changes", centerPositionChange: "Center Position Change", centerPositionChangeDesc: "Triggers when the map center position changes", + chartEventHandlers: "Chart Event Handlers", }, imageEditor: { defaultSrc: "", @@ -156,5 +158,6 @@ export const en = { eventIdRequire: "Enter Event ID", eventIdTooltip: "Unique ID for each event", eventIdExist: "ID Exists", + dragDropEventHandlers: "Drag/Drop Event Handlers", }, }; diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/zh.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/zh.ts index 2fdb9f5fc..6daaaf2f9 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/zh.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/zh.ts @@ -61,6 +61,7 @@ export const zh = { selectDesc: "当用户选择图表中的部分数据时触发", unselectDesc: "当用户取消选择图表中的部分数据时触发", selectedPointsDesc: "已选中的数据点", + lastInteractionDataDesc: "最后交互数据", dataDesc: "当前图表使用的原始数据", titleDesc: "当前图表标题", scatterShape: "散点形状", @@ -77,7 +78,8 @@ export const zh = { zoomLevelChange: "缩放级别更改", zoomLevelChangeDesc: "地图缩放级别更改时触发", centerPositionChange: "中心位置变化", - centerPositionChangeDesc: "地图中心位置改变时触发" + centerPositionChangeDesc: "地图中心位置改变时触发", + chartEventHandlers: "图表事件处理程序", }, imageEditor: { defaultSrc: "", @@ -149,5 +151,6 @@ export const zh = { eventIdRequire: "请输入事件ID", eventIdTooltip: "每个事件的唯一标识符", eventIdExist: "ID已存在", + dragDropEventHandlers: "拖/放事件处理程序", }, }; \ No newline at end of file