feat: add some other components
This commit is contained in:
parent
5acac725f9
commit
05e2cf3b8d
@ -17,8 +17,8 @@
|
||||
"npm": ">=3.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@dnd-kit/core": "^4.0.3",
|
||||
"@dnd-kit/sortable": "^5.1.0",
|
||||
"@dnd-kit/core": "^5.0.1",
|
||||
"@dnd-kit/sortable": "^6.0.0",
|
||||
"@emotion/css": "^11.7.1",
|
||||
"@formily/antd": "^2.0.7",
|
||||
"@formily/core": "^2.0.7",
|
||||
|
@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
import { useDesignable } from '../..';
|
||||
|
||||
export const BlockItem: React.FC<any> = (props) => {
|
||||
const { DesignableBar } = useDesignable();
|
||||
return (
|
||||
<div className="nb-block-item">
|
||||
{props.children}
|
||||
<DesignableBar />
|
||||
</div>
|
||||
);
|
||||
};
|
@ -1,12 +1 @@
|
||||
import React from 'react';
|
||||
import { useDesignable } from '../..';
|
||||
|
||||
export const BlockItem: React.FC<any> = (props) => {
|
||||
const { DesignableBar } = useDesignable();
|
||||
return (
|
||||
<div className="nb-block-item">
|
||||
{props.children}
|
||||
<DesignableBar />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export * from './BlockItem';
|
||||
|
@ -0,0 +1,5 @@
|
||||
import React from 'react';
|
||||
|
||||
export const Calendar = () => {
|
||||
return <div>Calendar</div>;
|
||||
};
|
@ -0,0 +1 @@
|
||||
export * from './Calendar';
|
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { Card } from 'antd';
|
||||
import React from 'react';
|
||||
import { BlockItem } from '../block-item';
|
||||
|
||||
export const CardItem: React.FC = (props) => {
|
@ -0,0 +1 @@
|
||||
export * from './CardItem';
|
@ -0,0 +1,5 @@
|
||||
import React from 'react';
|
||||
|
||||
export const Chart = () => {
|
||||
return <div>Chart</div>;
|
||||
};
|
1
packages/client/src/schema-component/antd/chart/index.ts
Normal file
1
packages/client/src/schema-component/antd/chart/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './Chart';
|
@ -0,0 +1,11 @@
|
||||
import { FormItem as Item } from '@formily/antd';
|
||||
import React from 'react';
|
||||
import { BlockItem } from '../block-item';
|
||||
|
||||
export const FormItem: React.FC = (props) => {
|
||||
return (
|
||||
<BlockItem className={'nb-form-item'}>
|
||||
<Item {...props} />
|
||||
</BlockItem>
|
||||
);
|
||||
};
|
@ -1,11 +1 @@
|
||||
import React from 'react';
|
||||
import { BlockItem } from '../block-item';
|
||||
import { FormItem as FormilyFormItem } from '@formily/antd';
|
||||
|
||||
export const FormItem: React.FC = (props) => {
|
||||
return (
|
||||
<BlockItem className={'nb-form-item'}>
|
||||
<FormilyFormItem {...props} />
|
||||
</BlockItem>
|
||||
);
|
||||
};
|
||||
export * from './FormItem';
|
||||
|
@ -1,7 +1,10 @@
|
||||
export * from './action';
|
||||
export * from './array-table';
|
||||
export * from './block-item';
|
||||
export * from './calendar';
|
||||
export * from './card-item';
|
||||
export * from './cascader';
|
||||
export * from './chart';
|
||||
export * from './checkbox';
|
||||
export * from './color-select';
|
||||
export * from './date-picker';
|
||||
@ -12,6 +15,7 @@ export * from './grid';
|
||||
export * from './icon-picker';
|
||||
export * from './input';
|
||||
export * from './input-number';
|
||||
export * from './kanban';
|
||||
export * from './markdown';
|
||||
export * from './menu';
|
||||
export * from './page';
|
||||
@ -20,6 +24,7 @@ export * from './radio';
|
||||
export * from './record-picker';
|
||||
export * from './row-selection';
|
||||
export * from './select';
|
||||
export * from './tabs';
|
||||
export * from './time-picker';
|
||||
export * from './tree-select';
|
||||
export * from './upload';
|
||||
|
@ -0,0 +1,5 @@
|
||||
import React from 'react';
|
||||
|
||||
export const Kanban = () => {
|
||||
return <div>Kanban</div>;
|
||||
};
|
@ -0,0 +1 @@
|
||||
export * from './Kanban';
|
25
packages/client/src/schema-component/antd/tabs/Tabs.tsx
Normal file
25
packages/client/src/schema-component/antd/tabs/Tabs.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
import { observer, RecursionField, useField, useFieldSchema } from '@formily/react';
|
||||
import { TabPaneProps, Tabs as AntdTabs, TabsProps } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
export const Tabs: any = observer((props: TabsProps) => {
|
||||
const fieldSchema = useFieldSchema();
|
||||
return (
|
||||
<div>
|
||||
<AntdTabs>
|
||||
{fieldSchema.mapProperties((schema, key) => {
|
||||
return (
|
||||
<AntdTabs.TabPane tab={<RecursionField name={key} schema={schema} onlyRenderSelf />} key={key}>
|
||||
<RecursionField name={key} schema={schema} onlyRenderProperties />
|
||||
</AntdTabs.TabPane>
|
||||
);
|
||||
})}
|
||||
</AntdTabs>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
Tabs.TabPane = observer((props: TabPaneProps) => {
|
||||
const field = useField();
|
||||
return <>{props.tab || field.title}</>;
|
||||
});
|
@ -0,0 +1,53 @@
|
||||
/**
|
||||
* title: Tabs
|
||||
*/
|
||||
import { ISchema } from '@formily/react';
|
||||
import { SchemaComponent, SchemaComponentProvider, Tabs } from '@nocobase/client';
|
||||
import React from 'react';
|
||||
|
||||
const schema: ISchema = {
|
||||
type: 'object',
|
||||
properties: {
|
||||
tabs1: {
|
||||
type: 'void',
|
||||
'x-component': 'Tabs',
|
||||
'x-component-props': {},
|
||||
properties: {
|
||||
tab1: {
|
||||
type: 'void',
|
||||
title: 'Tab1',
|
||||
'x-component': 'Tabs.TabPane',
|
||||
'x-component-props': {
|
||||
tab: 'Tab1',
|
||||
},
|
||||
properties: {
|
||||
aaa: {
|
||||
'x-content': 'Hello1',
|
||||
},
|
||||
},
|
||||
},
|
||||
tab2: {
|
||||
type: 'void',
|
||||
title: 'Tab2',
|
||||
'x-component': 'Tabs.TabPane',
|
||||
'x-component-props': {
|
||||
tab: 'Tab2',
|
||||
},
|
||||
properties: {
|
||||
aaa: {
|
||||
'x-content': 'Hello2',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<SchemaComponentProvider components={{ Tabs }}>
|
||||
<SchemaComponent schema={schema} />
|
||||
</SchemaComponentProvider>
|
||||
);
|
||||
};
|
@ -9,3 +9,7 @@ group:
|
||||
|
||||
- Tabs
|
||||
- Tabs.TabPane
|
||||
|
||||
## Examples
|
||||
|
||||
<code src="./demos/demo1.tsx" />
|
||||
|
1
packages/client/src/schema-component/antd/tabs/index.ts
Normal file
1
packages/client/src/schema-component/antd/tabs/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './Tabs';
|
28
yarn.lock
28
yarn.lock
@ -1257,27 +1257,27 @@
|
||||
dependencies:
|
||||
tslib "^2.0.0"
|
||||
|
||||
"@dnd-kit/core@^4.0.3":
|
||||
version "4.0.3"
|
||||
resolved "https://registry.npmjs.org/@dnd-kit/core/-/core-4.0.3.tgz#49abe3c9b481b6e07909df1781e88b20f3dd25b0"
|
||||
integrity sha512-uT1uHZxKx3iEkupmLfknMIvbykMJSetoXXmra6sGGvtWy+OMKrWm3axH2c90+JC/q6qaeKs2znd3Qs8GLnCa5Q==
|
||||
"@dnd-kit/core@^5.0.1":
|
||||
version "5.0.1"
|
||||
resolved "https://registry.npmjs.org/@dnd-kit/core/-/core-5.0.1.tgz#ae8c01ca5a91083ab31bbd8c839c552e5cf62c26"
|
||||
integrity sha512-h02GyHb2KqbpqbELA9QW5WVLdnAQODgZs8Nv15PTg/VpEpQxEkLPn0QHqiMSSOOFBx0qJOowwYh6ggfL1ZIJPQ==
|
||||
dependencies:
|
||||
"@dnd-kit/accessibility" "^3.0.0"
|
||||
"@dnd-kit/utilities" "^3.0.1"
|
||||
"@dnd-kit/utilities" "^3.1.0"
|
||||
tslib "^2.0.0"
|
||||
|
||||
"@dnd-kit/sortable@^5.1.0":
|
||||
version "5.1.0"
|
||||
resolved "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-5.1.0.tgz#f30ec12c95ca5aa90e2e4d9ef3dbe16b3eb26d69"
|
||||
integrity sha512-CPyiUHbTrSYzhddfgdeoX0ERg/dEyVKIWx9+4O6uqpoppo84SXCBHVFiFBRVpQ9wtpsXs7prtUAnAUTcvFQTZg==
|
||||
"@dnd-kit/sortable@^6.0.0":
|
||||
version "6.0.0"
|
||||
resolved "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-6.0.0.tgz#289c06ec594fb519d75cdf04ac5de7359b14f068"
|
||||
integrity sha512-Kf0HO/rbFpd7HxXGEvxXtxBgPI6+IQuxRXDdFz6XKLhylxuDMEomi1netrhS+253KrOZ68V+sjqOmfE2RreLeQ==
|
||||
dependencies:
|
||||
"@dnd-kit/utilities" "^3.0.0"
|
||||
"@dnd-kit/utilities" "^3.1.0"
|
||||
tslib "^2.0.0"
|
||||
|
||||
"@dnd-kit/utilities@^3.0.0", "@dnd-kit/utilities@^3.0.1":
|
||||
version "3.0.2"
|
||||
resolved "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.0.2.tgz#24fd796491a85c2904e9c97f1fdb42005df645f2"
|
||||
integrity sha512-J4WpZXKbLJzBkuALqsIy5KmQr6PQk86ixoPKoixzjWj1+XGE5KdA2vga9Vf43EB/Ewpng+E5SmXVLfTs7ukbhw==
|
||||
"@dnd-kit/utilities@^3.1.0":
|
||||
version "3.1.0"
|
||||
resolved "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.1.0.tgz#330ef24303da05f85ff20bb8f74b385c96caee58"
|
||||
integrity sha512-2JBdIgjJ7xjMRpKagdMuYKWJdDoVVw9Wc6lfMrLjrq8t4QlMEjtsab5JVUlzWvHgANn7w3Y3VhalFfbp4dQrKg==
|
||||
dependencies:
|
||||
tslib "^2.0.0"
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user