Change cx and classNames to both be classnames

this is the new pattern, apparently
pull/10616/head
Alex P 2017-05-04 16:08:38 -07:00
parent 76766bd93b
commit faa478cad3
23 changed files with 55 additions and 55 deletions

View File

@ -1,5 +1,5 @@
import React, {Component, PropTypes} from 'react'
import classNames from 'classnames'
import classnames from 'classnames'
import uuid from 'node-uuid'
import TemplateVariableTable
@ -34,7 +34,7 @@ const TemplateVariableManager = ({
Add Variable
</button>
<button
className={classNames('btn btn-success btn-sm', {
className={classnames('btn btn-success btn-sm', {
disabled: !isEdited,
})}
type="button"

View File

@ -3,7 +3,7 @@ import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import OnClickOutside from 'react-onclickoutside'
import classNames from 'classnames'
import classnames from 'classnames'
import Dropdown from 'shared/components/Dropdown'
import DeleteConfirmButtons from 'shared/components/DeleteConfirmButtons'
@ -115,7 +115,7 @@ const TemplateVariableRow = ({
onErrorThrown,
}) => (
<form
className={classNames('template-variable-manager--table-row', {
className={classnames('template-variable-manager--table-row', {
editing: isEditing,
})}
onSubmit={onSubmit({

View File

@ -1,5 +1,5 @@
import React, {PropTypes} from 'react'
import classNames from 'classnames'
import classnames from 'classnames'
import _ from 'lodash'
import {showDatabases, showRetentionPolicies} from 'shared/apis/metaQuery'
@ -75,7 +75,7 @@ const DatabaseList = React.createClass({
return (
<div
className={classNames('query-builder--list-item', {
className={classnames('query-builder--list-item', {
active: isActive,
})}
key={`${database}..${retentionPolicy}`}

View File

@ -1,5 +1,5 @@
import React, {PropTypes} from 'react'
import classNames from 'classnames'
import classnames from 'classnames'
import _ from 'lodash'
import FunctionSelector from 'src/shared/components/FunctionSelector'
@ -56,7 +56,7 @@ const FieldListItem = React.createClass({
if (isKapacitorRule) {
return (
<div
className={classNames('query-builder--list-item', {active: isSelected})}
className={classnames('query-builder--list-item', {active: isSelected})}
key={fieldFunc}
onClick={_.wrap(fieldFunc, this.handleToggleField)}
>
@ -81,7 +81,7 @@ const FieldListItem = React.createClass({
return (
<div key={fieldFunc}>
<div
className={classNames('query-builder--list-item', {active: isSelected})}
className={classnames('query-builder--list-item', {active: isSelected})}
onClick={_.wrap(fieldFunc, this.handleToggleField)}
>
<span>
@ -89,7 +89,7 @@ const FieldListItem = React.createClass({
{fieldText}
</span>
{isSelected
? <div className={classNames('btn btn-xs btn-info', {'function-selector--toggled': isOpen})} onClick={this.toggleFunctionsMenu}>
? <div className={classnames('btn btn-xs btn-info', {'function-selector--toggled': isOpen})} onClick={this.toggleFunctionsMenu}>
Functions
</div>
: null

View File

@ -1,5 +1,5 @@
import React, {PropTypes} from 'react'
import classNames from 'classnames'
import classnames from 'classnames'
import groupByTimeOptions from 'hson!../data/groupByTimes.hson'
@ -17,7 +17,7 @@ const GroupByTimeDropdown = React.createClass({
return (
<div
className={classNames('dropdown group-by-time-dropdown', {
className={classnames('dropdown group-by-time-dropdown', {
open: isOpen,
})}
>

View File

@ -1,5 +1,5 @@
import React, {PropTypes} from 'react'
import classNames from 'classnames'
import classnames from 'classnames'
import _ from 'lodash'
import {showMeasurements} from 'shared/apis/metaQuery'
@ -126,13 +126,13 @@ const MeasurementList = React.createClass({
return (
<div key={measurement}>
<div className={classNames('query-builder--list-item', {active: isActive})}>
<div className={classnames('query-builder--list-item', {active: isActive})}>
<div className="query-builder--caret icon caret-right"></div>
<span style={{flex: '1 0 0'}} onClick={isActive ? _.wrap(null, this.props.onChooseMeasurement) : _.wrap(measurement, this.props.onChooseMeasurement)}>
{measurement}
</span>
{(isActive && numTagsActive >= 1)
? <div className={classNames('flip-toggle', {flipped: this.props.query.areTagsAccepted})} onClick={this.handleAcceptReject}>
? <div className={classnames('flip-toggle', {flipped: this.props.query.areTagsAccepted})} onClick={this.handleAcceptReject}>
<div className="flip-toggle--container">
<div className="flip-toggle--front">!=</div>
<div className="flip-toggle--back">=</div>

View File

@ -1,6 +1,6 @@
import React, {PropTypes, Component} from 'react'
import _ from 'lodash'
import classNames from 'classnames'
import classnames from 'classnames'
import Dropdown from 'src/shared/components/Dropdown'
import LoadingDots from 'src/shared/components/LoadingDots'
@ -206,7 +206,7 @@ class QueryEditor extends Component {
spellCheck="false"
/>
<div
className={classNames('varmoji', {'varmoji-rotated': isTemplating})}
className={classnames('varmoji', {'varmoji-rotated': isTemplating})}
>
<div className="varmoji-container">
<div className="varmoji-front">{this.renderStatus(status)}</div>
@ -258,14 +258,14 @@ class QueryEditor extends Component {
return (
<div className="query-editor--status">
<span
className={classNames('query-status-output', {
className={classnames('query-status-output', {
'query-status-output--error': status.error,
'query-status-output--success': status.success,
'query-status-output--warning': status.warn,
})}
>
<span
className={classNames('icon', {
className={classnames('icon', {
stop: status.error,
checkmark: status.success,
'alert-triangle': status.warn,

View File

@ -3,7 +3,7 @@ import React, {PropTypes} from 'react'
import QueryBuilder from './QueryBuilder'
import QueryMakerTab from './QueryMakerTab'
import buildInfluxQLQuery from 'utils/influxql'
import classNames from 'classnames'
import classnames from 'classnames'
const {arrayOf, func, node, number, shape, string} = PropTypes
@ -68,7 +68,7 @@ const QueryMaker = React.createClass({
render() {
const {height, top, layout} = this.props
return (
<div className={classNames('query-maker', {'query-maker--panel': layout === 'panel'})} style={{height, top}}>
<div className={classnames('query-maker', {'query-maker--panel': layout === 'panel'})} style={{height, top}}>
{this.renderQueryTabList()}
{this.renderQueryBuilder()}
</div>

View File

@ -1,5 +1,5 @@
import React, {PropTypes} from 'react'
import classNames from 'classnames'
import classnames from 'classnames'
const QueryMakerTab = React.createClass({
propTypes: {
@ -25,7 +25,7 @@ const QueryMakerTab = React.createClass({
render() {
return (
<div
className={classNames('query-maker--tab', {
className={classnames('query-maker--tab', {
active: this.props.isActive,
})}
onClick={this.handleSelect}

View File

@ -3,7 +3,7 @@ import React, {PropTypes} from 'react'
import Dimensions from 'react-dimensions'
import _ from 'lodash'
import moment from 'moment'
import classNames from 'classnames'
import classnames from 'classnames'
import Dropdown from 'shared/components/Dropdown'
import {fetchTimeSeriesAsync} from 'shared/actions/timeSeries'
@ -212,7 +212,7 @@ const ChronoTable = React.createClass({
const TabItem = ({name, index, onClickTab, isActive}) => (
<div
className={classNames('table--tab', {active: isActive})}
className={classnames('table--tab', {active: isActive})}
onClick={() => onClickTab(index)}
>
{name}

View File

@ -1,6 +1,6 @@
import React, {PropTypes} from 'react'
import _ from 'lodash'
import classNames from 'classnames'
import classnames from 'classnames'
const {string, arrayOf, func, bool} = PropTypes
const TagListItem = React.createClass({
@ -69,7 +69,7 @@ const TagListItem = React.createClass({
<span className="icon search" />
</div>
{filtered.map(v => {
const cx = classNames('query-builder--list-item', {
const cx = classnames('query-builder--list-item', {
active: selectedTagValues.indexOf(v) > -1,
})
return (
@ -98,7 +98,7 @@ const TagListItem = React.createClass({
return (
<div>
<div
className={classNames('query-builder--list-item', {active: isOpen})}
className={classnames('query-builder--list-item', {active: isOpen})}
onClick={this.handleClickKey}
>
<span>
@ -106,7 +106,7 @@ const TagListItem = React.createClass({
{tagItemLabel}
</span>
<div
className={classNames('btn btn-info btn-xs group-by-tag', {
className={classnames('btn btn-info btn-xs group-by-tag', {
active: this.props.isUsingGroupBy,
})}
onClick={this.handleGroupBy}

View File

@ -1,5 +1,5 @@
import React, {PropTypes} from 'react'
import classNames from 'classnames'
import classnames from 'classnames'
const VisHeader = ({views, view, onToggleView, name}) => (
<div className="graph-heading">
@ -9,7 +9,7 @@ const VisHeader = ({views, view, onToggleView, name}) => (
<li
key={v}
onClick={() => onToggleView(v)}
className={classNames('toggle-btn ', {active: view === v})}
className={classnames('toggle-btn ', {active: view === v})}
>
{v}
</li>

View File

@ -1,6 +1,6 @@
import React, {PropTypes} from 'react'
import buildInfluxQLQuery from 'utils/influxql'
import classNames from 'classnames'
import classnames from 'classnames'
import VisHeader from 'src/data_explorer/components/VisHeader'
import VisView from 'src/data_explorer/components/VisView'
import {GRAPH, TABLE} from 'src/shared/constants'
@ -107,7 +107,7 @@ const Visualization = React.createClass({
name={cellName}
/>
<div
className={classNames({
className={classnames({
'graph-container': view === GRAPH,
'table-container': view === TABLE,
})}

View File

@ -1,7 +1,7 @@
import React, {PropTypes, Component} from 'react'
import rome from 'rome'
import moment from 'moment'
import classNames from 'classnames'
import classnames from 'classnames'
import OnClickOutside from 'react-onclickoutside'
class CustomTimeRange extends Component {
@ -46,7 +46,7 @@ class CustomTimeRange extends Component {
return (
<div
className={classNames('custom-time-range', {show: isVisible})}
className={classnames('custom-time-range', {show: isVisible})}
style={{display: 'flex'}}
>
<button

View File

@ -1,5 +1,5 @@
import React, {Component, PropTypes} from 'react'
import classNames from 'classnames'
import classnames from 'classnames'
import _ from 'lodash'
import {INFLUXQL_FUNCTIONS} from 'src/data_explorer/constants'
@ -59,7 +59,7 @@ class FunctionSelector extends Component {
return (
<div
key={i}
className={classNames('function-selector--item', {
className={classnames('function-selector--item', {
active: this.isSelected(f),
})}
onClick={_.wrap(f, this.onSelect)}

View File

@ -1,6 +1,6 @@
import React, {PropTypes} from 'react'
import Dygraph from 'shared/components/Dygraph'
import classNames from 'classnames'
import classnames from 'classnames'
import shallowCompare from 'react-addons-shallow-compare'
import _ from 'lodash'
@ -126,7 +126,7 @@ export default React.createClass({
return (
<div
className={classNames('dygraph', {
className={classnames('dygraph', {
'graph--hasYLabel': !!(options.ylabel || options.y2label),
})}
style={{height: '100%'}}

View File

@ -1,6 +1,6 @@
import React, {Component, PropTypes} from 'react'
import OnClickOutside from 'shared/components/OnClickOutside'
import classNames from 'classnames'
import classnames from 'classnames'
import _ from 'lodash'
const labelText = ({localSelectedItems, isOpen, label}) => {
@ -71,7 +71,7 @@ class MultiSelectDropdown extends Component {
return (
<div
className={classNames('dropdown multi-select-dropdown', {open: isOpen})}
className={classnames('dropdown multi-select-dropdown', {open: isOpen})}
>
<div
onClick={::this.toggleMenu}
@ -108,7 +108,7 @@ class MultiSelectDropdown extends Component {
return (
<li
key={i}
className={classNames('multi-select-dropdown__item', {
className={classnames('multi-select-dropdown__item', {
active: this.isSelected(listItem),
})}
onClick={_.wrap(listItem, this.onSelect)}

View File

@ -1,6 +1,6 @@
import React, {PropTypes} from 'react'
import ResizeHandle from 'shared/components/ResizeHandle'
import classNames from 'classnames'
import classnames from 'classnames'
const {node, number, string} = PropTypes
@ -100,7 +100,7 @@ const ResizeContainer = React.createClass({
return (
<div
className={classNames(`resize--container ${containerClass}`, {'resize--dragging': isDragging})}
className={classnames(`resize--container ${containerClass}`, {'resize--dragging': isDragging})}
onMouseLeave={this.handleMouseLeave}
onMouseUp={this.handleStopDrag}
onMouseMove={this.handleDrag}

View File

@ -1,5 +1,5 @@
import React from 'react'
import cx from 'classnames'
import classnames from 'classnames'
const {func, bool, string} = React.PropTypes
const ResizeHandle = React.createClass({
@ -14,7 +14,7 @@ const ResizeHandle = React.createClass({
return (
<div
className={cx('resizer--handle', {dragging: isDragging})}
className={classnames('resizer--handle', {dragging: isDragging})}
onMouseDown={onHandleStartDrag}
style={{top}}
/>

View File

@ -1,5 +1,5 @@
import React, {PropTypes} from 'react'
import cx from 'classnames'
import classnames from 'classnames'
const {node, func, bool, number, string} = PropTypes
export const Tab = React.createClass({
@ -13,7 +13,7 @@ export const Tab = React.createClass({
render() {
return (
<div
className={cx('btn tab', {active: this.props.isActive})}
className={classnames('btn tab', {active: this.props.isActive})}
onClick={this.props.isDisabled ? null : this.props.onClick}
>
{this.props.children}

View File

@ -1,6 +1,6 @@
import React, {PropTypes} from 'react'
import OnClickOutside from 'react-onclickoutside'
import classNames from 'classnames'
import classnames from 'classnames'
const TemplateDrawer = ({
templates,
@ -11,7 +11,7 @@ const TemplateDrawer = ({
<div className="template-drawer">
{templates.map(t => (
<div
className={classNames('template-drawer--item', {
className={classnames('template-drawer--item', {
'template-drawer--selected': t.tempVar === selected.tempVar,
})}
onMouseOver={() => {

View File

@ -1,6 +1,6 @@
import React, {PropTypes} from 'react'
import {Link} from 'react-router'
import cx from 'classnames'
import classnames from 'classnames'
const {node, string} = PropTypes
@ -16,7 +16,7 @@ const NavListItem = React.createClass({
const isActive = location.startsWith(link)
return (
<Link className={cx('sidebar__menu-item', {active: isActive})} to={link}>
<Link className={classnames('sidebar__menu-item', {active: isActive})} to={link}>
{children}
</Link>
)
@ -63,7 +63,7 @@ const NavBlock = React.createClass({
})
return (
<div className={cx('sidebar__square', className, {active: isActive})}>
<div className={classnames('sidebar__square', className, {active: isActive})}>
{this.renderLink()}
<div className={wrapperClassName || 'sidebar__menu-wrapper'}>
<div className="sidebar__menu">

View File

@ -1,5 +1,5 @@
import React, {PropTypes} from 'react'
import classNames from 'classnames'
import classnames from 'classnames'
import {insecureSkipVerifyText} from 'src/shared/copy/tooltipText'
import _ from 'lodash'
@ -166,7 +166,7 @@ export const SourceForm = React.createClass({
: null}
<div className="form-group form-group-submit col-xs-12 col-sm-6 col-sm-offset-3">
<button
className={classNames('btn btn-block', {
className={classnames('btn btn-block', {
'btn-primary': editMode,
'btn-success': !editMode,
})}