Material UI: finish Create Torrent

2016-08-31 03:35:27 -07:00
parent b6bdeab50b
commit f8cc155650
3 changed files with 107 additions and 82 deletions
--- a/src/renderer/components/ShowMore.js
+++ b/src/renderer/components/ShowMore.js
@@ -39,14 +39,11 @@ class ShowMore extends React.Component {
      ? this.props.hideLabel
      : this.props.showLabel
    return (
-      <div
-        style={this.props.style}
-      >
+      <div style={this.props.style}>
        {this.state.expanded ? this.props.children : null}
        <FlatButton
          onClick={this.handleClick}
-          label={label}
-        />
+          label={label} />
      </div>
    )
  }
--- a/src/renderer/pages/CreateTorrentPage.js
+++ b/src/renderer/pages/CreateTorrentPage.js
@@ -8,6 +8,7 @@ const {dispatch, dispatcher} = require('../lib/dispatcher')
 const FlatButton = require('material-ui/FlatButton').default
 const RaisedButton = require('material-ui/RaisedButton').default
 const TextField = require('material-ui/TextField').default
+const Checkbox = require('material-ui/Checkbox').default

 const CreateTorrentErrorPage = require('../components/create-torrent-error-page')
 const Heading = require('../components/Heading')
@@ -20,27 +21,20 @@ class CreateTorrentPage extends React.Component {
    var state = this.props.state
    var info = state.location.current()

-    // Preprocess: exclude .DS_Store and other dotfiles
-    var files = info.files
-      .filter((f) => !f.name.startsWith('.'))
-      .map((f) => ({name: f.name, path: f.path, size: f.size}))
-    if (files.length === 0) return (<CreateTorrentErrorPage state={state} />)
-
    // First, extract the base folder that the files are all in
    var pathPrefix = info.folderPath
    if (!pathPrefix) {
-      pathPrefix = files.map((x) => x.path).reduce(findCommonPrefix)
+      pathPrefix = info.files.map((x) => x.path).reduce(findCommonPrefix)
      if (!pathPrefix.endsWith('/') && !pathPrefix.endsWith('\\')) {
        pathPrefix = path.dirname(pathPrefix)
      }
    }

-    // Sanity check: show the number of files and total size
-    var numFiles = files.length
-    var totalBytes = files
-      .map((f) => f.size)
-      .reduce((a, b) => a + b, 0)
-    var torrentInfo = `${numFiles} files, ${prettyBytes(totalBytes)}`
+    // Then, exclude .DS_Store and other dotfiles
+    var files = info.files
+      .filter((f) => !containsDots(f.path, pathPrefix))
+      .map((f) => ({name: f.name, path: f.path, size: f.size}))
+    if (files.length === 0) return (<CreateTorrentErrorPage state={state} />)

    // Then, use the name of the base folder (or sole file, for a single file torrent)
    // as the default name. Show all files relative to the base folder.
@@ -54,34 +48,32 @@ class CreateTorrentPage extends React.Component {
      defaultName = path.basename(pathPrefix)
      basePath = path.dirname(pathPrefix)
    }
-    var maxFileElems = 100
-    var fileElems = files.slice(0, maxFileElems).map(function (file, i) {
-      var relativePath = files.length === 0
-        ? file.name
-        : path.relative(pathPrefix, file.path)
-      return (<div key={i}>{relativePath}</div>)
-    })
-    if (files.length > maxFileElems) {
-      fileElems.push(<div key='more'>+ {maxFileElems - files.length} more</div>)
-    }
+
+    // Default trackers
    var trackers = createTorrent.announceList.join('\n')

    this.state = {
+      comment: '',
+      isPrivate: false,
+      pathPrefix,
      basePath,
      defaultName,
-      fileElems,
-      torrentInfo,
+      files,
      trackers
    }
+
+    // Create React event handlers only once
+    this.setIsPrivate = (_, isPrivate) => this.setState({isPrivate})
+    this.setComment = (_, comment) => this.setState({comment})
+    this.setTrackers = (_, trackers) => this.setState({trackers})
+    this.handleSubmit = () => this.handleSubmit
  }

  handleSubmit () {
-    var announceList = document.querySelector('.torrent-trackers').value
+    var announceList = this.state.trackers
      .split('\n')
      .map((s) => s.trim())
      .filter((s) => s !== '')
-    var isPrivate = document.querySelector('.torrent-is-private').checked
-    var comment = document.querySelector('.torrent-comment').value.trim()
    var options = {
      // We can't let the user choose their own name if we want WebTorrent
      // to use the files in place rather than creating a new folder.
@@ -89,55 +81,37 @@ class CreateTorrentPage extends React.Component {
      path: this.state.basePath,
      files: this.state.files,
      announce: announceList,
-      private: isPrivate,
-      comment: comment
+      private: this.state.isPrivate,
+      comment: this.state.comment.trim()
    }
    dispatch('createTorrent', options)
  }

  render () {
+    var files = this.state.files
+
+    // Sanity check: show the number of files and total size
+    var numFiles = files.length
+    var totalBytes = files
+      .map((f) => f.size)
+      .reduce((a, b) => a + b, 0)
+    var torrentInfo = `${numFiles} files, ${prettyBytes(totalBytes)}`
+
    return (
      <div className='create-torrent'>
-        <Heading level={1}>
-          Create torrent "{this.state.defaultName}"
-        </Heading>
-        <div className='torrent-info'>
-          {this.state.torrentInfo}
-        </div>
+        <Heading level={1}>Create torrent {this.state.defaultName}</Heading>
+        <div className='torrent-info'>{torrentInfo}</div>
        <div className='torrent-attribute'>
          <label>Path:</label>
-          <div className='torrent-attribute'>{this.state.pathPrefix}</div>
+          <div>{this.state.pathPrefix}</div>
        </div>
        <ShowMore
          style={{
            marginBottom: 10
          }}
          hideLabel='Hide advanced settings...'
-          showLabel='Show advanced settings...'
-        >
-          <div key='advanced' className='create-torrent-advanced'>
-            <div key='private' className='torrent-attribute'>
-              <label>Private:</label>
-              <input type='checkbox' className='torrent-is-private' value='torrent-is-private' />
-            </div>
-            <Heading level={2}>Trackers:</Heading>
-            <TextField
-              className='torrent-trackers'
-              hintText='Tracker'
-              multiLine
-              rows={2}
-              rowsMax={10}
-              defaultValue={this.state.trackers}
-            />
-            <div key='comment' className='torrent-attribute'>
-              <label>Comment:</label>
-              <textarea className='torrent-attribute torrent-comment' />
-            </div>
-            <div key='files' className='torrent-attribute'>
-              <label>Files:</label>
-              <div>{this.state.fileElems}</div>
-            </div>
-          </div>
+          showLabel='Show advanced settings...' >
+          {this.renderAdvanced()}
        </ShowMore>
        <div className='float-right'>
          <FlatButton
@@ -156,6 +130,65 @@ class CreateTorrentPage extends React.Component {
      </div>
    )
  }
+
+  renderAdvanced () {
+    // Create file list
+    var maxFileElems = 100
+    var files = this.state.files
+    var fileElems = files.slice(0, maxFileElems).map((file, i) => {
+      var relativePath = path.relative(this.state.pathPrefix, file.path)
+      return (<div key={i}>{relativePath}</div>)
+    })
+    if (files.length > maxFileElems) {
+      fileElems.push(<div key='more'>+ {maxFileElems - files.length} more</div>)
+    }
+
+    // Align the text fields
+    var textFieldStyle = { width: '' }
+    var textareaStyle = { margin: 0 }
+
+    return (
+      <div key='advanced' className='create-torrent-advanced'>
+        <div key='private' className='torrent-attribute'>
+          <label>Private:</label>
+          <Checkbox
+            className='torrent-is-private'
+            style={{display: ''}}
+            value={this.state.isPrivate}
+            onChange={this.setIsPrivate} />
+        </div>
+        <div key='trackers' className='torrent-attribute'>
+          <label>Trackers:</label>
+          <TextField
+            className='torrent-trackers'
+            style={textFieldStyle}
+            textareaStyle={textareaStyle}
+            multiLine
+            rows={2}
+            rowsMax={10}
+            value={this.state.trackers}
+            onChange={this.setTrackers} />
+        </div>
+        <div key='comment' className='torrent-attribute'>
+          <label>Comment:</label>
+          <TextField
+            className='torrent-comment'
+            style={textFieldStyle}
+            textareaStyle={textareaStyle}
+            hintText='Optionally describe your torrent...'
+            multiLine
+            rows={2}
+            rowsMax={10}
+            value={this.state.comment}
+            onChange={this.setComment} />
+        </div>
+        <div key='files' className='torrent-attribute'>
+          <label>Files:</label>
+          <div>{fileElems}</div>
+        </div>
+      </div>
+    )
+  }
 }

 // Finds the longest common prefix
@@ -168,4 +201,10 @@ function findCommonPrefix (a, b) {
  return a.substring(0, i)
 }

+function containsDots (path, pathPrefix) {
+  var suffix = path.substring(pathPrefix.length).replace(/\\/g, '/')
+  console.log('SUFFIX ' + suffix)
+  return ('/' + suffix).includes('/.')
+}
+
 module.exports = CreateTorrentPage
--- a/static/main.css
+++ b/static/main.css
@@ -272,10 +272,12 @@ table {
 .create-torrent {
  padding: 10px 25px;
  overflow: hidden;
+  font: 16px/24px BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
 }

 .create-torrent .torrent-attribute {
  white-space: nowrap;
+  margin: 8px 0;
 }

 .create-torrent .torrent-attribute>* {
@@ -283,13 +285,12 @@ table {
 }

 .create-torrent .torrent-attribute label {
-  width: 60px;
-  margin-right: 10px;
+  width: 100px;
  vertical-align: top;
 }

 .create-torrent .torrent-attribute>div {
-  width: calc(100% - 90px);
+  width: calc(100% - 100px);
 }

 .create-torrent .torrent-attribute div {
@@ -298,18 +299,6 @@ table {
  text-overflow: ellipsis;
 }

-.create-torrent .torrent-attribute textarea {
-  width: calc(100% - 80px);
-  height: 80px;
-  color: #eee;
-  background-color: transparent;
-  line-height: 1.5;
-  font-size: 14px;
-  font-family: inherit;
-  border-radius: 2px;
-  padding: 4px 6px;
-}
-
 /*
 * BUTTONS
 */