1
- import React , { useEffect } from 'react'
1
+ import React , { useEffect , useState } from 'react'
2
2
import { getHostKey , getHostName } from 'libs'
3
3
import Loading from 'components/Loading'
4
4
import queryString from 'query-string'
@@ -30,6 +30,13 @@ export default observer((props) => {
30
30
AppStore . init ( { } )
31
31
} , [ ] )
32
32
const history = useHistory ( )
33
+ const [ selectedRowKeys , setSelectedRowKeys ] = useState ( [ ] )
34
+ const rowSelection = {
35
+ selectedRowKeys,
36
+ onChange : setSelectedRowKeys ,
37
+ selections : [ Table . SELECTION_ALL , Table . SELECTION_INVERT ]
38
+ }
39
+
33
40
const { AppStore } = useStore ( )
34
41
const { hosts, loading } = AppStore
35
42
if ( loading ) {
@@ -38,6 +45,7 @@ export default observer((props) => {
38
45
39
46
const data = hosts . map ( ( host ) => {
40
47
return {
48
+ key : getHostKey ( host ) ,
41
49
host,
42
50
isRegex : Boolean ( host . isRegex )
43
51
}
@@ -64,7 +72,7 @@ export default observer((props) => {
64
72
{
65
73
title : 'Action' ,
66
74
key : 'action' ,
67
- render : ( { host, isRegex } ) => {
75
+ render : ( { host } ) => {
68
76
const name = getHostName ( host )
69
77
return (
70
78
< Popconfirm
@@ -82,16 +90,57 @@ export default observer((props) => {
82
90
}
83
91
}
84
92
]
93
+ const hasSelected = selectedRowKeys . length > 0
85
94
return (
86
95
< div style = { { overflow : 'scroll' , height : '100vh' } } >
87
96
< Affix offsetTop = { 0.01 } >
88
97
< PageHeader
89
98
ghost = { false }
90
99
onBack = { ( ) => history . goBack ( ) }
91
100
title = 'All Hosts & Patterns'
101
+ extra = {
102
+ < >
103
+ < span style = { { marginLeft : 8 } } >
104
+ { hasSelected
105
+ ? `Selected ${ selectedRowKeys . length } host${
106
+ selectedRowKeys . length > 1 ? 's' : ''
107
+ } `
108
+ : '' }
109
+ </ span >
110
+ < Popconfirm
111
+ disabled = { ! hasSelected }
112
+ title = { `Are you sure delete all selected host${
113
+ selectedRowKeys . length > 1 ? 's' : ''
114
+ } `}
115
+ onConfirm = { ( ) => {
116
+ const toDelete = new Set ( selectedRowKeys )
117
+ data
118
+ . filter ( ( x ) => toDelete . has ( x . key ) )
119
+ . map ( ( x ) => x . host )
120
+ . forEach ( ( host ) => AppStore . removeHost ( { host } ) )
121
+ message . success (
122
+ `Successfully remove all selected host${
123
+ selectedRowKeys . length > 1 ? 's' : ''
124
+ } `
125
+ )
126
+ } }
127
+ okText = 'Yes'
128
+ cancelText = 'No'
129
+ >
130
+ < Button type = 'danger' disabled = { ! hasSelected } >
131
+ Delete
132
+ </ Button >
133
+ </ Popconfirm >
134
+ </ >
135
+ }
92
136
/>
93
137
</ Affix >
94
- < Table columns = { columns } dataSource = { data } pagination = { false } />
138
+ < Table
139
+ columns = { columns }
140
+ rowSelection = { rowSelection }
141
+ dataSource = { data }
142
+ pagination = { false }
143
+ />
95
144
</ div >
96
145
)
97
146
} )
0 commit comments