@collectionspace/cspace-public-browser 1.5.1

package/src/components/search/result/FilterPanel.jsx

@@ -0,0 +1,143 @@
+/* global window */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, FormattedMessage } from 'react-intl';
+import Immutable from 'immutable';
+import FilterList from './FilterList';
+import config from '../../../config';
+import styles from '../../../../styles/cspace/FilterPanel.css';
+import cssDimensions from '../../../../styles/dimensions.css';
+
+const propTypes = {
+  api: PropTypes.func,
+  isExpanded: PropTypes.bool,
+  isPending: PropTypes.bool,
+  result: PropTypes.instanceOf(Immutable.Map),
+};
+
+const defaultProps = {
+  api: () => undefined,
+  isExpanded: false,
+  isPending: false,
+  result: Immutable.Map(),
+};
+
+const messages = defineMessages({
+  title: {
+    id: 'FilterPanel.title',
+    defaultMessage: 'Refine results:',
+  },
+});
+
+const {
+  filterPanelCutoffWidth: cssFilterPanelCutoffWidth,
+} = cssDimensions;
+
+const filterPanelCutoffWidth = parseInt(cssFilterPanelCutoffWidth, 10);
+
+export default class FilterPanel extends Component {
+  constructor() {
+    super();
+
+    this.handleResize = this.handleResize.bind(this);
+    this.handleScroll = this.handleScroll.bind(this);
+
+    this.ref = React.createRef();
+
+    this.state = {};
+  }
+
+  componentDidMount() {
+    const {
+      api,
+    } = this.props;
+
+    window.addEventListener('resize', this.handleResize);
+    window.addEventListener('scroll', this.handleScroll);
+
+    api({
+      setHeight: this.setHeight.bind(this),
+    });
+
+    this.setHeight();
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.handleResize);
+    window.removeEventListener('scroll', this.handleScroll);
+  }
+
+  handleResize() {
+    this.setHeight();
+  }
+
+  handleScroll() {
+    this.setHeight();
+  }
+
+  setHeight() {
+    const height = window.innerHeight;
+    const rect = this.ref.current.getBoundingClientRect();
+    const maxHeight = height - rect.top;
+
+    this.setState({
+      height: maxHeight,
+    });
+  }
+
+  renderContent() {
+    const {
+      isExpanded,
+      isPending,
+      result,
+    } = this.props;
+
+    const isVisible = (window.innerWidth > filterPanelCutoffWidth) || isExpanded;
+
+    if (!isVisible || !result.get('total')) {
+      return undefined;
+    }
+
+    return (
+      <div>
+        <header>
+          {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+          <FormattedMessage {...messages.title} />
+        </header>
+
+        <FilterList
+          aggregations={result.get('aggregations')}
+          config={config.get('filters')}
+          isPending={isPending}
+        />
+      </div>
+    );
+  }
+
+  render() {
+    const {
+      isExpanded,
+    } = this.props;
+
+    const {
+      height,
+    } = this.state;
+
+    const className = isExpanded ? styles.expanded : styles.collapsed;
+    const inlineStyle = height ? { height } : undefined;
+
+    return (
+      <div
+        className={className}
+        ref={this.ref}
+        style={inlineStyle}
+      >
+        {this.renderContent()}
+      </div>
+    );
+  }
+}
+
+FilterPanel.propTypes = propTypes;
+FilterPanel.defaultProps = defaultProps;

package/src/components/search/result/FilterPanelContainer.js

@@ -0,0 +1,16 @@
+import { connect } from 'react-redux';
+import FilterPanel from './FilterPanel';
+
+import {
+  getSearchResult,
+  isSearchPending,
+} from '../../../reducers';
+
+const mapStateToProps = (state) => ({
+  isPending: isSearchPending(state),
+  result: getSearchResult(state),
+});
+
+export default connect(
+  mapStateToProps,
+)(FilterPanel);

package/src/components/search/result/FilterSearchInput.jsx

