Create FieldSelect: Final Form version of SelectField

src/components/FieldSelect/FieldSelect.css

@@ -0,0 +1,18 @@
+@import '../../marketplace.css';
+
+.root {
+}
+
+.select {
+  color: var(--matterColorAnti);
+  border-bottom-color: var(--attentionColor);
+}
+
+.selectSuccess {
+  color: var(--matterColor);
+  border-bottom-color: var(--successColor);
+}
+
+.selectError {
+  border-bottom-color: var(--failColor);
+}

src/components/FieldSelect/FieldSelect.example.js

@@ -0,0 +1,51 @@
+/* eslint-disable no-console */
+import React from 'react';
+import { Form as FinalForm, FormSpy } from 'react-final-form';
+import * as validators from '../../util/validators';
+import { Button } from '../../components';
+import FieldSelect from './FieldSelect';
+
+const FormComponent = props => (
+  <FinalForm
+    {...props}
+    render={fieldRenderProps => {
+      const { form, handleSubmit, onChange, invalid, pristine, submitting } = fieldRenderProps;
+      const required = validators.required('This field is required');
+      const submitDisabled = invalid || pristine || submitting;
+      return (
+        <form
+          onSubmit={e => {
+            e.preventDefault();
+            handleSubmit(e);
+          }}
+        >
+          <FormSpy onChange={onChange} />
+          <FieldSelect id="select1" name="select1" label="Choose an option:" validate={required}>
+            <option value="">Pick something...</option>
+            <option value="first">First option</option>
+            <option value="second">Second option</option>
+          </FieldSelect>
+          <Button style={{ marginTop: 24 }} type="submit" disabled={submitDisabled}>
+            Submit
+          </Button>
+        </form>
+      );
+    }}
+  />
+);
+
+export const Select = {
+  component: FormComponent,
+  props: {
+    onChange: formState => {
+      if (formState.values.select1) {
+        console.log('form values changed to:', formState.values);
+      }
+    },
+    onSubmit: values => {
+      console.log('submit values:', values);
+      return false;
+    },
+  },
+  group: 'inputs',
+};

src/components/FieldSelect/FieldSelect.js

@@ -0,0 +1,72 @@
+/**
+ * NOTE this component is part of react-final-form instead of Redux Form.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Field } from 'react-final-form';
+import classNames from 'classnames';
+import { ValidationError } from '../../components';
+
+import css from './FieldSelect.css';
+
+const FieldSelectComponent = props => {
+  const { rootClassName, className, id, label, input, meta, children, ...rest } = props;
+
+  if (label && !id) {
+    throw new Error('id required when a label is given');
+  }
+
+  const { valid, invalid, touched, error } = meta;
+
+  // Error message and input error styles are only shown if the
+  // field has been touched and the validation has failed.
+  const hasError = touched && invalid && error;
+
+  const selectClasses = classNames(css.select, {
+    [css.selectSuccess]: valid,
+    [css.selectError]: hasError,
+  });
+  const selectProps = { className: selectClasses, id, ...input, ...rest };
+
+  const classes = classNames(rootClassName || css.root, className);
+  return (
+    <div className={classes}>
+      {label ? <label htmlFor={id}>{label}</label> : null}
+      <select {...selectProps}>{children}</select>
+      <ValidationError fieldMeta={meta} />
+    </div>
+  );
+};
+
+FieldSelectComponent.defaultProps = {
+  rootClassName: null,
+  className: null,
+  id: null,
+  label: null,
+  children: null,
+};
+
+const { string, object, node } = PropTypes;
+
+FieldSelectComponent.propTypes = {
+  rootClassName: string,
+  className: string,
+
+  // Label is optional, but if it is given, an id is also required so
+  // the label can reference the input in the `for` attribute
+  id: string,
+  label: string,
+
+  // Generated by final-form's Field component
+  input: object.isRequired,
+  meta: object.isRequired,
+
+  children: node,
+};
+
+const FieldSelect = props => {
+  return <Field component={FieldSelectComponent} {...props} />;
+};
+
+export default FieldSelect;

src/components/index.js

@@ -38,6 +38,7 @@ export { default as FieldDateRangeInput } from './FieldDateRangeInput/FieldDateR
 export { default as FieldGroupCheckbox } from './FieldGroupCheckbox/FieldGroupCheckbox';
 export { default as FieldPhoneNumberInput } from './FieldPhoneNumberInput/FieldPhoneNumberInput';
 export { default as FieldReviewRating } from './FieldReviewRating/FieldReviewRating';
+export { default as FieldSelect } from './FieldSelect/FieldSelect';
 export { default as FieldTextInput } from './FieldTextInput/FieldTextInput';
 export { default as Footer } from './Footer/Footer';
 export { default as Form } from './Form/Form';

src/examples.js

@@ -14,6 +14,7 @@ import * as FieldDateRangeInput from './components/FieldDateRangeInput/FieldDate
 import * as FieldGroupCheckbox from './components/FieldGroupCheckbox/FieldGroupCheckbox.example';
 import * as FieldPhoneNumberInput from './components/FieldPhoneNumberInput/FieldPhoneNumberInput.example';
 import * as FieldReviewRating from './components/FieldReviewRating/FieldReviewRating.example';
+import * as FieldSelect from './components/FieldSelect/FieldSelect.example';
 import * as FieldTextInput from './components/FieldTextInput/FieldTextInput.example';
 import * as Footer from './components/Footer/Footer.example';
 import * as IconBannedUser from './components/IconBannedUser/IconBannedUser.example';
@@ -105,6 +106,7 @@ export {
   FieldGroupCheckbox,
   FieldPhoneNumberInput,
   FieldReviewRating,
+  FieldSelect,
   FieldTextInput,
   Footer,
   IconBannedUser,