UNPKG

terriajs

Version:

Geospatial data visualization platform.

60 lines (51 loc) 2.04 kB
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;