fix(client): styling of the filter component
This commit is contained in:
parent
e67a686231
commit
3e574662cb
@ -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>
|
||||||
);
|
);
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user