Progress

app/javascript/gabsocial/components/modal/modal_layout.js

@@ -1,8 +1,11 @@
 import { defineMessages, injectIntl } from 'react-intl'
+import classNames from 'classnames/bind'
 import Button from '../button'
 import Block from '../block'
 import Heading from '../heading'
 
+const cx = classNames.bind(_s)
+
 const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' },
 })
@@ -14,6 +17,13 @@ class ModalLayout extends PureComponent {
     title: PropTypes.string,
     children: PropTypes.node,
     onClose: PropTypes.func.isRequired,
+    width: PropTypes.number,
+    hideClose: PropTypes.bool,
+    noPadding: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    width: 600,
   }
 
   render() {
@@ -22,26 +32,38 @@ class ModalLayout extends PureComponent {
       children,
       intl,
       onClose,
+      width,
+      hideClose,
+      noPadding
     } = this.props
 
+    const childrenContainerClasses = cx({
+      default: 1,
+      px15: !noPadding,
+      py10: !noPadding,
+    })
+
     return (
-      <div className={[_s.width645PX].join(' ')}>
+      <div style={{width: `${width}px`}}>
         <Block>
           <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.height53PX, _s.px15].join(' ')}>
             <Heading size='h3'>
               {title}
             </Heading>
-            <Button
-              backgroundColor='none'
-              title={intl.formatMessage(messages.close)}
-              className={_s.marginLeftAuto}
-              onClick={onClose}
-              icon='close'
-              iconWidth='10px'
-              iconWidth='10px'
-            />
+            {
+              !hideClose &&
+              <Button
+                backgroundColor='none'
+                title={intl.formatMessage(messages.close)}
+                className={_s.marginLeftAuto}
+                onClick={onClose}
+                icon='close'
+                iconWidth='10px'
+                iconWidth='10px'
+              />
+            }
           </div>
-          <div className={[_s.default, _s.px15, _s.py10].join(' ')}>
+          <div className={childrenContainerClasses}>
             {children}
           </div>
         </Block>