hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Convert <Select /> to use <FixedSizeList /> when having lots of options

Browse Source 
Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton 2021-12-14 16:33:04 -05:00
parent f6193718ff
commit 46d1a5c673
3 changed files with 26 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/renderer/components/+namespaces/namespace-select-filter.tsx
View File

@ -178,7 +178,6 @@ export class NamespaceSelectFilter extends React.Component<SelectProps> {
showAllNamespacesOption={true}
closeMenuOnSelect={false}
controlShouldRenderValue={false}
placeholder={""}
onChange={this.onChange}
onBlur={this.reset}
formatOptionLabel={this.formatOptionLabel}

2
src/renderer/components/select/select.scss
View File

@ -91,7 +91,7 @@ html {
&__menu {
background: var(--select-menu-bgc);
box-shadow: inset 0 0 0 1px var(--select-menu-border-color);
width: max-content;
width: 400px;
min-width: 100%;
&-list {

26
src/renderer/components/select/select.tsx
View File

@ -31,8 +31,9 @@ import Creatable, { CreatableProps } from "react-select/creatable";
import { ThemeStore } from "../../theme.store";
import { boundMethod, cssNames } from "../../utils";
import { FixedSizeList } from "react-window";
const { Menu } = components;
const { Menu, MenuList } = components;
export interface GroupSelectOption<T extends SelectOption = SelectOption> {
label: ReactNode;
@ -150,6 +151,29 @@ export class Select extends React.Component<SelectProps> {
className={cssNames(menuClass, this.themeClass, props.className)}
/>
),
MenuList: props => {
const height = 35;
const { options, children, maxHeight, getValue } = props;
const [value] = getValue();
const initialOffset = options.indexOf(value) * height;
const rChildren = React.Children.toArray(children);
if (rChildren.length < 200) {
return <MenuList {...props} />;
}
return (
<FixedSizeList
height={maxHeight}
itemCount={rChildren.length}
itemSize={30}
initialScrollOffset={initialOffset}
width="100%"
>
{({ index, style }) => <div style={style}>{rChildren[index]}</div>}
</FixedSizeList>
);
},
},
};