Skip to content

Commit c6a82b7

Browse files
min-kim42min-kim42
committed
Merge branch 'master' of https://github.com/processing/p5.js-web-editor into add-installation-ko-translation
2 parents aeba28b + 55faf45 commit c6a82b7

File tree

22 files changed

+226
-164
lines changed

22 files changed

+226
-164
lines changed

‎.github/FUNDING.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
custom: https://processingfoundation.org/support

‎client/components/Nav.jsx

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
22
import React from 'react';
33
import { connect } from 'react-redux';
44
import { withRouter } from 'react-router';
5-
import { Link, browserHistory } from 'react-router';
5+
import { Link } from 'react-router';
66
import InlineSVG from 'react-inlinesvg';
77
import classNames from 'classnames';
88
import * as IDEActions from '../modules/IDE/actions/ide';
@@ -167,8 +167,6 @@ class Nav extends React.PureComponent {
167167

168168
handleLogout() {
169169
this.props.logoutUser();
170-
// if you're on the settings page, probably.
171-
browserHistory.push('/');
172170
this.setDropdown('none');
173171
}
174172

@@ -184,7 +182,8 @@ class Nav extends React.PureComponent {
184182
}
185183

186184
handleShare() {
187-
this.props.showShareModal();
185+
const { username } = this.props.params;
186+
this.props.showShareModal(this.props.project.id, this.props.project.name, username);
188187
this.setDropdown('none');
189188
}
190189

@@ -717,6 +716,7 @@ Nav.propTypes = {
717716
}).isRequired,
718717
project: PropTypes.shape({
719718
id: PropTypes.string,
719+
name: PropTypes.string,
720720
owner: PropTypes.shape({
721721
id: PropTypes.string
722722
})
@@ -742,7 +742,10 @@ Nav.propTypes = {
742742
layout: PropTypes.oneOf(['dashboard', 'project']),
743743
rootFile: PropTypes.shape({
744744
id: PropTypes.string.isRequired
745-
}).isRequired
745+
}).isRequired,
746+
params: PropTypes.shape({
747+
username: PropTypes.string
748+
})
746749
};
747750

748751
Nav.defaultProps = {
@@ -752,7 +755,10 @@ Nav.defaultProps = {
752755
},
753756
cmController: {},
754757
layout: 'project',
755-
warnIfUnsavedChanges: undefined
758+
warnIfUnsavedChanges: undefined,
759+
params: {
760+
username: undefined
761+
}
756762
};
757763

758764
function mapStateToProps(state) {

‎client/modules/App/components/loader.jsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import React from 'react';
22

33
const Loader = () => (
4-
<div className="loader">
5-
<div className="loader__circle1" />
6-
<div className="loader__circle2" />
4+
<div className="loader-container">
5+
<div className="loader">
6+
<div className="loader__circle1" />
7+
<div className="loader__circle2" />
8+
</div>
79
</div>
810
);
911
export default Loader;

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

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ class CollectionListRowBase extends React.Component {
2525
renameOpen: false,
2626
renameValue: '',
2727
};
28+
this.renameInput = React.createRef();
2829
}
2930

3031
onFocusComponent = () => {
@@ -89,7 +90,7 @@ class CollectionListRowBase extends React.Component {
8990
this.setState({
9091
renameOpen: true,
9192
renameValue: this.props.collection.name,
92-
});
93+
}, () => this.renameInput.current.focus());
9394
}
9495

