-
Notifications
You must be signed in to change notification settings - Fork 74
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
WIP - Use the PF TypeaheadSelect template
and hack some headers into it (instead of using groups).
- Loading branch information
Showing
6 changed files
with
138 additions
and
65 deletions.
There are no files selected for viewing
Submodule node_modules
updated
39777 files
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| /* | ||
| * This file is part of Cockpit. | ||
| * | ||
| * Copyright (C) 2024 Red Hat, Inc. | ||
| * | ||
| * Cockpit is free software; you can redistribute it and/or modify it | ||
| * under the terms of the GNU Lesser General Public License as published by | ||
| * the Free Software Foundation; either version 2.1 of the License, or | ||
| * (at your option) any later version. | ||
| * | ||
| * Cockpit is distributed in the hope that it will be useful, but | ||
| * WITHOUT ANY WARRANTY; without even the implied warranty of | ||
| * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU | ||
| * Lesser General Public License for more details. | ||
| * | ||
| * You should have received a copy of the GNU Lesser General Public License | ||
| * along with Cockpit; If not, see <http://www.gnu.org/licenses/>. | ||
| */ | ||
|
|
||
| /* This is the Patternfly 5 TypeaheadSelect, with support for header | ||
| * entries. Headers are a more straightforward alternative to grouping | ||
| * with SelectGroup. | ||
| * | ||
| * Properties of TypeaheadSelectWithHeaders are the same as for | ||
| * TypeaheadSelect. The get headers, the "selectOptions" properties | ||
| * can contain entries like this: | ||
| * | ||
| * { header: "Header title" } | ||
| * | ||
| * These header entries are turned into regular, disabled entries that | ||
| * are styled to look like group headers. | ||
| * | ||
| * For laziness reasons, TypeaheadSelectWithHeaders does not allow to | ||
| * override the filterFunction, but you can specify a matchFunction | ||
| * that works on individual options. | ||
| */ | ||
|
|
||
| import React, { useMemo } from 'react'; | ||
| import { TypeaheadSelect } from '@patternfly/react-templates/dist/esm/components/Select'; | ||
|
|
||
| function defaultMatchFunction(filterValue, option) { | ||
| return option.content.toLowerCase().includes(filterValue.toLowerCase()); | ||
| } | ||
|
|
||
| function transformOption(option, idx) { | ||
| if (option.header) { | ||
| return { | ||
| value: " header:" + idx, | ||
| content: "", | ||
| description: option.header, | ||
| isDisabled: true, | ||
| }; | ||
| } else | ||
| return option; | ||
| } | ||
|
|
||
| function isHeaderOption(option) { | ||
| return option.value.startsWith(" header:"); | ||
| } | ||
|
|
||
| export const TypeaheadSelectWithHeaders = ({ | ||
| selectOptions, | ||
| filterFunction, // must be undefined | ||
| matchFunction, | ||
| ...props | ||
| }) => { | ||
| const transformedSelectOptions = useMemo(() => selectOptions.map(transformOption), | ||
| [selectOptions]); | ||
|
|
||
| if (filterFunction) | ||
| console.warn("TypeaheadSelectWithHeaders does not support filterFunction, use matchFunction"); | ||
|
|
||
| const headerFilterFunction = (filterValue, options) => { | ||
| // Filter by search term | ||
| const filtered = options.filter(o => (isHeaderOption(o) || | ||
| (matchFunction || defaultMatchFunction)(filterValue, o))); | ||
| // Remove headers that have nothing following them. | ||
| const filtered2 = filtered.filter((o, i) => { | ||
| return !(isHeaderOption(o) && (i >= filtered.length - 1 || isHeaderOption(filtered[i + 1]))); | ||
| }); | ||
| return filtered2; | ||
| }; | ||
|
|
||
| return ( | ||
| <TypeaheadSelect selectOptions={transformedSelectOptions} | ||
| filterFunction={headerFilterFunction} | ||
| {...props} /> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters