Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Slider] Fix isRtl behaviour directionInvariant approach #6760

Merged
merged 2 commits into from
May 3, 2017
Merged

[Slider] Fix isRtl behaviour directionInvariant approach #6760

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
560289c
[Slider] Unit testing isRtl behaviour
omarchehab98 May 3, 2017
f9ac963
[Slider] directionInvariant, transformed axis based on isRtl
omarchehab98 May 3, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
121 changes: 86 additions & 35 deletions src/Slider/Slider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,18 @@ const reverseMainAxisOffsetProperty = {

const isMouseControlInverted = (axis) => axis === 'x-reverse' || axis === 'y';

const calculateAxis = (axis, isRtl) => {
if (isRtl) {
switch (axis) {
case 'x':
return 'x-reverse';
case 'x-reverse':
return 'x';
}
}
return axis;
};

function getPercent(value, min, max) {
let percent = (value - min) / (max - min);
if (isNaN(percent)) {
Expand All @@ -127,6 +139,7 @@ const getStyles = (props, context, state) => {
} = props;

const {
isRtl,
slider: {
handleColorZero,
handleFillColor,
Expand All @@ -145,45 +158,48 @@ const getStyles = (props, context, state) => {
const disabledGutter = trackSize + handleSizeDisabled / 2;
const calcDisabledSpacing = disabled ? ` - ${disabledGutter}px` : '';
const percent = getPercent(state.value, min, max);
const calculatedAxis = calculateAxis(axis, isRtl);

const styles = {
slider: {
touchCallout: 'none',
userSelect: 'none',
cursor: 'default',
[crossAxisProperty[axis]]: handleSizeActive,
[mainAxisProperty[axis]]: '100%',
[crossAxisProperty[calculatedAxis]]: handleSizeActive,
[mainAxisProperty[calculatedAxis]]: '100%',
position: 'relative',
marginTop: 24,
marginBottom: 48,
},
track: {
position: 'absolute',
[crossAxisOffsetProperty[axis]]: (handleSizeActive - trackSize) / 2,
[mainAxisOffsetProperty[axis]]: 0,
[mainAxisProperty[axis]]: '100%',
[crossAxisProperty[axis]]: trackSize,
[crossAxisOffsetProperty[calculatedAxis]]: (handleSizeActive - trackSize) / 2,
[mainAxisOffsetProperty[calculatedAxis]]: 0,
[mainAxisProperty[calculatedAxis]]: '100%',
[crossAxisProperty[calculatedAxis]]: trackSize,
},
filledAndRemaining: {
directionInvariant: true,
position: 'absolute',
[crossAxisOffsetProperty]: 0,
[crossAxisProperty[axis]]: '100%',
[crossAxisProperty[calculatedAxis]]: '100%',
transition: transitions.easeOut(null, 'margin'),
},
handle: {
directionInvariant: true,
boxSizing: 'border-box',
position: 'absolute',
cursor: 'pointer',
pointerEvents: 'inherit',
[crossAxisOffsetProperty[axis]]: 0,
[mainAxisOffsetProperty[axis]]: percent === 0 ? '0%' : `${(percent * 100)}%`,
[crossAxisOffsetProperty[calculatedAxis]]: 0,
[mainAxisOffsetProperty[calculatedAxis]]: percent === 0 ? '0%' : `${(percent * 100)}%`,
zIndex: 1,
margin: ({
x: `${(trackSize / 2)}px 0 0 0`,
'x-reverse': `${(trackSize / 2)}px 0 0 0`,
y: `0 0 0 ${(trackSize / 2)}px`,
'y-reverse': `0 0 0 ${(trackSize / 2)}px`,
})[axis],
})[calculatedAxis],
width: handleSize,
height: handleSize,
backgroundColor: selectionColor,
Expand All @@ -195,7 +211,7 @@ const getStyles = (props, context, state) => {
'x-reverse': 'translate(50%, -50%)',
y: 'translate(-50%, 50%)',
'y-reverse': 'translate(-50%, -50%)',
})[axis],
})[calculatedAxis],
transition:
`${transitions.easeOut('450ms', 'background')}, ${
transitions.easeOut('450ms', 'border-color')}, ${
Expand Down Expand Up @@ -249,17 +265,17 @@ const getStyles = (props, context, state) => {
},
};
styles.filled = Object.assign({}, styles.filledAndRemaining, {
[mainAxisOffsetProperty[axis]]: 0,
[mainAxisOffsetProperty[calculatedAxis]]: 0,
backgroundColor: disabled ? trackColor : selectionColor,
[mainAxisMarginFromEnd[axis]]: fillGutter,
[mainAxisProperty[axis]]: `calc(${(percent * 100)}%${calcDisabledSpacing})`,
[mainAxisMarginFromEnd[calculatedAxis]]: fillGutter,
[mainAxisProperty[calculatedAxis]]: `calc(${(percent * 100)}%${calcDisabledSpacing})`,
});
styles.remaining = Object.assign({}, styles.filledAndRemaining, {
[reverseMainAxisOffsetProperty[axis]]: 0,
[reverseMainAxisOffsetProperty[calculatedAxis]]: 0,
backgroundColor: (state.hovered || state.focused) &&
!disabled ? trackColorSelected : trackColor,
[mainAxisMarginFromStart[axis]]: fillGutter,
[mainAxisProperty[axis]]: `calc(${((1 - percent) * 100)}%${calcDisabledSpacing})`,
[mainAxisMarginFromStart[calculatedAxis]]: fillGutter,
[mainAxisProperty[calculatedAxis]]: `calc(${((1 - percent) * 100)}%${calcDisabledSpacing})`,
});

return styles;
Expand Down Expand Up @@ -416,35 +432,38 @@ class Slider extends Component {
max,
step,
} = this.props;
const {isRtl} = this.context.muiTheme;

const calculatedAxis = calculateAxis(axis, isRtl);

let action;

switch (keycode(event)) {
case 'page down':
case 'down':
if (axis === 'y-reverse') {
if (calculatedAxis === 'y-reverse') {
action = 'increase';
} else {
action = 'decrease';
}
break;
case 'left':
if (axis === 'x-reverse') {
if (calculatedAxis === 'x-reverse') {
action = 'increase';
} else {
action = 'decrease';
}
break;
case 'page up':
case 'up':
if (axis === 'y-reverse') {
if (calculatedAxis === 'y-reverse') {
action = 'decrease';
} else {
action = 'increase';
}
break;
case 'right':
if (axis === 'x-reverse') {
if (calculatedAxis === 'x-reverse') {
action = 'decrease';
} else {
action = 'increase';
Expand Down Expand Up @@ -544,15 +563,23 @@ class Slider extends Component {
}

handleTouchStart = (event) => {
if (this.props.disabled) {
const {
axis,
disabled,
} = this.props;
const {isRtl} = this.context.muiTheme;

if (disabled) {
return;
}

const calculatedAxis = calculateAxis(axis, isRtl);

let position;
if (isMouseControlInverted(this.props.axis)) {
position = this.getTrackOffset() - event.touches[0][mainAxisClientOffsetProperty[this.props.axis]];
if (isMouseControlInverted(calculatedAxis)) {
position = this.getTrackOffset() - event.touches[0][mainAxisClientOffsetProperty[calculatedAxis]];
} else {
position = event.touches[0][mainAxisClientOffsetProperty[this.props.axis]] - this.getTrackOffset();
position = event.touches[0][mainAxisClientOffsetProperty[calculatedAxis]] - this.getTrackOffset();
}
this.setValueFromPosition(event, position);

Expand Down Expand Up @@ -589,15 +616,23 @@ class Slider extends Component {
};

handleMouseDown = (event) => {
if (this.props.disabled) {
const {
axis,
disabled,
} = this.props;
const {isRtl} = this.context.muiTheme;

if (disabled) {
return;
}

const calculatedAxis = calculateAxis(axis, isRtl);

let position;
if (isMouseControlInverted(this.props.axis)) {
position = this.getTrackOffset() - event[mainAxisClientOffsetProperty[this.props.axis]];
if (isMouseControlInverted(calculatedAxis)) {
position = this.getTrackOffset() - event[mainAxisClientOffsetProperty[calculatedAxis]];
} else {
position = event[mainAxisClientOffsetProperty[this.props.axis]] - this.getTrackOffset();
position = event[mainAxisClientOffsetProperty[calculatedAxis]] - this.getTrackOffset();
}
this.setValueFromPosition(event, position);

Expand Down Expand Up @@ -634,7 +669,12 @@ class Slider extends Component {
};

getTrackOffset() {
return this.track.getBoundingClientRect()[mainAxisOffsetProperty[this.props.axis]];
const {axis} = this.props;
const {isRtl} = this.context.muiTheme;

const calculatedAxis = calculateAxis(axis, isRtl);

return this.track.getBoundingClientRect()[mainAxisOffsetProperty[calculatedAxis]];
}

onDragStart(event) {
Expand All @@ -649,6 +689,12 @@ class Slider extends Component {
}

onDragUpdate(event, type) {
const {
axis,
disabled,
} = this.props;
const {isRtl} = this.context.muiTheme;

if (this.dragRunning) {
return;
}
Expand All @@ -657,16 +703,17 @@ class Slider extends Component {
requestAnimationFrame(() => {
this.dragRunning = false;

const calculatedAxis = calculateAxis(axis, isRtl);
const source = type === 'touch' ? event.touches[0] : event;

let position;
if (isMouseControlInverted(this.props.axis)) {
position = this.getTrackOffset() - source[mainAxisClientOffsetProperty[this.props.axis]];
if (isMouseControlInverted(calculatedAxis)) {
position = this.getTrackOffset() - source[mainAxisClientOffsetProperty[calculatedAxis]];
} else {
position = source[mainAxisClientOffsetProperty[this.props.axis]] - this.getTrackOffset();
position = source[mainAxisClientOffsetProperty[calculatedAxis]] - this.getTrackOffset();
}

if (!this.props.disabled) {
if (!disabled) {
this.setValueFromPosition(event, position);
}
});
Expand All @@ -685,11 +732,15 @@ class Slider extends Component {

setValueFromPosition(event, position) {
const {
axis,
step,
min,
max,
} = this.props;
const positionMax = this.track[mainAxisClientProperty[this.props.axis]];
const {isRtl} = this.context.muiTheme;

const calculatedAxis = calculateAxis(axis, isRtl);
const positionMax = this.track[mainAxisClientProperty[calculatedAxis]];

let value;

Expand Down