54 lines
1.6 KiB
JavaScript
54 lines
1.6 KiB
JavaScript
import PropTypes from 'prop-types';
|
|
import React from 'react';
|
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
|
import { NavLink } from 'react-router-dom';
|
|
import { searchCollections } from 'Actions/collections';
|
|
import { getCollectionUrl } from 'Lib/urlHelper';
|
|
import { Icon } from 'netlify-cms-ui-default';
|
|
|
|
export default class Collection extends React.Component {
|
|
|
|
static propTypes = {
|
|
collections: ImmutablePropTypes.orderedMap.isRequired,
|
|
};
|
|
|
|
state = { query: this.props.searchTerm || '' };
|
|
|
|
renderLink = collection => {
|
|
const collectionName = collection.get('name');
|
|
return (
|
|
<NavLink
|
|
key={collectionName}
|
|
to={`/collections/${collectionName}`}
|
|
className="nc-collectionPage-sidebarLink"
|
|
activeClassName="nc-collectionPage-sidebarLink-active"
|
|
>
|
|
<Icon type="write"/>
|
|
{collection.get('label')}
|
|
</NavLink>
|
|
);
|
|
};
|
|
|
|
|
|
render() {
|
|
const { collections } = this.props;
|
|
const { query } = this.state;
|
|
|
|
return (
|
|
<div className="nc-collectionPage-sidebar">
|
|
<h1 className="nc-collectionPage-sidebarHeading">Collections</h1>
|
|
<div className="nc-collectionPage-sidebarSearch">
|
|
<Icon type="search" size="small"/>
|
|
<input
|
|
onChange={e => this.setState({ query: e.target.value })}
|
|
onKeyDown={e => e.key === 'Enter' && searchCollections(query)}
|
|
placeholder="Search all"
|
|
value={query}
|
|
/>
|
|
</div>
|
|
{collections.toList().map(this.renderLink)}
|
|
</div>
|
|
);
|
|
}
|
|
}
|