);
}
export default App;
```
## Dom
```JSX
```
## Api
```JSX
Dialog.defaultProps={
className = "",
children = null,
open = false,
active = true,
lockScroll = true,
maskTitle = "Mask",
removeTime = 200,
disabledPortal = false,
disableEsc = false,
closeTitle = "Close",
closeChildren = ×,
onClose = () => {},
onClickMask = () => {}
};
Dialog.propTypes = {
/**
* css class
*/
className: PropTypes.string,
/**
* Dialog children, usually the included sub-components.
*/
children: PropTypes.node,
/**
* if `> 0`, hide dialog and remove dialog after removeTime
* else if `0`, remove dialog immediately
* else, keep exit after hide
*/
removeTime: PropTypes.number,
/**
* If `true`, the dialog go through the enter, entring, enterd.
* If `false`, the dialog go through the exitring, exitred.
*/
open: PropTypes.bool,
/**
* If `true`, the dialog can focusable
* If `false`, the dialog blur
*/
active: PropTypes.bool,
/**
* Callback fired when dialog close.
*/
onClose: PropTypes.func,
/**
* Callback fired when the `Mask` is clicked.
* if return `false`, no longer trigger onclick
* else trigger the onClose
*/
onClickMask: PropTypes.func,
/**
* If `true`, when dialog scroll into bottom the body will scroll
*/
lockScroll: PropTypes.bool,
/**
* If `true`, the dialog will render where it is defined
*/
disabledPortal: PropTypes.bool,
/**
* If `true`, the dialog will not close when click esc
*/
disableEsc: PropTypes.bool,
/**
* title of the `Close`.
* If empty string, the `Close` do not render
*/
closeTitle: PropTypes.string,
/**
* title of the mask element.
* If empty string, the mask do not render
*/
maskTitle: PropTypes.string,
/**
* Close children
*/
closeChildren: PropTypes.node
};
```
### Transition
```CSS
.nu_dialog {
transform: translate(0, -50px);
}
._top .nu_dialog {
transform: translate(0, -50px);
}
._bottom .nu_dialog {
transform: translate(0, 50px);
}
._right .nu_dialog {
transform: translate(50px, 0);
}
._left .nu_dialog {
transform: translate(-50px, 0);
}
```
你只需要定义 `.nu_dialog` 的起点状态即可。
## 贡献与开发
这个项目是与贡献者行为准则一起发布的。参与本项目，代表您同意遵守其条款。
运行 demo `npm start`.
## 技术方案
`@_nu/react-dialog` 灵感来自以下几个优秀的开源框架：
- [react-aria-modal](https://github.com/davidtheclark/react-aria-modal)
- [focus-trap-react](https://github.com/davidtheclark/focus-trap-react)
- [material-ui](https://material-ui.com/zh/components/modal/)
- [nu-system](https://nu-system.github.io/)
