From 922fdf2882e5e84b0377624c45dc4de12347c487 Mon Sep 17 00:00:00 2001 From: Amir Saif Date: Mon, 8 Jul 2024 03:10:47 +0530 Subject: [PATCH 1/5] feat:introducing isFilterCaseInSensitive prop for dual-list-select filterOption --- .../src/dual-list-select/dual-list-select.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/common/src/dual-list-select/dual-list-select.js b/packages/common/src/dual-list-select/dual-list-select.js index 4c82e188b..37eaf0ebc 100644 --- a/packages/common/src/dual-list-select/dual-list-select.js +++ b/packages/common/src/dual-list-select/dual-list-select.js @@ -39,10 +39,20 @@ const DualListSelectCommon = (props) => { }); const leftValues = rest.options - .filter((option) => !rest.input.value.includes(option.value) && option.label.includes(state.filterOptions)) + .filter((option) => { + if(!props.isFilterCaseInSensitive) + return !rest.input.value.includes(option.value) && option.label.includes(state.filterOptions); + else + return !rest.input.value.includes(option.value) && option.label.toLowerCase().includes(state.filterOptions.toLowerCase()); + }) .sort((a, b) => (state.sortLeftDesc ? a.label.localeCompare(b.label) : b.label.localeCompare(a.label))); const rightValues = rest.options - .filter((option) => rest.input.value.includes(option.value) && option.label.includes(state.filterValue)) + .filter((option) => { + if(!props.isFilterCaseInSensitive) + return rest.input.value.includes(option.value) && option.label.includes(state.filterValue); + else + return rest.input.value.includes(option.value) && option.label.toLowerCase().includes(state.filterValue.toLowerCase()); + }) .sort((a, b) => (state.sortRightDesc ? a.label.localeCompare(b.label) : b.label.localeCompare(a.label))); const handleOptionsClick = (event, value) => handleOptionClick(event, value, leftValues, true, dispatch, state); From a29791fed0acc76c1be5e0a4165f021cbb41098a Mon Sep 17 00:00:00 2001 From: Amir Saif Date: Mon, 8 Jul 2024 03:31:57 +0530 Subject: [PATCH 2/5] Resolving build errors --- .../common/src/dual-list-select/dual-list-select.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/common/src/dual-list-select/dual-list-select.js b/packages/common/src/dual-list-select/dual-list-select.js index 37eaf0ebc..4fae1dc41 100644 --- a/packages/common/src/dual-list-select/dual-list-select.js +++ b/packages/common/src/dual-list-select/dual-list-select.js @@ -40,18 +40,22 @@ const DualListSelectCommon = (props) => { const leftValues = rest.options .filter((option) => { - if(!props.isFilterCaseInSensitive) + if (!props.isFilterCaseInSensitive){ return !rest.input.value.includes(option.value) && option.label.includes(state.filterOptions); - else + } + else{ return !rest.input.value.includes(option.value) && option.label.toLowerCase().includes(state.filterOptions.toLowerCase()); + } }) .sort((a, b) => (state.sortLeftDesc ? a.label.localeCompare(b.label) : b.label.localeCompare(a.label))); const rightValues = rest.options .filter((option) => { - if(!props.isFilterCaseInSensitive) + if (!props.isFilterCaseInSensitive){ return rest.input.value.includes(option.value) && option.label.includes(state.filterValue); - else + } + else{ return rest.input.value.includes(option.value) && option.label.toLowerCase().includes(state.filterValue.toLowerCase()); + } }) .sort((a, b) => (state.sortRightDesc ? a.label.localeCompare(b.label) : b.label.localeCompare(a.label))); From 8cd350a3d626bafafb5fc5d137402fa543274fc6 Mon Sep 17 00:00:00 2001 From: Amir Saif Date: Mon, 8 Jul 2024 03:49:09 +0530 Subject: [PATCH 3/5] Resolving format mismatch --- .../common/src/dual-list-select/dual-list-select.js | 10 ++++------ .../src/dual-list-select/dual-list-select.d.ts | 1 + .../src/dual-list-select/dual-list-select.js | 1 + .../examples-texts/mui/dual-list-select.md | 1 + 4 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/common/src/dual-list-select/dual-list-select.js b/packages/common/src/dual-list-select/dual-list-select.js index 4fae1dc41..6955fb48a 100644 --- a/packages/common/src/dual-list-select/dual-list-select.js +++ b/packages/common/src/dual-list-select/dual-list-select.js @@ -40,20 +40,18 @@ const DualListSelectCommon = (props) => { const leftValues = rest.options .filter((option) => { - if (!props.isFilterCaseInSensitive){ + if (!props.isFilterCaseInSensitive) { return !rest.input.value.includes(option.value) && option.label.includes(state.filterOptions); - } - else{ + } else { return !rest.input.value.includes(option.value) && option.label.toLowerCase().includes(state.filterOptions.toLowerCase()); } }) .sort((a, b) => (state.sortLeftDesc ? a.label.localeCompare(b.label) : b.label.localeCompare(a.label))); const rightValues = rest.options .filter((option) => { - if (!props.isFilterCaseInSensitive){ + if (!props.isFilterCaseInSensitive) { return rest.input.value.includes(option.value) && option.label.includes(state.filterValue); - } - else{ + } else { return rest.input.value.includes(option.value) && option.label.toLowerCase().includes(state.filterValue.toLowerCase()); } }) diff --git a/packages/mui-component-mapper/src/dual-list-select/dual-list-select.d.ts b/packages/mui-component-mapper/src/dual-list-select/dual-list-select.d.ts index e695b05e0..52a1c3ae7 100644 --- a/packages/mui-component-mapper/src/dual-list-select/dual-list-select.d.ts +++ b/packages/mui-component-mapper/src/dual-list-select/dual-list-select.d.ts @@ -48,6 +48,7 @@ interface InternalDualListSelectProps { id?: string; leftValues?: DualListOption[]; rightValues?: DualListOption[]; + isFilterCaseInSensitive?: boolean; FormFieldGridProps?: GridProps; InternalGridProps?: GridProps; ListGridProps?: GridProps; diff --git a/packages/mui-component-mapper/src/dual-list-select/dual-list-select.js b/packages/mui-component-mapper/src/dual-list-select/dual-list-select.js index 0f6ae2ae8..fb0d00bbe 100644 --- a/packages/mui-component-mapper/src/dual-list-select/dual-list-select.js +++ b/packages/mui-component-mapper/src/dual-list-select/dual-list-select.js @@ -555,6 +555,7 @@ DualListSelect.propTypes = { rightValues: PropTypes.array, handleValuesClick: PropTypes.func, isFilterable: PropTypes.bool, + isFilterCaseInSensitive: PropTypes.bool, // props FormFieldGridProps: PropTypes.object, InternalGridProps: PropTypes.object, diff --git a/packages/react-renderer-demo/src/doc-components/examples-texts/mui/dual-list-select.md b/packages/react-renderer-demo/src/doc-components/examples-texts/mui/dual-list-select.md index 196804875..26af7f57b 100644 --- a/packages/react-renderer-demo/src/doc-components/examples-texts/mui/dual-list-select.md +++ b/packages/react-renderer-demo/src/doc-components/examples-texts/mui/dual-list-select.md @@ -23,6 +23,7 @@ Dual list select is wrapped in a form group, so it accepts all [form group props |filterOptionsText|String|'Remove your filter to see all options'|Placeholder for options when there is no filtered option| |checkboxVariant|bool|false|Change list item to checkboxes| |isFilterable|bool|true|Shows toolbar for both lists| +|isFilterCaseInSensitive|bool|true|Toolbar filter is case insensitive| ### Options From 8f706337a320d48b078eede5fbf0d9a61dfc9ca4 Mon Sep 17 00:00:00 2001 From: Amir Saif Date: Mon, 8 Jul 2024 04:03:50 +0530 Subject: [PATCH 4/5] Resolving proptypes validation error --- .../src/dual-list-select/dual-list-select.js | 1 + .../src/dual-list-select/dual-list-select.d.ts | 1 + .../src/dual-list-select/dual-list-select.js | 1 + 3 files changed, 3 insertions(+) diff --git a/packages/blueprint-component-mapper/src/dual-list-select/dual-list-select.js b/packages/blueprint-component-mapper/src/dual-list-select/dual-list-select.js index d9036552d..d916a9e86 100644 --- a/packages/blueprint-component-mapper/src/dual-list-select/dual-list-select.js +++ b/packages/blueprint-component-mapper/src/dual-list-select/dual-list-select.js @@ -263,6 +263,7 @@ DualListInternal.propTypes = { filterValues: PropTypes.func, rightValues: PropTypes.array, handleValuesClick: PropTypes.func, + isFilterCaseInSensitive: PropTypes.bool, WrapperProps: PropTypes.object, LeftWrapperProps: PropTypes.object, RightWrapperProps: PropTypes.object, diff --git a/packages/suir-component-mapper/src/dual-list-select/dual-list-select.d.ts b/packages/suir-component-mapper/src/dual-list-select/dual-list-select.d.ts index f3c8be300..7a21ffb9f 100644 --- a/packages/suir-component-mapper/src/dual-list-select/dual-list-select.d.ts +++ b/packages/suir-component-mapper/src/dual-list-select/dual-list-select.d.ts @@ -29,6 +29,7 @@ interface InternalDualListSelectProps { filterOptionsText?: ReactNode; leftValues?: DualListSelectOption[]; rightValues?: DualListSelectOption[]; + isFilterCaseInSensitive?: boolean; /** Sub components customization API */ OptionsListProps?: SegmentProps; OptionProps?: DualListSelectOptionProps; diff --git a/packages/suir-component-mapper/src/dual-list-select/dual-list-select.js b/packages/suir-component-mapper/src/dual-list-select/dual-list-select.js index b25b53381..bbe83a1d9 100644 --- a/packages/suir-component-mapper/src/dual-list-select/dual-list-select.js +++ b/packages/suir-component-mapper/src/dual-list-select/dual-list-select.js @@ -362,6 +362,7 @@ DualList.propTypes = { validateOnMount: PropTypes.bool, leftSortTitle: PropTypes.node, rightSortTitle: PropTypes.node, + isFilterCaseInSensitive: PropTypes.bool, /** Sub components customization API */ OptionsListProps: PropTypes.object, OptionProps: PropTypes.object, From 4390cb4340b12a6f556b0d0511d79dbe2c71a159 Mon Sep 17 00:00:00 2001 From: Amir Saif Date: Mon, 8 Jul 2024 04:09:58 +0530 Subject: [PATCH 5/5] Resolving proptypes validation error attempt 5 --- .../src/dual-list-select/dual-list-select.d.ts | 1 + .../src/dual-list-select/dual-list-select.d.ts | 1 + .../src/dual-list-select/dual-list-select.js | 1 + .../doc-components/examples-texts/blueprint/dual-list-select.md | 1 + .../src/doc-components/examples-texts/carbon/dual-list-select.md | 1 + 5 files changed, 5 insertions(+) diff --git a/packages/blueprint-component-mapper/src/dual-list-select/dual-list-select.d.ts b/packages/blueprint-component-mapper/src/dual-list-select/dual-list-select.d.ts index 74d62074b..106f63553 100644 --- a/packages/blueprint-component-mapper/src/dual-list-select/dual-list-select.d.ts +++ b/packages/blueprint-component-mapper/src/dual-list-select/dual-list-select.d.ts @@ -26,6 +26,7 @@ interface InternalDualListSelectProps { filterOptionsText?: ReactNode; leftValues?: DualListSelectValue[]; rightValues?: DualListSelectValue[]; + isFilterCaseInSensitive?: boolean; WrapperProps?: React.HTMLProps; LeftWrapperProps?: React.HTMLProps; RightWrapperProps?: React.HTMLProps; diff --git a/packages/carbon-component-mapper/src/dual-list-select/dual-list-select.d.ts b/packages/carbon-component-mapper/src/dual-list-select/dual-list-select.d.ts index 2044c68bb..b3b4832e1 100644 --- a/packages/carbon-component-mapper/src/dual-list-select/dual-list-select.d.ts +++ b/packages/carbon-component-mapper/src/dual-list-select/dual-list-select.d.ts @@ -44,6 +44,7 @@ interface InternalDualListSelectProps { sortValuesTitle?: string; filterOptionsText?: ReactNode; filterValueText?: ReactNode; + isFilterCaseInSensitive?: boolean; FormGroupProps?: CarbonFormGroups; GridProps?: GridDefaultProps; RowProps?: RowDefaultProps; diff --git a/packages/carbon-component-mapper/src/dual-list-select/dual-list-select.js b/packages/carbon-component-mapper/src/dual-list-select/dual-list-select.js index ae1ac410c..f40b9ec63 100644 --- a/packages/carbon-component-mapper/src/dual-list-select/dual-list-select.js +++ b/packages/carbon-component-mapper/src/dual-list-select/dual-list-select.js @@ -304,6 +304,7 @@ DualListSelectInner.propTypes = { sortValuesTitle: PropTypes.string, filterOptionsText: PropTypes.node, filterValueText: PropTypes.node, + isFilterCaseInSensitive: PropTypes.bool, FormGroupProps: PropTypes.object, GridProps: PropTypes.object, RowProps: PropTypes.object, diff --git a/packages/react-renderer-demo/src/doc-components/examples-texts/blueprint/dual-list-select.md b/packages/react-renderer-demo/src/doc-components/examples-texts/blueprint/dual-list-select.md index 0c25514a6..c3bb15cac 100644 --- a/packages/react-renderer-demo/src/doc-components/examples-texts/blueprint/dual-list-select.md +++ b/packages/react-renderer-demo/src/doc-components/examples-texts/blueprint/dual-list-select.md @@ -23,6 +23,7 @@ Dual list select is wrapped in a form group, so it accepts all [form group props |filterOptionsText|String|'Remove your filter to see all options'|Placeholder for options when there is no filtered option| |leftSortTitle|String|'Sort options'|Accessible title for left sort button.| |rightSortTitle|String|'Sort value'|Accessible title for right sort button.| +|isFilterCaseInSensitive|bool|true|Toolbar filter is case insensitive| ### Options diff --git a/packages/react-renderer-demo/src/doc-components/examples-texts/carbon/dual-list-select.md b/packages/react-renderer-demo/src/doc-components/examples-texts/carbon/dual-list-select.md index 514590a4d..eb753f6e4 100644 --- a/packages/react-renderer-demo/src/doc-components/examples-texts/carbon/dual-list-select.md +++ b/packages/react-renderer-demo/src/doc-components/examples-texts/carbon/dual-list-select.md @@ -19,6 +19,7 @@ Dual list select is wrapped in a form group, so it accepts all [form group props |filterValueTitle|String|'Filter selected value'|Placeholder for value filter input| |filterValueText|String|'Remove your filter to see all selected'|Placeholder for value when there is no filtered value| |filterOptionsText|String|'Remove your filter to see all options'|Placeholder for options when there is no filtered option| +|isFilterCaseInSensitive|bool|true|Toolbar filter is case insensitive| ### Options