-
Notifications
You must be signed in to change notification settings - Fork 49
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add isDefault to new front-end and reorganize files
- Loading branch information
1 parent
bb21d7c
commit 2840a82
Showing
23 changed files
with
905 additions
and
646 deletions.
There are no files selected for viewing
53 changes: 53 additions & 0 deletions
53
rdmo/projects/assets/js/interview/components/main/question/widgets/AutocompleteInput.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import React, { useState, useEffect } from 'react' | ||
| import ReactSelect from 'react-select' | ||
| import PropTypes from 'prop-types' | ||
| import classNames from 'classnames' | ||
| import { isNil } from 'lodash' | ||
|
|
||
| const AutocompleteInput = ({ value, options, disabled, isDefault, updateValue }) => { | ||
| const selectOptions = options.map(option => ({ | ||
| value: option.id, | ||
| label: option.text | ||
| })) | ||
|
|
||
| const [inputValue, setInputValue] = useState('') | ||
| useEffect(() => { | ||
| setInputValue(selectOptions.find((selectOption) => selectOption.value == value.option)) | ||
| }, [value.id, value.option]) | ||
|
|
||
| const handleChange = (selectedOption) => { | ||
| updateValue(value, { | ||
| option: isNil(selectedOption) ? null : selectedOption.value | ||
| }) | ||
| } | ||
|
|
||
| const classnames = classNames({ | ||
| 'react-select': true, | ||
| 'default': isDefault | ||
| }) | ||
|
|
||
| return ( | ||
| <ReactSelect | ||
| classNamePrefix="react-select" | ||
| className={classnames} | ||
| isClearable={true} | ||
| options={selectOptions} | ||
| value={inputValue} | ||
| onChange={(option) => { | ||
| setInputValue(option) | ||
| handleChange(option) | ||
| }} | ||
| isDisabled={disabled} | ||
| /> | ||
| ) | ||
| } | ||
|
|
||
| AutocompleteInput.propTypes = { | ||
| value: PropTypes.object.isRequired, | ||
| options: PropTypes.array.isRequired, | ||
| disabled: PropTypes.bool, | ||
| isDefault: PropTypes.bool, | ||
| updateValue: PropTypes.func.isRequired | ||
| } | ||
|
|
||
| export default AutocompleteInput |
86 changes: 29 additions & 57 deletions
86
rdmo/projects/assets/js/interview/components/main/question/widgets/AutocompleteWidget.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
80 changes: 80 additions & 0 deletions
80
rdmo/projects/assets/js/interview/components/main/question/widgets/CheckboxInput.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| import React from 'react' | ||
| import PropTypes from 'prop-types' | ||
| import { useDebouncedCallback } from 'use-debounce' | ||
| import { isEmpty, isNil } from 'lodash' | ||
|
|
||
| import AdditionalTextInput from './common/AdditionalTextInput' | ||
| import AdditionalTextareaInput from './common/AdditionalTextareaInput' | ||
|
|
||
| const CheckboxInput = ({ value, option, disabled, onCreate, onUpdate, onDelete }) => { | ||
|
|
||
| const checked = !isNil(value) | ||
|
|
||
| const handleChange = () => { | ||
| if (checked) { | ||
| onDelete(value) | ||
| } else { | ||
| onCreate(option) | ||
| } | ||
| } | ||
|
|
||
| const handleAdditionalValueChange = useDebouncedCallback((value, option, additionalValue) => { | ||
| if (checked) { | ||
| onUpdate(value, { text: additionalValue, option: option.id }) | ||
| } else { | ||
| onCreate(option, additionalValue) | ||
| } | ||
| }, 500) | ||
|
|
||
| return ( | ||
| <div className="checkbox"> | ||
| <label> | ||
| <input | ||
| type="checkbox" | ||
| checked={checked} | ||
| disabled={disabled} | ||
| onChange={() => handleChange()} | ||
| /> | ||
| <span>{option.text}</span> | ||
| { | ||
| isEmpty(option.additional_input) && ( | ||
| <span className="text-muted">{option.help}</span> | ||
| ) | ||
| } | ||
| { | ||
| option.additional_input == 'text' && ( | ||
| <> | ||
| <span>:</span> | ||
| {' '} | ||
| <AdditionalTextInput value={value} option={option} disabled={disabled} onChange={handleAdditionalValueChange} /> | ||
| {' '} | ||
| <span className="text-muted">{option.help}</span> | ||
| </> | ||
| ) | ||
| } | ||
| { | ||
| option.additional_input == 'textarea' && ( | ||
| <> | ||
| <span>:</span> | ||
| {' '} | ||
| <AdditionalTextareaInput value={value} option={option} disabled={disabled} onChange={handleAdditionalValueChange} /> | ||
| {' '} | ||
| <div className="text-muted">{option.help}</div> | ||
| </> | ||
| ) | ||
| } | ||
| </label> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| CheckboxInput.propTypes = { | ||
| value: PropTypes.object, | ||
| option: PropTypes.object, | ||
| disabled: PropTypes.bool, | ||
| onCreate: PropTypes.func.isRequired, | ||
| onUpdate: PropTypes.func.isRequired, | ||
| onDelete: PropTypes.func.isRequired | ||
| } | ||
|
|
||
| export default CheckboxInput |
77 changes: 2 additions & 75 deletions
77
rdmo/projects/assets/js/interview/components/main/question/widgets/CheckboxWidget.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
71 changes: 71 additions & 0 deletions
71
rdmo/projects/assets/js/interview/components/main/question/widgets/DateInput.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| import React from 'react' | ||
| import PropTypes from 'prop-types' | ||
| import DatePicker from 'react-datepicker' | ||
| import classNames from 'classnames' | ||
| import { enGB, de, it, es, fr } from 'date-fns/locale' | ||
|
|
||
| import lang from 'rdmo/core/assets/js/utils/lang' | ||
|
|
||
| const DateInput = ({ value, disabled, isDefault, updateValue }) => { | ||
|
|
||
| const getLocale = () => { | ||
| switch (lang) { | ||
| case 'de': | ||
| return de | ||
| case 'it': | ||
| return it | ||
| case 'es': | ||
| return es | ||
| case 'fr': | ||
| return fr | ||
| default: | ||
| return enGB | ||
| } | ||
| } | ||
|
|
||
| const getDateFormat = () => { | ||
| switch (lang) { | ||
| case 'de': | ||
| return 'dd.MM.yyyy' | ||
| case 'it': | ||
| return 'dd/MM/yyyy' | ||
| case 'es': | ||
| return 'dd/MM/yyyy' | ||
| case 'fr': | ||
| return 'dd/MM/yyyy' | ||
| default: | ||
| return 'dd/MM/yyyy' | ||
| } | ||
| } | ||
|
|
||
| const handleChange = (date) => { | ||
| const text = date.toISOString().slice(0,10) | ||
| updateValue(value, { text }) | ||
| } | ||
|
|
||
| const classnames = classNames({ | ||
| 'form-control': true, | ||
| 'date-control': true, | ||
| 'default': isDefault | ||
| }) | ||
|
|
||
| return ( | ||
| <DatePicker | ||
| className={classnames} | ||
| selected={value.text} | ||
| onChange={(date) => handleChange(date)} | ||
| locale={getLocale()} | ||
| dateFormat={getDateFormat()} | ||
| disabled={disabled} | ||
| /> | ||
| ) | ||
| } | ||
|
|
||
| DateInput.propTypes = { | ||
| value: PropTypes.object.isRequired, | ||
| disabled: PropTypes.bool, | ||
| isDefault: PropTypes.bool, | ||
| updateValue: PropTypes.func.isRequired | ||
| } | ||
|
|
||
| export default DateInput |
Oops, something went wrong.