Skip to content

Commit 4487fd5

Browse files
lwansbroughlwansbrough
committed
[Slider] Removed unnecessary function invocations
1 parent 57ffb47 commit 4487fd5

1 file changed

Lines changed: 44 additions & 49 deletions

File tree

‎src/Slider/Slider.js‎

Lines changed: 44 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -37,68 +37,68 @@ const valueInRangePropType = (props, propName, componentName) => {
3737
}
3838
};
3939

40-
const getCrossAxisProperty = (axis) => ({
40+
const crossAxisProperty = {
4141
x: 'height',
4242
'x-reverse': 'height',
4343
y: 'width',
4444
'y-reverse': 'width',
45-
})[axis];
45+
};
4646

47-
const getCrossAxisOffsetProperty = (axis) => ({
47+
const crossAxisOffsetProperty = {
4848
x: 'top',
4949
'x-reverse': 'top',
5050
y: 'left',
5151
'y-reverse': 'left',
52-
})[axis];
52+
};
5353

54-
const getMainAxisProperty = (axis) => ({
54+
const mainAxisProperty = {
5555
x: 'width',
5656
'x-reverse': 'width',
5757
y: 'height',
5858
'y-reverse': 'height',
59-
})[axis];
59+
};
6060

61-
const getMainAxisMarginFromEnd = (axis) => ({
61+
const mainAxisMarginFromEnd = {
6262
x: 'marginRight',
6363
'x-reverse': 'marginLeft',
6464
y: 'marginTop',
6565
'y-reverse': 'marginBottom',
66-
})[axis];
66+
};
6767

68-
const getMainAxisMarginFromStart = (axis) => ({
68+
const mainAxisMarginFromStart = {
6969
x: 'marginLeft',
7070
'x-reverse': 'marginRight',
7171
y: 'marginBottom',
7272
'y-reverse': 'marginTop',
73-
})[axis];
73+
};
7474

75-
const getMainAxisOffsetProperty = (axis) => ({
75+
const mainAxisOffsetProperty = {
7676
x: 'left',
7777
'x-reverse': 'right',
7878
y: 'bottom',
7979
'y-reverse': 'top',
80-
})[axis];
80+
};
8181

82-
const getMainAxisClientProperty = (axis) => ({
82+
const mainAxisClientProperty = {
8383
x: 'clientWidth',
8484
'x-reverse': 'clientWidth',
8585
y: 'clientHeight',
8686
'y-reverse': 'clientHeight',
87-
})[axis];
87+
};
8888

89-
const getMainAxisClientOffsetProperty = (axis) => ({
89+
const mainAxisClientOffsetProperty = {
9090
x: 'clientX',
9191
'x-reverse': 'clientX',
9292
y: 'clientY',
9393
'y-reverse': 'clientY',
94-
})[axis];
94+
};
9595

96-
const getReverseMainAxisOffsetProperty = (axis) => ({
96+
const reverseMainAxisOffsetProperty = {
9797
x: 'right',
9898
'x-reverse': 'left',
9999
y: 'top',
100100
'y-reverse': 'bottom',
101-
})[axis];
101+
};
102102

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

