switch from Dialog to react-bootstrap#Modal so can use full-screen

lefnire · Apr 21, 2016 · 0ed036a · 0ed036a
1 parent a4a4c61
commit 0ed036a
Show file tree

Hide file tree

Showing 8 changed files with 109 additions and 95 deletions.
diff --git a/client/src/app/components/Profile.js b/client/src/app/components/Profile.js
@@ -2,7 +2,6 @@ import React from 'react';
 import {API_URL, _fetch, logout} from '../helpers';
 import {
   FlatButton,
-  Dialog,
   TextField,
   Checkbox,
   ListItem,
@@ -24,6 +23,9 @@ import {
 } from 'formsy-material-ui';
 import update from 'react-addons-update';
 import SeedTags from './jobs/SeedTags';
+import {
+  Modal
+} from 'react-bootstrap';
 
 class DeleteAccount extends React.Component {
   constructor(){
@@ -40,18 +42,14 @@ class DeleteAccount extends React.Component {
 
   render(){
     const actions = [
-      <FlatButton label="Cancel" secondary={true} onTouchTap={this.close}/>,
-      <FlatButton label="Delete" primary={true} disabled={!this.state.canSubmit} onTouchTap={() => this.refs.form.submit() }
-      />,
+
     ];
     return (
-      <Dialog
-        title="Delete account"
-        actions={actions}
-        autoScrollBodyContent={true}
-        open={this.state.open}
-        onRequestClose={this.close}
-      >
+      <Modal show={this.state.open} onHide={this.close} bsSize="large">
+        <Modal.Header>
+          <Modal.Title>Delete Account</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
           <Formsy.Form
             ref="form"
             onValid={() => this.setState({canSubmit: true})}
@@ -66,7 +64,12 @@ class DeleteAccount extends React.Component {
               validations="equals:DELETE"
               type="email"/>
           </Formsy.Form>
-      </Dialog>
+        </Modal.Body>
+        <Modal.Footer>
+          <FlatButton label="Cancel" secondary={true} onTouchTap={this.close}/>
+          <FlatButton label="Delete" primary={true} disabled={!this.state.canSubmit} onTouchTap={() => this.refs.form.submit()}/>
+        </Modal.Footer>
+      </Modal>
     );
   }
 }
@@ -84,19 +87,10 @@ export default class TagEdit extends React.Component {
     let {tag} = this.state;
     if (!tag) return null;
     let {locked, score} = tag.user_tags;
-    let actions = [
-      <FlatButton label="Cancel" secondary={true} onTouchTap={this.close} />,
-      <FlatButton label="Submit" primary={true} keyboardFocused={true} onTouchTap={this._submit}/>,
-    ];
-    //modal={false}
     return (
-      <Dialog
-        title="Edit Tag"
-        actions={actions}
-        open={this.state.open}
-        onRequestClose={this.close}
-        autoScrollBodyContent={true}
-      >
+      <Modal show={this.state.open} onHide={this.close} bsSize="large">
+        <Modal.Header><Modal.Title>Edit Tag</Modal.Title></Modal.Header>
+        <Modal.Body>
           <TextField
             type='number'
             autofocus={true}
@@ -110,7 +104,12 @@ export default class TagEdit extends React.Component {
             onCheck={this._changeLock}
             checked={locked}
           />
-      </Dialog>
+        </Modal.Body>
+        <Modal.Footer>
+          <FlatButton label="Cancel" secondary={true} onTouchTap={this.close} />
+          <FlatButton label="Submit" primary={true} onTouchTap={this._submit}/>
+        </Modal.Footer>
+      </Modal>
     );
   }
 
@@ -119,7 +118,6 @@ export default class TagEdit extends React.Component {
   }));
 
   _changeLock = e => {
-    debugger;
     this.setState(update(this.state, {
       tag: {user_tags: {locked: {$set: e.target.checked}}}
     }))

diff --git a/client/src/app/components/employer/Contact.js b/client/src/app/components/employer/Contact.js
@@ -1,14 +1,16 @@
 import React from 'react';
 import {
   FlatButton,
-  Dialog,
 } from 'material-ui';
 import _ from 'lodash';
 import {_fetch, _ga} from '../../helpers';
 import Formsy from 'formsy-react'
 import {
   FormsyText
 } from 'formsy-material-ui';
+import {
+  Modal
+} from 'react-bootstrap';
 
 export default class Contact extends React.Component {
   constructor(props) {
@@ -20,19 +22,12 @@ export default class Contact extends React.Component {
   }
 
   render() {
-    const actions = [
-      <FlatButton label="Cancel" secondary={true} onTouchTap={this.close}/>,
-      <FlatButton label="Submit" primary={true} keyboardFocused={true} onTouchTap={() => this.refs.form.submit()}/>,
-    ];
-
     return (
-      <Dialog
-        title="Contact"
-        actions={actions}
-        autoScrollBodyContent={true}
-        open={this.state.open}
-        onRequestClose={this.close}
-      >
+      <Modal show={this.state.open} onHide={this.close} bsSize="large">
+        <Modal.Header>
+          <Modal.Title>Contact</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
           <Formsy.Form
             ref="form"
             onValid={() => this.setState({canSubmit: true})}
@@ -41,7 +36,13 @@ export default class Contact extends React.Component {
             <FormsyText hintText="Subject" name="subject" required validationError="required" fullWidth={true}/>
             <FormsyText hintText="Message" name="body" required validationError="required" fullWidth={true} multiLine={true} />
           </Formsy.Form>
-      </Dialog>
+        </Modal.Body>
+
+        <Modal.Footer>
+          <FlatButton label="Cancel" secondary={true} onTouchTap={this.close}/>,
+          <FlatButton label="Submit" primary={true} onTouchTap={() => this.refs.form.submit()}/>,
+        </Modal.Footer>
+      </Modal>
     );
   }
 

diff --git a/client/src/app/components/employer/Create.js b/client/src/app/components/employer/Create.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import {
-  Dialog,
   FlatButton,
 } from 'material-ui';
 import _ from 'lodash';
@@ -14,6 +13,9 @@ import Select from 'react-select';
 import StripeCheckout from 'react-stripe-checkout';
 import Error from '../Error';
 const {TAG_TYPES} = constants;
+import {
+  Modal
+} from 'react-bootstrap';
 
 export default class CreateJob extends React.Component {
   constructor(props) {
@@ -31,15 +33,9 @@ export default class CreateJob extends React.Component {
       : 'Post a Job ($99 for 30 days)';
 
     return (
-      <Dialog
-        autoScrollBodyContent={true}
-        title={title}
-        open={this.state.open}
-        actions={[
-          <FlatButton label="Cancel" secondary={true} onTouchTap={this.close}/>,
-          <FlatButton label="Submit" type="submit" primary={true} disabled={!this.state.canSubmit} onTouchTap={() => this.refs.form.submit()} />
-        ]}
-      >
+      <Modal show={this.state.open} onHide={this.close} bsSize="large" dialogClassName="full-modal">
+        <Modal.Header><Modal.Title>{title}</Modal.Title></Modal.Header>
+        <Modal.Body>
           <StripeCheckout
             ref="stripe"
             token={this.onToken}
@@ -107,7 +103,12 @@ export default class CreateJob extends React.Component {
             />
 
           </Formsy.Form>
-      </Dialog>
+        </Modal.Body>
+        <Modal.Footer>
+          <FlatButton label="Cancel" secondary={true} onTouchTap={this.close}/>
+          <FlatButton label="Submit" primary={true} disabled={!this.state.canSubmit} onTouchTap={() => this.refs.form.submit()} />
+        </Modal.Footer>
+      </Modal>
     )
   }
 

diff --git a/client/src/app/components/front/Auth.js b/client/src/app/components/front/Auth.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import {
   RaisedButton,
-  Dialog,
   Tabs,
   Tab,
   FlatButton
@@ -16,6 +15,10 @@ import Error from '../Error';
 import update from 'react-addons-update';
 const {AUTH_ACTIONS} = constants;
 
+import {
+  Modal
+} from 'react-bootstrap';
+
 class Login extends React.Component {
   constructor(){
     super();
@@ -154,20 +157,14 @@ export default class Auth extends React.Component {
   }
 
   render() {
-    const actions = [
-      <FlatButton label="Cancel" secondary={true} onTouchTap={this.close} />,
-    ];
     const initialTab = {
       [AUTH_ACTIONS.LOGIN]: 0,
       [AUTH_ACTIONS.REGISTER]: 1,
       [AUTH_ACTIONS.POST_JOB]: 1
     }[this.state.action];
     return (
-      <Dialog
-        actions={actions}
-        autoScrollBodyContent={true}
-        open={this.state.open}
-      >
+      <Modal show={this.state.open} onHide={this.close} bsSize="large">
+        <Modal.Body>
           <Tabs initialSelectedIndex={initialTab}>
             <Tab label="Login">
               <Login />
@@ -176,7 +173,11 @@ export default class Auth extends React.Component {
               <Register action={this.state.action} coupon={this.props.coupon} />
             </Tab>
           </Tabs>
-      </Dialog>
+        </Modal.Body>
+        <Modal.Footer>
+          <FlatButton label="Cancel" secondary={true} onTouchTap={this.close} />,
+        </Modal.Footer>
+      </Modal>
     );
 
   }

diff --git a/client/src/app/components/jobs/Job.js b/client/src/app/components/jobs/Job.js
@@ -44,13 +44,6 @@ export default class Job extends Component {
       card: _.defaults({}, style, isInList && {marginBottom: 20})
     };
 
-    window.setTimeout(() => { // FIXME This is bad, but using ref + componentDidMount isn't calling every render???
-      if (editing) return this.refs.noteRef.focus();
-    });
-
-    // Test tag issues: jobs have multiple companies, locations, etc. Remove after a while
-    //if (_.reduce([2,3,4], (m,type) => m && _.filter(job.tags, {type}).length>1, true)) debugger;
-
     return (
       <div style={styles.card} className={isInList? 'padded': ''}>
         <Card>
@@ -65,7 +58,7 @@ export default class Job extends Component {
               {editing ?
                 <Paper zDepth={2} style={{padding:5}}>
                   <TextField
-                    ref='noteRef'
+                    ref={c => c && c.focus()}
                     hintText="Add personal comments here."
                     defaultValue={job.note}
                     fullWidth={true}

diff --git a/client/src/app/components/jobs/SeedTags.js b/client/src/app/components/jobs/SeedTags.js
@@ -2,7 +2,6 @@ import React, {Component} from 'react';
 import update from 'react-addons-update';
 import {
   FlatButton,
-  Dialog,
   MenuItem,
   RaisedButton,
   Card,
@@ -18,6 +17,9 @@ import _ from 'lodash';
 import {_fetch, getTags, me, constants, filterOptions} from '../../helpers';
 import Select from 'react-select';
 const {TAG_TYPES} = constants;
+import {
+  Modal
+} from 'react-bootstrap';
 
 export default class SeedTags extends React.Component {
   constructor() {
@@ -33,30 +35,12 @@ export default class SeedTags extends React.Component {
   render() {
     let {open, tags, suggestion} = this.state;
 
-    const actions = [
-      <FlatButton
-        label="Skip"
-        secondary={true}
-        onTouchTap={() => {
-          this._seedSkipped=true;
-          this.close();
-        }}
-      />,
-      <FlatButton
-        label="Submit"
-        primary={true}
-        keyboardFocused={true}
-        onTouchTap={this._seedTags}
-      />,
-    ];
-
-    // Select.Async#menuContainerStyle={{zIndex:1600}} may be necessary (Dialog's is 1500)
     return (
-      <Dialog title="Seed Tags"
-        actions={actions}
-        autoScrollBodyContent={true}
-        open={open}
-        onRequestClose={this.close}>
+      <Modal show={this.state.open} onHide={this.close} bsSize="large">
+        <Modal.Header>
+          <Modal.Title>Seed Tags</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
 
           {!suggestion? (
             <div>
@@ -106,8 +90,21 @@ export default class SeedTags extends React.Component {
             noResultsText="Start typing"
             filterOptions={filterOptions(true, 'Suggest')}
           />
+        </Modal.Body>
+
+        <Modal.Footer>
+          <FlatButton
+            label="Skip"
+            secondary={true}
+            onTouchTap={() => {
+              this._seedSkipped=true;
+              this.close();
+            }}
+          />
+          <FlatButton label="Submit" primary={true} onTouchTap={this._seedTags} />
+        </Modal.Footer>
 
-      </Dialog>
+      </Modal>
     );
   }
 

diff --git a/client/src/www/index.html b/client/src/www/index.html
@@ -16,6 +16,6 @@
 </head>
 <body>
   <div id="app"></div>
-  <script src="app.js?v=12"></script>
+  <script src="app.js?v=14"></script>
 </body>
 </html>