Skip to content
This repository was archived by the owner on Nov 22, 2022. It is now read-only.

Commit 581ee6c

Browse files
Add column actions in UI
1 parent 0b45f19 commit 581ee6c

File tree

1 file changed

+55
-15
lines changed
  • packages/builder/src/components/ComponentOptions/components/Content/Loop/Grid

1 file changed

+55
-15
lines changed

packages/builder/src/components/ComponentOptions/components/Content/Loop/Grid/header.js

Lines changed: 55 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,12 @@ import { InputGroupButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem,
44
InputGroup } from 'reactstrap'
55
import classnames from 'classnames'
66

7+
import { useArrayContext } from '../../../../../Form/array'
8+
import { ButtonCell } from '../../../../../Form/table'
79
import Icon from '../../../../../Icon'
810
import { FastField, useField } from 'formik'
911

10-
const CellTypeDropdown = ({ name, disabled=false }) => {
12+
const CellTypeDropdown = ({ name, index, actions, disabled=false }) => {
1113
const [field, , helpers] = useField(name)
1214
const [dropdownOpen, setDropdownOpen] = useState(false)
1315

@@ -61,31 +63,69 @@ const CellTypeDropdown = ({ name, disabled=false }) => {
6163
>
6264
Boolean <span className="text-muted">(binary)</span>
6365
</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+
}
6483
</DropdownMenu>
6584
</InputGroupButtonDropdown>
6685
)
6786
}
6887

69-
export const HeaderCell = ({ index }) =>
88+
export const HeaderCell = ({ index, actions }) =>
7089
<InputGroup>
7190
<FastField
7291
name={ `templateParameters.columns[${ index }].name` }
7392
placeholder={ `parameter${ index }` }
7493
className="form-control text-monospace font-weight-bolder"
7594
style={{ height: '42px' }}
7695
/>
77-
<CellTypeDropdown name={ `templateParameters.columns[${ index }].type` } />
96+
<CellTypeDropdown
97+
name={ `templateParameters.columns[${ index }].type` }
98+
index={ index }
99+
actions={ actions }
100+
/>
78101
</InputGroup>
79102

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

Comments
 (0)