feat: add notice bar and swiper block
This commit is contained in:
parent
92bec8c5f5
commit
f7872aa16e
@ -88,6 +88,8 @@ import Expression from './components/Expression';
|
||||
import { CustomField } from './components/CustomField';
|
||||
import { useGetCustomAssociatedComponents } from './hooks/useGetCustomAssociatedComponents';
|
||||
import { useGetCustomComponents } from './hooks/useGetCustomComponents';
|
||||
import { SwiperBlock, SwiperBlockInitializer } from './schema-initializer/SwiperBlockInitializer';
|
||||
import { NoticeBlock, NoticeBlockInitializer } from './schema-initializer/NoticeBlockInitializer';
|
||||
|
||||
export enum CustomComponentType {
|
||||
CUSTOM_FORM_ITEM,
|
||||
@ -174,6 +176,8 @@ export class PluginCoreClient extends Plugin {
|
||||
DatePicker,
|
||||
RemoteSelect,
|
||||
SignatureInput,
|
||||
SwiperBlockInitializer,
|
||||
SwiperBlock,
|
||||
AssociationField: ExtendedAssociationField,
|
||||
OutboundButton,
|
||||
OutboundLinkActionInitializer,
|
||||
@ -198,6 +202,8 @@ export class PluginCoreClient extends Plugin {
|
||||
// @ts-ignore
|
||||
Designer: MenuDesigner,
|
||||
},
|
||||
NoticeBlock,
|
||||
NoticeBlockInitializer,
|
||||
});
|
||||
}
|
||||
|
||||
@ -279,6 +285,19 @@ export class PluginCoreClient extends Plugin {
|
||||
type: 'divider',
|
||||
});
|
||||
this.app.schemaInitializerManager.addItem('FilterFormItemInitializers', customItem.name, customItem);
|
||||
// mobile
|
||||
this.app.schemaInitializerManager.addItem('MBlockInitializers', 'dataBlocks.swiper', {
|
||||
title: 'swiper',
|
||||
name: 'swiper',
|
||||
type: 'item',
|
||||
Component: 'SwiperBlockInitializer',
|
||||
});
|
||||
this.app.schemaInitializerManager.addItem('MBlockInitializers', 'dataBlocks.notice', {
|
||||
title: 'notice',
|
||||
name: 'notice',
|
||||
type: 'item',
|
||||
Component: 'NoticeBlockInitializer',
|
||||
});
|
||||
|
||||
const addCustomComponent = {
|
||||
name: 'addCustomComponent',
|
||||
|
@ -0,0 +1,96 @@
|
||||
import Icon from '@ant-design/icons';
|
||||
import { ISchema } from '@formily/react';
|
||||
import {
|
||||
DataBlockInitializer,
|
||||
useCollectionManager,
|
||||
useSchemaInitializer,
|
||||
useSchemaInitializerItem,
|
||||
} from '@nocobase/client';
|
||||
import React from 'react';
|
||||
import { uid } from '@nocobase/utils/client';
|
||||
import { NoticeBar } from 'antd-mobile';
|
||||
|
||||
const NoticeSvg = () => (
|
||||
<svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
|
||||
<path
|
||||
d="M338.773333 362.666667H170.666667v298.666666h105.578666l45.013334 0.021334 17.258666 0.426666L682.666667 809.258667V214.890667L338.773333 362.666667z m-17.578666-85.333334L768 85.333333v853.333334l-448-191.978667L85.333333 746.666667V277.333333h235.861334zM170.666667 661.333333v85.333334h85.333333v-85.333334H170.666667zM853.333333 298.666667h85.333334v426.666666h-85.333334z"
|
||||
fill="#000000"
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const NoticeIcon = (props: Partial<any>) => <Icon component={NoticeSvg} {...props} />;
|
||||
|
||||
export const NoticeBlock = () => {
|
||||
return <NoticeBar content="月底冲量佣金上调" color="alert" />;
|
||||
};
|
||||
|
||||
export const NoticeBlockInitializer = () => {
|
||||
const { insert } = useSchemaInitializer();
|
||||
const cm = useCollectionManager();
|
||||
const itemConfig = useSchemaInitializerItem();
|
||||
return (
|
||||
<DataBlockInitializer
|
||||
{...itemConfig}
|
||||
icon={<NoticeIcon />}
|
||||
componentType={'Notice'}
|
||||
onCreateBlockSchema={async ({ item }) => {
|
||||
const collection = cm.getCollection(item.name);
|
||||
const schema = createGridCardBlockSchema({
|
||||
collection: item.name,
|
||||
dataSource: item.dataSource,
|
||||
rowKey: collection.filterTargetKey || 'id',
|
||||
settings: 'blockSettings:gridCard',
|
||||
});
|
||||
insert(schema);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const createGridCardBlockSchema = (options) => {
|
||||
const {
|
||||
formItemInitializers = 'ReadPrettyFormItemInitializers',
|
||||
actionInitializers = 'GridCardActionInitializers',
|
||||
itemActionInitializers = 'GridCardItemActionInitializers',
|
||||
collection,
|
||||
association,
|
||||
resource,
|
||||
template,
|
||||
dataSource,
|
||||
settings,
|
||||
...others
|
||||
} = options;
|
||||
const resourceName = resource || association || collection;
|
||||
const schema: ISchema = {
|
||||
type: 'void',
|
||||
'x-acl-action': `${resourceName}:view`,
|
||||
'x-decorator': 'GridCard.Decorator',
|
||||
'x-decorator-props': {
|
||||
resource: resourceName,
|
||||
collection,
|
||||
association,
|
||||
dataSource,
|
||||
readPretty: true,
|
||||
action: 'list',
|
||||
params: {
|
||||
pageSize: 12,
|
||||
},
|
||||
runWhenParamsChanged: true,
|
||||
...others,
|
||||
},
|
||||
'x-component': 'BlockItem',
|
||||
'x-component-props': {
|
||||
useProps: '{{ useGridCardBlockItemProps }}',
|
||||
},
|
||||
'x-toolbar': 'BlockSchemaToolbar',
|
||||
'x-settings': settings,
|
||||
properties: {
|
||||
[uid()]: {
|
||||
type: 'void',
|
||||
'x-component': 'NoticeBlock',
|
||||
},
|
||||
},
|
||||
};
|
||||
return schema;
|
||||
};
|
@ -0,0 +1,120 @@
|
||||
import Icon from '@ant-design/icons';
|
||||
import { ISchema } from '@formily/react';
|
||||
import {
|
||||
DataBlockInitializer,
|
||||
css,
|
||||
useCollectionManager,
|
||||
useSchemaInitializer,
|
||||
useSchemaInitializerItem,
|
||||
} from '@nocobase/client';
|
||||
import React from 'react';
|
||||
import { uid } from '@nocobase/utils/client';
|
||||
import { Swiper, Toast } from 'antd-mobile';
|
||||
|
||||
const SwiperSvg = () => (
|
||||
<svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
|
||||
<path d="M0 219.428571h73.142857v585.142858H0V219.428571z m950.857143 0h73.142857v585.142858h-73.142857V219.428571z m-146.285714-146.285714a73.142857 73.142857 0 0 1 73.142857 73.142857v731.428572a73.142857 73.142857 0 0 1-73.142857 73.142857H219.428571a73.142857 73.142857 0 0 1-73.142857-73.142857V146.285714a73.142857 73.142857 0 0 1 73.142857-73.142857h585.142858z m0 73.142857H219.428571v731.428572h585.142858V146.285714zM365.714286 694.857143a36.571429 36.571429 0 1 1 0 73.142857 36.571429 36.571429 0 0 1 0-73.142857z m146.285714 0a36.571429 36.571429 0 1 1 0 73.142857 36.571429 36.571429 0 0 1 0-73.142857z m146.285714 0a36.571429 36.571429 0 1 1 0 73.142857 36.571429 36.571429 0 0 1 0-73.142857z"></path>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const SwiperIcon = (props: Partial<any>) => <Icon component={SwiperSvg} {...props} />;
|
||||
|
||||
export const SwiperBlock = () => {
|
||||
const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac'];
|
||||
const items = colors.map((color, index) => (
|
||||
<Swiper.Item key={index}>
|
||||
<div
|
||||
className={css`
|
||||
height: 120px;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 48px;
|
||||
user-select: none;
|
||||
`}
|
||||
style={{ background: color }}
|
||||
onClick={() => {
|
||||
Toast.show(`你点击了卡片 ${index + 1}`);
|
||||
}}
|
||||
>
|
||||
{index + 1}
|
||||
</div>
|
||||
</Swiper.Item>
|
||||
));
|
||||
return (
|
||||
<Swiper loop autoplay>
|
||||
{items}
|
||||
</Swiper>
|
||||
);
|
||||
};
|
||||
|
||||
export const SwiperBlockInitializer = () => {
|
||||
const { insert } = useSchemaInitializer();
|
||||
const cm = useCollectionManager();
|
||||
const itemConfig = useSchemaInitializerItem();
|
||||
return (
|
||||
<DataBlockInitializer
|
||||
{...itemConfig}
|
||||
icon={<SwiperIcon />}
|
||||
componentType={'Swiper'}
|
||||
onCreateBlockSchema={async ({ item }) => {
|
||||
const collection = cm.getCollection(item.name);
|
||||
const schema = createGridCardBlockSchema({
|
||||
collection: item.name,
|
||||
dataSource: item.dataSource,
|
||||
rowKey: collection.filterTargetKey || 'id',
|
||||
settings: 'blockSettings:gridCard',
|
||||
});
|
||||
insert(schema);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const createGridCardBlockSchema = (options) => {
|
||||
const {
|
||||
formItemInitializers = 'ReadPrettyFormItemInitializers',
|
||||
actionInitializers = 'GridCardActionInitializers',
|
||||
itemActionInitializers = 'GridCardItemActionInitializers',
|
||||
collection,
|
||||
association,
|
||||
resource,
|
||||
template,
|
||||
dataSource,
|
||||
settings,
|
||||
...others
|
||||
} = options;
|
||||
const resourceName = resource || association || collection;
|
||||
const schema: ISchema = {
|
||||
type: 'void',
|
||||
'x-acl-action': `${resourceName}:view`,
|
||||
'x-decorator': 'GridCard.Decorator',
|
||||
'x-decorator-props': {
|
||||
resource: resourceName,
|
||||
collection,
|
||||
association,
|
||||
dataSource,
|
||||
readPretty: true,
|
||||
action: 'list',
|
||||
params: {
|
||||
pageSize: 12,
|
||||
},
|
||||
runWhenParamsChanged: true,
|
||||
...others,
|
||||
},
|
||||
'x-component': 'BlockItem',
|
||||
'x-component-props': {
|
||||
useProps: '{{ useGridCardBlockItemProps }}',
|
||||
},
|
||||
'x-toolbar': 'BlockSchemaToolbar',
|
||||
'x-settings': settings,
|
||||
properties: {
|
||||
[uid()]: {
|
||||
type: 'void',
|
||||
'x-component': 'SwiperBlock',
|
||||
},
|
||||
},
|
||||
};
|
||||
return schema;
|
||||
};
|
Loading…
Reference in New Issue
Block a user