Entire SketchList row adds/removes sketch to collection
This commit is contained in:
parent
f928665737
commit
126bdcab72
1 changed files with 56 additions and 27 deletions
|
@ -16,12 +16,16 @@ import * as SortingActions from '../actions/sorting';
|
||||||
import * as IdeActions from '../actions/ide';
|
import * as IdeActions from '../actions/ide';
|
||||||
import getSortedSketches from '../selectors/projects';
|
import getSortedSketches from '../selectors/projects';
|
||||||
import Loader from '../../App/components/loader';
|
import Loader from '../../App/components/loader';
|
||||||
import AddRemoveButton from '../../../components/AddRemoveButton';
|
|
||||||
import CollectionPopover from './CollectionPopover';
|
import CollectionPopover from './CollectionPopover';
|
||||||
|
|
||||||
const arrowUp = require('../../../images/sort-arrow-up.svg');
|
const arrowUp = require('../../../images/sort-arrow-up.svg');
|
||||||
const arrowDown = require('../../../images/sort-arrow-down.svg');
|
const arrowDown = require('../../../images/sort-arrow-down.svg');
|
||||||
const downFilledTriangle = require('../../../images/down-filled-triangle.svg');
|
const downFilledTriangle = require('../../../images/down-filled-triangle.svg');
|
||||||
|
const check = require('../../../images/check.svg');
|
||||||
|
|
||||||
|
const checkIcon = (
|
||||||
|
<InlineSVG className="sketch-list__check-icon" src={check} alt="In collection" />
|
||||||
|
);
|
||||||
|
|
||||||
class SketchListRowBase extends React.Component {
|
class SketchListRowBase extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
|
@ -150,6 +154,25 @@ class SketchListRowBase extends React.Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
handleRowClick = () => {
|
||||||
|
if (!this.props.addMode) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.props.inCollection) {
|
||||||
|
this.props.onCollectionRemove();
|
||||||
|
} else {
|
||||||
|
this.props.onCollectionAdd();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
renderViewButton = sketchURL => (
|
||||||
|
<td className="sketch-list__dropdown-column">{
|
||||||
|
<Link to={sketchURL}>View</Link>
|
||||||
|
}
|
||||||
|
</td>
|
||||||
|
)
|
||||||
|
|
||||||
renderDropdown = () => {
|
renderDropdown = () => {
|
||||||
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;
|
||||||
|
@ -238,31 +261,25 @@ class SketchListRowBase extends React.Component {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
renderAddRemoveButtons = () => (
|
renderActions = sketchURL => (this.props.addMode === true ? this.renderViewButton(sketchURL) : this.renderDropdown())
|
||||||
<td className="sketch-list__dropdown-column">{
|
|
||||||
this.props.inCollection ?
|
|
||||||
<AddRemoveButton type="remove" onClick={this.props.onCollectionRemove} /> :
|
|
||||||
<AddRemoveButton type="add" onClick={this.props.onCollectionAdd} />
|
|
||||||
}
|
|
||||||
</td>
|
|
||||||
)
|
|
||||||
|
|
||||||
renderActions = () => (this.props.addMode === true ? this.renderAddRemoveButtons() : this.renderDropdown())
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { sketch, username } = this.props;
|
const {
|
||||||
|
sketch,
|
||||||
|
username,
|
||||||
|
addMode,
|
||||||
|
inCollection,
|
||||||
|
} = this.props;
|
||||||
const { renameOpen, renameValue } = this.state;
|
const { renameOpen, renameValue } = this.state;
|
||||||
let url = `/${username}/sketches/${sketch.id}`;
|
let url = `/${username}/sketches/${sketch.id}`;
|
||||||
if (username === 'p5') {
|
if (username === 'p5') {
|
||||||
url = `/${username}/sketches/${slugify(sketch.name, '_')}`;
|
url = `/${username}/sketches/${slugify(sketch.name, '_')}`;
|
||||||
}
|
}
|
||||||
return (
|
|
||||||
|
const name = addMode ?
|
||||||
|
<span className="sketches-table__name">{inCollection ? checkIcon : null} {sketch.name}</span>
|
||||||
|
: (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<tr
|
|
||||||
className="sketches-table__row"
|
|
||||||
key={sketch.id}
|
|
||||||
>
|
|
||||||
<th scope="row">
|
|
||||||
<Link to={url}>
|
<Link to={url}>
|
||||||
{renameOpen ? '' : sketch.name}
|
{renameOpen ? '' : sketch.name}
|
||||||
</Link>
|
</Link>
|
||||||
|
@ -276,10 +293,22 @@ class SketchListRowBase extends React.Component {
|
||||||
onClick={e => e.stopPropagation()}
|
onClick={e => e.stopPropagation()}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
|
</React.Fragment>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<React.Fragment>
|
||||||
|
<tr
|
||||||
|
className={`sketches-table__row ${addMode ? 'sketches-table__row--is-add-mode' : ''}`}
|
||||||
|
key={sketch.id}
|
||||||
|
onClick={this.handleRowClick}
|
||||||
|
>
|
||||||
|
<th scope="row">
|
||||||
|
{name}
|
||||||
</th>
|
</th>
|
||||||
<td>{format(new Date(sketch.createdAt), 'MMM D, YYYY h:mm A')}</td>
|
<td>{format(new Date(sketch.createdAt), 'MMM D, YYYY h:mm A')}</td>
|
||||||
<td>{format(new Date(sketch.updatedAt), 'MMM D, YYYY h:mm A')}</td>
|
<td>{format(new Date(sketch.updatedAt), 'MMM D, YYYY h:mm A')}</td>
|
||||||
{this.renderActions()}
|
{this.renderActions(url)}
|
||||||
</tr>
|
</tr>
|
||||||
</React.Fragment>);
|
</React.Fragment>);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue