diff --git a/README.md b/README.md index 545dae9..57c723e 100644 --- a/README.md +++ b/README.md @@ -14,6 +14,7 @@ $ yarn add react-skylight ## Features +- Show/hide close button - Very simple modal/dialog - Animation support - Stateless @@ -38,4 +39,4 @@ Enjoy! * 2016-04-27 v0.4.0 Fix issue #35 (numeric string value for CSS property), up to react 15.0.1 and merged pull request to support Stateless (thanks @darthtrevino) * 2016-01-09 v0.3.0 Rewrite to ES2015, overlay callback and new site. * 2015-04-08 v0.2.0 Improvements - * 2015-02-03 v0.1.4 Changed skylight.js to skylight.jsx and adjust of namespace \ No newline at end of file + * 2015-02-03 v0.1.4 Changed skylight.js to skylight.jsx and adjust of namespace diff --git a/lib/skylightstateless.js b/lib/skylightstateless.js index d15a131..c7f8139 100644 --- a/lib/skylightstateless.js +++ b/lib/skylightstateless.js @@ -36,9 +36,37 @@ var SkyLightStateless = function (_React$Component) { _inherits(SkyLightStateless, _React$Component); function SkyLightStateless() { + var _ref; + + var _temp, _this, _ret; + _classCallCheck(this, SkyLightStateless); - return _possibleConstructorReturn(this, (SkyLightStateless.__proto__ || Object.getPrototypeOf(SkyLightStateless)).apply(this, arguments)); + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = SkyLightStateless.__proto__ || Object.getPrototypeOf(SkyLightStateless)).call.apply(_ref, [this].concat(args))), _this), _this.closeButton = function () { + if (!_this.props.showCloseButton) { + return; + } + var mergeStyles = function mergeStyles(key) { + return (0, _assign2.default)({}, _styles2.default[key], _this.props[key]); + }; + var closeButtonStyle = mergeStyles('closeButtonStyle'); + return _react2.default.createElement( + 'a', + { + role: 'button', + className: 'skylight-close-button', + onClick: function onClick() { + return _this.onCloseClicked(); + }, + style: closeButtonStyle + }, + _this.props.closeButton || '\xD7' + ); + }, _temp), _possibleConstructorReturn(_this, _ret); } _createClass(SkyLightStateless, [{ @@ -90,7 +118,6 @@ var SkyLightStateless = function (_React$Component) { var dialogStyles = mergeStyles('dialogStyles'); var overlayStyles = mergeStyles('overlayStyles'); - var closeButtonStyle = mergeStyles('closeButtonStyle'); var titleStyle = mergeStyles('titleStyle'); var finalStyle = void 0; @@ -133,18 +160,7 @@ var SkyLightStateless = function (_React$Component) { _react2.default.createElement( 'div', { className: 'skylight-dialog', style: finalStyle }, - _react2.default.createElement( - 'a', - { - role: 'button', - className: 'skylight-close-button', - onClick: function onClick() { - return _this2.onCloseClicked(); - }, - style: closeButtonStyle - }, - this.props.closeButton || '\xD7' - ), + this.closeButton(), title, this.props.children ) @@ -172,7 +188,8 @@ SkyLightStateless.sharedPropTypes = { titleStyle: _propTypes2.default.object, closeOnEsc: _propTypes2.default.bool, className: _propTypes2.default.string, - closeButton: _propTypes2.default.any + closeButton: _propTypes2.default.any, + showCloseButton: _propTypes2.default.bool }; SkyLightStateless.propTypes = _extends({}, SkyLightStateless.sharedPropTypes, { @@ -187,5 +204,6 @@ SkyLightStateless.defaultProps = { closeButtonStyle: _styles2.default.closeButtonStyle, transitionDuration: 200, closeOnEsc: true, - className: '' + className: '', + showCloseButton: true }; \ No newline at end of file diff --git a/src/skylightstateless.jsx b/src/skylightstateless.jsx index e78eb9f..df28458 100644 --- a/src/skylightstateless.jsx +++ b/src/skylightstateless.jsx @@ -37,14 +37,31 @@ export default class SkyLightStateless extends React.Component { } } + closeButton = () => { + if (!this.props.showCloseButton) { + return; + } + const mergeStyles = key => assign({}, styles[key], this.props[key]); + const closeButtonStyle = mergeStyles('closeButtonStyle'); + return ( + this.onCloseClicked()} + style={closeButtonStyle} + > + {this.props.closeButton || '\u00D7'} + + ); + } + render() { const mergeStyles = key => assign({}, styles[key], this.props[key]); const { isVisible } = this.props; const dialogStyles = mergeStyles('dialogStyles'); const overlayStyles = mergeStyles('overlayStyles'); - const closeButtonStyle = mergeStyles('closeButtonStyle'); const titleStyle = mergeStyles('titleStyle'); - + let finalStyle; if(isVisible) { finalStyle = assign({}, dialogStyles, styles.animationOpen); @@ -53,7 +70,7 @@ export default class SkyLightStateless extends React.Component { finalStyle = assign({}, dialogStyles, styles.animationBase); overlayStyles.display = 'none'; } - + finalStyle.transitionDuration = `${this.props.transitionDuration}ms`; overlayStyles.transitionDuration = `${this.props.transitionDuration}ms`; @@ -78,20 +95,13 @@ export default class SkyLightStateless extends React.Component { {overlay} - this.onCloseClicked()} - style={closeButtonStyle} - > - {this.props.closeButton || '\u00D7'} - + {this.closeButton()} {title} {this.props.children} ); - + } } @@ -110,6 +120,7 @@ SkyLightStateless.sharedPropTypes = { closeOnEsc: PropTypes.bool, className: PropTypes.string, closeButton: PropTypes.any, + showCloseButton: PropTypes.bool, }; SkyLightStateless.propTypes = { @@ -126,4 +137,5 @@ SkyLightStateless.defaultProps = { transitionDuration: 200, closeOnEsc: true, className: '', + showCloseButton: true, }; diff --git a/test/skylightinteractor.js b/test/skylightinteractor.js index 93dc102..ce456e7 100644 --- a/test/skylightinteractor.js +++ b/test/skylightinteractor.js @@ -38,6 +38,11 @@ export default class SkylightInteractor { Simulate.click(closeButton); } + isCloseButtonVisible() { + const found = scryRenderedDOMComponentsWithClass(this._component, 'skylight-close-button'); + return found.length === 1; + } + isOpen() { const found = scryRenderedDOMComponentsWithClass(this._component, 'skylight-overlay'); return found.length === 1; diff --git a/test/skylightstateless.spec.jsx b/test/skylightstateless.spec.jsx index f526ace..5e286b6 100644 --- a/test/skylightstateless.spec.jsx +++ b/test/skylightstateless.spec.jsx @@ -52,4 +52,9 @@ describe('The SkylightStateless component', () => { rendered.clickOnOverlay(); // no error thrown }); + + it("will not render close button when showCloseButton prop is false", () => { + const rendered = new SkylightInteractor(); + expect(rendered.isCloseButtonVisible()).to.be.false; + }); });