diff --git a/src/common/MetaItem/MetaItem.js b/src/common/MetaItem/MetaItem.js
index 6c31e77ce..f09650796 100644
--- a/src/common/MetaItem/MetaItem.js
+++ b/src/common/MetaItem/MetaItem.js
@@ -44,6 +44,12 @@ class MetaItem extends Component {
}
}
+ menuOptionOnSelect = (event) => {
+ if (typeof this.props.menuOptionOnSelect === 'function') {
+ this.props.menuOptionOnSelect(event);
+ }
+ }
+
renderProgress() {
if (this.props.progress <= 0) {
return null;
@@ -83,7 +89,7 @@ class MetaItem extends Component {
{this.props.title}
{
- this.props.menu.length > 0 ?
+ this.props.menuOptions.length > 0 ?
- {this.props.menu.map(({ label, onSelect }) => (
-
+ {this.props.menuOptions.map(({ label, type }) => (
+
))}
@@ -129,6 +135,7 @@ MetaItem.propTypes = {
className: PropTypes.string,
popupClassName: PropTypes.string,
onClick: PropTypes.func,
+ menuOptionOnSelect: PropTypes.func,
id: PropTypes.string.isRequired,
type: PropTypes.string.isRequired,
relativeSize: PropTypes.oneOf(['auto', 'height']).isRequired,
@@ -138,9 +145,9 @@ MetaItem.propTypes = {
subtitle: PropTypes.string.isRequired,
progress: PropTypes.number.isRequired,
released: PropTypes.instanceOf(Date).isRequired,
- menu: PropTypes.arrayOf(PropTypes.shape({
+ menuOptions: PropTypes.arrayOf(PropTypes.shape({
label: PropTypes.string.isRequired,
- onSelect: PropTypes.func.isRequired
+ type: PropTypes.string.isRequired
})).isRequired
};
MetaItem.defaultProps = {
@@ -151,7 +158,7 @@ MetaItem.defaultProps = {
subtitle: '',
progress: 0,
released: new Date(NaN),
- menu: Object.freeze([])
+ menuOptions: Object.freeze([])
};
export default MetaItem;
diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js
index a10121189..1354f222d 100644
--- a/src/routes/Board/Board.js
+++ b/src/routes/Board/Board.js
@@ -20,21 +20,11 @@ class Board extends PureComponent {
this.cwMenu = [
{
label: 'Play',
- onSelect: (event) => {
- console.log('Play', {
- defaultPrevented: event.isDefaultPrevented(),
- propagationStopped: event.isPropagationStopped()
- });
- }
+ type: 'play'
},
{
label: 'Dismiss',
- onSelect: (event) => {
- console.log('Dismiss', {
- defaultPrevented: event.isDefaultPrevented(),
- propagationStopped: event.isPropagationStopped()
- });
- }
+ type: 'dismiss'
}
];
}
@@ -47,6 +37,15 @@ class Board extends PureComponent {
});
}
+ menuOptionOnSelect = (event) => {
+ console.log('menuOptionOnSelect', {
+ id: event.currentTarget.dataset.metaItemId,
+ type: event.currentTarget.dataset.menuOptionType,
+ defaultPrevented: event.isDefaultPrevented(),
+ propagationStopped: event.isPropagationStopped()
+ });
+ }
+
render() {
return (
@@ -57,8 +56,9 @@ class Board extends PureComponent {
className={styles['meta-item']}
popupClassName={styles['meta-item-popup-container']}
relativeSize={'height'}
- menu={this.cwMenu}
+ menuOptions={this.cwMenu}
onClick={this.onClick}
+ menuOptionOnSelect={this.menuOptionOnSelect}
{...props}
/>
))}