9596
handleRenameChange = (e) => {
@@ -99,23 +100,23 @@ class CollectionListRowBase extends React.Component {
99100
}
100101

101102
handleRenameEnter = (e) => {
102-
const isValid = this.state.renameValue !== '';
103-
104103
if (e.key === 'Enter') {
105-
if (isValid) {
106-
this.props.editCollection(this.props.collection.id, { name: this.state.renameValue });
107-
}
108-
109-
// this.resetName();
104+
this.updateName();
110105
this.closeAll();
111106
}
112107
}
113108

114-
// resetName = () => {
115-
// this.setState({
116-
// renameValue: this.props.collection.name
117-
// });
118-
// }
109+
handleRenameBlur = () => {
110+
this.updateName();
111+
this.closeAll();
112+
}
113+
114+
updateName = () => {
115+
const isValid = this.state.renameValue.trim().length !== 0;
116+
if (isValid) {
117+
this.props.editCollection(this.props.collection.id, { name: this.state.renameValue.trim() });
118+
}
119+
}
119120

120121
renderActions = () => {
121122
const { optionsOpen } = this.state;
@@ -188,8 +189,9 @@ class CollectionListRowBase extends React.Component {
188189
value={renameValue}
189190
onChange={this.handleRenameChange}
190191
onKeyUp={this.handleRenameEnter}
191-
// onBlur={this.resetName}
192+
onBlur={this.handleRenameBlur}
192193
onClick={e => e.stopPropagation()}
194+
ref={this.renameInput}
193195
/>
194196
}
195197
</React.Fragment>

‎client/modules/IDE/components/FileNode.jsx

Lines changed: 47 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,7 @@ export class FileNode extends React.Component {
160160
type="text"
161161
className="sidebar__file-item-input"
162162
value={this.props.name}
163+
maxLength="128"
163164
onChange={this.handleFileNameChange}
164165
ref={(element) => { this.fileNameInput = element; }}
165166
onBlur={() => {
@@ -184,40 +185,50 @@ export class FileNode extends React.Component {
184185
{(() => { // eslint-disable-line
185186
if (this.props.fileType === 'folder') {
186187
return (
187-
<li>
188-
<button
189-
aria-label="add file"
190-
onClick={() => {
191-
this.props.newFile(this.props.id);
192-
setTimeout(() => this.hideFileOptions(), 0);
193-
}}
194-
onBlur={this.onBlurComponent}
195-
onFocus={this.onFocusComponent}
196-
className="sidebar__file-item-option"
197-
>
198-
Add File
199-
</button>
200-
</li>
201-
);
202-
}
203-
})()}
204-
{(() => { // eslint-disable-line
205-
if (this.props.fileType === 'folder') {
206-
return (
207-
<li>
208-
<button
209-
aria-label="add folder"
210-
onClick={() => {
211-
this.props.newFolder(this.props.id);
212-
setTimeout(() => this.hideFileOptions(), 0);
213-
}}
214-
onBlur={this.onBlurComponent}
215-
onFocus={this.onFocusComponent}
216-
className="sidebar__file-item-option"
217-
>
218-
Add Folder
219-
</button>
220-
</li>
188+
<React.Fragment>
189+
<li>
190+
<button
191+
aria-label="add folder"
192+
onClick={() => {
193+
this.props.newFolder(this.props.id);
194+
setTimeout(this.hideFileOptions, 0);
195+
}}
196+
onBlur={this.onBlurComponent}
197+
onFocus={this.onFocusComponent}
198+
className="sidebar__file-item-option"
199+
>
200+
Create folder
201+
</button>
202+
</li>
203+
<li>
204+
<button
205+
aria-label="add file"
206+
onClick={() => {
207+
this.props.newFile(this.props.id);
208+
setTimeout(this.hideFileOptions, 0);
209+
}}
210+
onBlur={this.onBlurComponent}
211+
onFocus={this.onFocusComponent}
212+
className="sidebar__file-item-option"
213+
>
214+
Create file
215+
</button>
216+
</li>
217+
<li>
218+
<button
219+
aria-label="upload file"
220+
onClick={() => {
221+
this.props.openUploadFileModal(this.props.id);
222+
setTimeout(this.hideFileOptions, 0);
223+
}}
224+
onBlur={this.onBlurComponent}
225+
onFocus={this.onFocusComponent}
226+
>
227+
Upload file
228+
</button>
229+
</li>
230+
231+
</React.Fragment>
221232
);
222233
}
223234
})()}
@@ -288,7 +299,8 @@ FileNode.propTypes = {
288299
newFolder: PropTypes.func.isRequired,
289300
showFolderChildren: PropTypes.func.isRequired,
290301
hideFolderChildren: PropTypes.func.isRequired,
291-
canEdit: PropTypes.bool.isRequired
302+
canEdit: PropTypes.bool.isRequired,
303+
openUploadFileModal: PropTypes.func.isRequired
292304
};
293305

294306
FileNode.defaultProps = {

‎client/modules/IDE/components/NewFileForm.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ class NewFileForm extends React.Component {
2929
id="name"
3030
type="text"
3131
placeholder="Name"
32+
maxLength="128"
3233
{...domOnlyProps(name)}
3334
ref={(element) => { this.fileName = element; }}
3435
/>

‎client/modules/IDE/components/NewFolderForm.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ class NewFolderForm extends React.Component {
2929
className="new-folder-form__name-input"
3030
id="name"
3131
type="text"
32+
maxLength="128"
3233
placeholder="Name"
3334
ref={(element) => { this.fileName = element; }}
3435
{...domOnlyProps(name)}

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

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -44,13 +44,9 @@ class Searchbar extends React.Component {
4444
const { searchValue } = this.state;
4545
return (
4646
<div className={`searchbar ${searchValue === '' ? 'searchbar--is-empty' : ''}`}>
47-
<button
48-
type="submit"
49-
className="searchbar__button"
50-
onClick={this.handleSearchEnter}
51-
>
47+
<div className="searchbar__button">
5248
<InlineSVG className="searchbar__icon" src={searchIcon} />
53-
</button>
49+
</div>
5450
<input
5551
className="searchbar__input"
5652
type="text"

‎client/modules/IDE/components/SketchList.jsx

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ class SketchListRowBase extends React.Component {
3232
renameValue: props.sketch.name,
3333
isFocused: false,
3434
};
35+
this.renameInput = React.createRef();
3536
}
3637

3738
onFocusComponent = () => {
@@ -69,8 +70,9 @@ class SketchListRowBase extends React.Component {
6970

7071
openRename = () => {
7172
this.setState({
72-
renameOpen: true
73-
});
73+
renameOpen: true,
74+
renameValue: this.props.sketch.name
75+
}, () => this.renameInput.current.focus());
7476
}
7577

7678
closeRename = () => {
@@ -94,15 +96,27 @@ class SketchListRowBase extends React.Component {
9496

9597
handleRenameEnter = (e) => {
9698
if (e.key === 'Enter') {
97-
// TODO pass this func
98-
this.props.changeProjectName(this.props.sketch.id, this.state.renameValue);
99+
this.updateName();
99100
this.closeAll();
100101
}
101102
}
102103

104+
handleRenameBlur = () => {
105+
this.updateName();
106+
this.closeAll();
107+
}
108+
109+
updateName = () => {
110+
const isValid = this.state.renameValue.trim().length !== 0;
111+
if (isValid) {
112+
this.props.changeProjectName(this.props.sketch.id, this.state.renameValue.trim());
113+
}
114+
}
115+
103116
resetSketchName = () => {
104117
this.setState({
105-
renameValue: this.props.sketch.name
118+
renameValue: this.props.sketch.name,
119+
renameOpen: false
106120
});
107121
}
108122

@@ -255,8 +269,9 @@ class SketchListRowBase extends React.Component {
255269
value={renameValue}
256270
onChange={this.handleRenameChange}
257271
onKeyUp={this.handleRenameEnter}
258-
onBlur={this.resetSketchName}
272+
onBlur={this.handleRenameBlur}
259273
onClick={e => e.stopPropagation()}
274+
ref={this.renameInput}
260275
/>
261276
}
262277
</React.Fragment>
@@ -297,7 +312,7 @@ SketchListRowBase.propTypes = {
297312
cloneProject: PropTypes.func.isRequired,
298313
exportProjectAsZip: PropTypes.func.isRequired,
299314
changeProjectName: PropTypes.func.isRequired,
300-
onAddToCollection: PropTypes.func.isRequired,
315+
onAddToCollection: PropTypes.func.isRequired
301316
};
302317

303318
function mapDispatchToPropsSketchListRow(dispatch) {

‎client/modules/IDE/components/Toolbar.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ class Toolbar extends React.Component {
3232
}
3333

3434
validateProjectName() {
35-
if (this.props.project.name === '') {
35+
if ((this.props.project.name.trim()).length === 0) {
3636
this.props.setProjectName(this.originalProjectName);
3737
}
3838
}

0 commit comments

Comments
 (0)