Move SortOption to talk-plugin-viewing-options

plugins/talk-plugin-viewing-options/client/api/components/SortOption.css

@@ -0,0 +1,16 @@
+.label {
+  display: block;
+  cursor: pointer;
+  width: 100%;
+  padding: 6px 16px 6px 10px;
+  box-sizing: border-box;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+}
+
+.input {
+  cursor: pointer;
+  margin-right: 6px;
+}

plugins/talk-plugin-viewing-options/client/api/components/SortOption.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import cn from 'classnames';
+import styles from './SortOption.css';
+import PropTypes from 'prop-types';
+import {PLUGIN_NAME} from '../constants';
+
+export default class SortOption extends React.Component {
+  render() {
+    const className = cn([
+      styles.label,
+      `${PLUGIN_NAME}-sort-option`,
+      { [`${PLUGIN_NAME}-sort-option-active`]: this.props.active },
+    ]);
+    return (
+      <label
+        className={className}
+      >
+        <input
+          type="radio"
+          onChange={this.props.setSort}
+          checked={this.props.active}
+          className={styles.input}
+        />
+        {this.props.label}
+      </label>
+    );
+  }
+}
+
+SortOption.propTypes = {
+  // A simple callback to be called when clicking on this sort option.
+  setSort: PropTypes.func.isRequired,
+
+  // Whether or not this sort option is active.
+  active: PropTypes.bool.isRequired,
+
+  // Label to show next to the input control.
+  label: PropTypes.string.isRequired,
+};

plugins/talk-plugin-viewing-options/client/api/factories/index.js

@@ -0,0 +1,13 @@
+import withSortOption from 'plugin-api/beta/client/hocs/withSortOption';
+import SortOption from '../components/SortOption';
+
+/**
+ * A factory creating a sort option component.
+ * @param  {string|function} label  label to display, can be a callback for lazy evaluation.
+ * @param  {Object} sort            sort parameters
+ * @param  {string} sort.sortBy
+ * @param  {string} sort.sortOrder
+ * @return {Object} Component
+ */
+export const createSortOption = (label, sort) =>
+  withSortOption({ ...sort, label })(SortOption);