mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
ReactSelect: Upgrades react-select from v3 to v4 and switches from fork to main npm package (#32618)
* ReactSelect: Upgrades react-select from v3 to v4 and switches from fork to main npm package * Updated snapshot * Removed hidden time in timepicker
This commit is contained in:
Torkel Ödegaard
GitHub
parent
973ad9697c
commit
16efc4c1b9
@ -114,7 +114,7 @@
|
||||
"@types/react-grid-layout": "1.1.1",
|
||||
"@types/react-redux": "7.1.7",
|
||||
"@types/react-router-dom": "^5.1.7",
|
||||
"@types/react-select": "3.0.8",
|
||||
"@types/react-select": "4.0.13",
|
||||
"@types/react-test-renderer": "16.9.2",
|
||||
"@types/react-transition-group": "4.4.0",
|
||||
"@types/react-window": "1.8.1",
|
||||
@ -218,7 +218,7 @@
|
||||
"@sentry/browser": "5.25.0",
|
||||
"@sentry/types": "5.24.2",
|
||||
"@sentry/utils": "5.24.2",
|
||||
"@torkelo/react-select": "3.0.8",
|
||||
"react-select": "4.3.0",
|
||||
"@types/antlr4": "^4.7.1",
|
||||
"@types/braintree__sanitize-url": "4.0.0",
|
||||
"@types/common-tags": "^1.8.0",
|
||||
|
||||
@ -36,11 +36,11 @@
|
||||
"@popperjs/core": "2.5.4",
|
||||
"@sentry/browser": "5.25.0",
|
||||
"@testing-library/jest-dom": "5.11.9",
|
||||
"@torkelo/react-select": "3.0.8",
|
||||
"react-select": "4.3.0",
|
||||
"@types/hoist-non-react-statics": "3.3.1",
|
||||
"@types/react-beautiful-dnd": "12.1.2",
|
||||
"@types/react-color": "3.0.1",
|
||||
"@types/react-select": "3.0.8",
|
||||
"@types/react-select": "4.0.13",
|
||||
"@types/react-table": "7.0.12",
|
||||
"@types/slate": "0.47.1",
|
||||
"@types/slate-react": "0.22.5",
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
import React from 'react';
|
||||
import { Icon } from '../../../Icon/Icon';
|
||||
|
||||
// Ignoring because I couldn't get @types/react-select work with Torkel's fork
|
||||
// @ts-ignore
|
||||
import { components } from '@torkelo/react-select';
|
||||
import { components } from 'react-select';
|
||||
|
||||
export const IndicatorsContainer = (props: any) => {
|
||||
const isOpen = props.selectProps.menuIsOpen;
|
||||
|
||||
@ -1,16 +1,11 @@
|
||||
import React from 'react';
|
||||
|
||||
// Ignoring because I couldn't get @types/react-select work with Torkel's fork
|
||||
// @ts-ignore
|
||||
import { components } from '@torkelo/react-select';
|
||||
// @ts-ignore
|
||||
import { OptionProps } from '@torkelo/react-select/lib/components/Option';
|
||||
import { components, OptionProps } from 'react-select';
|
||||
|
||||
export interface Props {
|
||||
children: Element;
|
||||
}
|
||||
|
||||
export const NoOptionsMessage = (props: OptionProps<any>) => {
|
||||
export const NoOptionsMessage = (props: OptionProps<any, any>) => {
|
||||
const { children } = props;
|
||||
return (
|
||||
<components.Option {...props}>
|
||||
|
||||
@ -1,16 +1,9 @@
|
||||
// Libraries
|
||||
import classNames from 'classnames';
|
||||
import React, { PureComponent } from 'react';
|
||||
|
||||
// Ignoring because I couldn't get @types/react-select work with Torkel's fork
|
||||
// @ts-ignore
|
||||
import { default as ReactSelect, components } from '@torkelo/react-select';
|
||||
// @ts-ignore
|
||||
import Creatable from '@torkelo/react-select/creatable';
|
||||
// @ts-ignore
|
||||
import { CreatableProps } from 'react-select';
|
||||
// @ts-ignore
|
||||
import { default as ReactAsyncSelect } from '@torkelo/react-select/async';
|
||||
import { default as ReactSelect, components } from 'react-select';
|
||||
import Creatable from 'react-select/creatable';
|
||||
import { default as ReactAsyncSelect } from 'react-select/async';
|
||||
|
||||
// Components
|
||||
import { SelectOption } from './SelectOption';
|
||||
@ -115,11 +108,11 @@ export class Select<T> extends PureComponent<LegacySelectProps<T>> {
|
||||
widthClass = 'width-' + width;
|
||||
}
|
||||
|
||||
let SelectComponent: ReactSelect | Creatable = ReactSelect;
|
||||
let SelectComponent = ReactSelect;
|
||||
const creatableOptions: any = {};
|
||||
|
||||
if (allowCustomValue) {
|
||||
SelectComponent = Creatable;
|
||||
SelectComponent = Creatable as any;
|
||||
creatableOptions.formatCreateLabel = formatCreateLabel ?? ((input: string) => input);
|
||||
}
|
||||
|
||||
@ -223,6 +216,7 @@ export class AsyncSelect<T> extends PureComponent<AsyncProps<T>> {
|
||||
<WrapInTooltip onCloseMenu={onCloseMenu} onOpenMenu={onOpenMenu} tooltipContent={tooltipContent} isOpen={isOpen}>
|
||||
{(onOpenMenuInternal, onCloseMenuInternal) => {
|
||||
return (
|
||||
//@ts-expect-error
|
||||
<ReactAsyncSelect
|
||||
captureMenuScroll={false}
|
||||
classNamePrefix="gf-form-select-box"
|
||||
|
||||
@ -1,13 +1,9 @@
|
||||
import React from 'react';
|
||||
import { Icon } from '../../../Icon/Icon';
|
||||
|
||||
// Ignoring because I couldn't get @types/react-select work with Torkel's fork
|
||||
// @ts-ignore
|
||||
import { components } from '@torkelo/react-select';
|
||||
import { OptionProps } from 'react-select';
|
||||
import { components, OptionProps } from 'react-select';
|
||||
|
||||
// https://github.com/JedWatson/react-select/issues/3038
|
||||
export interface ExtendedOptionProps extends OptionProps<any> {
|
||||
export interface ExtendedOptionProps extends OptionProps<any, any> {
|
||||
data: {
|
||||
description?: string;
|
||||
imgUrl?: string;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
exports[`SelectOption renders correctly 1`] = `
|
||||
<div
|
||||
className="css-qtwcag-Option"
|
||||
className="css-o8533i-Option"
|
||||
id=""
|
||||
onClick={[MockFunction]}
|
||||
onMouseMove={[MockFunction]}
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
import React, { useCallback } from 'react';
|
||||
// @ts-ignore
|
||||
import { default as ReactSelect } from '@torkelo/react-select';
|
||||
// @ts-ignore
|
||||
import Creatable from '@torkelo/react-select/creatable';
|
||||
// @ts-ignore
|
||||
import { default as ReactAsyncSelect } from '@torkelo/react-select/async';
|
||||
// @ts-ignore
|
||||
import { default as AsyncCreatable } from '@torkelo/react-select/async-creatable';
|
||||
import { default as ReactSelect } from 'react-select';
|
||||
import Creatable from 'react-select/creatable';
|
||||
import { default as ReactAsyncSelect } from 'react-select/async';
|
||||
import { default as AsyncCreatable } from 'react-select/async-creatable';
|
||||
|
||||
import { Icon } from '../Icon/Icon';
|
||||
import { Spinner } from '../Spinner/Spinner';
|
||||
@ -150,7 +146,9 @@ export function SelectBase<T>({
|
||||
},
|
||||
[isMulti, onChange]
|
||||
);
|
||||
let ReactSelectComponent: ReactSelect | Creatable = ReactSelect;
|
||||
|
||||
let ReactSelectComponent = ReactSelect;
|
||||
|
||||
const creatableProps: any = {};
|
||||
let asyncSelectProps: any = {};
|
||||
let selectedValue;
|
||||
@ -217,14 +215,14 @@ export function SelectBase<T>({
|
||||
};
|
||||
|
||||
if (allowCustomValue) {
|
||||
ReactSelectComponent = Creatable;
|
||||
ReactSelectComponent = Creatable as any;
|
||||
creatableProps.formatCreateLabel = formatCreateLabel ?? ((input: string) => `Create: ${input}`);
|
||||
creatableProps.onCreateOption = onCreateOption;
|
||||
}
|
||||
|
||||
// Instead of having AsyncSelect, as a separate component we render ReactAsyncSelect
|
||||
if (loadOptions) {
|
||||
ReactSelectComponent = allowCustomValue ? AsyncCreatable : ReactAsyncSelect;
|
||||
ReactSelectComponent = (allowCustomValue ? AsyncCreatable : ReactAsyncSelect) as any;
|
||||
asyncSelectProps = {
|
||||
loadOptions,
|
||||
cacheOptions,
|
||||
|
||||
@ -6,7 +6,7 @@ import { stylesFactory, withTheme } from '../../themes';
|
||||
import { Themeable } from '../../types';
|
||||
import { Icon } from '../Icon/Icon';
|
||||
|
||||
interface ExtendedGroupProps extends GroupProps<any>, Themeable {
|
||||
interface ExtendedGroupProps extends Omit<GroupProps<any, any>, 'theme'>, Themeable {
|
||||
data: {
|
||||
label: string;
|
||||
expanded: boolean;
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
import React from 'react';
|
||||
import { css, cx } from '@emotion/css';
|
||||
|
||||
// Ignoring because I couldn't get @types/react-select work with Torkel's fork
|
||||
// @ts-ignore
|
||||
import { components } from '@torkelo/react-select';
|
||||
import { components, SingleValueProps } from 'react-select';
|
||||
import { useDelayedSwitch } from '../../utils/useDelayedSwitch';
|
||||
import { stylesFactory, useTheme } from '../../themes';
|
||||
import { SlideOutTransition } from '../transitions/SlideOutTransition';
|
||||
@ -41,14 +38,12 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
|
||||
return { singleValue, container, item };
|
||||
});
|
||||
|
||||
type Props = {
|
||||
children: React.ReactNode;
|
||||
data: {
|
||||
interface Props
|
||||
extends SingleValueProps<{
|
||||
imgUrl?: string;
|
||||
loading?: boolean;
|
||||
hideText?: boolean;
|
||||
};
|
||||
};
|
||||
}> {}
|
||||
|
||||
export const SingleValue = (props: Props) => {
|
||||
const { children, data } = props;
|
||||
|
||||
@ -21,7 +21,6 @@ export const TimeZoneOffset: React.FC<PropsWithChildren<Props>> = (props) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<span className={styles.localTime}>{formatLocalTime(timestamp, timeZone)}</span>
|
||||
<span className={cx(styles.offset, className)}>{formatUtcOffset(timestamp, timeZone)}</span>
|
||||
</>
|
||||
);
|
||||
@ -39,13 +38,6 @@ export const formatUtcOffset = (timestamp: number, timeZone: TimeZone): string =
|
||||
return `UTC${offset}`;
|
||||
};
|
||||
|
||||
const formatLocalTime = (timestamp: number, timeZone: TimeZone): string => {
|
||||
return dateTimeFormat(timestamp, {
|
||||
timeZone,
|
||||
format: 'HH:mm',
|
||||
});
|
||||
};
|
||||
|
||||
const getStyles = stylesFactory((theme: GrafanaTheme) => {
|
||||
const textBase = css`
|
||||
font-weight: normal;
|
||||
@ -55,11 +47,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
|
||||
`;
|
||||
|
||||
return {
|
||||
localTime: css`
|
||||
display: none;
|
||||
${textBase};
|
||||
color: ${theme.colors.text};
|
||||
`,
|
||||
offset: css`
|
||||
${textBase};
|
||||
color: ${theme.colors.text};
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
// Libraries
|
||||
import React, { FC } from 'react';
|
||||
import { css } from '@emotion/css';
|
||||
// @ts-ignore
|
||||
import { components } from '@torkelo/react-select';
|
||||
import { components } from 'react-select';
|
||||
import { AsyncSelect, stylesFactory, useTheme, resetSelectStyles, Icon } from '@grafana/ui';
|
||||
import { escapeStringForRegex, GrafanaTheme } from '@grafana/data';
|
||||
// Components
|
||||
|
||||
@ -7,7 +7,7 @@ import { OptionProps } from 'react-select/src/components/Option';
|
||||
import { TagBadge } from './TagBadge';
|
||||
|
||||
// https://github.com/JedWatson/react-select/issues/3038
|
||||
interface ExtendedOptionProps extends OptionProps<any> {
|
||||
interface ExtendedOptionProps extends OptionProps<any, any> {
|
||||
data: any;
|
||||
}
|
||||
|
||||
|
||||
54
yarn.lock
54
yarn.lock
@ -2672,6 +2672,13 @@
|
||||
dependencies:
|
||||
regenerator-runtime "^0.13.4"
|
||||
|
||||
"@babel/runtime@^7.12.0":
|
||||
version "7.13.10"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.10.tgz#47d42a57b6095f4468da440388fdbad8bebf0d7d"
|
||||
integrity sha512-4QPkjJq6Ns3V/RgpEahRk+AGfL0eO6RHHtTWoNNr5mO49G6B5+X6d6THgWEAvTrznU5xYpbAlVKRYcsCgh/Akw==
|
||||
dependencies:
|
||||
regenerator-runtime "^0.13.4"
|
||||
|
||||
"@babel/runtime@^7.5.4":
|
||||
version "7.7.6"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.6.tgz#d18c511121aff1b4f2cd1d452f1bac9601dd830f"
|
||||
@ -2997,7 +3004,7 @@
|
||||
"@emotion/utils" "0.11.3"
|
||||
"@emotion/weak-memoize" "0.2.5"
|
||||
|
||||
"@emotion/cache@^11.1.3":
|
||||
"@emotion/cache@^11.0.0", "@emotion/cache@^11.1.3":
|
||||
version "11.1.3"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.1.3.tgz#c7683a9484bcd38d5562f2b9947873cf66829afd"
|
||||
integrity sha512-n4OWinUPJVaP6fXxWZD9OUeQ0lY7DvtmtSuqtRWT0Ofo/sBLCVSgb4/Oa0Q5eFxcwablRKjUXqXtNZVyEwCAuA==
|
||||
@ -3103,7 +3110,7 @@
|
||||
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
|
||||
integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
|
||||
|
||||
"@emotion/react@11.1.5":
|
||||
"@emotion/react@11.1.5", "@emotion/react@^11.1.1":
|
||||
version "11.1.5"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.1.5.tgz#15e78f9822894cdc296e6f4e0688bac8120dfe66"
|
||||
integrity sha512-xfnZ9NJEv9SU9K2sxXM06lzjK245xSeHRpUh67eARBm3PBHjjKIZlfWZ7UQvD0Obvw6ZKjlC79uHrlzFYpOB/Q==
|
||||
@ -5570,20 +5577,6 @@
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.10.2"
|
||||
|
||||
"@torkelo/react-select@3.0.8":
|
||||
version "3.0.8"
|
||||
resolved "https://registry.yarnpkg.com/@torkelo/react-select/-/react-select-3.0.8.tgz#04bfc877118af425f97eac2b471b66705484ee4a"
|
||||
integrity sha512-becmEGnaOQpUcZS7kjQLaxjY0WKJcFFvAOTWIiU1XfwBV1sdCSgYFGWT+QhkCdRlP2Ux5U4cKhTUsWSeI9FsIA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.4.4"
|
||||
"@emotion/cache" "^10.0.9"
|
||||
"@emotion/core" "^10.0.9"
|
||||
"@emotion/css" "^10.0.9"
|
||||
memoize-one "^5.0.0"
|
||||
prop-types "^15.6.0"
|
||||
react-input-autosize "^2.2.2"
|
||||
react-transition-group "^4.3.0"
|
||||
|
||||
"@types/angular-route@1.7.0":
|
||||
version "1.7.0"
|
||||
resolved "https://registry.yarnpkg.com/@types/angular-route/-/angular-route-1.7.0.tgz#ba12d09df1aac3c88e3684500001daedfc97fb69"
|
||||
@ -6614,11 +6607,12 @@
|
||||
"@types/history" "*"
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react-select@3.0.8":
|
||||
version "3.0.8"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-select/-/react-select-3.0.8.tgz#b824a12d438dd493c30ffff49a805f797602a837"
|
||||
integrity sha512-0763TXYZc8bTiHM+DUnWoy9Rg5mk6PxYWBrEe6Fkjgc0Kv0r1RqjZk9/BrK4wdM0RNjYjixlFPnUhOJb76sMGg==
|
||||
"@types/react-select@4.0.13":
|
||||
version "4.0.13"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-select/-/react-select-4.0.13.tgz#8d2c41a0df7fbf67ab0b995797b0e9b4e6b38cde"
|
||||
integrity sha512-rXYEc565IzzjgQzs9C0YCFxV/QajMZnCHG5QwRQ5BZMfH0Lj90VI/xohawemRkD46IvpaLRbO6xzSquJlgBGUA==
|
||||
dependencies:
|
||||
"@emotion/serialize" "^1.0.0"
|
||||
"@types/react" "*"
|
||||
"@types/react-dom" "*"
|
||||
"@types/react-transition-group" "*"
|
||||
@ -21708,13 +21702,6 @@ react-immutable-proptypes@^2.1.0:
|
||||
resolved "https://registry.yarnpkg.com/react-immutable-proptypes/-/react-immutable-proptypes-2.1.0.tgz#023d6f39bb15c97c071e9e60d00d136eac5fa0b4"
|
||||
integrity sha1-Aj1vObsVyXwHHp5g0A0TbqxfoLQ=
|
||||
|
||||
react-input-autosize@^2.2.2:
|
||||
version "2.2.2"
|
||||
resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.2.tgz#fcaa7020568ec206bc04be36f4eb68e647c4d8c2"
|
||||
integrity sha512-jQJgYCA3S0j+cuOwzuCd1OjmBmnZLdqQdiLKRYrsMMzbjUrVDS5RvJUDwJqA7sKuksDuzFtm6hZGKFu7Mjk5aw==
|
||||
dependencies:
|
||||
prop-types "^15.5.8"
|
||||
|
||||
react-input-autosize@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-3.0.0.tgz#6b5898c790d4478d69420b55441fcc31d5c50a85"
|
||||
@ -21854,6 +21841,19 @@ react-select-event@^5.1.0:
|
||||
dependencies:
|
||||
"@testing-library/dom" ">=7"
|
||||
|
||||
react-select@4.3.0:
|
||||
version "4.3.0"
|
||||
resolved "https://registry.yarnpkg.com/react-select/-/react-select-4.3.0.tgz#6bde634ae7a378b49f3833c85c126f533483fa2e"
|
||||
integrity sha512-SBPD1a3TJqE9zoI/jfOLCAoLr/neluaeokjOixr3zZ1vHezkom8K0A9J4QG9IWDqIDE9K/Mv+0y1GjidC2PDtQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.12.0"
|
||||
"@emotion/cache" "^11.0.0"
|
||||
"@emotion/react" "^11.1.1"
|
||||
memoize-one "^5.0.0"
|
||||
prop-types "^15.6.0"
|
||||
react-input-autosize "^3.0.0"
|
||||
react-transition-group "^4.3.0"
|
||||
|
||||
react-select@^3.0.8:
|
||||
version "3.2.0"
|
||||
resolved "https://registry.yarnpkg.com/react-select/-/react-select-3.2.0.tgz#de9284700196f5f9b5277c5d850a9ce85f5c72fe"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user