diff --git a/src/components/CategoriesListPanel.jsx b/src/components/CategoriesListPanel.jsx
new file mode 100644
index 0000000..64f88e6
--- /dev/null
+++ b/src/components/CategoriesListPanel.jsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import Checkbox from './presentational/Checkbox'
+import copy from '../js/data/copy.json'
+
+export default (props) => {
+ function onClickCheckbox (obj, type) {
+ obj.active = !obj.active
+ props.onCategoryFilter(obj)
+ }
+
+ function renderCategoryTree () {
+ return (
+
+
{copy[props.language].toolbar.categories}
+ {props.categories.map(cat => {
+ return (
+ onClickCheckbox(cat, 'category')}
+ />
+ )
+ })}
+
+ )
+ }
+
+ return (
+
+
{copy[props.language].toolbar.explore_by_category__title}
+
{copy[props.language].toolbar.explore_by_category__description}
+ {renderCategoryTree()}
+
+ )
+}
diff --git a/src/components/TagListPanel.jsx b/src/components/TagListPanel.jsx
index c153a7b..1d88b73 100644
--- a/src/components/TagListPanel.jsx
+++ b/src/components/TagListPanel.jsx
@@ -22,8 +22,7 @@ class TagListPanel extends React.Component {
onClickCheckbox (obj, type) {
obj.active = !obj.active
- if (type === 'category') this.props.onCategoryFilter(obj)
- if (type === 'tag') this.props.onTagFilter(obj)
+ this.props.onTagFilter(obj)
}
createNodeComponent (node, depth) {
@@ -70,34 +69,11 @@ class TagListPanel extends React.Component {
)
}
- renderCategoryTree () {
- return (
-
-
{copy[this.props.language].toolbar.categories}
- {this.props.categories.map(cat => {
- return (
- this.onClickCheckbox(cat, 'category')}
- />
- )
- })
- }
-
- )
- }
-
render () {
return (
{copy[this.props.language].toolbar.explore_by_tag__title}
{copy[this.props.language].toolbar.explore_by_tag__description}
- {this.renderCategoryTree()}
{this.renderTree()}
)
diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx
index 52aa54c..c072634 100644
--- a/src/components/Toolbar.jsx
+++ b/src/components/Toolbar.jsx
@@ -7,6 +7,7 @@ import * as selectors from '../selectors'
import { Tabs, TabPanel } from 'react-tabs'
import Search from './Search.jsx'
import TagListPanel from './TagListPanel.jsx'
+import CategoriesListPanel from './CategoriesListPanel.jsx'
import ToolbarBottomActions from './ToolbarBottomActions.jsx'
import copy from '../js/data/copy.json'
import { trimAndEllipse } from '../js/utilities.js'
@@ -71,6 +72,21 @@ class Toolbar extends React.Component {
)
}
+ renderToolbarCategoriesPanel () {
+ if (process.env.features.CATEGORIES_AS_TAGS) {
+ return (
+
+
+
+ )
+ }
+ }
+
renderToolbarTagPanel () {
if (process.env.features.USE_TAGS &&
this.props.tags.children) {
@@ -78,17 +94,14 @@ class Toolbar extends React.Component {
)
}
- return ''
+ return null
}
renderToolbarTab (_selected, label, iconKey) {
@@ -110,6 +123,7 @@ class Toolbar extends React.Component {
{this.renderClosePanel()}
{this.renderToolbarNarrativePanel()}
+ {this.renderToolbarCategoriesPanel()}
{this.renderToolbarTagPanel()}}
@@ -130,7 +144,7 @@ class Toolbar extends React.Component {
)
})
}
- return ''
+ return null
}
renderToolbarTabs () {
@@ -138,14 +152,17 @@ class Toolbar extends React.Component {
if (process.env.title) title = process.env.title
const narrativesLabel = copy[this.props.language].toolbar.narratives_label
const tagsLabel = copy[this.props.language].toolbar.tags_label
+ const categoriesLabel = 'Categories' // TODO:
const isTags = this.props.tags && this.props.tags.children
+ const isCategories = true
return (
{this.renderToolbarTab(0, narrativesLabel, 'timeline')}
- {(isTags) ? this.renderToolbarTab(1, tagsLabel, 'style') : ''}
+ {(isCategories) ? this.renderToolbarTab(1, categoriesLabel, 'category') : null}
+ {(isTags) ? this.renderToolbarTab(2, tagsLabel, 'filter_list') : null}