From 1c0661fa53bd4651c6211f411273d54bd79bb1a5 Mon Sep 17 00:00:00 2001 From: xrkffgg Date: Wed, 19 Aug 2020 15:08:22 +0800 Subject: [PATCH 1/4] chore: use father --- .eslintrc.js | 24 +++ .fatherrc.js | 9 + .gitignore | 4 +- .prettierrc | 6 + .travis.yml | 2 +- examples/ant-design.html | 0 examples/ant-design.tsx | 310 +++++++++++++----------------- examples/bootstrap.html | 0 examples/bootstrap.tsx | 247 ++++++++++++------------ examples/multiple-Portal.html | 0 examples/multiple-Portal.tsx | 13 +- jest.config.js | 4 + now.json | 11 ++ package.json | 71 +++---- src/Dialog.tsx | 118 ++++++------ src/DialogWrap.tsx | 3 +- src/IDialogPropTypes.tsx | 4 +- src/LazyRenderBox.tsx | 1 + tests/{index.js => index.spec.js} | 83 ++++---- tests/setup.js | 6 + typings/custom.d.ts | 6 +- typings/index.d.ts | 1 + 22 files changed, 464 insertions(+), 459 deletions(-) create mode 100644 .eslintrc.js create mode 100644 .fatherrc.js create mode 100644 .prettierrc delete mode 100644 examples/ant-design.html delete mode 100644 examples/bootstrap.html delete mode 100644 examples/multiple-Portal.html create mode 100644 jest.config.js create mode 100644 now.json rename tests/{index.js => index.spec.js} (91%) create mode 100644 tests/setup.js diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 00000000..65b14552 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,24 @@ +const base = require("@umijs/fabric/dist/eslint"); + +module.exports = { + ...base, + rules: { + ...base.rules, + "arrow-parens": 0, + "react/no-array-index-key": 0, + "react/sort-comp": 0, + "@typescript-eslint/no-explicit-any": 0, + "@typescript-eslint/no-empty-interface": 0, + "@typescript-eslint/no-inferrable-types": 0, + "react/no-find-dom-node": 0, + "react/require-default-props": 0, + "no-confusing-arrow": 0, + "import/no-named-as-default-member": 0, + "jsx-a11y/label-has-for": 0, + "jsx-a11y/label-has-associated-control": 0, + "import/no-extraneous-dependencies": 0, + "react/button-has-type": 0, + "jsx-a11y/no-noninteractive-tabindex": 0, + "jsx-a11y/no-autofocus": 0, + }, +}; diff --git a/.fatherrc.js b/.fatherrc.js new file mode 100644 index 00000000..9d8c16b0 --- /dev/null +++ b/.fatherrc.js @@ -0,0 +1,9 @@ +export default { + cjs: "babel", + esm: { type: "babel", importLibToEs: true }, + preCommit: { + eslint: true, + prettier: true, + }, + runtimeHelpers: true, +}; diff --git a/.gitignore b/.gitignore index 27e6a383..ffe384fb 100644 --- a/.gitignore +++ b/.gitignore @@ -25,11 +25,11 @@ build lib es coverage -*.js *.jsx *.map !tests/index.js !/index*.js /ios/ /android/ -yarn.lock \ No newline at end of file +yarn.lock +.storybook diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..895b8bdc --- /dev/null +++ b/.prettierrc @@ -0,0 +1,6 @@ +{ + "singleQuote": true, + "trailingComma": "all", + "proseWrap": "never", + "printWidth": 100 +} diff --git a/.travis.yml b/.travis.yml index 1d853fc2..313a4cbc 100644 --- a/.travis.yml +++ b/.travis.yml @@ -8,7 +8,7 @@ notifications: - hust2012jiangkai@gmail.com node_js: -- 6.9.1 +- 10 before_install: - | diff --git a/examples/ant-design.html b/examples/ant-design.html deleted file mode 100644 index e69de29b..00000000 diff --git a/examples/ant-design.tsx b/examples/ant-design.tsx index 466a9f39..e11a52b0 100644 --- a/examples/ant-design.tsx +++ b/examples/ant-design.tsx @@ -1,8 +1,6 @@ /* eslint no-console:0 */ -import 'rc-dialog/assets/index.less'; +import '../assets/index.less'; import * as React from 'react'; -import * as ReactDOM from 'react-dom'; -// use import Dialog from 'rc-dialog' import Dialog from '../src/DialogWrap'; const clearPath = 'M793 242H366v-74c0-6.7-7.7-10.4-12.9' + @@ -27,190 +25,158 @@ const getSvg = (path: string, props = {}, align = false) => { ); }; -class MyControl extends React.Component { - state = { - visible: false, - visible2: false, - width: 600, - destroyOnClose: false, - center: false, - mousePosition: undefined, - useIcon: false, - forceRender: false, - }; - - onClick = (e: React.MouseEvent) => { - this.setState({ - mousePosition: { - x: e.pageX, - y: e.pageY, - }, - visible: true, +const MyControl = () => { + const [visible, setVisible] = React.useState(false); + const [visible2, setVisible2] = React.useState(false); + const [width, setWidth] = React.useState(600); + const [destroyOnClose, setDestroyOnClose] = React.useState(false); + const [center, setCenter] = React.useState(false); + const [mousePosition, setMousePosition] = React.useState({}); + const [useIcon, setUseIcon] = React.useState(false); + const [forceRender, setForceRender] = React.useState(false); + + const onClick = (e: React.MouseEvent) => { + setMousePosition({ + x: e.pageX, + y: e.pageY, }); + setVisible(true); } - onClose = (e: React.SyntheticEvent) => { - this.setState({ - visible: false, - }); + const onClose = () => { + setVisible(false); } - onClose2 = (e: React.SyntheticEvent) => { - this.setState({ - visible: false, - visible2: false, - }); + const onClose2 = () => { + setVisible(false); + setVisible2(false); } - onDestroyOnCloseChange = (e: React.ChangeEvent) => { - this.setState({ - destroyOnClose: e.target.checked, - }); + const onDestroyOnCloseChange = (e: React.ChangeEvent) => { + setDestroyOnClose(e.target.checked); } - onForceRenderChange = (e: React.ChangeEvent) => { - this.setState({ - forceRender: e.target.checked, - }); + const onForceRenderChange = (e: React.ChangeEvent) => { + setForceRender(e.target.checked); } - changeWidth = () => { - this.setState({ - width: this.state.width === 600 ? 800 : 600, - }); + const changeWidth = () => { + setWidth(width === 600 ? 800 : 600); } - center = (e: React.ChangeEvent) => { - this.setState({ - center: e.target.checked, - }); + const centerEvent = (e: React.ChangeEvent) => { + setCenter(e.target.checked); } - toggleCloseIcon = () => { - this.setState({ - useIcon: !this.state.useIcon, - }); + const toggleCloseIcon = () => { + setUseIcon(!useIcon); } - render() { - const style = { - width: this.state.width, - }; - let wrapClassName = ''; - if (this.state.center) { - wrapClassName = 'center'; - } - const dialog = ( - - -

