terriajs
Version:
Geospatial data visualization platform.
60 lines (51 loc) • 2.04 kB
JSX
import ObserveModelMixin from '../ObserveModelMixin';
import React from 'react';
import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';
import SearchResult from './SearchResult.jsx';
import classNames from 'classnames';
import Icon from "../Icon.jsx";
import Styles from './sidebar-dataset-search-results.scss';
const SideBarDatasetSearchResults = createReactClass({
displayName: 'SideBarDatasetSearchResults',
mixins: [ObserveModelMixin],
propTypes: {
viewState: PropTypes.object.isRequired,
terria: PropTypes.object.isRequired,
theme: PropTypes.string
},
getDefaultProps() {
return {
theme: "dark"
};
},
getInitialState() {
return {
isOpen: true
};
},
searchInDataCatalog() {
this.props.viewState.searchInCatalog(this.props.viewState.searchState.locationSearchText);
},
toggleGroup() {
this.setState({
isOpen: !this.state.isOpen
});
},
render() {
return (<div key='data'
className={classNames(Styles.providerResult, {[Styles.isOpen]: this.state.isOpen, [Styles.dark]: this.props.theme === 'dark', [Styles.light]: this.props.theme === 'light'})}>
<button onClick={this.toggleGroup} className={Styles.heading}>
<span>Data</span>
<Icon glyph={this.state.isOpen ? Icon.GLYPHS.opened : Icon.GLYPHS.closed}/>
</button>
<ul className={Styles.items}>
<SearchResult clickAction={this.searchInDataCatalog}
icon='data'
name={`Search for "${this.props.viewState.searchState.locationSearchText}" in the Data Catalogue`}
/>
</ul>
</div>);
},
});
module.exports = SideBarDatasetSearchResults;