mirrors/nocobase
1
0
Fork 0
mirror of https://github.com/nocobase/nocobase synced 2024-11-15 08:47:20 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: designers

Browse Source
This commit is contained in:
Rain 2023-10-19 23:31:03 +08:00
parent 72159468df
commit 0cbcd19d85
7 changed files with 63 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/core/client/src/schema-component/antd/kanban/Kanban.Card.Designer.tsx
View File

@ -1,6 +1,6 @@
import { MenuOutlined } from '@ant-design/icons';
import { css } from '@emotion/css';
import { ISchema, useField, useFieldSchema } from '@formily/react';
import { ISchema, useFieldSchema } from '@formily/react';
import { uid } from '@formily/shared';
import { Space } from 'antd';
import React from 'react';
@ -13,6 +13,7 @@ import {
useFormItemInitializerFields,
} from '../../../schema-initializer/utils';
import { OpenModeSchemaItems } from '../../../schema-items';
import { useGetLabelOfDesigner } from '../../../schema-settings/hooks/useGetLabelOfDesigner';
const titleCss = css`
pointer-events: none;
@ -56,17 +57,17 @@ const gridRowColWrap = (schema: ISchema) => {
// };
export const KanbanCardDesigner = (props: any) => {
const { dn, designable } = useDesignable();
const { designable } = useDesignable();
const { t } = useTranslation();
const api = useAPIClient();
const { refresh } = useDesignable();
const field = useField();
const fieldSchema = useFieldSchema();
const fields = useFormItemInitializerFields({
readPretty: true,
block: 'Kanban',
});
const associationFields = useAssociatedFormItemInitializerFields({ readPretty: true, block: 'Kanban' });
const { getLabel } = useGetLabelOfDesigner();
const items: any = [
{
@ -133,7 +134,13 @@ export const KanbanCardDesigner = (props: any) => {
dn.insertBeforeEnd(schema);
}}
items={items}
component={<MenuOutlined style={{ cursor: 'pointer', fontSize: 12 }} />}
component={
<MenuOutlined
role="button"
aria-label={getLabel('schema-initializer')}
style={{ cursor: 'pointer', fontSize: 12 }}
/>
}
/>
</Space>
</div>

13
packages/core/client/src/schema-component/antd/page/PageTabDesigner.tsx
View File

@ -5,12 +5,14 @@ import React from 'react';
import { useTranslation } from 'react-i18next';
import { DragHandler, useDesignable } from '../..';
import { SchemaSettings } from '../../../schema-settings';
import { useGetLabelOfDesigner } from '../../../schema-settings/hooks/useGetLabelOfDesigner';
export const PageDesigner = ({ title }) => {
const { dn, designable } = useDesignable();
const { t } = useTranslation();
const field = useField();
const fieldSchema = useFieldSchema();
const { getLabel } = useGetLabelOfDesigner();
const hidePageTitle = fieldSchema['x-component-props']?.hidePageTitle;
const disablePageHeader = fieldSchema['x-component-props']?.disablePageHeader;
if (!designable) {
@ -22,7 +24,11 @@ export const PageDesigner = ({ title }) => {
<Space size={2} align={'center'}>
<SchemaSettings
title={
<MenuOutlined role="button" aria-label="designer-page" style={{ cursor: 'pointer', fontSize: 12 }} />
<MenuOutlined
role="button"
aria-label={getLabel('schema-settings')}
style={{ cursor: 'pointer', fontSize: 12 }}
/>
}
>
<SchemaSettings.SwitchItem
@ -118,6 +124,7 @@ export const PageTabDesigner = ({ schema }) => {
const { dn, designable } = useDesignable();
const { t } = useTranslation();
const { modal } = App.useApp();
const { getLabel } = useGetLabelOfDesigner();
if (!designable) {
return null;
@ -128,9 +135,9 @@ export const PageTabDesigner = ({ schema }) => {
<div className={'general-schema-designer-icons'}>
<Space size={2} align={'center'}>
<DragHandler>
<DragOutlined />
<DragOutlined style={{ marginRight: 0 }} role="button" aria-label={getLabel('drag-handler', 'tab')} />
</DragHandler>
<SchemaSettings title={<MenuOutlined style={{ cursor: 'pointer', fontSize: 12 }} />}>
<SchemaSettings title={<MenuOutlined role="button" aria-label={getLabel('schema-settings', 'tab')} />}>
<SchemaSettings.ModalItem
title={t('Edit')}
schema={

4
packages/core/client/src/schema-component/antd/table-v2/Table.ActionColumnDesigner.tsx
View File

@ -4,16 +4,18 @@ import { Space } from 'antd';
import React from 'react';
import { DragHandler } from '../../../schema-component';
import { useSchemaInitializer } from '../../../schema-initializer';
import { useGetLabelOfDesigner } from '../../../schema-settings/hooks/useGetLabelOfDesigner';
export const TableActionColumnDesigner = (props: any) => {
const fieldSchema = useFieldSchema();
const { render } = useSchemaInitializer(fieldSchema['x-initializer']);
const { getLabel } = useGetLabelOfDesigner();
return (
<div className={'general-schema-designer'}>
<div className={'general-schema-designer-icons'}>
<Space size={2} align={'center'}>
<DragHandler>
<DragOutlined role="button" aria-label="designer-drag" />
<DragOutlined role="button" aria-label={getLabel('drag-handler')} />
</DragHandler>
{render()}
</Space>

4
packages/core/client/src/schema-component/antd/table/Table.RowActionDesigner.tsx
View File

@ -4,16 +4,18 @@ import { Space } from 'antd';
import React from 'react';
import { DragHandler } from '../../../schema-component';
import { useSchemaInitializer } from '../../../schema-initializer';
import { useGetLabelOfDesigner } from '../../../schema-settings/hooks/useGetLabelOfDesigner';
export const TableRowActionDesigner = (props: any) => {
const fieldSchema = useFieldSchema();
const { render } = useSchemaInitializer(fieldSchema['x-initializer']);
const { getLabel } = useGetLabelOfDesigner();
return (
<div className={'general-schema-designer'}>
<div className={'general-schema-designer-icons'}>
<Space size={2} align={'center'}>
<DragHandler>
<DragOutlined />
<DragOutlined role="button" aria-label={getLabel('drag-handler')} />
</DragHandler>
{render()}
</Space>

4
packages/core/client/src/schema-initializer/buttons/TableActionColumnInitializers.tsx
View File

@ -7,6 +7,7 @@ import { SchemaInitializer, SchemaSettings } from '../..';
import { useAPIClient } from '../../api-client';
import { useCollection } from '../../collection-manager';
import { createDesignable, useDesignable } from '../../schema-component';
import { useGetLabelOfDesigner } from '../../schema-settings/hooks/useGetLabelOfDesigner';
export const Resizable = (props) => {
const { t } = useTranslation();
@ -53,6 +54,7 @@ export const TableActionColumnInitializers = (props: any) => {
const { t } = useTranslation();
const collection = useCollection();
const { treeTable } = fieldSchema?.parent?.parent['x-decorator-props'] || {};
const { getLabel } = useGetLabelOfDesigner();
return (
<SchemaInitializer.Button
insertPosition={'beforeEnd'}
@ -250,7 +252,7 @@ export const TableActionColumnInitializers = (props: any) => {
component: Resizable,
},
]}
component={<MenuOutlined role="button" aria-label="designer-schema-settings" style={{ cursor: 'pointer' }} />}
component={<MenuOutlined role="button" aria-label={getLabel('schema-settings')} style={{ cursor: 'pointer' }} />}
/>
);
};

12
packages/core/client/src/schema-settings/GeneralSchemaDesigner.tsx
View File

@ -8,6 +8,7 @@ import { useTranslation } from 'react-i18next';
import { DragHandler, useCompile, useDesignable, useGridContext, useGridRowContext } from '../schema-component';
import { gridRowColWrap } from '../schema-initializer/utils';
import { SchemaSettings } from './SchemaSettings';
import { useGetLabelOfDesigner } from './hooks/useGetLabelOfDesigner';
const titleCss = css`
pointer-events: none;
@ -48,6 +49,7 @@ export const GeneralSchemaDesigner = (props: any) => {
const { t } = useTranslation();
const fieldSchema = useFieldSchema();
const compile = useCompile();
const { getLabel } = useGetLabelOfDesigner();
const schemaSettingsProps = {
dn,
@ -65,7 +67,11 @@ export const GeneralSchemaDesigner = (props: any) => {
insertPosition: 'afterEnd',
wrap: rowCtx?.cols?.length > 1 ? undefined : gridRowColWrap,
component: (
<PlusOutlined role="button" aria-label="designer-add-blocks" style={{ cursor: 'pointer', fontSize: 14 }} />
<PlusOutlined
role="button"
aria-label={getLabel('schema-initializer')}
style={{ cursor: 'pointer', fontSize: 14 }}
/>
),
};
}, [rowCtx?.cols?.length]);
@ -97,7 +103,7 @@ export const GeneralSchemaDesigner = (props: any) => {
<Space size={2} align={'center'}>
{draggable && (
<DragHandler>
<DragOutlined role="button" aria-label="designer-drag" />
<DragOutlined role="button" aria-label={getLabel('drag-handler')} />
</DragHandler>
)}
{!disableInitializer &&
@ -110,7 +116,7 @@ export const GeneralSchemaDesigner = (props: any) => {
title={
<MenuOutlined
role="button"
aria-label="designer-schema-settings"
aria-label={getLabel('schema-settings')}
style={{ cursor: 'pointer', fontSize: 12 }}
/>
}

24
packages/core/client/src/schema-settings/hooks/useGetLabelOfDesigner.ts Normal file
View File

@ -0,0 +1,24 @@
import { useFieldSchema } from '@formily/react';
import { useCallback } from 'react';
/**
* label = 'designer' + name + x-component + [x-designer] + [x-collection-field] + [postfix]
* @returns
*/
export const useGetLabelOfDesigner = () => {
const fieldSchema = useFieldSchema();
const component = fieldSchema['x-component'];
const designer = fieldSchema['x-designer'] ? `-${fieldSchema['x-designer']}` : '';
const collectionField = fieldSchema['x-collection-field'] ? `-${fieldSchema['x-collection-field']}` : '';
const getLabel = useCallback(
(name: string, postfix?: string) => {
postfix = postfix ? `-${postfix}` : '';
return `designer-${name}-${component}${designer}${collectionField}${postfix}`;
},
[collectionField, component, designer],
);
return { getLabel };
};