shaba/one
1
0
Fork 0
mirror of https://github.com/OpenNebula/one.git synced 2025-03-21 14:50:08 +03:00
Code Releases Wiki Activity

M #~: Add styles on datatable utils (#2130)

Browse Source
This commit is contained in:
Sergio Betanzos 2022-06-06 17:25:10 +02:00 committed by GitHub
parent f99cee59cb
commit 62424b9c15
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalFilter.js
View File

@ -18,7 +18,7 @@ import PropTypes from 'prop-types'
import { Stack, Button } from '@mui/material'
import { Filter } from 'iconoir-react'
import { TableInstance, UseTableInstanceProps } from 'react-table'
import { UseTableInstanceProps, UseFiltersState } from 'react-table'
import HeaderPopover from 'client/components/Header/Popover'
import { Translate } from 'client/components/HOC'
@ -29,19 +29,25 @@ import { T } from 'client/constants'
*
* @param {object} props - Props
* @param {string} [props.className] - Class name for the container
* @param {TableInstance} props.useTableProps - Table props
* @param {UseTableInstanceProps} props.useTableProps - Table props
* @returns {ReactElement} Component JSX
*/
const GlobalFilter = ({ className, useTableProps }) => {
/** @type {UseTableInstanceProps} */
const { rows, columns, setAllFilters } = useTableProps
const { rows, columns, setAllFilters, state } = useTableProps
/** @type {UseFiltersState} */
const { filters } = state
const columnsCanFilter = useMemo(
() => columns.filter(({ canFilter }) => canFilter),
[columns]
)
return !columnsCanFilter.length ? null : (
if (columnsCanFilter.length === 0) {
return null
}
return (
<Stack className={className} direction="row" gap="0.5em" flexWrap="wrap">
<HeaderPopover
id="filter-by-button"
@ -49,7 +55,8 @@ const GlobalFilter = ({ className, useTableProps }) => {
buttonLabel={T.FilterBy}
buttonProps={{
'data-cy': 'filter-by-button',
variant: 'outlined',
disableElevation: true,
variant: filters?.length > 0 ? 'contained' : 'outlined',
color: 'secondary',
disabled: rows?.length === 0,
}}

7
src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalSort.js
View File

@ -19,7 +19,7 @@ import PropTypes from 'prop-types'
import { SortDown, ArrowDown, ArrowUp } from 'iconoir-react'
import { MenuItem, MenuList, Stack } from '@mui/material'
import {
TableInstance,
UseTableInstanceProps,
UseSortByInstanceProps,
UseSortByState,
} from 'react-table'
@ -33,7 +33,7 @@ import { T } from 'client/constants'
*
* @param {object} props - Props
* @param {string} [props.className] - Class name for the container
* @param {TableInstance} props.useTableProps - Table props
* @param {UseTableInstanceProps} props.useTableProps - Table props
* @returns {ReactElement} Component JSX
*/
const GlobalSort = ({ className, useTableProps }) => {
@ -75,7 +75,8 @@ const GlobalSort = ({ className, useTableProps }) => {
buttonLabel={T.SortBy}
buttonProps={{
'data-cy': 'sort-by-button',
variant: 'outlined',
disableElevation: true,
variant: sortBy?.length > 0 ? 'contained' : 'outlined',
color: 'secondary',
}}
popperProps={{ placement: 'bottom-end' }}