Change cx and classNames to both be classnames
this is the new pattern, apparentlypull/10616/head
parent
76766bd93b
commit
faa478cad3
|
@ -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"
|
||||
|
|
|
@ -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({
|
||||
|
|
|
@ -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}`}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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,
|
||||
})}
|
||||
>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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,
|
||||
})}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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)}
|
||||
|
|
|
@ -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%'}}
|
||||
|
|
|
@ -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)}
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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}}
|
||||
/>
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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={() => {
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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,
|
||||
})}
|
||||
|
|
Loading…
Reference in New Issue