Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | 3x 12x 12x 13x 13x 13x 26x 3x 3x 3x | import React from "react";
import { PropTypes } from "prop-types";
const mediaClasses = ["p-listing-images__image", "js-media-item-holder"];
import { SortableElement } from "react-sortable-hoc";
class MediaItem extends React.Component {
constructor(props) {
super(props);
this.keyboardEvent = this.keyboardEvent.bind(this);
}
keyboardEvent(e) {
if (e.key === "Delete" || e.key === "Backspace") {
this.props.markForDeletion(this.props.url);
}
}
render() {
const classes = mediaClasses.slice(0);
Iif (this.props.overflow) {
classes.push("p-listing-images__image--no-show");
}
return (
<div
className={classes.join(" ")}
tabIndex="0"
onKeyDown={this.keyboardEvent}
ref={(item) => (this.mediaItem = item)}
>
<span
role="button"
className="p-listing-images__delete-image p-market-remove"
onClick={this.props.markForDeletion.bind(this, this.props.url)}
>
<i className="p-icon--delete" />
</span>
<img src={this.props.url} />
</div>
);
}
}
MediaItem.propTypes = {
url: PropTypes.string,
status: PropTypes.string,
overflow: PropTypes.bool,
markForDeletion: PropTypes.func,
};
MediaItem.displayName = "MediaItem";
const SortableMediaItem = SortableElement(MediaItem);
export { SortableMediaItem as default, mediaClasses };
|