@@ -0,0 +1,68 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, injectIntl } from 'react-intl';
+import styles from '../../../../styles/cspace/FilterSearchInput.css';
+
+const propTypes = {
+  intl: PropTypes.shape({
+    formatMessage: PropTypes.func.isRequired,
+  }).isRequired,
+  onCommit: PropTypes.func,
+  value: PropTypes.string,
+};
+
+const defaultProps = {
+  onCommit: () => undefined,
+  value: '',
+};
+
+const messages = defineMessages({
+  label: {
+    id: 'filterSearchInput.label',
+    defaultMessage: 'Search',
+  },
+});
+
+class FilterSearchInput extends Component {
+  constructor() {
+    super();
+
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(event) {
+    const {
+      onCommit,
+    } = this.props;
+
+    onCommit(event.target.value);
+  }
+
+  render() {
+    const {
+      intl,
+      value,
+    } = this.props;
+
+    const label = intl.formatMessage(messages.label);
+
+    return (
+      // eslint-disable-next-line jsx-a11y/label-has-associated-control
+      <label>
+        {label}
+
+        <input
+          className={styles.common}
+          type="search"
+          value={value}
+          onChange={this.handleChange}
+        />
+      </label>
+    );
+  }
+}
+
+FilterSearchInput.propTypes = propTypes;
+FilterSearchInput.defaultProps = defaultProps;
+
+export default injectIntl(FilterSearchInput);

package/src/components/search/result/RemoveSearchParamLink.jsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { Link } from 'react-router-dom';
+import Immutable from 'immutable';
+import get from 'lodash/get';
+import { messages } from '../entry/SearchQueryInput';
+import config from '../../../config';
+import { SEARCH_QUERY_ID } from '../../../constants/ids';
+import { searchParamsToQueryString } from '../../../helpers/urlHelpers';
+import styles from '../../../../styles/cspace/RemoveSearchParamLink.css';
+
+const propTypes = {
+  id: PropTypes.string.isRequired,
+  params: PropTypes.instanceOf(Immutable.Map).isRequired,
+};
+
+const VALUE_DELIMITER = ', ';
+
+const getLabelMessage = (id, filterFieldConfig) => {
+  if (id === SEARCH_QUERY_ID) {
+    return messages.shortLabel;
+  }
+
+  if (filterFieldConfig) {
+    const { messages: filterFieldMessages } = filterFieldConfig;
+
+    return (filterFieldMessages.shortLabel || filterFieldMessages.label);
+  }
+
+  return undefined;
+};
+
+const renderLabel = (id, filterFieldConfig) => {
+  const labelMessage = getLabelMessage(id, filterFieldConfig);
+
+  return labelMessage
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    ? <FormattedMessage {...labelMessage} />
+    : id;
+};
+
+const renderValue = (id, filterFieldConfig, params) => {
+  const value = params.get(id);
+  const formatValue = get(filterFieldConfig, 'formatValue');
+
+  if (Immutable.List.isList(value)) {
+    return formatValue
+      ? value.map((v) => formatValue(v)).join(VALUE_DELIMITER)
+      : value.join(VALUE_DELIMITER);
+  }
+
+  return formatValue
+    ? formatValue(value)
+    : value;
+};
+
+export default function RemoveSearchParamLink(props) {
+  const {
+    id,
+    params,
+  } = props;
+
+  const filterFieldConfig = config.getFilterFieldConfig(id);
+  const queryString = searchParamsToQueryString(params.delete(id));
+  const label = renderLabel(id, filterFieldConfig);
+  const value = renderValue(id, filterFieldConfig, params);
+
+  return (
+    <Link className={styles.common} to={{ search: `?${queryString}` }}>
+      {label}
+      :
+      {' '}
+      {value}
+    </Link>
+  );
+}
+
+RemoveSearchParamLink.propTypes = propTypes;

package/src/components/search/result/SearchError.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from '../../../../styles/cspace/SearchStatus.css';
+
+const propTypes = {
+  error: PropTypes.instanceOf(Error),
+};
+
+const defaultProps = {
+  error: undefined,
+};
+
+export default function SearchError(props) {
+  const {
+    error,
+  } = props;
+
+  if (!error) {
+    return undefined;
+  }
+
+  return (
+    <div className={styles.common}>
+      {error.message}
+    </div>
+  );
+}
+
+SearchError.propTypes = propTypes;
+SearchError.defaultProps = defaultProps;

package/src/components/search/result/SearchLoadMore.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, FormattedMessage } from 'react-intl';
+import styles from '../../../../styles/cspace/SearchStatus.css';
+
+const messages = defineMessages({
+  label: {
+    id: 'searchLoadMore.label',
+    defaultMessage: 'Load more',
+  },
+});
+
+const propTypes = {
+  onClick: PropTypes.func,
+};
+
+const defaultProps = {
+  onClick: () => undefined,
+};
+
+export default function SearchLoadMore(props) {
+  const {
+    onClick,
+  } = props;
+
+  return (
+    <div className={styles.common}>
+      <button type="button" onClick={onClick}>
+        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+        <FormattedMessage {...messages.label} />
+      </button>
+    </div>
+  );
+}
+
+SearchLoadMore.propTypes = propTypes;
+SearchLoadMore.defaultProps = defaultProps;

package/src/components/search/result/SearchParamList.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Immutable from 'immutable';
+import ClearSearchParamsLink from './ClearSearchParamsLink';
+import RemoveSearchParamLink from './RemoveSearchParamLink';
+import { SORT_ID } from '../../../constants/ids';
+import styles from '../../../../styles/cspace/SearchParamList.css';
+
+const propTypes = {
+  params: PropTypes.instanceOf(Immutable.Map),
+};
+
+const defaultProps = {
+  params: Immutable.Map(),
+};
+
+export default function SearchParamList(props) {
+  const {
+    params,
+  } = props;
+
+  const removableParams = params.delete(SORT_ID);
+
+  if (removableParams.size === 0) {
+    return null;
+  }
+
+  const paramButtons = removableParams
+    .keySeq()
+    .map((id) => (
+      <RemoveSearchParamLink
+        id={id}
+        key={id}
+        params={params}
+      />
+    ));
+
+  return (
+    <div className={styles.common}>
+      {paramButtons}
+      <ClearSearchParamsLink params={params} />
+    </div>
+  );
+}
+
+SearchParamList.propTypes = propTypes;
+SearchParamList.defaultProps = defaultProps;

package/src/components/search/result/SearchPending.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { defineMessages, FormattedMessage } from 'react-intl';
+import styles from '../../../../styles/cspace/SearchStatus.css';
+
+const messages = defineMessages({
+  loading: {
+    id: 'searchPending.loading',
+    defaultMessage: 'Loading...',
+  },
+});
+
+export default function SearchPending() {
+  return (
+    <div className={styles.common}>
+      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+      <FormattedMessage {...messages.loading} />
+    </div>
+  );
+}