diff --git a/src/playground/editor/advanced-editor/example/xml/dnd5e.xml b/src/playground/editor/advanced-editor/example/xml/dnd5e.xml index 961c2115b..3140506a3 100644 --- a/src/playground/editor/advanced-editor/example/xml/dnd5e.xml +++ b/src/playground/editor/advanced-editor/example/xml/dnd5e.xml @@ -392,7 +392,7 @@ - + diff --git a/src/shared/components/layout/context/LayoutStateContext.tsx b/src/shared/components/layout/context/LayoutStateContext.tsx index be0cb576d..73b5341c9 100644 --- a/src/shared/components/layout/context/LayoutStateContext.tsx +++ b/src/shared/components/layout/context/LayoutStateContext.tsx @@ -2,9 +2,9 @@ import React from 'react'; import { TMemo } from '@shared/components/TMemo'; import type { XMLBuilderContext } from '../XMLBuilder'; -export const LayoutStateContext = React.createContext( - null -); +export const LayoutStateContext = + React.createContext(null); +LayoutStateContext.displayName = 'LayoutStateContext'; export const LayoutStateContextProvider: React.FC<{ state: XMLBuilderContext; diff --git a/src/shared/components/layout/context/LayoutWidthContext.tsx b/src/shared/components/layout/context/LayoutWidthContext.tsx index d23ee6961..3c2f01f38 100644 --- a/src/shared/components/layout/context/LayoutWidthContext.tsx +++ b/src/shared/components/layout/context/LayoutWidthContext.tsx @@ -1,16 +1,17 @@ import React from 'react'; export const LayoutWidthContext = React.createContext(0); +LayoutWidthContext.displayName = 'LayoutWidthContext'; interface LayoutWidthContextProviderProps { width: number; } -export const LayoutWidthContextProvider: React.FC = React.memo( - (props) => { +export const LayoutWidthContextProvider: React.FC = + React.memo((props) => { return ( {props.children} ); - } -); + }); +LayoutWidthContextProvider.displayName = 'LayoutWidthContextProvider'; diff --git a/src/shared/components/layout/tags/Button/shared.tsx b/src/shared/components/layout/tags/Button/shared.tsx new file mode 100644 index 000000000..3976d2fa7 --- /dev/null +++ b/src/shared/components/layout/tags/Button/shared.tsx @@ -0,0 +1,32 @@ +import React, { useContext } from 'react'; +import type { TagComponent } from '../type'; +import { TMemo } from '@shared/components/TMemo'; +import { Button, ButtonProps } from 'antd'; +import { useLayoutChildren } from '../../hooks/useLayoutChildren'; +import { LayoutStateContext } from '../../context/LayoutStateContext'; + +interface TagButtonSharedProps { + showInDetail: boolean; + type: ButtonProps['type']; + danger: ButtonProps['danger']; + onClick: ButtonProps['onClick']; +} +export const TagButtonShared: TagComponent = TMemo( + (props) => { + const { showInDetail = false } = props; + const children = useLayoutChildren(props); + const context = useContext(LayoutStateContext)!; + + if (context.layoutType === 'detail' && showInDetail !== true) { + // 详情页不显示按钮(默认) + return null; + } + + return ( + + ); + } +); +TagButtonShared.displayName = 'TagButtonShared'; diff --git a/src/shared/components/layout/tags/__all__.ts b/src/shared/components/layout/tags/__all__.ts index e49da6aa6..03c632baa 100644 --- a/src/shared/components/layout/tags/__all__.ts +++ b/src/shared/components/layout/tags/__all__.ts @@ -36,6 +36,7 @@ import { TagCustomListEdit } from './CustomList/edit'; import { TagCurrMaxEdit } from './CurrMax/edit'; import { TagCurrMaxDetail } from './CurrMax/detail'; import { TagSpaceShared } from './Space/shared'; +import { TagButtonShared } from './Button/shared'; // 展示数据组件 registerTag('Template', TagTemplateShared); @@ -83,6 +84,8 @@ registerTag('RollBtn', TagRollBtnDetail, TagRollBtnEdit); registerTag('CurrMax', TagCurrMaxDetail, TagCurrMaxEdit); +registerTag('Button', TagButtonShared, TagButtonShared); + // 高级操作组件 registerTag('Use', TagUseShared);