@ -131,105 +131,111 @@ class TableOptionsModal extends Component {
isOpen = { isOpen }
onModalClose = { onModalClose }
>
< ModalContent onModalClose = { onModalClose } >
< ModalHeader >
{
isOpen ?
< ModalContent onModalClose = { onModalClose } >
< ModalHeader >
Table Options
< / M o d a l H e a d e r >
< ModalBody >
< Form >
{
hasPageSize &&
< FormGroup >
< FormLabel > Page Size < / F o r m L a b e l >
< FormInputGroup
type = { inputTypes . NUMBER }
name = "pageSize"
value = { pageSize || 0 }
helpText = "Number of items to show on each page"
errors = { pageSizeError ? [ { message : pageSizeError } ] : undefined }
onChange = { this . onPageSizeChange }
/ >
< / F o r m G r o u p >
}
{
! ! OptionsComponent &&
< OptionsComponent
onTableOptionChange = { onTableOptionChange }
/ >
}
{
canModifyColumns &&
< FormGroup >
< FormLabel > Columns < / F o r m L a b e l >
< div >
< FormInputHelpText
text = "Choose which columns are visible and which order they appear in"
/ >
< div className = { styles . columns } >
{
columns . map ( ( column , index ) => {
const {
name ,
label ,
columnLabel ,
isVisible ,
isModifiable
} = column ;
if ( isModifiable !== false ) {
return (
< TableOptionsColumnDragSource
key = { name }
name = { name }
label = { label || columnLabel }
isVisible = { isVisible }
isModifiable = { true }
index = { index }
isDragging = { isDragging }
isDraggingUp = { isDraggingUp }
isDraggingDown = { isDraggingDown }
onVisibleChange = { this . onVisibleChange }
onColumnDragMove = { this . onColumnDragMove }
onColumnDragEnd = { this . onColumnDragEnd }
/ >
) ;
< / M o d a l H e a d e r >
< ModalBody >
< Form >
{
hasPageSize ?
< FormGroup >
< FormLabel > Page Size < / F o r m L a b e l >
< FormInputGroup
type = { inputTypes . NUMBER }
name = "pageSize"
value = { pageSize || 0 }
helpText = "Number of items to show on each page"
errors = { pageSizeError ? [ { message : pageSizeError } ] : undefined }
onChange = { this . onPageSizeChange }
/ >
< / F o r m G r o u p > :
null
}
{
OptionsComponent ?
< OptionsComponent
onTableOptionChange = { onTableOptionChange }
/ > : n u l l
}
{
canModifyColumns ?
< FormGroup >
< FormLabel > Columns < / F o r m L a b e l >
< div >
< FormInputHelpText
text = "Choose which columns are visible and which order they appear in"
/ >
< div className = { styles . columns } >
{
columns . map ( ( column , index ) => {
const {
name ,
label ,
columnLabel ,
isVisible ,
isModifiable
} = column ;
if ( isModifiable !== false ) {
return (
< TableOptionsColumnDragSource
key = { name }
name = { name }
label = { label || columnLabel }
isVisible = { isVisible }
isModifiable = { true }
index = { index }
isDragging = { isDragging }
isDraggingUp = { isDraggingUp }
isDraggingDown = { isDraggingDown }
onVisibleChange = { this . onVisibleChange }
onColumnDragMove = { this . onColumnDragMove }
onColumnDragEnd = { this . onColumnDragEnd }
/ >
) ;
}
return (
< TableOptionsColumn
key = { name }
name = { name }
label = { label || columnLabel }
isVisible = { isVisible }
index = { index }
isModifiable = { false }
onVisibleChange = { this . onVisibleChange }
/ >
) ;
} )
}
return (
< TableOptionsColumn
key = { name }
name = { name }
label = { label || columnLabel }
isVisible = { isVisible }
index = { index }
isModifiable = { false }
onVisibleChange = { this . onVisibleChange }
/ >
) ;
} )
}
< TableOptionsColumnDragPreview / >
< / d i v >
< / d i v >
< / F o r m G r o u p >
}
< / F o r m >
< / M o d a l B o d y >
< ModalFooter >
< Button
onPress = { onModalClose }
>
< TableOptionsColumnDragPreview / >
< / d i v >
< / d i v >
< / F o r m G r o u p > :
null
}
< / F o r m >
< / M o d a l B o d y >
< ModalFooter >
< Button
onPress = { onModalClose }
>
Close
< / B u t t o n >
< / M o d a l F o o t e r >
< / M o d a l C o n t e n t >
< / B u t t o n >
< / M o d a l F o o t e r >
< / M o d a l C o n t e n t > :
null
}
< / M o d a l >
) ;
}
Qstick
6 years ago