Add support for MultiSelect Dropdown

example/src/App.js

@@ -13,6 +13,14 @@ const budgetData = [
   { value: 50000, label: '$50000' }
 ]
 
+const animalData = [
+  { value: 'Bear', label: 'Bear' },
+  { value: 'Fox', label: 'Fox' },
+  { value: 'Cat', label: 'Cat' },
+  { value: 'Dog', label: 'Dog' },
+  { value: 'Mouse', label: 'Mouse' }
+]
+
 export default class App extends Component {
   formRef = createRef()
 
@@ -30,7 +38,7 @@ export default class App extends Component {
         <Form
           model={formConstants}
           ref={this.formRef}
-          data={{ budget: budgetData }}
+          data={{ budget: budgetData, animals: animalData }}
         />
         <button onClick={this.handleSave}>Save</button>
       </div>

example/src/config.js

@@ -24,6 +24,14 @@ export const formConstants = [
     title: 'Your Budget',
     styleClass: 'col-sm-6'
   },
+  {
+    field: 'animals',
+    type: 'multi-dropdown',
+    validators: [],
+    required: false,
+    title: 'Pick your favorite animals',
+    styleClass: 'col-sm-12'
+  },
   {
     field: 'message',
     type: 'textarea',

src/components/Dropdown/index.js

@@ -3,10 +3,21 @@ import PropTypes from 'prop-types'
 
 import mainStyles from '../../styles.module.css'
 
-const Dropdown = ({ value, label, field, data, placeholder, onChange }) => {
+const Dropdown = ({ value, label, field, data, placeholder, onChange, isMulti }) => {
   const handleChange = (event) => {
-    const { value } = event.target
-    onChange(value, field)
+    if (isMulti) {
+      const { options } = event.target
+      const value = []
+
+      for (let i = 0; i < options.length; i++) {
+        if (options[i].selected) value.push(options[i].value)
+      }
+
+      onChange(value, field)
+    } else {
+      const { value } = event.target
+      onChange(value, field)
+    }
   }
 
   return (
@@ -16,8 +27,12 @@ const Dropdown = ({ value, label, field, data, placeholder, onChange }) => {
         value={value}
         className={mainStyles.formControl}
         onChange={handleChange}
+        multiple={isMulti}
       >
-        <option value=''>{placeholder ? placeholder : 'Select a value'}</option>
+        {
+          !isMulti &&
+          <option value=''>{placeholder ? placeholder : 'Select a value'}</option>
+        }
         {data.map((item, key) => (
           <option key={key} value={item.value}>
             {item.label}
@@ -29,20 +44,22 @@ const Dropdown = ({ value, label, field, data, placeholder, onChange }) => {
 }
 
 Dropdown.propTypes = {
-  value: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
   placeholder: PropTypes.string,
   data: PropTypes.array,
   label: PropTypes.string,
   field: PropTypes.string,
-  onChange: PropTypes.func.isRequired
+  onChange: PropTypes.func.isRequired,
+  isMulti: PropTypes.bool
 }
 
 Dropdown.defaultProps = {
   value: '',
   placeholder: '',
   label: '',
   field: '',
-  data: []
+  data: [],
+  isMulti: false
 }
 
 export default Dropdown

src/components/Form/index.js

@@ -35,6 +35,8 @@ export default class Form extends Component {
     model.forEach((item) => {
       if (item.type === 'checkbox') {
         formData[item.field] = values[item.field] ? values[item.field] : false
+      } else if (item.type === 'multi-dropdown') {
+        formData[item.field] = values[item.field] ? values[item.field] : []
       } else {
         formData[item.field] = values[item.field] ? values[item.field] : ''
       }
@@ -130,6 +132,21 @@ export default class Form extends Component {
             </div>
           )
           break
+        case 'multi-dropdown':
+          domArray.push(
+            <div key={index} className={`form-group ${field.styleClass}`}>
+              <Dropdown
+                field={field.field}
+                value={formData[field.field] || []}
+                data={data[field.field]}
+                label={field.title}
+                placeholder={field.placeholder}
+                onChange={this.handleChange}
+                isMulti
+              />
+            </div>
+          )
+          break
         case 'checkbox':
           domArray.push(
             <div key={index} className={`form-group ${field.styleClass}`}>