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

chore: block item

Browse Source
This commit is contained in:
Rain 2023-10-20 10:10:04 +08:00
parent 44656b4f6f
commit 4ad62b3023
2 changed files with 27 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/core/client/src/schema-component/antd/block-item/BlockItem.tsx
View File

@ -1,36 +1,19 @@
import { css } from '@emotion/css';
import { useFieldSchema } from '@formily/react';
import cls from 'classnames';
import React from 'react';
import { useBlockContext } from '../../../block-provider';
import { SortableItem } from '../../common';
import { useDesigner, useProps } from '../../hooks';
const getAriaLabel = ({ schema, blockName }) => {
const resource = schema?.['x-decorator-props']?.['resource'];
if (resource && blockName) {
return `${blockName}-block-${resource}`;
}
const field = schema['x-collection-field'];
if (field && blockName) {
return `${blockName}-block-field-${field}`;
}
if (blockName) {
return `${blockName}-block`;
}
return `block-item`;
};
import { useGetAriaLabelOfBlockItem } from './hooks/useGetAriaLabelOfBlockItem';
export const BlockItem: React.FC<any> = (props) => {
const { className, children } = useProps(props);
const Designer = useDesigner();
const schema = useFieldSchema();
const { name } = useBlockContext() || {};
const { getAriaLabel } = useGetAriaLabelOfBlockItem(props.name);
return (
<SortableItem
aria-label={getAriaLabel({ schema, blockName: props.name || name })}
role="button"
aria-label={getAriaLabel()}
className={cls(
'nb-block-item',
className,

26
packages/core/client/src/schema-component/antd/block-item/hooks/useGetAriaLabelOfBlockItem.ts
View File

@ -1,7 +1,29 @@
import { useFieldSchema } from '@formily/react';
import { useCallback } from 'react';
import { useBlockContext } from '../../../../block-provider';
import { useCollection } from '../../../../collection-manager';
export const useGetAriaLabelOfBlockItem = () => {
const getAriaLabel = useCallback(() => {}, []);
/**
* label = 'block-item' + x-component + [collectionName] + [blockName] + [x-collection-field] + [postfix]
* @returns
*/
export const useGetAriaLabelOfBlockItem = (name?: string) => {
const fieldSchema = useFieldSchema();
const component = fieldSchema['x-component'];
const collectionField = fieldSchema['x-collection-field'] ? `-${fieldSchema['x-collection-field']}` : '';
let { name: blockName } = useBlockContext() || {};
let { name: collectionName } = useCollection();
collectionName = collectionName ? `-${collectionName}` : '';
blockName = name || blockName;
blockName = blockName ? `-${blockName}` : '';
const getAriaLabel = useCallback(
(postfix?: string) => {
postfix = postfix ? `-${postfix}` : '';
return `block-item-${component}${collectionName}${blockName}${collectionField}${postfix}`;
},
[blockName, collectionField, collectionName, component],
);
return {
getAriaLabel,