From 3011d64060617418daea74ef491ddddf31d24118 Mon Sep 17 00:00:00 2001 From: tanupa Date: Mon, 27 Nov 2023 11:54:02 -0800 Subject: [PATCH] adjusted files with combo_box & icon.js to avoid duplication Signed-off-by: tanupa --- .../views/combo_box/combo_box_custom_icon.js | 27 ++------- .../views/combo_box/combo_box_default_icon.js | 27 ++------- .../src/views/combo_box/combo_box_icon.js | 57 ++++++++++--------- 3 files changed, 38 insertions(+), 73 deletions(-) diff --git a/src-docs/src/views/combo_box/combo_box_custom_icon.js b/src-docs/src/views/combo_box/combo_box_custom_icon.js index d67e28fbdf..4bd92b12dc 100644 --- a/src-docs/src/views/combo_box/combo_box_custom_icon.js +++ b/src-docs/src/views/combo_box/combo_box_custom_icon.js @@ -10,11 +10,11 @@ */ import React, { useState } from 'react'; - +import { OnCreateOption as comboBoxOnCreateOption } from './combo_box_icon'; // Rename the import to avoid naming conflicts import { OuiComboBox } from '../../../../src/components'; export default () => { - const [options, updateOptions] = useState([ + const [options] = useState([ { label: 'Titan', 'data-test-subj': 'titanOption', @@ -56,27 +56,8 @@ export default () => { }; const onCreateOption = (searchValue, flattenedOptions) => { - const normalizedSearchValue = searchValue.trim().toLowerCase(); - - if (!normalizedSearchValue) { - return; - } - - const newOption = { - label: searchValue, - }; - - // Create the option if it doesn't exist. - if ( - flattenedOptions.findIndex( - (option) => option.label.trim().toLowerCase() === normalizedSearchValue - ) === -1 - ) { - updateOptions([...options, newOption]); - } - - // Select the option. - setSelected((prevSelected) => [...prevSelected, newOption]); + // Call the OnCreateOption function from combo_box_icon.js + comboBoxOnCreateOption(searchValue, flattenedOptions, options, setSelected); }; return ( diff --git a/src-docs/src/views/combo_box/combo_box_default_icon.js b/src-docs/src/views/combo_box/combo_box_default_icon.js index 8bf84a0aee..0ca0117e01 100644 --- a/src-docs/src/views/combo_box/combo_box_default_icon.js +++ b/src-docs/src/views/combo_box/combo_box_default_icon.js @@ -10,11 +10,11 @@ */ import React, { useState } from 'react'; - +import { OnCreateOption as comboBoxOnCreateOption } from './combo_box_icon'; // Rename the import to avoid naming conflicts import { OuiComboBox } from '../../../../src/components'; export default () => { - const [options, updateOptions] = useState([ + const [options] = useState([ { label: 'Titan', 'data-test-subj': 'titanOption', @@ -56,27 +56,8 @@ export default () => { }; const onCreateOption = (searchValue, flattenedOptions) => { - const normalizedSearchValue = searchValue.trim().toLowerCase(); - - if (!normalizedSearchValue) { - return; - } - - const newOption = { - label: searchValue, - }; - - // Create the option if it doesn't exist. - if ( - flattenedOptions.findIndex( - (option) => option.label.trim().toLowerCase() === normalizedSearchValue - ) === -1 - ) { - updateOptions([...options, newOption]); - } - - // Select the option. - setSelected((prevSelected) => [...prevSelected, newOption]); + // Pass options and setSelected as parameters to OnCreateOption + comboBoxOnCreateOption(searchValue, flattenedOptions, options, setSelected); }; return ( diff --git a/src-docs/src/views/combo_box/combo_box_icon.js b/src-docs/src/views/combo_box/combo_box_icon.js index 2108486293..cad843bba9 100644 --- a/src-docs/src/views/combo_box/combo_box_icon.js +++ b/src-docs/src/views/combo_box/combo_box_icon.js @@ -10,7 +10,6 @@ */ import React, { useState } from 'react'; - import { OuiComboBox } from '../../../../src/components'; const staticOptions = [ @@ -49,38 +48,40 @@ const staticOptions = [ }, ]; -export default () => { +const OnCreateOption = (searchValue, flattenedOptions = []) => { const [options, setOptions] = useState(staticOptions); - const [selectedOptions, setSelected] = useState([options[2], options[4]]); + const normalizedSearchValue = searchValue.trim().toLowerCase(); + const [setSelected] = useState([options[2], options[4]]); - const onChange = (selectedOptions) => { - setSelected(selectedOptions); - }; + if (!normalizedSearchValue) { + return; + } - const onCreateOption = (searchValue, flattenedOptions = []) => { - const normalizedSearchValue = searchValue.trim().toLowerCase(); + const newOption = { + label: searchValue, + }; - if (!normalizedSearchValue) { - return; - } + // Create the option if it doesn't exist. + if ( + flattenedOptions.findIndex( + (option) => option.label.trim().toLowerCase() === normalizedSearchValue + ) === -1 + ) { + setOptions([...options, newOption]); + } - const newOption = { - label: searchValue, - }; + // Select the option. + // Use the previousState parameter (prevSelected) from the setState + // instance (setSelected) to ensure looped calls do not override each other + setSelected((prevSelected) => [...prevSelected, newOption]); +}; - // Create the option if it doesn't exist. - if ( - flattenedOptions.findIndex( - (option) => option.label.trim().toLowerCase() === normalizedSearchValue - ) === -1 - ) { - setOptions([...options, newOption]); - } +const ComboBoxWithOption = () => { + const [options] = useState(staticOptions); + const [selectedOptions, setSelected] = useState([options[2], options[4]]); - // Select the option. - // Use the previousState parameter (prevSelected) from the setState - // instance (setSelected) to ensure looped calls do not override each other - setSelected((prevSelected) => [...prevSelected, newOption]); + const onChange = (selectedOptions) => { + setSelected(selectedOptions); }; return ( @@ -90,7 +91,9 @@ export default () => { icon={true} selectedOptions={selectedOptions} onChange={onChange} - onCreateOption={onCreateOption} + onCreateOption={OnCreateOption} /> ); }; + +export { ComboBoxWithOption, OnCreateOption };