@@ -107,44 +107,39 @@ const getStyles = (props, context, state) => {
107107
const fillGutter = slider.handleSize / 2;
108108
const disabledGutter = slider.trackSize + slider.handleSizeDisabled / 2;
109109
const calcDisabledSpacing = props.disabled ? ` - ${disabledGutter}px` : '';
110-
111-
const crossAxisProperty = getCrossAxisProperty(props.axis);
112-
const crossAxisOffsetProperty = getCrossAxisOffsetProperty(props.axis);
113-
const mainAxisProperty = getMainAxisProperty(props.axis);
114-
const mainAxisOffsetProperty = getMainAxisOffsetProperty(props.axis);
115-
const reverseMainAxisOffsetProperty = getReverseMainAxisOffsetProperty(props.axis);
110+
const axis = props.axis;
116111

117112
const styles = {
118113
slider: {
119114
touchCallout: 'none',
120115
userSelect: 'none',
121116
cursor: 'default',
122-
[crossAxisProperty]: slider.handleSizeActive,
123-
[mainAxisProperty]: '100%',
117+
[crossAxisProperty[axis]]: slider.handleSizeActive,
118+
[mainAxisProperty[axis]]: '100%',
124119
position: 'relative',
125120
marginTop: 24,
126121
marginBottom: 48,
127122
},
128123
track: {
129124
position: 'absolute',
130-
[crossAxisOffsetProperty]: (slider.handleSizeActive - slider.trackSize) / 2,
131-
[mainAxisOffsetProperty]: 0,
132-
[mainAxisProperty]: '100%',
133-
[crossAxisProperty]: slider.trackSize,
125+
[crossAxisOffsetProperty[axis]]: (slider.handleSizeActive - slider.trackSize) / 2,
126+
[mainAxisOffsetProperty[axis]]: 0,
127+
[mainAxisProperty[axis]]: '100%',
128+
[crossAxisProperty[axis]]: slider.trackSize,
134129
},
135130
filledAndRemaining: {
136131
position: 'absolute',
137132
[crossAxisOffsetProperty]: 0,
138-
[crossAxisProperty]: '100%',
133+
[crossAxisProperty[axis]]: '100%',
139134
transition: transitions.easeOut(null, 'margin'),
140135
},
141136
handle: {
142137
boxSizing: 'border-box',
143138
position: 'absolute',
144139
cursor: 'pointer',
145140
pointerEvents: 'inherit',
146-
[crossAxisOffsetProperty]: 0,
147-
[mainAxisOffsetProperty]: state.percent === 0 ? '0%' : `${(state.percent * 100)}%`,
141+
[crossAxisOffsetProperty[axis]]: 0,
142+
[mainAxisOffsetProperty[axis]]: state.percent === 0 ? '0%' : `${(state.percent * 100)}%`,
148143
zIndex: 1,
149144
margin: ({
150145
x: `${(slider.trackSize / 2)}px 0 0 0`,
@@ -217,17 +212,17 @@ const getStyles = (props, context, state) => {
217212
},
218213
};
219214
styles.filled = Object.assign({}, styles.filledAndRemaining, {
220-
[mainAxisOffsetProperty]: 0,
215+
[mainAxisOffsetProperty[axis]]: 0,
221216
backgroundColor: (props.disabled) ? slider.trackColor : slider.selectionColor,
222-
[getMainAxisMarginFromEnd(props.axis)]: fillGutter,
223-
[mainAxisProperty]: `calc(${(state.percent * 100)}%${calcDisabledSpacing})`,
217+
[mainAxisMarginFromEnd[axis]]: fillGutter,
218+
[mainAxisProperty[axis]]: `calc(${(state.percent * 100)}%${calcDisabledSpacing})`,
224219
});
225220
styles.remaining = Object.assign({}, styles.filledAndRemaining, {
226-
[reverseMainAxisOffsetProperty]: 0,
221+
[reverseMainAxisOffsetProperty[axis]]: 0,
227222
backgroundColor: (state.hovered || state.focused) &&
228223
!props.disabled ? slider.trackColorSelected : slider.trackColor,
229-
[getMainAxisMarginFromStart(props.axis)]: fillGutter,
230-
[mainAxisProperty]: `calc(${((1 - state.percent) * 100)}%${calcDisabledSpacing})`,
224+
[mainAxisMarginFromStart[axis]]: fillGutter,
225+
[mainAxisProperty[axis]]: `calc(${((1 - state.percent) * 100)}%${calcDisabledSpacing})`,
231226
});
232227

233228
return styles;
@@ -471,9 +466,9 @@ class Slider extends Component {
471466
requestAnimationFrame(() => {
472467
let pos;
473468
if (isMouseControlInverted(this.props.axis)) {
474-
pos = this.getTrackOffset() - event[getMainAxisClientOffsetProperty(this.props.axis)];
469+
pos = this.getTrackOffset() - event[mainAxisClientOffsetProperty[this.props.axis]];
475470
} else {
476-
pos = event[getMainAxisClientOffsetProperty(this.props.axis)] - this.getTrackOffset();
471+
pos = event[mainAxisClientOffsetProperty[this.props.axis]] - this.getTrackOffset();
477472
}
478473
this.onDragUpdate(event, pos);
479474
this.dragRunning = false;
@@ -488,9 +483,9 @@ class Slider extends Component {
488483
requestAnimationFrame(() => {
489484
let pos;
490485
if (isMouseControlInverted(this.props.axis)) {
491-
pos = this.getTrackOffset() - event.touches[0][getMainAxisClientOffsetProperty(this.props.axis)];
486+
pos = this.getTrackOffset() - event.touches[0][mainAxisClientOffsetProperty[this.props.axis]];
492487
} else {
493-
pos = event.touches[0][getMainAxisClientOffsetProperty(this.props.axis)] - this.getTrackOffset();
488+
pos = event.touches[0][mainAxisClientOffsetProperty[this.props.axis]] - this.getTrackOffset();
494489
}
495490
this.onDragUpdate(event, pos);
496491
this.dragRunning = false;
@@ -559,9 +554,9 @@ class Slider extends Component {
559554
if (!this.props.disabled && !this.state.dragging) {
560555
let pos;
561556
if (isMouseControlInverted(this.props.axis)) {
562-
pos = this.getTrackOffset() - event.touches[0][getMainAxisClientOffsetProperty(this.props.axis)];
557+
pos = this.getTrackOffset() - event.touches[0][mainAxisClientOffsetProperty[this.props.axis]];
563558
} else {
564-
pos = event.touches[0][getMainAxisClientOffsetProperty(this.props.axis)] - this.getTrackOffset();
559+
pos = event.touches[0][mainAxisClientOffsetProperty[this.props.axis]] - this.getTrackOffset();
565560
}
566561
this.dragTo(event, pos);
567562

@@ -585,9 +580,9 @@ class Slider extends Component {
585580
if (!this.props.disabled && !this.state.dragging) {
586581
let pos;
587582
if (isMouseControlInverted(this.props.axis)) {
588-
pos = this.getTrackOffset() - event[getMainAxisClientOffsetProperty(this.props.axis)];
583+
pos = this.getTrackOffset() - event[mainAxisClientOffsetProperty[this.props.axis]];
589584
} else {
590-
pos = event[getMainAxisClientOffsetProperty(this.props.axis)] - this.getTrackOffset();
585+
pos = event[mainAxisClientOffsetProperty[this.props.axis]] - this.getTrackOffset();
591586
}
592587
this.dragTo(event, pos);
593588

@@ -610,7 +605,7 @@ class Slider extends Component {
610605
};
611606

612607
getTrackOffset() {
613-
return this.refs.track.getBoundingClientRect()[getMainAxisOffsetProperty(this.props.axis)];
608+
return this.refs.track.getBoundingClientRect()[mainAxisOffsetProperty[this.props.axis]];
614609
}
615610

616611
onDragStart(event) {
@@ -635,7 +630,7 @@ class Slider extends Component {
635630
}
636631

637632
dragTo(event, pos) {
638-
const max = this.refs.track[getMainAxisClientProperty(this.props.axis)];
633+
const max = this.refs.track[mainAxisClientProperty[this.props.axis]];
639634
if (pos < 0) pos = 0; else if (pos > max) pos = max;
640635
this.updateWithChangeEvent(event, pos / max);
641636
}

0 commit comments

Comments
 (0)
⚡