diff --git a/src/common/__tests__/__snapshots__/dateHelpers.test.js.snap b/src/common/__tests__/__snapshots__/dateHelpers.test.js.snap index 19a60fde6..d890b2652 100644 --- a/src/common/__tests__/__snapshots__/dateHelpers.test.js.snap +++ b/src/common/__tests__/__snapshots__/dateHelpers.test.js.snap @@ -72,6 +72,8 @@ exports[`DateHelpers should have specific functions: dateHelpers 1`] = ` exports[`DateHelpers should return a predictable object and list of months based on a year range: get a specific month by name 1`] = ` { "_title": "april", + "endDateString": "2019-04-30T23:59:59.999Z", + "startDateString": "2019-04-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"April"})", "value": { "endDate": 2019-04-30T23:59:59.999Z, @@ -83,6 +85,8 @@ exports[`DateHelpers should return a predictable object and list of months based exports[`DateHelpers should return a predictable object and list of months based on a year range: get a specific month by number 1`] = ` { "_title": "march", + "endDateString": "2019-03-31T23:59:59.999Z", + "startDateString": "2019-03-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"March"})", "value": { "endDate": 2019-03-31T23:59:59.999Z, @@ -96,6 +100,8 @@ exports[`DateHelpers should return a predictable object and list of months based "keyDateTimeRanges": { "1": { "_title": "january", + "endDateString": "2019-01-31T23:59:59.999Z", + "startDateString": "2019-01-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"January"})", "value": { "endDate": 2019-01-31T23:59:59.999Z, @@ -104,6 +110,8 @@ exports[`DateHelpers should return a predictable object and list of months based }, "10": { "_title": "october", + "endDateString": "2018-10-31T23:59:59.999Z", + "startDateString": "2018-10-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"October 2018"})", "value": { "endDate": 2018-10-31T23:59:59.999Z, @@ -112,6 +120,8 @@ exports[`DateHelpers should return a predictable object and list of months based }, "11": { "_title": "november", + "endDateString": "2018-11-30T23:59:59.999Z", + "startDateString": "2018-11-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"November 2018"})", "value": { "endDate": 2018-11-30T23:59:59.999Z, @@ -120,6 +130,8 @@ exports[`DateHelpers should return a predictable object and list of months based }, "12": { "_title": "december", + "endDateString": "2018-12-31T23:59:59.999Z", + "startDateString": "2018-12-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"December 2018"})", "value": { "endDate": 2018-12-31T23:59:59.999Z, @@ -128,6 +140,8 @@ exports[`DateHelpers should return a predictable object and list of months based }, "2": { "_title": "february", + "endDateString": "2019-02-28T23:59:59.999Z", + "startDateString": "2019-02-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"February"})", "value": { "endDate": 2019-02-28T23:59:59.999Z, @@ -136,6 +150,8 @@ exports[`DateHelpers should return a predictable object and list of months based }, "3": { "_title": "march", + "endDateString": "2019-03-31T23:59:59.999Z", + "startDateString": "2019-03-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"March"})", "value": { "endDate": 2019-03-31T23:59:59.999Z, @@ -144,6 +160,8 @@ exports[`DateHelpers should return a predictable object and list of months based }, "4": { "_title": "april", + "endDateString": "2019-04-30T23:59:59.999Z", + "startDateString": "2019-04-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"April"})", "value": { "endDate": 2019-04-30T23:59:59.999Z, @@ -152,6 +170,8 @@ exports[`DateHelpers should return a predictable object and list of months based }, "5": { "_title": "may", + "endDateString": "2019-05-31T23:59:59.999Z", + "startDateString": "2019-05-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"May"})", "value": { "endDate": 2019-05-31T23:59:59.999Z, @@ -160,6 +180,8 @@ exports[`DateHelpers should return a predictable object and list of months based }, "6": { "_title": "june", + "endDateString": "2019-06-30T23:59:59.999Z", + "startDateString": "2019-06-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"June"})", "value": { "endDate": 2019-06-30T23:59:59.999Z, @@ -168,6 +190,8 @@ exports[`DateHelpers should return a predictable object and list of months based }, "7": { "_title": "july", + "endDateString": "2019-07-31T23:59:59.999Z", + "startDateString": "2019-07-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"July"})", "value": { "endDate": 2019-07-31T23:59:59.999Z, @@ -176,6 +200,8 @@ exports[`DateHelpers should return a predictable object and list of months based }, "8": { "_title": "august", + "endDateString": "2018-08-31T23:59:59.999Z", + "startDateString": "2018-08-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"August 2018"})", "value": { "endDate": 2018-08-31T23:59:59.999Z, @@ -184,6 +210,8 @@ exports[`DateHelpers should return a predictable object and list of months based }, "9": { "_title": "september", + "endDateString": "2018-09-30T23:59:59.999Z", + "startDateString": "2018-09-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"September 2018"})", "value": { "endDate": 2018-09-30T23:59:59.999Z, @@ -192,6 +220,8 @@ exports[`DateHelpers should return a predictable object and list of months based }, "april": { "_title": "april", + "endDateString": "2019-04-30T23:59:59.999Z", + "startDateString": "2019-04-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"April"})", "value": { "endDate": 2019-04-30T23:59:59.999Z, @@ -200,6 +230,8 @@ exports[`DateHelpers should return a predictable object and list of months based }, "august": { "_title": "august", + "endDateString": "2018-08-31T23:59:59.999Z", + "startDateString": "2018-08-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"August 2018"})", "value": { "endDate": 2018-08-31T23:59:59.999Z, @@ -208,7 +240,9 @@ exports[`DateHelpers should return a predictable object and list of months based }, "current": { "_title": "current", + "endDateString": "2019-07-31T23:59:59.999Z", "isCurrent": true, + "startDateString": "2019-07-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"current"})", "value": { "endDate": 2019-07-31T23:59:59.999Z, @@ -217,6 +251,8 @@ exports[`DateHelpers should return a predictable object and list of months based }, "december": { "_title": "december", + "endDateString": "2018-12-31T23:59:59.999Z", + "startDateString": "2018-12-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"December 2018"})", "value": { "endDate": 2018-12-31T23:59:59.999Z, @@ -225,6 +261,8 @@ exports[`DateHelpers should return a predictable object and list of months based }, "february": { "_title": "february", + "endDateString": "2019-02-28T23:59:59.999Z", + "startDateString": "2019-02-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"February"})", "value": { "endDate": 2019-02-28T23:59:59.999Z, @@ -233,6 +271,8 @@ exports[`DateHelpers should return a predictable object and list of months based }, "january": { "_title": "january", + "endDateString": "2019-01-31T23:59:59.999Z", + "startDateString": "2019-01-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"January"})", "value": { "endDate": 2019-01-31T23:59:59.999Z, @@ -241,6 +281,8 @@ exports[`DateHelpers should return a predictable object and list of months based }, "july": { "_title": "july", + "endDateString": "2019-07-31T23:59:59.999Z", + "startDateString": "2019-07-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"July"})", "value": { "endDate": 2019-07-31T23:59:59.999Z, @@ -249,6 +291,8 @@ exports[`DateHelpers should return a predictable object and list of months based }, "june": { "_title": "june", + "endDateString": "2019-06-30T23:59:59.999Z", + "startDateString": "2019-06-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"June"})", "value": { "endDate": 2019-06-30T23:59:59.999Z, @@ -257,6 +301,8 @@ exports[`DateHelpers should return a predictable object and list of months based }, "march": { "_title": "march", + "endDateString": "2019-03-31T23:59:59.999Z", + "startDateString": "2019-03-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"March"})", "value": { "endDate": 2019-03-31T23:59:59.999Z, @@ -265,6 +311,8 @@ exports[`DateHelpers should return a predictable object and list of months based }, "may": { "_title": "may", + "endDateString": "2019-05-31T23:59:59.999Z", + "startDateString": "2019-05-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"May"})", "value": { "endDate": 2019-05-31T23:59:59.999Z, @@ -273,6 +321,8 @@ exports[`DateHelpers should return a predictable object and list of months based }, "november": { "_title": "november", + "endDateString": "2018-11-30T23:59:59.999Z", + "startDateString": "2018-11-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"November 2018"})", "value": { "endDate": 2018-11-30T23:59:59.999Z, @@ -281,6 +331,8 @@ exports[`DateHelpers should return a predictable object and list of months based }, "october": { "_title": "october", + "endDateString": "2018-10-31T23:59:59.999Z", + "startDateString": "2018-10-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"October 2018"})", "value": { "endDate": 2018-10-31T23:59:59.999Z, @@ -289,6 +341,8 @@ exports[`DateHelpers should return a predictable object and list of months based }, "september": { "_title": "september", + "endDateString": "2018-09-30T23:59:59.999Z", + "startDateString": "2018-09-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"September 2018"})", "value": { "endDate": 2018-09-30T23:59:59.999Z, @@ -299,7 +353,9 @@ exports[`DateHelpers should return a predictable object and list of months based "listDateTimeRanges": [ { "_title": "current", + "endDateString": "2019-07-31T23:59:59.999Z", "isCurrent": true, + "startDateString": "2019-07-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"current"})", "value": { "endDate": 2019-07-31T23:59:59.999Z, @@ -308,6 +364,8 @@ exports[`DateHelpers should return a predictable object and list of months based }, { "_title": "june", + "endDateString": "2019-06-30T23:59:59.999Z", + "startDateString": "2019-06-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"June"})", "value": { "endDate": 2019-06-30T23:59:59.999Z, @@ -316,6 +374,8 @@ exports[`DateHelpers should return a predictable object and list of months based }, { "_title": "may", + "endDateString": "2019-05-31T23:59:59.999Z", + "startDateString": "2019-05-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"May"})", "value": { "endDate": 2019-05-31T23:59:59.999Z, @@ -324,6 +384,8 @@ exports[`DateHelpers should return a predictable object and list of months based }, { "_title": "april", + "endDateString": "2019-04-30T23:59:59.999Z", + "startDateString": "2019-04-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"April"})", "value": { "endDate": 2019-04-30T23:59:59.999Z, @@ -332,6 +394,8 @@ exports[`DateHelpers should return a predictable object and list of months based }, { "_title": "march", + "endDateString": "2019-03-31T23:59:59.999Z", + "startDateString": "2019-03-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"March"})", "value": { "endDate": 2019-03-31T23:59:59.999Z, @@ -340,6 +404,8 @@ exports[`DateHelpers should return a predictable object and list of months based }, { "_title": "february", + "endDateString": "2019-02-28T23:59:59.999Z", + "startDateString": "2019-02-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"February"})", "value": { "endDate": 2019-02-28T23:59:59.999Z, @@ -348,6 +414,8 @@ exports[`DateHelpers should return a predictable object and list of months based }, { "_title": "january", + "endDateString": "2019-01-31T23:59:59.999Z", + "startDateString": "2019-01-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"January"})", "value": { "endDate": 2019-01-31T23:59:59.999Z, @@ -356,6 +424,8 @@ exports[`DateHelpers should return a predictable object and list of months based }, { "_title": "december", + "endDateString": "2018-12-31T23:59:59.999Z", + "startDateString": "2018-12-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"December 2018"})", "value": { "endDate": 2018-12-31T23:59:59.999Z, @@ -364,6 +434,8 @@ exports[`DateHelpers should return a predictable object and list of months based }, { "_title": "november", + "endDateString": "2018-11-30T23:59:59.999Z", + "startDateString": "2018-11-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"November 2018"})", "value": { "endDate": 2018-11-30T23:59:59.999Z, @@ -372,6 +444,8 @@ exports[`DateHelpers should return a predictable object and list of months based }, { "_title": "october", + "endDateString": "2018-10-31T23:59:59.999Z", + "startDateString": "2018-10-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"October 2018"})", "value": { "endDate": 2018-10-31T23:59:59.999Z, @@ -380,6 +454,8 @@ exports[`DateHelpers should return a predictable object and list of months based }, { "_title": "september", + "endDateString": "2018-09-30T23:59:59.999Z", + "startDateString": "2018-09-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"September 2018"})", "value": { "endDate": 2018-09-30T23:59:59.999Z, @@ -388,6 +464,8 @@ exports[`DateHelpers should return a predictable object and list of months based }, { "_title": "august", + "endDateString": "2018-08-31T23:59:59.999Z", + "startDateString": "2018-08-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"August 2018"})", "value": { "endDate": 2018-08-31T23:59:59.999Z, diff --git a/src/common/dateHelpers.js b/src/common/dateHelpers.js index b860c0be1..7616c6c52 100644 --- a/src/common/dateHelpers.js +++ b/src/common/dateHelpers.js @@ -195,6 +195,7 @@ const getRangedMonthDateTime = (month, defaultLocale = helpers.UI_LOCALE_DEFAULT while (endDateUpdated > startDateUpdated || startDateUpdated.getUTCMonth() === endDateUpdated.getUTCMonth()) { const dateTime = { + startDateString: setStartOfDay(startDateUpdated).toISOString(), value: { startDate: new Date(setStartOfDay(startDateUpdated)) } @@ -210,6 +211,7 @@ const getRangedMonthDateTime = (month, defaultLocale = helpers.UI_LOCALE_DEFAULT const isNextYear = currentYear !== startDateUpdated.getUTCFullYear(); dateTime.title = (isNextYear && titleYear) || title; dateTime._title = title.toLowerCase(); + dateTime.endDateString = setEndOfMonth(startDateUpdated).toISOString(); dateTime.value.endDate = setEndOfMonth(startDateUpdated); startDateUpdated.setUTCMonth(startDateUpdated.getUTCMonth() + 1); diff --git a/src/components/README.md b/src/components/README.md index a24ddd395..67f535957 100644 --- a/src/components/README.md +++ b/src/components/README.md @@ -1465,8 +1465,8 @@ A bundled wrapper for PF Select, Dropdown. * [.memo](#Form.module_Select..updateOptions.memo) * [~updateSelectedOptions(options)](#Form.module_Select..updateSelectedOptions) ⇒ Array \| Array.<("NaN"\|"null"\|unknown)> * [.memo](#Form.module_Select..updateSelectedOptions.memo) - * [~updateSelectedProp(params)](#Form.module_Select..updateSelectedProp) ⇒ Object \| undefined \| Array.<{isSelected:boolean}> \| Array - * [.memo](#Form.module_Select..updateSelectedProp.memo) + * [~updateOptionsSelectedOptions(params)](#Form.module_Select..updateOptionsSelectedOptions) ⇒ Object \| undefined \| Array.<{isSelected:boolean}> \| Array + * [.memo](#Form.module_Select..updateOptionsSelectedOptions.memo) * [~formatEvent(params)](#Form.module_Select..formatEvent) ⇒ CustomEvent.<{keyCode, currentTarget: {}, name, checked: \*, id: \*, persist: function(), value, target: {}, selected: (unknown\|Array.<unknown>), selectedIndex: Array.<number>, type: ("select-one"\|"select-multiple"), value: unknown}> * [~setSelectElements([variant])](#Form.module_Select..setSelectElements) ⇒ Object * [.memo](#Form.module_Select..setSelectElements.memo) @@ -1567,9 +1567,9 @@ Update selected list options for consumption. A memoized response for the updateSelectedOptions function. Assigned to a property for testing function. **Kind**: static property of [updateSelectedOptions](#Form.module_Select..updateSelectedOptions) - + -### Select~updateSelectedProp(params) ⇒ Object \| undefined \| Array.<{isSelected:boolean}> \| Array +### Select~updateOptionsSelectedOptions(params) ⇒ Object \| undefined \| Array.<{isSelected:boolean}> \| Array Update the isSelected property for formatted options. **Kind**: inner method of [Select](#Form.module_Select) @@ -1591,16 +1591,16 @@ Update the isSelected property for formatted options. - + -#### updateSelectedProp.memo -A memoized response for the updateSelectedProp function. Assigned to a property for testing function. +#### updateOptionsSelectedOptions.memo +A memoized response for the updateOptionsSelectedOptions function. Assigned to a property for testing function. -**Kind**: static property of [updateSelectedProp](#Form.module_Select..updateSelectedProp) +**Kind**: static property of [updateOptionsSelectedOptions](#Form.module_Select..updateOptionsSelectedOptions) ### Select~formatEvent(params) ⇒ CustomEvent.<{keyCode, currentTarget: {}, name, checked: \*, id: \*, persist: function(), value, target: {}, selected: (unknown\|Array.<unknown>), selectedIndex: Array.<number>, type: ("select-one"\|"select-multiple"), value: unknown}> -Expand returned event for select responses. +Expand the returned event for select responses. **Kind**: inner method of [Select](#Form.module_Select) @@ -6907,7 +6907,7 @@ On select update category. ### ToolbarFieldSelectCategory~useSelectCategoryOptions(options) ⇒ Object -Return filtered category options, current, and initial value. +Return filtered configured category options, current, and initial value. **Kind**: inner method of [ToolbarFieldSelectCategory](#Toolbar.module_ToolbarFieldSelectCategory)
diff --git a/src/components/form/__tests__/__snapshots__/select.test.js.snap b/src/components/form/__tests__/__snapshots__/select.test.js.snap index b77916af5..5363d648b 100644 --- a/src/components/form/__tests__/__snapshots__/select.test.js.snap +++ b/src/components/form/__tests__/__snapshots__/select.test.js.snap @@ -558,285 +558,926 @@ exports[`helpers updateOptions should allow an array of varied options, string, ] `; -exports[`helpers updateSelectedOptions should only allow lists or any single option type, NaN 1`] = ` -[ - "NaN", -] +exports[`helpers updateOptionsSelectedOptions should add isSelected enhancements to options, multiple preselected, single selected 1`] = ` +{ + "options": [ + { + "index": 0, + "isSelected": false, + "key": "c108532930", + "title": "a", + "value": "a", + }, + { + "index": 1, + "isSelected": true, + "key": "c689449643", + "title": "undefined", + "value": "lorem ipsum", + }, + { + "index": 2, + "isSelected": true, + "key": "c1578675715", + "title": "undefined", + "value": 3, + }, + { + "index": 3, + "isSelected": false, + "key": "c-1081172732", + "title": "b", + "value": "b", + }, + { + "index": 4, + "isSelected": false, + "key": "c-1726893976", + "title": "4", + "value": 4, + }, + ], + "selected": { + "index": 1, + "isSelected": true, + "key": "c689449643", + "title": "undefined", + "value": "lorem ipsum", + }, +} `; -exports[`helpers updateSelectedOptions should only allow lists or any single option type, array 1`] = ` -[ - "a", - "b", - 3, - { - "value": "hello", - }, -] +exports[`helpers updateOptionsSelectedOptions should add isSelected enhancements to options, multiple selected 1`] = ` +{ + "options": [ + { + "index": 0, + "isSelected": true, + "key": "c108532930", + "title": "a", + "value": "a", + }, + { + "index": 1, + "isSelected": true, + "key": "c689449643", + "title": "undefined", + "value": "lorem ipsum", + }, + { + "index": 2, + "isSelected": true, + "key": "c-1939168410", + "title": "3", + "value": 3, + }, + { + "index": 3, + "isSelected": false, + "key": "c-1081172732", + "title": "b", + "value": "b", + }, + { + "index": 4, + "isSelected": true, + "key": "c-1726893976", + "title": "4", + "value": 4, + }, + ], + "selected": [ + { + "index": 0, + "isSelected": true, + "key": "c108532930", + "title": "a", + "value": "a", + }, + { + "index": 1, + "isSelected": true, + "key": "c689449643", + "title": "undefined", + "value": "lorem ipsum", + }, + { + "index": 2, + "isSelected": true, + "key": "c-1939168410", + "title": "3", + "value": 3, + }, + { + "index": 4, + "isSelected": true, + "key": "c-1726893976", + "title": "4", + "value": 4, + }, + ], +} `; -exports[`helpers updateSelectedOptions should only allow lists or any single option type, null 1`] = ` -[ - "null", -] +exports[`helpers updateOptionsSelectedOptions should add isSelected enhancements to options, none 1`] = ` +{ + "options": [ + { + "index": 0, + "isSelected": false, + "key": "c108532930", + "title": "a", + "value": "a", + }, + { + "index": 1, + "isSelected": false, + "key": "c-1081172732", + "title": "b", + "value": "b", + }, + { + "index": 2, + "isSelected": false, + "key": "c-1939168410", + "title": "3", + "value": 3, + }, + ], + "selected": undefined, +} `; -exports[`helpers updateSelectedOptions should only allow lists or any single option type, null, undefined, NaN 1`] = ` -[ - "a", - "b", - 3, - { - "value": "hello", +exports[`helpers updateOptionsSelectedOptions should add isSelected enhancements to options, number 1`] = ` +{ + "options": [ + { + "index": 0, + "isSelected": false, + "key": "c108532930", + "title": "a", + "value": "a", + }, + { + "index": 1, + "isSelected": false, + "key": "c-1081172732", + "title": "b", + "value": "b", + }, + { + "index": 2, + "isSelected": true, + "key": "c-1939168410", + "title": "3", + "value": 3, + }, + ], + "selected": { + "index": 2, + "isSelected": true, + "key": "c-1939168410", + "title": "3", + "value": 3, }, - null, - undefined, - NaN, -] +} `; -exports[`helpers updateSelectedOptions should only allow lists or any single option type, number 1`] = ` -[ - 3, -] +exports[`helpers updateOptionsSelectedOptions should add isSelected enhancements to options, object 1`] = ` +{ + "options": [ + { + "index": 0, + "isSelected": false, + "key": "c108532930", + "title": "a", + "value": "a", + }, + { + "index": 1, + "isSelected": true, + "key": "c689449643", + "title": "undefined", + "value": "lorem ipsum", + }, + { + "index": 2, + "isSelected": false, + "key": "c-1939168410", + "title": "3", + "value": 3, + }, + ], + "selected": { + "index": 1, + "isSelected": true, + "key": "c689449643", + "title": "undefined", + "value": "lorem ipsum", + }, +} `; -exports[`helpers updateSelectedOptions should only allow lists or any single option type, object 1`] = ` -[ - { - "value": "hello", +exports[`helpers updateOptionsSelectedOptions should add isSelected enhancements to options, object as value 1`] = ` +{ + "options": [ + { + "index": 0, + "isSelected": false, + "key": "c108532930", + "title": "a", + "value": "a", + }, + { + "index": 1, + "isSelected": true, + "key": "c-1505147529", + "title": "undefined", + "value": { + "data": "lorem ipsum", + }, + }, + { + "index": 2, + "isSelected": false, + "key": "c-1939168410", + "title": "3", + "value": 3, + }, + ], + "selected": { + "index": 1, + "isSelected": true, + "key": "c-1505147529", + "title": "undefined", + "value": { + "data": "lorem ipsum", + }, }, -] +} `; -exports[`helpers updateSelectedOptions should only allow lists or any single option type, string 1`] = ` -[ - "a", -] +exports[`helpers updateOptionsSelectedOptions should add isSelected enhancements to options, preselected 1`] = ` +{ + "options": [ + { + "index": 0, + "isSelected": false, + "key": "c108532930", + "title": "a", + "value": "a", + }, + { + "index": 1, + "isSelected": true, + "key": "c689449643", + "title": "undefined", + "value": "lorem ipsum", + }, + { + "index": 2, + "isSelected": false, + "key": "c-1939168410", + "title": "3", + "value": 3, + }, + ], + "selected": { + "index": 1, + "isSelected": true, + "key": "c689449643", + "title": "undefined", + "value": "lorem ipsum", + }, +} `; -exports[`helpers updateSelectedOptions should only allow lists or any single option type, undefined 1`] = `[]`; +exports[`helpers updateOptionsSelectedOptions should add isSelected enhancements to options, purposeful NaN value 1`] = ` +{ + "options": [ + { + "index": 0, + "isSelected": false, + "key": "c108532930", + "title": "a", + "value": "a", + }, + { + "index": 1, + "isSelected": true, + "key": "c926437026", + "title": "NaN", + "value": NaN, + }, + { + "index": 2, + "isSelected": false, + "key": "c-1939168410", + "title": "3", + "value": 3, + }, + { + "index": 3, + "isSelected": false, + "key": "c-1081172732", + "title": "b", + "value": "b", + }, + { + "index": 4, + "isSelected": false, + "key": "c-1726893976", + "title": "4", + "value": 4, + }, + ], + "selected": { + "index": 1, + "isSelected": true, + "key": "c926437026", + "title": "NaN", + "value": NaN, + }, +} +`; -exports[`helpers updateSelectedProp should add isSelected enhancements to options, multiple 1`] = ` -[ - { - "index": 0, +exports[`helpers updateOptionsSelectedOptions should add isSelected enhancements to options, purposeful NaN value as array lookup 1`] = ` +{ + "options": [ + { + "index": 0, + "isSelected": false, + "key": "c108532930", + "title": "a", + "value": "a", + }, + { + "index": 1, + "isSelected": true, + "key": "c926437026", + "title": "NaN", + "value": NaN, + }, + { + "index": 2, + "isSelected": false, + "key": "c-1939168410", + "title": "3", + "value": 3, + }, + { + "index": 3, + "isSelected": false, + "key": "c-1081172732", + "title": "b", + "value": "b", + }, + { + "index": 4, + "isSelected": false, + "key": "c-1726893976", + "title": "4", + "value": 4, + }, + ], + "selected": { + "index": 1, "isSelected": true, - "key": "c108532930", - "title": "a", - "value": "a", + "key": "c926437026", + "title": "NaN", + "value": NaN, }, - { +} +`; + +exports[`helpers updateOptionsSelectedOptions should add isSelected enhancements to options, purposeful NaN value as title string lookup 1`] = ` +{ + "options": [ + { + "index": 0, + "isSelected": false, + "key": "c108532930", + "title": "a", + "value": "a", + }, + { + "index": 1, + "isSelected": true, + "key": "c926437026", + "title": "NaN", + "value": NaN, + }, + { + "index": 2, + "isSelected": false, + "key": "c-1939168410", + "title": "3", + "value": 3, + }, + { + "index": 3, + "isSelected": false, + "key": "c-1081172732", + "title": "b", + "value": "b", + }, + { + "index": 4, + "isSelected": false, + "key": "c-1726893976", + "title": "4", + "value": 4, + }, + ], + "selected": { "index": 1, "isSelected": true, - "key": "c689449643", - "title": "undefined", - "value": "lorem ipsum", + "key": "c926437026", + "title": "NaN", + "value": NaN, }, - { - "index": 2, +} +`; + +exports[`helpers updateOptionsSelectedOptions should add isSelected enhancements to options, purposeful empty value 1`] = ` +{ + "options": [ + { + "index": 0, + "isSelected": false, + "key": "c108532930", + "title": "a", + "value": "a", + }, + { + "index": 1, + "isSelected": true, + "key": "c2055062677", + "title": "Empty", + "value": "", + }, + { + "index": 2, + "isSelected": false, + "key": "c-1939168410", + "title": "3", + "value": 3, + }, + { + "index": 3, + "isSelected": false, + "key": "c-1081172732", + "title": "b", + "value": "b", + }, + { + "index": 4, + "isSelected": false, + "key": "c-1726893976", + "title": "4", + "value": 4, + }, + ], + "selected": { + "index": 1, "isSelected": true, - "key": "c-1939168410", - "title": "3", - "value": 3, + "key": "c2055062677", + "title": "Empty", + "value": "", }, -] +} `; -exports[`helpers updateSelectedProp should add isSelected enhancements to options, multiple preselected 1`] = ` -[ - { +exports[`helpers updateOptionsSelectedOptions should add isSelected enhancements to options, purposeful empty value as array lookup 1`] = ` +{ + "options": [ + { + "index": 0, + "isSelected": false, + "key": "c108532930", + "title": "a", + "value": "a", + }, + { + "index": 1, + "isSelected": true, + "key": "c2055062677", + "title": "Empty", + "value": "", + }, + { + "index": 2, + "isSelected": false, + "key": "c-1939168410", + "title": "3", + "value": 3, + }, + { + "index": 3, + "isSelected": false, + "key": "c-1081172732", + "title": "b", + "value": "b", + }, + { + "index": 4, + "isSelected": false, + "key": "c-1726893976", + "title": "4", + "value": 4, + }, + ], + "selected": { + "index": 1, + "isSelected": true, + "key": "c2055062677", + "title": "Empty", + "value": "", + }, +} +`; + +exports[`helpers updateOptionsSelectedOptions should add isSelected enhancements to options, purposeful null value 1`] = ` +{ + "options": [ + { + "index": 0, + "isSelected": false, + "key": "c108532930", + "title": "a", + "value": "a", + }, + { + "index": 1, + "isSelected": true, + "key": "c261075650", + "title": "null", + "value": null, + }, + { + "index": 2, + "isSelected": false, + "key": "c-1939168410", + "title": "3", + "value": 3, + }, + { + "index": 3, + "isSelected": false, + "key": "c-1081172732", + "title": "b", + "value": "b", + }, + { + "index": 4, + "isSelected": false, + "key": "c-1726893976", + "title": "4", + "value": 4, + }, + ], + "selected": { "index": 1, "isSelected": true, - "key": "c689449643", - "title": "undefined", - "value": "lorem ipsum", - }, - { - "index": 2, - "isSelected": true, - "key": "c1578675715", - "title": "undefined", - "value": 3, + "key": "c261075650", + "title": "null", + "value": null, }, -] +} `; -exports[`helpers updateSelectedProp should add isSelected enhancements to options, none 1`] = `undefined`; - -exports[`helpers updateSelectedProp should add isSelected enhancements to options, number 1`] = ` +exports[`helpers updateOptionsSelectedOptions should add isSelected enhancements to options, purposeful null value as array lookup 1`] = ` { - "index": 0, - "isSelected": true, - "key": "c108532930", - "title": "a", - "value": "a", + "options": [ + { + "index": 0, + "isSelected": false, + "key": "c108532930", + "title": "a", + "value": "a", + }, + { + "index": 1, + "isSelected": true, + "key": "c261075650", + "title": "null", + "value": null, + }, + { + "index": 2, + "isSelected": false, + "key": "c-1939168410", + "title": "3", + "value": 3, + }, + { + "index": 3, + "isSelected": false, + "key": "c-1081172732", + "title": "b", + "value": "b", + }, + { + "index": 4, + "isSelected": false, + "key": "c-1726893976", + "title": "4", + "value": 4, + }, + ], + "selected": { + "index": 1, + "isSelected": true, + "key": "c261075650", + "title": "null", + "value": null, + }, } `; -exports[`helpers updateSelectedProp should add isSelected enhancements to options, object 1`] = ` +exports[`helpers updateOptionsSelectedOptions should add isSelected enhancements to options, purposeful null value as title string lookup 1`] = ` { - "index": 1, - "isSelected": true, - "key": "c689449643", - "title": "undefined", - "value": "lorem ipsum", + "options": [ + { + "index": 0, + "isSelected": false, + "key": "c108532930", + "title": "a", + "value": "a", + }, + { + "index": 1, + "isSelected": true, + "key": "c261075650", + "title": "null", + "value": null, + }, + { + "index": 2, + "isSelected": false, + "key": "c-1939168410", + "title": "3", + "value": 3, + }, + { + "index": 3, + "isSelected": false, + "key": "c-1081172732", + "title": "b", + "value": "b", + }, + { + "index": 4, + "isSelected": false, + "key": "c-1726893976", + "title": "4", + "value": 4, + }, + ], + "selected": { + "index": 1, + "isSelected": true, + "key": "c261075650", + "title": "null", + "value": null, + }, } `; -exports[`helpers updateSelectedProp should add isSelected enhancements to options, object as value 1`] = ` +exports[`helpers updateOptionsSelectedOptions should add isSelected enhancements to options, purposeful undefined as title string lookup 1`] = ` { - "index": 1, - "isSelected": true, - "key": "c-1505147529", - "title": "undefined", - "value": { - "data": "lorem ipsum", + "options": [ + { + "index": 0, + "isSelected": false, + "key": "c108532930", + "title": "a", + "value": "a", + }, + { + "index": 1, + "isSelected": true, + "key": "c505095949", + "title": "undefined", + "value": undefined, + }, + { + "index": 2, + "isSelected": false, + "key": "c-1939168410", + "title": "3", + "value": 3, + }, + { + "index": 3, + "isSelected": false, + "key": "c-1081172732", + "title": "b", + "value": "b", + }, + { + "index": 4, + "isSelected": false, + "key": "c-1726893976", + "title": "4", + "value": 4, + }, + ], + "selected": { + "index": 1, + "isSelected": true, + "key": "c505095949", + "title": "undefined", + "value": undefined, }, } `; -exports[`helpers updateSelectedProp should add isSelected enhancements to options, preselected 1`] = ` +exports[`helpers updateOptionsSelectedOptions should add isSelected enhancements to options, purposeful undefined value, this will fail 1`] = ` { - "index": 1, - "isSelected": true, - "key": "c689449643", - "title": "undefined", - "value": "lorem ipsum", + "options": [ + { + "index": 0, + "isSelected": false, + "key": "c108532930", + "title": "a", + "value": "a", + }, + { + "index": 1, + "isSelected": false, + "key": "c505095949", + "title": "undefined", + "value": undefined, + }, + { + "index": 2, + "isSelected": false, + "key": "c-1939168410", + "title": "3", + "value": 3, + }, + { + "index": 3, + "isSelected": false, + "key": "c-1081172732", + "title": "b", + "value": "b", + }, + { + "index": 4, + "isSelected": false, + "key": "c-1726893976", + "title": "4", + "value": 4, + }, + ], + "selected": undefined, } `; -exports[`helpers updateSelectedProp should add isSelected enhancements to options, purposeful NaN value 1`] = ` -[ - { - "index": 1, - "isSelected": true, - "key": "c926437026", - "title": "NaN", - "value": NaN, - }, -] -`; - -exports[`helpers updateSelectedProp should add isSelected enhancements to options, purposeful NaN value as array lookup 1`] = ` -[ - { +exports[`helpers updateOptionsSelectedOptions should add isSelected enhancements to options, purposeful undefined with required array lookup 1`] = ` +{ + "options": [ + { + "index": 0, + "isSelected": false, + "key": "c108532930", + "title": "a", + "value": "a", + }, + { + "index": 1, + "isSelected": true, + "key": "c505095949", + "title": "undefined", + "value": undefined, + }, + { + "index": 2, + "isSelected": false, + "key": "c-1939168410", + "title": "3", + "value": 3, + }, + { + "index": 3, + "isSelected": false, + "key": "c-1081172732", + "title": "b", + "value": "b", + }, + { + "index": 4, + "isSelected": false, + "key": "c-1726893976", + "title": "4", + "value": 4, + }, + ], + "selected": { "index": 1, "isSelected": true, - "key": "c926437026", - "title": "NaN", - "value": NaN, + "key": "c505095949", + "title": "undefined", + "value": undefined, }, -] +} `; -exports[`helpers updateSelectedProp should add isSelected enhancements to options, purposeful NaN value as title string lookup 1`] = ` -[ - { - "index": 1, +exports[`helpers updateOptionsSelectedOptions should add isSelected enhancements to options, string 1`] = ` +{ + "options": [ + { + "index": 0, + "isSelected": true, + "key": "c108532930", + "title": "a", + "value": "a", + }, + { + "index": 1, + "isSelected": false, + "key": "c-1081172732", + "title": "b", + "value": "b", + }, + { + "index": 2, + "isSelected": false, + "key": "c-1939168410", + "title": "3", + "value": 3, + }, + ], + "selected": { + "index": 0, "isSelected": true, - "key": "c926437026", - "title": "NaN", - "value": NaN, + "key": "c108532930", + "title": "a", + "value": "a", }, -] +} `; -exports[`helpers updateSelectedProp should add isSelected enhancements to options, purposeful empty value 1`] = ` +exports[`helpers updateSelectedOptions should only allow lists or any single option type, NaN 1`] = ` [ - { - "index": 1, - "isSelected": true, - "key": "c2055062677", - "title": "Empty", - "value": "", - }, + "NaN", ] `; -exports[`helpers updateSelectedProp should add isSelected enhancements to options, purposeful empty value as array lookup 1`] = ` +exports[`helpers updateSelectedOptions should only allow lists or any single option type, array 1`] = ` [ + "a", + "b", + 3, { - "index": 1, - "isSelected": true, - "key": "c2055062677", - "title": "Empty", - "value": "", + "value": "hello", }, ] `; -exports[`helpers updateSelectedProp should add isSelected enhancements to options, purposeful null value 1`] = ` +exports[`helpers updateSelectedOptions should only allow lists or any single option type, null 1`] = ` [ - { - "index": 1, - "isSelected": true, - "key": "c261075650", - "title": "null", - "value": null, - }, + "null", ] `; -exports[`helpers updateSelectedProp should add isSelected enhancements to options, purposeful null value as array lookup 1`] = ` +exports[`helpers updateSelectedOptions should only allow lists or any single option type, null, undefined, NaN 1`] = ` [ + "a", + "b", + 3, { - "index": 1, - "isSelected": true, - "key": "c261075650", - "title": "null", - "value": null, + "value": "hello", }, + "null", + "undefined", + NaN, ] `; -exports[`helpers updateSelectedProp should add isSelected enhancements to options, purposeful null value as title string lookup 1`] = ` +exports[`helpers updateSelectedOptions should only allow lists or any single option type, number 1`] = ` [ - { - "index": 1, - "isSelected": true, - "key": "c261075650", - "title": "null", - "value": null, - }, + 3, ] `; -exports[`helpers updateSelectedProp should add isSelected enhancements to options, purposeful undefined as title string lookup 1`] = ` +exports[`helpers updateSelectedOptions should only allow lists or any single option type, object 1`] = ` [ { - "index": 1, - "isSelected": true, - "key": "c505095949", - "title": "undefined", - "value": undefined, + "value": "hello", }, ] `; -exports[`helpers updateSelectedProp should add isSelected enhancements to options, purposeful undefined value, this will fail 1`] = `[]`; - -exports[`helpers updateSelectedProp should add isSelected enhancements to options, purposeful undefined with required array lookup 1`] = ` +exports[`helpers updateSelectedOptions should only allow lists or any single option type, string 1`] = ` [ - { - "index": 1, - "isSelected": true, - "key": "c505095949", - "title": "undefined", - "value": undefined, - }, + "a", ] `; -exports[`helpers updateSelectedProp should add isSelected enhancements to options, string 1`] = ` -{ - "index": 0, - "isSelected": true, - "key": "c108532930", - "title": "a", - "value": "a", -} -`; +exports[`helpers updateSelectedOptions should only allow lists or any single option type, undefined 1`] = `[]`; exports[`useOnSelect should ignore returning updated options' state through the returned onSelect callback when option is disabled: disabled 1`] = `[]`; @@ -846,7 +1487,7 @@ exports[`useOnSelect should return consistent, updated options, and a selected t "options": [ { "index": 0, - "isSelected": false, + "isSelected": true, "key": "c1605625444", "title": "hello", "value": "hello", diff --git a/src/components/form/__tests__/select.test.js b/src/components/form/__tests__/select.test.js index ad711ca4f..b961ba21a 100644 --- a/src/components/form/__tests__/select.test.js +++ b/src/components/form/__tests__/select.test.js @@ -5,7 +5,7 @@ import { useOnSelect, updateOptions, updateSelectedOptions, - updateSelectedProp, + updateOptionsSelectedOptions, updateDataAttributes, formatEvent, SelectVariant @@ -91,7 +91,7 @@ describe('helpers', () => { }, { options: ['a', 'b', 3], - selectedOptions: 'a', + selectedOptions: 3, description: 'number' }, { @@ -113,13 +113,13 @@ describe('helpers', () => { options: ['a', { value: 'lorem ipsum', isSelected: true }, { value: 3, isSelected: true }, 'b', 4], selectedOptions: undefined, variant: 'mock', - description: 'multiple preselected' + description: 'multiple preselected, single selected' }, { options: ['a', { value: 'lorem ipsum' }, 3, 'b', 4], - selectedOptions: [3, 'a', 'lorem ipsum'], - variant: 'mock', - description: 'multiple' + selectedOptions: [3, 'a', 'lorem ipsum', { index: 4 }], + variant: SelectVariant.checkbox, + description: 'multiple selected' }, { options: ['a', undefined, 3, 'b', 4], @@ -188,10 +188,10 @@ describe('helpers', () => { description: 'purposeful NaN value as array lookup' } ])( - 'updateSelectedProp should add isSelected enhancements to options, $description', + 'updateOptionsSelectedOptions should add isSelected enhancements to options, $description', ({ options, selectedOptions, variant }) => { expect( - updateSelectedProp({ + updateOptionsSelectedOptions({ options: updateOptions(options), selectedOptions: updateSelectedOptions(selectedOptions), variant diff --git a/src/components/form/select.js b/src/components/form/select.js index 6d4ba8074..fa90e658a 100644 --- a/src/components/form/select.js +++ b/src/components/form/select.js @@ -1,4 +1,4 @@ -import React, { useCallback, useRef, useState } from 'react'; +import React, { useCallback, useEffect, useRef, useState } from 'react'; import { Badge, ButtonVariant, @@ -13,7 +13,7 @@ import { import _cloneDeep from 'lodash/cloneDeep'; import _isPlainObject from 'lodash/isPlainObject'; import _findIndex from 'lodash/findIndex'; -import { useDeepCompareEffect, useMount } from 'react-use'; +import { useMount } from 'react-use'; import { createMockEvent } from './formHelpers'; import { helpers } from '../../common'; @@ -145,7 +145,8 @@ updateOptions.memo = helpers.memo(updateOptions); * @returns {Array|Array<"NaN"|"null"|unknown>} */ const updateSelectedOptions = options => - (Array.isArray(options) && options) || + (Array.isArray(options) && + options.map(value => (value === null && 'null') || (value === undefined && 'undefined') || value)) || (options !== undefined && options !== null && !Number.isNaN(options) && [options]) || (options === null && ['null']) || (Number.isNaN(options) && ['NaN']) || @@ -165,45 +166,67 @@ updateSelectedOptions.memo = helpers.memo(updateSelectedOptions, { cacheLimit: 2 * @param {SelectVariant|string} params.variant * @returns {{isSelected:boolean}|undefined|Array<{isSelected:boolean}>|Array} */ -const updateSelectedProp = ({ options, selectedOptions = [], variant = SelectVariant.single } = {}) => - options - .map(option => { - const { isSelected, title, value } = option; - let updateIsSelected = isSelected; - - if (updateIsSelected === true) { - return option; - } +const updateOptionsSelectedOptions = ({ options, selectedOptions = [], variant = SelectVariant.single } = {}) => { + const memoOptions = _cloneDeep(updateOptions.memo(options)); + const memoSelectedOptions = updateSelectedOptions.memo(selectedOptions); - if (_isPlainObject(value)) { - updateIsSelected = _findIndex(selectedOptions, value) > -1; + const updatedOptions = memoOptions.map(option => { + const { isSelected, title, value, index, ...meta } = option; + let updateIsSelected = isSelected; - if (!isSelected) { - updateIsSelected = - selectedOptions.find(activeOption => Object.values(value).includes(activeOption)) !== undefined; - } - } else { - updateIsSelected = selectedOptions.includes(value); + if (updateIsSelected === true && !memoSelectedOptions.length) { + return option; + } + + if (_isPlainObject(value)) { + updateIsSelected = _findIndex(memoSelectedOptions, value) > -1; + + if (!isSelected) { + updateIsSelected = + memoSelectedOptions.find(activeOption => Object.values(value).includes(activeOption)) !== undefined; } + } else { + updateIsSelected = memoSelectedOptions.includes(value); + } - if (!updateIsSelected) { - updateIsSelected = selectedOptions.includes(title); + if (!updateIsSelected) { + updateIsSelected = memoSelectedOptions.includes(title); + } + + if (!updateIsSelected && _isPlainObject(meta)) { + updateIsSelected = + memoSelectedOptions.find(activeOption => Object.values(meta).includes(activeOption)) !== undefined; + } + + if (!updateIsSelected) { + const foundIndex = memoSelectedOptions.find( + activeOption => _isPlainObject(activeOption) && activeOption.index === index + ); + + if (foundIndex) { + updateIsSelected = true; } + } - return { - ...option, - isSelected: updateIsSelected - }; - }) - [(variant === SelectVariant.single && 'find') || 'filter'](opt => opt.isSelected === true); + return { + ...option, + isSelected: updateIsSelected + }; + }); + + return { + options: updatedOptions, + selected: updatedOptions[(variant === SelectVariant.checkbox && 'filter') || 'find'](opt => opt.isSelected === true) + }; +}; /** - * A memoized response for the updateSelectedProp function. Assigned to a property for testing function. + * A memoized response for the updateOptionsSelectedOptions function. Assigned to a property for testing function. */ -updateSelectedProp.memo = helpers.memo(updateSelectedProp, { cacheLimit: 25 }); +updateOptionsSelectedOptions.memo = helpers.memo(updateOptionsSelectedOptions, { cacheLimit: 25 }); /** - * Expand returned event for select responses. + * Expand the returned event for select responses. * * @param {object} params * @param {object} params.event @@ -262,23 +285,22 @@ setSelectElements.memo = helpers.memo(setSelectElements); * @returns {{options: Array, selectedOption: undefined, onSelect: Function}} */ const useOnSelect = ({ options: baseOptions, onSelect, selectedOptions, variant } = {}) => { + // True memo. Update and "re-update", base/initial arrays/objects only when necessary + const { options: initialOptions, selected: initialSelectedOption } = updateOptionsSelectedOptions.memo({ + options: baseOptions, + selectedOptions, + variant + }); + const [selectedOption, setSelectedOption] = React.useState(); - const [options, setOptions] = useState(); - - // Update, and allow "re-updating", base/initial options - useDeepCompareEffect(() => { - const updatedOptions = _cloneDeep(updateOptions.memo(baseOptions)); - const updatedSelected = updateSelectedProp.memo({ - options: updatedOptions, - selectedOptions: updateSelectedOptions.memo(selectedOptions), - variant - }); - - setOptions(updatedOptions); - setSelectedOption(updatedSelected); - }, [baseOptions, selectedOptions]); - - // Update local state with user selected options + const [options, setOptions] = useState(initialOptions); + + useEffect(() => { + setOptions(initialOptions); + setSelectedOption(initialSelectedOption); + }, [initialOptions, initialSelectedOption]); + + // Update the local state with user-selected options const onSelectCallback = useCallback( (event, key) => { const updatedOptions = _cloneDeep(options); @@ -402,7 +424,10 @@ const Select = ({ setIsExpanded(false); } if (!isReadOnly) { - // Remove "timeStamp". Assumption is its intended to help cycle updates. Causes issues with mock events in testing + /* + * Remove "timeStamp", the assumption is it's intended to help cycle updates. + * Causes issues with mock events in testing + */ onSelect({ ...event, timeStamp: undefined }, value); } }; @@ -498,7 +523,7 @@ export { setSelectElements, updateDataAttributes, updateOptions, - updateSelectedProp, + updateOptionsSelectedOptions, updateSelectedOptions, useOnSelect }; diff --git a/src/components/toolbar/__tests__/__snapshots__/toolbarFieldGranularity.test.js.snap b/src/components/toolbar/__tests__/__snapshots__/toolbarFieldGranularity.test.js.snap index 9070b56bd..7e6fa2693 100644 --- a/src/components/toolbar/__tests__/__snapshots__/toolbarFieldGranularity.test.js.snap +++ b/src/components/toolbar/__tests__/__snapshots__/toolbarFieldGranularity.test.js.snap @@ -106,7 +106,7 @@ exports[`ToolbarFieldGranularity Component should render a basic component: basi "value": "Daily", }, { - "isSelected": true, + "isSelected": false, "title": "t(curiosity-toolbar.label_granularity, {"context":"Weekly"})", "value": "Weekly", }, diff --git a/src/components/toolbar/__tests__/__snapshots__/toolbarFieldGroupVariant.test.js.snap b/src/components/toolbar/__tests__/__snapshots__/toolbarFieldGroupVariant.test.js.snap index 9a45c73b5..c611624cb 100644 --- a/src/components/toolbar/__tests__/__snapshots__/toolbarFieldGroupVariant.test.js.snap +++ b/src/components/toolbar/__tests__/__snapshots__/toolbarFieldGroupVariant.test.js.snap @@ -106,29 +106,24 @@ exports[`ToolbarFieldGroupVariant Component should render a basic component: bas options={ [ { - "isSelected": undefined, "title": "lorem", "value": "lorem", }, { - "isSelected": undefined, "title": "ipsum", "value": "ipsum", }, { - "isSelected": undefined, "title": "dolor", "value": "dolor", }, { - "isSelected": undefined, "title": "sit", "value": "sit", }, ] } placeholder="t(curiosity-toolbar.placeholder, {"context":"groupVariant"})" - selectedOptions={null} /> @@ -168,19 +163,16 @@ exports[`ToolbarFieldGroupVariant Component should return a standalone component options={ [ { - "isSelected": undefined, "title": "lorem", "value": "lorem", }, { - "isSelected": undefined, "title": "ipsum", "value": "ipsum", }, ] } placeholder="t(curiosity-toolbar.placeholder, {"context":"groupVariant"})" - selectedOptions={null} /> diff --git a/src/components/toolbar/__tests__/__snapshots__/toolbarFieldRangedMonthly.test.js.snap b/src/components/toolbar/__tests__/__snapshots__/toolbarFieldRangedMonthly.test.js.snap index 2fed92ed1..69e25cc85 100644 --- a/src/components/toolbar/__tests__/__snapshots__/toolbarFieldRangedMonthly.test.js.snap +++ b/src/components/toolbar/__tests__/__snapshots__/toolbarFieldRangedMonthly.test.js.snap @@ -4,8 +4,10 @@ exports[`ToolbarFieldRangedMonthly Component should export select options: toolb [ { "_title": "current", + "endDateString": "2019-07-31T23:59:59.999Z", "isCurrent": true, "isSelected": false, + "startDateString": "2019-07-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"current"})", "value": { "endDate": 2019-07-31T23:59:59.999Z, @@ -14,7 +16,9 @@ exports[`ToolbarFieldRangedMonthly Component should export select options: toolb }, { "_title": "june", + "endDateString": "2019-06-30T23:59:59.999Z", "isSelected": false, + "startDateString": "2019-06-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"June"})", "value": { "endDate": 2019-06-30T23:59:59.999Z, @@ -23,7 +27,9 @@ exports[`ToolbarFieldRangedMonthly Component should export select options: toolb }, { "_title": "may", + "endDateString": "2019-05-31T23:59:59.999Z", "isSelected": false, + "startDateString": "2019-05-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"May"})", "value": { "endDate": 2019-05-31T23:59:59.999Z, @@ -32,7 +38,9 @@ exports[`ToolbarFieldRangedMonthly Component should export select options: toolb }, { "_title": "april", + "endDateString": "2019-04-30T23:59:59.999Z", "isSelected": false, + "startDateString": "2019-04-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"April"})", "value": { "endDate": 2019-04-30T23:59:59.999Z, @@ -41,7 +49,9 @@ exports[`ToolbarFieldRangedMonthly Component should export select options: toolb }, { "_title": "march", + "endDateString": "2019-03-31T23:59:59.999Z", "isSelected": false, + "startDateString": "2019-03-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"March"})", "value": { "endDate": 2019-03-31T23:59:59.999Z, @@ -50,7 +60,9 @@ exports[`ToolbarFieldRangedMonthly Component should export select options: toolb }, { "_title": "february", + "endDateString": "2019-02-28T23:59:59.999Z", "isSelected": false, + "startDateString": "2019-02-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"February"})", "value": { "endDate": 2019-02-28T23:59:59.999Z, @@ -59,7 +71,9 @@ exports[`ToolbarFieldRangedMonthly Component should export select options: toolb }, { "_title": "january", + "endDateString": "2019-01-31T23:59:59.999Z", "isSelected": false, + "startDateString": "2019-01-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"January"})", "value": { "endDate": 2019-01-31T23:59:59.999Z, @@ -68,7 +82,9 @@ exports[`ToolbarFieldRangedMonthly Component should export select options: toolb }, { "_title": "december", + "endDateString": "2018-12-31T23:59:59.999Z", "isSelected": false, + "startDateString": "2018-12-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"December 2018"})", "value": { "endDate": 2018-12-31T23:59:59.999Z, @@ -77,7 +93,9 @@ exports[`ToolbarFieldRangedMonthly Component should export select options: toolb }, { "_title": "november", + "endDateString": "2018-11-30T23:59:59.999Z", "isSelected": false, + "startDateString": "2018-11-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"November 2018"})", "value": { "endDate": 2018-11-30T23:59:59.999Z, @@ -86,7 +104,9 @@ exports[`ToolbarFieldRangedMonthly Component should export select options: toolb }, { "_title": "october", + "endDateString": "2018-10-31T23:59:59.999Z", "isSelected": false, + "startDateString": "2018-10-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"October 2018"})", "value": { "endDate": 2018-10-31T23:59:59.999Z, @@ -95,7 +115,9 @@ exports[`ToolbarFieldRangedMonthly Component should export select options: toolb }, { "_title": "september", + "endDateString": "2018-09-30T23:59:59.999Z", "isSelected": false, + "startDateString": "2018-09-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"September 2018"})", "value": { "endDate": 2018-09-30T23:59:59.999Z, @@ -104,7 +126,9 @@ exports[`ToolbarFieldRangedMonthly Component should export select options: toolb }, { "_title": "august", + "endDateString": "2018-08-31T23:59:59.999Z", "isSelected": false, + "startDateString": "2018-08-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"August 2018"})", "value": { "endDate": 2018-08-31T23:59:59.999Z, @@ -130,8 +154,10 @@ exports[`ToolbarFieldRangedMonthly Component should handle selecting an option d [ { "_title": "current", + "endDateString": "2019-07-31T23:59:59.999Z", "isCurrent": true, "isSelected": false, + "startDateString": "2019-07-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"current"})", "value": { "endDate": 2019-07-31T23:59:59.999Z, @@ -140,7 +166,9 @@ exports[`ToolbarFieldRangedMonthly Component should handle selecting an option d }, { "_title": "june", + "endDateString": "2019-06-30T23:59:59.999Z", "isSelected": false, + "startDateString": "2019-06-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"June"})", "value": { "endDate": 2019-06-30T23:59:59.999Z, @@ -149,7 +177,9 @@ exports[`ToolbarFieldRangedMonthly Component should handle selecting an option d }, { "_title": "may", + "endDateString": "2019-05-31T23:59:59.999Z", "isSelected": false, + "startDateString": "2019-05-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"May"})", "value": { "endDate": 2019-05-31T23:59:59.999Z, @@ -158,7 +188,9 @@ exports[`ToolbarFieldRangedMonthly Component should handle selecting an option d }, { "_title": "april", + "endDateString": "2019-04-30T23:59:59.999Z", "isSelected": false, + "startDateString": "2019-04-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"April"})", "value": { "endDate": 2019-04-30T23:59:59.999Z, @@ -167,7 +199,9 @@ exports[`ToolbarFieldRangedMonthly Component should handle selecting an option d }, { "_title": "march", + "endDateString": "2019-03-31T23:59:59.999Z", "isSelected": false, + "startDateString": "2019-03-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"March"})", "value": { "endDate": 2019-03-31T23:59:59.999Z, @@ -176,7 +210,9 @@ exports[`ToolbarFieldRangedMonthly Component should handle selecting an option d }, { "_title": "february", + "endDateString": "2019-02-28T23:59:59.999Z", "isSelected": false, + "startDateString": "2019-02-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"February"})", "value": { "endDate": 2019-02-28T23:59:59.999Z, @@ -185,7 +221,9 @@ exports[`ToolbarFieldRangedMonthly Component should handle selecting an option d }, { "_title": "january", + "endDateString": "2019-01-31T23:59:59.999Z", "isSelected": false, + "startDateString": "2019-01-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"January"})", "value": { "endDate": 2019-01-31T23:59:59.999Z, @@ -194,7 +232,9 @@ exports[`ToolbarFieldRangedMonthly Component should handle selecting an option d }, { "_title": "december", + "endDateString": "2018-12-31T23:59:59.999Z", "isSelected": false, + "startDateString": "2018-12-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"December 2018"})", "value": { "endDate": 2018-12-31T23:59:59.999Z, @@ -203,7 +243,9 @@ exports[`ToolbarFieldRangedMonthly Component should handle selecting an option d }, { "_title": "november", + "endDateString": "2018-11-30T23:59:59.999Z", "isSelected": false, + "startDateString": "2018-11-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"November 2018"})", "value": { "endDate": 2018-11-30T23:59:59.999Z, @@ -212,7 +254,9 @@ exports[`ToolbarFieldRangedMonthly Component should handle selecting an option d }, { "_title": "october", + "endDateString": "2018-10-31T23:59:59.999Z", "isSelected": false, + "startDateString": "2018-10-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"October 2018"})", "value": { "endDate": 2018-10-31T23:59:59.999Z, @@ -221,7 +265,9 @@ exports[`ToolbarFieldRangedMonthly Component should handle selecting an option d }, { "_title": "september", + "endDateString": "2018-09-30T23:59:59.999Z", "isSelected": false, + "startDateString": "2018-09-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"September 2018"})", "value": { "endDate": 2018-09-30T23:59:59.999Z, @@ -230,7 +276,9 @@ exports[`ToolbarFieldRangedMonthly Component should handle selecting an option d }, { "_title": "august", - "isSelected": true, + "endDateString": "2018-08-31T23:59:59.999Z", + "isSelected": false, + "startDateString": "2018-08-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"August 2018"})", "value": { "endDate": 2018-08-31T23:59:59.999Z, @@ -240,6 +288,7 @@ exports[`ToolbarFieldRangedMonthly Component should handle selecting an option d ] } placeholder="t(curiosity-toolbar.placeholder, {"context":"rangedMonthly"})" + selectedOptions="2018-08-01T00:00:00.000Z" /> `; @@ -321,8 +370,10 @@ exports[`ToolbarFieldRangedMonthly Component should render a basic component: ba [ { "_title": "current", + "endDateString": "2019-07-31T23:59:59.999Z", "isCurrent": true, "isSelected": false, + "startDateString": "2019-07-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"current"})", "value": { "endDate": 2019-07-31T23:59:59.999Z, @@ -331,7 +382,9 @@ exports[`ToolbarFieldRangedMonthly Component should render a basic component: ba }, { "_title": "june", + "endDateString": "2019-06-30T23:59:59.999Z", "isSelected": false, + "startDateString": "2019-06-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"June"})", "value": { "endDate": 2019-06-30T23:59:59.999Z, @@ -340,7 +393,9 @@ exports[`ToolbarFieldRangedMonthly Component should render a basic component: ba }, { "_title": "may", + "endDateString": "2019-05-31T23:59:59.999Z", "isSelected": false, + "startDateString": "2019-05-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"May"})", "value": { "endDate": 2019-05-31T23:59:59.999Z, @@ -349,7 +404,9 @@ exports[`ToolbarFieldRangedMonthly Component should render a basic component: ba }, { "_title": "april", + "endDateString": "2019-04-30T23:59:59.999Z", "isSelected": false, + "startDateString": "2019-04-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"April"})", "value": { "endDate": 2019-04-30T23:59:59.999Z, @@ -358,7 +415,9 @@ exports[`ToolbarFieldRangedMonthly Component should render a basic component: ba }, { "_title": "march", + "endDateString": "2019-03-31T23:59:59.999Z", "isSelected": false, + "startDateString": "2019-03-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"March"})", "value": { "endDate": 2019-03-31T23:59:59.999Z, @@ -367,7 +426,9 @@ exports[`ToolbarFieldRangedMonthly Component should render a basic component: ba }, { "_title": "february", + "endDateString": "2019-02-28T23:59:59.999Z", "isSelected": false, + "startDateString": "2019-02-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"February"})", "value": { "endDate": 2019-02-28T23:59:59.999Z, @@ -376,7 +437,9 @@ exports[`ToolbarFieldRangedMonthly Component should render a basic component: ba }, { "_title": "january", + "endDateString": "2019-01-31T23:59:59.999Z", "isSelected": false, + "startDateString": "2019-01-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"January"})", "value": { "endDate": 2019-01-31T23:59:59.999Z, @@ -385,7 +448,9 @@ exports[`ToolbarFieldRangedMonthly Component should render a basic component: ba }, { "_title": "december", + "endDateString": "2018-12-31T23:59:59.999Z", "isSelected": false, + "startDateString": "2018-12-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"December 2018"})", "value": { "endDate": 2018-12-31T23:59:59.999Z, @@ -394,7 +459,9 @@ exports[`ToolbarFieldRangedMonthly Component should render a basic component: ba }, { "_title": "november", + "endDateString": "2018-11-30T23:59:59.999Z", "isSelected": false, + "startDateString": "2018-11-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"November 2018"})", "value": { "endDate": 2018-11-30T23:59:59.999Z, @@ -403,7 +470,9 @@ exports[`ToolbarFieldRangedMonthly Component should render a basic component: ba }, { "_title": "october", + "endDateString": "2018-10-31T23:59:59.999Z", "isSelected": false, + "startDateString": "2018-10-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"October 2018"})", "value": { "endDate": 2018-10-31T23:59:59.999Z, @@ -412,7 +481,9 @@ exports[`ToolbarFieldRangedMonthly Component should render a basic component: ba }, { "_title": "september", + "endDateString": "2018-09-30T23:59:59.999Z", "isSelected": false, + "startDateString": "2018-09-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"September 2018"})", "value": { "endDate": 2018-09-30T23:59:59.999Z, @@ -421,7 +492,9 @@ exports[`ToolbarFieldRangedMonthly Component should render a basic component: ba }, { "_title": "august", + "endDateString": "2018-08-31T23:59:59.999Z", "isSelected": false, + "startDateString": "2018-08-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"August 2018"})", "value": { "endDate": 2018-08-31T23:59:59.999Z, @@ -431,5 +504,6 @@ exports[`ToolbarFieldRangedMonthly Component should render a basic component: ba ] } placeholder="t(curiosity-toolbar.placeholder, {"context":"rangedMonthly"})" + selectedOptions="t(curiosity-toolbar.granularityRangedMonthly, {"context":"current"})" /> `; diff --git a/src/components/toolbar/__tests__/__snapshots__/toolbarFieldSelectCategory.test.js.snap b/src/components/toolbar/__tests__/__snapshots__/toolbarFieldSelectCategory.test.js.snap index 53309f708..e286a98f8 100644 --- a/src/components/toolbar/__tests__/__snapshots__/toolbarFieldSelectCategory.test.js.snap +++ b/src/components/toolbar/__tests__/__snapshots__/toolbarFieldSelectCategory.test.js.snap @@ -38,8 +38,10 @@ exports[`ToolbarFieldSelectCategory Component should export select options: tool "options": [ { "_title": "current", + "endDateString": "2019-07-31T23:59:59.999Z", "isCurrent": true, "isSelected": false, + "startDateString": "2019-07-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"current"})", "value": { "endDate": 2019-07-31T23:59:59.999Z, @@ -48,7 +50,9 @@ exports[`ToolbarFieldSelectCategory Component should export select options: tool }, { "_title": "june", + "endDateString": "2019-06-30T23:59:59.999Z", "isSelected": false, + "startDateString": "2019-06-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"June"})", "value": { "endDate": 2019-06-30T23:59:59.999Z, @@ -57,7 +61,9 @@ exports[`ToolbarFieldSelectCategory Component should export select options: tool }, { "_title": "may", + "endDateString": "2019-05-31T23:59:59.999Z", "isSelected": false, + "startDateString": "2019-05-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"May"})", "value": { "endDate": 2019-05-31T23:59:59.999Z, @@ -66,7 +72,9 @@ exports[`ToolbarFieldSelectCategory Component should export select options: tool }, { "_title": "april", + "endDateString": "2019-04-30T23:59:59.999Z", "isSelected": false, + "startDateString": "2019-04-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"April"})", "value": { "endDate": 2019-04-30T23:59:59.999Z, @@ -75,7 +83,9 @@ exports[`ToolbarFieldSelectCategory Component should export select options: tool }, { "_title": "march", + "endDateString": "2019-03-31T23:59:59.999Z", "isSelected": false, + "startDateString": "2019-03-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"March"})", "value": { "endDate": 2019-03-31T23:59:59.999Z, @@ -84,7 +94,9 @@ exports[`ToolbarFieldSelectCategory Component should export select options: tool }, { "_title": "february", + "endDateString": "2019-02-28T23:59:59.999Z", "isSelected": false, + "startDateString": "2019-02-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"February"})", "value": { "endDate": 2019-02-28T23:59:59.999Z, @@ -93,7 +105,9 @@ exports[`ToolbarFieldSelectCategory Component should export select options: tool }, { "_title": "january", + "endDateString": "2019-01-31T23:59:59.999Z", "isSelected": false, + "startDateString": "2019-01-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"January"})", "value": { "endDate": 2019-01-31T23:59:59.999Z, @@ -102,7 +116,9 @@ exports[`ToolbarFieldSelectCategory Component should export select options: tool }, { "_title": "december", + "endDateString": "2018-12-31T23:59:59.999Z", "isSelected": false, + "startDateString": "2018-12-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"December 2018"})", "value": { "endDate": 2018-12-31T23:59:59.999Z, @@ -111,7 +127,9 @@ exports[`ToolbarFieldSelectCategory Component should export select options: tool }, { "_title": "november", + "endDateString": "2018-11-30T23:59:59.999Z", "isSelected": false, + "startDateString": "2018-11-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"November 2018"})", "value": { "endDate": 2018-11-30T23:59:59.999Z, @@ -120,7 +138,9 @@ exports[`ToolbarFieldSelectCategory Component should export select options: tool }, { "_title": "october", + "endDateString": "2018-10-31T23:59:59.999Z", "isSelected": false, + "startDateString": "2018-10-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"October 2018"})", "value": { "endDate": 2018-10-31T23:59:59.999Z, @@ -129,7 +149,9 @@ exports[`ToolbarFieldSelectCategory Component should export select options: tool }, { "_title": "september", + "endDateString": "2018-09-30T23:59:59.999Z", "isSelected": false, + "startDateString": "2018-09-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"September 2018"})", "value": { "endDate": 2018-09-30T23:59:59.999Z, @@ -138,7 +160,9 @@ exports[`ToolbarFieldSelectCategory Component should export select options: tool }, { "_title": "august", + "endDateString": "2018-08-31T23:59:59.999Z", "isSelected": false, + "startDateString": "2018-08-01T00:00:00.000Z", "title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"August 2018"})", "value": { "endDate": 2018-08-31T23:59:59.999Z, @@ -371,7 +395,7 @@ exports[`ToolbarFieldSelectCategory Component should return options, and an upda { "component": [Function], "isClearable": true, - "isSelected": true, + "isSelected": false, "options": [ { "isSelected": false, diff --git a/src/components/toolbar/__tests__/__snapshots__/toolbarFieldSla.test.js.snap b/src/components/toolbar/__tests__/__snapshots__/toolbarFieldSla.test.js.snap index e1114905b..d08709bb7 100644 --- a/src/components/toolbar/__tests__/__snapshots__/toolbarFieldSla.test.js.snap +++ b/src/components/toolbar/__tests__/__snapshots__/toolbarFieldSla.test.js.snap @@ -82,7 +82,7 @@ exports[`ToolbarFieldSla Component should render a basic component: basic 1`] = "value": "Premium", }, { - "isSelected": true, + "isSelected": false, "title": "t(curiosity-toolbar.label_sla, {"context":"Standard"})", "value": "Standard", }, diff --git a/src/components/toolbar/__tests__/__snapshots__/toolbarFieldUsage.test.js.snap b/src/components/toolbar/__tests__/__snapshots__/toolbarFieldUsage.test.js.snap index 8cfd88f82..2a507bfb7 100644 --- a/src/components/toolbar/__tests__/__snapshots__/toolbarFieldUsage.test.js.snap +++ b/src/components/toolbar/__tests__/__snapshots__/toolbarFieldUsage.test.js.snap @@ -82,7 +82,7 @@ exports[`ToolbarFieldSla Component should render a basic component: basic 1`] = "value": "Production", }, { - "isSelected": true, + "isSelected": false, "title": "t(curiosity-toolbar.label_usage, {"context":"Development/Test"})", "value": "Development/Test", }, diff --git a/src/components/toolbar/toolbarFieldBillingAccount.js b/src/components/toolbar/toolbarFieldBillingAccount.js index fbfd889e1..abcccf4c6 100644 --- a/src/components/toolbar/toolbarFieldBillingAccount.js +++ b/src/components/toolbar/toolbarFieldBillingAccount.js @@ -116,14 +116,10 @@ const ToolbarFieldBillingAccount = ({ } = useAliasProductQuery(); const onSelect = useAliasOnSelect(); const options = useAliasToolbarFieldOptions(); - const updatedOptions = options.map(option => ({ - ...option, - isSelected: option.value === updatedValue - })); // Select an account on provider update useEffect(() => { - const selectedAccount = updatedOptions.find(({ isSelected }) => isSelected === true)?.value; + const selectedAccount = options.find(({ value }) => value === updatedValue)?.value; if (selectedAccount) { onSelect({ value: selectedAccount }); @@ -134,10 +130,10 @@ const ToolbarFieldBillingAccount = ({ return ( { const { [RHSM_API_QUERY_SET_TYPES.GRANULARITY]: updatedValue } = useAliasProductGraphTallyQuery(); const onSelect = useAliasOnSelect(); - const updatedOptions = options.map(option => ({ ...option, isSelected: option.value === updatedValue })); return ( ({ ...option, isSelected: option.value === updatedValue })); - return ( - + - + - + - + - + - +
ParamTypeDefaultParamType
selectorfunctionselectorfunction
value*value*
optionsobjectoptionsobject
options.equality*options.equality*
options.useSelectorfunctionoptions.useSelectorfunction
diff --git a/src/redux/hooks/useReactRedux.js b/src/redux/hooks/useReactRedux.js index e8df5f8e1..74f06f638 100644 --- a/src/redux/hooks/useReactRedux.js +++ b/src/redux/hooks/useReactRedux.js @@ -68,11 +68,8 @@ const useDispatch = () => dispatchEvent => store.dispatch(dispatchEvent); * @param {Function} options.useSelector * @returns {*} */ -const useSelector = ( - selector, - value = null, - { equality, useSelector: useAliasSelector = useReactReduxSelector } = {} -) => useAliasSelector(selector, equality) ?? value; +const useSelector = (selector, value, { equality, useSelector: useAliasSelector = useReactReduxSelector } = {}) => + useAliasSelector(selector, equality) ?? value; /** * Generate a selector from multiple selectors for use in "useSelector". diff --git a/tests/__snapshots__/code.test.js.snap b/tests/__snapshots__/code.test.js.snap index 71ba1cdde..85d4067ec 100644 --- a/tests/__snapshots__/code.test.js.snap +++ b/tests/__snapshots__/code.test.js.snap @@ -3,8 +3,8 @@ exports[`General code checks should only have specific console.[warn|log|info|error] methods: console methods 1`] = ` [ "components/bannerMessages/bannerMessagesContext.js:118: console.warn(", - "components/form/select.js:289: console.warn(\`Selected option at key "\${key}" doesn't exist in \${JSON.stringify(updatedOptions)}\`);", - "components/form/select.js:292: console.warn(\`Selected option at index "\${selectedOptionIndex}" is disabled or has no value.\`);", + "components/form/select.js:311: console.warn(\`Selected option at key "\${key}" doesn't exist in \${JSON.stringify(updatedOptions)}\`);", + "components/form/select.js:314: console.warn(\`Selected option at index "\${selectedOptionIndex}" is disabled or has no value.\`);", "components/inventoryCardInstances/inventoryCardInstancesContext.js:268: console.warn(\`Sorting can only be performed on select fields, confirm field \${id} is allowed.\`);", "components/inventoryCardSubscriptions/inventoryCardSubscriptionsContext.js:191: console.warn(\`Sorting can only be performed on select fields, confirm field \${id} is allowed.\`);", "components/notifications/notificationsContext.js:112: console.warn(", diff --git a/tests/__snapshots__/dist.test.js.snap b/tests/__snapshots__/dist.test.js.snap index a70eaa3bb..5242ebb46 100644 --- a/tests/__snapshots__/dist.test.js.snap +++ b/tests/__snapshots__/dist.test.js.snap @@ -30,8 +30,6 @@ exports[`Build distribution should match a specific file output 1`] = ` "./dist/js/523*js", "./dist/js/55*js", "./dist/js/55*txt", - "./dist/js/57*js", - "./dist/js/57*txt", "./dist/js/606*js", "./dist/js/628*js", "./dist/js/628*txt", @@ -47,6 +45,8 @@ exports[`Build distribution should match a specific file output 1`] = ` "./dist/js/824*js", "./dist/js/827*js", "./dist/js/860*js", + "./dist/js/923*js", + "./dist/js/923*txt", "./dist/js/93*js", "./dist/js/93*txt", "./dist/js/App*js",