mirror of
https://github.com/nocobase/nocobase
synced 2024-11-15 15:35:28 +00:00
refactor: rename
This commit is contained in:
parent
f44b3bad1c
commit
2f30eb148d
@ -0,0 +1,9 @@
|
|||||||
|
import { useCallback } from 'react';
|
||||||
|
|
||||||
|
export const useGetAriaLabelOfBlockItem = () => {
|
||||||
|
const getAriaLabel = useCallback(() => {}, []);
|
||||||
|
|
||||||
|
return {
|
||||||
|
getAriaLabel,
|
||||||
|
};
|
||||||
|
};
|
@ -1,9 +0,0 @@
|
|||||||
import { useCallback } from 'react';
|
|
||||||
|
|
||||||
export const useGetLabelOfBlockItem = () => {
|
|
||||||
const getLabel = useCallback(() => {}, []);
|
|
||||||
|
|
||||||
return {
|
|
||||||
getLabel,
|
|
||||||
};
|
|
||||||
};
|
|
@ -13,7 +13,7 @@ import {
|
|||||||
useFormItemInitializerFields,
|
useFormItemInitializerFields,
|
||||||
} from '../../../schema-initializer/utils';
|
} from '../../../schema-initializer/utils';
|
||||||
import { OpenModeSchemaItems } from '../../../schema-items';
|
import { OpenModeSchemaItems } from '../../../schema-items';
|
||||||
import { useGetLabelOfDesigner } from '../../../schema-settings/hooks/useGetLabelOfDesigner';
|
import { useGetAriaLabelOfDesigner } from '../../../schema-settings/hooks/useGetAriaLabelOfDesigner';
|
||||||
|
|
||||||
const titleCss = css`
|
const titleCss = css`
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
@ -67,7 +67,7 @@ export const KanbanCardDesigner = (props: any) => {
|
|||||||
block: 'Kanban',
|
block: 'Kanban',
|
||||||
});
|
});
|
||||||
const associationFields = useAssociatedFormItemInitializerFields({ readPretty: true, block: 'Kanban' });
|
const associationFields = useAssociatedFormItemInitializerFields({ readPretty: true, block: 'Kanban' });
|
||||||
const { getLabel } = useGetLabelOfDesigner();
|
const { getAriaLabel } = useGetAriaLabelOfDesigner();
|
||||||
|
|
||||||
const items: any = [
|
const items: any = [
|
||||||
{
|
{
|
||||||
@ -137,7 +137,7 @@ export const KanbanCardDesigner = (props: any) => {
|
|||||||
component={
|
component={
|
||||||
<MenuOutlined
|
<MenuOutlined
|
||||||
role="button"
|
role="button"
|
||||||
aria-label={getLabel('schema-initializer')}
|
aria-label={getAriaLabel('schema-initializer')}
|
||||||
style={{ cursor: 'pointer', fontSize: 12 }}
|
style={{ cursor: 'pointer', fontSize: 12 }}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
|
@ -5,14 +5,14 @@ import React from 'react';
|
|||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { DragHandler, useDesignable } from '../..';
|
import { DragHandler, useDesignable } from '../..';
|
||||||
import { SchemaSettings } from '../../../schema-settings';
|
import { SchemaSettings } from '../../../schema-settings';
|
||||||
import { useGetLabelOfDesigner } from '../../../schema-settings/hooks/useGetLabelOfDesigner';
|
import { useGetAriaLabelOfDesigner } from '../../../schema-settings/hooks/useGetAriaLabelOfDesigner';
|
||||||
|
|
||||||
export const PageDesigner = ({ title }) => {
|
export const PageDesigner = ({ title }) => {
|
||||||
const { dn, designable } = useDesignable();
|
const { dn, designable } = useDesignable();
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const field = useField();
|
const field = useField();
|
||||||
const fieldSchema = useFieldSchema();
|
const fieldSchema = useFieldSchema();
|
||||||
const { getLabel } = useGetLabelOfDesigner();
|
const { getAriaLabel } = useGetAriaLabelOfDesigner();
|
||||||
const hidePageTitle = fieldSchema['x-component-props']?.hidePageTitle;
|
const hidePageTitle = fieldSchema['x-component-props']?.hidePageTitle;
|
||||||
const disablePageHeader = fieldSchema['x-component-props']?.disablePageHeader;
|
const disablePageHeader = fieldSchema['x-component-props']?.disablePageHeader;
|
||||||
if (!designable) {
|
if (!designable) {
|
||||||
@ -26,7 +26,7 @@ export const PageDesigner = ({ title }) => {
|
|||||||
title={
|
title={
|
||||||
<MenuOutlined
|
<MenuOutlined
|
||||||
role="button"
|
role="button"
|
||||||
aria-label={getLabel('schema-settings')}
|
aria-label={getAriaLabel('schema-settings')}
|
||||||
style={{ cursor: 'pointer', fontSize: 12 }}
|
style={{ cursor: 'pointer', fontSize: 12 }}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
@ -124,7 +124,7 @@ export const PageTabDesigner = ({ schema }) => {
|
|||||||
const { dn, designable } = useDesignable();
|
const { dn, designable } = useDesignable();
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const { modal } = App.useApp();
|
const { modal } = App.useApp();
|
||||||
const { getLabel } = useGetLabelOfDesigner();
|
const { getAriaLabel } = useGetAriaLabelOfDesigner();
|
||||||
|
|
||||||
if (!designable) {
|
if (!designable) {
|
||||||
return null;
|
return null;
|
||||||
@ -135,9 +135,9 @@ export const PageTabDesigner = ({ schema }) => {
|
|||||||
<div className={'general-schema-designer-icons'}>
|
<div className={'general-schema-designer-icons'}>
|
||||||
<Space size={2} align={'center'}>
|
<Space size={2} align={'center'}>
|
||||||
<DragHandler>
|
<DragHandler>
|
||||||
<DragOutlined style={{ marginRight: 0 }} role="button" aria-label={getLabel('drag-handler', 'tab')} />
|
<DragOutlined style={{ marginRight: 0 }} role="button" aria-label={getAriaLabel('drag-handler', 'tab')} />
|
||||||
</DragHandler>
|
</DragHandler>
|
||||||
<SchemaSettings title={<MenuOutlined role="button" aria-label={getLabel('schema-settings', 'tab')} />}>
|
<SchemaSettings title={<MenuOutlined role="button" aria-label={getAriaLabel('schema-settings', 'tab')} />}>
|
||||||
<SchemaSettings.ModalItem
|
<SchemaSettings.ModalItem
|
||||||
title={t('Edit')}
|
title={t('Edit')}
|
||||||
schema={
|
schema={
|
||||||
|
@ -4,18 +4,18 @@ import { Space } from 'antd';
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { DragHandler } from '../../../schema-component';
|
import { DragHandler } from '../../../schema-component';
|
||||||
import { useSchemaInitializer } from '../../../schema-initializer';
|
import { useSchemaInitializer } from '../../../schema-initializer';
|
||||||
import { useGetLabelOfDesigner } from '../../../schema-settings/hooks/useGetLabelOfDesigner';
|
import { useGetAriaLabelOfDesigner } from '../../../schema-settings/hooks/useGetAriaLabelOfDesigner';
|
||||||
|
|
||||||
export const TableActionColumnDesigner = (props: any) => {
|
export const TableActionColumnDesigner = (props: any) => {
|
||||||
const fieldSchema = useFieldSchema();
|
const fieldSchema = useFieldSchema();
|
||||||
const { render } = useSchemaInitializer(fieldSchema['x-initializer']);
|
const { render } = useSchemaInitializer(fieldSchema['x-initializer']);
|
||||||
const { getLabel } = useGetLabelOfDesigner();
|
const { getAriaLabel } = useGetAriaLabelOfDesigner();
|
||||||
return (
|
return (
|
||||||
<div className={'general-schema-designer'}>
|
<div className={'general-schema-designer'}>
|
||||||
<div className={'general-schema-designer-icons'}>
|
<div className={'general-schema-designer-icons'}>
|
||||||
<Space size={2} align={'center'}>
|
<Space size={2} align={'center'}>
|
||||||
<DragHandler>
|
<DragHandler>
|
||||||
<DragOutlined role="button" aria-label={getLabel('drag-handler')} />
|
<DragOutlined role="button" aria-label={getAriaLabel('drag-handler')} />
|
||||||
</DragHandler>
|
</DragHandler>
|
||||||
{render()}
|
{render()}
|
||||||
</Space>
|
</Space>
|
||||||
|
@ -4,18 +4,18 @@ import { Space } from 'antd';
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { DragHandler } from '../../../schema-component';
|
import { DragHandler } from '../../../schema-component';
|
||||||
import { useSchemaInitializer } from '../../../schema-initializer';
|
import { useSchemaInitializer } from '../../../schema-initializer';
|
||||||
import { useGetLabelOfDesigner } from '../../../schema-settings/hooks/useGetLabelOfDesigner';
|
import { useGetAriaLabelOfDesigner } from '../../../schema-settings/hooks/useGetAriaLabelOfDesigner';
|
||||||
|
|
||||||
export const TableRowActionDesigner = (props: any) => {
|
export const TableRowActionDesigner = (props: any) => {
|
||||||
const fieldSchema = useFieldSchema();
|
const fieldSchema = useFieldSchema();
|
||||||
const { render } = useSchemaInitializer(fieldSchema['x-initializer']);
|
const { render } = useSchemaInitializer(fieldSchema['x-initializer']);
|
||||||
const { getLabel } = useGetLabelOfDesigner();
|
const { getAriaLabel } = useGetAriaLabelOfDesigner();
|
||||||
return (
|
return (
|
||||||
<div className={'general-schema-designer'}>
|
<div className={'general-schema-designer'}>
|
||||||
<div className={'general-schema-designer-icons'}>
|
<div className={'general-schema-designer-icons'}>
|
||||||
<Space size={2} align={'center'}>
|
<Space size={2} align={'center'}>
|
||||||
<DragHandler>
|
<DragHandler>
|
||||||
<DragOutlined role="button" aria-label={getLabel('drag-handler')} />
|
<DragOutlined role="button" aria-label={getAriaLabel('drag-handler')} />
|
||||||
</DragHandler>
|
</DragHandler>
|
||||||
{render()}
|
{render()}
|
||||||
</Space>
|
</Space>
|
||||||
|
@ -7,7 +7,7 @@ import { SchemaInitializer, SchemaSettings } from '../..';
|
|||||||
import { useAPIClient } from '../../api-client';
|
import { useAPIClient } from '../../api-client';
|
||||||
import { useCollection } from '../../collection-manager';
|
import { useCollection } from '../../collection-manager';
|
||||||
import { createDesignable, useDesignable } from '../../schema-component';
|
import { createDesignable, useDesignable } from '../../schema-component';
|
||||||
import { useGetLabelOfDesigner } from '../../schema-settings/hooks/useGetLabelOfDesigner';
|
import { useGetAriaLabelOfDesigner } from '../../schema-settings/hooks/useGetAriaLabelOfDesigner';
|
||||||
|
|
||||||
export const Resizable = (props) => {
|
export const Resizable = (props) => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
@ -54,7 +54,7 @@ export const TableActionColumnInitializers = (props: any) => {
|
|||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const collection = useCollection();
|
const collection = useCollection();
|
||||||
const { treeTable } = fieldSchema?.parent?.parent['x-decorator-props'] || {};
|
const { treeTable } = fieldSchema?.parent?.parent['x-decorator-props'] || {};
|
||||||
const { getLabel } = useGetLabelOfDesigner();
|
const { getAriaLabel } = useGetAriaLabelOfDesigner();
|
||||||
return (
|
return (
|
||||||
<SchemaInitializer.Button
|
<SchemaInitializer.Button
|
||||||
insertPosition={'beforeEnd'}
|
insertPosition={'beforeEnd'}
|
||||||
@ -252,7 +252,9 @@ export const TableActionColumnInitializers = (props: any) => {
|
|||||||
component: Resizable,
|
component: Resizable,
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
component={<MenuOutlined role="button" aria-label={getLabel('schema-settings')} style={{ cursor: 'pointer' }} />}
|
component={
|
||||||
|
<MenuOutlined role="button" aria-label={getAriaLabel('schema-settings')} style={{ cursor: 'pointer' }} />
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -8,7 +8,7 @@ import { useTranslation } from 'react-i18next';
|
|||||||
import { DragHandler, useCompile, useDesignable, useGridContext, useGridRowContext } from '../schema-component';
|
import { DragHandler, useCompile, useDesignable, useGridContext, useGridRowContext } from '../schema-component';
|
||||||
import { gridRowColWrap } from '../schema-initializer/utils';
|
import { gridRowColWrap } from '../schema-initializer/utils';
|
||||||
import { SchemaSettings } from './SchemaSettings';
|
import { SchemaSettings } from './SchemaSettings';
|
||||||
import { useGetLabelOfDesigner } from './hooks/useGetLabelOfDesigner';
|
import { useGetAriaLabelOfDesigner } from './hooks/useGetAriaLabelOfDesigner';
|
||||||
|
|
||||||
const titleCss = css`
|
const titleCss = css`
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
@ -49,7 +49,7 @@ export const GeneralSchemaDesigner = (props: any) => {
|
|||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const fieldSchema = useFieldSchema();
|
const fieldSchema = useFieldSchema();
|
||||||
const compile = useCompile();
|
const compile = useCompile();
|
||||||
const { getLabel } = useGetLabelOfDesigner();
|
const { getAriaLabel } = useGetAriaLabelOfDesigner();
|
||||||
|
|
||||||
const schemaSettingsProps = {
|
const schemaSettingsProps = {
|
||||||
dn,
|
dn,
|
||||||
@ -69,7 +69,7 @@ export const GeneralSchemaDesigner = (props: any) => {
|
|||||||
component: (
|
component: (
|
||||||
<PlusOutlined
|
<PlusOutlined
|
||||||
role="button"
|
role="button"
|
||||||
aria-label={getLabel('schema-initializer')}
|
aria-label={getAriaLabel('schema-initializer')}
|
||||||
style={{ cursor: 'pointer', fontSize: 14 }}
|
style={{ cursor: 'pointer', fontSize: 14 }}
|
||||||
/>
|
/>
|
||||||
),
|
),
|
||||||
@ -103,7 +103,7 @@ export const GeneralSchemaDesigner = (props: any) => {
|
|||||||
<Space size={2} align={'center'}>
|
<Space size={2} align={'center'}>
|
||||||
{draggable && (
|
{draggable && (
|
||||||
<DragHandler>
|
<DragHandler>
|
||||||
<DragOutlined role="button" aria-label={getLabel('drag-handler')} />
|
<DragOutlined role="button" aria-label={getAriaLabel('drag-handler')} />
|
||||||
</DragHandler>
|
</DragHandler>
|
||||||
)}
|
)}
|
||||||
{!disableInitializer &&
|
{!disableInitializer &&
|
||||||
@ -116,7 +116,7 @@ export const GeneralSchemaDesigner = (props: any) => {
|
|||||||
title={
|
title={
|
||||||
<MenuOutlined
|
<MenuOutlined
|
||||||
role="button"
|
role="button"
|
||||||
aria-label={getLabel('schema-settings')}
|
aria-label={getAriaLabel('schema-settings')}
|
||||||
style={{ cursor: 'pointer', fontSize: 12 }}
|
style={{ cursor: 'pointer', fontSize: 12 }}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
|
@ -5,13 +5,13 @@ import { useCallback } from 'react';
|
|||||||
* label = 'designer' + name + x-component + [x-designer] + [x-collection-field] + [postfix]
|
* label = 'designer' + name + x-component + [x-designer] + [x-collection-field] + [postfix]
|
||||||
* @returns
|
* @returns
|
||||||
*/
|
*/
|
||||||
export const useGetLabelOfDesigner = () => {
|
export const useGetAriaLabelOfDesigner = () => {
|
||||||
const fieldSchema = useFieldSchema();
|
const fieldSchema = useFieldSchema();
|
||||||
const component = fieldSchema['x-component'];
|
const component = fieldSchema['x-component'];
|
||||||
const designer = fieldSchema['x-designer'] ? `-${fieldSchema['x-designer']}` : '';
|
const designer = fieldSchema['x-designer'] ? `-${fieldSchema['x-designer']}` : '';
|
||||||
const collectionField = fieldSchema['x-collection-field'] ? `-${fieldSchema['x-collection-field']}` : '';
|
const collectionField = fieldSchema['x-collection-field'] ? `-${fieldSchema['x-collection-field']}` : '';
|
||||||
|
|
||||||
const getLabel = useCallback(
|
const getAriaLabel = useCallback(
|
||||||
(name: string, postfix?: string) => {
|
(name: string, postfix?: string) => {
|
||||||
postfix = postfix ? `-${postfix}` : '';
|
postfix = postfix ? `-${postfix}` : '';
|
||||||
|
|
||||||
@ -20,5 +20,5 @@ export const useGetLabelOfDesigner = () => {
|
|||||||
[collectionField, component, designer],
|
[collectionField, component, designer],
|
||||||
);
|
);
|
||||||
|
|
||||||
return { getLabel };
|
return { getAriaLabel };
|
||||||
};
|
};
|
Loading…
Reference in New Issue
Block a user