Remove unused components
Christopher Henn
Chris Henn
parent
67a48551e1
commit
43f5fdca7b
|
|
@ -1,29 +0,0 @@
|
|||
import ThresholdProps from 'src/dashboards/components/Threshold'
|
||||
|
||||
import React from 'react'
|
||||
import {shallow} from 'enzyme'
|
||||
|
||||
describe('Threshold', () => {
|
||||
it('renders without an error', () => {
|
||||
const props = {
|
||||
visualizationType: 'gauge',
|
||||
threshold: {
|
||||
type: 'color',
|
||||
hex: '#444444',
|
||||
id: 'id',
|
||||
name: 'name',
|
||||
value: '2',
|
||||
},
|
||||
disableMaxColor: true,
|
||||
onChooseColor: () => {},
|
||||
onValidateColorValue: () => true,
|
||||
onUpdateColorValue: () => {},
|
||||
onDeleteThreshold: () => {},
|
||||
isMin: false,
|
||||
isMax: true,
|
||||
}
|
||||
|
||||
const wrapper = shallow(<ThresholdProps {...props} />)
|
||||
expect(wrapper.exists()).toBe(true)
|
||||
})
|
||||
})
|
||||
|
|
@ -1,173 +0,0 @@
|
|||
import React, {PureComponent, ChangeEvent, KeyboardEvent} from 'react'
|
||||
|
||||
import ColorDropdown from 'src/shared/components/ColorDropdown'
|
||||
import {THRESHOLD_COLORS} from 'src/shared/constants/thresholds'
|
||||
import {ErrorHandling} from 'src/shared/decorators/errors'
|
||||
import {Color, ThresholdColor} from 'src/types/colors'
|
||||
|
||||
interface Props {
|
||||
visualizationType: string
|
||||
threshold: Color
|
||||
disableMaxColor: boolean
|
||||
onChooseColor: (threshold: Color) => void
|
||||
onValidateColorValue: (threshold: Color, targetValue: number) => boolean
|
||||
onUpdateColorValue: (threshold: Color, targetValue: number) => void
|
||||
onDeleteThreshold: (threshold: Color) => void
|
||||
isMin: boolean
|
||||
isMax: boolean
|
||||
}
|
||||
|
||||
interface State {
|
||||
workingValue: number | string
|
||||
valid: boolean
|
||||
}
|
||||
|
||||
@ErrorHandling
|
||||
class Threshold extends PureComponent<Props, State> {
|
||||
private thresholdInputRef: HTMLInputElement
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
||||
this.state = {
|
||||
workingValue: this.props.threshold.value,
|
||||
valid: true,
|
||||
}
|
||||
}
|
||||
|
||||
public render() {
|
||||
const {disableMaxColor, isMax} = this.props
|
||||
const {workingValue} = this.state
|
||||
|
||||
return (
|
||||
<div className="threshold-item">
|
||||
<div className={this.labelClass}>{this.label}</div>
|
||||
{this.canBeDeleted ? (
|
||||
<button
|
||||
className="btn btn-default btn-sm btn-square"
|
||||
onClick={this.handleDelete}
|
||||
>
|
||||
<span className="icon remove" />
|
||||
</button>
|
||||
) : null}
|
||||
<input
|
||||
value={workingValue}
|
||||
className={this.inputClass}
|
||||
type="number"
|
||||
onChange={this.handleChangeWorkingValue}
|
||||
onBlur={this.handleBlur}
|
||||
onKeyUp={this.handleKeyUp}
|
||||
ref={this.handleInputRef}
|
||||
/>
|
||||
<ColorDropdown
|
||||
colors={THRESHOLD_COLORS}
|
||||
selected={this.selectedColor}
|
||||
onChoose={this.handleChooseColor}
|
||||
disabled={isMax && disableMaxColor}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
private handleChooseColor = (color: ThresholdColor): void => {
|
||||
const {onChooseColor, threshold} = this.props
|
||||
const {hex, name} = color
|
||||
|
||||
onChooseColor({...threshold, hex, name})
|
||||
}
|
||||
|
||||
private get selectedColor(): Color {
|
||||
const {
|
||||
threshold: {hex, name, type, value, id},
|
||||
} = this.props
|
||||
return {hex, name, type, value, id}
|
||||
}
|
||||
|
||||
private get inputClass(): string {
|
||||
const {valid} = this.state
|
||||
|
||||
const inputClass = valid
|
||||
? 'form-control input-sm threshold-item--input'
|
||||
: 'form-control input-sm threshold-item--input form-volcano'
|
||||
|
||||
return inputClass
|
||||
}
|
||||
|
||||
private get canBeDeleted(): boolean {
|
||||
const {visualizationType, isMax, isMin} = this.props
|
||||
|
||||
let canBeDeleted = true
|
||||
|
||||
if (visualizationType === 'gauge') {
|
||||
canBeDeleted = !(isMin || isMax)
|
||||
}
|
||||
|
||||
return canBeDeleted
|
||||
}
|
||||
|
||||
private get labelClass(): string {
|
||||
const {visualizationType, isMax, isMin} = this.props
|
||||
|
||||
let labelClass = 'threshold-item--label__editable'
|
||||
|
||||
if (visualizationType === 'gauge') {
|
||||
labelClass =
|
||||
isMin || isMax
|
||||
? 'threshold-item--label'
|
||||
: 'threshold-item--label__editable'
|
||||
}
|
||||
|
||||
return labelClass
|
||||
}
|
||||
|
||||
private get label(): string {
|
||||
let label = 'Threshold'
|
||||
const {visualizationType, isMax, isMin} = this.props
|
||||
|
||||
if (isMin && visualizationType === 'gauge') {
|
||||
label = 'Minimum'
|
||||
}
|
||||
if (isMax && visualizationType === 'gauge') {
|
||||
label = 'Maximum'
|
||||
}
|
||||
|
||||
return label
|
||||
}
|
||||
|
||||
private handleChangeWorkingValue = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
const {threshold, onValidateColorValue} = this.props
|
||||
const targetValue = e.target.value
|
||||
|
||||
const valid = onValidateColorValue(threshold, Number(targetValue))
|
||||
|
||||
this.setState({valid, workingValue: targetValue})
|
||||
}
|
||||
|
||||
private handleBlur = () => {
|
||||
const {valid, workingValue} = this.state
|
||||
const {threshold, onUpdateColorValue} = this.props
|
||||
|
||||
if (valid) {
|
||||
onUpdateColorValue(threshold, Number(workingValue))
|
||||
} else {
|
||||
this.setState({workingValue: threshold.value, valid: true})
|
||||
}
|
||||
}
|
||||
|
||||
private handleKeyUp = (e: KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === 'Enter') {
|
||||
this.thresholdInputRef.blur()
|
||||
}
|
||||
}
|
||||
|
||||
private handleInputRef = (ref: HTMLInputElement) => {
|
||||
this.thresholdInputRef = ref
|
||||
}
|
||||
|
||||
private handleDelete = () => {
|
||||
const {threshold, onDeleteThreshold} = this.props
|
||||
onDeleteThreshold(threshold)
|
||||
}
|
||||
}
|
||||
|
||||
export default Threshold
|
||||
|
|
@ -1,130 +0,0 @@
|
|||
import React, {Component} from 'react'
|
||||
|
||||
import classnames from 'classnames'
|
||||
import {ClickOutside} from 'src/shared/components/ClickOutside'
|
||||
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
|
||||
import {ErrorHandling} from 'src/shared/decorators/errors'
|
||||
import {Color, ThresholdColor} from 'src/types/colors'
|
||||
import {DROPDOWN_MENU_MAX_HEIGHT} from 'src/shared/constants/index'
|
||||
|
||||
interface Props {
|
||||
selected: Color
|
||||
disabled?: boolean
|
||||
stretchToFit?: boolean
|
||||
colors: ThresholdColor[]
|
||||
onChoose: (colors: ThresholdColor) => void
|
||||
}
|
||||
|
||||
interface State {
|
||||
visible: boolean
|
||||
}
|
||||
|
||||
@ErrorHandling
|
||||
export default class ColorDropdown extends Component<Props, State> {
|
||||
public static defaultProps: Partial<Props> = {
|
||||
stretchToFit: false,
|
||||
disabled: false,
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
||||
this.state = {
|
||||
visible: false,
|
||||
}
|
||||
}
|
||||
|
||||
public render() {
|
||||
const {visible} = this.state
|
||||
const {selected} = this.props
|
||||
|
||||
return (
|
||||
<ClickOutside onClickOutside={this.handleClickOutside}>
|
||||
<div className={this.dropdownClassNames}>
|
||||
<div
|
||||
className={this.buttonClassNames}
|
||||
onClick={this.handleToggleMenu}
|
||||
>
|
||||
<div
|
||||
className="color-dropdown--swatch"
|
||||
style={{backgroundColor: selected.hex}}
|
||||
/>
|
||||
<div className="color-dropdown--name">{selected.name}</div>
|
||||
<span className="caret" />
|
||||
</div>
|
||||
{visible && this.renderMenu}
|
||||
</div>
|
||||
</ClickOutside>
|
||||
)
|
||||
}
|
||||
|
||||
private get dropdownClassNames(): string {
|
||||
const {stretchToFit} = this.props
|
||||
const {visible} = this.state
|
||||
|
||||
return classnames('color-dropdown', {
|
||||
open: visible,
|
||||
'color-dropdown--stretch': stretchToFit,
|
||||
})
|
||||
}
|
||||
|
||||
private get buttonClassNames(): string {
|
||||
const {disabled} = this.props
|
||||
const {visible} = this.state
|
||||
|
||||
return classnames('btn btn-sm btn-default color-dropdown--toggle', {
|
||||
active: visible,
|
||||
'color-dropdown__disabled': disabled,
|
||||
})
|
||||
}
|
||||
|
||||
private get renderMenu(): JSX.Element {
|
||||
const {colors, selected} = this.props
|
||||
|
||||
return (
|
||||
<div className="color-dropdown--menu">
|
||||
<FancyScrollbar
|
||||
autoHide={false}
|
||||
autoHeight={true}
|
||||
maxHeight={DROPDOWN_MENU_MAX_HEIGHT}
|
||||
>
|
||||
{colors.map((color, i) => (
|
||||
<div
|
||||
className={
|
||||
color.name === selected.name
|
||||
? 'color-dropdown--item active'
|
||||
: 'color-dropdown--item'
|
||||
}
|
||||
key={i}
|
||||
onClick={this.handleColorClick(color)}
|
||||
>
|
||||
<span
|
||||
className="color-dropdown--swatch"
|
||||
style={{backgroundColor: color.hex}}
|
||||
/>
|
||||
<span className="color-dropdown--name">{color.name}</span>
|
||||
</div>
|
||||
))}
|
||||
</FancyScrollbar>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
private handleToggleMenu = (): void => {
|
||||
const {disabled} = this.props
|
||||
|
||||
if (disabled) {
|
||||
return
|
||||
}
|
||||
this.setState({visible: !this.state.visible})
|
||||
}
|
||||
|
||||
private handleClickOutside = (): void => {
|
||||
this.setState({visible: false})
|
||||
}
|
||||
|
||||
private handleColorClick = color => (): void => {
|
||||
this.props.onChoose(color)
|
||||
this.setState({visible: false})
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue