Chore/DropdownMenuHideSelectedOption

unosquare · Apr 18, 2023 · a88365b · a88365b
1 parent 4e657a4
commit a88365b
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/sample/index.tsx b/sample/index.tsx
@@ -32,9 +32,17 @@ import {
     SubTitle,
     Table,
     Title,
+    DropdownMenu,
 } from '../src';
 import '../src/resources/global.css';
 
+export enum options {
+    A = 'Apple',
+    B = 'Bolt',
+    C = 'Cactus',
+    D = 'Dragon',
+}
+
 const columns = [
     { label: 'Name', sortOrder: 1, sortDirection: SortDirection.ASC },
     { label: 'City', disableSearch: true, excludeFromSort: true },
@@ -118,6 +126,7 @@ const getLinkSortData = (data: Scores[]) =>
     data.map((entry) => [[`${ExternalUrls.URL}${entry.Id}`, entry.Name, ''], entry.Quarter, entry.Score]);
 
 const Application = () => {
+    const [currentOption, setCurrentOption] = React.useState(options.A);
     const [value, setValue] = React.useState(false);
     const [openMenu, setOpenMenu] = React.useState(false);
     const [data, setData] = React.useState(defaultData);
@@ -127,6 +136,10 @@ const Application = () => {
         setData(value ? defaultData : []);
     };
 
+    const handleOptionChange = (option: options) => {
+        setCurrentOption(option);
+    };
+
     const onToggleMenu = () => {
         const body = document.getElementById('body');
         if (body) body.style.overflow = openMenu ? 'auto' : 'hidden';
@@ -149,6 +162,7 @@ const Application = () => {
             </NavBar>
             <BasicToolbar>
                 <span>This is a toolbar</span>
+                <DropdownMenu options={options} value={currentOption} label='Options' onOptionClicked={handleOptionChange} />
             </BasicToolbar>
             <AppContainer rows={5} columns={3} hasToolbar>
                 <Card column={1} row={1} direction={Directions.ROW} justify={FlexValues.START} fit>

diff --git a/src/DropdownMenu/index.tsx b/src/DropdownMenu/index.tsx
@@ -145,11 +145,13 @@ export const DropdownMenu = ({ options, value, label, onOptionClicked, extraBott
                     <>
                         <StyledListContainer>
                             <StyledDropDownList>
-                                {Object.keys(options).map((countryUrl) => (
-                                    <StyledListItem key={countryUrl} onClick={onSelect(countryUrl)}>
-                                        {options[countryUrl]}
-                                    </StyledListItem>
-                                ))}
+                                {Object.keys(options)
+                                    .filter((key) => key !== value)
+                                    .map((countryUrl) => (
+                                        <StyledListItem key={countryUrl} onClick={onSelect(countryUrl)}>
+                                            {options[countryUrl]}
+                                        </StyledListItem>
+                                    ))}
                             </StyledDropDownList>
                         </StyledListContainer>
                         <ChevronUp24Regular primaryFill='#304FF3' />