mirrors/nocobase
1
0
Fork 0
mirror of https://github.com/nocobase/nocobase synced 2024-11-16 03:45:10 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

perf(LinkageRules): improve style performance

Browse Source
This commit is contained in:
Zeke Zhang 2024-10-30 14:44:22 +08:00
parent 26f100c9e4
commit 5d2a9ace48
2 changed files with 7 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/core/client/src/schema-settings/LinkageRules/components/LinkageHeader.style.ts
View File

@ -7,12 +7,6 @@
* For more information, please refer to: https://www.nocobase.com/agreement. * For more information, please refer to: https://www.nocobase.com/agreement.
*/ */
import { createStyles } from 'antd-style'; export const arrayCollapseItemStyle = {
marginBottom: 10,
export const useStyles = createStyles(() => {
return {
arrayCollapseItem: {
marginBottom: '10px',
},
}; };
});

9
packages/core/client/src/schema-settings/LinkageRules/components/LinkageHeader.tsx
View File

@ -13,12 +13,11 @@ import { ArrayField } from '@formily/core';
import { ISchema, RecursionField, observer, useField, useFieldSchema } from '@formily/react'; import { ISchema, RecursionField, observer, useField, useFieldSchema } from '@formily/react';
import { toArr } from '@formily/shared'; import { toArr } from '@formily/shared';
import { Badge, Card, Collapse, CollapsePanelProps, CollapseProps, Empty, Input } from 'antd'; import { Badge, Card, Collapse, CollapsePanelProps, CollapseProps, Empty, Input } from 'antd';
import cls from 'classnames';
import { cloneDeep } from 'lodash'; import { cloneDeep } from 'lodash';
import React, { Fragment, useEffect, useState } from 'react'; import React, { Fragment, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useToken } from '../../../style'; import { useToken } from '../../../style';
import { useStyles } from './LinkageHeader.style'; import { arrayCollapseItemStyle } from './LinkageHeader.style';
const LinkageRulesTitle = (props) => { const LinkageRulesTitle = (props) => {
const array = ArrayBase.useArray(); const array = ArrayBase.useArray();
@ -103,7 +102,6 @@ const insertActiveKeys = (activeKeys: number[], index: number) => {
export const ArrayCollapse: ComposedArrayCollapse = observer( export const ArrayCollapse: ComposedArrayCollapse = observer(
(props: IArrayCollapseProps) => { (props: IArrayCollapseProps) => {
const { styles } = useStyles();
const field = useField<ArrayField>(); const field = useField<ArrayField>();
const dataSource = Array.isArray(field.value) ? field.value : []; const dataSource = Array.isArray(field.value) ? field.value : [];
const [activeKeys, setActiveKeys] = useState<number[]>( const [activeKeys, setActiveKeys] = useState<number[]>(
@ -128,7 +126,7 @@ export const ArrayCollapse: ComposedArrayCollapse = observer(
const renderEmpty = () => { const renderEmpty = () => {
if (dataSource.length) return; if (dataSource.length) return;
return ( return (
<Card className={cls(`${styles.arrayCollapseItem}`, props.className)}> <Card className={props.className} style={arrayCollapseItemStyle}>
<Empty /> <Empty />
</Card> </Card>
); );
@ -140,7 +138,8 @@ export const ArrayCollapse: ComposedArrayCollapse = observer(
{...props} {...props}
activeKey={activeKeys} activeKey={activeKeys}
onChange={(keys: string[]) => setActiveKeys(toArr(keys).map(Number))} onChange={(keys: string[]) => setActiveKeys(toArr(keys).map(Number))}
className={cls(`${styles.arrayCollapseItem}`, props.className)} className={props.className}
style={arrayCollapseItemStyle}
> >
{dataSource.map((item, index) => { {dataSource.map((item, index) => {
const items = Array.isArray(schema.items) ? schema.items[index] || schema.items[0] : schema.items; const items = Array.isArray(schema.items) ? schema.items[index] || schema.items[0] : schema.items;