mirror of https://github.com/grafana/grafana
Torkel Ödegaard
7 years ago
commit
69e0311cbc
@ -1,56 +1,25 @@ |
||||
import React, { Component } from 'react'; |
||||
import React from 'react'; |
||||
import { components } from 'react-select'; |
||||
import { OptionProps } from 'react-select/lib/components/Option'; |
||||
|
||||
export interface Props { |
||||
onSelect: any; |
||||
onFocus: any; |
||||
option: any; |
||||
isFocused: any; |
||||
className: any; |
||||
// https://github.com/JedWatson/react-select/issues/3038
|
||||
interface ExtendedOptionProps extends OptionProps<any> { |
||||
data: any; |
||||
} |
||||
|
||||
class DescriptionOption extends Component<Props, any> { |
||||
constructor(props) { |
||||
super(props); |
||||
this.handleMouseDown = this.handleMouseDown.bind(this); |
||||
this.handleMouseEnter = this.handleMouseEnter.bind(this); |
||||
this.handleMouseMove = this.handleMouseMove.bind(this); |
||||
} |
||||
|
||||
handleMouseDown(event) { |
||||
event.preventDefault(); |
||||
event.stopPropagation(); |
||||
this.props.onSelect(this.props.option, event); |
||||
} |
||||
|
||||
handleMouseEnter(event) { |
||||
this.props.onFocus(this.props.option, event); |
||||
} |
||||
|
||||
handleMouseMove(event) { |
||||
if (this.props.isFocused) { |
||||
return; |
||||
} |
||||
this.props.onFocus(this.props.option, event); |
||||
} |
||||
|
||||
render() { |
||||
const { option, children, className } = this.props; |
||||
export const Option = (props: ExtendedOptionProps) => { |
||||
const { children, isSelected, data, className } = props; |
||||
return ( |
||||
<button |
||||
onMouseDown={this.handleMouseDown} |
||||
onMouseEnter={this.handleMouseEnter} |
||||
onMouseMove={this.handleMouseMove} |
||||
title={option.title} |
||||
className={`description-picker-option__button btn btn-link ${className} width-19`} |
||||
> |
||||
<components.Option {...props}> |
||||
<div className={`description-picker-option__button btn btn-link ${className}`}> |
||||
{isSelected && <i className="fa fa-check pull-right" aria-hidden="true" />} |
||||
<div className="gf-form">{children}</div> |
||||
<div className="gf-form"> |
||||
<div className="muted width-17">{option.description}</div> |
||||
{className.indexOf('is-selected') > -1 && <i className="fa fa-check" aria-hidden="true" />} |
||||
<div className="muted width-17">{data.description}</div> |
||||
</div> |
||||
</div> |
||||
</button> |
||||
</components.Option> |
||||
); |
||||
} |
||||
} |
||||
}; |
||||
|
||||
export default DescriptionOption; |
||||
export default Option; |
||||
|
||||
@ -1,54 +1,22 @@ |
||||
import React, { Component } from 'react'; |
||||
import React from 'react'; |
||||
import { components } from 'react-select'; |
||||
import { OptionProps } from 'react-select/lib/components/Option'; |
||||
|
||||
export interface Props { |
||||
onSelect: any; |
||||
onFocus: any; |
||||
option: any; |
||||
isFocused: any; |
||||
className: any; |
||||
// https://github.com/JedWatson/react-select/issues/3038
|
||||
interface ExtendedOptionProps extends OptionProps<any> { |
||||
data: any; |
||||
} |
||||
|
||||
class UserPickerOption extends Component<Props, any> { |
||||
constructor(props) { |
||||
super(props); |
||||
this.handleMouseDown = this.handleMouseDown.bind(this); |
||||
this.handleMouseEnter = this.handleMouseEnter.bind(this); |
||||
this.handleMouseMove = this.handleMouseMove.bind(this); |
||||
} |
||||
|
||||
handleMouseDown(event) { |
||||
event.preventDefault(); |
||||
event.stopPropagation(); |
||||
this.props.onSelect(this.props.option, event); |
||||
} |
||||
|
||||
handleMouseEnter(event) { |
||||
this.props.onFocus(this.props.option, event); |
||||
} |
||||
|
||||
handleMouseMove(event) { |
||||
if (this.props.isFocused) { |
||||
return; |
||||
} |
||||
this.props.onFocus(this.props.option, event); |
||||
} |
||||
|
||||
render() { |
||||
const { option, children, className } = this.props; |
||||
|
||||
export const PickerOption = (props: ExtendedOptionProps) => { |
||||
const { children, data, className } = props; |
||||
return ( |
||||
<button |
||||
onMouseDown={this.handleMouseDown} |
||||
onMouseEnter={this.handleMouseEnter} |
||||
onMouseMove={this.handleMouseMove} |
||||
title={option.title} |
||||
className={`user-picker-option__button btn btn-link ${className}`} |
||||
> |
||||
<img src={option.avatarUrl} alt={option.label} className="user-picker-option__avatar" /> |
||||
<components.Option {...props}> |
||||
<div className={`description-picker-option__button btn btn-link ${className}`}> |
||||
{data.avatarUrl && <img src={data.avatarUrl} alt={data.label} className="user-picker-option__avatar" />} |
||||
{children} |
||||
</button> |
||||
</div> |
||||
</components.Option> |
||||
); |
||||
} |
||||
} |
||||
}; |
||||
|
||||
export default UserPickerOption; |
||||
export default PickerOption; |
||||
|
||||
@ -1,17 +1,16 @@ |
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP |
||||
|
||||
exports[`PickerOption renders correctly 1`] = ` |
||||
<button |
||||
className="user-picker-option__button btn btn-link class-for-user-picker" |
||||
onMouseDown={[Function]} |
||||
onMouseEnter={[Function]} |
||||
onMouseMove={[Function]} |
||||
title="Model title" |
||||
> |
||||
<div> |
||||
<div |
||||
className="description-picker-option__button btn btn-link class-for-user-picker" |
||||
> |
||||
<img |
||||
alt="User picker label" |
||||
className="user-picker-option__avatar" |
||||
src="url/to/avatar" |
||||
/> |
||||
</button> |
||||
Model title |
||||
</div> |
||||
</div> |
||||
`; |
||||
|
||||
@ -1,52 +1,22 @@ |
||||
import React from 'react'; |
||||
import { components } from 'react-select'; |
||||
import { OptionProps } from 'react-select/lib/components/Option'; |
||||
import { TagBadge } from './TagBadge'; |
||||
|
||||
export interface Props { |
||||
onSelect: any; |
||||
onFocus: any; |
||||
option: any; |
||||
isFocused: any; |
||||
className: any; |
||||
// https://github.com/JedWatson/react-select/issues/3038
|
||||
interface ExtendedOptionProps extends OptionProps<any> { |
||||
data: any; |
||||
} |
||||
|
||||
export class TagOption extends React.Component<Props, any> { |
||||
constructor(props) { |
||||
super(props); |
||||
this.handleMouseDown = this.handleMouseDown.bind(this); |
||||
this.handleMouseEnter = this.handleMouseEnter.bind(this); |
||||
this.handleMouseMove = this.handleMouseMove.bind(this); |
||||
} |
||||
|
||||
handleMouseDown(event) { |
||||
event.preventDefault(); |
||||
event.stopPropagation(); |
||||
this.props.onSelect(this.props.option, event); |
||||
} |
||||
|
||||
handleMouseEnter(event) { |
||||
this.props.onFocus(this.props.option, event); |
||||
} |
||||
|
||||
handleMouseMove(event) { |
||||
if (this.props.isFocused) { |
||||
return; |
||||
} |
||||
this.props.onFocus(this.props.option, event); |
||||
} |
||||
|
||||
render() { |
||||
const { option, className } = this.props; |
||||
|
||||
export const TagOption = (props: ExtendedOptionProps) => { |
||||
const { data, className, label } = props; |
||||
return ( |
||||
<button |
||||
onMouseDown={this.handleMouseDown} |
||||
onMouseEnter={this.handleMouseEnter} |
||||
onMouseMove={this.handleMouseMove} |
||||
title={option.title} |
||||
className={`tag-filter-option btn btn-link ${className || ''}`} |
||||
> |
||||
<TagBadge label={option.label} removeIcon={false} count={option.count} onClick={this.handleMouseDown} /> |
||||
</button> |
||||
<components.Option {...props}> |
||||
<div className={`tag-filter-option btn btn-link ${className || ''}`}> |
||||
<TagBadge label={label} removeIcon={false} count={data.count} /> |
||||
</div> |
||||
</components.Option> |
||||
); |
||||
} |
||||
} |
||||
}; |
||||
|
||||
export default TagOption; |
||||
|
||||
Loading…
Reference in new issue