Skip to content

Commit d1ef5a1

Browse files
xieliuduoxieliuduo
committed
refactor: deleteWidgetsAction
1 parent 6c57cee commit d1ef5a1

File tree

9 files changed

+123
-119
lines changed

9 files changed

+123
-119
lines changed

‎frontend/src/app/pages/DashBoardPage/components/BoardProvider/BoardActionProvider.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ export interface BoardActionContextProps {
8484
) => void;
8585
undo: () => void;
8686
redo: () => void;
87-
deleteActiveWidgets: () => void;
87+
deleteActiveWidgets: (ids?: string[]) => void;
8888
layerToTop: () => void;
8989
layerToBottom: () => void;
9090
copyWidgets: (ids?: string[]) => void;
@@ -115,7 +115,7 @@ export const BoardActionProvider: FC<{ id: string }> = memo(
115115
onWidgetsQuery: debounce(
116116
(editing: boolean, renderMode: VizRenderMode) => {
117117
if (editing) {
118-
dispatch(editWidgetsQueryAction({ boardId }));
118+
dispatch(editWidgetsQueryAction());
119119
} else {
120120
dispatch(widgetsQueryAction({ boardId, renderMode }));
121121
}
@@ -221,8 +221,8 @@ export const BoardActionProvider: FC<{ id: string }> = memo(
221221
redo: () => {
222222
dispatch({ type: BOARD_UNDO.redo });
223223
},
224-
deleteActiveWidgets: debounce(() => {
225-
dispatch(deleteWidgetsAction());
224+
deleteActiveWidgets: debounce((ids?: string[]) => {
225+
dispatch(deleteWidgetsAction(ids));
226226
}, 200),
227227
layerToTop: () => {
228228
dispatch(widgetsToPositionAction('top'));

‎frontend/src/app/pages/DashBoardPage/components/WidgetProvider/WidgetAllProvider.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
* limitations under the License.
1717
*/
1818

19-
import React, { FC } from 'react';
19+
import { FC } from 'react';
2020
import { WidgetChartProvider } from './WidgetChartProvider';
2121
import { WidgetDataProvider } from './WidgetDataProvider';
2222
import { WidgetInfoProvider } from './WidgetInfoProvider';

‎frontend/src/app/pages/DashBoardPage/components/WidgetProvider/WidgetMethodProvider.tsx‎

Lines changed: 1 addition & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@
1616
* limitations under the License.
1717
*/
1818

19-
import { ExclamationCircleOutlined } from '@ant-design/icons';
2019
import { Modal } from 'antd';
2120
import { ControllerFacadeTypes } from 'app/constants';
2221
import usePrefixI18N from 'app/hooks/useI18NPrefix';
@@ -43,11 +42,9 @@ import {
4342
BoardLinkFilter,
4443
Widget,
4544
WidgetContentChartType,
46-
WidgetType,
4745
} from '../../pages/Board/slice/types';
4846
import { jumpTypes } from '../../pages/BoardEditor/components/SettingJumpModal/config';
4947
import {
50-
editBoardStackActions,
5148
editDashBoardInfoActions,
5249
editWidgetInfoActions,
5350
} from '../../pages/BoardEditor/slice';
@@ -57,7 +54,6 @@ import {
5754
editChartInWidgetAction,
5855
toggleLockWidgetAction,
5956
} from '../../pages/BoardEditor/slice/actions/actions';
60-
import { editWidgetsQueryAction } from '../../pages/BoardEditor/slice/actions/controlActions';
6157
import {
6258
getEditChartWidgetDataAsync,
6359
getEditWidgetData,
@@ -88,34 +84,7 @@ export const WidgetMethodProvider: FC<{ widgetId: string }> = ({
8884
const dispatch = useDispatch();
8985
const history = useHistory();
9086
const [folderIds, setFolderIds] = useState<any[]>([]);
91-
// deleteWidget
92-
const onWidgetDelete = useCallback(
93-
(type: WidgetType, wid: string) => {
94-
if (type === 'container') {
95-
confirm({
96-
title: t('confirmDel'),
97-
icon: <ExclamationCircleOutlined />,
98-
content: t('ContainerConfirmDel'),
99-
onOk() {
100-
dispatch(editBoardStackActions.deleteWidgets([wid]));
101-
},
102-
onCancel() {},
103-
});
104-
return;
105-
}
106-
if (type === 'query') {
107-
dispatch(editBoardStackActions.changeBoardHasQueryControl(false));
108-
}
109-
if (type === 'reset') {
110-
dispatch(editBoardStackActions.changeBoardHasResetControl(false));
111-
}
112-
if (type === 'controller') {
113-
dispatch(editWidgetsQueryAction({ boardId }));
114-
}
115-
dispatch(editBoardStackActions.deleteWidgets([wid]));
116-
},
117-
[dispatch, t, boardId],
118-
);
87+
11988
const onWidgetEdit = useCallback(
12089
(widget: Widget, wid: string) => {
12190
const type = widget.config.type;
@@ -456,9 +425,6 @@ export const WidgetMethodProvider: FC<{ widgetId: string }> = ({
456425
case 'refresh':
457426
onWidgetGetData(boardId, widget);
458427
break;
459-
case 'delete':
460-
onWidgetDelete(widget.config.type, widgetId);
461-
break;
462428
case 'edit':
463429
onWidgetEdit(widget, widgetId);
464430
break;
@@ -490,7 +456,6 @@ export const WidgetMethodProvider: FC<{ widgetId: string }> = ({
490456
boardId,
491457
widgetId,
492458
onWidgetGetData,
493-
onWidgetDelete,
494459
onWidgetEdit,
495460
onMakeLinkage,
496461
onMakeJump,

‎frontend/src/app/pages/DashBoardPage/components/WidgetProvider/WidgetProvider.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export const WidgetProvider: FC<{ widgetId: string }> = ({
3838
widgetId,
3939
children,
4040
}) => {
41-
const { boardId, boardType, editing } = useContext(BoardContext);
41+
const { boardId, editing } = useContext(BoardContext);
4242
// 浏览模式
4343
const boardWidget = useSelector((state: { board: BoardState }) =>
4444
selectWidgetBy2Id(state, boardId, widgetId),

‎frontend/src/app/pages/DashBoardPage/components/WidgetToolBar/WidgetActionDropdown.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,10 @@ import {
3030
import { Button, Dropdown, Menu } from 'antd';
3131
import useI18NPrefix from 'app/hooks/useI18NPrefix';
3232
import React, { memo, useCallback, useContext, useMemo } from 'react';
33+
import useWidgetAction from '../../hooks/useWidgetAction';
3334
import { Widget } from '../../pages/Board/slice/types';
3435
import { BoardContext } from '../BoardProvider/BoardProvider';
3536
import { WidgetChartContext } from '../WidgetProvider/WidgetChartProvider';
36-
import { WidgetMethodContext } from '../WidgetProvider/WidgetMethodProvider';
3737
import {
3838
getWidgetActionList,
3939
WidgetActionListItem,
@@ -47,14 +47,15 @@ export interface WidgetActionDropdownProps {
4747
export const WidgetActionDropdown: React.FC<WidgetActionDropdownProps> = memo(
4848
({ widget }) => {
4949
const { editing: boardEditing } = useContext(BoardContext);
50-
const { onWidgetAction } = useContext(WidgetMethodContext);
50+
51+
const widgetAction = useWidgetAction();
5152
const dataChart = useContext(WidgetChartContext)!;
5253
const t = useI18NPrefix(`viz.widget.action`);
5354
const menuClick = useCallback(
5455
({ key }) => {
55-
onWidgetAction(key, widget);
56+
widgetAction(key, widget);
5657
},
57-
[onWidgetAction, widget],
58+
[widgetAction, widget],
5859
);
5960
const getAllList = useCallback(() => {
6061
const allWidgetActionList: WidgetActionListItem<widgetActionType>[] = [

‎frontend/src/app/pages/DashBoardPage/hooks/useWidgetAction.ts‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/**
2+
* Datart
3+
*
4+
* Copyright 2021
5+
*
6+
* Licensed under the Apache License, Version 2.0 (the "License");
7+
* you may not use this file except in compliance with the License.
8+
* You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing, software
13+
* distributed under the License is distributed on an "AS IS" BASIS,
14+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15+
* See the License for the specific language governing permissions and
16+
* limitations under the License.
17+
*/
18+
import { useCallback, useContext } from 'react';
19+
import { BoardActionContext } from '../components/BoardProvider/BoardActionProvider';
20+
import { WidgetMethodContext } from '../components/WidgetProvider/WidgetMethodProvider';
21+
import { widgetActionType } from '../components/WidgetToolBar/config';
22+
import { Widget } from '../pages/Board/slice/types';
23+
24+
export default function useWidgetAction() {
25+
const { onWidgetAction } = useContext(WidgetMethodContext);
26+
const { deleteActiveWidgets } = useContext(BoardActionContext);
27+
const widgetAction = useCallback(
28+
(key: widgetActionType, widget: Widget) => {
29+
switch (key) {
30+
case 'delete':
31+
deleteActiveWidgets([widget.id]);
32+
break;
33+
default:
34+
onWidgetAction(key, widget);
35+
break;
36+
}
37+
},
38+
[deleteActiveWidgets, onWidgetAction],
39+
);
40+
return widgetAction;
41+
}

‎frontend/src/app/pages/DashBoardPage/pages/BoardEditor/slice/actions/actions.ts‎

Lines changed: 52 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@
1515
* See the License for the specific language governing permissions and
1616
* limitations under the License.
1717
*/
18-
import { Modal } from 'antd';
1918
import { ChartEditorBaseProps } from 'app/components/ChartEditor';
2019
import { DataViewFieldType, ControllerFacadeTypes } from 'app/constants';
2120
import { boardActions } from 'app/pages/DashBoardPage/pages/Board/slice';
@@ -31,6 +30,8 @@ import {
3130
Widget,
3231
WidgetInfo,
3332
WidgetOfCopy,
33+
WidgetType,
34+
WidgetTypes,
3435
} from 'app/pages/DashBoardPage/pages/Board/slice/types';
3536
import { editWidgetInfoActions } from 'app/pages/DashBoardPage/pages/BoardEditor/slice';
3637
import {
@@ -40,7 +41,6 @@ import {
4041
} from 'app/pages/DashBoardPage/utils/widget';
4142
import { Variable } from 'app/pages/MainPage/pages/VariablePage/slice/types';
4243
import ChartDataView from 'app/types/ChartDataView';
43-
import i18next from 'i18next';
4444
import produce from 'immer';
4545
import { ActionCreators } from 'redux-undo';
4646
import { RootState } from 'types';
@@ -52,7 +52,7 @@ import { ControllerConfig } from '../../components/ControllerWidgetPanel/types';
5252
import { addWidgetsToEditBoard, getEditChartWidgetDataAsync } from '../thunk';
5353
import { EditBoardState, HistoryEditBoard } from '../types';
5454
import { editWidgetsQueryAction } from './controlActions';
55-
const { confirm } = Modal;
55+
5656
export const clearEditBoardState = () => async dispatch => {
5757
await dispatch(
5858
editBoardStackActions.setBoardToEditStack({
@@ -64,53 +64,66 @@ export const clearEditBoardState = () => async dispatch => {
6464
await dispatch(editWidgetInfoActions.clearWidgetInfo());
6565
dispatch(ActionCreators.clearHistory());
6666
};
67-
export const deleteWidgetsAction = () => (dispatch, getState) => {
67+
export const deleteWidgetsAction = (ids?: string[]) => (dispatch, getState) => {
6868
const editBoard = getState().editBoard as HistoryEditBoard;
69-
let selectedIds = Object.values(editBoard.widgetInfoRecord)
70-
.filter(WidgetInfo => WidgetInfo.selected)
71-
.map(WidgetInfo => WidgetInfo.id);
72-
if (selectedIds.length === 0) {
73-
return;
69+
let selectedIds: string[] = [];
70+
let shouldDeleteIds: string[] = [];
71+
let effectTypes: WidgetType[] = [];
72+
if (ids?.length) {
73+
selectedIds = ids;
74+
} else {
75+
selectedIds = Object.values(editBoard.widgetInfoRecord)
76+
.filter(WidgetInfo => WidgetInfo.selected)
77+
.map(WidgetInfo => WidgetInfo.id);
7478
}
75-
dispatch(editBoardStackActions.deleteWidgets(selectedIds));
76-
let childWidgetIds: string[] = [];
79+
if (selectedIds.length === 0) return;
80+
7781
const widgetMap = editBoard.stack.present.widgetRecord;
78-
selectedIds.forEach(id => {
79-
if (!widgetMap[id]) return;
80-
const widgetType = widgetMap[id].config.type;
82+
83+
while (selectedIds.length > 0) {
84+
const id = selectedIds.pop();
85+
86+
if (!id) return;
87+
const curWidget = widgetMap[id];
88+
if (!curWidget) return;
89+
90+
const widgetType = curWidget.config.type;
91+
92+
shouldDeleteIds.push(id);
93+
effectTypes.push(widgetType);
94+
95+
// delete 递归删除所子节点;
8196
if (widgetType === 'container') {
82-
const content = widgetMap[id].config.content as ContainerWidgetContent;
97+
const content = curWidget.config.content as ContainerWidgetContent;
8398
Object.values(content.itemMap).forEach(item => {
8499
if (item.childWidgetId) {
85-
childWidgetIds.push(item.childWidgetId);
100+
selectedIds.push(item.childWidgetId);
86101
}
87102
});
88103
}
89-
if (widgetType === 'query') {
90-
dispatch(editBoardStackActions.changeBoardHasQueryControl(false));
91-
}
92-
if (widgetType === 'reset') {
93-
dispatch(editBoardStackActions.changeBoardHasResetControl(false));
94-
}
95-
if (widgetType === 'controller') {
96-
dispatch(editWidgetsQueryAction({ boardId: editBoard.boardInfo.id }));
104+
// TODO groupWidget need recursively delete 递归删除所子节点
105+
// if (curWidget.children.length > 0) {}
106+
}
107+
108+
dispatch(editBoardStackActions.deleteWidgets(shouldDeleteIds));
109+
110+
WidgetTypes.forEach(widgetType => {
111+
if (effectTypes.includes(widgetType)) {
112+
switch (widgetType) {
113+
case 'query':
114+
dispatch(editBoardStackActions.changeBoardHasQueryControl(false));
115+
break;
116+
case 'reset':
117+
dispatch(editBoardStackActions.changeBoardHasResetControl(false));
118+
break;
119+
case 'controller':
120+
dispatch(editWidgetsQueryAction());
121+
break;
122+
default:
123+
break;
124+
}
97125
}
98126
});
99-
100-
if (childWidgetIds.length > 0) {
101-
const perStr = 'viz.widget.action.';
102-
confirm({
103-
title: i18next.t(perStr + 'confirmDel'),
104-
content: i18next.t(perStr + 'confirmDel1'),
105-
onOk() {
106-
dispatch(editBoardStackActions.deleteWidgets(selectedIds));
107-
},
108-
onCancel() {
109-
childWidgetIds = [];
110-
return;
111-
},
112-
});
113-
}
114127
};
115128

116129
/* widgetToPositionAsync */

‎frontend/src/app/pages/DashBoardPage/pages/BoardEditor/slice/actions/controlActions.ts‎

Lines changed: 17 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -63,28 +63,22 @@ export const addControllerAction =
6363
}
6464
};
6565

66-
export const editWidgetsQueryAction =
67-
({ boardId }) =>
68-
async (dispatch, getState) => {
69-
const pageInfo: Partial<PageInfo> = {
70-
pageNo: 1,
71-
};
72-
73-
const editBoard = getState().editBoard as HistoryEditBoard;
74-
const widgetMap = editBoard.stack.present.widgetRecord;
66+
export const editWidgetsQueryAction = () => async (dispatch, getState) => {
67+
const pageInfo: Partial<PageInfo> = {
68+
pageNo: 1,
69+
};
7570

76-
if (editBoard.boardInfo.id !== boardId) {
77-
return;
78-
}
71+
const editBoard = getState().editBoard as HistoryEditBoard;
72+
const widgetMap = editBoard.stack.present.widgetRecord;
7973

80-
Object.values(widgetMap)
81-
.filter(it => it.config.type === 'chart')
82-
.forEach(it => {
83-
dispatch(
84-
getEditChartWidgetDataAsync({
85-
widgetId: it.id,
86-
option: { pageInfo },
87-
}),
88-
);
89-
});
90-
};
74+
Object.values(widgetMap)
75+
.filter(it => it.config.type === 'chart')
76+
.forEach(it => {
77+
dispatch(
78+
getEditChartWidgetDataAsync({
79+
widgetId: it.id,
80+
option: { pageInfo },
81+
}),
82+
);
83+
});
84+
};

0 commit comments

Comments
 (0)