diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/common/DefaultBadge.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionDefault.js similarity index 75% rename from rdmo/projects/assets/js/interview/components/main/question/widgets/common/DefaultBadge.js rename to rdmo/projects/assets/js/interview/components/main/question/QuestionDefault.js index baac2ede2b..8d70ac94aa 100644 --- a/rdmo/projects/assets/js/interview/components/main/question/widgets/common/DefaultBadge.js +++ b/rdmo/projects/assets/js/interview/components/main/question/QuestionDefault.js @@ -1,6 +1,6 @@ import React from 'react' -const DefaultBadge = () => { +const QuestionDefault = () => { return (
{gettext('Default')} @@ -8,4 +8,4 @@ const DefaultBadge = () => { ) } -export default DefaultBadge +export default QuestionDefault diff --git a/rdmo/projects/assets/js/interview/components/main/question/QuestionEraseValue.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionEraseValue.js new file mode 100644 index 0000000000..7648af5bc3 --- /dev/null +++ b/rdmo/projects/assets/js/interview/components/main/question/QuestionEraseValue.js @@ -0,0 +1,22 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const QuestionEraseValue = ({ value, updateValue }) => { + const handleEraseValue = () => { + updateValue(value, {}) + } + + return ( + + ) +} + +QuestionEraseValue.propTypes = { + value: PropTypes.object.isRequired, + updateValue: PropTypes.func.isRequired +} + +export default QuestionEraseValue diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/AutocompleteWidget.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/AutocompleteWidget.js index 026ab2eace..b914dde681 100644 --- a/rdmo/projects/assets/js/interview/components/main/question/widgets/AutocompleteWidget.js +++ b/rdmo/projects/assets/js/interview/components/main/question/widgets/AutocompleteWidget.js @@ -4,10 +4,9 @@ import PropTypes from 'prop-types' import { isDefaultValue } from '../../../../utils/value' import QuestionAddValue from '../QuestionAddValue' +import QuestionDefault from '../QuestionDefault' import QuestionRemoveValue from '../QuestionRemoveValue' -import DefaultBadge from './common/DefaultBadge' - import AutocompleteInput from './AutocompleteInput' const AutocompleteWidget = ({ question, values, currentSet, disabled, createValue, updateValue, deleteValue }) => { @@ -21,7 +20,7 @@ const AutocompleteWidget = ({ question, values, currentSet, disabled, createValu
{ - isDefault && + isDefault && } { (question.is_collection || values.length > 1) && ( diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/DateWidget.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/DateWidget.js index 3d8b7b5608..86564c78f0 100644 --- a/rdmo/projects/assets/js/interview/components/main/question/widgets/DateWidget.js +++ b/rdmo/projects/assets/js/interview/components/main/question/widgets/DateWidget.js @@ -4,10 +4,10 @@ import PropTypes from 'prop-types' import { isDefaultValue } from '../../../../utils/value' import QuestionAddValue from '../QuestionAddValue' +import QuestionDefault from '../QuestionDefault' +import QuestionEraseValue from '../QuestionEraseValue' import QuestionRemoveValue from '../QuestionRemoveValue' -import DefaultBadge from './common/DefaultBadge' - import DateInput from './DateInput' const DateWidget = ({ question, values, currentSet, disabled, createValue, updateValue, deleteValue }) => { @@ -21,8 +21,9 @@ const DateWidget = ({ question, values, currentSet, disabled, createValue, updat
{ - isDefault && + isDefault && } + { (question.is_collection || values.length > 1) && ( diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/FileWidget.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/FileWidget.js index b76e51869a..61f18bf36e 100644 --- a/rdmo/projects/assets/js/interview/components/main/question/widgets/FileWidget.js +++ b/rdmo/projects/assets/js/interview/components/main/question/widgets/FileWidget.js @@ -4,10 +4,9 @@ import PropTypes from 'prop-types' import { isDefaultValue } from '../../../../utils/value' import QuestionAddValue from '../QuestionAddValue' +import QuestionDefault from '../QuestionDefault' import QuestionRemoveValue from '../QuestionRemoveValue' -import DefaultBadge from './common/DefaultBadge' - import FileInput from './FileInput' const FileWidget = ({ question, values, currentSet, disabled, createValue, updateValue, deleteValue }) => { @@ -21,7 +20,7 @@ const FileWidget = ({ question, values, currentSet, disabled, createValue, updat
{ - isDefault && + isDefault && } { (question.is_collection || values.length > 1) && ( diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/RadioWidget.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/RadioWidget.js index 9926d0d1f8..2955fc9091 100644 --- a/rdmo/projects/assets/js/interview/components/main/question/widgets/RadioWidget.js +++ b/rdmo/projects/assets/js/interview/components/main/question/widgets/RadioWidget.js @@ -4,11 +4,10 @@ import PropTypes from 'prop-types' import { isDefaultValue } from '../../../../utils/value' import QuestionAddValue from '../QuestionAddValue' +import QuestionDefault from '../QuestionDefault' +import QuestionEraseValue from '../QuestionEraseValue' import QuestionRemoveValue from '../QuestionRemoveValue' -import DefaultBadge from './common/DefaultBadge' - - import RadioInput from './RadioInput' const RadioWidget = ({ question, values, currentSet, disabled, createValue, updateValue, deleteValue }) => { @@ -22,8 +21,9 @@ const RadioWidget = ({ question, values, currentSet, disabled, createValue, upda
{ - isDefault && + isDefault && } + { (question.is_collection || values.length > 1) && ( diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/RangeWidget.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/RangeWidget.js index 37b7f9530c..8137389308 100644 --- a/rdmo/projects/assets/js/interview/components/main/question/widgets/RangeWidget.js +++ b/rdmo/projects/assets/js/interview/components/main/question/widgets/RangeWidget.js @@ -5,10 +5,10 @@ import { isNil } from 'lodash' import { isDefaultValue } from '../../../../utils/value' import QuestionAddValue from '../QuestionAddValue' +import QuestionDefault from '../QuestionDefault' +import QuestionEraseValue from '../QuestionEraseValue' import QuestionRemoveValue from '../QuestionRemoveValue' -import DefaultBadge from './common/DefaultBadge' - import RangeInput from './RangeInput' const RangeWidget = ({ question, values, currentSet, disabled, createValue, updateValue, deleteValue }) => { @@ -28,8 +28,9 @@ const RangeWidget = ({ question, values, currentSet, disabled, createValue, upda
{ - isDefault && + isDefault && } + { (question.is_collection || values.length > 1) && ( diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/SelectWidget.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/SelectWidget.js index 143bc528e4..81731076d7 100644 --- a/rdmo/projects/assets/js/interview/components/main/question/widgets/SelectWidget.js +++ b/rdmo/projects/assets/js/interview/components/main/question/widgets/SelectWidget.js @@ -4,10 +4,9 @@ import PropTypes from 'prop-types' import { isDefaultValue } from '../../../../utils/value' import QuestionAddValue from '../QuestionAddValue' +import QuestionDefault from '../QuestionDefault' import QuestionRemoveValue from '../QuestionRemoveValue' -import DefaultBadge from './common/DefaultBadge' - import SelectInput from './SelectInput' const SelectWidget = ({ question, values, currentSet, disabled, createValue, updateValue, deleteValue }) => { @@ -21,7 +20,7 @@ const SelectWidget = ({ question, values, currentSet, disabled, createValue, upd
{ - isDefault && + isDefault && } { (question.is_collection || values.length > 1) && ( diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/TextWidget.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/TextWidget.js index 00500efbdc..1fc4d09c6c 100644 --- a/rdmo/projects/assets/js/interview/components/main/question/widgets/TextWidget.js +++ b/rdmo/projects/assets/js/interview/components/main/question/widgets/TextWidget.js @@ -3,8 +3,8 @@ import PropTypes from 'prop-types' import { isDefaultValue } from '../../../../utils/value' -import DefaultBadge from './common/DefaultBadge' import QuestionAddValue from '../QuestionAddValue' +import QuestionDefault from '../QuestionDefault' import QuestionRemoveValue from '../QuestionRemoveValue' import TextInput from './TextInput' @@ -20,7 +20,7 @@ const TextWidget = ({ question, values, currentSet, disabled, focus, createValue
{ - isDefault && + isDefault && } { (question.is_collection || values.length > 1) && ( diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/TextareaWidget.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/TextareaWidget.js index bd604bdb5b..244ade55f1 100644 --- a/rdmo/projects/assets/js/interview/components/main/question/widgets/TextareaWidget.js +++ b/rdmo/projects/assets/js/interview/components/main/question/widgets/TextareaWidget.js @@ -3,8 +3,8 @@ import PropTypes from 'prop-types' import { isDefaultValue } from '../../../../utils/value' -import DefaultBadge from './common/DefaultBadge' import QuestionAddValue from '../QuestionAddValue' +import QuestionDefault from '../QuestionDefault' import QuestionRemoveValue from '../QuestionRemoveValue' import TextareaInput from './TextareaInput' @@ -20,7 +20,7 @@ const TextareaWidget = ({ question, values, currentSet, disabled, focus, createV
{ - isDefault && + isDefault && } { (question.is_collection || values.length > 1) && ( diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/YesNoInput.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/YesNoInput.js index de1163dd4c..b5fdc57c53 100644 --- a/rdmo/projects/assets/js/interview/components/main/question/widgets/YesNoInput.js +++ b/rdmo/projects/assets/js/interview/components/main/question/widgets/YesNoInput.js @@ -4,7 +4,7 @@ import classNames from 'classnames' const YesNoInput = ({ value, disabled, isDefault, updateValue }) => { const [inputValue, setInputValue] = useState('') - useEffect(() => {setInputValue(value.text)}, [value.id]) + useEffect(() => {setInputValue(value.text)}, [value.id, value.text]) const handleChange = (value, text) => { updateValue(value, { text }) diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/YesNoWidget.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/YesNoWidget.js index fe6e88312f..4234ddef2b 100644 --- a/rdmo/projects/assets/js/interview/components/main/question/widgets/YesNoWidget.js +++ b/rdmo/projects/assets/js/interview/components/main/question/widgets/YesNoWidget.js @@ -4,10 +4,10 @@ import PropTypes from 'prop-types' import { isDefaultValue } from '../../../../utils/value' import QuestionAddValue from '../QuestionAddValue' +import QuestionDefault from '../QuestionDefault' +import QuestionEraseValue from '../QuestionEraseValue' import QuestionRemoveValue from '../QuestionRemoveValue' -import DefaultBadge from './common/DefaultBadge' - import YesNoInput from './YesNoInput' const YesNoWidget = ({ question, values, currentSet, disabled, createValue, updateValue, deleteValue }) => { @@ -21,8 +21,9 @@ const YesNoWidget = ({ question, values, currentSet, disabled, createValue, upda
{ - isDefault && + isDefault && } + { (question.is_collection || values.length > 1) && ( diff --git a/rdmo/projects/assets/scss/interview.scss b/rdmo/projects/assets/scss/interview.scss index a125acee97..45b21d4ad4 100644 --- a/rdmo/projects/assets/scss/interview.scss +++ b/rdmo/projects/assets/scss/interview.scss @@ -191,7 +191,7 @@ z-index: 5; margin-right: 8px; - .btn-reset-value, + .btn-erase-value, .btn-remove-value { opacity: 0.8; line-height: 20px; @@ -205,12 +205,12 @@ // margin-left: 2px; // } - .btn-reset-value:hover, + .btn-erase-value:hover, .btn-remove-value:hover { opacity: 1; } - .btn-reset-value:focus, + .btn-erase-value:focus, .btn-remove-value:focus { outline: 0; }