feat: optimize checkbox in filter form (#1024)
Reviewed-on: daoyoucloud/tachybase#1024
This commit is contained in:
parent
13f4fd4a7e
commit
6310270051
@ -144,6 +144,23 @@ export const transformToFilter = (
|
|||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 处理布尔类型
|
||||||
|
if (operators[key] === '$isTruly' || operators[key] === '$isFalsy') {
|
||||||
|
if (value === 'true') {
|
||||||
|
return {
|
||||||
|
[key]: {
|
||||||
|
$isTruly: true,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
} else if (value === 'false') {
|
||||||
|
return {
|
||||||
|
[key]: {
|
||||||
|
$isFalsy: true,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
[key]: {
|
[key]: {
|
||||||
[operators[key] || '$eq']: value,
|
[operators[key] || '$eq']: value,
|
||||||
|
@ -826,5 +826,8 @@
|
|||||||
"all": "all",
|
"all": "all",
|
||||||
"enabled": "enabled",
|
"enabled": "enabled",
|
||||||
"disabled": "disabled",
|
"disabled": "disabled",
|
||||||
|
"Designer properties": "Designer properties",
|
||||||
|
"Load": "Load",
|
||||||
|
"Dump": "Dump",
|
||||||
"Chang on Parent":"Chang on Parent"
|
"Chang on Parent":"Chang on Parent"
|
||||||
}
|
}
|
||||||
|
@ -927,5 +927,8 @@
|
|||||||
"all": "全部",
|
"all": "全部",
|
||||||
"enabled": "启用",
|
"enabled": "启用",
|
||||||
"disabled": "禁用",
|
"disabled": "禁用",
|
||||||
|
"Designer properties": "设计属性",
|
||||||
|
"Load": "加载",
|
||||||
|
"Dump": "存储",
|
||||||
"Chang on Parent": "选择父级"
|
"Chang on Parent": "选择父级"
|
||||||
}
|
}
|
||||||
|
@ -0,0 +1,46 @@
|
|||||||
|
import { Field, useField, useFieldSchema } from '@tachybase/schema';
|
||||||
|
import { SchemaSettings } from '../../../../application/schema-settings/SchemaSettings';
|
||||||
|
import { useColumnSchema } from '../../../../schema-component/antd/table-v2/Table.Column.Decorator';
|
||||||
|
import { useDesignable } from '../../../../schema-component';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
export const checkboxComponentFieldSettings = new SchemaSettings({
|
||||||
|
name: 'fieldSettings:component:Checkbox',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
name: 'fieldComponent',
|
||||||
|
type: 'select',
|
||||||
|
useComponentProps() {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const field = useField<Field>();
|
||||||
|
const { fieldSchema: tableColumnSchema } = useColumnSchema();
|
||||||
|
const schema = useFieldSchema();
|
||||||
|
const fieldSchema = tableColumnSchema || schema;
|
||||||
|
const fieldModeOptions = [
|
||||||
|
{ label: t('Checkbox'), value: 'Checkbox' },
|
||||||
|
{ label: t('Radio group'), value: 'Radio group' },
|
||||||
|
];
|
||||||
|
const { dn } = useDesignable();
|
||||||
|
return {
|
||||||
|
title: t('Field component'),
|
||||||
|
options: fieldModeOptions,
|
||||||
|
value: fieldSchema['x-component-props'].mode || 'Checkbox',
|
||||||
|
onChange(mode) {
|
||||||
|
const schema = {
|
||||||
|
['x-uid']: fieldSchema['x-uid'],
|
||||||
|
};
|
||||||
|
fieldSchema['x-component-props'] = fieldSchema['x-component-props'] || {};
|
||||||
|
fieldSchema['x-component-props']['mode'] = mode;
|
||||||
|
schema['x-component-props'] = fieldSchema['x-component-props'];
|
||||||
|
field.componentProps = field.componentProps || {};
|
||||||
|
field.componentProps.mode = mode;
|
||||||
|
|
||||||
|
void dn.emit('patch', {
|
||||||
|
schema,
|
||||||
|
});
|
||||||
|
dn.refresh();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
@ -1,12 +1,13 @@
|
|||||||
import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
|
import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
|
||||||
import { connect, mapProps, mapReadPretty, useField } from '@tachybase/schema';
|
import { connect, mapProps, mapReadPretty, useField } from '@tachybase/schema';
|
||||||
import { isValid } from '@tachybase/schema';
|
import { isValid } from '@tachybase/schema';
|
||||||
import { Checkbox as AntdCheckbox, Tag } from 'antd';
|
import { Checkbox as AntdCheckbox, Radio, Tag } from 'antd';
|
||||||
import type { CheckboxGroupProps, CheckboxProps } from 'antd/es/checkbox';
|
import type { CheckboxGroupProps, CheckboxProps } from 'antd/es/checkbox';
|
||||||
import uniq from 'lodash/uniq';
|
import uniq from 'lodash/uniq';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { useCollectionField } from '../../../data-source/collection-field/CollectionFieldProvider';
|
import { useCollectionField } from '../../../data-source/collection-field/CollectionFieldProvider';
|
||||||
import { EllipsisWithTooltip } from '../input/EllipsisWithTooltip';
|
import { EllipsisWithTooltip } from '../input/EllipsisWithTooltip';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
type ComposedCheckbox = React.ForwardRefExoticComponent<
|
type ComposedCheckbox = React.ForwardRefExoticComponent<
|
||||||
Pick<Partial<any>, string | number | symbol> & React.RefAttributes<unknown>
|
Pick<Partial<any>, string | number | symbol> & React.RefAttributes<unknown>
|
||||||
@ -23,7 +24,7 @@ const ReadPretty = (props) => {
|
|||||||
return props.showUnchecked ? <CloseOutlined style={{ color: '#ff4d4f' }} /> : null;
|
return props.showUnchecked ? <CloseOutlined style={{ color: '#ff4d4f' }} /> : null;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const Checkbox: ComposedCheckbox = connect(
|
export const InternalCheckbox: ComposedCheckbox = connect(
|
||||||
(props: any) => {
|
(props: any) => {
|
||||||
const changeHandler = (val) => {
|
const changeHandler = (val) => {
|
||||||
props?.onChange(val);
|
props?.onChange(val);
|
||||||
@ -37,6 +38,29 @@ export const Checkbox: ComposedCheckbox = connect(
|
|||||||
mapReadPretty(ReadPretty),
|
mapReadPretty(ReadPretty),
|
||||||
);
|
);
|
||||||
|
|
||||||
|
export const InternalRadioGroup: ComposedCheckbox = connect((props: any) => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
return (
|
||||||
|
<Radio.Group
|
||||||
|
{...props}
|
||||||
|
options={[
|
||||||
|
{ label: t('?'), value: undefined },
|
||||||
|
{ label: t('Yes'), value: 'true' },
|
||||||
|
{ label: t('No'), value: 'false' },
|
||||||
|
]}
|
||||||
|
optionType="button"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}, mapReadPretty(ReadPretty));
|
||||||
|
|
||||||
|
export const Checkbox = (props) => {
|
||||||
|
if (props.mode === 'Radio group') {
|
||||||
|
return <InternalRadioGroup {...props} />;
|
||||||
|
} else {
|
||||||
|
return <InternalCheckbox {...props} />;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
Checkbox.ReadPretty = ReadPretty;
|
Checkbox.ReadPretty = ReadPretty;
|
||||||
|
|
||||||
Checkbox.__ANT_CHECKBOX = true;
|
Checkbox.__ANT_CHECKBOX = true;
|
||||||
|
@ -53,6 +53,7 @@ import { subTablePopoverComponentFieldSettings } from '../modules/fields/compone
|
|||||||
import { tagComponentFieldSettings } from '../modules/fields/component/Tag/tagComponentFieldSettings';
|
import { tagComponentFieldSettings } from '../modules/fields/component/Tag/tagComponentFieldSettings';
|
||||||
import { unixTimestampComponentFieldSettings } from '../modules/fields/component/UnixTimestamp/unixTimestampComponentFieldSettings';
|
import { unixTimestampComponentFieldSettings } from '../modules/fields/component/UnixTimestamp/unixTimestampComponentFieldSettings';
|
||||||
import { inputNumberComponentFieldSettings } from '../modules/fields/component/InputNumber/inputNumberComponentFieldSettings';
|
import { inputNumberComponentFieldSettings } from '../modules/fields/component/InputNumber/inputNumberComponentFieldSettings';
|
||||||
|
import { checkboxComponentFieldSettings } from '../modules/fields/component/Checkbox/checkboxComponentFieldSettings';
|
||||||
|
|
||||||
export class SchemaSettingsPlugin extends Plugin {
|
export class SchemaSettingsPlugin extends Plugin {
|
||||||
async load() {
|
async load() {
|
||||||
@ -107,6 +108,7 @@ export class SchemaSettingsPlugin extends Plugin {
|
|||||||
this.schemaSettingsManager.add(datePickerComponentFieldSettings);
|
this.schemaSettingsManager.add(datePickerComponentFieldSettings);
|
||||||
this.schemaSettingsManager.add(unixTimestampComponentFieldSettings);
|
this.schemaSettingsManager.add(unixTimestampComponentFieldSettings);
|
||||||
this.schemaSettingsManager.add(inputNumberComponentFieldSettings);
|
this.schemaSettingsManager.add(inputNumberComponentFieldSettings);
|
||||||
|
this.schemaSettingsManager.add(checkboxComponentFieldSettings);
|
||||||
|
|
||||||
this.schemaSettingsManager.add(fileManagerComponentFieldSettings);
|
this.schemaSettingsManager.add(fileManagerComponentFieldSettings);
|
||||||
this.schemaSettingsManager.add(tagComponentFieldSettings);
|
this.schemaSettingsManager.add(tagComponentFieldSettings);
|
||||||
|
Loading…
Reference in New Issue
Block a user