refactor(client): allow select to show null option as tag in read pretty mode if configured (#4950)

* refactor(client): allow select to show null option if conifgured

* test(client): add default value in demo

* fix(client): remove useless logic

packages/core/client/src/schema-component/antd/select/ReadPretty.tsx

@@ -31,16 +31,16 @@ export const ReadPretty = observer(
   (props: SelectReadPrettyProps) => {
     const fieldNames = { ...defaultFieldNames, ...props.fieldNames };
     const field = useField<any>();
+    const collectionField = useCollectionField();
+    const dataSource = field.dataSource || props.options || collectionField?.uiSchema.enum || [];
+    const currentOptions = getCurrentOptions(field.value, dataSource, fieldNames);
 
-    if (!isValid(props.value)) {
+    if (!isValid(props.value) && !currentOptions.length) {
       return <div />;
     }
     if (isArrayField(field) && field?.value?.length === 0) {
       return <div />;
     }
-    const collectionField = useCollectionField();
-    const dataSource = field.dataSource || props.options || collectionField?.uiSchema.enum || [];
-    const currentOptions = getCurrentOptions(field.value, dataSource, fieldNames);
 
     return (
       <div>

packages/core/client/src/schema-component/antd/select/demos/new-demos/null-option.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { mockApp } from '@nocobase/client/demo-utils';
+import { SchemaComponent, Plugin, ISchema } from '@nocobase/client';
+
+const options = [
+  {
+    label: '福建',
+    value: 'FuJian',
+    children: [
+      { label: '{{t("福州")}}', value: 'FZ' },
+      { label: '莆田', value: 'PT' },
+    ],
+  },
+  { label: '江苏', value: 'XZ' },
+  { label: '浙江', value: 'ZX' },
+  { lable: '未选择', value: null },
+];
+
+const schema: ISchema = {
+  type: 'void',
+  name: 'root',
+  'x-decorator': 'FormV2',
+  'x-component': 'ShowFormData',
+  properties: {
+    test: {
+      type: 'string',
+      title: 'Test',
+      enum: options,
+      'x-decorator': 'FormItem',
+      'x-component': 'Select',
+      default: null,
+    },
+  },
+};
+const Demo = () => {
+  return <SchemaComponent schema={schema} />;
+};
+
+class DemoPlugin extends Plugin {
+  async load() {
+    this.app.router.add('root', { path: '/', Component: Demo });
+  }
+}
+
+const app = mockApp({
+  plugins: [DemoPlugin],
+});
+
+export default app.getRootComponent();

packages/core/client/src/schema-component/antd/select/utils.ts

@@ -43,11 +43,9 @@ function flatData(data: any[], fieldNames: FieldNames): any[] {
   return newArr;
 }
 
-export function getCurrentOptions(values: string | string[], dataSource: any[], fieldNames: FieldNames): Option[] {
+export function getCurrentOptions(values: any | any[], dataSource: any[], fieldNames: FieldNames): Option[] {
   const result = flatData(dataSource, fieldNames);
-  const arrValues = castArray(values)
+  const arrValues = castArray(values).map((val) => (isPlainObject(val) ? val[fieldNames.value] : val)) as any[];
-    .filter((item) => item != null)
-    .map((val) => (isPlainObject(val) ? val[fieldNames.value] : val)) as string[];
 
   function findOptions(options: any[]): Option[] {
     if (!options) return [];