Convert Tabs to TypeScript to createClass warnings
Andrew Watkins
parent
0a36ecb15e
commit
d570788452
|
|
@ -1,177 +0,0 @@
|
|||
import React from 'react'
|
||||
import {PropTypes} from 'prop-types'
|
||||
import classnames from 'classnames'
|
||||
|
||||
const {node, func, bool, number, string} = PropTypes
|
||||
export const Tab = React.createClass({
|
||||
propTypes: {
|
||||
children: node.isRequired,
|
||||
onClick: func,
|
||||
isDisabled: bool,
|
||||
isActive: bool,
|
||||
isKapacitorTab: bool,
|
||||
isConfigured: bool,
|
||||
},
|
||||
|
||||
render() {
|
||||
if (this.props.isKapacitorTab) {
|
||||
return (
|
||||
<li
|
||||
className={classnames({active: this.props.isActive})}
|
||||
onClick={this.props.isDisabled ? null : this.props.onClick}
|
||||
>
|
||||
{this.props.children}
|
||||
</li>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className={classnames('btn tab', {
|
||||
active: this.props.isActive,
|
||||
configured: this.props.isConfigured,
|
||||
})}
|
||||
onClick={this.props.isDisabled ? null : this.props.onClick}
|
||||
>
|
||||
{this.props.children}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
})
|
||||
|
||||
export const TabList = React.createClass({
|
||||
propTypes: {
|
||||
children: node.isRequired,
|
||||
activeIndex: number,
|
||||
onActivate: func,
|
||||
isKapacitorTabs: string,
|
||||
customClass: string,
|
||||
},
|
||||
|
||||
getDefaultProps() {
|
||||
return {
|
||||
isKapacitorTabs: '',
|
||||
}
|
||||
},
|
||||
|
||||
render() {
|
||||
const children = React.Children.map(this.props.children, (child, index) => {
|
||||
return React.cloneElement(child, {
|
||||
isActive: index === this.props.activeIndex,
|
||||
onClick: () => this.props.onActivate(index),
|
||||
})
|
||||
})
|
||||
|
||||
if (this.props.isKapacitorTabs === 'true') {
|
||||
return (
|
||||
<div className="rule-section--row rule-section--row-first rule-section--row-last">
|
||||
<p>Choose One:</p>
|
||||
<div className="nav nav-tablist nav-tablist-sm nav-tablist-malachite">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (this.props.customClass) {
|
||||
return (
|
||||
<div className={this.props.customClass}>
|
||||
<div className="btn-group btn-group-lg tab-group">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="btn-group btn-group-lg tab-group">
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
})
|
||||
|
||||
export const TabPanels = React.createClass({
|
||||
propTypes: {
|
||||
children: node.isRequired,
|
||||
activeIndex: number,
|
||||
customClass: string,
|
||||
},
|
||||
|
||||
// if only 1 child, children array index lookup will fail
|
||||
render() {
|
||||
return (
|
||||
<div className={this.props.customClass ? this.props.customClass : null}>
|
||||
{this.props.children[this.props.activeIndex]}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
})
|
||||
|
||||
export const TabPanel = React.createClass({
|
||||
propTypes: {
|
||||
children: node.isRequired,
|
||||
},
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
{this.props.children}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
})
|
||||
|
||||
export const Tabs = React.createClass({
|
||||
propTypes: {
|
||||
children: node.isRequired,
|
||||
onSelect: func,
|
||||
tabContentsClass: string,
|
||||
tabsClass: string,
|
||||
initialIndex: number,
|
||||
},
|
||||
|
||||
getDefaultProps() {
|
||||
return {
|
||||
onSelect() {},
|
||||
tabContentsClass: '',
|
||||
}
|
||||
},
|
||||
|
||||
getInitialState() {
|
||||
// initialIndex allows the user to enable a Tab and TabPanel
|
||||
// other than 0 on initial render.
|
||||
return {
|
||||
activeIndex: this.props.initialIndex || 0,
|
||||
}
|
||||
},
|
||||
|
||||
handleActivateTab(activeIndex) {
|
||||
this.setState({activeIndex})
|
||||
this.props.onSelect(activeIndex)
|
||||
},
|
||||
|
||||
render() {
|
||||
const children = React.Children.map(this.props.children, child => {
|
||||
if (child && child.type === TabPanels) {
|
||||
return React.cloneElement(child, {
|
||||
activeIndex: this.state.activeIndex,
|
||||
})
|
||||
}
|
||||
|
||||
if (child && child.type === TabList) {
|
||||
return React.cloneElement(child, {
|
||||
activeIndex: this.state.activeIndex,
|
||||
onActivate: this.handleActivateTab,
|
||||
})
|
||||
}
|
||||
|
||||
return child
|
||||
})
|
||||
|
||||
return (
|
||||
<div className={this.props.tabContentsClass}>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
})
|
||||
|
|
@ -0,0 +1,186 @@
|
|||
import React, {SFC, ReactElement, PureComponent} from 'react'
|
||||
import classnames from 'classnames'
|
||||
|
||||
interface TabProps {
|
||||
children: JSX.Element[] | JSX.Element
|
||||
onClick: () => void
|
||||
isDisabled: boolean
|
||||
isActive: boolean
|
||||
isKapacitorTab: boolean
|
||||
isConfigured: boolean
|
||||
}
|
||||
|
||||
export const Tab: SFC<TabProps> = ({
|
||||
children,
|
||||
onClick,
|
||||
isDisabled,
|
||||
isActive,
|
||||
isKapacitorTab,
|
||||
isConfigured,
|
||||
}) => {
|
||||
if (isKapacitorTab) {
|
||||
return (
|
||||
<li
|
||||
className={classnames({active: isActive})}
|
||||
onClick={isDisabled ? null : onClick}
|
||||
>
|
||||
{children}
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classnames('btn tab', {
|
||||
active: isActive,
|
||||
configured: isConfigured,
|
||||
})}
|
||||
onClick={isDisabled ? null : onClick}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
interface TabListProps {
|
||||
children: JSX.Element[] | JSX.Element
|
||||
activeIndex: number
|
||||
onActivate: (index: number) => void
|
||||
isKapacitorTabs: string
|
||||
customClass: string
|
||||
}
|
||||
|
||||
export const TabList: SFC<TabListProps> = ({
|
||||
children,
|
||||
activeIndex,
|
||||
onActivate,
|
||||
isKapacitorTabs,
|
||||
customClass,
|
||||
}) => {
|
||||
const kids = React.Children.map(
|
||||
children,
|
||||
(child: ReactElement<any>, index) => {
|
||||
return React.cloneElement(child, {
|
||||
isActive: index === activeIndex,
|
||||
onClick: () => onActivate(index),
|
||||
})
|
||||
}
|
||||
)
|
||||
|
||||
if (isKapacitorTabs === 'true') {
|
||||
return (
|
||||
<div className="rule-section--row rule-section--row-first rule-section--row-last">
|
||||
<p>Choose One:</p>
|
||||
<div className="nav nav-tablist nav-tablist-sm nav-tablist-malachite">
|
||||
{kids}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (customClass) {
|
||||
return (
|
||||
<div className={customClass}>
|
||||
<div className="btn-group btn-group-lg tab-group">
|
||||
{kids}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="btn-group btn-group-lg tab-group">
|
||||
{kids}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
TabList.defaultProps = {
|
||||
isKapacitorTabs: '',
|
||||
}
|
||||
|
||||
interface TabPanelsProps {
|
||||
children: JSX.Element[] | JSX.Element
|
||||
activeIndex: number
|
||||
customClass: string
|
||||
}
|
||||
|
||||
export const TabPanels: SFC<TabPanelsProps> = ({
|
||||
children,
|
||||
activeIndex,
|
||||
customClass,
|
||||
}) =>
|
||||
// if only 1 child, children array index lookup will fail
|
||||
<div className={customClass}>
|
||||
{children[activeIndex]}
|
||||
</div>
|
||||
|
||||
interface TabPanelProps {
|
||||
children: JSX.Element[] | JSX.Element
|
||||
}
|
||||
|
||||
export const TabPanel: SFC<TabPanelProps> = ({children}) =>
|
||||
<div>
|
||||
{children}
|
||||
</div>
|
||||
|
||||
interface TabsProps {
|
||||
children: JSX.Element[] | JSX.Element
|
||||
onSelect: (activeIndex: number) => void
|
||||
tabContentsClass: string
|
||||
tabsClass: string
|
||||
initialIndex: number
|
||||
}
|
||||
|
||||
interface TabsState {
|
||||
activeIndex: number
|
||||
}
|
||||
|
||||
export class Tabs extends PureComponent<TabsProps, TabsState> {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
||||
// initialIndex allows the user to enable a Tab and TabPanel
|
||||
// other than 0 on initial render.
|
||||
this.state = {
|
||||
activeIndex: this.props.initialIndex || 0,
|
||||
}
|
||||
}
|
||||
|
||||
public static defaultProps: Partial<TabsProps> = {
|
||||
onSelect: () => {},
|
||||
tabContentsClass: '',
|
||||
}
|
||||
|
||||
handleActivateTab = activeIndex => {
|
||||
this.setState({activeIndex})
|
||||
this.props.onSelect(activeIndex)
|
||||
}
|
||||
|
||||
render() {
|
||||
const {children, tabContentsClass} = this.props
|
||||
|
||||
const kids = React.Children.map(children, (child: ReactElement<any>) => {
|
||||
if (child && child.type === TabPanels) {
|
||||
return React.cloneElement(child, {
|
||||
activeIndex: this.state.activeIndex,
|
||||
})
|
||||
}
|
||||
|
||||
if (child && child.type === TabList) {
|
||||
return React.cloneElement(child, {
|
||||
activeIndex: this.state.activeIndex,
|
||||
onActivate: this.handleActivateTab,
|
||||
})
|
||||
}
|
||||
|
||||
return child
|
||||
})
|
||||
|
||||
return (
|
||||
<div className={tabContentsClass}>
|
||||
{kids}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue