From e0feade10ec4227195279e494c14509fc3154aff Mon Sep 17 00:00:00 2001 From: jhoneybee Date: Sat, 29 Aug 2020 19:27:55 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0modalRender?= =?UTF-8?q?=E7=9A=84=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit test: 添加的测试用例 fix --- src/Dialog.tsx | 31 ++++++++++++++++++------------- src/IDialogPropTypes.tsx | 1 + tests/index.spec.js | 16 ++++++++++++++-- 3 files changed, 33 insertions(+), 15 deletions(-) diff --git a/src/Dialog.tsx b/src/Dialog.tsx index 485c77d3..df1b12f6 100644 --- a/src/Dialog.tsx +++ b/src/Dialog.tsx @@ -233,6 +233,7 @@ export default class Dialog extends React.Component { bodyProps, children, destroyOnClose, + modalRender = modalNode => modalNode, } = this.props; const dest: any = {}; if (width !== undefined) { @@ -276,6 +277,22 @@ export default class Dialog extends React.Component { ); } + const content = ( +
+ {closer} + {headerNode} +
+ {children} +
+ {footerNode} +
+ ) + const styleBox = { ...style, ...dest }; const sentinelStyle = { width: 0, height: 0, overflow: 'hidden', outline: 'none' }; const transitionName = this.getTransitionName(); @@ -296,19 +313,7 @@ export default class Dialog extends React.Component { style={sentinelStyle} aria-hidden="true" /> -
- {closer} - {headerNode} -
- {children} -
- {footerNode} -
+ {modalRender(content)}
IStringOrHtmlElement) | false; closeIcon?: ReactNode; + modalRender?: (node: ReactNode) => ReactNode; forceRender?: boolean; // https://github.com/ant-design/ant-design/issues/19771 // https://github.com/react-component/dialog/issues/95 diff --git a/tests/index.spec.js b/tests/index.spec.js index 7374756b..d4be2e3b 100644 --- a/tests/index.spec.js +++ b/tests/index.spec.js @@ -1,6 +1,6 @@ /* eslint-disable react/no-render-return-value */ /* eslint-disable func-names */ -import React from 'react'; +import React, { cloneElement } from 'react'; import { mount } from 'enzyme'; import KeyCode from 'rc-util/lib/KeyCode'; @@ -50,7 +50,7 @@ describe('dialog', () => { dialog.unmount(); jest.useRealTimers(); }); - + it('show', () => { dialog.setState({ visible: true }); jest.runAllTimers(); @@ -425,4 +425,16 @@ describe('dialog', () => { d.update(); expect(d.find('.rc-dialog-wrap').props().style.display).toEqual(null); }); + + it('modalRender', () => { + const modalRender = mount( + cloneElement(node, { ...node.props, style: { background: '#1890ff' }})}> + + ); + modalRender.setState({ visible: true }); + jest.runAllTimers(); + modalRender.update(); + expect(modalRender.find('.rc-dialog-content').props().style.background).toEqual('#1890ff'); + modalRender.unmount(); + }); }); From 2a1062bf7c5d0af1aff0b1a441e34b7b1bfb6bc8 Mon Sep 17 00:00:00 2001 From: jhoneybee Date: Sat, 29 Aug 2020 21:14:58 +0800 Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=E5=88=A0=E9=99=A4=E5=A4=9A=E4=BD=99?= =?UTF-8?q?=E7=9A=84=E7=A9=BA=E6=A0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tests/index.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/index.spec.js b/tests/index.spec.js index d4be2e3b..7f2917ee 100644 --- a/tests/index.spec.js +++ b/tests/index.spec.js @@ -50,7 +50,7 @@ describe('dialog', () => { dialog.unmount(); jest.useRealTimers(); }); - + it('show', () => { dialog.setState({ visible: true }); jest.runAllTimers(); From 1b96d160369696eea2ca25cc2175cd5b1e4bacdc Mon Sep 17 00:00:00 2001 From: jhoneybee Date: Mon, 31 Aug 2020 23:00:12 +0800 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=8B=96?= =?UTF-8?q?=E6=8B=BDmodal=E7=9A=84=E4=BE=8B=E5=AD=90=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/draggable.tsx | 64 ++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + src/Dialog.tsx | 4 +-- 3 files changed, 67 insertions(+), 2 deletions(-) create mode 100644 examples/draggable.tsx diff --git a/examples/draggable.tsx b/examples/draggable.tsx new file mode 100644 index 00000000..92cbc10c --- /dev/null +++ b/examples/draggable.tsx @@ -0,0 +1,64 @@ +import 'bootstrap/dist/css/bootstrap.css'; +import '../assets/bootstrap.less'; +import * as React from 'react'; +import Draggable from 'react-draggable'; +import Dialog from '../src/DialogWrap'; + +const MyControl = () => { + const [visible, setVisible] = React.useState(false); + const [disabled, setDisabled] = React.useState(true); + const onClick = () => { + setVisible(true); + } + + const onClose = () => { + setVisible(false); + } + + return ( +
+

+ +

+ { + if (disabled){ + setDisabled(false) + } + }} + onMouseOut={() => { + setDisabled(true) + }} + // fix eslintjsx-a11y/mouse-events-have-key-events + // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/mouse-events-have-key-events.md + onFocus={ () => {} } + onBlur={ () => {}} + // end + >modal
+ )} + modalRender={modal => {modal}} + > +
+ Day before yesterday I saw a rabbit, and yesterday a deer, and today, you. +
+ +
+ ); +}; + +export default MyControl; diff --git a/package.json b/package.json index 380c8cc8..e86132a5 100644 --- a/package.json +++ b/package.json @@ -69,6 +69,7 @@ "rc-drawer": "4.1.0", "react": "^16.9.0", "react-dom": "^16.9.0", + "react-draggable": "^4.4.3", "typescript": "^3.7.2" }, "typings": "./lib/DialogWrap.d.ts" diff --git a/src/Dialog.tsx b/src/Dialog.tsx index df1b12f6..d9576df2 100644 --- a/src/Dialog.tsx +++ b/src/Dialog.tsx @@ -233,7 +233,7 @@ export default class Dialog extends React.Component { bodyProps, children, destroyOnClose, - modalRender = modalNode => modalNode, + modalRender, } = this.props; const dest: any = {}; if (width !== undefined) { @@ -313,7 +313,7 @@ export default class Dialog extends React.Component { style={sentinelStyle} aria-hidden="true" /> - {modalRender(content)} + {modalRender ? modalRender(content) : content }