#145: FormModel support for Dropdown

src/components/contact/ContactForm.jsx

@@ -93,7 +93,12 @@ class ContactForm extends Component {
                     </div>
 
                     <div className={styles.formMargin}>
-                        <Dropdown label={messages.whichQuestion} items={CONTACT_CATEGORIES} block />
+                        <Dropdown
+                            {...form.bindField('category')}
+                            label={messages.whichQuestion}
+                            items={CONTACT_CATEGORIES}
+                            block
+                        />
                     </div>
 
                     <TextArea

src/components/ui/form/Dropdown.jsx

@@ -6,9 +6,9 @@ import classNames from 'classnames';
 import { colors, COLOR_GREEN } from 'components/ui';
 
 import styles from './dropdown.scss';
-import FormComponent from './FormComponent';
+import FormInputComponent from './FormInputComponent';
 
-export default class Dropdown extends FormComponent {
+export default class Dropdown extends FormInputComponent {
     static displayName = 'Dropdown';
 
     static propTypes = {
@@ -18,11 +18,12 @@ export default class Dropdown extends FormComponent {
             }),
             PropTypes.string
         ]).isRequired,
-        items: PropTypes.oneOfType([
-            PropTypes.arrayOf(PropTypes.string),
-            PropTypes.arrayOf(PropTypes.object)
-            // TODO: ^^^ я тут хотел добавить вариант с <Message /> объектом, не уверен, что вышло верно
-        ]).isRequired,
+        items: PropTypes.arrayOf(PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.shape({
+                id: PropTypes.string
+            })
+        ])).isRequired,
         block: PropTypes.bool,
         color: PropTypes.oneOf(colors)
     };
@@ -33,7 +34,7 @@ export default class Dropdown extends FormComponent {
 
     state = {
         isActive: false,
-        activeItem: this.props.label
+        activeItem: null
     };
 
     componentDidMount() {
@@ -46,25 +47,30 @@ export default class Dropdown extends FormComponent {
 
     render() {
         const { color, block, items } = this.props;
-        const {isActive, activeItem} = this.state;
+        const {isActive} = this.state;
 
-        const label = this.formatMessage(activeItem);
+        const activeItem = this.getActiveItem();
+        const label = this.formatMessage(activeItem.label);
 
         return (
-            <div className={classNames(styles[color], {
-                [styles.block]: block,
-                [styles.opened]: isActive
-            })} {...this.props} onClick={this.onToggle}>
-                {label}
-                <span className={styles.toggleIcon} />
+            <div>
+                <div className={classNames(styles[color], {
+                    [styles.block]: block,
+                    [styles.opened]: isActive
+                })} {...this.props} onClick={this.onToggle}>
+                    {label}
+                    <span className={styles.toggleIcon} />
 
-                <div className={styles.menu}>
-                    {items.map((item, key) => (
-                        <div className={styles.menuItem} key={key} onClick={this.onSelectItem(item)}>
-                            {item}
-                        </div>
-                    ))}
+                    <div className={styles.menu}>
+                        {Object.entries(items).map(([value, label]) => (
+                            <div className={styles.menuItem} key={value} onClick={this.onSelectItem({value, label})}>
+                                {label}
+                            </div>
+                        ))}
+                    </div>
                 </div>
+
+                {this.renderError()}
             </div>
         );
     }
@@ -85,6 +91,32 @@ export default class Dropdown extends FormComponent {
         };
     }
 
+    getActiveItem() {
+        const {items} = this.props;
+        let {activeItem} = this.state;
+
+        if (!activeItem) {
+            activeItem = {
+                label: this.props.label,
+                value: ''
+            };
+
+            if (!activeItem.label) {
+                const firstItem = Object.entries(items)[0];
+                activeItem = {
+                    label: firstItem[1],
+                    value: firstItem[0]
+                };
+            }
+        }
+
+        return activeItem;
+    }
+
+    getValue() {
+        return this.getActiveItem().value;
+    }
+
     onToggle = (event) => {
         event.preventDefault();
 

src/components/ui/form/FormComponent.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 
 import { intlShape } from 'react-intl';
 
@@ -9,6 +9,13 @@ export default class FormComponent extends Component {
         intl: intlShape.isRequired
     };
 
+    /**
+     * Formats message resolving intl translations
+     *
+     * @param {string|object} message - message string, or intl message descriptor with an `id` field
+     *
+     * @return {string}
+     */
     formatMessage(message) {
         if (message && message.id && this.context && this.context.intl) {
             message = this.context.intl.formatMessage(message);
@@ -16,4 +23,10 @@ export default class FormComponent extends Component {
 
         return message;
     }
+
+    /**
+     * Focuses this field
+     */
+    focus() {
+    }
 }

src/services/api/feedback.js

@@ -1,4 +1,4 @@
 import request from 'services/request';
 
-export default ({subject = '', email = '', message = ''}) =>
-    request.post('/api/feedback', {subject, email, message});
+export default ({subject = '', email = '', message = '', category = ''}) =>
+    request.post('/api/feedback', {subject, email, message, category});