New: Bulk Grab Releases and Parameter Search

frontend/src/Search/QueryParameterOption.js

@@ -0,0 +1,83 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Icon from 'Components/Icon';
+import Link from 'Components/Link/Link';
+import { icons, sizes } from 'Helpers/Props';
+import styles from './QueryParameterOption.css';
+
+class QueryParameterOption extends Component {
+
+  //
+  // Listeners
+
+  onPress = () => {
+    const {
+      token,
+      tokenSeparator,
+      isFullFilename,
+      onPress
+    } = this.props;
+
+    let tokenValue = token;
+
+    tokenValue = tokenValue.replace(/ /g, tokenSeparator);
+
+    onPress({ isFullFilename, tokenValue });
+  }
+
+  //
+  // Render
+  render() {
+    const {
+      token,
+      tokenSeparator,
+      example,
+      footNote,
+      isFullFilename,
+      size
+    } = this.props;
+
+    return (
+      <Link
+        className={classNames(
+          styles.option,
+          styles[size],
+          isFullFilename && styles.isFullFilename
+        )}
+        onPress={this.onPress}
+      >
+        <div className={styles.token}>
+          {token.replace(/ /g, tokenSeparator)}
+        </div>
+
+        <div className={styles.example}>
+          {example.replace(/ /g, tokenSeparator)}
+
+          {
+            footNote !== 0 &&
+              <Icon className={styles.footNote} name={icons.FOOTNOTE} />
+          }
+        </div>
+      </Link>
+    );
+  }
+}
+
+QueryParameterOption.propTypes = {
+  token: PropTypes.string.isRequired,
+  example: PropTypes.string.isRequired,
+  footNote: PropTypes.number.isRequired,
+  tokenSeparator: PropTypes.string.isRequired,
+  isFullFilename: PropTypes.bool.isRequired,
+  size: PropTypes.oneOf([sizes.SMALL, sizes.LARGE]),
+  onPress: PropTypes.func.isRequired
+};
+
+QueryParameterOption.defaultProps = {
+  footNote: 0,
+  size: sizes.SMALL,
+  isFullFilename: false
+};
+
+export default QueryParameterOption;