diff --git a/example/src/App.js b/example/src/App.js index 02a4451..fecf903 100644 --- a/example/src/App.js +++ b/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 {
diff --git a/example/src/config.js b/example/src/config.js index bf55ab5..34e2ff8 100644 --- a/example/src/config.js +++ b/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', diff --git a/src/components/Dropdown/index.js b/src/components/Dropdown/index.js index 587ad6a..567b1be 100644 --- a/src/components/Dropdown/index.js +++ b/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} > - + { + !isMulti && + + } {data.map((item, key) => (