将DeleteBox封装成通用组件

src/components/chart/list.jsx

@@ -10,6 +10,7 @@ import GroupSelector from '../datasource/groupSelector'
 import Thumbnail from './thumbnail'
 import DistributeBox from './distributeBox';
 import TransferBox from './transferBox'
+import DeleteBox from '../common/deleteBox'
 const { Content } = Layout
 const { Search } = Input
 const CardGrid = Card.Grid
@@ -25,6 +26,7 @@ class ChartList extends React.Component {
             visibleDistributeBox: false,
             visibleTransferBox: false,
             visibleGroupMenu: false, // 显示分组菜单
+            visibleDeleteBox: false
         }
     }
 
@@ -80,10 +82,13 @@ class ChartList extends React.Component {
                 >
                     <Icon type="swap" />移交
                 </Menu.Item>
-                <Menu.Item onClick={() => {
-                    dispatch({ type: 'chart/remoteDelete', code: this.state.selectedRecord.code });
-                }}>
-                    <Icon type='delete'/>删除
+                <Menu.Item
+                    onClick={(e) => {
+                        this.setState({ visibleDeleteBox: true})
+                    }}
+                >
+                    <Icon type="delete" />删除
+                    
                 </Menu.Item>
             </Menu>
         )
@@ -335,7 +340,7 @@ class ChartList extends React.Component {
     }
 
     render() {
-        const { visibleChooseDataSourceBox, visibleDistributeBox, visibleTransferBox } = this.state;
+        const { visibleChooseDataSourceBox, visibleDistributeBox, visibleTransferBox, visibleDeleteBox, selectedRecord } = this.state;
         const { dispatch, chart } = this.props;
         const TAG_COLOR = ['blue'];
         return (
@@ -433,6 +438,19 @@ class ChartList extends React.Component {
                             visibleTransferBox: false
                         })
                     }} />
+                <DeleteBox
+                            visibleDeleteBox={visibleDeleteBox}
+                            type='chart'
+                            onCancel={() => {
+                                this.setState({
+                                    visibleDeleteBox: false
+                                })
+                            }}
+                            selectedRecord={selectedRecord}
+                            onOk={() =>{
+                                dispatch({ type: 'chart/remoteDelete', code: this.state.selectedRecord.code })
+                                this.setState({visibleDeleteBox: false})
+                            }} />
             </Layout>
         )
     }

src/components/common/deleteBox.jsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { Modal } from 'antd'
+
+
+/**
+ * 通用的删除对话框，需传入：
+ * type类型用于展示删除目标
+ * visibleDeleteBox用于关联其父级容器中管理显示与否的state
+ * hideBox方法用于隐藏对话框
+ * selectedRecord用于传入被选中的条目
+ * onOk方法用于执行删除操作并且需要传入隐藏对话框的方法
+ * 
+ * TODO: 此处hideBox实际上传了两遍，不是很优雅
+ *
+ * @class DeleteBox
+ * @extends {React.Component}
+ * 
+ *
+ */
+class DeleteBox extends React.Component {
+    render() {
+        const { visibleDeleteBox, hideBox, selectedRecord, type, onOk } = this.props
+        const typeMapper = {
+            'datasource': '数据源',
+            'chart': '图表',
+            'dashboard': '看板'
+        }
+        return (
+            <Modal 
+                visible={visibleDeleteBox}
+                onCancel={hideBox}
+                onOk={onOk}
+                destroyOnClose={true}
+            >
+                <span>确定要删除{typeMapper[type]}：{selectedRecord ? selectedRecord.name : ''} 吗？</span>
+            </Modal>
+        )
+    }
+}
+
+export default DeleteBox

src/components/dashboard/list.jsx

@@ -8,6 +8,7 @@ import TransferBox from './transferBox'
 import 'ant-design-pro/dist/ant-design-pro.css'
 import Thumbnail from './thumbnail'
 import './list.less'
+import DeleteBox from '../common/deleteBox'
 const { Content } = Layout
 const { Search } = Input
 const CardGrid = Card.Grid
@@ -22,6 +23,7 @@ class DashboardList extends React.Component {
             visibleDistributeBox: false,
             visibleTransferBox: false,
             visibleGroupMenu: false, // 显示分组菜单
+            visibleDeleteBox: false
         }
     }
 
@@ -71,10 +73,13 @@ class DashboardList extends React.Component {
                 >
                     <Icon type="swap" />移交
                 </Menu.Item>
-                <Menu.Item onClick={() => {
-                    dispatch({ type: 'dashboard/remoteDelete', code: selectedRecord.code });
-                }}>
-                    <Icon type='delete'/>删除
+                <Menu.Item
+                    onClick={(e) => {
+                        this.setState({ visibleDeleteBox: true})
+                    }}
+                >
+                    <Icon type="delete" />删除
+                    
                 </Menu.Item>
             </Menu>
         )
@@ -166,7 +171,7 @@ class DashboardList extends React.Component {
 
     render() {
         const { dispatch, dashboard } = this.props;
-        const { visibleDistributeBox, visibleTransferBox } = this.state
+        const { visibleDistributeBox, visibleTransferBox, visibleDeleteBox, selectedRecord } = this.state
         return (
             <Layout className='dashboard-list'>
                 <Content>
@@ -214,6 +219,19 @@ class DashboardList extends React.Component {
                             visibleTransferBox: false
                         })
                     }} />
+                <DeleteBox
+                    visibleDeleteBox={visibleDeleteBox}
+                    type='dashboard'
+                    onCancel={() => {
+                        this.setState({
+                            visibleDeleteBox: false
+                        })
+                    }}
+                    selectedRecord={selectedRecord}
+                    onOk={() => {
+                        dispatch({ type: 'dashboard/remoteDelete', code: this.state.selectedRecord.code })
+                        this.setState({ visibleDeleteBox: false })
+                    }} />
             </Layout>
         )
     }

src/components/datasource/dataSource.jsx

@@ -5,7 +5,7 @@ import './dataSource.less'
 import { dateFormat } from '../../utils/baseUtils'
 import GroupSelector from './groupSelector'
 import TransferBox from './transferBox';
-import DeleteBox from './deleteBox';
+import DeleteBox from '../common/deleteBox';
 const { Content } = Layout
 const { Search } = Input
 const { TreeNode } = Tree
@@ -467,13 +467,17 @@ class DataSource extends React.Component {
                             }} />
                         <DeleteBox
                             visibleDeleteBox={visibleDeleteBox}
-                            onCancel={() => {
+                            type='datasource'
+                            hideBox={() => {
                                 this.setState({
                                     visibleDeleteBox: false
                                 })
                             }}
                             selectedRecord={selectedRecord}
-                            onOk={() =>dispatch({ type: 'dataSource/remoteDelete', code: selectedRecord.code })} />
+                            onOk={() =>{
+                                dispatch({ type: 'dataSource/remoteDelete', code: selectedRecord.code })
+                                this.setState({visibleDeleteBox: false})
+                            }} />
                     </Card>
                 </Content>
             </Layout>

src/components/datasource/deleteBox.jsx

@@ -1,19 +0,0 @@
-import React from 'react'
-import { Modal } from 'antd'
-
-
-class DeleteBox extends React.Component {
-    render() {
-        const { visibleDeleteBox, onCancel, selectedRecord } = this.props
-        return (
-            <Modal 
-                visible={visibleDeleteBox}
-                onCancel={onCancel}
-            >
-                <span>确定要删除数据源：{selectedRecord ? selectedRecord.name : ''} 吗？</span>
-            </Modal>
-        )
-    }
-}
-
-export default DeleteBox