Skip to content

Commit

Permalink
[Slider] Make interaction easier, fix thumb overflow (#11889)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ValentinH @mbrookes
ValentinH authored and mbrookes committed Jul 6, 2018
1 parent d9a2946 commit d62f059
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 42 deletions.
75 changes: 49 additions & 26 deletions packages/material-ui-lab/src/Slider/Slider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,17 +33,15 @@ export const style = theme => {
root: {
position: 'relative',
width: '100%',
margin: '10px 0',
padding: '6px 0',
padding: '16px 8px',
cursor: 'pointer',
WebkitTapHighlightColor: 'transparent',
'&$disabled': {
cursor: 'no-drop',
},
'&$vertical': {
height: '100%',
margin: '0 10px',
padding: '0 6px',
padding: '8px 16px',
},
'&$reverse': {
transform: 'scaleX(-1)',
Expand All @@ -52,6 +50,12 @@ export const style = theme => {
transform: 'scaleY(-1)',
},
},
container: {
position: 'relative',
'&$vertical': {
height: '100%',
},
},
/* Tracks styles */
track: {
position: 'absolute',
Expand Down Expand Up @@ -287,6 +291,7 @@ class Slider extends React.Component {
};

handleTouchStart = event => {
event.preventDefault();
this.setState({ currentState: 'activated' });

this.globalMouseUpListener = addEventListener(document, 'touchend', this.handleMouseUp);
Expand All @@ -297,6 +302,7 @@ class Slider extends React.Component {
};

handleMouseDown = event => {
event.preventDefault();
this.setState({ currentState: 'activated' });

this.globalMouseUpListener = addEventListener(document, 'mouseup', this.handleMouseUp);
Expand Down Expand Up @@ -392,12 +398,13 @@ class Slider extends React.Component {
component: Component,
classes,
className: classNameProp,
value,
min,
disabled,
max,
vertical,
min,
reverse,
disabled,
theme,
value,
vertical,
...other
} = this.props;

Expand All @@ -410,12 +417,23 @@ class Slider extends React.Component {
[classes.activated]: !disabled && currentState === 'activated',
};

const rootClasses = classNames(classes.root, {
[classes.vertical]: vertical,
[classes.reverse]: reverse,
[classes.disabled]: disabled,
const rootClasses = classNames(
classes.root,
{
[classes.vertical]: vertical,
[classes.reverse]: reverse,
[classes.disabled]: disabled,
},
classNameProp,
});
);

const containerClasses = classNames(
classes.container,
{
[classes.vertical]: vertical,
},
classNameProp,
);

const trackBeforeClasses = classNames(classes.track, classes.trackBefore, commonClasses, {
[classes.vertical]: vertical,
Expand Down Expand Up @@ -444,24 +462,29 @@ class Slider extends React.Component {
aria-valuemax={max}
aria-orientation={vertical ? 'vertical' : 'horizontal'}
onClick={this.handleClick}
onMouseDown={this.handleMouseDown}
onTouchStartCapture={this.handleTouchStart}
onTouchMove={this.handleMouseMove}
ref={node => {
this.container = findDOMNode(node);
}}
{...other}
>
<div className={trackBeforeClasses} style={inlineTrackBeforeStyles} />
<ButtonBase
className={thumbClasses}
disableRipple
style={inlineThumbStyles}
onBlur={this.handleBlur}
onKeyDown={this.handleKeyDown}
onMouseDown={this.handleMouseDown}
onTouchStartCapture={this.handleTouchStart}
onTouchMove={this.handleMouseMove}
onFocusVisible={this.handleFocus}
/>
<div className={trackAfterClasses} style={inlineTrackAfterStyles} />
<div className={containerClasses}>
<div className={trackBeforeClasses} style={inlineTrackBeforeStyles} />
<ButtonBase
className={thumbClasses}
disableRipple
style={inlineThumbStyles}
onBlur={this.handleBlur}
onKeyDown={this.handleKeyDown}
onMouseDown={this.handleMouseDown}
onTouchStartCapture={this.handleTouchStart}
onTouchMove={this.handleMouseMove}
onFocusVisible={this.handleFocus}
/>
<div className={trackAfterClasses} style={inlineTrackAfterStyles} />
</div>
</Component>
);
}
Expand Down
43 changes: 27 additions & 16 deletions packages/material-ui-lab/src/Slider/Slider.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,24 @@ describe('<Slider />', () => {

before(() => {
shallow = createShallow({ dive: true });
classes = getClasses(<Slider />);
classes = getClasses(<Slider value={0} />);
mount = createMount();
});

it('should render a div', () => {
const wrapper = shallow(<Slider />);
const wrapper = shallow(<Slider value={0} />);
assert.strictEqual(wrapper.name(), 'div');
});

it('should render with the default classes', () => {
const wrapper = shallow(<Slider />);
assert.strictEqual(wrapper.hasClass(classes.container), true);
const wrapper = shallow(<Slider value={0} />);
assert.strictEqual(wrapper.hasClass(classes.root), true);
});

it('should render with the default and user classes', () => {
const wrapper = shallow(<Slider value={0} className="mySliderClass" />);
assert.strictEqual(wrapper.hasClass(classes.root), true);
assert.strictEqual(wrapper.hasClass('mySliderClass'), true);
});

it('should call handlers', () => {
Expand All @@ -31,7 +37,12 @@ describe('<Slider />', () => {
const handleDragEnd = spy();

const wrapper = mount(
<Slider onChange={handleChange} onDragStart={handleDragStart} onDragEnd={handleDragEnd} />,
<Slider
onChange={handleChange}
onDragStart={handleDragStart}
onDragEnd={handleDragEnd}
value={0}
/>,
);
const button = wrapper.find('button');

Expand All @@ -46,24 +57,24 @@ describe('<Slider />', () => {

describe('prop: vertical', () => {
it('should render with the default and vertical classes', () => {
const wrapper = shallow(<Slider vertical />);
assert.strictEqual(wrapper.hasClass(classes.container), true);
const wrapper = shallow(<Slider vertical value={0} />);
assert.strictEqual(wrapper.hasClass(classes.root), true);
assert.strictEqual(wrapper.hasClass(classes.vertical), true);
});
});

describe('prop: reverse', () => {
it('should render with the default and reverse classes', () => {
const wrapper = shallow(<Slider reverse />);
assert.strictEqual(wrapper.hasClass(classes.container), true);
const wrapper = shallow(<Slider reverse value={0} />);
assert.strictEqual(wrapper.hasClass(classes.root), true);
assert.strictEqual(wrapper.hasClass(classes.reverse), true);
});
});

describe('props: vertical & reverse', () => {
it('should render with the default, reverse and vertical classes', () => {
const wrapper = shallow(<Slider reverse vertical />);
assert.strictEqual(wrapper.hasClass(classes.container), true);
const wrapper = shallow(<Slider reverse vertical value={0} />);
assert.strictEqual(wrapper.hasClass(classes.root), true);
assert.strictEqual(wrapper.hasClass(classes.reverse), true);
assert.strictEqual(wrapper.hasClass(classes.vertical), true);
});
Expand All @@ -74,7 +85,7 @@ describe('<Slider />', () => {
let wrapper;

before(() => {
wrapper = mount(<Slider onChange={handleChange} disabled />);
wrapper = mount(<Slider onChange={handleChange} disabled value={0} />);
});

it('should render thumb with the disabled classes', () => {
Expand Down Expand Up @@ -121,12 +132,12 @@ describe('<Slider />', () => {
const trackBefore = tracks.at(0);
const trackAfter = tracks.at(1);

assert.strictEqual(trackBefore.prop('style').width, 'calc(0% - 0px)');
assert.strictEqual(trackBefore.prop('style').width, '0%');
assert.strictEqual(trackAfter.prop('style').width, 'calc(100% - 5px)');
});

it('after change value should change position of thumb', () => {
wrapper.setProps({ value: 0.5 });
wrapper.setProps({ value: 50 });

clock.tick(transitionComplexDuration);

Expand All @@ -139,8 +150,8 @@ describe('<Slider />', () => {
const trackBefore = tracks.at(0);
const trackAfter = tracks.at(1);

assert.strictEqual(trackBefore.prop('style').width, 'calc(50% - 0px)');
assert.strictEqual(trackAfter.prop('style').width, 'calc(50% - 7px)');
assert.strictEqual(trackBefore.prop('style').width, '50%');
assert.strictEqual(trackAfter.prop('style').width, 'calc(100% - 5px)');
});
});
});

0 comments on commit d62f059

Please sign in to comment.