v3 UI

frontend/src/Components/Form/DeviceInput.js

@@ -0,0 +1,103 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { icons } from 'Helpers/Props';
+import Icon from 'Components/Icon';
+import FormInputButton from './FormInputButton';
+import TagInput, { tagShape } from './TagInput';
+import styles from './DeviceInput.css';
+
+class DeviceInput extends Component {
+
+  onTagAdd = (device) => {
+    const {
+      name,
+      value,
+      onChange
+    } = this.props;
+
+    // New tags won't have an ID, only a name.
+    const deviceId = device.id || device.name;
+
+    onChange({
+      name,
+      value: [...value, deviceId]
+    });
+  }
+
+  onTagDelete = ({ index }) => {
+    const {
+      name,
+      value,
+      onChange
+    } = this.props;
+
+    const newValue = value.slice();
+    newValue.splice(index, 1);
+
+    onChange({
+      name,
+      value: newValue
+    });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      className,
+      items,
+      selectedDevices,
+      hasError,
+      hasWarning,
+      isFetching,
+      onRefreshPress
+    } = this.props;
+
+    return (
+      <div className={className}>
+        <TagInput
+          className={styles.inputContainer}
+          tags={selectedDevices}
+          tagList={items}
+          allowNew={true}
+          minQueryLength={0}
+          hasError={hasError}
+          hasWarning={hasWarning}
+          onTagAdd={this.onTagAdd}
+          onTagDelete={this.onTagDelete}
+        />
+
+        <FormInputButton
+          onPress={onRefreshPress}
+        >
+          <Icon
+            name={icons.REFRESH}
+            isSpinning={isFetching}
+          />
+        </FormInputButton>
+      </div>
+    );
+  }
+}
+
+DeviceInput.propTypes = {
+  className: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])).isRequired,
+  items: PropTypes.arrayOf(PropTypes.shape(tagShape)).isRequired,
+  selectedDevices: PropTypes.arrayOf(PropTypes.shape(tagShape)).isRequired,
+  hasError: PropTypes.bool,
+  hasWarning: PropTypes.bool,
+  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onRefreshPress: PropTypes.func.isRequired
+};
+
+DeviceInput.defaultProps = {
+  className: styles.deviceInputWrapper,
+  inputClassName: styles.input
+};
+
+export default DeviceInput;