refactor: rename

This commit is contained in:
Rain 2023-10-20 09:13:52 +08:00
parent f44b3bad1c
commit 2f30eb148d
9 changed files with 37 additions and 35 deletions

View File

@ -0,0 +1,9 @@
import { useCallback } from 'react';
export const useGetAriaLabelOfBlockItem = () => {
const getAriaLabel = useCallback(() => {}, []);
return {
getAriaLabel,
};
};

View File

@ -1,9 +0,0 @@
import { useCallback } from 'react';
export const useGetLabelOfBlockItem = () => {
const getLabel = useCallback(() => {}, []);
return {
getLabel,
};
};

View File

@ -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 }}
/> />
} }

View File

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

View File

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

View File

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

View File

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

View File

@ -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 }}
/> />
} }

View File

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