fix(client): styling of the filter component

This commit is contained in:
chenos 2022-04-07 19:19:08 +08:00
parent e67a686231
commit 3e574662cb
3 changed files with 21 additions and 12 deletions

View File

@ -29,7 +29,8 @@ export const Filter: any = observer((props: any) => {
<FilterContext.Provider <FilterContext.Provider
value={{ field, fieldSchema, dynamicComponent, options: options || field.dataSource || [] }} value={{ field, fieldSchema, dynamicComponent, options: options || field.dataSource || [] }}
> >
<FilterGroup {...props} /> <FilterGroup {...props} bordered={false} />
{/* <pre>{JSON.stringify(field.value, null, 2)}</pre> */}
</FilterContext.Provider> </FilterContext.Provider>
</div> </div>
); );

View File

@ -8,6 +8,7 @@ import { FilterLogicContext, RemoveConditionContext } from './context';
import { FilterItems } from './FilterItems'; import { FilterItems } from './FilterItems';
export const FilterGroup = connect((props) => { export const FilterGroup = connect((props) => {
const { bordered = true } = props;
const field = useField<ObjectFieldModel>(); const field = useField<ObjectFieldModel>();
const remove = useContext(RemoveConditionContext); const remove = useContext(RemoveConditionContext);
const { t } = useTranslation(); const { t } = useTranslation();
@ -19,25 +20,30 @@ export const FilterGroup = connect((props) => {
[value]: [...(obj[logic] || [])], [value]: [...(obj[logic] || [])],
}; };
}; };
console.log('logic', logic);
return ( return (
<FilterLogicContext.Provider value={logic}> <FilterLogicContext.Provider value={logic}>
<div <div
style={{ style={bordered ? {
position: 'relative', position: 'relative',
border: '1px dashed #dedede', border: '1px dashed #dedede',
padding: 14, padding: 14,
marginBottom: 8, marginBottom: 8,
} : {
position: 'relative',
marginBottom: 8,
}} }}
> >
{remove && ( {remove && (
<CloseCircleOutlined <a>
style={{ <CloseCircleOutlined
position: 'absolute', style={{
right: 10, position: 'absolute',
}} right: 10,
onClick={() => remove()} top: 10,
/> }}
onClick={() => remove()}
/>
</a>
)} )}
<div style={{ marginBottom: 8 }}> <div style={{ marginBottom: 8 }}>
<Trans> <Trans>

View File

@ -43,12 +43,14 @@ export const FilterItem = observer((props: any) => {
{!operator?.noValue && {!operator?.noValue &&
React.createElement(DynamicComponent, { React.createElement(DynamicComponent, {
value, value,
schema, schema: {},
onChange(value) { onChange(value) {
setValue(value); setValue(value);
}, },
})} })}
<CloseCircleOutlined onClick={() => remove()} /> <a>
<CloseCircleOutlined onClick={() => remove()} />
</a>
</Space> </Space>
</div> </div>
); );