diff --git a/CHANGELOG.md b/CHANGELOG.md index 2b8c210f3..9a7473226 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,30 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +### [3.0.8](https://github.com/DTStack/dt-react-component/compare/v3.0.7...v3.0.8) (2023-01-11) + + +### Features + +* update blockHeader margin-bottom ([#281](https://github.com/DTStack/dt-react-component/issues/281)) ([2962911](https://github.com/DTStack/dt-react-component/commit/29629111840bd68a142b4f49e083ba2a23e97355)) + + +### Bug Fixes + +* fix ModalProps for modalWithForm ([#283](https://github.com/DTStack/dt-react-component/issues/283)) ([f0c813a](https://github.com/DTStack/dt-react-component/commit/f0c813a306dc2cadd495ce15cae7b4328b155ad4)) + +## [3.1.0](https://github.com/DTStack/dt-react-component/compare/v3.0.7...v3.1.0) (2023-01-11) + + +### Features + +* update blockHeader margin-bottom ([#281](https://github.com/DTStack/dt-react-component/issues/281)) ([2962911](https://github.com/DTStack/dt-react-component/commit/29629111840bd68a142b4f49e083ba2a23e97355)) + + +### Bug Fixes + +* fix ModalProps for modalWithForm ([#283](https://github.com/DTStack/dt-react-component/issues/283)) ([f0c813a](https://github.com/DTStack/dt-react-component/commit/f0c813a306dc2cadd495ce15cae7b4328b155ad4)) + ### [3.0.7](https://github.com/DTStack/dt-react-component/compare/v3.0.6...v3.0.7) (2022-12-16) diff --git a/package.json b/package.json index 9b512c90e..6a762beaf 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "dt-react-component", - "version": "3.0.7", + "version": "3.0.8", "description": "react-component", "repository": "https://github.com/DTStack/dt-react-component", "sideEffects": [ diff --git a/src/components/blockHeader/__tests__/blockHeader.test.tsx b/src/components/blockHeader/__tests__/blockHeader.test.tsx index 4b4b2af73..123d0733b 100644 --- a/src/components/blockHeader/__tests__/blockHeader.test.tsx +++ b/src/components/blockHeader/__tests__/blockHeader.test.tsx @@ -121,4 +121,18 @@ describe('test BlockHeader render', () => { const titleBoxWrap1 = container1.firstChild.firstChild.firstChild; expect(titleBoxWrap1.childNodes.length).toEqual(3); }); + test('should render BlockHeader correct margin-bottom', () => { + const { container: noStyle } = render(); + expect(noStyle.querySelector('.dtc-block-header')).not.toHaveAttribute('style'); + const { container: defaultBottom } = render( + + ); + expect(defaultBottom.querySelector('.dtc-block-header')).toHaveStyle({ marginBottom: 16 }); + const { container: customizeBottom } = render( + + ); + expect(customizeBottom.querySelector('.dtc-block-header')).toHaveStyle({ + marginBottom: 10, + }); + }); }); diff --git a/src/components/blockHeader/index.tsx b/src/components/blockHeader/index.tsx index 19ae06769..7e1e8a47a 100644 --- a/src/components/blockHeader/index.tsx +++ b/src/components/blockHeader/index.tsx @@ -19,6 +19,8 @@ export interface BlockHeaderProps { * 默认 false */ isSmall?: boolean; + hasBottom?: boolean; + spaceBottom?: number; // 标题一行的样式类名 titleRowClassName?: string; // 标题的样式类名 @@ -38,6 +40,8 @@ const BlockHeader: React.FC = function (props) { afterTitle = '', tooltip = '', isSmall = false, + hasBottom = false, + spaceBottom = 0, titleRowClassName = '', titleClassName = '', showBackground = true, @@ -53,6 +57,9 @@ const BlockHeader: React.FC = function (props) { ); const newAfterTitle = afterTitle || questionTooltip; + let bottomStyle; + if (hasBottom) bottomStyle = { marginBottom: 16 }; + if (spaceBottom) bottomStyle = { marginBottom: spaceBottom }; const [expand, setExpand] = useState(defaultExpand); const handleExpand = (expand) => { @@ -61,7 +68,7 @@ const BlockHeader: React.FC = function (props) { onChange?.(expand); }; return ( -
+
; export const FORM_PROPS = [ 'colon', diff --git a/src/components/renderFormItem/index.tsx b/src/components/renderFormItem/index.tsx index f0ac55af2..02e8c26a8 100644 --- a/src/components/renderFormItem/index.tsx +++ b/src/components/renderFormItem/index.tsx @@ -10,7 +10,7 @@ interface ItemType { key: string | number | (string | number)[]; required?: boolean; component?: React.ReactNode; - tooltip?: React.ReactNode | string; + tooltip?: React.ReactNode; extra?: React.ReactNode; options?: { className?: string; diff --git a/src/components/textMark/index.tsx b/src/components/textMark/index.tsx index 6bc5a7eb5..224830017 100644 --- a/src/components/textMark/index.tsx +++ b/src/components/textMark/index.tsx @@ -7,7 +7,7 @@ export interface TextMarkProps { [propName: string]: any; } class TextMark extends React.Component { - renderMark(text = '', markText = ''): React.ReactNode | string { + renderMark(text = '', markText = ''): React.ReactNode { const markTextIndex = text.indexOf(markText); if (markTextIndex !== -1) { return ( diff --git a/src/components/toolModal/index.tsx b/src/components/toolModal/index.tsx index 942342bbd..5f7b56219 100644 --- a/src/components/toolModal/index.tsx +++ b/src/components/toolModal/index.tsx @@ -5,7 +5,7 @@ import Fullscreen from '../fullscreen'; export interface ToolModalProps { visible: boolean; - toolbox?: React.ReactNode | string; + toolbox?: React.ReactNode; fullscreen?: boolean | undefined; [propName: string]: any; } diff --git a/src/stories/blockHeader.stories.tsx b/src/stories/blockHeader.stories.tsx index ebb6581eb..b89b8029d 100644 --- a/src/stories/blockHeader.stories.tsx +++ b/src/stories/blockHeader.stories.tsx @@ -71,6 +71,20 @@ const propDefinitions = [ description: '是否默认展开内容', defaultValue: 'true', }, + { + property: 'hasBottom', + propType: 'boolean', + required: false, + description: '是否有默认下边距16px', + defaultValue: 'false', + }, + { + property: 'spaceBottom', + propType: 'number', + required: false, + description: '自定义下边距,优先级高于 hasBottom', + defaultValue: 0, + }, { property: 'children', propType: 'React.ReactNode', diff --git a/src/stories/modalWithForm.stories.tsx b/src/stories/modalWithForm.stories.tsx index cd1d7c139..af5c7f9af 100644 --- a/src/stories/modalWithForm.stories.tsx +++ b/src/stories/modalWithForm.stories.tsx @@ -60,7 +60,7 @@ const propDefinitions = [ }, { property: 'title', - propType: 'React.ReactNode | string', + propType: 'React.ReactNode', required: false, description: '标题', defaultValue: '--',