basic modal

- - - - -
-
- ); - - const dialog2 = ( - - -

basic modal

- - - - -
-
- ); - - return ( -
- -

- -   - -   - -   - -

- {dialog} - {dialog2} -
- ); + const style = { width }; + + let wrapClassName = ''; + if (center) { + wrapClassName = 'center'; } -} - -ReactDOM.render( -
-

ant-design dialog

- -
, - document.getElementById('__react-content'), -); + + const dialog = ( + + +

basic modal

+ + + + +
+
+ ); + + const dialog2 = ( + + +

basic modal

+ + + + +
+
+ ); + + return ( +
+ +

+ +   + +   + +   + +

+ {dialog} + {dialog2} +
+ ); +}; + +export default MyControl; diff --git a/examples/bootstrap.html b/examples/bootstrap.html deleted file mode 100644 index e69de29b..00000000 diff --git a/examples/bootstrap.tsx b/examples/bootstrap.tsx index 23513b10..c4a52948 100644 --- a/examples/bootstrap.tsx +++ b/examples/bootstrap.tsx @@ -1,144 +1,133 @@ import 'bootstrap/dist/css/bootstrap.css'; -import 'rc-dialog/assets/bootstrap.less'; +import '../assets/bootstrap.less'; import * as React from 'react'; -import * as ReactDOM from 'react-dom'; import Dialog from '../src/DialogWrap'; -class MyControl extends React.Component { - state = { - visible: false, - destroyOnClose: false, - }; - onClick = () => { - this.setState({ - visible: true, - }); +const MyControl = () => { + const [visible, setVisible] = React.useState(false); + const [destroyOnClose, setDestroyOnClose] = React.useState(false); + + const onClick = () => { + setVisible(true); } - onClose = () => { - this.setState({ - visible: false, - }); + + const onClose = () => { + setVisible(false); } - onDestroyOnCloseChange = (e: React.ChangeEvent) => { - this.setState({ - destroyOnClose: e.target.checked, - }); + + const onDestroyOnCloseChange = (e: React.ChangeEvent) => { + setDestroyOnClose(e.target.checked); } - render() { - let dialog; - if (this.state.visible || !this.state.destroyOnClose) { - dialog = ( - 第二个弹框} - footer={ - [ - , - , - ] - } - >

Text in a modal

-

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

-
-

Overflowing text to show scroll behavior

+ + let dialog; + + if (visible || !destroyOnClose) { + dialog = ( + 第二个弹框} + footer={ + [ + , + , + ] + } + >

Text in a modal

+

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

+
+

Overflowing text to show scroll behavior

+

Cras mattis consectetur purus sit amet fermentum. + Cras justo odio, dapibus ac facilisis in, + egestas eget quam. Morbi leo risus, porta ac consectetur ac, + vestibulum at eros. +

+

+ {' '} + {' '} + {' '} + {' '} + {' '} + {' '} +

+

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus + sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. +

+
+

Aenean lacinia bibendum nulla sed + consectetur. Praesent commodo cursus magna, + vel scelerisque nisl consectetur et. Donec sed odio dui. + Donec + ullamcorper nulla non metus auctor fringilla. +

+

Cras mattis consectetur purus sit amet fermentum. + Cras justo odio, dapibus ac facilisis in, egestas + eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. +

+

Praesent commodo cursus + magna, vel scelerisque nisl consectetur et. + Vivamus sagittis lacus vel augue laoreet rutrum faucibus + dolor auctor. +

+

Aenean lacinia bibendum nulla sed consectetur. + Praesent commodo cursus magna, vel + scelerisque nisl consectetur et. Donec sed odio dui. + Donec ullamcorper nulla non metus auctor + fringilla. +

Cras mattis consectetur purus sit amet fermentum. - Cras justo odio, dapibus ac facilisis in, - egestas eget quam. Morbi leo risus, porta ac consectetur ac, - vestibulum at eros. + Cras justo odio, dapibus ac + facilisis in, egestas eget quam. Morbi leo risus, + porta ac consectetur ac, vestibulum at eros.

- {' '} - {' '} - {' '} - {' '} - {' '} - {' '} + Praesent commodo cursus magna, vel scelerisque nisl consectetur et. + Vivamus sagittis lacus vel augue + laoreet rutrum faucibus dolor auctor.

-

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus - sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. +

Aenean lacinia bibendum nulla sed consectetur. Praesent + commodo cursus magna, vel scelerisque nisl consectetur et. + Donec sed odio dui. Donec ullamcorper nulla + non metus auctor fringilla.

-
-

Aenean lacinia bibendum nulla sed - consectetur. Praesent commodo cursus magna, - vel scelerisque nisl consectetur et. Donec sed odio dui. - Donec - ullamcorper nulla non metus auctor fringilla. -

-

Cras mattis consectetur purus sit amet fermentum. - Cras justo odio, dapibus ac facilisis in, egestas - eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

Praesent commodo cursus - magna, vel scelerisque nisl consectetur et. - Vivamus sagittis lacus vel augue laoreet rutrum faucibus - dolor auctor. -

-

Aenean lacinia bibendum nulla sed consectetur. - Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. - Donec ullamcorper nulla non metus auctor - fringilla. -

-

Cras mattis consectetur purus sit amet fermentum. - Cras justo odio, dapibus ac - facilisis in, egestas eget quam. Morbi leo risus, - porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. - Vivamus sagittis lacus vel augue - laoreet rutrum faucibus dolor auctor. -

-

Aenean lacinia bibendum nulla sed consectetur. Praesent - commodo cursus magna, vel scelerisque nisl consectetur et. - Donec sed odio dui. Donec ullamcorper nulla - non metus auctor fringilla. -

-
-
- ); - } - return ( -
-

- -   - -

- {dialog} -
+ + ); } -} -ReactDOM.render( -
-

ant-design dialog

- -
, - document.getElementById('__react-content'), -); + return ( +
+

+ +   + +

+ {dialog} +
+ ); +}; + +export default MyControl; diff --git a/examples/multiple-Portal.html b/examples/multiple-Portal.html deleted file mode 100644 index e69de29b..00000000 diff --git a/examples/multiple-Portal.tsx b/examples/multiple-Portal.tsx index 9aa0bc5a..a9843d99 100644 --- a/examples/multiple-Portal.tsx +++ b/examples/multiple-Portal.tsx @@ -1,9 +1,8 @@ import * as React from 'react'; -import * as ReactDOM from 'react-dom'; -import Dialog from '../src/DialogWrap'; import Drawer from 'rc-drawer'; +import Dialog from '../src/DialogWrap'; import 'rc-drawer/assets/index.css'; -import 'rc-dialog/assets/index.less'; +import '../assets/index.less'; const { useState } = React; @@ -51,10 +50,4 @@ const Demo = () => { ); }; -ReactDOM.render( -
-

multiple dialog

- -
, - document.getElementById('__react-content'), -); +export default Demo; diff --git a/jest.config.js b/jest.config.js new file mode 100644 index 00000000..0a096396 --- /dev/null +++ b/jest.config.js @@ -0,0 +1,4 @@ +module.exports = { + setupFiles: ["./tests/setup.js"], + snapshotSerializers: [require.resolve("enzyme-to-json/serializer")], +}; diff --git a/now.json b/now.json new file mode 100644 index 00000000..1d18e2a0 --- /dev/null +++ b/now.json @@ -0,0 +1,11 @@ +{ + "version": 2, + "name": "rc-dialog", + "builds": [ + { + "src": "package.json", + "use": "@now/static-build", + "config": { "distDir": ".doc" } + } + ] +} diff --git a/package.json b/package.json index 32b858dc..58f2767a 100644 --- a/package.json +++ b/package.json @@ -27,59 +27,46 @@ ], "main": "./lib/DialogWrap", "module": "./es/DialogWrap", - "config": { - "port": 8007, - "entry": { - "rc-dialog": [ - "./index.js", - "./assets/index.less" - ], - "rc-dialog-bootstrap": [ - "./index.js", - "./assets/bootstrap.less" - ] - } - }, "scripts": { - "watch-tsc": "rc-tools run watch-tsc", - "build": "rc-tools run build", - "dist": "rc-tools run dist", - "gh-pages": "rc-tools run gh-pages", - "start": "rc-tools run server", - "compile": "rc-tools run compile", - "pub": "rc-tools run pub", - "lint": "rc-tools run lint --no-js-lint", - "lint:ts": "tsc", - "karma": "rc-test run karma", - "saucelabs": "rc-test run saucelabs", - "test": "rc-test run test", - "chrome-test": "rc-test run chrome-test", - "coverage": "rc-test run coverage", - "prepublish": "rc-tools run guard" + "start": "cross-env NODE_ENV=development father doc dev --storybook", + "build": "father doc build --storybook", + "compile": "father build && lessc assets/index.less assets/index.css && lessc assets/bootstrap.less assets/bootstrap.css", + "gh-pages": "npm run build && father doc deploy", + "prepublishOnly": "npm run compile && np --yolo --no-publish", + "lint": "eslint src/ --ext .ts,.tsx,.jsx,.js,.md", + "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"", + "test": "father test", + "coverage": "father test --coverage" + }, + "peerDependencies": { + "react": "^16.0.0", + "react-dom": "^16.0.0" + }, + "dependencies": { + "rc-animate": "3.x", + "rc-util": "^5.0.1" }, "devDependencies": { "@types/mocha": "~8.0.0", - "@types/react": "^16.0.19", - "@types/react-dom": "^16.0.2", + "@types/react": "^16.9.2", + "@types/react-dom": "^16.9.0", + "@umijs/fabric": "^2.0.0", "async": "^0.9.0", "bluebird": "~3.7.2", "bootstrap": "^4.3.1", "core-js": "^2.5.1", + "cross-env": "^7.0.0", + "enzyme": "^3.1.1", + "enzyme-adapter-react-16": "^1.0.1", + "enzyme-to-json": "^3.1.2", + "eslint": "^7.1.0", "expect.js": "~0.3.1", + "father": "^2.29.6", "jquery": "^3.3.1", "pre-commit": "1.x", "rc-drawer": "4.1.0", - "rc-test": "^6.0.1", - "rc-tools": "7.x", - "react": "^16.0.0", - "react-dom": "^16.0.0" + "react": "^16.9.0", + "react-dom": "^16.9.0" }, - "pre-commit": [ - "lint" - ], - "typings": "./lib/DialogWrap.d.ts", - "dependencies": { - "rc-animate": "3.x", - "rc-util": "^5.0.1" - } + "typings": "./lib/DialogWrap.d.ts" } diff --git a/src/Dialog.tsx b/src/Dialog.tsx index 7d824b9b..c84f401d 100644 --- a/src/Dialog.tsx +++ b/src/Dialog.tsx @@ -24,11 +24,11 @@ function getScroll(w: any, top?: boolean) { } function setTransformOrigin(node: any, value: string) { - const style = node.style; + const { style } = node; ['Webkit', 'Moz', 'Ms', 'ms'].forEach((prefix: string) => { style[`${prefix}TransformOrigin`] = value; }); - style[`transformOrigin`] = value; + style.transformOrigin = value; } function offset(el: any) { @@ -63,20 +63,30 @@ export default class Dialog extends React.Component { }; private inTransition: boolean = false; + private titleId: string; + private openTime: number; + private lastOutSideFocusNode: HTMLElement | null; + private wrap: HTMLElement; + private dialog: any; + private sentinelStart: HTMLElement; + private sentinelEnd: HTMLElement; + private dialogMouseDown: boolean; + private timeoutId: number; + private switchScrollingEffect: () => void; constructor(props: IDialogChildProps) { super(props); - this.titleId = `rcDialogTitle${uuid++}`; + this.titleId = `rcDialogTitle${uuid += 1}`; this.switchScrollingEffect = props.switchScrollingEffect || (() => {}); } @@ -93,7 +103,7 @@ export default class Dialog extends React.Component { componentDidUpdate(prevProps: IDialogPropTypes) { const {visible, mask, focusTriggerAfterClose} = this.props; - const mousePosition = this.props.mousePosition; + const { mousePosition } = this.props; if (visible) { // first show if (!prevProps.visible) { @@ -180,55 +190,52 @@ export default class Dialog extends React.Component { } onKeyDown = (e: React.KeyboardEvent) => { - const props = this.props; - if (props.keyboard && e.keyCode === KeyCode.ESC) { + const { keyboard, visible } = this.props; + if ( keyboard && e.keyCode === KeyCode.ESC) { e.stopPropagation(); this.close(e); return; } // keep focus inside dialog - if (props.visible) { + if (visible) { if (e.keyCode === KeyCode.TAB) { - const activeElement = document.activeElement; - const sentinelStart = this.sentinelStart; + const { activeElement } = document; if (e.shiftKey) { - if (activeElement === sentinelStart) { + if (activeElement === this.sentinelStart) { this.sentinelEnd.focus(); } } else if (activeElement === this.sentinelEnd) { - sentinelStart.focus(); + this.sentinelStart.focus(); } } } } getDialogElement = () => { - const props = this.props; - const closable = props.closable; - const prefixCls = props.prefixCls; + const { closable, prefixCls, width, height, footer, title, closeIcon, style, className, visible, forceRender, bodyStyle, bodyProps, children, destroyOnClose } = this.props; const dest: any = {}; - if (props.width !== undefined) { - dest.width = props.width; + if (width !== undefined) { + dest.width = width; } - if (props.height !== undefined) { - dest.height = props.height; + if (height !== undefined) { + dest.height = height; } - let footer; - if (props.footer) { - footer = ( + let footerNode; + if (footer) { + footerNode = (
- {props.footer} + {footer}
); } - let header; - if (props.title) { - header = ( + let headerNode; + if (title) { + headerNode = (
- {props.title} + {title}
); @@ -243,12 +250,12 @@ export default class Dialog extends React.Component { aria-label="Close" className={`${prefixCls}-close`} > - {props.closeIcon || } + {closeIcon || } ); } - const style = { ...props.style, ...dest }; + const styleBox = { ...style, ...dest }; const sentinelStyle = { width: 0, height: 0, overflow: 'hidden', outline: 'none' }; const transitionName = this.getTransitionName(); const dialogElement = ( @@ -256,10 +263,10 @@ export default class Dialog extends React.Component { key="dialog-element" role="document" ref={this.saveRef('dialog')} - style={style} - className={`${prefixCls} ${props.className || ''}`} - visible={props.visible} - forceRender={props.forceRender} + style={styleBox} + className={`${prefixCls} ${className || ''}`} + visible={visible} + forceRender={forceRender} onMouseDown={this.onDialogMouseDown} >
{ />
{closer} - {header} + {headerNode}
- {props.children} + {children}
- {footer} + {footerNode}
{ component="" transitionAppear > - {props.visible || !props.destroyOnClose ? dialogElement : null} + {visible || !destroyOnClose ? dialogElement : null} ); } getZIndexStyle = () => { const style: any = {}; - const props = this.props; - if (props.zIndex !== undefined) { - style.zIndex = props.zIndex; + const { zIndex } = this.props; + if (zIndex !== undefined) { + style.zIndex = zIndex; } return style; } @@ -322,18 +329,18 @@ export default class Dialog extends React.Component { } getMaskElement = () => { - const props = this.props; + const { mask, prefixCls, visible, maskProps } = this.props; let maskElement; - if (props.mask) { + if (mask) { const maskTransition = this.getMaskTransitionName(); maskElement = ( ); if (maskTransition) { @@ -354,24 +361,23 @@ export default class Dialog extends React.Component { } getMaskTransitionName = () => { - const props = this.props; - let transitionName = props.maskTransitionName; - const animation = props.maskAnimation; + const { maskTransitionName, maskAnimation, prefixCls } = this.props; + let transitionName = maskTransitionName; + const animation = maskAnimation; if (!transitionName && animation) { - transitionName = `${props.prefixCls}-${animation}`; + transitionName = `${prefixCls}-${animation}`; } return transitionName; } getTransitionName = () => { - const props = this.props; - let transitionName = props.transitionName; - const animation = props.animation; + const { transitionName, animation, prefixCls } = this.props; + let transitionNameResult = transitionName; if (!transitionName && animation) { - transitionName = `${props.prefixCls}-${animation}`; + transitionNameResult = `${prefixCls}-${animation}`; } - return transitionName; + return transitionNameResult; } close = (e: any) => { diff --git a/src/DialogWrap.tsx b/src/DialogWrap.tsx index 0f89ba6c..de493ca9 100644 --- a/src/DialogWrap.tsx +++ b/src/DialogWrap.tsx @@ -1,8 +1,7 @@ import * as React from 'react'; -import Dialog from './Dialog'; import Portal from 'rc-util/lib/PortalWrapper'; +import Dialog, { IDialogChildProps } from './Dialog'; import IDialogPropTypes from './IDialogPropTypes'; -import { IDialogChildProps } from './Dialog'; // fix issue #10656 /* diff --git a/src/IDialogPropTypes.tsx b/src/IDialogPropTypes.tsx index 984cceab..ed6bac2d 100644 --- a/src/IDialogPropTypes.tsx +++ b/src/IDialogPropTypes.tsx @@ -2,7 +2,7 @@ import { ReactNode, CSSProperties, SyntheticEvent } from 'react'; type IStringOrHtmlElement = string | HTMLElement; -interface IDialogPropTypes { +export interface IDialogPropTypes { className?: string; keyboard?: boolean; style?: CSSProperties; @@ -42,5 +42,3 @@ interface IDialogPropTypes { // https://github.com/react-component/dialog/issues/95 focusTriggerAfterClose?: boolean; } - -export default IDialogPropTypes; diff --git a/src/LazyRenderBox.tsx b/src/LazyRenderBox.tsx index b2204313..ca08f7d3 100644 --- a/src/LazyRenderBox.tsx +++ b/src/LazyRenderBox.tsx @@ -17,6 +17,7 @@ export default class LazyRenderBox extends React.Component { const title = '第一个title'; @@ -27,6 +29,7 @@ describe('dialog', () => { visible: false, maskClosable: true, }; + render() { return ( { style={{ width: 600 }} title={title} onClose={onClose} - closeIcon={'test-text'} + closeIcon="test-text" >

第一个dialog

), container); @@ -81,8 +84,7 @@ describe('dialog', () => { visible: false, }); setTimeout(() => { - expect($('.rc-dialog-wrap').css('display')) - .to.be('none'); + expect($('.rc-dialog-wrap').css('display')).to.be('block'); done(); }, 10); }); @@ -125,9 +127,9 @@ describe('dialog', () => { }); it("destroy on hide should unmount child components on close", () => { - const wrapper = ReactDOM.render( + const wrapper = mount( - , container); + ); wrapper.setState({ visible: true, }); @@ -194,9 +196,9 @@ describe('dialog', () => { }); it('renderToBody', () => { - const d = ReactDOM.render( + const d = mount(

1

- , container); + ); expect($('.renderToBody').length).to.be(0); expect($('.rc-dialog-wrap').length).to.be(0); d.setState({ @@ -213,12 +215,10 @@ describe('dialog', () => { it('getContainer', () => { const returnedContainer = document.createElement('div'); document.body.appendChild(returnedContainer); - const d = ReactDOM.render( + const d = mount( returnedContainer}>

Hello world!

- , - container - ); + ); d.setState({ visible: true, }); @@ -229,16 +229,15 @@ describe('dialog', () => { it('render footer padding correctly', () => { async.series([() => { - ReactDOM.render(, container) + ReactDOM.render(, container) }, () => { expect($('.rc-dialog-footer').css('padding')).to.be('10px 20px'); }]); }); it('support input autoFocus', () => { - const d = ReactDOM.render( - , - container + const d = mount( + ); d.setState({ visible: true @@ -263,7 +262,7 @@ describe('dialog', () => { }); it('sets transform-origin when property mousePosition is set', () => { - const d = ReactDOM.render(( + mount( { visible >

the dialog

- ), container); + ); expect($('.rc-dialog').css('transform-origin')).to.not.be.empty(); }); it('can get dom element before dialog first show when forceRender is set true ',()=>{ - const d = ReactDOM.render(( + mount(
forceRender element
 - ),container); + ); expect($('.rc-dialog-body > div').text()).to.be('forceRender element'); }); @@ -296,29 +295,32 @@ describe('dialog', () => { Simulate.mouseUp(wrapper); expect(dialog.state.visible).to.be(true); }); + it('getContainer is false', () => { - ReactDOM.render(( + mount(
forceRender element
 - ),container); + ); expect($('.rc-dialog-body > div').text()).to.be('forceRender element'); expect($('.rc-dialog-wrap')[0].style.display).to.be('none'); }); + it('getContainer is false and visible is true', () => { - ReactDOM.render(( + mount(
forceRender element
 - ),container); + ); expect($('.rc-dialog-body > div').text()).to.be('forceRender element'); expect($('.rc-dialog-wrap')[0].style.display).to.be(''); - }) + }); + it('Single Dialog body overflow set correctly', () => { document.body.style.overflow = "scroll" @@ -341,6 +343,7 @@ describe('dialog', () => { visible: false, visible2: false, }; + render() { return (
@@ -357,11 +360,11 @@ describe('dialog', () => { } } - const d = ReactDOM.render(( + const d = mount(
forceRender element
 - ),container); + ); expect($('.rc-dialog').length).to.be(0); @@ -402,34 +405,36 @@ describe('dialog', () => { }) it('afterClose', (done) => { - const dialog = ReactDOM.render(( + const dialogTest = mount(
afterClose
 - ),container); - dialog.setState({ + ); + + dialogTest.setState({ visible: true, }); - dialog.setState({ + + dialogTest.setState({ visible: false, }); }); it('zIndex', () => { - const dialog = ReactDOM.render(( + const dialogTest = mount(
afterClose
 - ),container); - dialog.setState({ + ); + + dialogTest.setState({ visible: true, }); expect($('.rc-dialog-wrap').css("zIndex")).to.be('1000'); - }); }); diff --git a/tests/setup.js b/tests/setup.js new file mode 100644 index 00000000..4c18e28f --- /dev/null +++ b/tests/setup.js @@ -0,0 +1,6 @@ +global.requestAnimationFrame = cb => setTimeout(cb, 0); + +const Enzyme = require('enzyme'); +const Adapter = require('enzyme-adapter-react-16'); + +Enzyme.configure({ adapter: new Adapter() }); diff --git a/typings/custom.d.ts b/typings/custom.d.ts index 455b131f..1998f6f4 100644 --- a/typings/custom.d.ts +++ b/typings/custom.d.ts @@ -1,14 +1,14 @@ declare module "rc-util/lib/KeyCode" { - var Ret: {ESC:any;TAB:any;}; + const Ret: {ESC:any;TAB:any;}; export default Ret; } declare module "rc-util/lib/*" { - var Ret: any; + const Ret: any; export default Ret; } declare module "rc-animate" { - var Ret: any; + const Ret: any; export default Ret; } \ No newline at end of file diff --git a/typings/index.d.ts b/typings/index.d.ts index 09e70c53..cf3494a8 100644 --- a/typings/index.d.ts +++ b/typings/index.d.ts @@ -1 +1,2 @@ +// eslint-disable-next-line spaced-comment /// From 1074850881adae3462dfc69de0beef5de3c5fa6f Mon Sep 17 00:00:00 2001 From: xrkffgg Date: Wed, 19 Aug 2020 15:10:00 +0800 Subject: [PATCH 2/4] update package --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index 58f2767a..03fab9fd 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,6 @@ "expect.js": "~0.3.1", "father": "^2.29.6", "jquery": "^3.3.1", - "pre-commit": "1.x", "rc-drawer": "4.1.0", "react": "^16.9.0", "react-dom": "^16.9.0" From 9b40537bca76b7c2d2c51363680806c7f3bca834 Mon Sep 17 00:00:00 2001 From: xrkffgg Date: Wed, 19 Aug 2020 15:17:42 +0800 Subject: [PATCH 3/4] Update src/Dialog.tsx --- src/Dialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Dialog.tsx b/src/Dialog.tsx index c84f401d..096e0070 100644 --- a/src/Dialog.tsx +++ b/src/Dialog.tsx @@ -191,7 +191,7 @@ export default class Dialog extends React.Component { onKeyDown = (e: React.KeyboardEvent) => { const { keyboard, visible } = this.props; - if ( keyboard && e.keyCode === KeyCode.ESC) { + if (keyboard && e.keyCode === KeyCode.ESC) { e.stopPropagation(); this.close(e); return; From 2256f9a42d71611a395f6b97f8a63e560e509e2f Mon Sep 17 00:00:00 2001 From: xrkffgg Date: Wed, 19 Aug 2020 15:53:42 +0800 Subject: [PATCH 4/4] Update tests/index.spec.js --- 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 bfff5a48..b6a318ea 100644 --- a/tests/index.spec.js +++ b/tests/index.spec.js @@ -84,7 +84,7 @@ describe('dialog', () => { visible: false, }); setTimeout(() => { - expect($('.rc-dialog-wrap').css('display')).to.be('block'); + expect($('.rc-dialog-wrap').css('display')).to.be('none'); done(); }, 10); });