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 RedactedInput from './RedactedInput'
|
||||
import _ from 'lodash'
|
||||
|
||||
import {Input} from 'src/types/kapacitor'
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import React, {PureComponent} from 'react'
|
||||
import _ from 'lodash'
|
||||
import RedactedInput from './RedactedInput'
|
||||
import {Input} from 'src/types/kapacitor'
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import React, {PureComponent} from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import RedactedInput from './RedactedInput'
|
||||
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 {
|
||||
checked: boolean
|
||||
}
|
||||
|
||||
export interface DropdownItem {
|
||||
text: string
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue