Remove addMode code
This commit is contained in:
parent
9ac0cc1482
commit
b6e60185f7
3 changed files with 4 additions and 57 deletions
|
@ -91,7 +91,7 @@ class CollectionList extends React.Component {
|
||||||
const username = this.props.username !== undefined ? this.props.username : this.props.user.username;
|
const username = this.props.username !== undefined ? this.props.username : this.props.user.username;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`sketches-table-container ${this.props.addMode ? 'sketches-table-container--fixed' : ''}`}>
|
<div className="sketches-table-container">
|
||||||
<Helmet>
|
<Helmet>
|
||||||
<title>{this.getTitle()}</title>
|
<title>{this.getTitle()}</title>
|
||||||
</Helmet>
|
</Helmet>
|
||||||
|
@ -116,7 +116,6 @@ class CollectionList extends React.Component {
|
||||||
collection={collection}
|
collection={collection}
|
||||||
user={this.props.user}
|
user={this.props.user}
|
||||||
username={username}
|
username={username}
|
||||||
addMode={this.props.addMode}
|
|
||||||
project={this.props.project}
|
project={this.props.project}
|
||||||
/>))}
|
/>))}
|
||||||
</tbody>
|
</tbody>
|
||||||
|
@ -143,7 +142,6 @@ const ItemsShape = PropTypes.shape({
|
||||||
});
|
});
|
||||||
|
|
||||||
CollectionList.propTypes = {
|
CollectionList.propTypes = {
|
||||||
addMode: PropTypes.bool,
|
|
||||||
user: PropTypes.shape({
|
user: PropTypes.shape({
|
||||||
username: PropTypes.string,
|
username: PropTypes.string,
|
||||||
authenticated: PropTypes.bool.isRequired
|
authenticated: PropTypes.bool.isRequired
|
||||||
|
@ -176,7 +174,6 @@ CollectionList.propTypes = {
|
||||||
};
|
};
|
||||||
|
|
||||||
CollectionList.defaultProps = {
|
CollectionList.defaultProps = {
|
||||||
addMode: false,
|
|
||||||
project: {
|
project: {
|
||||||
id: undefined,
|
id: undefined,
|
||||||
owner: undefined
|
owner: undefined
|
||||||
|
|
|
@ -81,38 +81,10 @@ class CollectionListRowBase extends React.Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
handleCollectionAdd = () => {
|
|
||||||
this.props.addToCollection(this.props.collection.id, this.props.project.id);
|
|
||||||
}
|
|
||||||
|
|
||||||
handleCollectionRemove = () => {
|
|
||||||
this.props.removeFromCollection(this.props.collection.id, this.props.project.id);
|
|
||||||
}
|
|
||||||
|
|
||||||
handleAddRemove = (evt) => {
|
|
||||||
// Clicking on View action should not perform add/remove
|
|
||||||
const didOriginateInLink = evt.target.nodeName === 'A';
|
|
||||||
|
|
||||||
if (didOriginateInLink) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (CollectionListRowBase.projectInCollection(this.props.project, this.props.collection)) {
|
|
||||||
this.handleCollectionRemove();
|
|
||||||
} else {
|
|
||||||
this.handleCollectionAdd();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
renderActions = () => {
|
renderActions = () => {
|
||||||
const { optionsOpen } = this.state;
|
const { optionsOpen } = this.state;
|
||||||
const userIsOwner = this.props.user.username === this.props.username;
|
const userIsOwner = this.props.user.username === this.props.username;
|
||||||
|
|
||||||
if (this.props.addMode === true && this.props.project) {
|
|
||||||
return <Link to={`/${this.props.collection.owner.username}/collections/${this.props.collection.id}`}>View</Link>;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<button
|
<button
|
||||||
|
@ -144,22 +116,10 @@ class CollectionListRowBase extends React.Component {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
renderIsInCollectionStatus = () => {
|
|
||||||
if (CollectionListRowBase.projectInCollection(this.props.project, this.props.collection)) {
|
|
||||||
return checkIcon;
|
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
renderCollectionName = () => {
|
renderCollectionName = () => {
|
||||||
const { addMode, collection, username } = this.props;
|
const { collection, username } = this.props;
|
||||||
const { renameOpen, renameValue } = this.state;
|
const { renameOpen, renameValue } = this.state;
|
||||||
|
|
||||||
if (addMode) {
|
|
||||||
return collection.name;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<Link to={{ pathname: `/${username}/collections/${collection.id}`, state: { skipSavingPath: true } }}>
|
<Link to={{ pathname: `/${username}/collections/${collection.id}`, state: { skipSavingPath: true } }}>
|
||||||
|
@ -180,17 +140,15 @@ class CollectionListRowBase extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { addMode, collection } = this.props;
|
const { collection } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<tr
|
<tr
|
||||||
className={`sketches-table__row ${addMode ? 'sketches-table__row--is-add-mode' : ''}`}
|
className="sketches-table__row"
|
||||||
key={collection.id}
|
key={collection.id}
|
||||||
onClick={addMode ? this.handleAddRemove : null}
|
|
||||||
>
|
>
|
||||||
<th scope="row">
|
<th scope="row">
|
||||||
<span className="sketches-table__name">
|
<span className="sketches-table__name">
|
||||||
{addMode && this.renderIsInCollectionStatus()}
|
|
||||||
{this.renderCollectionName()}
|
{this.renderCollectionName()}
|
||||||
</span>
|
</span>
|
||||||
</th>
|
</th>
|
||||||
|
@ -206,8 +164,6 @@ class CollectionListRowBase extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
CollectionListRowBase.propTypes = {
|
CollectionListRowBase.propTypes = {
|
||||||
addToCollection: PropTypes.func.isRequired,
|
|
||||||
removeFromCollection: PropTypes.func.isRequired,
|
|
||||||
collection: PropTypes.shape({
|
collection: PropTypes.shape({
|
||||||
id: PropTypes.string.isRequired,
|
id: PropTypes.string.isRequired,
|
||||||
name: PropTypes.string.isRequired,
|
name: PropTypes.string.isRequired,
|
||||||
|
@ -215,7 +171,6 @@ CollectionListRowBase.propTypes = {
|
||||||
username: PropTypes.string.isRequired,
|
username: PropTypes.string.isRequired,
|
||||||
}).isRequired,
|
}).isRequired,
|
||||||
}).isRequired,
|
}).isRequired,
|
||||||
addMode: PropTypes.bool.isRequired,
|
|
||||||
project: PropTypes.shape({
|
project: PropTypes.shape({
|
||||||
id: PropTypes.string.isRequired,
|
id: PropTypes.string.isRequired,
|
||||||
}).isRequired,
|
}).isRequired,
|
||||||
|
|
|
@ -4,11 +4,6 @@
|
||||||
min-height: #{400 / $base-font-size}rem;
|
min-height: #{400 / $base-font-size}rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sketches-table-container--fixed {
|
|
||||||
width: #{1000 / $base-font-size}rem;
|
|
||||||
padding: #{24 / $base-font-size}rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sketches-table {
|
.sketches-table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue