tachybase_todo/packages/samples/custom-block/src/client/index.tsx
chenos e6a2a292b3
feat: upgrade formily (#1880)
* feat: upgrade formily

* fix: upgrade @formily/json-schema

* fix: optimizing performance

* fix: performance code

* refactor: `React.memo` and `observer` component add `displayName` property

* fix: add cache to Schema.compile

* feat: 优化代码

* fix: 修复卡顿最终的问题

* Update SchemaComponentProvider.tsx

* feat: 再次优化代码

* feat: optimized code

---------

Co-authored-by: dream2023 <1098626505@qq.com>
2023-06-06 19:33:04 +08:00

51 lines
1.5 KiB
TypeScript

import { TableOutlined } from '@ant-design/icons';
import { SchemaComponentOptions, SchemaInitializer, SchemaInitializerContext } from '@nocobase/client';
import React, { useContext } from 'react';
import { useTranslation } from 'react-i18next';
import { HelloDesigner } from './HelloDesigner';
export const HelloBlockInitializer = (props) => {
const { insert } = props;
const { t } = useTranslation();
return (
<SchemaInitializer.Item
{...props}
icon={<TableOutlined />}
onClick={() => {
insert({
type: 'void',
'x-component': 'CardItem',
'x-designer': 'HelloDesigner',
properties: {
hello: {
type: 'void',
'x-component': 'div',
'x-content': 'Hello World',
},
},
});
}}
title={t('Hello block')}
/>
);
};
const CustomBlock = React.memo((props) => {
const items = useContext(SchemaInitializerContext);
const children = items.BlockInitializers.items[2].children;
children.push({
key: 'customBlock',
type: 'item',
title: '{{t("Hello block")}}',
component: 'HelloBlockInitializer',
});
return (
<SchemaComponentOptions components={{ HelloDesigner, HelloBlockInitializer }}>
<SchemaInitializerContext.Provider value={items}>{props.children}</SchemaInitializerContext.Provider>
</SchemaComponentOptions>
);
});
CustomBlock.displayName = 'CustomBlock';
export default CustomBlock;