Ability to show/hide close button

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
+ * 2015-02-03   v0.1.4   Changed skylight.js to skylight.jsx and adjust of namespace

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
 };

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 (
+      <a
+        role="button"
+        className="skylight-close-button"
+        onClick={() => this.onCloseClicked()}
+        style={closeButtonStyle}
+      >
+        {this.props.closeButton || '\u00D7'}
+      </a>
+    );
+  }
+
   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 {
       <section className={`skylight-wrapper ${this.props.className}`}>
         {overlay}
         <div className="skylight-dialog" style={finalStyle}>
-          <a 
-            role="button" 
-            className="skylight-close-button"
-            onClick={() => this.onCloseClicked()}
-            style={closeButtonStyle}
-          >
-            {this.props.closeButton || '\u00D7'}
-          </a>
+          {this.closeButton()}
           {title}
             {this.props.children}
         </div>
       </section>
     );
-    
+
   }
 }
 
@@ -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,
 };

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;

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(<SkylightStateless isVisible showCloseButton={false} />);
+    expect(rendered.isCloseButtonVisible()).to.be.false;
+  });
 });