From 47c1764ac3cd58d3a1b4b012ba7f1b75d1c36a6f Mon Sep 17 00:00:00 2001
From: lyf-coder <58352715+lyf-coder@users.noreply.github.com>
Date: Tue, 11 Oct 2022 22:43:27 +0800
Subject: [PATCH] fix(client/record-picker): support record-picker show format
 DataPicker (#888)

* fix(client/record-picker): support record-picker show format DataPicker

* fix(client/record-picker): undefined judgment and when change field's label refresh format in time

(cherry picked from commit 381e71b1f72a8dd092c9e6ad0c36926102b8a7e2)
---
 .../antd/record-picker/InputRecordPicker.tsx  | 24 +++++++++--------
 .../record-picker/ReadPrettyRecordPicker.tsx  |  9 +++++--
 .../antd/record-picker/util.ts                | 27 +++++++++++++++++++
 3 files changed, 47 insertions(+), 13 deletions(-)
 create mode 100644 packages/core/client/src/schema-component/antd/record-picker/util.ts

diff --git a/packages/core/client/src/schema-component/antd/record-picker/InputRecordPicker.tsx b/packages/core/client/src/schema-component/antd/record-picker/InputRecordPicker.tsx
index b6046802d..320f8353a 100644
--- a/packages/core/client/src/schema-component/antd/record-picker/InputRecordPicker.tsx
+++ b/packages/core/client/src/schema-component/antd/record-picker/InputRecordPicker.tsx
@@ -9,6 +9,7 @@ import { FormProvider, SchemaComponentOptions } from '../../core';
 import { useCompile } from '../../hooks';
 import { ActionContext, useActionContext } from '../action';
 import { useFieldNames } from './useFieldNames';
+import { getLabelFormatValue, useLabelUiSchema } from './util';
 
 const RecordPickerContext = createContext(null);
 
@@ -23,15 +24,15 @@ const useTableSelectorProps = () => {
     rowSelection: {
       type: multiple ? 'checkbox' : 'radio',
       // defaultSelectedRowKeys: rcSelectRows?.map((item) => item[rowKey||'id']),
-      selectedRowKeys: rcSelectRows?.map((item) => item[rowKey||'id']),
+      selectedRowKeys: rcSelectRows?.map((item) => item[rowKey || 'id']),
     },
     onRowSelectionChange(selectedRowKeys, selectedRows) {
       if (multiple) {
         const scopeRows = field.value || [];
         const allSelectedRows = rcSelectRows || [];
-        const otherRows = differenceBy(allSelectedRows, scopeRows, rowKey||'id');
-        const unionSelectedRows = unionBy(otherRows, selectedRows, rowKey||'id');
-        const unionSelectedRowKeys = unionSelectedRows.map((item) => item[rowKey||'id'])
+        const otherRows = differenceBy(allSelectedRows, scopeRows, rowKey || 'id');
+        const unionSelectedRows = unionBy(otherRows, selectedRows, rowKey || 'id');
+        const unionSelectedRowKeys = unionSelectedRows.map((item) => item[rowKey || 'id']);
         setSelectedRows?.(unionSelectedRows);
         onRowSelectionChange?.(unionSelectedRowKeys, unionSelectedRows);
       } else {
@@ -74,30 +75,31 @@ export const InputRecordPicker: React.FC<any> = (props) => {
   const fieldSchema = useFieldSchema();
   const collectionField = useAssociation(props);
   const compile = useCompile();
-  
+  const labelUiSchema = useLabelUiSchema(collectionField, fieldNames?.label || 'label');
+
   const [selectedRows, setSelectedRows] = useState([]);
   const [options, setOptions] = useState([]);
 
   useEffect(() => {
     if (value) {
-      const opts = (Array.isArray(value) ? value : value ? [value] : []).map(option => {
+      const opts = (Array.isArray(value) ? value : value ? [value] : []).map((option) => {
         const label = option[fieldNames.label];
         return {
           ...option,
-          [fieldNames.label]: compile(label),
+          [fieldNames.label]: getLabelFormatValue(labelUiSchema, compile(label)),
         };
       });
       setOptions(opts);
       setSelectedRows(opts);
     }
-  }, [value])
+  }, [value,fieldNames?.label]);
 
   const getValue = () => {
     if (multiple == null) return null;
     // console.log('getValue', multiple, value, Array.isArray(value));
-    
-    return Array.isArray(value) ? value?.map(v => v[fieldNames.value]) : value?.[fieldNames.value];
-  }
+
+    return Array.isArray(value) ? value?.map((v) => v[fieldNames.value]) : value?.[fieldNames.value];
+  };
   return (
     <div>
       <Select
diff --git a/packages/core/client/src/schema-component/antd/record-picker/ReadPrettyRecordPicker.tsx b/packages/core/client/src/schema-component/antd/record-picker/ReadPrettyRecordPicker.tsx
index 116c42324..a2453f1ec 100644
--- a/packages/core/client/src/schema-component/antd/record-picker/ReadPrettyRecordPicker.tsx
+++ b/packages/core/client/src/schema-component/antd/record-picker/ReadPrettyRecordPicker.tsx
@@ -10,10 +10,12 @@ import { useCompile } from '../../hooks';
 import { ActionContext } from '../action';
 import { EllipsisWithTooltip } from '../input/EllipsisWithTooltip';
 import { useFieldNames } from './useFieldNames';
+import { getLabelFormatValue, useLabelUiSchema } from './util';
 
 interface IEllipsisWithTooltipRef {
   setPopoverVisible: (boolean) => void;
 }
+
 export const ReadPrettyRecordPicker: React.FC = observer((props: any) => {
   const { ellipsis } = props;
   const fieldSchema = useFieldSchema();
@@ -27,10 +29,13 @@ export const ReadPrettyRecordPicker: React.FC = observer((props: any) => {
   const collectionField = getField(fieldSchema.name) || getCollectionJoinField(fieldSchema?.['x-collection-field']);
   const [record, setRecord] = useState({});
   const compile = useCompile();
+  const labelUiSchema = useLabelUiSchema(collectionField, fieldNames?.label || 'label');
 
   const ellipsisWithTooltipRef = useRef<IEllipsisWithTooltipRef>();
   const renderRecords = () =>
     toArr(field.value).map((record, index, arr) => {
+      const val =
+        compile(record?.[fieldNames?.label || 'label']) || record?.[fieldNames?.value || 'value'] || record?.id;
       return (
         <Fragment key={`${record.id}_${index}`}>
           <span>
@@ -43,10 +48,10 @@ export const ReadPrettyRecordPicker: React.FC = observer((props: any) => {
                 ellipsisWithTooltipRef?.current?.setPopoverVisible(false);
               }}
             >
-              {compile(record?.[fieldNames?.label || 'label']) || record?.[fieldNames?.value || 'value'] || record?.id}
+              {getLabelFormatValue(labelUiSchema, val)}
             </a>
           </span>
-          {index < arr.length - 1 ? <span style={{ marginRight: 4, color: '#aaa' }}>, </span> : null}
+          {index < arr.length - 1 ? <span style={{ marginRight: 4, color: '#aaa' }}>,</span> : null}
         </Fragment>
       );
     });
diff --git a/packages/core/client/src/schema-component/antd/record-picker/util.ts b/packages/core/client/src/schema-component/antd/record-picker/util.ts
new file mode 100644
index 000000000..69c3992cb
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/record-picker/util.ts
@@ -0,0 +1,27 @@
+import { getDefaultFormat, str2moment } from '@nocobase/utils/client';
+import moment from 'moment';
+import { isArr } from '@formily/shared';
+import { CollectionFieldOptions, useCollectionManager } from '../../../collection-manager';
+import { ISchema } from '@formily/react';
+
+export const useLabelUiSchema = (collectionField: CollectionFieldOptions, label: string): ISchema => {
+  const { getCollectionJoinField } = useCollectionManager();
+  const labelField = getCollectionJoinField(`${collectionField.target}.${label}`) as CollectionFieldOptions;
+  return labelField?.uiSchema;
+};
+
+export const getDatePickerLabels = (props): string => {
+  const format = getDefaultFormat(props) as string;
+  const m = str2moment(props.value, props) as moment.Moment;
+  const labels = m && m.isValid() ? m.format(format) : props.value;
+  return isArr(labels) ? labels.join('~') : labels;
+};
+
+export const getLabelFormatValue = (labelUiSchema: ISchema, value: any): string => {
+  switch (labelUiSchema?.['x-component']) {
+    case 'DatePicker':
+      return getDatePickerLabels({ ...labelUiSchema?.['x-component-props'], value });
+    default:
+      return value;
+  }
+};