@blueprintjs/core
Version:
Core styles & components
195 lines • 9.64 kB
JavaScript
/*
* Copyright 2016 Palantir Technologies, Inc. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import * as tslib_1 from "tslib";
import classNames from "classnames";
import * as React from "react";
import { polyfill } from "react-lifecycles-compat";
import { AbstractPureComponent2, Classes, Keys } from "../../common";
import { DISPLAYNAME_PREFIX } from "../../common/props";
import { clamp, safeInvoke } from "../../common/utils";
import { formatPercentage } from "./sliderUtils";
// props that require number values, for validation
const NUMBER_PROPS = ["max", "min", "stepSize", "tickSize", "value"];
/** Internal component for a Handle with click/drag/keyboard logic to determine a new value. */
let Handle = class Handle extends AbstractPureComponent2 {
/** Internal component for a Handle with click/drag/keyboard logic to determine a new value. */
constructor() {
super(...arguments);
this.state = {
isMoving: false,
};
this.refHandlers = {
handle: (el) => (this.handleElement = el),
};
this.beginHandleMovement = (event) => {
document.addEventListener("mousemove", this.handleHandleMovement);
document.addEventListener("mouseup", this.endHandleMovement);
this.setState({ isMoving: true });
this.changeValue(this.clientToValue(this.mouseEventClientOffset(event)));
};
this.beginHandleTouchMovement = (event) => {
document.addEventListener("touchmove", this.handleHandleTouchMovement);
document.addEventListener("touchend", this.endHandleTouchMovement);
document.addEventListener("touchcancel", this.endHandleTouchMovement);
this.setState({ isMoving: true });
this.changeValue(this.clientToValue(this.touchEventClientOffset(event)));
};
this.endHandleMovement = (event) => {
this.handleMoveEndedAt(this.mouseEventClientOffset(event));
};
this.endHandleTouchMovement = (event) => {
this.handleMoveEndedAt(this.touchEventClientOffset(event));
};
this.handleMoveEndedAt = (clientPixel) => {
this.removeDocumentEventListeners();
this.setState({ isMoving: false });
// always invoke onRelease; changeValue may call onChange if value is different
const { onRelease } = this.props;
const finalValue = this.changeValue(this.clientToValue(clientPixel));
safeInvoke(onRelease, finalValue);
};
this.handleHandleMovement = (event) => {
this.handleMovedTo(this.mouseEventClientOffset(event));
};
this.handleHandleTouchMovement = (event) => {
this.handleMovedTo(this.touchEventClientOffset(event));
};
this.handleMovedTo = (clientPixel) => {
if (this.state.isMoving && !this.props.disabled) {
this.changeValue(this.clientToValue(clientPixel));
}
};
this.handleKeyDown = (event) => {
const { stepSize, value } = this.props;
const { which } = event;
if (which === Keys.ARROW_DOWN || which === Keys.ARROW_LEFT) {
this.changeValue(value - stepSize);
// this key event has been handled! prevent browser scroll on up/down
event.preventDefault();
}
else if (which === Keys.ARROW_UP || which === Keys.ARROW_RIGHT) {
this.changeValue(value + stepSize);
event.preventDefault();
}
};
this.handleKeyUp = (event) => {
if ([Keys.ARROW_UP, Keys.ARROW_DOWN, Keys.ARROW_LEFT, Keys.ARROW_RIGHT].indexOf(event.which) >= 0) {
safeInvoke(this.props.onRelease, this.props.value);
}
};
}
componentDidMount() {
// The first time this component renders, it has no ref to the handle and thus incorrectly centers the handle.
// Therefore, on the first mount, force a re-render to center the handle with the ref'd component.
this.forceUpdate();
}
render() {
const { className, disabled, label, min, tickSizeRatio, value, vertical } = this.props;
const { isMoving } = this.state;
// The handle midpoint of RangeSlider is actually shifted by a margin to
// be on the edge of the visible handle element. Because the midpoint
// calculation does not take this margin into account, we instead
// measure the long side (which is equal to the short side plus the
// margin).
const { handleMidpoint } = this.getHandleMidpointAndOffset(this.handleElement, true);
const offsetRatio = (value - min) * tickSizeRatio;
const offsetCalc = `calc(${formatPercentage(offsetRatio)} - ${handleMidpoint}px)`;
const style = vertical ? { bottom: offsetCalc } : { left: offsetCalc };
return (React.createElement("span", { className: classNames(Classes.SLIDER_HANDLE, { [Classes.ACTIVE]: isMoving }, className), onKeyDown: disabled ? null : this.handleKeyDown, onKeyUp: disabled ? null : this.handleKeyUp, onMouseDown: disabled ? null : this.beginHandleMovement, onTouchStart: disabled ? null : this.beginHandleTouchMovement, ref: this.refHandlers.handle, style: style, tabIndex: 0 }, label == null ? null : React.createElement("span", { className: Classes.SLIDER_LABEL }, label)));
}
componentWillUnmount() {
this.removeDocumentEventListeners();
}
/** Convert client pixel to value between min and max. */
clientToValue(clientPixel) {
const { stepSize, tickSize, value, vertical } = this.props;
if (this.handleElement == null) {
return value;
}
// #1769: this logic doesn't work perfectly when the tick size is
// smaller than the handle size; it may be off by a tick or two.
const clientPixelNormalized = vertical ? window.innerHeight - clientPixel : clientPixel;
const handleCenterPixel = this.getHandleElementCenterPixel(this.handleElement);
const pixelDelta = clientPixelNormalized - handleCenterPixel;
if (isNaN(pixelDelta)) {
return value;
}
// convert pixels to range value in increments of `stepSize`
return value + Math.round(pixelDelta / (tickSize * stepSize)) * stepSize;
}
mouseEventClientOffset(event) {
return this.props.vertical ? event.clientY : event.clientX;
}
touchEventClientOffset(event) {
const touch = event.changedTouches[0];
return this.props.vertical ? touch.clientY : touch.clientX;
}
validateProps(props) {
for (const prop of NUMBER_PROPS) {
if (typeof props[prop] !== "number") {
throw new Error(`[Blueprint] <Handle> requires number value for ${prop} prop`);
}
}
}
/** Clamp value and invoke callback if it differs from current value */
changeValue(newValue, callback = this.props.onChange) {
newValue = this.clamp(newValue);
if (!isNaN(newValue) && this.props.value !== newValue) {
safeInvoke(callback, newValue);
}
return newValue;
}
/** Clamp value between min and max props */
clamp(value) {
return clamp(value, this.props.min, this.props.max);
}
getHandleElementCenterPixel(handleElement) {
const { handleMidpoint, handleOffset } = this.getHandleMidpointAndOffset(handleElement);
return handleOffset + handleMidpoint;
}
getHandleMidpointAndOffset(handleElement, useOppositeDimension = false) {
if (handleElement == null) {
return { handleMidpoint: 0, handleOffset: 0 };
}
const { vertical } = this.props;
// getBoundingClientRect().height includes border size; clientHeight does not.
const handleRect = handleElement.getBoundingClientRect();
const sizeKey = vertical
? useOppositeDimension
? "width"
: "height"
: useOppositeDimension
? "height"
: "width";
// "bottom" value seems to be consistently incorrect, so explicitly
// calculate it using the window offset instead.
const handleOffset = vertical ? window.innerHeight - (handleRect.top + handleRect[sizeKey]) : handleRect.left;
return { handleMidpoint: handleRect[sizeKey] / 2, handleOffset };
}
removeDocumentEventListeners() {
document.removeEventListener("mousemove", this.handleHandleMovement);
document.removeEventListener("mouseup", this.endHandleMovement);
document.removeEventListener("touchmove", this.handleHandleTouchMovement);
document.removeEventListener("touchend", this.endHandleTouchMovement);
document.removeEventListener("touchcancel", this.endHandleTouchMovement);
}
};
Handle.displayName = `${DISPLAYNAME_PREFIX}.SliderHandle`;
Handle = tslib_1.__decorate([
polyfill
], Handle);
export { Handle };
//# sourceMappingURL=handle.js.map