rc-dialog
Advanced tools
Comparing version 4.4.1 to 4.5.0
# History | ||
---- | ||
## 4.5.0 2015-07-23 | ||
use rc-animate & rc-align | ||
## 4.4.0 2015-07-03 | ||
@@ -4,0 +9,0 @@ |
'use strict'; | ||
Object.defineProperty(exports, '__esModule', { | ||
value: true | ||
}); | ||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; | ||
var React = require('react'); | ||
var domAlign = require('dom-align'); | ||
var RcUtil = require('rc-util'); | ||
var KeyCode = RcUtil.KeyCode; | ||
var Dom = RcUtil.Dom; | ||
var assign = require('object-assign'); | ||
var _anim = require('css-animation'); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } | ||
function prefixClsFn(prefixCls) { | ||
var args = Array.prototype.slice.call(arguments, 1); | ||
return args.map(function (s) { | ||
if (!s) { | ||
return prefixCls; | ||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | ||
var _react = require('react'); | ||
var _react2 = _interopRequireDefault(_react); | ||
var _rcAlign = require('rc-align'); | ||
var _rcAlign2 = _interopRequireDefault(_rcAlign); | ||
var _rcUtil = require('rc-util'); | ||
var _objectAssign = require('object-assign'); | ||
var _objectAssign2 = _interopRequireDefault(_objectAssign); | ||
var _rcAnimate = require('rc-animate'); | ||
var _rcAnimate2 = _interopRequireDefault(_rcAnimate); | ||
var Dialog = _react2['default'].createClass({ | ||
displayName: 'Dialog', | ||
getDialogElement: function getDialogElement() { | ||
var props = this.props; | ||
var closable = props.closable; | ||
var prefixCls = props.prefixCls; | ||
var dest = {}; | ||
if (props.width !== undefined) { | ||
dest.width = props.width; | ||
} | ||
return prefixCls + '-' + s; | ||
}).join(' '); | ||
} | ||
if (props.height !== undefined) { | ||
dest.height = props.height; | ||
} | ||
if (props.zIndex !== undefined) { | ||
dest.zIndex = props.zIndex; | ||
} | ||
function buffer(fn, ms) { | ||
var timer; | ||
return function () { | ||
if (timer) { | ||
clearTimeout(timer); | ||
var footer; | ||
if (props.footer) { | ||
footer = _react2['default'].createElement( | ||
'div', | ||
{ className: prefixCls + '-footer' }, | ||
props.footer | ||
); | ||
} | ||
timer = setTimeout(fn, ms); | ||
}; | ||
} | ||
var Dialog = React.createClass({ | ||
displayName: 'Dialog', | ||
var header; | ||
if (props.title || props.closable) { | ||
header = _react2['default'].createElement( | ||
'div', | ||
{ className: prefixCls + '-header' }, | ||
closable ? _react2['default'].createElement( | ||
'a', | ||
{ tabIndex: "0", onClick: props.onRequestClose, className: prefixCls + '-close' }, | ||
_react2['default'].createElement('span', { className: prefixCls + '-close-x' }) | ||
) : null, | ||
_react2['default'].createElement( | ||
'div', | ||
{ className: prefixCls + '-title' }, | ||
props.title | ||
) | ||
); | ||
} | ||
align: function align() { | ||
var align = this.props.align; | ||
domAlign(React.findDOMNode(this.refs.dialog), align.node || window, align); | ||
var style = (0, _objectAssign2['default'])({}, props.style, dest); | ||
var dialogProps = { | ||
className: [props.prefixCls, props.className].join(' '), | ||
tabIndex: '0', | ||
role: 'dialog', | ||
ref: 'dialog', | ||
style: style, | ||
onKeyDown: this.handleKeyDown | ||
}; | ||
var transitionName = this.getTransitionName(); | ||
var dialogElement = _react2['default'].createElement( | ||
'div', | ||
dialogProps, | ||
_react2['default'].createElement( | ||
'div', | ||
{ className: prefixCls + '-content' }, | ||
header, | ||
_react2['default'].createElement( | ||
'div', | ||
{ className: prefixCls + '-body' }, | ||
props.children | ||
), | ||
footer | ||
), | ||
_react2['default'].createElement( | ||
'div', | ||
{ tabIndex: "0", ref: 'sentinel', style: { width: 0, height: 0, overflow: 'hidden' } }, | ||
'sentinel' | ||
) | ||
); | ||
// add key for align to keep animate children stable | ||
return _react2['default'].createElement( | ||
_rcAnimate2['default'], | ||
{ key: "dialog", | ||
showProp: "dialogVisible", | ||
onEnd: this.handleAnimateEnd, | ||
transitionName: transitionName, | ||
component: "", | ||
animateMount: true }, | ||
_react2['default'].createElement( | ||
_rcAlign2['default'], | ||
{ align: props.align, | ||
key: "dialog", | ||
dialogVisible: props.visible, | ||
monitorBufferTime: 80, | ||
monitorWindowResize: true, | ||
disabled: !props.visible }, | ||
dialogElement | ||
) | ||
); | ||
}, | ||
monitorWindowResize: function monitorWindowResize() { | ||
if (!this.resizeHandler) { | ||
this.resizeHandler = Dom.addEventListener(window, 'resize', buffer(this.align, 80)); | ||
getMaskElement: function getMaskElement() { | ||
var props = this.props; | ||
var maskProps = { | ||
onClick: this.handleMaskClick, | ||
'data-visible': props.visible | ||
}; | ||
if (props.zIndex) { | ||
maskProps.style = { zIndex: props.zIndex }; | ||
} | ||
var maskElement; | ||
if (props.mask) { | ||
var maskTransition = this.getMaskTransitionName(); | ||
maskElement = _react2['default'].createElement('div', _extends({}, maskProps, { className: props.prefixCls + '-mask', key: "mask" })); | ||
if (maskTransition) { | ||
maskElement = _react2['default'].createElement( | ||
_rcAnimate2['default'], | ||
{ key: "mask", showProp: "data-visible", animateMount: true, component: "", | ||
transitionName: maskTransition }, | ||
maskElement | ||
); | ||
} | ||
} | ||
return maskElement; | ||
}, | ||
anim: function anim(el, transitionName, animation, enter, fn) { | ||
getMaskTransitionName: function getMaskTransitionName() { | ||
var props = this.props; | ||
var transitionName = props.maskTransitionName; | ||
var animation = props.maskAnimation; | ||
if (!transitionName && animation) { | ||
transitionName = props.prefixCls + '-' + animation; | ||
} | ||
if (transitionName) { | ||
_anim(el, transitionName + (enter ? '-enter' : '-leave'), fn); | ||
} else if (fn) { | ||
fn(); | ||
} | ||
return transitionName; | ||
}, | ||
unMonitorWindowResize: function unMonitorWindowResize() { | ||
if (this.resizeHandler) { | ||
this.resizeHandler.remove(); | ||
this.resizeHandler = null; | ||
} | ||
}, | ||
componentDidMount: function componentDidMount() { | ||
this.componentDidUpdate(); | ||
this.componentDidUpdate({}); | ||
}, | ||
componentDidUpdate: function componentDidUpdate(prevProps) { | ||
var _this = this; | ||
var props = this.props; | ||
var dialogDomNode = React.findDOMNode(this.refs.dialog); | ||
var maskNode = React.findDOMNode(this.refs.mask); | ||
prevProps = prevProps || {}; | ||
if (props.visible) { | ||
this.monitorWindowResize(); | ||
// first show | ||
if (!prevProps.visible) { | ||
this.align(); | ||
this.anim(maskNode, props.maskTransitionName, props.maskAnimation, true); | ||
this.anim(dialogDomNode, props.transitionName, props.animation, true, function () { | ||
props.onShow(); | ||
}); | ||
this.lastOutSideFocusNode = document.activeElement; | ||
dialogDomNode.focus(); | ||
} else if (props.align !== prevProps.align) { | ||
this.align(); | ||
_react2['default'].findDOMNode(this.refs.dialog).focus(); | ||
} | ||
} else { | ||
if (prevProps.visible) { | ||
this.anim(maskNode, props.maskTransitionName, props.maskAnimation); | ||
this.anim(dialogDomNode, props.transitionName, props.animation, false, function () { | ||
props.onClose(); | ||
if (props.mask && _this.lastOutSideFocusNode) { | ||
try { | ||
_this.lastOutSideFocusNode.focus(); | ||
} catch (e) {} | ||
_this.lastOutSideFocusNode = null; | ||
} | ||
}); | ||
} else if (prevProps.visible) { | ||
if (props.mask && this.lastOutSideFocusNode) { | ||
try { | ||
this.lastOutSideFocusNode.focus(); | ||
} catch (e) { | ||
// empty | ||
} | ||
this.lastOutSideFocusNode = null; | ||
} | ||
this.unMonitorWindowResize(); | ||
} | ||
}, | ||
componentWillUnmount: function componentWillUnmount() { | ||
this.unMonitorWindowResize(); | ||
}, | ||
handleKeyDown: function handleKeyDown(e) { | ||
var props = this.props; | ||
if (props.closable) { | ||
if (e.keyCode === KeyCode.ESC) { | ||
if (e.keyCode === _rcUtil.KeyCode.ESC) { | ||
this.props.onRequestClose(); | ||
@@ -121,6 +197,6 @@ } | ||
if (props.visible) { | ||
if (e.keyCode === KeyCode.TAB) { | ||
if (e.keyCode === _rcUtil.KeyCode.TAB) { | ||
var activeElement = document.activeElement; | ||
var dialogRoot = React.findDOMNode(this.refs.dialog); | ||
var sentinel = React.findDOMNode(this.refs.sentinel); | ||
var dialogRoot = _react2['default'].findDOMNode(this.refs.dialog); | ||
var sentinel = _react2['default'].findDOMNode(this.refs.sentinel); | ||
if (e.shiftKey) { | ||
@@ -130,3 +206,3 @@ if (activeElement === dialogRoot) { | ||
} | ||
} else if (activeElement === React.findDOMNode(this.refs.sentinel)) { | ||
} else if (activeElement === _react2['default'].findDOMNode(this.refs.sentinel)) { | ||
dialogRoot.focus(); | ||
@@ -138,2 +214,28 @@ } | ||
getTransitionName: function getTransitionName() { | ||
var props = this.props; | ||
var transitionName = props.transitionName; | ||
var animation = props.animation; | ||
if (!transitionName && animation) { | ||
transitionName = props.prefixCls + '-' + animation; | ||
} | ||
return transitionName; | ||
}, | ||
handleShow: function handleShow() { | ||
this.props.onShow(); | ||
}, | ||
handleClose: function handleClose() { | ||
this.props.onClose(); | ||
}, | ||
handleAnimateEnd: function handleAnimateEnd(key, visible) { | ||
if (visible) { | ||
this.handleShow(); | ||
} else { | ||
this.handleClose(); | ||
} | ||
}, | ||
handleMaskClick: function handleMaskClick() { | ||
@@ -143,91 +245,16 @@ if (this.props.closable) { | ||
} | ||
React.findDOMNode(this.refs.dialog).focus(); | ||
_react2['default'].findDOMNode(this.refs.dialog).focus(); | ||
}, | ||
render: function render() { | ||
var _className; | ||
var props = this.props; | ||
var visible = props.visible; | ||
var prefixCls = props.prefixCls; | ||
var className = [prefixClsFn(prefixCls, 'wrap')]; | ||
var closable = props.closable; | ||
if (!visible) { | ||
className.push(prefixClsFn(prefixCls, 'wrap-hidden')); | ||
} | ||
var dest = {}; | ||
if (props.width !== undefined) { | ||
dest.width = props.width; | ||
} | ||
if (props.height !== undefined) { | ||
dest.height = props.height; | ||
} | ||
if (props.zIndex !== undefined) { | ||
dest.zIndex = props.zIndex; | ||
} | ||
var className = (_className = {}, _defineProperty(_className, prefixCls + '-wrap', 1), _defineProperty(_className, prefixCls + '-wrap-hidden', !props.visible), _className); | ||
var style = assign({}, props.style, dest); | ||
var maskProps = { | ||
onClick: this.handleMaskClick | ||
}; | ||
var dialogProps = { | ||
className: [prefixCls, props.className].join(' '), | ||
tabIndex: '0', | ||
role: 'dialog', | ||
ref: 'dialog', | ||
style: style, | ||
onKeyDown: this.handleKeyDown | ||
}; | ||
if (style.zIndex) { | ||
maskProps.style = { zIndex: style.zIndex }; | ||
} | ||
var footer; | ||
if (props.footer) { | ||
footer = React.createElement( | ||
'div', | ||
{ className: prefixClsFn(prefixCls, 'footer') }, | ||
props.footer | ||
); | ||
} | ||
var header; | ||
if (props.title || closable) { | ||
header = React.createElement( | ||
'div', | ||
{ className: prefixClsFn(prefixCls, 'header') }, | ||
closable ? React.createElement( | ||
'a', | ||
{ tabIndex: '0', onClick: props.onRequestClose, className: [prefixClsFn(prefixCls, 'close')].join('') }, | ||
React.createElement('span', { className: prefixClsFn(prefixCls, 'close-x') }) | ||
) : null, | ||
React.createElement( | ||
'div', | ||
{ className: prefixClsFn(prefixCls, 'title') }, | ||
props.title | ||
) | ||
); | ||
} | ||
return React.createElement( | ||
return _react2['default'].createElement( | ||
'div', | ||
{ className: className.join(' ') }, | ||
props.mask ? React.createElement('div', _extends({}, maskProps, { className: prefixClsFn(prefixCls, 'mask'), ref: 'mask' })) : null, | ||
React.createElement( | ||
'div', | ||
dialogProps, | ||
React.createElement( | ||
'div', | ||
{ className: prefixClsFn(prefixCls, 'content') }, | ||
header, | ||
React.createElement( | ||
'div', | ||
{ className: prefixClsFn(prefixCls, 'body') }, | ||
props.children | ||
), | ||
footer | ||
), | ||
React.createElement( | ||
'div', | ||
{ tabIndex: '0', ref: 'sentinel', style: { width: 0, height: 0, overflow: 'hidden' } }, | ||
'sentinel' | ||
) | ||
) | ||
{ className: (0, _rcUtil.classSet)(className) }, | ||
[this.getMaskElement(), this.getDialogElement()] | ||
); | ||
@@ -237,4 +264,3 @@ } | ||
module.exports = Dialog; | ||
// empty | ||
exports['default'] = Dialog; | ||
module.exports = exports['default']; |
'use strict'; | ||
Object.defineProperty(exports, '__esModule', { | ||
value: true | ||
}); | ||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; | ||
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); | ||
@@ -7,10 +13,20 @@ | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } | ||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } | ||
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; } | ||
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | ||
var React = require('react'); | ||
var Dialog = require('./Dialog'); | ||
var assign = require('object-assign'); | ||
var _react = require('react'); | ||
var _react2 = _interopRequireDefault(_react); | ||
var _Dialog = require('./Dialog'); | ||
var _Dialog2 = _interopRequireDefault(_Dialog); | ||
var _objectAssign = require('object-assign'); | ||
var _objectAssign2 = _interopRequireDefault(_objectAssign); | ||
function noop() {} | ||
@@ -29,2 +45,4 @@ | ||
var DialogWrap = (function (_React$Component) { | ||
_inherits(DialogWrap, _React$Component); | ||
function DialogWrap(props) { | ||
@@ -44,4 +62,2 @@ var _this = this; | ||
_inherits(DialogWrap, _React$Component); | ||
_createClass(DialogWrap, [{ | ||
@@ -132,3 +148,3 @@ key: 'componentWillReceiveProps', | ||
assign(dialogProps, { | ||
(0, _objectAssign2['default'])(dialogProps, { | ||
onClose: this.handleClose, | ||
@@ -140,5 +156,5 @@ onShow: this.handleShow, | ||
return React.createElement( | ||
Dialog, | ||
dialogProps, | ||
return _react2['default'].createElement( | ||
_Dialog2['default'], | ||
_extends({}, dialogProps, { key: "dialog" }), | ||
props.children | ||
@@ -164,3 +180,3 @@ ); | ||
if (this.props.renderToBody && this.dialogRendered) { | ||
React.render(this.getDialogElement(), this.getDialogContainer()); | ||
_react2['default'].render(this.getDialogElement(), this.getDialogContainer()); | ||
} | ||
@@ -171,3 +187,3 @@ } | ||
value: function cleanDialogContainer() { | ||
React.unmountComponentAtNode(this.getDialogContainer()); | ||
_react2['default'].unmountComponentAtNode(this.getDialogContainer()); | ||
document.body.removeChild(this.dialogContainer); | ||
@@ -181,3 +197,3 @@ this.dialogContainer = null; | ||
if (this.state.visible) { | ||
React.render(this.getDialogElement({ | ||
_react2['default'].render(this.getDialogElement({ | ||
onClose: this.cleanDialogContainer, | ||
@@ -194,3 +210,3 @@ visible: false | ||
return DialogWrap; | ||
})(React.Component); | ||
})(_react2['default'].Component); | ||
@@ -212,2 +228,18 @@ DialogWrap.defaultProps = { | ||
module.exports = DialogWrap; | ||
DialogWrap.PropTypes = { | ||
className: _react2['default'].PropTypes.string, | ||
align: _react2['default'].PropTypes.shape({ | ||
align: _react2['default'].PropTypes.array, | ||
offset: _react2['default'].PropTypes.arrayOf(_react2['default'].PropTypes.number) | ||
}), | ||
renderToBody: _react2['default'].PropTypes.bool, | ||
mask: _react2['default'].PropTypes.bool, | ||
closable: _react2['default'].PropTypes.bool, | ||
prefixCls: _react2['default'].PropTypes.string, | ||
visible: _react2['default'].PropTypes.bool, | ||
onShow: _react2['default'].PropTypes.func, | ||
onClose: _react2['default'].PropTypes.func | ||
}; | ||
exports['default'] = DialogWrap; | ||
module.exports = exports['default']; |
{ | ||
"name": "rc-dialog", | ||
"version": "4.4.1", | ||
"version": "4.5.0", | ||
"description": "dialog ui component for react", | ||
@@ -57,7 +57,7 @@ "keywords": [ | ||
"dependencies": { | ||
"css-animation": "~1.0.1", | ||
"dom-align": "~1.0.3", | ||
"object-assign": "~2.0.0", | ||
"rc-util": "~2.0.2" | ||
"object-assign": "2.x", | ||
"rc-align": "1.x", | ||
"rc-animate": "1.x", | ||
"rc-util": "2.x" | ||
} | ||
} |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
29451
759
+ Addedrc-align@1.x
+ Addedrc-animate@1.x
+ Addedadd-dom-event-listener@1.1.0(transitive)
+ Addedbabel-runtime@6.26.0(transitive)
+ Addedclassnames@2.5.1(transitive)
+ Addedcomponent-classes@1.2.6(transitive)
+ Addedcomponent-indexof@0.0.3(transitive)
+ Addedcore-js@2.6.12(transitive)
+ Addedcss-animation@1.6.1(transitive)
+ Addeddom-align@1.12.4(transitive)
+ Addedobject-assign@2.1.14.1.1(transitive)
+ Addedrc-align@1.2.1(transitive)
+ Addedrc-animate@1.3.0(transitive)
+ Addedrc-util@2.1.1(transitive)
+ Addedregenerator-runtime@0.11.1(transitive)
- Removedcss-animation@~1.0.1
- Removeddom-align@~1.0.3
- Removedcss-animation@1.0.5(transitive)
- Removeddom-align@1.0.12(transitive)
- Removedobject-assign@2.0.0(transitive)
- Removedrc-util@2.0.3(transitive)
Updatedobject-assign@2.x
Updatedrc-util@2.x