Merge branch 'master' of https://github.com/processing/p5.js-web-editor into add-readme-ko-translation

Author: min-kim42

.github/FUNDING.yml

@@ -0,0 +1 @@
+custom: https://processingfoundation.org/support

client/components/Nav.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
-import { Link, browserHistory } from 'react-router';
+import { Link } from 'react-router';
 import InlineSVG from 'react-inlinesvg';
 import classNames from 'classnames';
 import * as IDEActions from '../modules/IDE/actions/ide';
@@ -167,8 +167,6 @@ class Nav extends React.PureComponent {
 
   handleLogout() {
     this.props.logoutUser();
-    // if you're on the settings page, probably.
-    browserHistory.push('/');
     this.setDropdown('none');
   }
 
@@ -184,7 +182,8 @@ class Nav extends React.PureComponent {
   }
 
   handleShare() {
-    this.props.showShareModal();
+    const { username } = this.props.params;
+    this.props.showShareModal(this.props.project.id, this.props.project.name, username);
     this.setDropdown('none');
   }
 
@@ -717,6 +716,7 @@ Nav.propTypes = {
   }).isRequired,
   project: PropTypes.shape({
     id: PropTypes.string,
+    name: PropTypes.string,
     owner: PropTypes.shape({
       id: PropTypes.string
     })
@@ -742,7 +742,10 @@ Nav.propTypes = {
   layout: PropTypes.oneOf(['dashboard', 'project']),
   rootFile: PropTypes.shape({
     id: PropTypes.string.isRequired
-  }).isRequired
+  }).isRequired,
+  params: PropTypes.shape({
+    username: PropTypes.string
+  })
 };
 
 Nav.defaultProps = {
@@ -752,7 +755,10 @@ Nav.defaultProps = {
   },
   cmController: {},
   layout: 'project',
-  warnIfUnsavedChanges: undefined
+  warnIfUnsavedChanges: undefined,
+  params: {
+    username: undefined
+  }
 };
 
 function mapStateToProps(state) {

client/modules/App/components/loader.jsx

@@ -1,9 +1,11 @@
 import React from 'react';
 
 const Loader = () => (
-  <div className="loader">
-    <div className="loader__circle1" />
-    <div className="loader__circle2" />
+  <div className="loader-container">
+    <div className="loader">
+      <div className="loader__circle1" />
+      <div className="loader__circle2" />
+    </div>
   </div>
 );
 export default Loader;

client/modules/IDE/components/CollectionList/CollectionListRow.jsx

@@ -25,6 +25,7 @@ class CollectionListRowBase extends React.Component {
       renameOpen: false,
       renameValue: '',
     };
+    this.renameInput = React.createRef();
   }
 
   onFocusComponent = () => {
@@ -89,7 +90,7 @@ class CollectionListRowBase extends React.Component {
     this.setState({
       renameOpen: true,
       renameValue: this.props.collection.name,
-    });
+    }, () => this.renameInput.current.focus());
   }
 
   handleRenameChange = (e) => {
@@ -99,23 +100,23 @@ class CollectionListRowBase extends React.Component {
   }
 
   handleRenameEnter = (e) => {
-    const isValid = this.state.renameValue !== '';
-
     if (e.key === 'Enter') {
-      if (isValid) {
-        this.props.editCollection(this.props.collection.id, { name: this.state.renameValue });
-      }
-
-      // this.resetName();
+      this.updateName();
       this.closeAll();
     }
   }
 
-  // resetName = () => {
-  //   this.setState({
-  //     renameValue: this.props.collection.name
-  //   });
-  // }
+  handleRenameBlur = () => {
+    this.updateName();
+    this.closeAll();
+  }
+
+  updateName = () => {
+    const isValid = this.state.renameValue.trim().length !== 0;
+    if (isValid) {
+      this.props.editCollection(this.props.collection.id, { name: this.state.renameValue.trim() });
+    }
+  }
 
   renderActions = () => {
     const { optionsOpen } = this.state;
@@ -188,8 +189,9 @@ class CollectionListRowBase extends React.Component {
             value={renameValue}
             onChange={this.handleRenameChange}
             onKeyUp={this.handleRenameEnter}
-            // onBlur={this.resetName}
+            onBlur={this.handleRenameBlur}
             onClick={e => e.stopPropagation()}
+            ref={this.renameInput}
           />
         }
       </React.Fragment>

client/modules/IDE/components/FileNode.jsx

@@ -160,6 +160,7 @@ export class FileNode extends React.Component {
                   type="text"
                   className="sidebar__file-item-input"
                   value={this.props.name}
+                  maxLength="128"
                   onChange={this.handleFileNameChange}
                   ref={(element) => { this.fileNameInput = element; }}
                   onBlur={() => {
@@ -184,40 +185,50 @@ export class FileNode extends React.Component {
                     {(() => { // eslint-disable-line
                       if (this.props.fileType === 'folder') {
                         return (
-                          <li>
-                            <button
-                              aria-label="add file"
-                              onClick={() => {
-                                this.props.newFile(this.props.id);
-                                setTimeout(() => this.hideFileOptions(), 0);
-                              }}
-                              onBlur={this.onBlurComponent}
-                              onFocus={this.onFocusComponent}
-                              className="sidebar__file-item-option"
-                            >
-                              Add File
-                            </button>
-                          </li>
-                        );
-                      }
-                    })()}
-                    {(() => { // eslint-disable-line
-                      if (this.props.fileType === 'folder') {
-                        return (
-                          <li>
-                            <button
-                              aria-label="add folder"
-                              onClick={() => {
-                                this.props.newFolder(this.props.id);
-                                setTimeout(() => this.hideFileOptions(), 0);
-                              }}
-                              onBlur={this.onBlurComponent}
-                              onFocus={this.onFocusComponent}
-                              className="sidebar__file-item-option"
-                            >
-                              Add Folder
-                            </button>
-                          </li>
+                          <React.Fragment>
+                            <li>
+                              <button
+                                aria-label="add folder"
+                                onClick={() => {
+                                  this.props.newFolder(this.props.id);
+                                  setTimeout(this.hideFileOptions, 0);
+                                }}
+                                onBlur={this.onBlurComponent}
+                                onFocus={this.onFocusComponent}
+                                className="sidebar__file-item-option"
+                              >
+                                Create folder
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-label="add file"
+                                onClick={() => {
+                                  this.props.newFile(this.props.id);
+                                  setTimeout(this.hideFileOptions, 0);
+                                }}
+                                onBlur={this.onBlurComponent}
+                                onFocus={this.onFocusComponent}
+                                className="sidebar__file-item-option"
+                              >
+                                Create file
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-label="upload file"
+                                onClick={() => {
+                                  this.props.openUploadFileModal(this.props.id);
+                                  setTimeout(this.hideFileOptions, 0);
+                                }}
+                                onBlur={this.onBlurComponent}
+                                onFocus={this.onFocusComponent}
+                              >
+                                Upload file
+                              </button>
+                            </li>
+
+                          </React.Fragment>
                         );
                       }
                     })()}
@@ -288,7 +299,8 @@ FileNode.propTypes = {
   newFolder: PropTypes.func.isRequired,
   showFolderChildren: PropTypes.func.isRequired,
   hideFolderChildren: PropTypes.func.isRequired,
-  canEdit: PropTypes.bool.isRequired
+  canEdit: PropTypes.bool.isRequired,
+  openUploadFileModal: PropTypes.func.isRequired
 };
 
 FileNode.defaultProps = {

client/modules/IDE/components/NewFileForm.jsx

@@ -29,6 +29,7 @@ class NewFileForm extends React.Component {
             id="name"
             type="text"
             placeholder="Name"
+            maxLength="128"
             {...domOnlyProps(name)}
             ref={(element) => { this.fileName = element; }}
           />

client/modules/IDE/components/NewFolderForm.jsx

@@ -29,6 +29,7 @@ class NewFolderForm extends React.Component {
             className="new-folder-form__name-input"
             id="name"
             type="text"
+            maxLength="128"
             placeholder="Name"
             ref={(element) => { this.fileName = element; }}
             {...domOnlyProps(name)}

client/modules/IDE/components/Searchbar/Searchbar.jsx

@@ -44,13 +44,9 @@ class Searchbar extends React.Component {
     const { searchValue } = this.state;
     return (
       <div className={`searchbar ${searchValue === '' ? 'searchbar--is-empty' : ''}`}>
-        <button
-          type="submit"
-          className="searchbar__button"
-          onClick={this.handleSearchEnter}
-        >
+        <div className="searchbar__button">
           <InlineSVG className="searchbar__icon" src={searchIcon} />
-        </button>
+        </div>
         <input
           className="searchbar__input"
           type="text"

client/modules/IDE/components/SketchList.jsx

@@ -32,6 +32,7 @@ class SketchListRowBase extends React.Component {
       renameValue: props.sketch.name,
       isFocused: false,
     };
+    this.renameInput = React.createRef();
   }
 
   onFocusComponent = () => {
@@ -69,8 +70,9 @@ class SketchListRowBase extends React.Component {
 
   openRename = () => {
     this.setState({
-      renameOpen: true
-    });
+      renameOpen: true,
+      renameValue: this.props.sketch.name
+    }, () => this.renameInput.current.focus());
   }
 
   closeRename = () => {
@@ -94,15 +96,27 @@ class SketchListRowBase extends React.Component {
 
   handleRenameEnter = (e) => {
     if (e.key === 'Enter') {
-      // TODO pass this func
-      this.props.changeProjectName(this.props.sketch.id, this.state.renameValue);
+      this.updateName();
       this.closeAll();
     }
   }
 
+  handleRenameBlur = () => {
+    this.updateName();
+    this.closeAll();
+  }
+
+  updateName = () => {
+    const isValid = this.state.renameValue.trim().length !== 0;
+    if (isValid) {
+      this.props.changeProjectName(this.props.sketch.id, this.state.renameValue.trim());
+    }
+  }
+
   resetSketchName = () => {
     this.setState({
-      renameValue: this.props.sketch.name
+      renameValue: this.props.sketch.name,
+      renameOpen: false
     });
   }
 
@@ -255,8 +269,9 @@ class SketchListRowBase extends React.Component {
           value={renameValue}
           onChange={this.handleRenameChange}
           onKeyUp={this.handleRenameEnter}
-          onBlur={this.resetSketchName}
+          onBlur={this.handleRenameBlur}
           onClick={e => e.stopPropagation()}
+          ref={this.renameInput}
         />
         }
       </React.Fragment>
@@ -297,7 +312,7 @@ SketchListRowBase.propTypes = {
   cloneProject: PropTypes.func.isRequired,
   exportProjectAsZip: PropTypes.func.isRequired,
   changeProjectName: PropTypes.func.isRequired,
-  onAddToCollection: PropTypes.func.isRequired,
+  onAddToCollection: PropTypes.func.isRequired
 };
 
 function mapDispatchToPropsSketchListRow(dispatch) {

client/modules/IDE/components/Toolbar.jsx

@@ -32,7 +32,7 @@ class Toolbar extends React.Component {
   }
 
   validateProjectName() {
-    if (this.props.project.name === '') {
+    if ((this.props.project.name.trim()).length === 0) {
       this.props.setProjectName(this.originalProjectName);
     }
   }