@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
252 lines • 10.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.calcDefaultValue = exports.equalsRangeValues = exports.shouldUpdateRightThumb = exports.shouldUpdateLeftThumb = exports.getOffset = exports.getScale = exports.calcNewRangeValue = exports.calcScaleValue = exports.calcScaleValueWithoutStepOffset = exports.calcScaleValueWithStepOffset = exports.calcValueByOffset = exports.calculateChange = void 0;
const translateValue_1 = require("../../../utils/translateValue/translateValue");
const type_1 = require("../types/type");
const calculateChange = ({ event, container, offsetBoundaries, }) => {
event.preventDefault();
const containerWidth = container.clientWidth;
const x = typeof event?.pageX === 'number'
? event.pageX
: event.touches[0].pageX;
const currentX = container.getBoundingClientRect().left + window.scrollX;
const left = x - currentX;
let offset = (left * 100) / containerWidth;
offset = Math.min(offsetBoundaries.max, Math.max(offsetBoundaries.min, offset));
return offset;
};
exports.calculateChange = calculateChange;
/**
* Given the offset of the slider, calculate the value
* @param max
* @param min
* @param step
* @param offset
* @returns
*/
const calcValueByOffset = ({ max, min, step, offset, offsetBoundaries, }) => {
let value = (0, translateValue_1.translateValue)({
inputMin: offsetBoundaries.min,
inputMax: offsetBoundaries.max,
outputMin: min,
outputMax: max,
value: offset,
});
// Number of decimals
const decimals = String(step).indexOf('.') > 0 ? String(step).split('.')[1].length : 0;
if (decimals > 0) {
const pow = Math.pow(10, decimals);
value = Math.round(value * pow) / pow;
}
else {
value = Math.round(value);
}
return value;
};
exports.calcValueByOffset = calcValueByOffset;
/**
* Calculates the closest valid value based on the given parameters.
* @param max - The maximum value allowed.
* @param min - The minimum value allowed.
* @param step - The step size between values.
* @param initialStepOffset - The initial offset for the step.
* @param value - The value to calculate the closest valid value for.
* @returns The closest valid value based on the given parameters.
*/
const calcScaleValueWithStepOffset = ({ max, min, step, initialStepOffset, value, }) => {
// Calculate the first step after initialStepOffset that is greater than or equal to min
const firstValidStep = initialStepOffset + Math.ceil((min - initialStepOffset) / step) * step;
if (firstValidStep > max) {
return value; // If the first valid step is beyond max, return the original value
}
const stepsFromFirstValid = Math.round((value - firstValidStep) / step);
let closestValue = firstValidStep + stepsFromFirstValid * step;
// Ensure the closest value is within bounds
closestValue = Math.max(min, closestValue);
closestValue = Math.min(max, closestValue);
// Include min and max as valid steps explicitly
if (Math.abs(min - value) < Math.abs(closestValue - value)) {
closestValue = min;
}
if (Math.abs(max - value) < Math.abs(closestValue - value)) {
closestValue = max;
}
return closestValue;
};
exports.calcScaleValueWithStepOffset = calcScaleValueWithStepOffset;
/**
* Calculates the scale value without considering the step offset.
* @param {object} options - The options object.
* @param {number} options.max - The maximum value of the scale.
* @param {number} options.min - The minimum value of the scale.
* @param {number} options.step - The step value of the scale.
* @param {number} options.value - The current value of the scale.
* @returns {number} - The calculated scale value without step offset.
*/
const calcScaleValueWithoutStepOffset = ({ max, min, step, value, }) => {
value -= min;
let halfScaleLength = step / 2;
if ((max - min) % step > 0 && value / step > Math.floor((max - min) / step)) {
halfScaleLength = ((max - min) % step) / 2;
}
if (value % step > halfScaleLength) {
const upValue = min + Math.ceil(value / step) * step;
return upValue > max ? max : upValue;
}
return min + Math.floor(value / step) * step;
};
exports.calcScaleValueWithoutStepOffset = calcScaleValueWithoutStepOffset;
/**
* Calculates the scaled value based on the given parameters.
* If `initialStepOffset` is provided, it uses `calcScaleValueWithStepOffset` function,
* otherwise it uses `calcScaleValueWithoutStepOffset` function.
* Setting initialStepOffset will change the available steps to be from initialStepOffset to max.
* Without initialStepOffset, min=1, step=5 -> [1, 6, 11, 16, ...]
* With initialStepOffset=0, min=1, step=5 -> [1, 5, 10, 15, ...]
* @param max - The maximum value of the scale.
* @param min - The minimum value of the scale.
* @param step - The step size of the scale.
* @param initialStepOffset - The initial step offset (optional).
* @param value - The value to be scaled.
* @returns The scaled value.
*/
const calcScaleValue = ({ max, min, step, initialStepOffset, value, }) => {
if (step <= 0) {
return value;
}
if (initialStepOffset !== undefined) {
return (0, exports.calcScaleValueWithStepOffset)({ max, min, step, initialStepOffset, value });
}
return (0, exports.calcScaleValueWithoutStepOffset)({ max, min, step, value });
};
exports.calcScaleValue = calcScaleValue;
const calcNewRangeValue = ({ prevValue, newValue, activePointer, }) => {
if ((0, exports.shouldUpdateLeftThumb)({ activePointer: activePointer.current, newValue, prevValue })) {
if (activePointer.current === 'right') {
activePointer.current = 'left';
}
return [newValue, prevValue[1]];
}
else if ((0, exports.shouldUpdateRightThumb)({ activePointer: activePointer.current, newValue, prevValue })) {
if (activePointer.current === 'left') {
activePointer.current = 'right';
}
return [prevValue[0], newValue];
}
return prevValue;
};
exports.calcNewRangeValue = calcNewRangeValue;
const getScale = ({ type, max, min, step, initialStepOffset, }) => {
const showScale = type === type_1.SliderType.DISCRETE && step > 0 && step < max - min;
let scaleOffsets = [];
if (showScale) {
const steps = [min];
for (let i = initialStepOffset ?? min; i < max; i += step) {
if (i > min) {
steps.push(i);
}
}
steps.push(max);
scaleOffsets = steps.map(stepValue => (0, translateValue_1.translateValue)({
inputMin: min,
inputMax: max,
outputMin: 0,
outputMax: 100,
value: stepValue,
}));
}
return { showScale, scaleOffsets };
};
exports.getScale = getScale;
const getOffset = ({ range, max, min, value, offsetBoundaries, }) => {
let offset, offsetLeft, offsetRight;
if (range) {
offsetLeft = (0, translateValue_1.translateValue)({
inputMin: min,
inputMax: max,
outputMin: offsetBoundaries.min,
outputMax: offsetBoundaries.max,
value: value[0],
});
offsetRight =
100.0 -
(0, translateValue_1.translateValue)({
inputMin: min,
inputMax: max,
outputMin: offsetBoundaries.min,
outputMax: offsetBoundaries.max,
value: value[1],
});
}
else {
offset = (0, translateValue_1.translateValue)({
inputMin: min,
inputMax: max,
outputMin: offsetBoundaries.min,
outputMax: offsetBoundaries.max,
value: value,
});
}
return { offset, offsetLeft, offsetRight };
};
exports.getOffset = getOffset;
const shouldUpdateLeftThumb = ({ activePointer, newValue, prevValue, }) => {
return (activePointer === 'left' && newValue < prevValue[1]) || newValue <= prevValue[0];
};
exports.shouldUpdateLeftThumb = shouldUpdateLeftThumb;
const shouldUpdateRightThumb = ({ activePointer, newValue, prevValue, }) => {
return (activePointer === 'right' && newValue > prevValue[0]) || newValue >= prevValue[1];
};
exports.shouldUpdateRightThumb = shouldUpdateRightThumb;
const equalsRangeValues = ({ values1, values2, }) => {
if (!Array.isArray(values1) ||
!Array.isArray(values2) ||
values1.length !== 2 ||
values2.length !== 2) {
return false;
}
return values1[0] === values2[0] && values1[1] === values2[1];
};
exports.equalsRangeValues = equalsRangeValues;
const isAllowValue = ({ max, min, value, }) => {
return value !== undefined && value >= min && value <= max;
};
const allowValueOrDefault = ({ max, min, value, defaultValue, }) => {
return isAllowValue({ max, min, value }) ? value : defaultValue;
};
const isValidRangeValue = ({ value }) => {
return Boolean(value && Array.isArray(value) && value.length === 2);
};
const calcDefaultValue = ({ range, max, min, step, initialStepOffset, value, }) => {
// range
if (range) {
let values = [min, max];
if (isValidRangeValue({ value })) {
const value1 = value[0];
const value2 = value[1];
const value1ToScale = allowValueOrDefault({ max, min, value: value1, defaultValue: min });
const value2ToScale = allowValueOrDefault({ max, min, value: value2, defaultValue: max });
const scaledValue1 = (0, exports.calcScaleValue)({
max,
min,
step,
initialStepOffset,
value: value1ToScale,
});
const scaledValue2 = (0, exports.calcScaleValue)({
max,
min,
step,
initialStepOffset,
value: value2ToScale,
});
values = [scaledValue1, scaledValue2];
}
return values;
}
// not range
const valueToScale = allowValueOrDefault({ max, min, value: value, defaultValue: min });
return (0, exports.calcScaleValue)({ max, min, step, initialStepOffset, value: valueToScale });
};
exports.calcDefaultValue = calcDefaultValue;
//# sourceMappingURL=slider.utils.js.map