From 001aeedc1f9b89f4b29ebe59c5d13abdb7b306e5 Mon Sep 17 00:00:00 2001
From: Alexander Polyankin <alexander.polyankin@metabase.com>
Date: Mon, 6 Dec 2021 19:55:46 +0300
Subject: [PATCH] Remove flow from components (#19209)
---
.../src/metabase/components/ActionButton.jsx | 29 +----
.../metabase/components/ButtonWithStatus.jsx | 8 +-
.../metabase/components/ColorRangePicker.jsx | 25 +----
.../src/metabase/components/CopyButton.jsx | 15 +--
.../src/metabase/components/CopyWidget.jsx | 9 +-
.../src/metabase/components/EmptyState.jsx | 11 +-
.../src/metabase/components/EntityMenu.jsx | 22 +---
.../src/metabase/components/ExplorePane.jsx | 32 +-----
frontend/src/metabase/components/FieldSet.jsx | 10 +-
.../metabase/components/FieldValuesWidget.jsx | 68 ++----------
.../components/InputWithSelectPrefix.jsx | 21 +---
.../src/metabase/components/NumericInput.jsx | 8 +-
.../metabase/components/PasswordReveal.jsx | 12 +-
.../src/metabase/components/ProgressBar.jsx | 10 +-
frontend/src/metabase/components/Quotes.jsx | 14 +--
frontend/src/metabase/components/Swapper.jsx | 5 -
.../components/TitleAndDescription.jsx | 8 +-
.../src/metabase/components/TokenField.jsx | 105 ++++--------------
frontend/src/metabase/components/Value.jsx | 10 +-
.../components/icons/NightModeIcon.jsx | 8 +-
20 files changed, 66 insertions(+), 364 deletions(-)
diff --git a/frontend/src/metabase/components/ActionButton.jsx b/frontend/src/metabase/components/ActionButton.jsx
index 9b0d7376135..124f57c9a03 100644
--- a/frontend/src/metabase/components/ActionButton.jsx
+++ b/frontend/src/metabase/components/ActionButton.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
import React, { Component } from "react";
import PropTypes from "prop-types";
@@ -8,32 +9,8 @@ import { cancelable } from "metabase/lib/promise";
import { t } from "ttag";
import cx from "classnames";
-type Props = {
- actionFn: (...args: any[]) => Promise<any>,
- className?: string,
- successClassName?: string,
- failedClassName?: string,
- children?: any,
- normalText?: string,
- activeText?: string,
- failedText?: string,
- successText?: string,
- forceActiveStyle?: boolean,
-};
-
-type State = {
- active: boolean,
- result: null | "success" | "failed",
-};
-
export default class ActionButton extends Component {
- props: Props;
- state: State;
-
- timeout: ?any;
- actionPromise: ?{ cancel: () => void };
-
- constructor(props: Props) {
+ constructor(props) {
super(props);
this.state = {
@@ -77,7 +54,7 @@ export default class ActionButton extends Component {
);
};
- onClick = (event: MouseEvent) => {
+ onClick = event => {
event.preventDefault();
// set state to active
diff --git a/frontend/src/metabase/components/ButtonWithStatus.jsx b/frontend/src/metabase/components/ButtonWithStatus.jsx
index 5b18da20665..0dd460d82d1 100644
--- a/frontend/src/metabase/components/ButtonWithStatus.jsx
+++ b/frontend/src/metabase/components/ButtonWithStatus.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
import React, { Component } from "react";
import { t } from "ttag";
@@ -17,13 +18,6 @@ const defaultTitleForState = {
* When the button is clicked, `inProgress` text is shown, and when the promise resolves, `completed` text is shown.
*/
export default class ButtonWithStatus extends Component {
- props: {
- onClickOperation: any => Promise<void>,
- titleForState?: string[],
- disabled?: boolean,
- className?: string,
- };
-
state = {
progressState: "default",
};
diff --git a/frontend/src/metabase/components/ColorRangePicker.jsx b/frontend/src/metabase/components/ColorRangePicker.jsx
index 85793830d81..f1f83e8263d 100644
--- a/frontend/src/metabase/components/ColorRangePicker.jsx
+++ b/frontend/src/metabase/components/ColorRangePicker.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
import React from "react";
import PopoverWithTrigger from "metabase/components/PopoverWithTrigger";
@@ -7,19 +8,6 @@ import { getColorScale } from "metabase/lib/colors";
import d3 from "d3";
import cx from "classnames";
-import type { ColorString } from "metabase/lib/colors";
-
-type Props = {
- value: ColorString[],
- onChange: (ColorString[]) => void,
- ranges: ColorString[][],
- className?: string,
- style?: { [key: string]: any },
- sections?: number,
- quantile?: boolean,
- columns?: number,
-};
-
const ColorRangePicker = ({
value,
onChange,
@@ -29,7 +17,7 @@ const ColorRangePicker = ({
sections = 5,
quantile = false,
columns = 2,
-}: Props) => (
+}) => (
<PopoverWithTrigger
triggerElement={
<ColorRangePreview
@@ -67,20 +55,13 @@ const ColorRangePicker = ({
</PopoverWithTrigger>
);
-type ColorRangePreviewProps = {
- colors: ColorString[],
- sections?: number,
- quantile?: boolean,
- className?: string,
-};
-
export const ColorRangePreview = ({
colors = [],
sections = 5,
quantile = false,
className,
...props
-}: ColorRangePreviewProps) => {
+}) => {
const scale = getColorScale([0, sections - 1], colors, quantile);
return (
<div className={cx(className, "flex")} {...props}>
diff --git a/frontend/src/metabase/components/CopyButton.jsx b/frontend/src/metabase/components/CopyButton.jsx
index ea9b2fedda2..f55b8bee9b3 100644
--- a/frontend/src/metabase/components/CopyButton.jsx
+++ b/frontend/src/metabase/components/CopyButton.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
import React, { Component } from "react";
import Icon from "metabase/components/Icon";
@@ -5,20 +6,8 @@ import Tooltip from "metabase/components/Tooltip";
import { t } from "ttag";
import CopyToClipboard from "react-copy-to-clipboard";
-type Props = {
- className?: string,
- style?: Object,
- value: string,
-};
-type State = {
- copied: boolean,
-};
-
export default class CopyWidget extends Component {
- props: Props;
- state: State;
-
- constructor(props: Props) {
+ constructor(props) {
super(props);
this.state = {
copied: false,
diff --git a/frontend/src/metabase/components/CopyWidget.jsx b/frontend/src/metabase/components/CopyWidget.jsx
index 36fcace4c1b..ffadaad2f52 100644
--- a/frontend/src/metabase/components/CopyWidget.jsx
+++ b/frontend/src/metabase/components/CopyWidget.jsx
@@ -1,18 +1,11 @@
+/* eslint-disable react/prop-types */
import React, { Component } from "react";
import cx from "classnames";
import CopyButton from "./CopyButton";
-type Props = {
- value: string,
- onChange?: (value: string) => void,
- style?: Object,
-};
-
export default class CopyWidget extends Component {
- props: Props;
-
render() {
const { value, onChange, style, ...props } = this.props;
return (
diff --git a/frontend/src/metabase/components/EmptyState.jsx b/frontend/src/metabase/components/EmptyState.jsx
index 29580bb8a71..e84664d4df5 100644
--- a/frontend/src/metabase/components/EmptyState.jsx
+++ b/frontend/src/metabase/components/EmptyState.jsx
@@ -7,15 +7,6 @@ import Icon from "metabase/components/Icon";
import Link from "metabase/components/Link";
import Text from "metabase/components/type/Text";
-type EmptyStateProps = {
- message?: React.Element,
- title?: string,
- action?: string,
- link?: string,
- illustrationElement: React.Element,
- onActionClick?: () => void,
-};
-
// Don't break existing empty states
// TODO - remove these and update empty states with proper usage of illustrationElement
const LegacyIcon = props =>
@@ -42,7 +33,7 @@ const EmptyState = ({
illustrationElement,
onActionClick,
...rest
-}: EmptyStateProps) => (
+}) => (
<Box>
<Flex justify="center" flexDirection="column" align="center">
{illustrationElement && <Box mb={[2, 3]}>{illustrationElement}</Box>}
diff --git a/frontend/src/metabase/components/EntityMenu.jsx b/frontend/src/metabase/components/EntityMenu.jsx
index a38e95e8e64..6330e1464da 100644
--- a/frontend/src/metabase/components/EntityMenu.jsx
+++ b/frontend/src/metabase/components/EntityMenu.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
import React, { Component } from "react";
import { Motion, spring } from "react-motion";
import cx from "classnames";
@@ -9,26 +10,9 @@ import EntityMenuTrigger from "metabase/components/EntityMenuTrigger";
import EntityMenuItem from "metabase/components/EntityMenuItem";
import Popover from "metabase/components/Popover";
-type EntityMenuOption = {
- icon: string,
- title: string,
- action?: () => void,
- link?: string,
-};
-
-type Props = {
- items: Array<EntityMenuOption>,
- triggerIcon: string,
- className?: string,
- tooltip?: string,
- triggerProps: Object,
-};
-
const MENU_SHIFT_Y = 10;
class EntityMenu extends Component {
- props: Props;
-
state = {
open: false,
freezeMenu: false,
@@ -44,11 +28,11 @@ class EntityMenu extends Component {
this.setState({ open, menuItemContent: null });
};
- setFreezeMenu = (freezeMenu: boolean) => {
+ setFreezeMenu = freezeMenu => {
this.setState({ freezeMenu });
};
- replaceMenuWithItemContent = (menuItemContent: any) => {
+ replaceMenuWithItemContent = menuItemContent => {
this.setState({ menuItemContent });
};
diff --git a/frontend/src/metabase/components/ExplorePane.jsx b/frontend/src/metabase/components/ExplorePane.jsx
index 080698f62e2..1b77539eb9a 100644
--- a/frontend/src/metabase/components/ExplorePane.jsx
+++ b/frontend/src/metabase/components/ExplorePane.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
import React from "react";
import { Link } from "react-router";
@@ -12,30 +13,13 @@ import { color } from "metabase/lib/colors";
import { t } from "ttag";
import _ from "underscore";
-import type { DatabaseCandidates, Candidate } from "metabase-types/types/Auto";
-
const DEFAULT_TITLE = t`Hi, Metabot here.`;
const DEFAULT_DESCRIPTION = "";
-type Props = {
- candidates?: ?DatabaseCandidates,
- title?: ?string,
- description?: ?string,
- withMetabot: ?boolean,
- gridColumns: ?number,
- asCards: ?boolean,
-};
-
-type State = {
- schemaName: ?string,
- visibleItems: number,
-};
-
const DEFAULT_VISIBLE_ITEMS = 4;
export class ExplorePane extends React.Component {
- props: Props;
- state: State = {
+ state = {
schemaName: null,
visibleItems: DEFAULT_VISIBLE_ITEMS,
};
@@ -127,15 +111,7 @@ export class ExplorePane extends React.Component {
}
}
-export const ExploreList = ({
- candidates,
- gridColumns,
- asCards,
-}: {
- candidates: Candidate[],
- gridColumns: ?number,
- asCards: ?boolean,
-}) => (
+export const ExploreList = ({ candidates, gridColumns, asCards }) => (
<Grid>
{candidates &&
candidates.map((option, index) => (
@@ -152,7 +128,7 @@ export const ExploreList = ({
</Grid>
);
-export const ExploreOption = ({ option }: { option: Candidate }) => (
+export const ExploreOption = ({ option }) => (
<Link
to={option.url}
className="flex align-center no-decoration text-medium text-brand-hover"
diff --git a/frontend/src/metabase/components/FieldSet.jsx b/frontend/src/metabase/components/FieldSet.jsx
index c180b51284e..83bb6f2fba6 100644
--- a/frontend/src/metabase/components/FieldSet.jsx
+++ b/frontend/src/metabase/components/FieldSet.jsx
@@ -1,20 +1,14 @@
+/* eslint-disable react/prop-types */
import React from "react";
import cx from "classnames";
-type Props = {
- className: string,
- legend: string,
- noPadding?: boolean,
- children: React.Element,
-};
-
export default function FieldSet({
className = "border-brand",
legend,
noPadding,
children,
-}: Props) {
+}) {
const fieldSetClassName = cx("bordered rounded", { "px2 pb2": !noPadding });
return (
diff --git a/frontend/src/metabase/components/FieldValuesWidget.jsx b/frontend/src/metabase/components/FieldValuesWidget.jsx
index 604b0cee877..94eb9b5f8ad 100644
--- a/frontend/src/metabase/components/FieldValuesWidget.jsx
+++ b/frontend/src/metabase/components/FieldValuesWidget.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
import React, { Component } from "react";
import PropTypes from "prop-types";
import cx from "classnames";
@@ -18,14 +19,6 @@ import { stripId } from "metabase/lib/formatting";
import Fields from "metabase/entities/fields";
-import type Field from "metabase-lib/lib/metadata/Field";
-import type { FieldId } from "metabase-types/types/Field";
-import type { Value } from "metabase-types/types/Dataset";
-import type { FormattingOptions } from "metabase/lib/formatting";
-import type { LayoutRendererProps } from "metabase/components/TokenField";
-import type { DashboardWithCards } from "metabase-types/types/Dashboard";
-import type { Parameter } from "metabase-types/types/Parameter";
-
const MAX_SEARCH_RESULTS = 100;
const fieldValuesWidgetPropTypes = {
@@ -78,45 +71,9 @@ function mapStateToProps(state, { fields = [] }) {
};
}
-type Props = {
- value: Value[],
- onChange: (value: Value[]) => void,
- fields: Field[],
- disablePKRemappingForSearch?: boolean,
- multi?: boolean,
- autoFocus?: boolean,
- color?: string,
- fetchFieldValues: (id: FieldId) => void,
- maxResults: number,
- style?: { [key: string]: string | number },
- placeholder?: string,
- formatOptions?: FormattingOptions,
- maxWidth?: number,
- minWidth?: number,
- alwaysShowOptions?: boolean,
- disableSearch?: boolean,
-
- dashboard?: DashboardWithCards,
- parameter?: Parameter,
- parameters?: Parameter[],
-
- className?: string,
-};
-
-type State = {
- loadingState: "INIT" | "LOADING" | "LOADED",
- options: [Value, ?string][],
- lastValue: string,
-};
-
@AutoExpanding
export class FieldValuesWidget extends Component {
- props: Props;
- state: State;
-
- _cancel: ?() => void;
-
- constructor(props: Props) {
+ constructor(props) {
super(props);
this.state = {
options: [],
@@ -273,7 +230,7 @@ export class FieldValuesWidget extends Component {
);
}
- onInputChange = (value: string) => {
+ onInputChange = value => {
if (value && this.isSearchable()) {
this._search(value);
}
@@ -281,7 +238,7 @@ export class FieldValuesWidget extends Component {
return value;
};
- searchField = (field: Field) => {
+ searchField = field => {
if (this.props.disablePKRemappingForSearch && field.isPK()) {
return field.isSearchable() ? field : null;
}
@@ -295,7 +252,7 @@ export class FieldValuesWidget extends Component {
showRemapping = () => this.props.fields.length === 1;
- search = async (value: string, cancelled: Promise<void>) => {
+ search = async (value, cancelled) => {
if (!value) {
return;
}
@@ -341,7 +298,7 @@ export class FieldValuesWidget extends Component {
return results;
};
- _search = (value: string) => {
+ _search = value => {
const { lastValue, options } = this.state;
// if this search is just an extension of the previous search, and the previous search
@@ -366,7 +323,7 @@ export class FieldValuesWidget extends Component {
this._searchDebounced(value);
};
- _searchDebounced = _.debounce(async (value): void => {
+ _searchDebounced = _.debounce(async value => {
this.setState({
loadingState: "LOADING",
});
@@ -401,12 +358,7 @@ export class FieldValuesWidget extends Component {
}
}, 500);
- renderOptions({
- optionsList,
- isFocused,
- isAllSelected,
- isFiltered,
- }: LayoutRendererProps) {
+ renderOptions({ optionsList, isFocused, isAllSelected, isFiltered }) {
const { alwaysShowOptions, fields } = this.props;
const { loadingState } = this.state;
if (alwaysShowOptions || isFocused) {
@@ -426,7 +378,7 @@ export class FieldValuesWidget extends Component {
}
}
- renderValue = (value: Value, options: FormattingOptions) => {
+ renderValue = (value, options) => {
const { fields, formatOptions } = this.props;
return (
<ValueComponent
@@ -555,7 +507,7 @@ const LoadingState = () => (
</div>
);
-const NoMatchState = ({ fields }: { fields: Field[] }) => {
+const NoMatchState = ({ fields }) => {
if (fields.length > 1) {
// if there is more than one field, don't name them
return <OptionsMessage message={t`No matching result`} />;
diff --git a/frontend/src/metabase/components/InputWithSelectPrefix.jsx b/frontend/src/metabase/components/InputWithSelectPrefix.jsx
index ac1250453fe..f41cf068471 100644
--- a/frontend/src/metabase/components/InputWithSelectPrefix.jsx
+++ b/frontend/src/metabase/components/InputWithSelectPrefix.jsx
@@ -1,21 +1,9 @@
+/* eslint-disable react/prop-types */
import React, { Component } from "react";
import Select, { Option } from "./Select";
import InputBlurChange from "./InputBlurChange";
-type Props = {
- onChange: (value: any) => void,
- value: string,
- prefixes: string[],
- defaultPrefix: string,
- caseInsensitivePrefix?: boolean,
-};
-
-type State = {
- prefix: string,
- rest: string,
-};
-
function splitValue({
value,
prefixes,
@@ -36,10 +24,7 @@ function splitValue({
}
export default class InputWithSelectPrefix extends Component {
- props: Props;
- state: State;
-
- constructor(props: Props) {
+ constructor(props) {
super(props);
const [prefix, rest] = splitValue(props);
@@ -55,7 +40,7 @@ export default class InputWithSelectPrefix extends Component {
}
}
- componentDidUpdate(prevProps: Props, prevState: State) {
+ componentDidUpdate(prevProps, prevState) {
const { prefix, rest } = this.state;
if (prevState.rest !== rest || prevState.prefix !== prefix) {
const value = prefix + rest;
diff --git a/frontend/src/metabase/components/NumericInput.jsx b/frontend/src/metabase/components/NumericInput.jsx
index cfbb4c1537c..68cb2d9074e 100644
--- a/frontend/src/metabase/components/NumericInput.jsx
+++ b/frontend/src/metabase/components/NumericInput.jsx
@@ -1,13 +1,9 @@
+/* eslint-disable react/prop-types */
import React from "react";
import InputBlurChange from "metabase/components/InputBlurChange";
-type Props = {
- value: ?(number | string),
- onChange: (value: ?number) => void,
-};
-
-const NumericInput = ({ value, onChange, ...props }: Props) => (
+const NumericInput = ({ value, onChange, ...props }) => (
<InputBlurChange
value={value == null ? "" : String(value)}
onBlurChange={({ target: { value } }) => {
diff --git a/frontend/src/metabase/components/PasswordReveal.jsx b/frontend/src/metabase/components/PasswordReveal.jsx
index 0d8e1d9b4c1..9931f7318f0 100644
--- a/frontend/src/metabase/components/PasswordReveal.jsx
+++ b/frontend/src/metabase/components/PasswordReveal.jsx
@@ -1,17 +1,10 @@
+/* eslint-disable react/prop-types */
/* flow */
import React, { Component } from "react";
import CopyButton from "metabase/components/CopyButton";
import { t } from "ttag";
import { color } from "metabase/lib/colors";
-type State = {
- visible: boolean,
-};
-
-type Props = {
- password: string,
-};
-
const styles = {
input: {
fontSize: "1.2rem",
@@ -30,8 +23,7 @@ const Label = () => (
);
export default class PasswordReveal extends Component {
- props: Props;
- state: State = { visible: false };
+ state = { visible: false };
render() {
const { password } = this.props;
diff --git a/frontend/src/metabase/components/ProgressBar.jsx b/frontend/src/metabase/components/ProgressBar.jsx
index 75e34a1fadf..bf70f8a4591 100644
--- a/frontend/src/metabase/components/ProgressBar.jsx
+++ b/frontend/src/metabase/components/ProgressBar.jsx
@@ -1,15 +1,9 @@
+/* eslint-disable react/prop-types */
import React, { Component } from "react";
import styled from "styled-components";
import { color as c } from "metabase/lib/colors";
-type Props = {
- percentage: number,
- animated: boolean,
- color: string,
- height: number,
-};
-
const ProgressWrapper = styled.div`
position: relative;
border: 1px solid ${props => props.color};
@@ -43,8 +37,6 @@ const Progress = styled.div`
// @Question - why is this separate from our progress Viz type?
export default class ProgressBar extends Component {
- props: Props;
-
static defaultProps = {
animated: false,
height: 10,
diff --git a/frontend/src/metabase/components/Quotes.jsx b/frontend/src/metabase/components/Quotes.jsx
index a8cc828d2ef..3284ee63943 100644
--- a/frontend/src/metabase/components/Quotes.jsx
+++ b/frontend/src/metabase/components/Quotes.jsx
@@ -1,20 +1,12 @@
+/* eslint-disable react/prop-types */
import React, { Component } from "react";
-type Props = {
- period: number,
- quotes: string[],
-};
-type State = {
- count: number,
-};
-
export default class Quotes extends Component {
- props: Props;
- state: State = {
+ state = {
count: 0,
};
- _timer: ?number = null;
+ _timer = null;
static defaultProps = {
quotes: [],
diff --git a/frontend/src/metabase/components/Swapper.jsx b/frontend/src/metabase/components/Swapper.jsx
index 13894f85785..0b4cc5247a8 100644
--- a/frontend/src/metabase/components/Swapper.jsx
+++ b/frontend/src/metabase/components/Swapper.jsx
@@ -3,11 +3,6 @@ import React from "react";
import { Motion, spring } from "react-motion";
class Swapper extends React.Component {
- props: {
- defaultElement: React.Element,
- swappedElement: React.Element,
- };
-
state = {
hovered: false,
};
diff --git a/frontend/src/metabase/components/TitleAndDescription.jsx b/frontend/src/metabase/components/TitleAndDescription.jsx
index 1a628816cda..39e28fdab81 100644
--- a/frontend/src/metabase/components/TitleAndDescription.jsx
+++ b/frontend/src/metabase/components/TitleAndDescription.jsx
@@ -1,15 +1,11 @@
+/* eslint-disable react/prop-types */
import React from "react";
import cx from "classnames";
import Icon from "metabase/components/Icon";
import Tooltip from "metabase/components/Tooltip";
-type Attributes = {
- title: string,
- description?: string,
- className?: string,
-};
-const TitleAndDescription = ({ title, description, className }: Attributes) => (
+const TitleAndDescription = ({ title, description, className }) => (
<div className={cx("flex align-center", className)}>
<h2 className="h2 mr1 text-wrap">{title}</h2>
{description && (
diff --git a/frontend/src/metabase/components/TokenField.jsx b/frontend/src/metabase/components/TokenField.jsx
index 3f308e23d9b..8e36a715b9e 100644
--- a/frontend/src/metabase/components/TokenField.jsx
+++ b/frontend/src/metabase/components/TokenField.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
/* eslint "react/prop-types": "warn" */
import React, { Component } from "react";
import PropTypes from "prop-types";
@@ -26,79 +27,11 @@ const defaultStyleValue = {
fontWeight: 700,
};
-type Value = any;
-type Option = any;
-
-export type LayoutRendererProps = {
- valuesList: React.Element,
- optionsList: ?React.Element,
- isFocused: boolean,
- isAllSelected: boolean,
- isFiltered: boolean,
- onClose: () => void,
-};
-
-type Props = {
- value: Value[],
- onChange: (value: Value[]) => void,
-
- options: Option[],
-
- placeholder?: string,
- autoFocus?: boolean,
- multi?: boolean,
-
- style: { [key: string]: string | number },
- color: string,
-
- idKey: string | number | (() => string),
- valueKey: string | number | (() => any),
- labelKey: string | number | (() => string),
-
- removeSelected?: boolean,
- filterOption: (option: Option, searchValue: string) => boolean,
-
- onInputChange?: string => string,
- onInputKeyDown?: event => void,
- onFocus?: () => void,
- onBlur?: () => void,
-
- validateValue: (value: Value) => boolean,
- updateOnInputChange?: boolean,
- updateOnInputBlur?: boolean,
- // if provided, parseFreeformValue parses the input string into a value,
- // or returns null to indicate an invalid value
- parseFreeformValue: (value: string) => ?Value,
-
- valueRenderer: (value: Value) => React.Element,
- optionRenderer: (option: Option) => React.Element,
- layoutRenderer: (props: LayoutRendererProps) => React.Element,
-
- style?: any,
- className?: string,
- valueStyle?: any,
- optionsStyle?: any,
- optionsClassName?: string,
-};
-
-type State = {
- inputValue: string,
- searchValue: string,
- filteredOptions: Option[],
- selectedOptionValue: ?Value,
- isFocused: boolean,
- isAllSelected: boolean,
- listIsHovered: boolean,
-};
-
// somewhat matches react-select's API: https://github.com/JedWatson/react-select
export default class TokenField extends Component {
- props: Props;
- state: State;
-
- scrollElement: ?HTMLDivElement = null;
+ scrollElement = null;
- constructor(props: Props) {
+ constructor(props) {
super(props);
this.state = {
@@ -136,12 +69,12 @@ export default class TokenField extends Component {
this._updateFilteredValues(this.props);
}
- UNSAFE_componentWillReceiveProps(nextProps: Props) {
- this._updateFilteredValues((nextProps: Props));
+ UNSAFE_componentWillReceiveProps(nextProps) {
+ this._updateFilteredValues(nextProps);
}
- setInputValue(inputValue: string, setSearchValue: boolean = true) {
- const newState: { inputValue: string, searchValue?: string } = {
+ setInputValue(inputValue, setSearchValue = true) {
+ const newState = {
inputValue,
};
if (setSearchValue) {
@@ -150,11 +83,11 @@ export default class TokenField extends Component {
this.setState(newState, () => this._updateFilteredValues(this.props));
}
- clearInputValue(clearSearchValue: boolean = true) {
+ clearInputValue(clearSearchValue = true) {
this.setInputValue("", clearSearchValue);
}
- _id(value: Value) {
+ _id(value) {
const { idKey } = this.props;
if (typeof idKey === "function") {
@@ -166,21 +99,21 @@ export default class TokenField extends Component {
}
}
- _value(option: Option) {
+ _value(option) {
const { valueKey } = this.props;
return typeof valueKey === "function" ? valueKey(option) : option[valueKey];
}
- _label(option: Option) {
+ _label(option) {
const { labelKey } = this.props;
return typeof labelKey === "function" ? labelKey(option) : option[labelKey];
}
- _key(option: Option) {
+ _key(option) {
return JSON.stringify(this._value(option));
}
- _isLastFreeformValue(inputValue: string) {
+ _isLastFreeformValue(inputValue) {
const { value, parseFreeformValue, updateOnInputChange } = this.props;
if (parseFreeformValue && updateOnInputChange) {
const freeformValue = parseFreeformValue(inputValue);
@@ -190,7 +123,7 @@ export default class TokenField extends Component {
}
}
- _updateFilteredValues = (props: Props) => {
+ _updateFilteredValues = props => {
let { options = [], value, removeSelected, filterOption } = props;
let { searchValue, selectedOptionValue } = this.state;
const selectedValueIds = new Set(
@@ -432,13 +365,13 @@ export default class TokenField extends Component {
}
}
- addOption = (option: Option) => {
+ addOption = option => {
const replaceLast = this._isLastFreeformValue(this.state.inputValue);
// add the option's value to the current value
this.addValue(this._value(option), replaceLast);
};
- addValue(valueToAdd: Value, replaceLast: boolean = false) {
+ addValue(valueToAdd, replaceLast = false) {
const { value, onChange, multi } = this.props;
if (!Array.isArray(valueToAdd)) {
valueToAdd = [valueToAdd];
@@ -458,7 +391,7 @@ export default class TokenField extends Component {
// )
}
- removeValue(valueToRemove: Value) {
+ removeValue(valueToRemove) {
const { value, onChange } = this.props;
const values = value.filter(v => !this._valueIsEqual(v, valueToRemove));
onChange(values);
@@ -466,11 +399,11 @@ export default class TokenField extends Component {
// this.setInputValue("");
}
- _valueIsEqual(v1: any, v2: any) {
+ _valueIsEqual(v1, v2) {
return JSON.stringify(v1) === JSON.stringify(v2);
}
- componentDidUpdate(prevProps: Props, prevState: State) {
+ componentDidUpdate(prevProps, prevState) {
const input = this.inputRef.current;
if (
diff --git a/frontend/src/metabase/components/Value.jsx b/frontend/src/metabase/components/Value.jsx
index b7115c7983a..07ac97cbc33 100644
--- a/frontend/src/metabase/components/Value.jsx
+++ b/frontend/src/metabase/components/Value.jsx
@@ -1,17 +1,11 @@
+/* eslint-disable react/prop-types */
import React from "react";
import RemappedValue from "metabase/containers/RemappedValue";
import { formatValue } from "metabase/lib/formatting";
-import type { Value as ValueType } from "metabase-types/types/Dataset";
-import type { FormattingOptions } from "metabase/lib/formatting";
-
-type Props = {
- value: ValueType,
-} & FormattingOptions;
-
-const Value = ({ value, ...options }: Props) => {
+const Value = ({ value, ...options }) => {
if (options.hide) {
return null;
}
diff --git a/frontend/src/metabase/components/icons/NightModeIcon.jsx b/frontend/src/metabase/components/icons/NightModeIcon.jsx
index c29580e2956..82638580962 100644
--- a/frontend/src/metabase/components/icons/NightModeIcon.jsx
+++ b/frontend/src/metabase/components/icons/NightModeIcon.jsx
@@ -1,13 +1,9 @@
+/* eslint-disable react/prop-types */
import React from "react";
import Icon from "metabase/components/Icon";
-type Props = {
- // ...IconProps,
- isNightMode: boolean,
-};
-
-const NightModeIcon = ({ isNightMode, ...props }: Props) => (
+const NightModeIcon = ({ isNightMode, ...props }) => (
<Icon name={isNightMode ? "sun" : "moon"} {...props} />
);
--
GitLab