feat: add some other components

This commit is contained in:
chenos 2022-01-29 01:02:18 +08:00
parent 5acac725f9
commit 05e2cf3b8d
19 changed files with 149 additions and 40 deletions

View File

@ -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",

View File

@ -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>
);
};

View File

@ -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';

View File

@ -0,0 +1,5 @@
import React from 'react';
export const Calendar = () => {
return <div>Calendar</div>;
};

View File

@ -0,0 +1 @@
export * from './Calendar';

View File

@ -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) => {

View File

@ -0,0 +1 @@
export * from './CardItem';

View File

@ -0,0 +1,5 @@
import React from 'react';
export const Chart = () => {
return <div>Chart</div>;
};

View File

@ -0,0 +1 @@
export * from './Chart';

View File

@ -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>
);
};

View File

@ -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';

View File

@ -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';

View File

@ -0,0 +1,5 @@
import React from 'react';
export const Kanban = () => {
return <div>Kanban</div>;
};

View File

@ -0,0 +1 @@
export * from './Kanban';

View 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}</>;
});

View File

@ -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>
);
};

View File

@ -9,3 +9,7 @@ group:
- Tabs
- Tabs.TabPane
## Examples
<code src="./demos/demo1.tsx" />

View File

@ -0,0 +1 @@
export * from './Tabs';

View File

@ -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"