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

Wrapping ReactSelect styles into CacheProvider (#2365)

Browse Source 
* Wrap app into emotion CacheProvider to isolate styles

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fix CacheProvider key

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Moving CacheProvider into more specific components

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Align @emotion/react & @emotion/cache version with ones inside react-select

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Covering more components with CacheProvider

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Changing emotion versions a bit more

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Moving CacheProvider into bootstrap

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Updating react-select types

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* A bit of cleaning up types

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Specifying types a bit more

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fix gradients in namespace selector

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Importing types separately

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Using generic NonceProvider in bootstrap

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev authored and GitHub committed 2021-03-30 12:05:41 +03:00
1 parent 498c7defe9
commit 69200b50c7
8 files changed
+149 -165
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/renderer/components/select/select.tsx
+15 -15
View File
@@ -6,23 +6,29 @@ import React, { ReactNode } from "react";
import { computed } from "mobx";
import { observer } from "mobx-react";
import { autobind, cssNames } from "../../utils";
import ReactSelect, { ActionMeta, components, Props as ReactSelectProps, Styles } from "react-select";
import Creatable, { CreatableProps } from "react-select/creatable";
import ReactSelect, { components } from "react-select";
import Creatable from "react-select/creatable";
import { themeStore } from "../../theme.store";
import type { ActionMeta, GroupTypeBase, OptionTypeBase, Props as ReactSelectProps, Styles as ReactSelectStyles } from "react-select";
const { Menu } = components;
type OptionType = { label: string; value: string };
type GroupType = GroupTypeBase<OptionType>;
export interface GroupSelectOption<T extends SelectOption = SelectOption> {
label: ReactNode;
options: T[];
}
export interface SelectOption<T = any> {
value: T;
value?: T;
label?: React.ReactNode;
}
export interface SelectProps<T = any> extends ReactSelectProps<T>, CreatableProps<T> {
export interface SelectProps<T = any> extends ReactSelectProps<OptionTypeBase, boolean> {
options?: ReadonlyArray<OptionType | GroupType | unknown>;
value?: T;
themeName?: "dark" | "light" | "outlined";
menuClass?: string;
@@ -43,7 +49,7 @@ export class Select extends React.Component<SelectProps> {
return this.props.themeName || themeStore.activeTheme.type;
}
private styles: Styles = {
private styles: ReactSelectStyles<OptionTypeBase, boolean> = {
menuPortal: styles => ({
...styles,
zIndex: "auto"
@@ -68,16 +74,10 @@ export class Select extends React.Component<SelectProps> {
return this.options.find(opt => opt === value || opt.value === value);
}
@computed get options(): SelectOption[] {
const { autoConvertOptions, options } = this.props;
if (autoConvertOptions && Array.isArray(options)) {
return options.map(opt => {
return this.isValidOption(opt) ? opt : { value: opt, label: String(opt) };
});
}
return options as SelectOption[];
@computed get options(): readonly SelectOption[] {
return this.props.options.map(opt => {
return this.isValidOption(opt) ? opt : { value: opt, label: String(opt) };
});
}
@autobind()