added options to disable close modal actions (#187)

logo/index.js

@@ -0,0 +1,17 @@
+const React = require('react')
+const { version } = require('../package.json')
+
+const Logo = () => {
+  return (
+    <a
+      className="rsg-logo"
+      href="https://github.com/TykTechnologies/tyk-ui"
+      target="_blank"
+    >
+      <img src="https://tyk.io/wp-content/themes/tyk/dist/svg/logo.svg" width="190px" height="62px"/>
+      <em className="rsg-logo-version">v.{version}</em>
+    </a>
+  );
+};
+
+module.exports = Logo

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tyk-technologies/tyk-ui",
-  "version": "2.1.10",
+  "version": "2.1.11",
   "description": "Tyk UI - ui reusable components",
   "main": "lib/index.js",
   "scripts": {

src/components/Modal/index.js

@@ -21,6 +21,8 @@ export default class Modal extends Component {
       PropTypes.node,
       PropTypes.string,
     ]),
+    /** If set on true, the Modal won't close when clicking on the overlay or by pressing ESC key */
+    disableCloseCommands: PropTypes.bool,
     /** If true the Modal will be by default opened */
     opened: PropTypes.bool,
     /** Callback method when the Modal is closed */
@@ -72,7 +74,7 @@ export default class Modal extends Component {
 
   render() {
     const {
-      children, opened, onClose, size, ...restProps
+      children, disableCloseCommands, opened, onClose, size, ...restProps
     } = this.props;
 
     return (
@@ -111,7 +113,7 @@ export default class Modal extends Component {
             >
               <button
                 className={this.getBackdropCssClasses()}
-                onClick={this.closeModal}
+                onClick={!disableCloseCommands && this.closeModal}
                 onKeyDown={() => {}}
                 type="button"
               />

src/components/Modal/js/ModalHeader.js

@@ -4,24 +4,24 @@ import PropTypes from 'prop-types';
 import Button from '../../Button';
 import { ModalContext } from '../modal-context';
 
-const ModalHeader = (props) => {
-  const { children } = props;
-
-  return (
-    <ModalContext.Consumer>
-      {
-        modalContext => (
-          <div className="tyk-modal__header">
-            { children }
-            <Button onClick={modalContext.closeModal} iconType="times" iconOnly theme="white" iconPosition="left" />
-          </div>
-        )
-      }
-    </ModalContext.Consumer>
-  );
-};
+const ModalHeader = ({
+  children,
+  hideCloseButton = false,
+}) => (
+  <ModalContext.Consumer>
+    {
+      modalContext => (
+        <div className="tyk-modal__header">
+          { children }
+          {!hideCloseButton && <Button onClick={modalContext.closeModal} iconType="times" iconOnly theme="white" iconPosition="left" />}
+        </div>
+      )
+    }
+  </ModalContext.Consumer>
+);
 
 ModalHeader.propTypes = {
+  hideCloseButton: PropTypes.bool,
   children: PropTypes.oneOfType([
     PropTypes.element,
     PropTypes.node,

styleguide.config.js

@@ -10,7 +10,7 @@ module.exports = {
     path.join(__dirname, 'src/index.scss')
 	],
 	styleguideComponents: {
-    Logo: path.join(__dirname, 'lib/logo')
+    Logo: path.join(__dirname, 'logo')
 	},
 	template: {
 		favicon: 'https://tyk.io/wp-content/uploads/2019/08/cropped-favicon-384x384.png'

styleguide.styles.js

@@ -173,7 +173,9 @@ const styles = {
         fontSize: theme.fontSize.small,
         fontFamily: theme.fontFamily.monospace,
         marginLeft: rhythm(0.25),
-        opacity: 0.5
+        opacity: 0.5,
+        display: 'flex',
+        justifyContent: 'center'
       }
     },
     sidebar: {