From a07aa3c0ddb677cbed899c64aa297109fa025769 Mon Sep 17 00:00:00 2001 From: Maximiliano Forlenza Date: Sat, 9 Mar 2024 17:55:57 -0300 Subject: [PATCH] feat(textField): support multiline --- src/components/TextField/TextField.js | 8 ++- src/components/TextField/TextField.stories.js | 9 +++ src/utils/__tests__/getQuestionProps.test.js | 71 +++++++++++++++++-- src/utils/getQuestionProps.js | 6 +- 4 files changed, 85 insertions(+), 9 deletions(-) diff --git a/src/components/TextField/TextField.js b/src/components/TextField/TextField.js index e7f06a4..0d9a07b 100644 --- a/src/components/TextField/TextField.js +++ b/src/components/TextField/TextField.js @@ -10,7 +10,7 @@ import InputLabel from '@/components/InputLabel'; import FieldMessage from '@/components/FieldMessage'; import {formikField, formikForm, label as labelPropTypes} from '@/utils/propTypes'; -function TextField({form, field, placeholder, label, disabled, tooltip, warnings, ...props}) { +function TextField({form, field, placeholder, label, disabled, tooltip, warnings, multiline, ...props}) { const handleBlur = e => { const event = e; if (field.onChange && event.target.value) { @@ -46,6 +46,8 @@ function TextField({form, field, placeholder, label, disabled, tooltip, warnings {...props} disabled={disabled} onBlur={handleBlur} + multiline={multiline} + rows={multiline ? 2 : 1} /> @@ -56,6 +58,7 @@ TextField.propTypes = { field: formikField.isRequired, form: formikForm.isRequired, disabled: PropTypes.bool, + multiline: PropTypes.bool, label: labelPropTypes.isRequired, placeholder: PropTypes.string, tooltip: PropTypes.string, @@ -66,7 +69,8 @@ TextField.defaultProps = { placeholder: '[Ingrese texto]', tooltip: undefined, warnings: {}, - disabled: false + disabled: false, + multiline: false }; export default TextField; diff --git a/src/components/TextField/TextField.stories.js b/src/components/TextField/TextField.stories.js index 30c9743..256e51e 100644 --- a/src/components/TextField/TextField.stories.js +++ b/src/components/TextField/TextField.stories.js @@ -128,3 +128,12 @@ WithWarnings.args = { name: 'S1.0.S1P1.answer.value', withWarnings: true }; + +export const WithMultiline = Template.bind({}); +WithMultiline.args = { + disabled: false, + label: {text: 'Write your name'}, + name: 'S1.0.S1P1.answer.value', + warnings: {}, + multiline: true +}; diff --git a/src/utils/__tests__/getQuestionProps.test.js b/src/utils/__tests__/getQuestionProps.test.js index e58fe0c..a07f70c 100644 --- a/src/utils/__tests__/getQuestionProps.test.js +++ b/src/utils/__tests__/getQuestionProps.test.js @@ -337,6 +337,62 @@ describe('getQuestionProps', () => { }; }); + describe('and `question.multiline` is `true`', () => { + beforeEach(() => { + question.multiline = true; + }); + + it('should have `props.multiline` as `true`', () => { + expect( + getQuestionProps({sectionIndex, section, question, values, disabled, warnings, initialValues, sections}) + ).toEqual( + expect.objectContaining({ + props: { + label: {text: 'question 1', number: '1', introduction: undefined}, + name: 'S1.0.S1P1.answer', + placeholder: undefined, + type: 'text', + disabled: true, + warnings: {}, + isMultiple: false, + show: true, + subQuestions: [], + values: {answer: {value: ''}, id: 1}, + multiline: true + } + }) + ); + }); + }); + + describe('and `question.multiline` is `false`', () => { + beforeEach(() => { + question.multiline = false; + }); + + it('should have `props.multiline` as `false`', () => { + expect( + getQuestionProps({sectionIndex, section, question, values, disabled, warnings, initialValues, sections}) + ).toEqual( + expect.objectContaining({ + props: { + label: {text: 'question 1', number: '1', introduction: undefined}, + name: 'S1.0.S1P1.answer', + placeholder: undefined, + type: 'text', + disabled: true, + warnings: {}, + isMultiple: false, + show: true, + subQuestions: [], + values: {answer: {value: ''}, id: 1}, + multiline: false + } + }) + ); + }); + }); + it('should return props', () => { expect( getQuestionProps({sectionIndex, section, question, values, disabled, warnings, initialValues, sections}) @@ -351,7 +407,8 @@ describe('getQuestionProps', () => { isMultiple: false, show: true, subQuestions: [], - values: {answer: {value: ''}, id: 1} + values: {answer: {value: ''}, id: 1}, + multiline: false }, questionName: 'S1.0.S1P1.answer', questionType: 1, @@ -386,7 +443,8 @@ describe('getQuestionProps', () => { isMultiple: false, show: true, subQuestions: [], - values: {answer: {value: ''}, id: 1} + values: {answer: {value: ''}, id: 1}, + multiline: false }, questionName: 'S1.0.S1P1.answer', questionType: 2, @@ -422,7 +480,8 @@ describe('getQuestionProps', () => { isMultiple: false, show: true, subQuestions: [], - values: {answer: {value: ''}, id: 1} + values: {answer: {value: ''}, id: 1}, + multiline: false }, questionName: 'S1.0.S1P1.answer', questionType: 2, @@ -456,7 +515,8 @@ describe('getQuestionProps', () => { isMultiple: false, show: true, subQuestions: [], - values: {answer: {value: ''}, id: 1} + values: {answer: {value: ''}, id: 1}, + multiline: false }, questionName: 'S1.0.S1P1.answer', questionType: 8, @@ -492,7 +552,8 @@ describe('getQuestionProps', () => { isMultiple: false, show: true, subQuestions: [], - values: {answer: {value: ''}, id: 1} + values: {answer: {value: ''}, id: 1}, + multiline: false }, questionName: 'S1.0.S1P1.answer', questionType: 8, diff --git a/src/utils/getQuestionProps.js b/src/utils/getQuestionProps.js index f99372f..d6b9937 100644 --- a/src/utils/getQuestionProps.js +++ b/src/utils/getQuestionProps.js @@ -17,7 +17,8 @@ const getQuestionProps = ({sectionIndex, section, question, values, disabled, wa options, metadata, navigation = [], - introduction + introduction, + multiline = false } = question; const questionName = section ? `${section.name}.${sectionIndex}.${name}.answer` : ''; @@ -39,7 +40,8 @@ const getQuestionProps = ({sectionIndex, section, question, values, disabled, wa isMultiple: multiple, values: values[name], subQuestions, - show + show, + multiline: type === questionTypes.TEXT_FIELD ? multiline : false }; break; case questionTypes.DROPDOWN: