Display Add Sketches Overlay from Collection List

This commit is contained in:
Andrew Nicolaou 2019-12-11 15:50:51 +01:00
parent a2da26da69
commit 4d0aa23bb8
2 changed files with 47 additions and 4 deletions

View file

@ -5,6 +5,7 @@ import InlineSVG from 'react-inlinesvg';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import classNames from 'classnames';
import find from 'lodash/find';
import * as ProjectActions from '../../actions/project';
import * as ProjectsActions from '../../actions/projects';
import * as CollectionsActions from '../../actions/collections';
@ -12,6 +13,10 @@ import * as ToastActions from '../../actions/toast';
import * as SortingActions from '../../actions/sorting';
import getSortedCollections from '../../selectors/collections';
import Loader from '../../../App/components/loader';
import Overlay from '../../../App/components/Overlay';
import AddToCollectionSketchList from '../AddToCollectionSketchList';
import { SketchSearchbar } from '../Searchbar';
import CollectionListRow from './CollectionListRow';
const arrowUp = require('../../../../images/sort-arrow-up.svg');
@ -27,14 +32,14 @@ class CollectionList extends React.Component {
this.props.getCollections(this.props.username);
this.props.resetSorting();
this._renderFieldHeader = this._renderFieldHeader.bind(this);
this.state = {
hasLoadedData: false,
addingSketchesToCollectionId: null,
};
}
componentDidUpdate(prevProps) {
componentDidUpdate(prevProps, prevState) {
if (prevProps.loading === true && this.props.loading === false) {
// eslint-disable-next-line react/no-did-update-set-state
this.setState({
@ -50,6 +55,19 @@ class CollectionList extends React.Component {
return `p5.js Web Editor | ${this.props.username}'s collections`;
}
showAddSketches = (collectionId) => {
this.setState({
addingSketchesToCollectionId: collectionId,
});
}
hideAddSketches = () => {
console.log('hideAddSketches');
this.setState({
addingSketchesToCollectionId: null,
});
}
hasCollections() {
return (!this.props.loading || this.state.hasLoadedData) && this.props.collections.length > 0;
}
@ -66,7 +84,7 @@ class CollectionList extends React.Component {
return null;
}
_renderFieldHeader(fieldName, displayName) {
_renderFieldHeader = (fieldName, displayName) => {
const { field, direction } = this.props.sorting;
const headerClass = classNames({
'sketches-table__header': true,
@ -117,9 +135,19 @@ class CollectionList extends React.Component {
user={this.props.user}
username={username}
project={this.props.project}
onAddSketches={() => this.showAddSketches(collection.id)}
/>))}
</tbody>
</table>}
{
this.state.addingSketchesToCollectionId && (
<Overlay title="Add sketches" actions={<SketchSearchbar />} closeOverlay={this.hideAddSketches} isFixedHeight>
<div className="collection-add-sketch">
<AddToCollectionSketchList username={this.props.username} collection={find(this.props.collections, { id: this.state.addingSketchesToCollectionId })} />
</div>
</Overlay>
)
}
</div>
);
}

View file

@ -67,6 +67,11 @@ class CollectionListRowBase extends React.Component {
});
}
handleAddSketches = () => {
this.closeAll();
this.props.onAddSketches();
}
handleDropdownOpen = () => {
this.closeAll();
this.openOptions();
@ -105,7 +110,6 @@ class CollectionListRowBase extends React.Component {
});
}
renderActions = () => {
const { optionsOpen } = this.state;
const userIsOwner = this.props.user.username === this.props.username;
@ -124,6 +128,16 @@ class CollectionListRowBase extends React.Component {
<ul
className="sketch-list__action-dialogue"
>
<li>
<button
className="sketch-list__action-option"
onClick={this.handleAddSketches}
onBlur={this.onBlurComponent}
onFocus={this.onFocusComponent}
>
Add sketches
</button>
</li>
{userIsOwner &&
<li>
<button
@ -217,6 +231,7 @@ CollectionListRowBase.propTypes = {
}).isRequired,
deleteCollection: PropTypes.func.isRequired,
editCollection: PropTypes.func.isRequired,
onAddSketches: PropTypes.func.isRequired,
};
function mapDispatchToPropsSketchListRow(dispatch) {