feat: add some other components
This commit is contained in:
parent
5acac725f9
commit
05e2cf3b8d
@ -17,8 +17,8 @@
|
|||||||
"npm": ">=3.0.0"
|
"npm": ">=3.0.0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@dnd-kit/core": "^4.0.3",
|
"@dnd-kit/core": "^5.0.1",
|
||||||
"@dnd-kit/sortable": "^5.1.0",
|
"@dnd-kit/sortable": "^6.0.0",
|
||||||
"@emotion/css": "^11.7.1",
|
"@emotion/css": "^11.7.1",
|
||||||
"@formily/antd": "^2.0.7",
|
"@formily/antd": "^2.0.7",
|
||||||
"@formily/core": "^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';
|
export * from './BlockItem';
|
||||||
import { useDesignable } from '../..';
|
|
||||||
|
|
||||||
export const BlockItem: React.FC<any> = (props) => {
|
|
||||||
const { DesignableBar } = useDesignable();
|
|
||||||
return (
|
|
||||||
<div className="nb-block-item">
|
|
||||||
{props.children}
|
|
||||||
<DesignableBar />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
@ -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 { Card } from 'antd';
|
||||||
|
import React from 'react';
|
||||||
import { BlockItem } from '../block-item';
|
import { BlockItem } from '../block-item';
|
||||||
|
|
||||||
export const CardItem: React.FC = (props) => {
|
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';
|
export * from './FormItem';
|
||||||
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>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
@ -1,7 +1,10 @@
|
|||||||
export * from './action';
|
export * from './action';
|
||||||
export * from './array-table';
|
export * from './array-table';
|
||||||
export * from './block-item';
|
export * from './block-item';
|
||||||
|
export * from './calendar';
|
||||||
|
export * from './card-item';
|
||||||
export * from './cascader';
|
export * from './cascader';
|
||||||
|
export * from './chart';
|
||||||
export * from './checkbox';
|
export * from './checkbox';
|
||||||
export * from './color-select';
|
export * from './color-select';
|
||||||
export * from './date-picker';
|
export * from './date-picker';
|
||||||
@ -12,6 +15,7 @@ export * from './grid';
|
|||||||
export * from './icon-picker';
|
export * from './icon-picker';
|
||||||
export * from './input';
|
export * from './input';
|
||||||
export * from './input-number';
|
export * from './input-number';
|
||||||
|
export * from './kanban';
|
||||||
export * from './markdown';
|
export * from './markdown';
|
||||||
export * from './menu';
|
export * from './menu';
|
||||||
export * from './page';
|
export * from './page';
|
||||||
@ -20,6 +24,7 @@ export * from './radio';
|
|||||||
export * from './record-picker';
|
export * from './record-picker';
|
||||||
export * from './row-selection';
|
export * from './row-selection';
|
||||||
export * from './select';
|
export * from './select';
|
||||||
|
export * from './tabs';
|
||||||
export * from './time-picker';
|
export * from './time-picker';
|
||||||
export * from './tree-select';
|
export * from './tree-select';
|
||||||
export * from './upload';
|
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
|
||||||
- Tabs.TabPane
|
- 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:
|
dependencies:
|
||||||
tslib "^2.0.0"
|
tslib "^2.0.0"
|
||||||
|
|
||||||
"@dnd-kit/core@^4.0.3":
|
"@dnd-kit/core@^5.0.1":
|
||||||
version "4.0.3"
|
version "5.0.1"
|
||||||
resolved "https://registry.npmjs.org/@dnd-kit/core/-/core-4.0.3.tgz#49abe3c9b481b6e07909df1781e88b20f3dd25b0"
|
resolved "https://registry.npmjs.org/@dnd-kit/core/-/core-5.0.1.tgz#ae8c01ca5a91083ab31bbd8c839c552e5cf62c26"
|
||||||
integrity sha512-uT1uHZxKx3iEkupmLfknMIvbykMJSetoXXmra6sGGvtWy+OMKrWm3axH2c90+JC/q6qaeKs2znd3Qs8GLnCa5Q==
|
integrity sha512-h02GyHb2KqbpqbELA9QW5WVLdnAQODgZs8Nv15PTg/VpEpQxEkLPn0QHqiMSSOOFBx0qJOowwYh6ggfL1ZIJPQ==
|
||||||
dependencies:
|
dependencies:
|
||||||
"@dnd-kit/accessibility" "^3.0.0"
|
"@dnd-kit/accessibility" "^3.0.0"
|
||||||
"@dnd-kit/utilities" "^3.0.1"
|
"@dnd-kit/utilities" "^3.1.0"
|
||||||
tslib "^2.0.0"
|
tslib "^2.0.0"
|
||||||
|
|
||||||
"@dnd-kit/sortable@^5.1.0":
|
"@dnd-kit/sortable@^6.0.0":
|
||||||
version "5.1.0"
|
version "6.0.0"
|
||||||
resolved "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-5.1.0.tgz#f30ec12c95ca5aa90e2e4d9ef3dbe16b3eb26d69"
|
resolved "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-6.0.0.tgz#289c06ec594fb519d75cdf04ac5de7359b14f068"
|
||||||
integrity sha512-CPyiUHbTrSYzhddfgdeoX0ERg/dEyVKIWx9+4O6uqpoppo84SXCBHVFiFBRVpQ9wtpsXs7prtUAnAUTcvFQTZg==
|
integrity sha512-Kf0HO/rbFpd7HxXGEvxXtxBgPI6+IQuxRXDdFz6XKLhylxuDMEomi1netrhS+253KrOZ68V+sjqOmfE2RreLeQ==
|
||||||
dependencies:
|
dependencies:
|
||||||
"@dnd-kit/utilities" "^3.0.0"
|
"@dnd-kit/utilities" "^3.1.0"
|
||||||
tslib "^2.0.0"
|
tslib "^2.0.0"
|
||||||
|
|
||||||
"@dnd-kit/utilities@^3.0.0", "@dnd-kit/utilities@^3.0.1":
|
"@dnd-kit/utilities@^3.1.0":
|
||||||
version "3.0.2"
|
version "3.1.0"
|
||||||
resolved "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.0.2.tgz#24fd796491a85c2904e9c97f1fdb42005df645f2"
|
resolved "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.1.0.tgz#330ef24303da05f85ff20bb8f74b385c96caee58"
|
||||||
integrity sha512-J4WpZXKbLJzBkuALqsIy5KmQr6PQk86ixoPKoixzjWj1+XGE5KdA2vga9Vf43EB/Ewpng+E5SmXVLfTs7ukbhw==
|
integrity sha512-2JBdIgjJ7xjMRpKagdMuYKWJdDoVVw9Wc6lfMrLjrq8t4QlMEjtsab5JVUlzWvHgANn7w3Y3VhalFfbp4dQrKg==
|
||||||
dependencies:
|
dependencies:
|
||||||
tslib "^2.0.0"
|
tslib "^2.0.0"
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user