From 743fb7f512ca281271b1f1258b15d82da2c5f3cc Mon Sep 17 00:00:00 2001
From: Zack Stickles <zstickles@gmail.com>
Date: Tue, 8 Jun 2021 16:32:24 -0700
Subject: [PATCH] chore: JS for new control component

---
 src/components/SegmentedControl.js | 54 ++++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 src/components/SegmentedControl.js

diff --git a/src/components/SegmentedControl.js b/src/components/SegmentedControl.js
new file mode 100644
index 000000000..6a12783c2
--- /dev/null
+++ b/src/components/SegmentedControl.js
@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+const get = (x, key) =>
+  Object.prototype.hasOwnProperty.call(x, key) ? x[key] : x;
+
+const SegmentedControl = ({ items, onChange }) => {
+  const [selected, setSelected] = useState(get(items[0], 'value'));
+
+  return (
+    <div>
+      {items.map((item, index) => {
+        const value = get(item, 'value');
+
+        return (
+          <button
+            type="button"
+            key={index}
+            tabIndex={index}
+            value={value}
+            aria-pressed={selected === value}
+            disabled={item.disabled}
+            onClick={(e) => {
+              setSelected(value);
+              onChange && onChange(e, value);
+            }}
+          >
+            {get(item, 'label')}
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+SegmentedControl.propTypes = {
+  /** A callback function that is called whenever the user changes the value. */
+  onChange: PropTypes.func,
+
+  /** Either a list of strings or a list of objects with a value and an optional
+      label and disabled status. */
+  items: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.string),
+    PropTypes.arrayOf(
+      PropTypes.shape({
+        value: PropTypes.string.isRequired,
+        label: PropTypes.string,
+        disabled: PropTypes.bool,
+      })
+    ),
+  ]).isRequired,
+};
+
+export default SegmentedControl;