refactor: table filters ux
This commit is contained in:
jialin
@@ -1,238 +0,0 @@
|
||||
import IconFont from '@/components/icon-font';
|
||||
import OverlayScroller from '@/components/overlay-scroller';
|
||||
import { CloseCircleFilled } from '@ant-design/icons';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Button, Divider, Form, Popover } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const Container = styled.div`
|
||||
padding: 12px 8px;
|
||||
.title {
|
||||
font-weight: 500;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.btn-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 24px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
.buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
`;
|
||||
|
||||
const Filters = styled.span`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 0;
|
||||
cursor: pointer;
|
||||
.count {
|
||||
display: flex;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
background-color: var(--ant-color-bg-text-active);
|
||||
color: var(--ant-color-text-secondary);
|
||||
}
|
||||
`;
|
||||
|
||||
const ButtonWrapper = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
.close-btn {
|
||||
border-radius: 50%;
|
||||
color: var(--ant-color-text-quaternary);
|
||||
&:hover {
|
||||
color: var(--ant-color-text-tertiary);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.close-btn {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const FilterForm: React.FC<
|
||||
React.PropsWithChildren & {
|
||||
width?: number;
|
||||
contentHeight?: number;
|
||||
initialValues?: any;
|
||||
hasFilters?: boolean;
|
||||
placement?: 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
|
||||
onClose?: () => void;
|
||||
onValuesChange?: (ChangeValues: any, allValues: any) => void;
|
||||
}
|
||||
> = ({
|
||||
children,
|
||||
width = 300,
|
||||
contentHeight = 400,
|
||||
initialValues = {},
|
||||
placement = 'bottomLeft',
|
||||
onClose,
|
||||
onValuesChange
|
||||
}) => {
|
||||
const intl = useIntl();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [hasFilters, setHasFilters] = useState(false);
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const handleToggle = () => {
|
||||
setOpen(!open);
|
||||
};
|
||||
|
||||
const handleOpenChange = (isOpen: boolean) => {
|
||||
setOpen(isOpen);
|
||||
};
|
||||
|
||||
const handleOnReset = () => {
|
||||
form.resetFields(Object.keys(initialValues));
|
||||
setOpen(false);
|
||||
setHasFilters(false);
|
||||
form.resetFields();
|
||||
onValuesChange?.({}, form.getFieldsValue());
|
||||
};
|
||||
|
||||
const handleOnClose = () => {
|
||||
setOpen(false);
|
||||
onClose?.();
|
||||
};
|
||||
|
||||
const handleOnValuesChange = (changedValues: any, allValues: any) => {
|
||||
onValuesChange?.(changedValues, allValues);
|
||||
const hasActiveFilters = Object.values(allValues).some(
|
||||
(value) => value !== undefined && value !== null && value !== ''
|
||||
);
|
||||
setHasFilters(hasActiveFilters);
|
||||
};
|
||||
|
||||
const handleOnClear = () => {
|
||||
handleOnReset();
|
||||
};
|
||||
|
||||
const filtersCount = Object.values(form.getFieldsValue()).filter(
|
||||
(value) => value !== undefined && value !== null && value !== ''
|
||||
).length;
|
||||
|
||||
const renderFooter = () => {
|
||||
return (
|
||||
<div className="btn-wrapper">
|
||||
<Button size="middle" onClick={handleOnReset}>
|
||||
{intl.formatMessage({ id: 'common.button.reset' })}
|
||||
</Button>
|
||||
<div className="buttons">
|
||||
<Button size="middle" type="primary" onClick={handleOnClose}>
|
||||
{intl.formatMessage({ id: 'common.button.close' })}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Popover
|
||||
open={open}
|
||||
trigger={['click', 'hover']}
|
||||
arrow={false}
|
||||
placement={placement}
|
||||
content={
|
||||
<Container>
|
||||
<OverlayScroller
|
||||
maxHeight={contentHeight}
|
||||
styles={{
|
||||
wrapper: {
|
||||
paddingInline: 8
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Form
|
||||
onValuesChange={handleOnValuesChange}
|
||||
initialValues={initialValues}
|
||||
form={form}
|
||||
layout="vertical"
|
||||
styles={{
|
||||
label: {
|
||||
lineHeight: 1,
|
||||
height: 'auto',
|
||||
marginBottom: 8,
|
||||
fontWeight: 500
|
||||
},
|
||||
content: {
|
||||
minHeight: 0
|
||||
}
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Form>
|
||||
</OverlayScroller>
|
||||
</Container>
|
||||
}
|
||||
onOpenChange={handleOpenChange}
|
||||
styles={{
|
||||
container: {
|
||||
padding: 8,
|
||||
border: '1px solid var(--ant-color-split)'
|
||||
},
|
||||
root: {
|
||||
width: width
|
||||
}
|
||||
}}
|
||||
>
|
||||
<ButtonWrapper>
|
||||
<Divider orientation="vertical" style={{ height: 16 }} />
|
||||
<Button
|
||||
size="small"
|
||||
type="text"
|
||||
variant="filled"
|
||||
color="default"
|
||||
shape="round"
|
||||
>
|
||||
<Filters>
|
||||
<span
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: 'var(--ant-color-text-secondary)',
|
||||
fontWeight: 400
|
||||
}}
|
||||
>
|
||||
More Filters
|
||||
</span>
|
||||
{filtersCount > 0 ? (
|
||||
<>
|
||||
<span className="count">{filtersCount}</span>
|
||||
<span className="close-btn">
|
||||
<CloseCircleFilled
|
||||
style={{ fontSize: 16 }}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleOnClear();
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<IconFont
|
||||
type="icon-filter-list"
|
||||
style={{ fontSize: 14 }}
|
||||
></IconFont>
|
||||
)}
|
||||
</Filters>
|
||||
</Button>
|
||||
</ButtonWrapper>
|
||||
</Popover>
|
||||
);
|
||||
};
|
||||
|
||||
export default FilterForm;
|
||||
@@ -0,0 +1,155 @@
|
||||
import OverlayScroller from '@/components/overlay-scroller';
|
||||
import { CloseOutlined } from '@ant-design/icons';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Button, Form } from 'antd';
|
||||
import classNames from 'classnames';
|
||||
import React, { forwardRef, useImperativeHandle } from 'react';
|
||||
import filterFormCss from '../styles/filter-form.less';
|
||||
|
||||
const FilterForm: React.FC<
|
||||
React.PropsWithChildren & {
|
||||
ref?: any;
|
||||
width?: number;
|
||||
contentHeight?: number | string;
|
||||
initialValues?: any;
|
||||
hasFilters?: boolean;
|
||||
open?: boolean;
|
||||
onClear?: () => void;
|
||||
onClose?: () => void;
|
||||
onValuesChange?: (ChangeValues: any, allValues: any) => void;
|
||||
styles?: {
|
||||
container?: React.CSSProperties;
|
||||
wrapper?: React.CSSProperties;
|
||||
};
|
||||
}
|
||||
> = forwardRef(
|
||||
(
|
||||
{
|
||||
children,
|
||||
open,
|
||||
width = 300,
|
||||
contentHeight = 400,
|
||||
initialValues = {},
|
||||
styles,
|
||||
onClose,
|
||||
onClear,
|
||||
onValuesChange
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const intl = useIntl();
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const handleOnReset = () => {
|
||||
form.resetFields(Object.keys(initialValues));
|
||||
form.resetFields();
|
||||
onValuesChange?.({}, form.getFieldsValue());
|
||||
};
|
||||
|
||||
const handleOnClose = () => {
|
||||
onClose?.();
|
||||
};
|
||||
|
||||
const handleOnValuesChange = (changedValues: any, allValues: any) => {
|
||||
onValuesChange?.(changedValues, allValues);
|
||||
};
|
||||
|
||||
const handleOnClear = () => {
|
||||
handleOnReset();
|
||||
};
|
||||
|
||||
const filtersCount = Object.values(form.getFieldsValue()).filter(
|
||||
(value) => value !== undefined && value !== null && value !== ''
|
||||
).length;
|
||||
|
||||
const renderFooter = () => {
|
||||
return (
|
||||
<div className={filterFormCss['btn-wrapper']}>
|
||||
<Button size="middle" onClick={handleOnReset}>
|
||||
{intl.formatMessage({ id: 'common.button.reset' })}
|
||||
</Button>
|
||||
<div className={filterFormCss.buttons}>
|
||||
<Button size="middle" type="primary" onClick={handleOnClose}>
|
||||
{intl.formatMessage({ id: 'common.button.close' })}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
form,
|
||||
reset: handleOnReset,
|
||||
getValues: () => form.getFieldsValue(),
|
||||
setValues: (values: any) => form.setFieldsValue(values)
|
||||
}));
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(filterFormCss.wrapper, {
|
||||
[filterFormCss.show]: open
|
||||
})}
|
||||
style={{
|
||||
width: open ? width : 0,
|
||||
height: contentHeight,
|
||||
...styles?.wrapper
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{ width: width, ...styles?.container }}
|
||||
className={filterFormCss.container}
|
||||
>
|
||||
<div className={filterFormCss.title}>
|
||||
<span
|
||||
style={{
|
||||
fontWeight: 500,
|
||||
color: 'var(--ant-color-text-tertiary)'
|
||||
}}
|
||||
>
|
||||
{intl.formatMessage({ id: 'common.filter.label' })}
|
||||
</span>
|
||||
<Button
|
||||
size="small"
|
||||
icon={<CloseOutlined />}
|
||||
onClick={handleOnClose}
|
||||
type="text"
|
||||
style={{
|
||||
color: 'var(--ant-color-text-secondary)'
|
||||
}}
|
||||
></Button>
|
||||
</div>
|
||||
<OverlayScroller
|
||||
maxHeight={contentHeight}
|
||||
styles={{
|
||||
wrapper: {
|
||||
paddingInline: 8
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Form
|
||||
onValuesChange={handleOnValuesChange}
|
||||
initialValues={initialValues}
|
||||
form={form}
|
||||
layout="vertical"
|
||||
styles={{
|
||||
label: {
|
||||
lineHeight: 1,
|
||||
height: 'auto',
|
||||
marginBottom: 8,
|
||||
fontWeight: 500
|
||||
},
|
||||
content: {
|
||||
minHeight: 0
|
||||
}
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Form>
|
||||
</OverlayScroller>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default FilterForm;
|
||||
@@ -74,8 +74,11 @@ export const PageContainerInner: React.FC<
|
||||
);
|
||||
};
|
||||
|
||||
const PageBox: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||
return <div>{children}</div>;
|
||||
const PageBox: React.FC<{
|
||||
children: React.ReactNode;
|
||||
style?: React.CSSProperties;
|
||||
}> = ({ children, style }) => {
|
||||
return <div style={style}>{children}</div>;
|
||||
};
|
||||
|
||||
export default PageBox;
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
.wrapper {
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
width: 0;
|
||||
transition: all var(--ant-motion-duration-slow) var(--ant-motion-ease-in-out);
|
||||
border-color: var(--ant-color-split);
|
||||
|
||||
&.show {
|
||||
width: 232px;
|
||||
border-right: 1px solid var(--ant-color-split);
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 16px;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
margin-top: 8px;
|
||||
padding-inline: 8px;
|
||||
font-weight: 500;
|
||||
color: var(--ant-color-text-tertiary);
|
||||
}
|
||||
|
||||
.btn-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 24px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user