ruiling/tachybase_todo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: optimize checkbox in filter form (#1024)

Browse Source 
Reviewed-on: daoyoucloud/tachybase#1024
This commit is contained in:
sealday 2024-05-21 18:50:11 +08:00
parent 13f4fd4a7e
commit 6310270051
6 changed files with 97 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
packages/core/client/src/filter-provider/utils.ts
View File

@ -144,6 +144,23 @@ export const transformToFilter = (
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 {
[key]: {
[operators[key] || '$eq']: value,

3
packages/core/client/src/locale/en_US.json
View File

@ -826,5 +826,8 @@
"all": "all",
"enabled": "enabled",
"disabled": "disabled",
"Designer properties": "Designer properties",
"Load": "Load",
"Dump": "Dump",
"Chang on Parent":"Chang on Parent"
}

3
packages/core/client/src/locale/zh-CN.json
View File

@ -927,5 +927,8 @@
"all": "全部",
"enabled": "启用",
"disabled": "禁用",
"Designer properties": "设计属性",
"Load": "加载",
"Dump": "存储",
"Chang on Parent": "选择父级"
}

46
packages/core/client/src/modules/fields/component/Checkbox/checkboxComponentFieldSettings.tsx Normal file
View File

@ -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();
},
};
},
},
],
});

28
packages/core/client/src/schema-component/antd/checkbox/Checkbox.tsx
View File

@ -1,12 +1,13 @@
import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
import { connect, mapProps, mapReadPretty, useField } 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 uniq from 'lodash/uniq';
import React from 'react';
import { useCollectionField } from '../../../data-source/collection-field/CollectionFieldProvider';
import { EllipsisWithTooltip } from '../input/EllipsisWithTooltip';
import { useTranslation } from 'react-i18next';
type ComposedCheckbox = React.ForwardRefExoticComponent<
Pick<Partial<any>, string | number | symbol> & React.RefAttributes<unknown>
@ -23,7 +24,7 @@ const ReadPretty = (props) => {
return props.showUnchecked ? <CloseOutlined style={{ color: '#ff4d4f' }} /> : null;
};
export const Checkbox: ComposedCheckbox = connect(
export const InternalCheckbox: ComposedCheckbox = connect(
(props: any) => {
const changeHandler = (val) => {
props?.onChange(val);
@ -37,6 +38,29 @@ export const Checkbox: ComposedCheckbox = connect(
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.__ANT_CHECKBOX = true;

2
packages/core/client/src/schema-settings/SchemaSettingsPlugin.ts
View File

@ -53,6 +53,7 @@ import { subTablePopoverComponentFieldSettings } from '../modules/fields/compone
import { tagComponentFieldSettings } from '../modules/fields/component/Tag/tagComponentFieldSettings';
import { unixTimestampComponentFieldSettings } from '../modules/fields/component/UnixTimestamp/unixTimestampComponentFieldSettings';
import { inputNumberComponentFieldSettings } from '../modules/fields/component/InputNumber/inputNumberComponentFieldSettings';
import { checkboxComponentFieldSettings } from '../modules/fields/component/Checkbox/checkboxComponentFieldSettings';
export class SchemaSettingsPlugin extends Plugin {
async load() {
@ -107,6 +108,7 @@ export class SchemaSettingsPlugin extends Plugin {
this.schemaSettingsManager.add(datePickerComponentFieldSettings);
this.schemaSettingsManager.add(unixTimestampComponentFieldSettings);
this.schemaSettingsManager.add(inputNumberComponentFieldSettings);
this.schemaSettingsManager.add(checkboxComponentFieldSettings);
this.schemaSettingsManager.add(fileManagerComponentFieldSettings);
this.schemaSettingsManager.add(tagComponentFieldSettings);