From ea71e7e18a38dd8369fd5033423b3fa169a78252 Mon Sep 17 00:00:00 2001 From: Frost000 <62664922+Frost000@users.noreply.github.com> Date: Sat, 21 Oct 2023 16:30:44 -0400 Subject: [PATCH 1/4] InputChoiceSorting: Rework logic to work horizontally. Rework logic to use better css classes and work with Flex to be able to set custom lengths freely horizontally. The horizontal limitation of the older logic is no more and should be more flexible. --- .../src/components/inputs/InputCheckbox.tsx | 61 ++++++- .../components/inputs/InputChoiceSorting.ts | 166 +++--------------- .../src/components/inputs/InputRadio.tsx | 32 +++- .../__tests__/InputChoiceSorting.test.ts | 133 +++++--------- .../src/styles/survey/_question.scss | 110 +++++++++++- 5 files changed, 255 insertions(+), 247 deletions(-) diff --git a/packages/evolution-frontend/src/components/inputs/InputCheckbox.tsx b/packages/evolution-frontend/src/components/inputs/InputCheckbox.tsx index 086ef3089..fa70c40c5 100644 --- a/packages/evolution-frontend/src/components/inputs/InputCheckbox.tsx +++ b/packages/evolution-frontend/src/components/inputs/InputCheckbox.tsx @@ -203,11 +203,19 @@ export class InputCheckbox - {columnWidgets} - - ); + if (this.props.widgetConfig.alignment === undefined || this.props.widgetConfig.alignment === 'vertical') { + columnedChoiceInputs.push( +
+ {columnWidgets} +
+ ); + } else { + columnedChoiceInputs.push( +
+ {columnWidgets} +
+ ); + } } return columnedChoiceInputs; @@ -263,6 +271,47 @@ export class InputCheckbox + {columnedChoiceInputs} + {this.props.customId && ( +
+ {strCustomLabel && ( + + )} + this.setState({ customValue: e.target.value })} + ref={this.customInputRef} + /> +
+ )} + + ); + } const strCustomLabel = this.props.widgetConfig.customLabel ? surveyHelper.translateString( @@ -275,7 +324,7 @@ export class InputCheckbox diff --git a/packages/evolution-frontend/src/components/inputs/InputChoiceSorting.ts b/packages/evolution-frontend/src/components/inputs/InputChoiceSorting.ts index 71d846c47..7387cedc4 100644 --- a/packages/evolution-frontend/src/components/inputs/InputChoiceSorting.ts +++ b/packages/evolution-frontend/src/components/inputs/InputChoiceSorting.ts @@ -6,25 +6,25 @@ */ /** - * Sort the array to be displayed to the target number of columns in vertical fashion. + * Sort the array in a specified count of groups. * @param arr - Array to be sorted. - * @param columns - Target number of columns. + * @param count - Target number of group. * @returns A 2 dimension array containing the data as columns to be displayed. * * @example * // Prints [[0,1,2],[3,4,5]] - * console.log(verticalByColumns([0,1,2,3,4,5], 2)); + * console.log(splitSort([0,1,2,3,4,5], 2)); */ -const verticalByColumns = function (arr: Value[], columns: number): Value[][] { +const splitSort = function (arr: Value[], count: number): Value[][] { const len = arr.length; const out: any[] = []; let index = 0; let columnIndex = 0; - let countPerColumn = Math.ceil(len / columns); + let countPerColumn = Math.ceil(len / count); while (index + countPerColumn < len) { out.push(arr.slice(index, (index += countPerColumn))); columnIndex++; - countPerColumn = Math.ceil((len - index) / (columns - columnIndex)); + countPerColumn = Math.ceil((len - index) / (count - columnIndex)); } out.push(arr.slice(index)); @@ -32,21 +32,21 @@ const verticalByColumns = function (arr: Value[], columns: number): Value }; /** - * Sort the array to be displayed to the target number of rows in vertical fashion. + * Sort the array in groups of specified length. * @param arr - Array to be sorted - * @param rows - Target number of rows. + * @param length - Target number of item in group. * @returns A 2 dimension array containing the data as columns to be displayed. * * @example * // Prints [[0,1],[2,3],[4,5]] - * console.log(verticalByRows([0,1,2,3,4,5], 2)); + * console.log(subsequentSort([0,1,2,3,4,5], 2)); */ -const verticalByRows = function (arr: Value[], rows: number): Value[][] { +const subsequentSort = function (arr: Value[], length: number): Value[][] { const len = arr.length; const out: any[] = []; let index = 0; - while (index + rows < len) { - out.push(arr.slice(index, (index += rows))); + while (index + length < len) { + out.push(arr.slice(index, (index += length))); } out.push(arr.slice(index)); @@ -54,77 +54,16 @@ const verticalByRows = function (arr: Value[], rows: number): Value[][] { }; /** - * Sort the array to be displayed to the target number of columns in horizontal fashion + * Sort the array in groups of custom lengths. * @param arr - Array to be sorted. - * @param columns - Target number of columns. - * @returns A 2 dimension array containing the data as columns to be displayed. - * - * @example - * // Prints [[0,2,4],[1,3,5]] - * console.log(horizontalByColumns([0,1,2,3,4,5], 2)); - */ -const horizontalByColumns = function (arr: Value[], columns: number): Value[][] { - const len = arr.length; - const out: any[] = []; - let index = 0; - let columnIndex = 0; - let newColumn: any[] = []; - while (index < len) { - newColumn.push(arr[index]); - index += columns; - if (index >= len && columnIndex < columns) { - columnIndex++; - index = columnIndex; - out.push(newColumn); - newColumn = []; - } - } - - return out; -}; - -/** - * Sort the array to be displayed to the target number of rows in horizontal fashion. - * @param arr - Array to be sorted. - * @param rows - Target number of rows. - * @returns A 2 dimension array containing the data as columns to be displayed. - * - * @example - * // Prints [[0,3],[1,4],[2,5]] - * console.log(horizontalByRows([0,1,2,3,4,5], 2)); - */ -const horizontalByRows = function (arr: Value[], rows: number): Value[][] { - const len = arr.length; - const out: any[] = []; - let index = 0; - let columnIndex = 0; - const columns = Math.ceil(arr.length / rows); - let newColumn: any[] = []; - while (index < len) { - newColumn.push(arr[index]); - index += columns; - if (index >= len && columnIndex < columns) { - columnIndex++; - index = columnIndex; - out.push(newColumn); - newColumn = []; - } - } - - return out; -}; - -/** - * Sort the array to be displayed in columns by the custom array information. - * @param arr - Array to be sorted. - * @param custom - Array containing the dedired length of each column. + * @param custom - Array containing the dedired length of each group. * @returns A 2 dimension array containing the data as columns to be displayed. * * @example * // Prints [[0,1,2],[3,4],[5]] - * console.log(customVertical([0,1,2,3,4,5], [3,2,1])); + * console.log(cusotmSort([0,1,2,3,4,5], [3,2,1])); */ -const customVertical = function (arr: Value[], custom: number[]): Value[][] { +const customSort = function (arr: Value[], custom: number[]): Value[][] { const len = arr.length; const out: any[] = []; let index = 0; @@ -138,47 +77,6 @@ const customVertical = function (arr: Value[], custom: number[]): Value[] return out; }; -/** - * Sort the array to be displayed in rows by the custom array information. - * @param arr - Array to be sorted. - * @param custom - Array containing the desired legnths of each row. - * @returns A 2 dimension array containing the data as columns to be displayed. - * - * @example - * // Prints [[0,3,5],[1,4],[2]] - * console.log(customHorizontal([0,1,2,3,4,5], [3,2,1])); - */ -const customHorizontal = function (arr: Value[], custom: number[]): Value[][] { - const len = arr.length; - const out: any[] = []; - let index = 0; - let columnIndex = 0; - let rowIndex = 0; - let newColumn: any[] = []; - while (index < len && columnIndex < custom[0]) { - if (columnIndex >= custom[rowIndex]) { - columnIndex++; - rowIndex = 0; - index = columnIndex; - out.push(newColumn); - newColumn = []; - continue; - } - newColumn.push(arr[index]); - index += custom[rowIndex]; - rowIndex++; - if (index >= len || rowIndex >= custom[columnIndex]) { - columnIndex++; - rowIndex = 0; - index = columnIndex; - out.push(newColumn); - newColumn = []; - } - } - - return out; -}; - /** * Sorts the array based on the specified parameters. * @@ -187,7 +85,7 @@ const customHorizontal = function (arr: Value[], custom: number[]): Value * * @param arr - Array to be sorted. * @param alignement - In wich way should the array be sorted? Top to bottom or left to right. - * @param colums - Target amount of columns, if columns and rows are specified, columns is used. + * @param columns - Target amount of columns, if columns and rows are specified, columns is used. * @param rows - target amount of rows, if columns and rows are specified, columns is used. * @param customAlignmentLengths - Specify the lengths of each row or column individually, if alignement is horizontal, the first specified row must be the longuest. * @returns A 2 dimension array containing the input array sorted into columns for display or the original array in case of invalid parameters. @@ -200,41 +98,27 @@ const sortByParameters = function ( customAlignmentLengths?: number[] ): Value[][] { if (customAlignmentLengths && customAlignmentLengths.length > 0) { - switch (alignment) { - case 'vertical': - return customVertical(arr, customAlignmentLengths); - case 'horizontal': - return customHorizontal(arr, customAlignmentLengths); - default: - return customVertical(arr, customAlignmentLengths); - } + return customSort(arr, customAlignmentLengths); } else if (columns && columns > 0) { switch (alignment) { case 'vertical': - return verticalByColumns(arr, columns); + return splitSort(arr, columns); case 'horizontal': - return horizontalByColumns(arr, columns); + return subsequentSort(arr, columns); default: - return verticalByColumns(arr, columns); + return splitSort(arr, columns); } } else if (rows && rows > 0) { switch (alignment) { case 'vertical': - return verticalByRows(arr, rows); + return subsequentSort(arr, rows); case 'horizontal': - return horizontalByRows(arr, rows); + return splitSort(arr, rows); default: - return verticalByRows(arr, rows); + return subsequentSort(arr, rows); } } else { - switch (alignment) { - case 'vertical': - return verticalByColumns(arr, 2); - case 'horizontal': - return horizontalByRows(arr, 2); - default: - return verticalByColumns(arr, 2); - } + return splitSort(arr, 2); } }; diff --git a/packages/evolution-frontend/src/components/inputs/InputRadio.tsx b/packages/evolution-frontend/src/components/inputs/InputRadio.tsx index 2b3a3347a..42c0cb975 100644 --- a/packages/evolution-frontend/src/components/inputs/InputRadio.tsx +++ b/packages/evolution-frontend/src/components/inputs/InputRadio.tsx @@ -225,11 +225,19 @@ export class InputRadio const columnedChoiceInputs: JSX.Element[] = []; for (let i = 0, count = widgetsByColumn.length; i < count; i++) { const columnWidgets = widgetsByColumn[i]; - columnedChoiceInputs.push( -
- {columnWidgets} -
- ); + if (this.props.widgetConfig.alignment === undefined || this.props.widgetConfig.alignment === 'vertical') { + columnedChoiceInputs.push( +
+ {columnWidgets} +
+ ); + } else { + columnedChoiceInputs.push( +
+ {columnWidgets} +
+ ); + } } return columnedChoiceInputs; }; @@ -298,9 +306,21 @@ export class InputRadio )); // separate by columns if needed: const columnedChoiceInputs = this.getColumnedChoices(choiceInputs); + if (this.props.widgetConfig.alignment === undefined || this.props.widgetConfig.alignment === 'vertical') { + return ( +
+ {columnedChoiceInputs} +
+ ); + } + return (
diff --git a/packages/evolution-frontend/src/components/inputs/__tests__/InputChoiceSorting.test.ts b/packages/evolution-frontend/src/components/inputs/__tests__/InputChoiceSorting.test.ts index b39c75821..6703029c8 100644 --- a/packages/evolution-frontend/src/components/inputs/__tests__/InputChoiceSorting.test.ts +++ b/packages/evolution-frontend/src/components/inputs/__tests__/InputChoiceSorting.test.ts @@ -4,87 +4,60 @@ * This file is licensed under the MIT License. * License text available at https://opensource.org/licenses/MIT */ +import { DESTRUCTION } from 'dns'; import {sortByParameters} from '../InputChoiceSorting'; const array = [0,1,2,3,4,5,6,7,8,9]; -describe('Sort array in vertical fashion ', () =>{ - const columns = 3; - const rows = 3; - const alignment = 'vertical'; - - test('Vertical By columns', () => { - const result = sortByParameters(array, alignment, columns); - - expect(result).toEqual([[0,1,2,3],[4,5,6],[7,8,9]]); - }); - test('Vertical By rows', () => { - const result = sortByParameters(array, alignment, undefined, rows); +describe('Sort array with splitSort ', () => { + const count = 3; - expect(result).toEqual([[0,1,2],[3,4,5],[6,7,8],[9]]); - }); - test('Vertical By columns & rows', () => { - const result = sortByParameters(array, alignment, columns, rows); + test('SplitSort with count;', () => { + const result = sortByParameters(array, undefined, count); expect(result).toEqual([[0,1,2,3],[4,5,6],[7,8,9]]); }); - test('Vertical By no columns & no rows', () => { - const result = sortByParameters(array, alignment); + test('SplitSort with no count;', () => { + const result = sortByParameters(array); expect(result).toEqual([[0,1,2,3,4],[5,6,7,8,9]]); }); }); -describe('Sort array in horizontal fashion', () =>{ - const columns = 3; - const rows = 3; - const alignment = 'horizontal'; +describe('Sort array with subsequentSort ', () => { + const length = 3; - test('horizontal By columns', () => { - const result = sortByParameters(array, alignment, columns); + test('SubsequentSort with length;', () => { + const result = sortByParameters(array, undefined, undefined, length); - expect(result).toEqual([[0,3,6,9],[1,4,7],[2,5,8]]); - }); - test('horizontal By rows', () => { - const result = sortByParameters(array, alignment, undefined, rows); - - expect(result).toEqual([[0,4,8],[1,5,9],[2,6],[3,7]]); - }); - test('horizontal By columns & rows', () => { - const result = sortByParameters(array, alignment, columns, rows); - - expect(result).toEqual([[0,3,6,9],[1,4,7],[2,5,8]]); + expect(result).toEqual([[0,1,2],[3,4,5],[6,7,8],[9]]); }); - test('horizontal By no columns & no rows', () => { - const result = sortByParameters(array, alignment); + test('SubsequentSort with no length;', () => { + const result = sortByParameters(array); - expect(result).toEqual([[0,5],[1,6],[2,7],[3,8],[4,9]]); + expect(result).toEqual([[0,1,2,3,4],[5,6,7,8,9]]); }); }); -describe('Sort array with no alignement', () => { - const columns = 2; - const rows = 2; - - test('with columns', () => { - const result = sortByParameters(array, undefined, columns); +describe('Sort array with customSort', () => { + const sameAmount = [4,4,2]; + const moreParameters = [6,6,4]; + const lessParameters = [2,2]; - expect(result).toEqual([[0,1,2,3,4],[5,6,7,8,9]]); - }); - test('with rows', () => { - const result = sortByParameters(array, undefined, undefined, rows); + test('CustomSort with same amount of choices and parameters.', () => { + const result = sortByParameters(array, undefined, undefined, undefined, sameAmount) - expect(result).toEqual([[0,1],[2,3],[4,5],[6,7],[8,9]]); + expect(result).toEqual([[0,1,2,3],[4,5,6,7],[8,9]]); }); - test('with columns & rows', () => { - const result = sortByParameters(array, undefined, columns, rows); + test('CustomSort with less parameters than choices.', () => { + const result = sortByParameters(array, undefined, undefined, undefined, lessParameters) - expect(result).toEqual([[0,1,2,3,4],[5,6,7,8,9]]); + expect(result).toEqual([[0,1],[2,3],[4,5,6,7,8,9]]); }); - test('with no columns & no rows', () => { - const result = sortByParameters(array); + test('CustomSort with more parameters than choices.', () => { + const result = sortByParameters(array, undefined, undefined, undefined, moreParameters) - expect(result).toEqual([[0,1,2,3,4],[5,6,7,8,9]]); + expect(result).toEqual([[0,1,2,3,4,5],[6,7,8,9]]); }); }); @@ -110,48 +83,28 @@ describe('Sort array by parameters', () => { }) }); -describe('Sort array by custom parameters', () => { - const sameAmount = [4,4,2]; - const moreParameters = [6,6,4]; - const lessParameters = [2,2]; - const invalidHorizontalParameters = [3,5,2]; - const vertical = 'vertical'; - const horizontal = 'horizontal'; - - test('Vertical with same amount of choices and parameters.', () => { - const result = sortByParameters(array, vertical, undefined, undefined, sameAmount) - - expect(result).toEqual([[0,1,2,3],[4,5,6,7],[8,9]]); - }); - test('Vertical with less parameters than choices.', () => { - const result = sortByParameters(array, vertical, undefined, undefined, lessParameters) - - expect(result).toEqual([[0,1],[2,3],[4,5,6,7,8,9]]); - }); - test('Vertical with more parameters than choices.', () => { - const result = sortByParameters(array, vertical, undefined, undefined, moreParameters) - - expect(result).toEqual([[0,1,2,3,4,5],[6,7,8,9]]); - }); +describe('Sort array with no alignement', () => { + const columns = 2; + const rows = 2; - test('Horizontal with same amount of choices and parameters.', () => { - const result = sortByParameters(array, horizontal, undefined, undefined, sameAmount) + test('with columns', () => { + const result = sortByParameters(array, undefined, columns); - expect(result).toEqual([[0,4,8],[1,5,9],[2,6],[3,7]]); + expect(result).toEqual([[0,1,2,3,4],[5,6,7,8,9]]); }); - test('Horizontal with less parameters than choices.', () => { - const result = sortByParameters(array, horizontal, undefined, undefined, lessParameters) + test('with rows', () => { + const result = sortByParameters(array, undefined, undefined, rows); - expect(result).toEqual([[0,2],[1,3]]); + expect(result).toEqual([[0,1],[2,3],[4,5],[6,7],[8,9]]); }); - test('Horizontal with more parameters than choices.', () => { - const result = sortByParameters(array, horizontal, undefined, undefined, moreParameters) + test('with columns & rows', () => { + const result = sortByParameters(array, undefined, columns, rows); - expect(result).toEqual([[0,6],[1,7],[2,8],[3,9],[4],[5]]); + expect(result).toEqual([[0,1,2,3,4],[5,6,7,8,9]]); }); - test('Horizontal with invalid parameters', () => { - const result = sortByParameters(array, horizontal, undefined, undefined, invalidHorizontalParameters); + test('with no columns & no rows', () => { + const result = sortByParameters(array); - expect(result).toEqual([[0,3,8],[1,4,9],[2,5]]); + expect(result).toEqual([[0,1,2,3,4],[5,6,7,8,9]]); }); }); \ No newline at end of file diff --git a/packages/evolution-legacy/src/styles/survey/_question.scss b/packages/evolution-legacy/src/styles/survey/_question.scss index c323fa0cf..7fd17bcc9 100644 --- a/packages/evolution-legacy/src/styles/survey/_question.scss +++ b/packages/evolution-legacy/src/styles/survey/_question.scss @@ -19,9 +19,7 @@ label strong, .apptr__form__label-standalone strong { } - .apptr__form-input-container { - input[type=text], input[type=password], input[type=email], input[type=number] { font-size: $font-size-medium-large; color: $input; @@ -204,14 +202,15 @@ label strong, .apptr__form__label-standalone strong { // min-width: calc(100vw * 0.8); // forces map to take minimum width //} } +} - .survey-question__input-radio-group-container, .survey-question__input-checkbox-group-container { +.survey-question__input-radio-group-container, .survey-question__input-checkbox-group-container { display: flex; flex-direction: row; flex-wrap: wrap; &.no-wrap { - flex-direction: column; + flex-direction: row; flex-wrap: nowrap; } @@ -289,7 +288,110 @@ label strong, .apptr__form__label-standalone strong { } + .survey-question__input-radio-group-row, .survey-question__input-checkbox-group-row { + @media only screen and (min-width: $desktop-breakpoint) { + display: flex; + flex-flow: row wrap; + flex-basis: 0; + flex-grow: 1; + } + } +} + +.survey-question__input-radio-group-container-column, .survey-question__input-checkbox-group-container-column { + display: flex; + flex-direction: column; + flex-wrap: wrap; + + &.no-wrap { + flex-direction: column; + flex-wrap: nowrap; + } + + label, .apptr__form__label-standalone { + text-align: left; + margin: 0.2rem 0 0 0.3rem; + font-weight: 700; + font-size: $font-size-medium; + color: $radio; + justify-content: center; + span { + display: table-cell; + vertical-align: middle; + //height: 100%; + } + } + + .input-radio, .input-checkbox { + padding: 0 0.5rem; + } + + .label-input-container { + padding: 0; + display: flex; + align-items: center; + align-content: stretch; + justify-content: center; + } + + .label-input-custom-container { + padding: 0; + display: flex; + align-items: center; + align-content: stretch; + justify-content: flex-start !important; + width: 100%; + + label, .label-input-container { + width: auto; + margin-right: 0.5rem; + } + + } + + .input-custom { + margin: 0.5rem 0; + } + + .survey-question__input-radio-input-container, .survey-question__input-checkbox-input-container { + display: flex; + flex-flow: column wrap; + justify-content: flex-start; + background: rgba(0,0,0,0.02); + border: 1px solid rgba(0,0,0,0.1); + padding: 0.2rem 0.8rem 0.2rem 0.5rem; + margin-right: 0.5rem; + margin-bottom: 3px; + border-radius: 1.5rem; + text-align: left; + line-height: 1.05; + + &.checked { + background: rgba(0,0,0,0.06); + label, .apptr__form__label-standalone { + color: $input; + } + } + } + + .survey-question__input-radio-group-column, .survey-question__input-checkbox-group-column { + @media only screen and (min-width: $desktop-breakpoint) { + flex-basis: 0; + flex-grow: 1; + } + + } + + .survey-question__input-radio-group-row, .survey-question__input-checkbox-group-row { + @media only screen and (min-width: $desktop-breakpoint) { + display: flex; + flex-flow: row wrap; + flex-basis: 0; + flex-grow: 1; + } + + } } From f4251d1364f4d3ab3572d997ad55976cbecc2b60 Mon Sep 17 00:00:00 2001 From: Frost000 <62664922+Frost000@users.noreply.github.com> Date: Sat, 28 Oct 2023 15:02:04 -0400 Subject: [PATCH 2/4] Input sorting: Add Conditional classes to avoid code duplication Run yarn format --- .../src/components/inputs/InputCheckbox.tsx | 51 +++---------------- .../src/components/inputs/InputRadio.tsx | 21 +++----- 2 files changed, 14 insertions(+), 58 deletions(-) diff --git a/packages/evolution-frontend/src/components/inputs/InputCheckbox.tsx b/packages/evolution-frontend/src/components/inputs/InputCheckbox.tsx index fa70c40c5..eb1947df2 100644 --- a/packages/evolution-frontend/src/components/inputs/InputCheckbox.tsx +++ b/packages/evolution-frontend/src/components/inputs/InputCheckbox.tsx @@ -271,47 +271,6 @@ export class InputCheckbox - {columnedChoiceInputs} - {this.props.customId && ( -
- {strCustomLabel && ( - - )} - this.setState({ customValue: e.target.value })} - ref={this.customInputRef} - /> -
- )} -
- ); - } const strCustomLabel = this.props.widgetConfig.customLabel ? surveyHelper.translateString( @@ -322,11 +281,15 @@ export class InputCheckbox {columnedChoiceInputs} {this.props.customId && ( diff --git a/packages/evolution-frontend/src/components/inputs/InputRadio.tsx b/packages/evolution-frontend/src/components/inputs/InputRadio.tsx index 42c0cb975..35376d74c 100644 --- a/packages/evolution-frontend/src/components/inputs/InputRadio.tsx +++ b/packages/evolution-frontend/src/components/inputs/InputRadio.tsx @@ -306,23 +306,16 @@ export class InputRadio )); // separate by columns if needed: const columnedChoiceInputs = this.getColumnedChoices(choiceInputs); - if (this.props.widgetConfig.alignment === undefined || this.props.widgetConfig.alignment === 'vertical') { - return ( -
- {columnedChoiceInputs} -
- ); - } + const shouldDisplayAsRows = + this.props.widgetConfig.alignment === undefined || this.props.widgetConfig.alignment === 'auto'; return (
{columnedChoiceInputs}
From b6f2091ac99d3dbbe45ec84c15baa60e9f6de0b3 Mon Sep 17 00:00:00 2001 From: Frost000 <62664922+Frost000@users.noreply.github.com> Date: Sat, 4 Nov 2023 15:51:48 -0400 Subject: [PATCH 3/4] Input Sorting: Fix typo --- .../src/components/inputs/InputCheckbox.tsx | 2 +- .../evolution-frontend/src/components/inputs/InputRadio.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/evolution-frontend/src/components/inputs/InputCheckbox.tsx b/packages/evolution-frontend/src/components/inputs/InputCheckbox.tsx index eb1947df2..4cd849b01 100644 --- a/packages/evolution-frontend/src/components/inputs/InputCheckbox.tsx +++ b/packages/evolution-frontend/src/components/inputs/InputCheckbox.tsx @@ -289,7 +289,7 @@ export class InputCheckbox {columnedChoiceInputs} {this.props.customId && ( diff --git a/packages/evolution-frontend/src/components/inputs/InputRadio.tsx b/packages/evolution-frontend/src/components/inputs/InputRadio.tsx index 35376d74c..ef49403b0 100644 --- a/packages/evolution-frontend/src/components/inputs/InputRadio.tsx +++ b/packages/evolution-frontend/src/components/inputs/InputRadio.tsx @@ -313,9 +313,9 @@ export class InputRadio
{columnedChoiceInputs}
From 90a1d6e140c794b1fd55bcfd51b1d6ec448204a4 Mon Sep 17 00:00:00 2001 From: Frost000 <62664922+Frost000@users.noreply.github.com> Date: Sun, 12 Nov 2023 13:06:41 -0500 Subject: [PATCH 4/4] InputSorting: Add tests and fix display logic --- .../src/components/inputs/InputCheckbox.tsx | 4 +- .../src/components/inputs/InputRadio.tsx | 4 +- .../inputs/__tests__/InputCheckbox.test.tsx | 95 ++++++ .../__tests__/InputChoiceSorting.test.ts | 1 - .../inputs/__tests__/InputRadio.test.tsx | 95 ++++++ .../__snapshots__/InputCheckbox.test.tsx.snap | 312 +++++++++++++++++- .../__snapshots__/InputRadio.test.tsx.snap | 312 +++++++++++++++++- 7 files changed, 806 insertions(+), 17 deletions(-) diff --git a/packages/evolution-frontend/src/components/inputs/InputCheckbox.tsx b/packages/evolution-frontend/src/components/inputs/InputCheckbox.tsx index 4cd849b01..2961edfbd 100644 --- a/packages/evolution-frontend/src/components/inputs/InputCheckbox.tsx +++ b/packages/evolution-frontend/src/components/inputs/InputCheckbox.tsx @@ -203,7 +203,7 @@ export class InputCheckbox {columnWidgets} @@ -282,7 +282,7 @@ export class InputCheckbox const columnedChoiceInputs: JSX.Element[] = []; for (let i = 0, count = widgetsByColumn.length; i < count; i++) { const columnWidgets = widgetsByColumn[i]; - if (this.props.widgetConfig.alignment === undefined || this.props.widgetConfig.alignment === 'vertical') { + if (this.props.widgetConfig.alignment === 'vertical') { columnedChoiceInputs.push(
{columnWidgets} @@ -308,7 +308,7 @@ export class InputRadio const columnedChoiceInputs = this.getColumnedChoices(choiceInputs); const shouldDisplayAsRows = - this.props.widgetConfig.alignment === undefined || this.props.widgetConfig.alignment === 'auto'; + this.props.widgetConfig.alignment === undefined || this.props.widgetConfig.alignment === 'auto' || this.props.widgetConfig.alignment === 'vertical'; return (
{ }); }); + +describe('Render InputCheckbox with various alignments', () =>{ + + const choices = [ + { + value: 'first value', + label: { + fr: '
premiere valeur
', + en: '
first value
' + } + }, + { + value: 'second value', + label: '
second value
' + } + ]; + + const widgetConfig = { + type: 'question' as const, + twoColumns: true, + path: 'test.foo', + inputType: 'checkbox' as const, + alignment: undefined, + choices, + containsHtml: true, + label: { + fr: `Texte en français`, + en: `English text` + } + }; + + test('Undefined alignment with no rows and no columns', () =>{ + const wrapper = TestRenderer.create( + { /* nothing to do */}} + widgetConfig={widgetConfig} + value='value' + inputRef={React.createRef()} + interview={interviewAttributes} + user={userAttributes} + path='foo.test' + /> + ); + expect(wrapper).toMatchSnapshot(); + }) + test('Auto alignment with 2 columns', () =>{ + const testWidgetConfig = Object.assign({}, widgetConfig, { alignment: 'auto', columns: 2 }); + const wrapper = TestRenderer.create( + { /* nothing to do */}} + widgetConfig={testWidgetConfig} + value='value' + inputRef={React.createRef()} + interview={interviewAttributes} + user={userAttributes} + path='foo.test' + /> + ); + expect(wrapper).toMatchSnapshot(); + }) + test('Vertical alignment with 4 rows', () =>{ + const testWidgetConfig = Object.assign({}, widgetConfig, { alignment: 'vertical', customAlignmentLengths: [1,1] }); + const wrapper = TestRenderer.create( + { /* nothing to do */}} + widgetConfig={testWidgetConfig} + value='value' + inputRef={React.createRef()} + interview={interviewAttributes} + user={userAttributes} + path='foo.test' + /> + ); + expect(wrapper).toMatchSnapshot(); + }) + test('Horizontal alignment with custom alignments', () =>{ + const testWidgetConfig = Object.assign({}, widgetConfig, { alignment: 'horizontal', rows: 4 }); + const wrapper = TestRenderer.create( + { /* nothing to do */}} + widgetConfig={testWidgetConfig} + value='value' + inputRef={React.createRef()} + interview={interviewAttributes} + user={userAttributes} + path='foo.test' + /> + ); + expect(wrapper).toMatchSnapshot(); + }) +}); diff --git a/packages/evolution-frontend/src/components/inputs/__tests__/InputChoiceSorting.test.ts b/packages/evolution-frontend/src/components/inputs/__tests__/InputChoiceSorting.test.ts index 6703029c8..e7ba1f816 100644 --- a/packages/evolution-frontend/src/components/inputs/__tests__/InputChoiceSorting.test.ts +++ b/packages/evolution-frontend/src/components/inputs/__tests__/InputChoiceSorting.test.ts @@ -4,7 +4,6 @@ * This file is licensed under the MIT License. * License text available at https://opensource.org/licenses/MIT */ -import { DESTRUCTION } from 'dns'; import {sortByParameters} from '../InputChoiceSorting'; const array = [0,1,2,3,4,5,6,7,8,9]; diff --git a/packages/evolution-frontend/src/components/inputs/__tests__/InputRadio.test.tsx b/packages/evolution-frontend/src/components/inputs/__tests__/InputRadio.test.tsx index 013e45294..51ca5a076 100644 --- a/packages/evolution-frontend/src/components/inputs/__tests__/InputRadio.test.tsx +++ b/packages/evolution-frontend/src/components/inputs/__tests__/InputRadio.test.tsx @@ -258,3 +258,98 @@ describe('Render InputRadio with HTML label', () => { expect(wrapper).toMatchSnapshot(); }); }); + +describe('Render InputRadio with various alignments', () =>{ + + const choices = [ + { + value: 'first value', + label: { + fr: '
premiere valeur
', + en: '
first value
' + } + }, + { + value: 'second value', + label: '
second value
' + } + ]; + + const widgetConfig = { + type: 'question' as const, + twoColumns: true, + path: 'test.foo', + inputType: 'radio' as const, + alignment: undefined, + choices, + containsHtml: true, + label: { + fr: `Texte en français`, + en: `English text` + } + }; + + test('Undefined alignment with no rows and no columns', () =>{ + const wrapper = TestRenderer.create( + { /* nothing to do */}} + widgetConfig={widgetConfig} + value='value' + inputRef={React.createRef()} + interview={interviewAttributes} + user={userAttributes} + path='foo.test' + /> + ); + expect(wrapper).toMatchSnapshot(); + }) + test('Auto alignment with 2 columns', () =>{ + const testWidgetConfig = Object.assign({}, widgetConfig, { alignment: 'auto', columns: 2 }); + const wrapper = TestRenderer.create( + { /* nothing to do */}} + widgetConfig={testWidgetConfig} + value='value' + inputRef={React.createRef()} + interview={interviewAttributes} + user={userAttributes} + path='foo.test' + /> + ); + expect(wrapper).toMatchSnapshot(); + }) + test('Vertical alignment with 4 rows', () =>{ + const testWidgetConfig = Object.assign({}, widgetConfig, { alignment: 'vertical', customAlignmentLengths: [1,1] }); + const wrapper = TestRenderer.create( + { /* nothing to do */}} + widgetConfig={testWidgetConfig} + value='value' + inputRef={React.createRef()} + interview={interviewAttributes} + user={userAttributes} + path='foo.test' + /> + ); + expect(wrapper).toMatchSnapshot(); + }) + test('Horizontal alignment with custom alignments', () =>{ + const testWidgetConfig = Object.assign({}, widgetConfig, { alignment: 'horizontal', rows: 4 }); + const wrapper = TestRenderer.create( + { /* nothing to do */}} + widgetConfig={testWidgetConfig} + value='value' + inputRef={React.createRef()} + interview={interviewAttributes} + user={userAttributes} + path='foo.test' + /> + ); + expect(wrapper).toMatchSnapshot(); + }) +}); diff --git a/packages/evolution-frontend/src/components/inputs/__tests__/__snapshots__/InputCheckbox.test.tsx.snap b/packages/evolution-frontend/src/components/inputs/__tests__/__snapshots__/InputCheckbox.test.tsx.snap index fd8a4660d..864d803f8 100644 --- a/packages/evolution-frontend/src/components/inputs/__tests__/__snapshots__/InputCheckbox.test.tsx.snap +++ b/packages/evolution-frontend/src/components/inputs/__tests__/__snapshots__/InputCheckbox.test.tsx.snap @@ -138,6 +138,306 @@ exports[`Render InputCheckbox with minimum parameters Minimum parameters 1`] = `
`; +exports[`Render InputCheckbox with various alignments Auto alignment with 2 columns 1`] = ` +
+
+
+
+ +
", + } + } + /> + +
+
+
+
+
+
+ +
", + } + } + /> + +
+
+
+ +`; + +exports[`Render InputCheckbox with various alignments Horizontal alignment with custom alignments 1`] = ` +
+
+
+
+ +
", + } + } + /> + +
+
+
+
+
+
+ +
", + } + } + /> + +
+
+ + +`; + +exports[`Render InputCheckbox with various alignments Undefined alignment with no rows and no columns 1`] = ` +
+
+
+ +
", + } + } + /> + +
+
+
+
+ +
", + } + } + /> + +
+ + +`; + +exports[`Render InputCheckbox with various alignments Vertical alignment with 4 rows 1`] = ` +
+
+
+
+ +
", + } + } + /> + +
+
+
+
+
+
+ +
", + } + } + /> + +
+
+ + +`; + exports[`Render InputCheckbox with various parameter combinations, all parameters Conditional value hidden, same line 1`] = `
`; +exports[`Render InputRadio with various alignments Auto alignment with 2 columns 1`] = ` +
+
+
+
+ +
", + } + } + /> + +
+
+
+
+
+
+ +
", + } + } + /> + +
+
+
+
+`; + +exports[`Render InputRadio with various alignments Horizontal alignment with custom alignments 1`] = ` +
+
+
+
+ +
", + } + } + /> + +
+
+
+
+
+
+ +
", + } + } + /> + +
+
+
+
+`; + +exports[`Render InputRadio with various alignments Undefined alignment with no rows and no columns 1`] = ` +
+
+
+ +
", + } + } + /> + +
+
+
+
+ +
", + } + } + /> + +
+
+
+`; + +exports[`Render InputRadio with various alignments Vertical alignment with 4 rows 1`] = ` +
+
+
+
+ +
", + } + } + /> + +
+
+
+
+
+
+ +
", + } + } + /> + +
+
+
+
+`; + exports[`Render InputRadio with various parameter combinations, all parameters Conditional value hidden, same line 1`] = `