fix linter errors and convert TagsAddButton and ConfirmButton to typescript
Iris Scholten
parent
858edc2c56
commit
f9c2913799
|
|
@ -1,6 +1,5 @@
|
||||||
import React, {PureComponent} from 'react'
|
import React, {PureComponent} from 'react'
|
||||||
import RedactedInput from './RedactedInput'
|
import RedactedInput from './RedactedInput'
|
||||||
import _ from 'lodash'
|
|
||||||
|
|
||||||
import {Input} from 'src/types/kapacitor'
|
import {Input} from 'src/types/kapacitor'
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
import React, {PureComponent} from 'react'
|
import React, {PureComponent} from 'react'
|
||||||
import _ from 'lodash'
|
|
||||||
import RedactedInput from './RedactedInput'
|
import RedactedInput from './RedactedInput'
|
||||||
import {Input} from 'src/types/kapacitor'
|
import {Input} from 'src/types/kapacitor'
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
import React, {PureComponent} from 'react'
|
import React, {PureComponent} from 'react'
|
||||||
import PropTypes from 'prop-types'
|
|
||||||
|
|
||||||
import RedactedInput from './RedactedInput'
|
import RedactedInput from './RedactedInput'
|
||||||
import {Input} from 'src/types/kapacitor'
|
import {Input} from 'src/types/kapacitor'
|
||||||
|
|
|
||||||
|
|
@ -1,111 +0,0 @@
|
||||||
import React, {Component} from 'react'
|
|
||||||
import PropTypes from 'prop-types'
|
|
||||||
|
|
||||||
import OnClickOutside from 'shared/components/OnClickOutside'
|
|
||||||
|
|
||||||
class ConfirmButton extends Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props)
|
|
||||||
|
|
||||||
this.state = {
|
|
||||||
expanded: false,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
handleButtonClick = () => {
|
|
||||||
if (this.props.disabled) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.setState({expanded: !this.state.expanded})
|
|
||||||
}
|
|
||||||
|
|
||||||
handleConfirmClick = () => {
|
|
||||||
this.setState({expanded: false})
|
|
||||||
this.props.confirmAction()
|
|
||||||
}
|
|
||||||
|
|
||||||
handleClickOutside = () => {
|
|
||||||
this.setState({expanded: false})
|
|
||||||
}
|
|
||||||
|
|
||||||
calculatePosition = () => {
|
|
||||||
if (!this.buttonDiv || !this.tooltipDiv) {
|
|
||||||
return ''
|
|
||||||
}
|
|
||||||
|
|
||||||
const windowWidth = window.innerWidth
|
|
||||||
const buttonRect = this.buttonDiv.getBoundingClientRect()
|
|
||||||
const tooltipRect = this.tooltipDiv.getBoundingClientRect()
|
|
||||||
|
|
||||||
const rightGap = windowWidth - buttonRect.right
|
|
||||||
|
|
||||||
if (tooltipRect.width / 2 > rightGap) {
|
|
||||||
return 'left'
|
|
||||||
}
|
|
||||||
|
|
||||||
return 'bottom'
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const {
|
|
||||||
text,
|
|
||||||
confirmText,
|
|
||||||
type,
|
|
||||||
size,
|
|
||||||
square,
|
|
||||||
icon,
|
|
||||||
disabled,
|
|
||||||
customClass,
|
|
||||||
} = this.props
|
|
||||||
const {expanded} = this.state
|
|
||||||
|
|
||||||
const customClassString = customClass ? ` ${customClass}` : ''
|
|
||||||
const squareString = square ? ' btn-square' : ''
|
|
||||||
const expandedString = expanded ? ' active' : ''
|
|
||||||
const disabledString = disabled ? ' disabled' : ''
|
|
||||||
|
|
||||||
const classname = `confirm-button btn ${type} ${size}${customClassString}${squareString}${expandedString}${disabledString}`
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={classname}
|
|
||||||
onClick={this.handleButtonClick}
|
|
||||||
ref={r => (this.buttonDiv = r)}
|
|
||||||
>
|
|
||||||
{icon && <span className={`icon ${icon}`} />}
|
|
||||||
{text && text}
|
|
||||||
<div className={`confirm-button--tooltip ${this.calculatePosition()}`}>
|
|
||||||
<div
|
|
||||||
className="confirm-button--confirmation"
|
|
||||||
onClick={this.handleConfirmClick}
|
|
||||||
ref={r => (this.tooltipDiv = r)}
|
|
||||||
>
|
|
||||||
{confirmText}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const {bool, func, string} = PropTypes
|
|
||||||
|
|
||||||
ConfirmButton.defaultProps = {
|
|
||||||
confirmText: 'Confirm',
|
|
||||||
type: 'btn-default',
|
|
||||||
size: 'btn-sm',
|
|
||||||
square: false,
|
|
||||||
}
|
|
||||||
ConfirmButton.propTypes = {
|
|
||||||
text: string,
|
|
||||||
confirmText: string,
|
|
||||||
confirmAction: func.isRequired,
|
|
||||||
type: string,
|
|
||||||
size: string,
|
|
||||||
square: bool,
|
|
||||||
icon: string,
|
|
||||||
disabled: bool,
|
|
||||||
customClass: string,
|
|
||||||
}
|
|
||||||
|
|
||||||
export default OnClickOutside(ConfirmButton)
|
|
||||||
|
|
@ -0,0 +1,119 @@
|
||||||
|
import React, {PureComponent} from 'react'
|
||||||
|
import {ClickOutside} from 'src/shared/components/ClickOutside'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
text?: string
|
||||||
|
confirmText?: string
|
||||||
|
confirmAction: () => void
|
||||||
|
type?: string
|
||||||
|
size?: string
|
||||||
|
square?: boolean
|
||||||
|
icon?: string
|
||||||
|
disabled?: boolean
|
||||||
|
customClass?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface State {
|
||||||
|
expanded: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
class ConfirmButton extends PureComponent<Props, State> {
|
||||||
|
public static defaultProps: Partial<Props> = {
|
||||||
|
confirmText: 'Confirm',
|
||||||
|
type: 'btn-default',
|
||||||
|
size: 'btn-sm',
|
||||||
|
square: false,
|
||||||
|
}
|
||||||
|
|
||||||
|
private buttonDiv: HTMLDivElement
|
||||||
|
private tooltipDiv: HTMLDivElement
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
expanded: false,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public render() {
|
||||||
|
const {
|
||||||
|
text,
|
||||||
|
confirmText,
|
||||||
|
type,
|
||||||
|
size,
|
||||||
|
square,
|
||||||
|
icon,
|
||||||
|
disabled,
|
||||||
|
customClass,
|
||||||
|
} = this.props
|
||||||
|
const {expanded} = this.state
|
||||||
|
|
||||||
|
const customClassString = customClass ? ` ${customClass}` : ''
|
||||||
|
const squareString = square ? ' btn-square' : ''
|
||||||
|
const expandedString = expanded ? ' active' : ''
|
||||||
|
const disabledString = disabled ? ' disabled' : ''
|
||||||
|
|
||||||
|
const classname = `confirm-button btn ${type} ${size}${customClassString}${squareString}${expandedString}${disabledString}`
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ClickOutside onClickOutside={this.handleClickOutside}>
|
||||||
|
<div
|
||||||
|
className={classname}
|
||||||
|
onClick={this.handleButtonClick}
|
||||||
|
ref={r => (this.buttonDiv = r)}
|
||||||
|
>
|
||||||
|
{icon && <span className={`icon ${icon}`} />}
|
||||||
|
{text && text}
|
||||||
|
<div
|
||||||
|
className={`confirm-button--tooltip ${this.calculatePosition()}`}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="confirm-button--confirmation"
|
||||||
|
onClick={this.handleConfirmClick}
|
||||||
|
ref={r => (this.tooltipDiv = r)}
|
||||||
|
>
|
||||||
|
{confirmText}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ClickOutside>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
private handleButtonClick = () => {
|
||||||
|
if (this.props.disabled) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.setState({expanded: !this.state.expanded})
|
||||||
|
}
|
||||||
|
|
||||||
|
private handleConfirmClick = () => {
|
||||||
|
this.setState({expanded: false})
|
||||||
|
this.props.confirmAction()
|
||||||
|
}
|
||||||
|
|
||||||
|
private handleClickOutside = () => {
|
||||||
|
this.setState({expanded: false})
|
||||||
|
}
|
||||||
|
|
||||||
|
private calculatePosition = () => {
|
||||||
|
if (!this.buttonDiv || !this.tooltipDiv) {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
|
||||||
|
const windowWidth = window.innerWidth
|
||||||
|
const buttonRect = this.buttonDiv.getBoundingClientRect()
|
||||||
|
const tooltipRect = this.tooltipDiv.getBoundingClientRect()
|
||||||
|
|
||||||
|
const rightGap = windowWidth - buttonRect.right
|
||||||
|
|
||||||
|
if (tooltipRect.width / 2 > rightGap) {
|
||||||
|
return 'left'
|
||||||
|
}
|
||||||
|
|
||||||
|
return 'bottom'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ConfirmButton
|
||||||
|
|
@ -1,58 +0,0 @@
|
||||||
import React, {Component} from 'react'
|
|
||||||
import PropTypes from 'prop-types'
|
|
||||||
|
|
||||||
import OnClickOutside from 'shared/components/OnClickOutside'
|
|
||||||
import uuid from 'uuid'
|
|
||||||
|
|
||||||
class TagsAddButton extends Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props)
|
|
||||||
|
|
||||||
this.state = {open: false}
|
|
||||||
}
|
|
||||||
|
|
||||||
handleButtonClick = () => {
|
|
||||||
this.setState({open: !this.state.open})
|
|
||||||
}
|
|
||||||
|
|
||||||
handleMenuClick = item => () => {
|
|
||||||
this.setState({open: false})
|
|
||||||
this.props.onChoose(item)
|
|
||||||
}
|
|
||||||
|
|
||||||
handleClickOutside = () => {
|
|
||||||
this.setState({open: false})
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const {open} = this.state
|
|
||||||
const {items} = this.props
|
|
||||||
|
|
||||||
const classname = `tags-add${open ? ' open' : ''}`
|
|
||||||
return (
|
|
||||||
<div className={classname} onClick={this.handleButtonClick}>
|
|
||||||
<span className="icon plus" />
|
|
||||||
<div className="tags-add--menu">
|
|
||||||
{items.map(item => (
|
|
||||||
<div
|
|
||||||
key={uuid.v4()}
|
|
||||||
className="tags-add--menu-item"
|
|
||||||
onClick={this.handleMenuClick(item)}
|
|
||||||
>
|
|
||||||
{item.text}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const {array, func} = PropTypes
|
|
||||||
|
|
||||||
TagsAddButton.propTypes = {
|
|
||||||
items: array.isRequired,
|
|
||||||
onChoose: func.isRequired,
|
|
||||||
}
|
|
||||||
|
|
||||||
export default OnClickOutside(TagsAddButton)
|
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
import React, {PureComponent} from 'react'
|
||||||
|
|
||||||
|
import {ClickOutside} from 'src/shared/components/ClickOutside'
|
||||||
|
import {DropdownItem} from 'src/types/kapacitor'
|
||||||
|
import uuid from 'uuid'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
items: DropdownItem[]
|
||||||
|
onChoose: (item: DropdownItem) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
interface State {
|
||||||
|
open: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
class TagsAddButton extends PureComponent<Props, State> {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
|
||||||
|
this.state = {open: false}
|
||||||
|
}
|
||||||
|
|
||||||
|
public render() {
|
||||||
|
const {open} = this.state
|
||||||
|
const {items} = this.props
|
||||||
|
|
||||||
|
const classname = `tags-add${open ? ' open' : ''}`
|
||||||
|
return (
|
||||||
|
<ClickOutside onClickOutside={this.handleClickOutside}>
|
||||||
|
<div className={classname} onClick={this.handleButtonClick}>
|
||||||
|
<span className="icon plus" />
|
||||||
|
<div className="tags-add--menu">
|
||||||
|
{items.map(item => (
|
||||||
|
<div
|
||||||
|
key={uuid.v4()}
|
||||||
|
className="tags-add--menu-item"
|
||||||
|
onClick={this.handleMenuClick(item)}
|
||||||
|
>
|
||||||
|
{item.text}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ClickOutside>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
private handleButtonClick = () => {
|
||||||
|
this.setState({open: !this.state.open})
|
||||||
|
}
|
||||||
|
|
||||||
|
private handleMenuClick = item => () => {
|
||||||
|
this.setState({open: false})
|
||||||
|
this.props.onChoose(item)
|
||||||
|
}
|
||||||
|
|
||||||
|
private handleClickOutside = () => {
|
||||||
|
this.setState({open: false})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default TagsAddButton
|
||||||
|
|
@ -195,3 +195,7 @@ export interface Input {
|
||||||
export interface Checkbox {
|
export interface Checkbox {
|
||||||
checked: boolean
|
checked: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface DropdownItem {
|
||||||
|
text: string
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue