diff --git a/src/components/library/library.jsx b/src/components/library/library.jsx
index 9d63fc3bfad63cab11cf3f8df27bec40d7f9c13e..9ff4ead42b382166655a48335ced57026dee7ee3 100644
--- a/src/components/library/library.jsx
+++ b/src/components/library/library.jsx
@@ -13,17 +13,22 @@ import analytics from '../../lib/analytics';
import styles from './library.css';
-const ALL_TAG_TITLE = 'All';
-const tagListPrefix = [{title: ALL_TAG_TITLE}];
-
const messages = defineMessages({
filterPlaceholder: {
id: 'gui.library.filterPlaceholder',
defaultMessage: 'Search',
description: 'Placeholder text for library search field'
+ },
+ allTag: {
+ id: 'gui.library.allTag',
+ defaultMessage: 'All',
+ description: 'Label for library tag to revert to all items after filtering by tag.'
}
});
+const ALL_TAG = {tag: 'all', intlLabel: messages.allTag};
+const tagListPrefix = [ALL_TAG];
+
class LibraryComponent extends React.Component {
constructor (props) {
super(props);
@@ -42,7 +47,7 @@ class LibraryComponent extends React.Component {
this.state = {
selectedItem: null,
filterQuery: '',
- selectedTag: ALL_TAG_TITLE.toLowerCase()
+ selectedTag: ALL_TAG.tag
};
}
componentDidUpdate (prevProps, prevState) {
@@ -80,7 +85,7 @@ class LibraryComponent extends React.Component {
handleFilterChange (event) {
this.setState({
filterQuery: event.target.value,
- selectedTag: ALL_TAG_TITLE.toLowerCase()
+ selectedTag: ALL_TAG.tag
});
}
handleFilterClear () {
@@ -141,7 +146,7 @@ class LibraryComponent extends React.Component {
<div className={styles.tagWrapper}>
{tagListPrefix.concat(this.props.tags).map((tagProps, id) => (
<TagButton
- active={this.state.selectedTag === tagProps.title.toLowerCase()}
+ active={this.state.selectedTag === tagProps.tag.toLowerCase()}
className={classNames(
styles.filterBarItem,
styles.tagButton,
diff --git a/src/components/tag-button/tag-button.jsx b/src/components/tag-button/tag-button.jsx
index 5e1318f90d993ea74d3ac59faf5719a522fe7ef6..e36a2ed19867de20a09cd6d98580b43b876b13c0 100644
--- a/src/components/tag-button/tag-button.jsx
+++ b/src/components/tag-button/tag-button.jsx
@@ -1,6 +1,7 @@
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
+import {FormattedMessage} from 'react-intl';
import Button from '../button/button.jsx';
@@ -10,7 +11,8 @@ const TagButtonComponent = ({
active,
iconClassName,
className,
- title,
+ tag, // eslint-disable-line no-unused-vars
+ intlLabel,
...props
}) => (
<Button
@@ -26,17 +28,19 @@ const TagButtonComponent = ({
)}
{...props}
>
- {title}
+ <FormattedMessage {...intlLabel} />
</Button>
);
TagButtonComponent.propTypes = {
...Button.propTypes,
active: PropTypes.bool,
- title: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.object // FormattedMessage
- ]).isRequired
+ intlLabel: PropTypes.shape({
+ defaultMessage: PropTypes.string,
+ description: PropTypes.string,
+ id: PropTypes.string
+ }).isRequired,
+ tag: PropTypes.string.isRequired
};
TagButtonComponent.defaultProps = {
diff --git a/src/containers/tag-button.jsx b/src/containers/tag-button.jsx
index e5ad61f4080abbaced07fe2c6f7ab45bcca7f086..3e7dd84b1bdb105aab8588cd8b9a9ee85e799a91 100644
--- a/src/containers/tag-button.jsx
+++ b/src/containers/tag-button.jsx
@@ -12,7 +12,7 @@ class TagButton extends React.Component {
]);
}
handleClick () {
- this.props.onClick(this.props.title);
+ this.props.onClick(this.props.tag);
}
render () {
return (
@@ -26,11 +26,7 @@ class TagButton extends React.Component {
TagButton.propTypes = {
...TagButtonComponent.propTypes,
- onClick: PropTypes.func,
- title: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.object
- ]).isRequired
+ onClick: PropTypes.func
};
export default TagButton;
diff --git a/src/lib/libraries/backdrop-tags.js b/src/lib/libraries/backdrop-tags.js
index 7bafa3410aa3afe94692d0e4d495a9f8ecaeb256..77374719d2b20eebde64ea3d6b3dc40296818eb8 100644
--- a/src/lib/libraries/backdrop-tags.js
+++ b/src/lib/libraries/backdrop-tags.js
@@ -1,10 +1,11 @@
+import messages from './tag-messages.js';
export default [
- {title: 'Fantasy'},
- {title: 'Music'},
- {title: 'Sports'},
- {title: 'Outdoors'},
- {title: 'Indoors'},
- {title: 'Space'},
- {title: 'Underwater'},
- {title: 'Patterns'}
+ {tag: 'fantasy', intlLabel: messages.fantasy},
+ {tag: 'music', intlLabel: messages.music},
+ {tag: 'sports', intlLabel: messages.sports},
+ {tag: 'outdoors', intlLabel: messages.outdoors},
+ {tag: 'indoors', intlLabel: messages.indoors},
+ {tag: 'space', intlLabel: messages.space},
+ {tag: 'underwater', intlLabel: messages.underwater},
+ {tag: 'patterns', intlLabel: messages.patterns}
];
diff --git a/src/lib/libraries/sound-tags.js b/src/lib/libraries/sound-tags.js
index 61a37002e6279ff0e24fe9a9208bb4549e9c686b..4cba1d57b34441b9ed7ab3f22575c964bc5356de 100644
--- a/src/lib/libraries/sound-tags.js
+++ b/src/lib/libraries/sound-tags.js
@@ -1,11 +1,12 @@
+import messages from './tag-messages.js';
export default [
- {title: 'Animals'},
- {title: 'Effects'},
- {title: 'Loops'},
- {title: 'Notes'},
- {title: 'Percussion'},
- {title: 'Space'},
- {title: 'Sports'},
- {title: 'Voice'},
- {title: 'Wacky'}
+ {tag: 'animals', intlLabel: messages.animals},
+ {tag: 'effects', intlLabel: messages.effects},
+ {tag: 'loops', intlLabel: messages.loops},
+ {tag: 'notes', intlLabel: messages.notes},
+ {tag: 'percussion', intlLabel: messages.percussion},
+ {tag: 'space', intlLabel: messages.space},
+ {tag: 'sports', intlLabel: messages.sports},
+ {tag: 'voice', intlLabel: messages.voice},
+ {tag: 'wacky', intlLabel: messages.wacky}
];
diff --git a/src/lib/libraries/sprite-tags.js b/src/lib/libraries/sprite-tags.js
index f1fbe3d5647910980f1133dd57aa05569ee05334..8a12e1e41e54fbbee6945361b429435c07b67dad 100644
--- a/src/lib/libraries/sprite-tags.js
+++ b/src/lib/libraries/sprite-tags.js
@@ -1,10 +1,11 @@
+import messages from './tag-messages.js';
export default [
- {title: 'Animals'},
- {title: 'People'},
- {title: 'Fantasy'},
- {title: 'Dance'},
- {title: 'Music'},
- {title: 'Sports'},
- {title: 'Food'},
- {title: 'Fashion'}
+ {tag: 'animals', intlLabel: messages.animals},
+ {tag: 'people', intlLabel: messages.people},
+ {tag: 'fantasy', intlLabel: messages.fantasy},
+ {tag: 'dance', intlLabel: messages.dance},
+ {tag: 'music', intlLabel: messages.music},
+ {tag: 'sports', intlLabel: messages.sports},
+ {tag: 'food', intlLabel: messages.food},
+ {tag: 'fashion', intlLabel: messages.fashion}
];
diff --git a/src/lib/libraries/tag-messages.js b/src/lib/libraries/tag-messages.js
new file mode 100644
index 0000000000000000000000000000000000000000..60a6d13fc504d8745205db7be798c8ffd4f526b3
--- /dev/null
+++ b/src/lib/libraries/tag-messages.js
@@ -0,0 +1,104 @@
+import {defineMessages} from 'react-intl';
+
+export default defineMessages({
+ all: {
+ defaultMessage: 'All',
+ description: 'Tag for filtering a library for everything',
+ id: 'gui.libraryTags.all'
+ },
+ animals: {
+ defaultMessage: 'Animals',
+ description: 'Tag for filtering a library for animals',
+ id: 'gui.libraryTags.animals'
+ },
+ dance: {
+ defaultMessage: 'Dance',
+ description: 'Tag for filtering a library for dance',
+ id: 'gui.libraryTags.dance'
+ },
+ effects: {
+ defaultMessage: 'Effects',
+ description: 'Tag for filtering a library for effects',
+ id: 'gui.libraryTags.effects'
+ },
+ fantasy: {
+ defaultMessage: 'Fantasy',
+ description: 'Tag for filtering a library for fantasy',
+ id: 'gui.libraryTags.fantasy'
+ },
+ fashion: {
+ defaultMessage: 'Fashion',
+ description: 'Tag for filtering a library for fashion',
+ id: 'gui.libraryTags.fashion'
+ },
+ food: {
+ defaultMessage: 'Food',
+ description: 'Tag for filtering a library for food',
+ id: 'gui.libraryTags.food'
+ },
+ indoors: {
+ defaultMessage: 'Indoors',
+ description: 'Tag for filtering a library for indoors',
+ id: 'gui.libraryTags.indoors'
+ },
+ loops: {
+ defaultMessage: 'Loops',
+ description: 'Tag for filtering a library for loops',
+ id: 'gui.libraryTags.loops'
+ },
+ music: {
+ defaultMessage: 'Music',
+ description: 'Tag for filtering a library for music',
+ id: 'gui.libraryTags.music'
+ },
+ notes: {
+ defaultMessage: 'Notes',
+ description: 'Tag for filtering a library for notes',
+ id: 'gui.libraryTags.notes'
+ },
+ outdoors: {
+ defaultMessage: 'Outdoors',
+ description: 'Tag for filtering a library for outdoors',
+ id: 'gui.libraryTags.outdoors'
+ },
+ patterns: {
+ defaultMessage: 'Patterns',
+ description: 'Tag for filtering a library for patterns',
+ id: 'gui.libraryTags.patterns'
+ },
+ people: {
+ defaultMessage: 'People',
+ description: 'Tag for filtering a library for people',
+ id: 'gui.libraryTags.people'
+ },
+ percussion: {
+ defaultMessage: 'Percussion',
+ description: 'Tag for filtering a library for percussion',
+ id: 'gui.libraryTags.percussion'
+ },
+ space: {
+ defaultMessage: 'Space',
+ description: 'Tag for filtering a library for space',
+ id: 'gui.libraryTags.space'
+ },
+ sports: {
+ defaultMessage: 'Sports',
+ description: 'Tag for filtering a library for sports',
+ id: 'gui.libraryTags.sports'
+ },
+ underwater: {
+ defaultMessage: 'Underwater',
+ description: 'Tag for filtering a library for underwater',
+ id: 'gui.libraryTags.underwater'
+ },
+ voice: {
+ defaultMessage: 'Voice',
+ description: 'Tag for filtering a library for voice',
+ id: 'gui.libraryTags.voice'
+ },
+ wacky: {
+ defaultMessage: 'Wacky',
+ description: 'Tag for filtering a library for wacky',
+ id: 'gui.libraryTags.wacky'
+ }
+});