perf(ReadPrettyInternalViewer): remove observer

This commit is contained in:
Zeke Zhang 2024-11-10 09:08:18 +08:00
parent 9c0a7e77f3
commit 3241b24042
2 changed files with 60 additions and 64 deletions

View File

@ -7,7 +7,7 @@
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import { observer, RecursionField, useField, useFieldSchema } from '@formily/react';
import { RecursionField, useField, useFieldSchema } from '@formily/react';
import { toArr } from '@formily/shared';
import _ from 'lodash';
import React, { FC, Fragment, useEffect, useRef, useState } from 'react';
@ -241,68 +241,64 @@ const getSourceData = (recordData, fieldSchema) => {
return _.get(recordData, sourceRecordKey);
};
export const ReadPrettyInternalViewer: React.FC = observer(
(props: ReadPrettyInternalViewerProps) => {
const { value, ButtonList = ButtonLinkList } = props;
const fieldSchema = useFieldSchema();
const { enableLink } = fieldSchema['x-component-props'] || {};
// value 做了转换,但 props.value 和原来 useField().value 的值不一致
const field = useField();
const [visible, setVisible] = useState(false);
const { options: collectionField } = useAssociationFieldContext();
const ellipsisWithTooltipRef = useRef<IEllipsisWithTooltipRef>();
const { visibleWithURL, setVisibleWithURL } = usePopupUtils();
const [btnHover, setBtnHover] = useState(!!visibleWithURL);
const { defaultOpenMode } = useOpenModeContext();
const recordData = useCollectionRecordData();
export const ReadPrettyInternalViewer: React.FC<ReadPrettyInternalViewerProps> = (props) => {
const { value, ButtonList = ButtonLinkList } = props;
const fieldSchema = useFieldSchema();
const { enableLink } = fieldSchema['x-component-props'] || {};
// value 做了转换,但 props.value 和原来 useField().value 的值不一致
const field = useField();
const [visible, setVisible] = useState(false);
const { options: collectionField } = useAssociationFieldContext();
const { visibleWithURL, setVisibleWithURL } = usePopupUtils();
const [btnHover, setBtnHover] = useState(!!visibleWithURL);
const { defaultOpenMode } = useOpenModeContext();
const recordData = useCollectionRecordData();
const btnElement = (
<EllipsisWithTooltip ellipsis={true} ref={ellipsisWithTooltipRef}>
<CollectionRecordProvider isNew={false} record={getSourceData(recordData, fieldSchema)}>
<ButtonList setBtnHover={setBtnHover} value={value} fieldNames={props.fieldNames} />
</CollectionRecordProvider>
</EllipsisWithTooltip>
);
const btnElement = (
<EllipsisWithTooltip ellipsis={true}>
<CollectionRecordProvider isNew={false} record={getSourceData(recordData, fieldSchema)}>
<ButtonList setBtnHover={setBtnHover} value={value} fieldNames={props.fieldNames} />
</CollectionRecordProvider>
</EllipsisWithTooltip>
);
if (enableLink === false || !btnHover) {
return btnElement;
}
if (enableLink === false || !btnHover) {
return btnElement;
}
const renderWithoutTableFieldResourceProvider = () => (
// The recordData here is only provided when the popup is opened, not the current row record
<VariablePopupRecordProvider>
<WithoutTableFieldResource.Provider value={true}>
<RecursionField
schema={fieldSchema}
onlyRenderProperties
basePath={field.address}
filterProperties={(s) => {
return s['x-component'] === 'AssociationField.Viewer';
}}
/>
</WithoutTableFieldResource.Provider>
</VariablePopupRecordProvider>
);
return (
<PopupVisibleProvider visible={false}>
<ActionContextProvider
value={{
visible: visible || visibleWithURL,
setVisible: (value) => {
setVisible?.(value);
setVisibleWithURL?.(value);
},
openMode: defaultOpenMode,
snapshot: collectionField?.interface === 'snapshot',
fieldSchema: fieldSchema,
const renderWithoutTableFieldResourceProvider = () => (
// The recordData here is only provided when the popup is opened, not the current row record
<VariablePopupRecordProvider>
<WithoutTableFieldResource.Provider value={true}>
<RecursionField
schema={fieldSchema}
onlyRenderProperties
basePath={field.address}
filterProperties={(s) => {
return s['x-component'] === 'AssociationField.Viewer';
}}
>
{btnElement}
{renderWithoutTableFieldResourceProvider()}
</ActionContextProvider>
</PopupVisibleProvider>
);
},
{ displayName: 'ReadPrettyInternalViewer' },
);
/>
</WithoutTableFieldResource.Provider>
</VariablePopupRecordProvider>
);
return (
<PopupVisibleProvider visible={false}>
<ActionContextProvider
value={{
visible: visible || visibleWithURL,
setVisible: (value) => {
setVisible?.(value);
setVisibleWithURL?.(value);
},
openMode: defaultOpenMode,
snapshot: collectionField?.interface === 'snapshot',
fieldSchema: fieldSchema,
}}
>
{btnElement}
{renderWithoutTableFieldResourceProvider()}
</ActionContextProvider>
</PopupVisibleProvider>
);
};

View File

@ -7,9 +7,9 @@
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import { RecursionField } from '@formily/react';
import React, { useMemo } from 'react';
import { useCollection } from '../../../../data-source';
import { NocoBaseRecursionField } from '../../../../formily/NocoBaseRecursionField';
import { useRecord } from '../../../../record-provider';
export const ColumnFieldProvider = (props: { schema: any; basePath: any; children: any }) => {
@ -45,7 +45,7 @@ export const ColumnFieldProvider = (props: { schema: any; basePath: any; childre
},
},
};
return <RecursionField basePath={basePath} schema={newSchema} onlyRenderProperties />;
return <NocoBaseRecursionField basePath={basePath} schema={newSchema} onlyRenderProperties />;
}
return props.children;
};