+ {props.children}
+
+ )}
+
diff --git a/public/app/core/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx b/public/app/core/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx
new file mode 100644
index 00000000000..63191862ebb
--- /dev/null
+++ b/public/app/core/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx
@@ -0,0 +1,36 @@
+import { PureComponent } from 'react';
+import ReactDOM from 'react-dom';
+
+export interface Props {
+ onClick: () => void;
+}
+
+interface State {
+ hasEventListener: boolean;
+}
+
+export class ClickOutsideWrapper extends PureComponent {
+ state = {
+ hasEventListener: false,
+ };
+
+ componentDidMount() {
+ window.addEventListener('click', this.onOutsideClick, false);
+ }
+
+ componentWillUnmount() {
+ window.removeEventListener('click', this.onOutsideClick, false);
+ }
+
+ onOutsideClick = event => {
+ const domNode = ReactDOM.findDOMNode(this) as Element;
+
+ if (!domNode || !domNode.contains(event.target)) {
+ this.props.onClick();
+ }
+ };
+
+ render() {
+ return this.props.children;
+ }
+}
diff --git a/public/app/core/components/CopyToClipboard/CopyToClipboard.tsx b/public/app/core/components/CopyToClipboard/CopyToClipboard.tsx
new file mode 100644
index 00000000000..ea63de58b47
--- /dev/null
+++ b/public/app/core/components/CopyToClipboard/CopyToClipboard.tsx
@@ -0,0 +1,67 @@
+import React, { PureComponent, ReactNode } from 'react';
+import ClipboardJS from 'clipboard';
+
+interface Props {
+ text: () => string;
+ elType?: string;
+ onSuccess?: (evt: any) => void;
+ onError?: (evt: any) => void;
+ className?: string;
+ children?: ReactNode;
+}
+
+export class CopyToClipboard extends PureComponent {
+ clipboardjs: any;
+ myRef: any;
+
+ constructor(props) {
+ super(props);
+ this.myRef = React.createRef();
+ }
+
+ componentDidMount() {
+ const { text, onSuccess, onError } = this.props;
+
+ this.clipboardjs = new ClipboardJS(this.myRef.current, {
+ text: text,
+ });
+
+ if (onSuccess) {
+ this.clipboardjs.on('success', evt => {
+ evt.clearSelection();
+ onSuccess(evt);
+ });
+ }
+
+ if (onError) {
+ this.clipboardjs.on('error', evt => {
+ console.error('Action:', evt.action);
+ console.error('Trigger:', evt.trigger);
+ onError(evt);
+ });
+ }
+ }
+
+ componentWillUnmount() {
+ if (this.clipboardjs) {
+ this.clipboardjs.destroy();
+ }
+ }
+
+ getElementType = () => {
+ return this.props.elType || 'button';
+ };
+
+ render() {
+ const { elType, text, children, onError, onSuccess, ...restProps } = this.props;
+
+ return React.createElement(
+ this.getElementType(),
+ {
+ ref: this.myRef,
+ ...restProps,
+ },
+ this.props.children
+ );
+ }
+}
diff --git a/public/app/core/components/CustomScrollbar/CustomScrollbar.tsx b/public/app/core/components/CustomScrollbar/CustomScrollbar.tsx
index 9b9a9c4d02a..590c11c0615 100644
--- a/public/app/core/components/CustomScrollbar/CustomScrollbar.tsx
+++ b/public/app/core/components/CustomScrollbar/CustomScrollbar.tsx
@@ -28,8 +28,8 @@ class CustomScrollbar extends PureComponent {
}
renderTrackVertical={props => }
renderThumbHorizontal={props => }
diff --git a/public/app/core/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap b/public/app/core/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap
index 37d8cea45be..310eb714af9 100644
--- a/public/app/core/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap
+++ b/public/app/core/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap
@@ -6,8 +6,8 @@ exports[`CustomScrollbar renders correctly 1`] = `
style={
Object {
"height": "auto",
- "maxHeight": "100%",
- "minHeight": "100%",
+ "maxHeight": "inherit",
+ "minHeight": "inherit",
"overflow": "hidden",
"position": "relative",
"width": "100%",
@@ -23,8 +23,8 @@ exports[`CustomScrollbar renders correctly 1`] = `
"left": undefined,
"marginBottom": 0,
"marginRight": 0,
- "maxHeight": "calc(100% + 0px)",
- "minHeight": "calc(100% + 0px)",
+ "maxHeight": "calc(inherit + 0px)",
+ "minHeight": "calc(inherit + 0px)",
"overflow": "scroll",
"position": "relative",
"right": undefined,
diff --git a/public/app/core/components/Form/Element.tsx b/public/app/core/components/Form/Element.tsx
new file mode 100644
index 00000000000..997d7f0e717
--- /dev/null
+++ b/public/app/core/components/Form/Element.tsx
@@ -0,0 +1,43 @@
+import React, { PureComponent, ReactNode, ReactElement } from 'react';
+import { Label } from './Label';
+import { uniqueId } from 'lodash';
+
+interface Props {
+ label?: ReactNode;
+ labelClassName?: string;
+ id?: string;
+ children: ReactElement;
+}
+
+export class Element extends PureComponent {
+ elementId: string = this.props.id || uniqueId('form-element-');
+
+ get elementLabel() {
+ const { label, labelClassName } = this.props;
+
+ if (label) {
+ return (
+
+ );
+ }
+
+ return null;
+ }
+
+ get children() {
+ const { children } = this.props;
+
+ return React.cloneElement(children, { id: this.elementId });
+ }
+
+ render() {
+ return (
+ {
+ validationEvents?: ValidationEvents;
+ hideErrorMessage?: boolean;
+
+ // Override event props and append status as argument
+ onBlur?: (event: React.FocusEvent, status?: InputStatus) => void;
+ onFocus?: (event: React.FocusEvent, status?: InputStatus) => void;
+ onChange?: (event: React.FormEvent, status?: InputStatus) => void;
+}
+
+export class Input extends PureComponent {
+ static defaultProps = {
+ className: '',
+ };
+
+ state = {
+ error: null,
+ };
+
+ get status() {
+ return this.state.error ? InputStatus.Invalid : InputStatus.Valid;
+ }
+
+ get isInvalid() {
+ return this.status === InputStatus.Invalid;
+ }
+
+ validatorAsync = (validationRules: ValidationRule[]) => {
+ return evt => {
+ const errors = validate(evt.target.value, validationRules);
+ this.setState(prevState => {
+ return {
+ ...prevState,
+ error: errors ? errors[0] : null,
+ };
+ });
+ };
+ };
+
+ populateEventPropsWithStatus = (restProps, validationEvents: ValidationEvents) => {
+ const inputElementProps = { ...restProps };
+ Object.keys(EventsWithValidation).forEach((eventName: EventsWithValidation) => {
+ if (hasValidationEvent(eventName, validationEvents) || restProps[eventName]) {
+ inputElementProps[eventName] = async evt => {
+ evt.persist(); // Needed for async. https://reactjs.org/docs/events.html#event-pooling
+ if (hasValidationEvent(eventName, validationEvents)) {
+ await this.validatorAsync(validationEvents[eventName]).apply(this, [evt]);
+ }
+ if (restProps[eventName]) {
+ restProps[eventName].apply(null, [evt, this.status]);
+ }
+ };
+ }
+ });
+ return inputElementProps;
+ };
+
+ render() {
+ const { validationEvents, className, hideErrorMessage, ...restProps } = this.props;
+ const { error } = this.state;
+ const inputClassName = classNames('gf-form-input', { invalid: this.isInvalid }, className);
+ const inputElementProps = this.populateEventPropsWithStatus(restProps, validationEvents);
+
+ return (
+ {
+ render() {
+ const { children, htmlFor, className } = this.props;
+
+ return (
+
+ );
+ }
+}
diff --git a/public/app/core/components/Form/__snapshots__/Input.test.tsx.snap b/public/app/core/components/Form/__snapshots__/Input.test.tsx.snap
new file mode 100644
index 00000000000..249d6b0be8d
--- /dev/null
+++ b/public/app/core/components/Form/__snapshots__/Input.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Input renders correctly 1`] = `
+ {
+ private wrapperRef = createRef();
+
+ static defaultProps = {
+ open: 3,
+ config: {
+ animateOpen: true,
+ },
+ };
+
+ componentDidMount() {
+ this.renderJson();
+ }
+
+ componentDidUpdate() {
+ this.renderJson();
+ }
+
+ renderJson = () => {
+ const { json, config, open, onDidRender } = this.props;
+ const wrapperEl = this.wrapperRef.current;
+ const formatter = new JsonExplorer(json, open, config);
+ const hasChildren: boolean = wrapperEl.hasChildNodes();
+ if (hasChildren) {
+ wrapperEl.replaceChild(formatter.render(), wrapperEl.lastChild);
+ } else {
+ wrapperEl.appendChild(formatter.render());
+ }
+
+ if (onDidRender) {
+ onDidRender(formatter.json);
+ }
+ };
+
+ render() {
+ const { className } = this.props;
+ return ;
+ }
+}
diff --git a/public/app/core/components/Label/Label.tsx b/public/app/core/components/Label/Label.tsx
index 9b8fb6c6e19..362c3c577f7 100644
--- a/public/app/core/components/Label/Label.tsx
+++ b/public/app/core/components/Label/Label.tsx
@@ -6,6 +6,7 @@ interface Props {
for?: string;
children: ReactNode;
width?: number;
+ className?: string;
}
export const Label: SFC = props => {
diff --git a/public/app/core/components/PermissionList/AddPermission.tsx b/public/app/core/components/PermissionList/AddPermission.tsx
index d6da7c68544..749bef680bf 100644
--- a/public/app/core/components/PermissionList/AddPermission.tsx
+++ b/public/app/core/components/PermissionList/AddPermission.tsx
@@ -1,7 +1,7 @@
import React, { Component } from 'react';
-import { UserPicker } from 'app/core/components/Picker/UserPicker';
-import { TeamPicker, Team } from 'app/core/components/Picker/TeamPicker';
-import DescriptionPicker, { OptionWithDescription } from 'app/core/components/Picker/DescriptionPicker';
+import { UserPicker } from 'app/core/components/Select/UserPicker';
+import { TeamPicker, Team } from 'app/core/components/Select/TeamPicker';
+import { Select, SelectOptionItem } from 'app/core/components/Select/Select';
import { User } from 'app/types';
import {
dashboardPermissionLevels,
@@ -61,7 +61,7 @@ class AddPermissions extends Component {
this.setState({ teamId: team && !Array.isArray(team) ? team.id : 0 });
};
- onPermissionChanged = (permission: OptionWithDescription) => {
+ onPermissionChanged = (permission: SelectOptionItem) => {
this.setState({ permission: permission.value });
};
@@ -121,11 +121,11 @@ class AddPermissions extends Component {
) : null}
{
render() {
const { item } = this.props;
+ const currentPermissionLevel = dashboardPermissionLevels.find(dp => dp.value === item.permission);
return (
@@ -23,12 +24,12 @@ export default class DisabledPermissionListItem extends Component {
Can
diff --git a/public/app/core/components/PermissionList/PermissionListItem.tsx b/public/app/core/components/PermissionList/PermissionListItem.tsx
index 56b6114d236..e726667cfbb 100644
--- a/public/app/core/components/PermissionList/PermissionListItem.tsx
+++ b/public/app/core/components/PermissionList/PermissionListItem.tsx
@@ -1,5 +1,5 @@
import React, { PureComponent } from 'react';
-import DescriptionPicker from 'app/core/components/Picker/DescriptionPicker';
+import { Select } from 'app/core/components/Select/Select';
import { dashboardPermissionLevels, DashboardAcl, PermissionLevel } from 'app/types/acl';
import { FolderInfo } from 'app/types';
@@ -50,6 +50,7 @@ export default class PermissionsListItem extends PureComponent {
render() {
const { item, folderInfo } = this.props;
const inheritedFromRoot = item.dashboardId === -1 && !item.inherited;
+ const currentPermissionLevel = dashboardPermissionLevels.find(dp => dp.value === item.permission);
return (
@@ -74,12 +75,13 @@ export default class PermissionsListItem extends PureComponent {
Can
diff --git a/public/app/core/components/Picker/DescriptionOption.tsx b/public/app/core/components/Picker/DescriptionOption.tsx
deleted file mode 100644
index 9ddf13f7532..00000000000
--- a/public/app/core/components/Picker/DescriptionOption.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import { components } from 'react-select';
-import { OptionProps } from 'react-select/lib/components/Option';
-
-// https://github.com/JedWatson/react-select/issues/3038
-interface ExtendedOptionProps extends OptionProps {
- data: any;
-}
-
-export const Option = (props: ExtendedOptionProps) => {
- const { children, isSelected, data, className } = props;
- return (
-
-
- );
-};
-
-export default Option;
diff --git a/public/app/core/components/Picker/DescriptionPicker.tsx b/public/app/core/components/Picker/DescriptionPicker.tsx
deleted file mode 100644
index a917e3977f5..00000000000
--- a/public/app/core/components/Picker/DescriptionPicker.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React, { Component } from 'react';
-import Select from 'react-select';
-import DescriptionOption from './DescriptionOption';
-import IndicatorsContainer from './IndicatorsContainer';
-import ResetStyles from './ResetStyles';
-import NoOptionsMessage from './NoOptionsMessage';
-
-export interface OptionWithDescription {
- value: any;
- label: string;
- description: string;
-}
-
-export interface Props {
- optionsWithDesc: OptionWithDescription[];
- onSelected: (permission) => void;
- disabled: boolean;
- className?: string;
- value?: any;
-}
-
-const getSelectedOption = (optionsWithDesc, value) => optionsWithDesc.find(option => option.value === value);
-
-class DescriptionPicker extends Component {
- render() {
- const { optionsWithDesc, onSelected, disabled, className, value } = this.props;
- const selectedOption = getSelectedOption(optionsWithDesc, value);
- return (
- ) => {
- const { children, className } = props;
- return (
-
-
- );
-};
-
-export default PickerOption;
diff --git a/public/app/core/components/Picker/PickerOption.tsx b/public/app/core/components/Picker/PickerOption.tsx
deleted file mode 100644
index 98bb5dc566e..00000000000
--- a/public/app/core/components/Picker/PickerOption.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-import { components } from 'react-select';
-import { OptionProps } from 'react-select/lib/components/Option';
-
-// https://github.com/JedWatson/react-select/issues/3038
-interface ExtendedOptionProps extends OptionProps {
- data: any;
-}
-
-export const PickerOption = (props: ExtendedOptionProps) => {
- const { children, data, className } = props;
- return (
-
-
- );
-};
-
-export default PickerOption;
diff --git a/public/app/core/components/Picker/SimplePicker.tsx b/public/app/core/components/Picker/SimplePicker.tsx
deleted file mode 100644
index 817cd14150f..00000000000
--- a/public/app/core/components/Picker/SimplePicker.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React, { SFC } from 'react';
-import Select from 'react-select';
-import DescriptionOption from './DescriptionOption';
-import ResetStyles from './ResetStyles';
-
-interface Props {
- className?: string;
- defaultValue?: any;
- getOptionLabel: (item: any) => string;
- getOptionValue: (item: any) => string;
- onSelected: (item: any) => {} | void;
- options: any[];
- placeholder?: string;
- width: number;
- value: any;
-}
-
-const SimplePicker: SFC = ({
- className,
- defaultValue,
- getOptionLabel,
- getOptionValue,
- onSelected,
- options,
- placeholder,
- width,
- value,
-}) => {
- return (
-
- );
-};
-
-export default SimplePicker;
diff --git a/public/app/core/components/Picker/__snapshots__/PickerOption.test.tsx.snap b/public/app/core/components/Picker/__snapshots__/PickerOption.test.tsx.snap
deleted file mode 100644
index b376ab24934..00000000000
--- a/public/app/core/components/Picker/__snapshots__/PickerOption.test.tsx.snap
+++ /dev/null
@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PickerOption renders correctly 1`] = `
- {
+ node: HTMLElement = document.createElement('div');
+ portalRoot: HTMLElement;
+
+ constructor(props) {
+ super(props);
+ const {
+ className,
+ root = document.body
+ } = this.props;
+
+ if (className) {
+ this.node.classList.add(className);
+ }
+
+ this.portalRoot = root;
+ this.portalRoot.appendChild(this.node);
+ }
+
+ componentWillUnmount() {
+ this.portalRoot.removeChild(this.node);
+ }
+
+ render() {
+ return ReactDOM.createPortal(this.props.children, this.node);
+ }
+}
diff --git a/public/app/core/components/Select/DataSourcePicker.tsx b/public/app/core/components/Select/DataSourcePicker.tsx
new file mode 100644
index 00000000000..1a9081038c0
--- /dev/null
+++ b/public/app/core/components/Select/DataSourcePicker.tsx
@@ -0,0 +1,72 @@
+// Libraries
+import React, { PureComponent } from 'react';
+import _ from 'lodash';
+
+// Components
+import Select from './Select';
+
+// Types
+import { DataSourceSelectItem } from 'app/types';
+
+export interface Props {
+ onChange: (ds: DataSourceSelectItem) => void;
+ datasources: DataSourceSelectItem[];
+ current: DataSourceSelectItem;
+ onBlur?: () => void;
+ autoFocus?: boolean;
+}
+
+export class DataSourcePicker extends PureComponent {
+ static defaultProps = {
+ autoFocus: false,
+ };
+
+ searchInput: HTMLElement;
+
+ constructor(props) {
+ super(props);
+ }
+
+ onChange = item => {
+ const ds = this.props.datasources.find(ds => ds.name === item.value);
+ this.props.onChange(ds);
+ };
+
+ render() {
+ const { datasources, current, autoFocus, onBlur } = this.props;
+
+ const options = datasources.map(ds => ({
+ value: ds.name,
+ label: ds.name,
+ imgUrl: ds.meta.info.logos.small,
+ }));
+
+ const value = current && {
+ label: current.name,
+ value: current.name,
+ imgUrl: current.meta.info.logos.small,
+ };
+
+ return (
+ ) => {
+ const { children } = props;
+ return (
+
+
+ );
+};
+
+export default NoOptionsMessage;
diff --git a/public/app/core/components/Select/OptionGroup.tsx b/public/app/core/components/Select/OptionGroup.tsx
new file mode 100644
index 00000000000..a001f58c681
--- /dev/null
+++ b/public/app/core/components/Select/OptionGroup.tsx
@@ -0,0 +1,53 @@
+import React, { PureComponent } from 'react';
+import { GroupProps } from 'react-select/lib/components/Group';
+
+interface ExtendedGroupProps extends GroupProps {
+ data: any;
+}
+
+interface State {
+ expanded: boolean;
+}
+
+export default class OptionGroup extends PureComponent {
+ state = {
+ expanded: false,
+ };
+
+ componentDidMount() {
+ if (this.props.selectProps) {
+ const value = this.props.selectProps.value[this.props.selectProps.value.length - 1];
+
+ if (value && this.props.options.some(option => option.value === value)) {
+ this.setState({ expanded: true });
+ }
+ }
+ }
+
+ componentDidUpdate(nextProps) {
+ if (nextProps.selectProps.inputValue !== '') {
+ this.setState({ expanded: true });
+ }
+ }
+
+ onToggleChildren = () => {
+ this.setState(prevState => ({
+ expanded: !prevState.expanded,
+ }));
+ };
+
+ render() {
+ const { children, label } = this.props;
+ const { expanded } = this.state;
+
+ return (
+ {
+ data: {
+ description?: string;
+ imgUrl?: string;
+ };
+}
+
+export const Option = (props: ExtendedOptionProps) => {
+ const { children, isSelected, data } = props;
+
+ return (
+
+
+ );
+};
+
+// was not able to type this without typescript error
+export const SingleValue = props => {
+ const { children, data } = props;
+
+ return (
+
+
+ );
+};
+
+export default Option;
diff --git a/public/app/core/components/Picker/ResetStyles.tsx b/public/app/core/components/Select/ResetStyles.tsx
similarity index 85%
rename from public/app/core/components/Picker/ResetStyles.tsx
rename to public/app/core/components/Select/ResetStyles.tsx
index 2a235b2892a..c34abb544ab 100644
--- a/public/app/core/components/Picker/ResetStyles.tsx
+++ b/public/app/core/components/Select/ResetStyles.tsx
@@ -1,4 +1,4 @@
-export default {
+export default {
clearIndicator: () => ({}),
container: () => ({}),
control: () => ({}),
@@ -11,7 +11,9 @@
loadingIndicator: () => ({}),
loadingMessage: () => ({}),
menu: () => ({}),
- menuList: () => ({}),
+ menuList: ({ maxHeight }: { maxHeight: number }) => ({
+ maxHeight,
+ }),
multiValue: () => ({}),
multiValueLabel: () => ({}),
multiValueRemove: () => ({}),
diff --git a/public/app/core/components/Select/Select.tsx b/public/app/core/components/Select/Select.tsx
new file mode 100644
index 00000000000..893eb1a6655
--- /dev/null
+++ b/public/app/core/components/Select/Select.tsx
@@ -0,0 +1,232 @@
+// Libraries
+import classNames from 'classnames';
+import React, { PureComponent } from 'react';
+import { default as ReactSelect } from '@torkelo/react-select';
+import { default as ReactAsyncSelect } from '@torkelo/react-select/lib/Async';
+import { components } from '@torkelo/react-select';
+
+// Components
+import { Option, SingleValue } from './PickerOption';
+import OptionGroup from './OptionGroup';
+import IndicatorsContainer from './IndicatorsContainer';
+import NoOptionsMessage from './NoOptionsMessage';
+import ResetStyles from './ResetStyles';
+import CustomScrollbar from '../CustomScrollbar/CustomScrollbar';
+
+export interface SelectOptionItem {
+ label?: string;
+ value?: any;
+ imgUrl?: string;
+ description?: string;
+ [key: string]: any;
+}
+
+interface CommonProps {
+ defaultValue?: any;
+ getOptionLabel?: (item: SelectOptionItem) => string;
+ getOptionValue?: (item: SelectOptionItem) => string;
+ onChange: (item: SelectOptionItem) => {} | void;
+ placeholder?: string;
+ width?: number;
+ value?: SelectOptionItem;
+ className?: string;
+ isDisabled?: boolean;
+ isSearchable?: boolean;
+ isClearable?: boolean;
+ autoFocus?: boolean;
+ openMenuOnFocus?: boolean;
+ onBlur?: () => void;
+ maxMenuHeight?: number;
+ isLoading: boolean;
+ noOptionsMessage?: () => string;
+ isMulti?: boolean;
+ backspaceRemovesValue: boolean;
+}
+
+interface SelectProps {
+ options: SelectOptionItem[];
+}
+
+interface AsyncProps {
+ defaultOptions: boolean;
+ loadOptions: (query: string) => Promise;
+ loadingMessage?: () => string;
+}
+
+export const MenuList = props => {
+ return (
+
+ {props.children}
+
+ );
+};
+
+export class Select extends PureComponent {
+ static defaultProps = {
+ width: null,
+ className: '',
+ isDisabled: false,
+ isSearchable: true,
+ isClearable: false,
+ isMulti: false,
+ openMenuOnFocus: false,
+ autoFocus: false,
+ isLoading: false,
+ backspaceRemovesValue: true,
+ maxMenuHeight: 300,
+ };
+
+ render() {
+ const {
+ defaultValue,
+ getOptionLabel,
+ getOptionValue,
+ onChange,
+ options,
+ placeholder,
+ width,
+ value,
+ className,
+ isDisabled,
+ isLoading,
+ isSearchable,
+ isClearable,
+ backspaceRemovesValue,
+ isMulti,
+ autoFocus,
+ openMenuOnFocus,
+ onBlur,
+ maxMenuHeight,
+ noOptionsMessage,
+ } = this.props;
+
+ let widthClass = '';
+ if (width) {
+ widthClass = 'width-' + width;
+ }
+
+ const selectClassNames = classNames('gf-form-input', 'gf-form-input--form-dropdown', widthClass, className);
+
+ return (
+ {
+ static defaultProps = {
+ width: null,
+ className: '',
+ components: {},
+ loadingMessage: () => 'Loading...',
+ isDisabled: false,
+ isClearable: false,
+ isMulti: false,
+ isSearchable: true,
+ backspaceRemovesValue: true,
+ autoFocus: false,
+ openMenuOnFocus: false,
+ maxMenuHeight: 300,
+ };
+
+ render() {
+ const {
+ defaultValue,
+ getOptionLabel,
+ getOptionValue,
+ onChange,
+ placeholder,
+ width,
+ value,
+ className,
+ loadOptions,
+ defaultOptions,
+ isLoading,
+ loadingMessage,
+ noOptionsMessage,
+ isDisabled,
+ isSearchable,
+ isClearable,
+ backspaceRemovesValue,
+ autoFocus,
+ onBlur,
+ openMenuOnFocus,
+ maxMenuHeight,
+ isMulti,
+ } = this.props;
+
+ let widthClass = '';
+ if (width) {
+ widthClass = 'width-' + width;
+ }
+
+ const selectClassNames = classNames('gf-form-input', 'gf-form-input--form-dropdown', widthClass, className);
+
+ return (
+ {
const backendSrv = getBackendSrv();
this.setState({ isLoading: true });
+ if (_.isNil(query)) {
+ query = '';
+ }
+
return backendSrv.get(`/api/teams/search?perpage=10&page=1&query=${query}`).then(result => {
const teams = result.teams.map(team => {
return {
id: team.id,
+ value: team.id,
label: team.name,
name: team.name,
- avatarUrl: team.avatarUrl,
+ imgUrl: team.avatarUrl,
};
});
@@ -62,24 +64,13 @@ export class TeamPicker extends Component {
return (
'Loading...'}
noOptionsMessage={() => 'No teams found'}
- getOptionValue={i => i.id}
- getOptionLabel={i => i.label}
/>
);
diff --git a/public/app/core/components/Select/UnitPicker.tsx b/public/app/core/components/Select/UnitPicker.tsx
new file mode 100644
index 00000000000..75885cbbb84
--- /dev/null
+++ b/public/app/core/components/Select/UnitPicker.tsx
@@ -0,0 +1,51 @@
+import React, { PureComponent } from 'react';
+import Select from './Select';
+import kbn from 'app/core/utils/kbn';
+
+interface Props {
+ onChange: (item: any) => void;
+ defaultValue?: string;
+ width?: number;
+}
+
+export default class UnitPicker extends PureComponent {
+ static defaultProps = {
+ width: 12,
+ };
+
+ render() {
+ const { defaultValue, onChange, width } = this.props;
+
+ const unitGroups = kbn.getUnitFormats();
+
+ // Need to transform the data structure to work well with Select
+ const groupOptions = unitGroups.map(group => {
+ const options = group.submenu.map(unit => {
+ return {
+ label: unit.text,
+ value: unit.value,
+ };
+ });
+
+ return {
+ label: group.text,
+ options,
+ };
+ });
+
+ const value = groupOptions.map(group => {
+ return group.options.find(option => option.value === defaultValue);
+ });
+
+ return (
+
+ );
+ }
+}
diff --git a/public/app/core/components/Picker/UserPicker.test.tsx b/public/app/core/components/Select/UserPicker.test.tsx
similarity index 100%
rename from public/app/core/components/Picker/UserPicker.test.tsx
rename to public/app/core/components/Select/UserPicker.test.tsx
diff --git a/public/app/core/components/Picker/UserPicker.tsx b/public/app/core/components/Select/UserPicker.tsx
similarity index 68%
rename from public/app/core/components/Picker/UserPicker.tsx
rename to public/app/core/components/Select/UserPicker.tsx
index f80a3fc135f..8496d707105 100644
--- a/public/app/core/components/Picker/UserPicker.tsx
+++ b/public/app/core/components/Select/UserPicker.tsx
@@ -1,12 +1,16 @@
+// Libraries
import React, { Component } from 'react';
-import AsyncSelect from 'react-select/lib/Async';
-import PickerOption from './PickerOption';
+import _ from 'lodash';
+
+// Components
+import { AsyncSelect } from './Select';
+
+// Utils & Services
import { debounce } from 'lodash';
import { getBackendSrv } from 'app/core/services/backend_srv';
+
+// Types
import { User } from 'app/types';
-import ResetStyles from './ResetStyles';
-import IndicatorsContainer from './IndicatorsContainer';
-import NoOptionsMessage from './NoOptionsMessage';
export interface Props {
onSelected: (user: User) => void;
@@ -35,13 +39,18 @@ export class UserPicker extends Component {
const backendSrv = getBackendSrv();
this.setState({ isLoading: true });
+ if (_.isNil(query)) {
+ query = '';
+ }
+
return backendSrv
.get(`/api/org/users?query=${query}&limit=10`)
.then(result => {
return result.map(user => ({
id: user.userId,
+ value: user.userId,
label: user.login === user.email ? user.login : `${user.login} - ${user.email}`,
- avatarUrl: user.avatarUrl,
+ imgUrl: user.avatarUrl,
login: user.login,
}));
})
@@ -57,24 +66,13 @@ export class UserPicker extends Component {
return (
'Loading...'}
noOptionsMessage={() => 'No users found'}
- getOptionValue={i => i.id}
- getOptionLabel={i => i.label}
/>
);
diff --git a/public/app/core/components/Select/__snapshots__/PickerOption.test.tsx.snap b/public/app/core/components/Select/__snapshots__/PickerOption.test.tsx.snap
new file mode 100644
index 00000000000..2136c22b1c6
--- /dev/null
+++ b/public/app/core/components/Select/__snapshots__/PickerOption.test.tsx.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PickerOption renders correctly 1`] = `
+ {
@@ -91,12 +91,11 @@ export class SharedPreferences extends PureComponent {
{
>
Home Dashboard
- dashboard.id === homeDashboardId)}
getOptionValue={i => i.id}
getOptionLabel={i => i.title}
- onSelected={(dashboard: DashboardSearchHit) => this.onHomeDashboardChanged(dashboard.id)}
+ onChange={(dashboard: DashboardSearchHit) => this.onHomeDashboardChanged(dashboard.id)}
options={dashboards}
placeholder="Chose default dashboard"
width={20}
@@ -119,11 +118,10 @@ export class SharedPreferences extends PureComponent {
+ {this.elementLabel}
+ {this.children}
+
+ );
+ }
+}
diff --git a/public/app/core/components/Form/Input.test.tsx b/public/app/core/components/Form/Input.test.tsx
new file mode 100644
index 00000000000..9e903208e80
--- /dev/null
+++ b/public/app/core/components/Form/Input.test.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { shallow } from 'enzyme';
+import { Input, EventsWithValidation } from './Input';
+import { ValidationEvents } from 'app/types';
+
+const TEST_ERROR_MESSAGE = 'Value must be empty or less than 3 chars';
+const testBlurValidation: ValidationEvents = {
+ [EventsWithValidation.onBlur]: [
+ {
+ rule: (value: string) => {
+ if (!value || value.length < 3) {
+ return true;
+ }
+ return false;
+ },
+ errorMessage: TEST_ERROR_MESSAGE,
+ },
+ ],
+};
+
+describe('Input', () => {
+ it('renders correctly', () => {
+ const tree = renderer.create().toJSON();
+ expect(tree).toMatchSnapshot();
+ });
+
+ it('should validate with error onBlur', () => {
+ const wrapper = shallow();
+ const evt = {
+ persist: jest.fn,
+ target: {
+ value: 'I can not be more than 2 chars',
+ },
+ };
+
+ wrapper.find('input').simulate('blur', evt);
+ expect(wrapper.state('error')).toBe(TEST_ERROR_MESSAGE);
+ });
+
+ it('should validate without error onBlur', () => {
+ const wrapper = shallow();
+ const evt = {
+ persist: jest.fn,
+ target: {
+ value: 'Hi',
+ },
+ };
+
+ wrapper.find('input').simulate('blur', evt);
+ expect(wrapper.state('error')).toBe(null);
+ });
+});
diff --git a/public/app/core/components/Form/Input.tsx b/public/app/core/components/Form/Input.tsx
new file mode 100644
index 00000000000..7940f3b1104
--- /dev/null
+++ b/public/app/core/components/Form/Input.tsx
@@ -0,0 +1,94 @@
+import React, { PureComponent } from 'react';
+import classNames from 'classnames';
+import { ValidationEvents, ValidationRule } from 'app/types';
+import { validate, hasValidationEvent } from 'app/core/utils/validate';
+
+export enum InputStatus {
+ Invalid = 'invalid',
+ Valid = 'valid',
+}
+
+export enum InputTypes {
+ Text = 'text',
+ Number = 'number',
+ Password = 'password',
+ Email = 'email',
+}
+
+export enum EventsWithValidation {
+ onBlur = 'onBlur',
+ onFocus = 'onFocus',
+ onChange = 'onChange',
+}
+
+interface Props extends React.HTMLProps
+
+ {error && !hideErrorMessage && {error}}
+
+ );
+ }
+}
diff --git a/public/app/core/components/Form/Label.tsx b/public/app/core/components/Form/Label.tsx
new file mode 100644
index 00000000000..385a1b325be
--- /dev/null
+++ b/public/app/core/components/Form/Label.tsx
@@ -0,0 +1,19 @@
+import React, { PureComponent, ReactNode } from 'react';
+
+interface Props {
+ children: ReactNode;
+ htmlFor?: string;
+ className?: string;
+}
+
+export class Label extends PureComponent
+
+
+`;
diff --git a/public/app/core/components/Form/index.ts b/public/app/core/components/Form/index.ts
new file mode 100644
index 00000000000..e4c8197aaa9
--- /dev/null
+++ b/public/app/core/components/Form/index.ts
@@ -0,0 +1,3 @@
+export { Element } from './Element';
+export { Input } from './Input';
+export { Label } from './Label';
diff --git a/public/app/core/components/JSONFormatter/JSONFormatter.tsx b/public/app/core/components/JSONFormatter/JSONFormatter.tsx
new file mode 100644
index 00000000000..73c055de94b
--- /dev/null
+++ b/public/app/core/components/JSONFormatter/JSONFormatter.tsx
@@ -0,0 +1,51 @@
+import React, { PureComponent, createRef } from 'react';
+// import JSONFormatterJS, { JSONFormatterConfiguration } from 'json-formatter-js';
+import { JsonExplorer } from 'app/core/core'; // We have made some monkey-patching of json-formatter-js so we can't switch right now
+
+interface Props {
+ className?: string;
+ json: {};
+ config?: any;
+ open?: number;
+ onDidRender?: (formattedJson: any) => void;
+}
+
+export class JSONFormatter extends PureComponent
-
diff --git a/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx b/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx
index ff679f67ae2..d3f9ddbb1fb 100644
--- a/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx
+++ b/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx
@@ -1,5 +1,5 @@
import React, { Component } from 'react';
-import DescriptionPicker from 'app/core/components/Picker/DescriptionPicker';
+import Select from 'app/core/components/Select/Select';
import { dashboardPermissionLevels } from 'app/types/acl';
export interface Props {
@@ -9,6 +9,7 @@ export interface Props {
export default class DisabledPermissionListItem extends Component
- {}}
- disabled={true}
- className={'gf-form-select-box__control--menu-right'}
- value={item.permission}
+
-
- {isSelected && }
-
- {children}
-
-
- {data.description}
-
-
- );
- }
-}
-
-export default DescriptionPicker;
diff --git a/public/app/core/components/Picker/NoOptionsMessage.tsx b/public/app/core/components/Picker/NoOptionsMessage.tsx
deleted file mode 100644
index 1d2ad4a179e..00000000000
--- a/public/app/core/components/Picker/NoOptionsMessage.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import { components } from 'react-select';
-import { OptionProps } from 'react-select/lib/components/Option';
-
-export interface Props {
- children: Element;
-}
-
-export const PickerOption = (props: OptionProps{children}
-
- {data.avatarUrl && 
}
- {children}
-
-
-
-`;
-
\ No newline at end of file
diff --git a/public/app/core/components/Portal/Portal.tsx b/public/app/core/components/Portal/Portal.tsx
new file mode 100644
index 00000000000..25d54a64209
--- /dev/null
+++ b/public/app/core/components/Portal/Portal.tsx
@@ -0,0 +1,35 @@
+import { PureComponent } from 'react';
+import ReactDOM from 'react-dom';
+
+interface Props {
+ className?: string;
+ root?: HTMLElement;
+}
+
+export default class BodyPortal extends PureComponent
- 
- Model title
-
-
+
+ );
+ }
+}
+
+export default DataSourcePicker;
diff --git a/public/app/core/components/Picker/IndicatorsContainer.tsx b/public/app/core/components/Select/IndicatorsContainer.tsx
similarity index 82%
rename from public/app/core/components/Picker/IndicatorsContainer.tsx
rename to public/app/core/components/Select/IndicatorsContainer.tsx
index a0998fe95b8..d4de51a2cef 100644
--- a/public/app/core/components/Picker/IndicatorsContainer.tsx
+++ b/public/app/core/components/Select/IndicatorsContainer.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { components } from 'react-select';
+import React from 'react';
+import { components } from '@torkelo/react-select';
export const IndicatorsContainer = props => {
const isOpen = props.selectProps.menuIsOpen;
diff --git a/public/app/core/components/Select/NoOptionsMessage.tsx b/public/app/core/components/Select/NoOptionsMessage.tsx
new file mode 100644
index 00000000000..5fe229340a4
--- /dev/null
+++ b/public/app/core/components/Select/NoOptionsMessage.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { components } from '@torkelo/react-select';
+import { OptionProps } from '@torkelo/react-select/lib/components/Option';
+
+export interface Props {
+ children: Element;
+}
+
+export const NoOptionsMessage = (props: OptionProps
+
+ {children}
+
+
+ );
+ }
+}
diff --git a/public/app/core/components/Picker/PickerOption.test.tsx b/public/app/core/components/Select/PickerOption.test.tsx
similarity index 92%
rename from public/app/core/components/Picker/PickerOption.test.tsx
rename to public/app/core/components/Select/PickerOption.test.tsx
index 7ebcac354e8..6b4aedcfcc0 100644
--- a/public/app/core/components/Picker/PickerOption.test.tsx
+++ b/public/app/core/components/Select/PickerOption.test.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react';
import renderer from 'react-test-renderer';
import PickerOption from './PickerOption';
@@ -24,7 +24,7 @@ const model = {
children: 'Model title',
data: {
title: 'Model title',
- avatarUrl: 'url/to/avatar',
+ imgUrl: 'url/to/avatar',
label: 'User picker label',
},
className: 'class-for-user-picker',
diff --git a/public/app/core/components/Select/PickerOption.tsx b/public/app/core/components/Select/PickerOption.tsx
new file mode 100644
index 00000000000..d263f6f832b
--- /dev/null
+++ b/public/app/core/components/Select/PickerOption.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { components } from '@torkelo/react-select';
+import { OptionProps } from 'react-select/lib/components/Option';
+
+// https://github.com/JedWatson/react-select/issues/3038
+interface ExtendedOptionProps extends OptionProps
+ {label}
+ {' '}
+
+ {expanded && children}
+
+ {data.imgUrl && 
}
+
+ }
+
+
+ {isSelected && }
+ {children}
+ {data.description && {data.description}
}
+
+ {data.imgUrl && }
+ {children}
+
+ }
+ {children}
+
+
+`;
diff --git a/public/app/core/components/Picker/__snapshots__/TeamPicker.test.tsx.snap b/public/app/core/components/Select/__snapshots__/TeamPicker.test.tsx.snap
similarity index 66%
rename from public/app/core/components/Picker/__snapshots__/TeamPicker.test.tsx.snap
rename to public/app/core/components/Select/__snapshots__/TeamPicker.test.tsx.snap
index 011811f21ad..f0bcfc6ba54 100644
--- a/public/app/core/components/Picker/__snapshots__/TeamPicker.test.tsx.snap
+++ b/public/app/core/components/Select/__snapshots__/TeamPicker.test.tsx.snap
@@ -57,35 +57,6 @@ exports[`TeamPicker renders correctly 1`] = `
}
}
tabIndex="0"
- theme={
- Object {
- "borderRadius": 4,
- "colors": Object {
- "danger": "#DE350B",
- "dangerLight": "#FFBDAD",
- "neutral0": "hsl(0, 0%, 100%)",
- "neutral10": "hsl(0, 0%, 90%)",
- "neutral20": "hsl(0, 0%, 80%)",
- "neutral30": "hsl(0, 0%, 70%)",
- "neutral40": "hsl(0, 0%, 60%)",
- "neutral5": "hsl(0, 0%, 95%)",
- "neutral50": "hsl(0, 0%, 50%)",
- "neutral60": "hsl(0, 0%, 40%)",
- "neutral70": "hsl(0, 0%, 30%)",
- "neutral80": "hsl(0, 0%, 20%)",
- "neutral90": "hsl(0, 0%, 10%)",
- "primary": "#2684FF",
- "primary25": "#DEEBFF",
- "primary50": "#B2D4FF",
- "primary75": "#4C9AFF",
- },
- "spacing": Object {
- "baseUnit": 4,
- "controlHeight": 38,
- "menuGutter": 8,
- },
- }
- }
type="text"
value=""
/>
diff --git a/public/app/core/components/Picker/__snapshots__/UserPicker.test.tsx.snap b/public/app/core/components/Select/__snapshots__/UserPicker.test.tsx.snap
similarity index 66%
rename from public/app/core/components/Picker/__snapshots__/UserPicker.test.tsx.snap
rename to public/app/core/components/Select/__snapshots__/UserPicker.test.tsx.snap
index 3e23bd435b1..37a485747dd 100644
--- a/public/app/core/components/Picker/__snapshots__/UserPicker.test.tsx.snap
+++ b/public/app/core/components/Select/__snapshots__/UserPicker.test.tsx.snap
@@ -57,35 +57,6 @@ exports[`UserPicker renders correctly 1`] = `
}
}
tabIndex="0"
- theme={
- Object {
- "borderRadius": 4,
- "colors": Object {
- "danger": "#DE350B",
- "dangerLight": "#FFBDAD",
- "neutral0": "hsl(0, 0%, 100%)",
- "neutral10": "hsl(0, 0%, 90%)",
- "neutral20": "hsl(0, 0%, 80%)",
- "neutral30": "hsl(0, 0%, 70%)",
- "neutral40": "hsl(0, 0%, 60%)",
- "neutral5": "hsl(0, 0%, 95%)",
- "neutral50": "hsl(0, 0%, 50%)",
- "neutral60": "hsl(0, 0%, 40%)",
- "neutral70": "hsl(0, 0%, 30%)",
- "neutral80": "hsl(0, 0%, 20%)",
- "neutral90": "hsl(0, 0%, 10%)",
- "primary": "#2684FF",
- "primary25": "#DEEBFF",
- "primary50": "#B2D4FF",
- "primary75": "#4C9AFF",
- },
- "spacing": Object {
- "baseUnit": 4,
- "controlHeight": 38,
- "menuGutter": 8,
- },
- }
- }
type="text"
value=""
/>
diff --git a/public/app/core/components/SharedPreferences/SharedPreferences.tsx b/public/app/core/components/SharedPreferences/SharedPreferences.tsx
index 098cbe16ab8..d41626d9a2f 100644
--- a/public/app/core/components/SharedPreferences/SharedPreferences.tsx
+++ b/public/app/core/components/SharedPreferences/SharedPreferences.tsx
@@ -1,7 +1,7 @@
import React, { PureComponent } from 'react';
import { Label } from 'app/core/components/Label/Label';
-import SimplePicker from 'app/core/components/Picker/SimplePicker';
+import Select from 'app/core/components/Select/Select';
import { getBackendSrv, BackendSrv } from 'app/core/services/backend_srv';
import { DashboardSearchHit } from 'app/types';
@@ -17,12 +17,12 @@ export interface State {
dashboards: DashboardSearchHit[];
}
-const themes = [{ value: '', text: 'Default' }, { value: 'dark', text: 'Dark' }, { value: 'light', text: 'Light' }];
+const themes = [{ value: '', label: 'Default' }, { value: 'dark', label: 'Dark' }, { value: 'light', label: 'Light' }];
const timezones = [
- { value: '', text: 'Default' },
- { value: 'browser', text: 'Local browser time' },
- { value: 'utc', text: 'UTC' },
+ { value: '', label: 'Default' },
+ { value: 'browser', label: 'Local browser time' },
+ { value: 'utc', label: 'UTC' },
];
export class SharedPreferences extends PureComponent
+
+
+
+
+
+ Model title
+
+ Preferences
UI Theme
- item.value === theme)}
options={themes}
- getOptionValue={i => i.value}
- getOptionLabel={i => i.text}
- onSelected={theme => this.onThemeChanged(theme.value)}
+ onChange={theme => this.onThemeChanged(theme.value)}
width={20}
/>
@@ -107,11 +106,11 @@ export class SharedPreferences extends PureComponent
- item.value === timezone)}
- getOptionValue={i => i.value}
- getOptionLabel={i => i.text}
- onSelected={timezone => this.onTimeZoneChanged(timezone.value)}
+ onChange={timezone => this.onTimeZoneChanged(timezone.value)}
options={timezones}
width={20}
/>
diff --git a/public/app/core/components/Switch/Switch.tsx b/public/app/core/components/Switch/Switch.tsx
index a4bb73a291b..d53a3d68878 100644
--- a/public/app/core/components/Switch/Switch.tsx
+++ b/public/app/core/components/Switch/Switch.tsx
@@ -5,8 +5,8 @@ export interface Props {
label: string;
checked: boolean;
labelClass?: string;
- small?: boolean;
switchClass?: string;
+ transparent?: boolean;
onChange: (event) => any;
}
@@ -25,27 +25,20 @@ export class Switch extends PureComponent {
};
render() {
- const { labelClass = '', switchClass = '', label, checked, small } = this.props;
+ const { labelClass = '', switchClass = '', label, checked, transparent } = this.props;
+
const labelId = `check-${this.state.id}`;
- let labelClassName = `gf-form-label ${labelClass} pointer`;
- let switchClassName = `gf-form-switch ${switchClass}`;
- if (small) {
- labelClassName += ' gf-form-label--small';
- switchClassName += ' gf-form-switch--small';
- }
+ const labelClassName = `gf-form-label ${labelClass} ${transparent ? 'gf-form-label--transparent' : ''} pointer`;
+ const switchClassName = `gf-form-switch ${switchClass} ${transparent ? 'gf-form-switch--transparent' : ''}`;
return (
- {
getOptionLabel: i => i.label,
value: tags,
styles: ResetStyles,
+ filterOption: (option, searchQuery) => {
+ const regex = RegExp(searchQuery, 'i');
+ return regex.test(option.value);
+ },
components: {
Option: TagOption,
IndicatorsContainer,
diff --git a/public/app/core/components/TagFilter/TagOption.tsx b/public/app/core/components/TagFilter/TagOption.tsx
index e4e91f93c00..9db15aaca0b 100644
--- a/public/app/core/components/TagFilter/TagOption.tsx
+++ b/public/app/core/components/TagFilter/TagOption.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { components } from 'react-select';
+import { components } from '@torkelo/react-select';
import { OptionProps } from 'react-select/lib/components/Option';
import { TagBadge } from './TagBadge';
diff --git a/public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx b/public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx
index 077d8772393..872f2f28bb8 100644
--- a/public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx
+++ b/public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx
@@ -1,43 +1,20 @@
-import React, { SFC, ReactNode, PureComponent, ReactElement } from 'react';
+import React, { SFC, ReactNode, PureComponent } from 'react';
+import Tooltip from 'app/core/components/Tooltip/Tooltip';
interface ToggleButtonGroupProps {
- onChange: (value) => void;
- value?: any;
label?: string;
- render: (props) => void;
+ children: JSX.Element[];
+ transparent?: boolean;
}
export default class ToggleButtonGroup extends PureComponent {
- getValues() {
- const { children } = this.props;
- return React.Children.toArray(children).map((c: ReactElement) => c.props.value);
- }
-
- smallChildren() {
- const { children } = this.props;
- return React.Children.toArray(children).every((c: ReactElement) => c.props.className.includes('small'));
- }
-
- handleToggle(toggleValue) {
- const { value, onChange } = this.props;
- if (value && value === toggleValue) {
- return;
- }
- onChange(toggleValue);
- }
-
render() {
- const { value, label } = this.props;
- const values = this.getValues();
- const selectedValue = value || values[0];
- const labelClassName = `gf-form-label ${this.smallChildren() ? 'small' : ''}`;
+ const { children, label, transparent } = this.props;
return (
= ({
children,
selected,
className = '',
- title = null,
- value,
+ value = null,
+ tooltip,
onChange,
}) => {
const handleChange = event => {
@@ -68,9 +45,15 @@ export const ToggleButton: SFC = ({
};
const btnClassName = `btn ${className} ${selected ? 'active' : ''}`;
- return (
-
- {label && (
-
- )}
+
+
);
}
}
diff --git a/public/app/core/components/TagFilter/TagFilter.tsx b/public/app/core/components/TagFilter/TagFilter.tsx
index 6a4203f8739..4b2de6b1b16 100644
--- a/public/app/core/components/TagFilter/TagFilter.tsx
+++ b/public/app/core/components/TagFilter/TagFilter.tsx
@@ -1,11 +1,12 @@
import React from 'react';
-import AsyncSelect from 'react-select/lib/Async';
+import AsyncSelect from '@torkelo/react-select/lib/Async';
+
import { TagOption } from './TagOption';
import { TagBadge } from './TagBadge';
-import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer';
-import NoOptionsMessage from 'app/core/components/Picker/NoOptionsMessage';
-import { components } from 'react-select';
-import ResetStyles from 'app/core/components/Picker/ResetStyles';
+import IndicatorsContainer from 'app/core/components/Select/IndicatorsContainer';
+import NoOptionsMessage from 'app/core/components/Select/NoOptionsMessage';
+import { components } from '@torkelo/react-select';
+import ResetStyles from 'app/core/components/Select/ResetStyles';
export interface Props {
tags: string[];
@@ -51,6 +52,10 @@ export class TagFilter extends React.Component
-
);
}
@@ -49,15 +26,15 @@ interface ToggleButtonProps {
value: any;
className?: string;
children: ReactNode;
- title?: string;
+ tooltip?: string;
}
export const ToggleButton: SFC
- {label && }
- {this.props.render({ selectedValue, onChange: this.handleToggle.bind(this) })}
-
+ {label && }
+ {children}