Enhance SimpleDateTimePropertyFilter with MissingPlaceholder and Filter Optimization
- Added MissingPlaceholder component to display a message when no options are found. - Introduced omitUndefinedValues utility to filter out undefined values from filter objects, improving data handling. - Updated loading state initialization to reflect visibility status. - Optimized filter handling for better performance and clarity in the SimpleDateTimePropertyFilter component.
This commit is contained in:
parent
3352c25819
commit
d180f2217a
@ -4,6 +4,7 @@ import PropTypes from 'prop-types'
|
|||||||
import dayjs from 'dayjs'
|
import dayjs from 'dayjs'
|
||||||
import { ApiServerContext } from '../context/ApiServerContext'
|
import { ApiServerContext } from '../context/ApiServerContext'
|
||||||
import { LoadingOutlined, CaretDownOutlined } from '@ant-design/icons'
|
import { LoadingOutlined, CaretDownOutlined } from '@ant-design/icons'
|
||||||
|
import MissingPlaceholder from './MissingPlaceholder'
|
||||||
import {
|
import {
|
||||||
matchesFilterExpression,
|
matchesFilterExpression,
|
||||||
valuesToExpression
|
valuesToExpression
|
||||||
@ -414,6 +415,13 @@ const expandKeysForChecked = (keys, nodeByKey) => {
|
|||||||
|
|
||||||
const EMPTY_OBJECT = {}
|
const EMPTY_OBJECT = {}
|
||||||
|
|
||||||
|
const omitUndefinedValues = (obj) =>
|
||||||
|
Object.fromEntries(
|
||||||
|
Object.entries(obj || {}).filter(
|
||||||
|
([, value]) => value !== undefined && value !== ''
|
||||||
|
)
|
||||||
|
)
|
||||||
|
|
||||||
const stableStringify = (value) => {
|
const stableStringify = (value) => {
|
||||||
if (Array.isArray(value)) {
|
if (Array.isArray(value)) {
|
||||||
return `[${value.map(stableStringify).join(',')}]`
|
return `[${value.map(stableStringify).join(',')}]`
|
||||||
@ -445,16 +453,19 @@ const SimpleDateTimePropertyFilter = ({
|
|||||||
getModelPropertyValuesRef.current = getModelPropertyValues
|
getModelPropertyValuesRef.current = getModelPropertyValues
|
||||||
|
|
||||||
const [dates, setDates] = useState([])
|
const [dates, setDates] = useState([])
|
||||||
const [loading, setLoading] = useState(false)
|
const [loading, setLoading] = useState(() => visible)
|
||||||
const [localChecked, setLocalChecked] = useState(null)
|
const [localChecked, setLocalChecked] = useState(null)
|
||||||
|
|
||||||
const filterForValues = useMemo(() => {
|
const filterForValues = useMemo(() => {
|
||||||
const next = { ...(filter || {}) }
|
const next = omitUndefinedValues(filter)
|
||||||
if (propertyName) delete next[propertyName]
|
if (propertyName) delete next[propertyName]
|
||||||
return next
|
return next
|
||||||
}, [filter, propertyName])
|
}, [filter, propertyName])
|
||||||
|
|
||||||
const masterFilterForValues = masterFilter || EMPTY_OBJECT
|
const masterFilterForValues = useMemo(
|
||||||
|
() => omitUndefinedValues(masterFilter),
|
||||||
|
[masterFilter]
|
||||||
|
)
|
||||||
|
|
||||||
const filterHash = useMemo(
|
const filterHash = useMemo(
|
||||||
() => getFilterHash(filterForValues, masterFilterForValues),
|
() => getFilterHash(filterForValues, masterFilterForValues),
|
||||||
@ -648,6 +659,17 @@ const SimpleDateTimePropertyFilter = ({
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (!loading && treeData.length === 0) {
|
||||||
|
return (
|
||||||
|
<MissingPlaceholder
|
||||||
|
message='No options found.'
|
||||||
|
hasBackground={false}
|
||||||
|
hasBorder={false}
|
||||||
|
padding='0'
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Spin spinning={loading} indicator={<LoadingOutlined spin />}>
|
<Spin spinning={loading} indicator={<LoadingOutlined spin />}>
|
||||||
{treeData.length > 0 ? (
|
{treeData.length > 0 ? (
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user