@blueprintjs/core
Version:
Core styles & components
334 lines • 15.5 kB
JavaScript
"use strict";
/*
* Copyright 2018 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.
*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.MultiSlider = exports.MultiSliderHandle = void 0;
const tslib_1 = require("tslib");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const React = tslib_1.__importStar(require("react"));
const common_1 = require("../../common");
const Errors = tslib_1.__importStar(require("../../common/errors"));
const handle_1 = require("./handle");
const handleProps_1 = require("./handleProps");
const sliderUtils_1 = require("./sliderUtils");
/**
* Multi slider handle component, used as a child of MultiSlider. This component is not rendered directly.
*
* @see https://blueprintjs.com/docs/#core/components/sliders.handle
*/
const MultiSliderHandle = () => null;
exports.MultiSliderHandle = MultiSliderHandle;
exports.MultiSliderHandle.displayName = `${common_1.DISPLAYNAME_PREFIX}.MultiSliderHandle`;
/**
* Multi slider component.
*
* @see https://blueprintjs.com/docs/#core/components/sliders.multi-slider
*/
class MultiSlider extends common_1.AbstractPureComponent {
constructor() {
super(...arguments);
this.state = {
labelPrecision: getLabelPrecision(this.props),
tickSize: 0,
tickSizeRatio: 0,
};
this.handleElements = [];
this.trackElement = null;
this.addHandleRef = (ref) => {
if (ref != null) {
this.handleElements.push(ref);
}
};
this.maybeHandleTrackClick = (event) => {
if (this.canHandleTrackEvent(event)) {
const foundHandle = this.nearestHandleForValue(this.handleElements, handle => handle.mouseEventClientOffset(event));
if (foundHandle) {
foundHandle.beginHandleMovement(event);
}
}
};
this.maybeHandleTrackTouch = (event) => {
if (this.canHandleTrackEvent(event)) {
const foundHandle = this.nearestHandleForValue(this.handleElements, handle => handle.touchEventClientOffset(event));
if (foundHandle) {
foundHandle.beginHandleTouchMovement(event);
}
}
};
this.canHandleTrackEvent = (event) => {
const target = event.target;
// ensure event does not come from inside the handle
return !this.props.disabled && target.closest(`.${common_1.Classes.SLIDER_HANDLE}`) == null;
};
this.getHandlerForIndex = (index, callback) => {
return (newValue) => {
callback === null || callback === void 0 ? void 0 : callback(this.getNewHandleValues(newValue, index));
};
};
this.handleChange = (newValues) => {
var _a, _b;
const handleProps = getSortedInteractiveHandleProps(this.props);
const oldValues = handleProps.map(handle => handle.value);
if (!common_1.Utils.arraysEqual(newValues, oldValues)) {
(_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, newValues);
handleProps.forEach((handle, index) => {
var _a;
if (oldValues[index] !== newValues[index]) {
(_a = handle.onChange) === null || _a === void 0 ? void 0 : _a.call(handle, newValues[index]);
}
});
}
};
this.handleRelease = (newValues) => {
var _a, _b;
const handleProps = getSortedInteractiveHandleProps(this.props);
(_b = (_a = this.props).onRelease) === null || _b === void 0 ? void 0 : _b.call(_a, newValues);
handleProps.forEach((handle, index) => {
var _a;
(_a = handle.onRelease) === null || _a === void 0 ? void 0 : _a.call(handle, newValues[index]);
});
};
}
static getDerivedStateFromProps(props) {
return { labelPrecision: MultiSlider.getLabelPrecision(props) };
}
static getLabelPrecision({ labelPrecision, stepSize }) {
// infer default label precision from stepSize because that's how much the handle moves.
return labelPrecision == null ? common_1.Utils.countDecimalPlaces(stepSize) : labelPrecision;
}
getSnapshotBeforeUpdate(prevProps) {
const prevHandleProps = getSortedInteractiveHandleProps(prevProps);
const newHandleProps = getSortedInteractiveHandleProps(this.props);
if (newHandleProps.length !== prevHandleProps.length) {
// clear refs
this.handleElements = [];
}
return null;
}
render() {
const classes = (0, classnames_1.default)(common_1.Classes.SLIDER, {
[common_1.Classes.DISABLED]: this.props.disabled,
[`${common_1.Classes.SLIDER}-unlabeled`]: this.props.labelRenderer === false,
[common_1.Classes.VERTICAL]: this.props.vertical,
}, this.props.className);
return (React.createElement("div", { className: classes, onMouseDown: this.maybeHandleTrackClick, onTouchStart: this.maybeHandleTrackTouch },
React.createElement("div", { className: common_1.Classes.SLIDER_TRACK, ref: ref => (this.trackElement = ref) }, this.renderTracks()),
React.createElement("div", { className: common_1.Classes.SLIDER_AXIS }, this.renderLabels()),
this.renderHandles()));
}
componentDidMount() {
this.updateTickSize();
}
componentDidUpdate(prevProps, prevState) {
super.componentDidUpdate(prevProps, prevState);
this.updateTickSize();
}
validateProps(props) {
if (props.stepSize <= 0) {
throw new Error(Errors.SLIDER_ZERO_STEP);
}
if (props.labelStepSize !== undefined && props.labelValues !== undefined) {
throw new Error(Errors.MULTISLIDER_WARN_LABEL_STEP_SIZE_LABEL_VALUES_MUTEX);
}
if (props.labelStepSize !== undefined && props.labelStepSize <= 0) {
throw new Error(Errors.SLIDER_ZERO_LABEL_STEP);
}
if (props.min !== undefined && !isFinite(props.min)) {
throw new Error(Errors.SLIDER_MIN);
}
if (props.max !== undefined && !isFinite(props.max)) {
throw new Error(Errors.SLIDER_MAX);
}
let anyInvalidChildren = false;
React.Children.forEach(props.children, child => {
// allow boolean coercion to omit nulls and false values
if (child && !common_1.Utils.isElementOfType(child, exports.MultiSliderHandle)) {
anyInvalidChildren = true;
}
});
if (anyInvalidChildren) {
throw new Error(Errors.MULTISLIDER_INVALID_CHILD);
}
}
formatLabel(value, isHandleTooltip = false) {
const { labelRenderer } = this.props;
if (labelRenderer === false) {
return undefined;
}
else if (common_1.Utils.isFunction(labelRenderer)) {
return labelRenderer(value, { isHandleTooltip });
}
else {
return value.toFixed(this.state.labelPrecision);
}
}
renderLabels() {
if (this.props.labelRenderer === false) {
return null;
}
const values = this.getLabelValues();
const { max, min } = this.props;
const labels = values.map((step, i) => {
const offsetPercentage = (0, sliderUtils_1.formatPercentage)((step - min) / (max - min));
const style = this.props.vertical ? { bottom: offsetPercentage } : { left: offsetPercentage };
return (React.createElement("div", { className: common_1.Classes.SLIDER_LABEL, key: i, style: style }, this.formatLabel(step)));
});
return labels;
}
renderTracks() {
const trackStops = getSortedHandleProps(this.props);
trackStops.push({ value: this.props.max });
// render from current to previous, then increment previous
let previous = { value: this.props.min };
const handles = [];
for (let index = 0; index < trackStops.length; index++) {
const current = trackStops[index];
handles.push(this.renderTrackFill(index, previous, current));
previous = current;
}
return handles;
}
renderTrackFill(index, start, end) {
// ensure startRatio <= endRatio
const [startRatio, endRatio] = [this.getOffsetRatio(start.value), this.getOffsetRatio(end.value)].sort((left, right) => left - right);
const startOffset = (0, sliderUtils_1.formatPercentage)(startRatio);
const endOffset = (0, sliderUtils_1.formatPercentage)(1 - endRatio);
const orientationStyle = this.props.vertical
? { bottom: startOffset, left: 0, top: endOffset }
: { left: startOffset, right: endOffset, top: 0 };
const style = {
...orientationStyle,
...(start.trackStyleAfter || end.trackStyleBefore || {}),
};
const classes = (0, classnames_1.default)(common_1.Classes.SLIDER_PROGRESS, common_1.Classes.intentClass(this.getTrackIntent(start, end)));
return React.createElement("div", { key: `track-${index}`, className: classes, style: style });
}
renderHandles() {
const { disabled, max, min, stepSize, vertical } = this.props;
const handleProps = getSortedInteractiveHandleProps(this.props);
if (handleProps.length === 0) {
return null;
}
return handleProps.map(({ value, type, className, htmlProps }, index) => (React.createElement(handle_1.Handle, { htmlProps: htmlProps, className: (0, classnames_1.default)({
[common_1.Classes.START]: type === handleProps_1.HandleType.START,
[common_1.Classes.END]: type === handleProps_1.HandleType.END,
}, className), disabled: disabled, key: `${index}-${handleProps.length}`, label: this.formatLabel(value, true), max: max, min: min, onChange: this.getHandlerForIndex(index, this.handleChange), onRelease: this.getHandlerForIndex(index, this.handleRelease), ref: this.addHandleRef, stepSize: stepSize, tickSize: this.state.tickSize, tickSizeRatio: this.state.tickSizeRatio, value: value, vertical: vertical })));
}
nearestHandleForValue(handles, getOffset) {
return (0, sliderUtils_1.argMin)(handles, handle => {
const offset = getOffset(handle);
const offsetValue = handle.clientToValue(offset);
const handleValue = handle.props.value;
return Math.abs(offsetValue - handleValue);
});
}
getNewHandleValues(newValue, oldIndex) {
const handleProps = getSortedInteractiveHandleProps(this.props);
const oldValues = handleProps.map(handle => handle.value);
const newValues = oldValues.slice();
newValues[oldIndex] = newValue;
newValues.sort((left, right) => left - right);
const newIndex = newValues.indexOf(newValue);
const lockIndex = this.findFirstLockedHandleIndex(oldIndex, newIndex);
if (lockIndex === -1) {
(0, sliderUtils_1.fillValues)(newValues, oldIndex, newIndex, newValue);
}
else {
// If pushing past a locked handle, discard the new value and only make the updates to clamp values against the lock.
const lockValue = oldValues[lockIndex];
(0, sliderUtils_1.fillValues)(oldValues, oldIndex, lockIndex, lockValue);
return oldValues;
}
return newValues;
}
findFirstLockedHandleIndex(startIndex, endIndex) {
const inc = startIndex < endIndex ? 1 : -1;
const handleProps = getSortedInteractiveHandleProps(this.props);
for (let index = startIndex + inc; index !== endIndex + inc; index += inc) {
if (handleProps[index].interactionKind !== handleProps_1.HandleInteractionKind.PUSH) {
return index;
}
}
return -1;
}
getLabelValues() {
const { labelStepSize, labelValues, min, max } = this.props;
let values = [];
if (labelValues !== undefined) {
values = labelValues.slice();
}
else {
for (let i = min; i < max || common_1.Utils.approxEqual(i, max); i += labelStepSize !== null && labelStepSize !== void 0 ? labelStepSize : 1) {
values.push(i);
}
}
return values;
}
getOffsetRatio(value) {
return common_1.Utils.clamp((value - this.props.min) * this.state.tickSizeRatio, 0, 1);
}
getTrackIntent(start, end) {
if (!this.props.showTrackFill) {
return common_1.Intent.NONE;
}
if (start.intentAfter !== undefined) {
return start.intentAfter;
}
else if (end !== undefined && end.intentBefore !== undefined) {
return end.intentBefore;
}
return this.props.defaultTrackIntent;
}
updateTickSize() {
if (this.trackElement != null) {
const trackSize = this.props.vertical ? this.trackElement.clientHeight : this.trackElement.clientWidth;
const tickSizeRatio = 1 / (this.props.max - this.props.min);
const tickSize = trackSize * tickSizeRatio;
this.setState({ tickSize, tickSizeRatio });
}
}
}
exports.MultiSlider = MultiSlider;
MultiSlider.defaultSliderProps = {
disabled: false,
max: 10,
min: 0,
showTrackFill: true,
stepSize: 1,
vertical: false,
};
MultiSlider.defaultProps = {
...MultiSlider.defaultSliderProps,
defaultTrackIntent: common_1.Intent.NONE,
};
MultiSlider.displayName = `${common_1.DISPLAYNAME_PREFIX}.MultiSlider`;
/** @deprecated Use `MultiSliderHandle` instead */
MultiSlider.Handle = exports.MultiSliderHandle;
function getLabelPrecision({ labelPrecision, stepSize = MultiSlider.defaultSliderProps.stepSize }) {
// infer default label precision from stepSize because that's how much the handle moves.
return labelPrecision == null ? common_1.Utils.countDecimalPlaces(stepSize) : labelPrecision;
}
function getSortedInteractiveHandleProps(props) {
return getSortedHandleProps(props, childProps => childProps.interactionKind !== handleProps_1.HandleInteractionKind.NONE);
}
function getSortedHandleProps({ children }, predicate = () => true) {
const maybeHandles = React.Children.map(children, child => common_1.Utils.isElementOfType(child, exports.MultiSliderHandle) && predicate(child.props) ? child.props : null);
let handles = maybeHandles != null ? maybeHandles : [];
handles = handles.filter(handle => handle !== null);
handles.sort((left, right) => left.value - right.value);
return handles;
}
//# sourceMappingURL=multiSlider.js.map