Enhance FilterInput Component with Improved Styling and Structure
- Refactored FilterInput component to utilize CSS classes for operand icons, tags, and chips, improving maintainability and readability. - Added new CSS styles in App.css for filter input elements, enhancing visual consistency and user experience. - Updated component structure to streamline rendering and improve performance, including adjustments to the property filter layout and scrollbar handling.
This commit is contained in:
parent
aef6ec8749
commit
c23a4f8f64
@ -2358,3 +2358,189 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
|
||||
.ant-table-wrapper tfoot > tr > td {
|
||||
padding: 12px 8px;
|
||||
}
|
||||
|
||||
/* FilterInput */
|
||||
.filter-input-operand-icon {
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.filter-input-operand-icon--chevron {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.filter-input-operand-icon--gt {
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
.filter-input-operand-icon--lt {
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
.filter-input-wildcard,
|
||||
[data-wildcard] {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.filter-input-operand-tag {
|
||||
margin-inline-end: 0;
|
||||
margin-right: 0;
|
||||
height: 18px;
|
||||
cursor: default;
|
||||
padding: 0 4px;
|
||||
margin-top: -2px;
|
||||
line-height: 1.37;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
flex-shrink: 0;
|
||||
font-weight: 700;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.filter-input-operand-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
margin: 0 2px;
|
||||
user-select: none;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.filter-input-property-filter {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 280px;
|
||||
margin: 0;
|
||||
vertical-align: top;
|
||||
overflow: hidden;
|
||||
--property-filter-panel-max-height: 220px;
|
||||
}
|
||||
|
||||
.filter-input-property-filter-quick {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.filter-input-property-filter-divider {
|
||||
margin: 4px 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.filter-input-property-filter
|
||||
> .filter-input-property-filter-scroll.scrollbox-inner {
|
||||
height: auto !important;
|
||||
max-height: var(--property-filter-panel-max-height);
|
||||
max-width: 280px;
|
||||
flex-shrink: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.filter-input-property-filter
|
||||
> .filter-input-property-filter-scroll.scrollbox-inner
|
||||
.simplebar-wrapper {
|
||||
max-height: var(--property-filter-panel-max-height);
|
||||
}
|
||||
|
||||
.filter-input-property-filter .simplebar-content-wrapper {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.filter-input-property-filter .simplebar-content {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.filter-input-property-filter-body {
|
||||
padding: 12px 26px 12px 16px;
|
||||
max-width: 280px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.filter-input-property-filter-content {
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.filter-input-affix {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.filter-input-affix:not(.filter-input-affix--disabled) {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.filter-input-affix--disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.filter-input-affix--elevated {
|
||||
z-index: 3 !important;
|
||||
}
|
||||
|
||||
.filter-input-editor::-webkit-scrollbar {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.filter-input-editor {
|
||||
display: block;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
flex: auto;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
word-break: keep-all;
|
||||
overflow-wrap: normal;
|
||||
caret-color: var(--ant-color-text, inherit);
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.filter-input-affix--disabled .filter-input-editor {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.filter-input-placeholder {
|
||||
position: absolute;
|
||||
inset-inline-start: var(--ant-input-padding-inline, 11px);
|
||||
inset-inline-end: var(--ant-input-padding-inline, 11px);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--ant-color-text-placeholder, rgba(0, 0, 0, 0.25));
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.filter-input-affix--has-clear .filter-input-placeholder {
|
||||
inset-inline-end: calc(var(--ant-input-padding-inline, 11px) + 22px);
|
||||
}
|
||||
|
||||
.filter-input-popover .ant-popover-inner {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.filter-input-popover-anchor {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@ import {
|
||||
useRef,
|
||||
useState
|
||||
} from 'react'
|
||||
import { ConfigProvider, Popover, Tag, theme } from 'antd'
|
||||
import { ConfigProvider, Popover, Tag } from 'antd'
|
||||
import { CloseCircleFilled } from '@ant-design/icons'
|
||||
import PropTypes from 'prop-types'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
@ -28,8 +28,6 @@ import NotEqualIcon from '../../Icons/NotEqualIcon'
|
||||
import EqualIcon from '../../Icons/EqualIcon'
|
||||
import { Divider } from 'antd'
|
||||
|
||||
const operandIconStyle = { fontSize: 8 }
|
||||
|
||||
const PROPERTY_FILTER_PANEL_MAX_HEIGHT = 220
|
||||
|
||||
// Longer symbols first so ".." / "<>" / ">=" match before "." / "<" / ">".
|
||||
@ -39,22 +37,24 @@ const WILDCARDS = new Set(['*', '?'])
|
||||
const OPERANDS = [
|
||||
{
|
||||
symbol: '..',
|
||||
label: <ChevronRightIcon style={{ ...operandIconStyle, fontSize: 11 }} />,
|
||||
label: (
|
||||
<ChevronRightIcon className='filter-input-operand-icon filter-input-operand-icon--chevron' />
|
||||
),
|
||||
color: 'purple'
|
||||
},
|
||||
{
|
||||
symbol: '<>',
|
||||
label: <NotEqualIcon style={operandIconStyle} />,
|
||||
label: <NotEqualIcon className='filter-input-operand-icon' />,
|
||||
color: 'magenta'
|
||||
},
|
||||
{
|
||||
symbol: '>=',
|
||||
label: <GreaterThanOrEqualToIcon style={operandIconStyle} />,
|
||||
label: <GreaterThanOrEqualToIcon className='filter-input-operand-icon' />,
|
||||
color: 'volcano'
|
||||
},
|
||||
{
|
||||
symbol: '<=',
|
||||
label: <LessThanOrEqualToIcon style={operandIconStyle} />,
|
||||
label: <LessThanOrEqualToIcon className='filter-input-operand-icon' />,
|
||||
color: 'volcano'
|
||||
},
|
||||
{ symbol: '|', label: 'OR', color: 'cyan' },
|
||||
@ -62,18 +62,20 @@ const OPERANDS = [
|
||||
{
|
||||
symbol: '>',
|
||||
label: (
|
||||
<GreaterThanIcon style={{ ...operandIconStyle, marginLeft: '1px' }} />
|
||||
<GreaterThanIcon className='filter-input-operand-icon filter-input-operand-icon--gt' />
|
||||
),
|
||||
color: 'orange'
|
||||
},
|
||||
{
|
||||
symbol: '<',
|
||||
label: <LessThanIcon style={{ ...operandIconStyle, marginRight: '1px' }} />,
|
||||
label: (
|
||||
<LessThanIcon className='filter-input-operand-icon filter-input-operand-icon--lt' />
|
||||
),
|
||||
color: 'orange'
|
||||
},
|
||||
{
|
||||
symbol: '=',
|
||||
label: <EqualIcon style={operandIconStyle} />,
|
||||
label: <EqualIcon className='filter-input-operand-icon' />,
|
||||
color: 'green'
|
||||
}
|
||||
]
|
||||
@ -119,7 +121,7 @@ const tokenize = (raw = '') => {
|
||||
const renderWildcardNode = (char) => {
|
||||
const span = document.createElement('span')
|
||||
span.setAttribute('data-wildcard', char)
|
||||
span.style.color = 'var(--color-primary)'
|
||||
span.className = 'filter-input-wildcard'
|
||||
span.textContent = char
|
||||
return span
|
||||
}
|
||||
@ -452,7 +454,6 @@ const FilterInput = ({
|
||||
}) => {
|
||||
const { getPrefixCls, direction } = useContext(ConfigProvider.ConfigContext)
|
||||
const prefixCls = getPrefixCls('input')
|
||||
const { token } = theme.useToken()
|
||||
const { themeConfig } = useThemeContext()
|
||||
const themeConfigRef = useRef(themeConfig)
|
||||
themeConfigRef.current = themeConfig
|
||||
@ -479,6 +480,7 @@ const FilterInput = ({
|
||||
const [internalValue, setInternalValue] = useState(value ?? '')
|
||||
const [quickFiltersHeight, setQuickFiltersHeight] = useState(0)
|
||||
const [quickFilterModalOpen, setQuickFilterModalOpen] = useState(false)
|
||||
const [hover, setHover] = useState(false)
|
||||
|
||||
const clearTagRoots = useCallback(() => {
|
||||
tagRootsRef.current.forEach((root) => {
|
||||
@ -502,22 +504,7 @@ const FilterInput = ({
|
||||
<Tag
|
||||
color={operand?.color ?? 'default'}
|
||||
bordered={false}
|
||||
style={{
|
||||
marginInlineEnd: 0,
|
||||
marginRight: 0,
|
||||
height: '18px',
|
||||
cursor: 'default',
|
||||
padding: '0 4px',
|
||||
marginTop: '-2px',
|
||||
lineHeight: 1.37,
|
||||
userSelect: 'none',
|
||||
pointerEvents: 'none',
|
||||
flexShrink: 0,
|
||||
fontWeight: 700,
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
className='filter-input-operand-tag'
|
||||
>
|
||||
{operand?.label ?? symbol}
|
||||
</Tag>
|
||||
@ -530,12 +517,7 @@ const FilterInput = ({
|
||||
const wrapper = document.createElement('span')
|
||||
wrapper.setAttribute('data-operand', symbol)
|
||||
wrapper.setAttribute('contenteditable', 'false')
|
||||
wrapper.style.display = 'inline-flex'
|
||||
wrapper.style.alignItems = 'center'
|
||||
wrapper.style.verticalAlign = 'middle'
|
||||
wrapper.style.margin = '0 2px'
|
||||
wrapper.style.userSelect = 'none'
|
||||
wrapper.style.flexShrink = '0'
|
||||
wrapper.className = 'filter-input-operand-chip'
|
||||
|
||||
const root = createRoot(wrapper)
|
||||
root.render(renderTagNode(symbol, themeConfigRef.current))
|
||||
@ -922,16 +904,10 @@ const FilterInput = ({
|
||||
}}
|
||||
className='filter-input-property-filter'
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
flexDirection: 'column',
|
||||
maxWidth: 280,
|
||||
maxHeight: quickFiltersHeight + PROPERTY_FILTER_PANEL_MAX_HEIGHT,
|
||||
margin: -4,
|
||||
verticalAlign: 'top',
|
||||
overflow: 'hidden'
|
||||
'--filter-input-property-filter-max-height': `${quickFiltersHeight + PROPERTY_FILTER_PANEL_MAX_HEIGHT}px`
|
||||
}}
|
||||
>
|
||||
<div ref={quickFiltersRef} style={{ flexShrink: 0 }}>
|
||||
<div ref={quickFiltersRef} className='filter-input-property-filter-quick'>
|
||||
<QuickPropertyFilters
|
||||
modelType={propertyFilter.modelType}
|
||||
propertyName={propertyFilter.propertyName}
|
||||
@ -941,24 +917,16 @@ const FilterInput = ({
|
||||
useCard={false}
|
||||
/>
|
||||
</div>
|
||||
<Divider style={{ margin: '4px 0' }} />
|
||||
<div>
|
||||
<Divider className='filter-input-property-filter-divider' />
|
||||
</div>
|
||||
<ScrollBox
|
||||
inner
|
||||
smallPadding
|
||||
style={{
|
||||
flexShrink: 0,
|
||||
maxHeight: PROPERTY_FILTER_PANEL_MAX_HEIGHT,
|
||||
maxWidth: 280
|
||||
}}
|
||||
className='filter-input-property-filter-scroll'
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
padding: '12px 26px 12px 16px',
|
||||
maxWidth: 280,
|
||||
boxSizing: 'border-box'
|
||||
}}
|
||||
>
|
||||
<div style={{ width: 'max-content', maxWidth: '100%' }}>
|
||||
<div className='filter-input-property-filter-body'>
|
||||
<div className='filter-input-property-filter-content'>
|
||||
<SimplePropertyFilter
|
||||
modelType={propertyFilter.modelType}
|
||||
propertyName={propertyFilter.propertyName}
|
||||
@ -1062,20 +1030,18 @@ const FilterInput = ({
|
||||
const showPlaceholder = !internalValue && !focused
|
||||
const showClear = allowClear && !!internalValue && !disabled
|
||||
const affixCls = `${prefixCls}-affix-wrapper`
|
||||
const placeholderPaddingInline =
|
||||
mergedSize === 'large'
|
||||
? (token.paddingInlineLG ?? token.paddingSM + 4)
|
||||
: mergedSize === 'small'
|
||||
? (token.paddingInlineSM ?? token.paddingXS)
|
||||
: (token.paddingInline ?? token.paddingSM)
|
||||
|
||||
const input = (
|
||||
<span
|
||||
className={classNames(
|
||||
affixCls,
|
||||
'filter-input-affix',
|
||||
{
|
||||
[`${affixCls}-focused`]: focused,
|
||||
[`${affixCls}-disabled`]: disabled,
|
||||
'filter-input-affix--disabled': disabled,
|
||||
'filter-input-affix--elevated': focused || hover,
|
||||
'filter-input-affix--has-clear': showClear,
|
||||
[`${affixCls}-sm`]: mergedSize === 'small',
|
||||
[`${affixCls}-lg`]: mergedSize === 'large',
|
||||
[`${affixCls}-rtl`]: direction === 'rtl',
|
||||
@ -1087,55 +1053,21 @@ const FilterInput = ({
|
||||
hashId,
|
||||
className
|
||||
)}
|
||||
style={{
|
||||
width: '100%',
|
||||
cursor: disabled ? 'not-allowed' : 'text',
|
||||
...style,
|
||||
// Affix ::before strut needs inline-flex; display:block stacks it and inflates height.
|
||||
display: 'inline-flex',
|
||||
// Stay above Compact siblings so the focus ring isn't covered by Select/Button.
|
||||
position: 'relative',
|
||||
zIndex: focused ? 3 : style?.zIndex
|
||||
}}
|
||||
style={style}
|
||||
onClick={() => {
|
||||
if (!disabled && !quickFilterModalOpenRef.current) {
|
||||
editorRef.current?.focus()
|
||||
}
|
||||
}}
|
||||
onMouseEnter={() => {
|
||||
setHover(true)
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
setHover(false)
|
||||
}}
|
||||
>
|
||||
<style>{`
|
||||
.filter-input-editor::-webkit-scrollbar {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
.filter-input-property-filter .simplebar-content-wrapper {
|
||||
max-width: none;
|
||||
}
|
||||
.filter-input-property-filter .simplebar-content {
|
||||
display: inline-block;
|
||||
}
|
||||
`}</style>
|
||||
{showPlaceholder && (
|
||||
<span
|
||||
aria-hidden
|
||||
style={{
|
||||
position: 'absolute',
|
||||
insetInlineStart: placeholderPaddingInline,
|
||||
insetInlineEnd: showClear
|
||||
? placeholderPaddingInline + 22
|
||||
: placeholderPaddingInline,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
color: token.colorTextPlaceholder,
|
||||
pointerEvents: 'none',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
zIndex: 1
|
||||
}}
|
||||
>
|
||||
<span aria-hidden className='filter-input-placeholder'>
|
||||
{placeholder}
|
||||
</span>
|
||||
)}
|
||||
@ -1182,31 +1114,6 @@ const FilterInput = ({
|
||||
if (next !== valueRef.current) emitChange(next)
|
||||
onBlur?.(event)
|
||||
}}
|
||||
style={{
|
||||
// Match antd's `> input.ant-input` resets inside affix-wrapper
|
||||
display: 'block',
|
||||
padding: 0,
|
||||
border: 'none',
|
||||
borderRadius: 0,
|
||||
outline: 'none',
|
||||
boxShadow: 'none',
|
||||
background: 'transparent',
|
||||
flex: 'auto',
|
||||
minWidth: 0,
|
||||
width: '100%',
|
||||
fontSize: 'inherit',
|
||||
lineHeight: 'inherit',
|
||||
color: 'inherit',
|
||||
whiteSpace: 'nowrap',
|
||||
overflowX: 'auto',
|
||||
overflowY: 'hidden',
|
||||
scrollbarWidth: 'none',
|
||||
msOverflowStyle: 'none',
|
||||
wordBreak: 'keep-all',
|
||||
overflowWrap: 'normal',
|
||||
caretColor: token.colorText,
|
||||
cursor: disabled ? 'not-allowed' : 'text'
|
||||
}}
|
||||
/>
|
||||
{showClear && (
|
||||
<span className={`${prefixCls}-suffix`}>
|
||||
@ -1231,24 +1138,10 @@ const FilterInput = ({
|
||||
placement='bottomLeft'
|
||||
arrow={false}
|
||||
trigger={[]}
|
||||
styles={{
|
||||
body: {
|
||||
padding: 8
|
||||
}
|
||||
}}
|
||||
classNames={{ root: 'filter-input-popover' }}
|
||||
>
|
||||
{/* Anchor only — keep Popover from wrapping the Compact item (z-index/focus ring). */}
|
||||
<span
|
||||
aria-hidden
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
height: 0,
|
||||
pointerEvents: 'none'
|
||||
}}
|
||||
/>
|
||||
<span aria-hidden className='filter-input-popover-anchor' />
|
||||
</Popover>
|
||||
)}
|
||||
</span>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user