Skip to content
Permalink
Browse files

refactor: Update class names

  • Loading branch information...
davidchin committed Jan 28, 2017
1 parent 517e0ac commit 92277fedbc367eac4ef2b9a81f0de8a6c4f794d4
@@ -2,28 +2,28 @@
* An object containing class names
* @ignore
* @type {Object}
* @property {string} component
* @property {string} componentDisabled
* @property {string} activeTrack
* @property {string} disabledInputRange
* @property {string} inputRange
* @property {string} labelContainer
* @property {string} labelMax
* @property {string} labelMin
* @property {string} labelValue
* @property {string} maxLabel
* @property {string} minLabel
* @property {string} slider
* @property {string} sliderContainer
* @property {string} trackActive
* @property {string} trackContainer
* @property {string} track
* @property {string} valueLabel
*/
const DEFAULT_CLASS_NAMES = {
component: 'input-range',
componentDisabled: 'input-range input-range--disabled',
activeTrack: 'input-range__track input-range__track--active',
disabledInputRange: 'input-range input-range--disabled',
inputRange: 'input-range',
labelContainer: 'input-range__label-container',
labelMax: 'input-range__label input-range__label--max',
labelMin: 'input-range__label input-range__label--min',
labelValue: 'input-range__label input-range__label--value',
maxLabel: 'input-range__label input-range__label--max',
minLabel: 'input-range__label input-range__label--min',
slider: 'input-range__slider',
sliderContainer: 'input-range__slider-container',
trackActive: 'input-range__track input-range__track--active',
trackContainer: 'input-range__track input-range__track--container',
track: 'input-range__track input-range__track--background',
valueLabel: 'input-range__label input-range__label--value',
};

export default DEFAULT_CLASS_NAMES;
@@ -133,10 +133,10 @@ export default class InputRange extends React.Component {
*/
getComponentClassName() {
if (!this.props.disabled) {
return this.props.classNames.component;
return this.props.classNames.inputRange;
}

return this.props.classNames.componentDisabled;
return this.props.classNames.disabledInputRange;
}

/**
@@ -601,9 +601,9 @@ export default class InputRange extends React.Component {
onMouseDown={this.handleMouseDown}
onTouchStart={this.handleTouchStart}>
<Label
className={this.props.classNames.labelMin}
containerClassName={this.props.classNames.labelContainer}
formatLabel={this.formatLabel}>
classNames={this.props.classNames}
formatLabel={this.formatLabel}
type="min">
{this.props.minValue}
</Label>

@@ -617,9 +617,9 @@ export default class InputRange extends React.Component {
</Track>

<Label
className={this.props.classNames.labelMax}
containerClassName={this.props.classNames.labelContainer}
formatLabel={this.formatLabel}>
classNames={this.props.classNames}
formatLabel={this.formatLabel}
type="max">
{this.props.maxValue}
</Label>

@@ -5,12 +5,11 @@ import React from 'react';
* Label React component
*/
export default function Label(props) {
const { children, className, containerClassName, formatLabel } = props;
const labelValue = formatLabel ? formatLabel(children) : children;
const labelValue = props.formatLabel ? props.formatLabel(props.children) : props.children;

return (
<span className={className}>
<span className={containerClassName}>
<span className={props.classNames[`${props.type}Label`]}>
<span className={props.classNames.labelContainer}>
{labelValue}
</span>
</span>
@@ -21,13 +20,13 @@ export default function Label(props) {
* Accepted propTypes of Label
* @type {Object}
* @property {Function} children
* @property {Function} className
* @property {Function} containerClassName
* @property {Function} classNames
* @property {Function} formatLabel
* @property {Function} type
*/
Label.propTypes = {
children: React.PropTypes.node.isRequired,
className: React.PropTypes.string.isRequired,
containerClassName: React.PropTypes.string.isRequired,
classNames: React.PropTypes.objectOf(React.PropTypes.string).isRequired,
formatLabel: React.PropTypes.func,
type: React.PropTypes.string.isRequired,
};
@@ -182,9 +182,9 @@ export default class Slider extends React.Component {
ref={(node) => { this.node = node; }}
style={style}>
<Label
className={this.props.classNames.labelValue}
containerClassName={this.props.classNames.labelContainer}
formatLabel={this.props.formatLabel}>
classNames={this.props.classNames}
formatLabel={this.props.formatLabel}
type="value">
{this.props.value}
</Label>

@@ -101,13 +101,13 @@ export default class Track extends React.Component {

return (
<div
className={this.props.classNames.trackContainer}
className={this.props.classNames.track}
onMouseDown={this.handleMouseDown}
onTouchStart={this.handleTouchStart}
ref={(node) => { this.node = node; }}>
<div
style={activeTrackStyle}
className={this.props.classNames.trackActive} />
className={this.props.classNames.activeTrack} />
{this.props.children}
</div>
);
@@ -12,7 +12,7 @@
}
}

.input-range__track--container {
.input-range__track--background {
left: 0;
margin-top: -0.5 * $input-range-track-height;
position: absolute;

0 comments on commit 92277fe

Please sign in to comment.
You can’t perform that action at this time.