@@ -4,10 +4,12 @@ import { InputGroupButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem,
4
4
InputGroup } from 'reactstrap'
5
5
import classnames from 'classnames'
6
6
7
+ import { useArrayContext } from '../../../../../Form/array'
8
+ import { ButtonCell } from '../../../../../Form/table'
7
9
import Icon from '../../../../../Icon'
8
10
import { FastField , useField } from 'formik'
9
11
10
- const CellTypeDropdown = ( { name, disabled= false } ) => {
12
+ const CellTypeDropdown = ( { name, index , actions , disabled= false } ) => {
11
13
const [ field , , helpers ] = useField ( name )
12
14
const [ dropdownOpen , setDropdownOpen ] = useState ( false )
13
15
@@ -61,31 +63,69 @@ const CellTypeDropdown = ({ name, disabled=false }) => {
61
63
>
62
64
Boolean < span className = "text-muted" > (binary)</ span >
63
65
</ DropdownItem >
66
+ {
67
+ actions
68
+ ? < div >
69
+ < DropdownItem divider />
70
+ < DropdownItem header >
71
+ Actions
72
+ </ DropdownItem >
73
+ {
74
+ Object . entries ( actions ) . map ( ( [ k , v ] , i ) =>
75
+ < DropdownItem onClick = { ( ) => v ( index ) } key = { i } >
76
+ { k }
77
+ </ DropdownItem >
78
+ )
79
+ }
80
+ </ div >
81
+ : < div > </ div >
82
+ }
64
83
</ DropdownMenu >
65
84
</ InputGroupButtonDropdown >
66
85
)
67
86
}
68
87
69
- export const HeaderCell = ( { index } ) =>
88
+ export const HeaderCell = ( { index, actions } ) =>
70
89
< InputGroup >
71
90
< FastField
72
91
name = { `templateParameters.columns[${ index } ].name` }
73
92
placeholder = { `parameter${ index } ` }
74
93
className = "form-control text-monospace font-weight-bolder"
75
94
style = { { height : '42px' } }
76
95
/>
77
- < CellTypeDropdown name = { `templateParameters.columns[${ index } ].type` } />
96
+ < CellTypeDropdown
97
+ name = { `templateParameters.columns[${ index } ].type` }
98
+ index = { index }
99
+ actions = { actions }
100
+ />
78
101
</ InputGroup >
79
102
80
- export default ( { name, columns } ) =>
81
- < thead >
82
- < tr >
83
- < th > </ th >
84
- { Array ( columns ) . fill ( null ) . map ( ( _ , i ) =>
85
- < th key = { `${ name } -header-${ i } ` } >
86
- < HeaderCell index = { i } />
87
- </ th >
88
- ) }
89
- < th > </ th >
90
- </ tr >
91
- </ thead >
103
+ export default ( { name, columns } ) => {
104
+ const { addColumn, fillColumn, clearColumn, deleteColumn } = useArrayContext ( )
105
+
106
+ return (
107
+ < thead >
108
+ < tr >
109
+ < th > </ th >
110
+ { Array ( columns ) . fill ( null ) . map ( ( _ , i ) =>
111
+ < th key = { `${ name } -header-${ i } ` } >
112
+ < HeaderCell
113
+ index = { i }
114
+ actions = { {
115
+ 'Fill' : fillColumn ,
116
+ 'Clear' : clearColumn ,
117
+ 'Delete' : deleteColumn ,
118
+ } }
119
+ />
120
+ </ th >
121
+ ) }
122
+ < ButtonCell
123
+ type = "th" icon = "plus"
124
+ style = { { height : '42px' } }
125
+ onClick = { ( ) => addColumn ( '' , { name : '' , type : 'string' } ) }
126
+ disabled = { columns >= 12 }
127
+ />
128
+ </ tr >
129
+ </ thead >
130
+ )
131
+ }
0 commit comments