@hitachivantara/uikit-react-core/dist/Slider/utils.js

UI Kit Core React components.

import { sliderStyles } from "./Slider.styles.js";
import { theme } from "@hitachivantara/uikit-styles";
//#region src/Slider/utils.ts
/**
* Transform the scaled values into knobs positions.
*
* @param {*} sliderValue - he value of the slider to be scaled
* @param {*} minPointVlue - The value of the first point in the slider from left to right.
* @param {*} stepVlue - The calculated separation between the values of the slider.
*/
var knobsPositionToScaledValue = (sliderValue, minPointValue, stepValue) => minPointValue + stepValue * sliderValue;
/**
* Transform the scaled values into knobs positions.
*
* @param {*} scaledValue - The value of the slider to be scaled
* @param {*} minPointValue - The value of the first point in
* the slider from left to right.
* @param {*} inverseStepValue - The inverse of calculated separation between
* the value of the points that compose the slider.
*/
var scaledValueToKnobsPositionValue = (scaledValue, minPointValue, inverseStepValue) => typeof scaledValue === "number" ? Math.floor((scaledValue - minPointValue) * inverseStepValue) : NaN;
/**
* Transform the received knobs values into knob positions
*
* @param {Object} values - The values of the slider.
* @param {Number} inverseStepValue - The inverse of calculated separation between
* the value of the points that compose the slider.
* @param {Integer} minPointValue - The value of the first point in the slider from
* left to right.
* @returns {Array} - The position of the knobs.
*/
var knobsValuesToKnobsPositions = (values, inverseStepValue, minPointValue) => {
	const knobsPositions = [];
	values.forEach((value, index) => {
		knobsPositions[index] = scaledValueToKnobsPositionValue(value, minPointValue, inverseStepValue);
	});
	return knobsPositions;
};
/**
* Transform the received knobs positions into knob values
*
* @param {Object} knobPositions - The values of the slider.
* @param {Number} stepValue - The calculated separation between
* the value of the points that compose the slider.
* @param {Integer} minPointValue - The value of the first point in the slider from
* left to right.
* @returns {Array} - The position of the knobs.
*/
var knobsPositionsToKnobsValues = (knobPositions, stepValue, minPointValue) => {
	const knobsValues = [];
	knobPositions.forEach((value, index) => {
		knobsValues[index] = knobsPositionToScaledValue(value, minPointValue, stepValue);
	});
	return knobsValues;
};
/**
* Calculates the separation between each value in the slider.
*
* @param {*} maxPointValue - The value of the last point in the slider from left to right.
* @param {*} minPointValue - The value of the first point in the slider from left to right.
* @param {*} divisionQuantity - How many subdivisions there are in the slider.
*/
var calculateStepValue = (maxPointValue, minPointValue, divisionQuantity) => Math.abs(maxPointValue - minPointValue) / divisionQuantity;
/**
* Generates the inline styles used for the track of each knob, applying colors if necessary.
*
* @param {Object} markProperties - The object provided by the user with
* the desired configuration for the marks.
* @param {Integer} markStep - The separation between marks.
* @param {Integer} divisionQuantity - How many subdivisions there are in the slider.
* @param {Integer} minPointValue - The value of the first point in the slider from
* left to right.
* @param {Integer} stepValue - The calculated separation between the values of the slider.
* @param {Integer} markDigits - How many decimals the mark will show.
* @param {Function} formatMark - A function provided by the user that is going to
* be executed to format the mark text.
* @param {Object} styles - the default styles for the marks.
* @returns {Object} - An object with the for the marks.
* @memberof HvSlider
*/
var createMark = (markProperties, markStep, divisionQuantity, minPointValue, maxPointValue, stepValue, markDigits, disabled, formatMark = (mark) => mark) => {
	const marks = {};
	const values = [];
	if (markProperties.length > 0) markProperties.forEach((markProperty) => {
		if (typeof markProperty.position === "number") marks[markProperty.position] = disabled ? {
			label: `${markProperty.label}`,
			style: { ...sliderStyles.disabledMark }
		} : {
			label: `${markProperty.label}`,
			style: { ...sliderStyles.mark }
		};
	});
	else {
		const roundedMarkStep = Math.max(1, Math.floor(markStep));
		for (let index = 0; index <= divisionQuantity; index += roundedMarkStep) {
			let labelValue = knobsPositionToScaledValue(index, minPointValue, stepValue).toFixed(Math.max(0, Math.min(8, markDigits)));
			values.push(labelValue);
			labelValue = formatMark?.(labelValue) || labelValue;
			marks[index] = disabled ? {
				label: `${labelValue}`,
				style: { ...sliderStyles.disabledMark }
			} : {
				label: `${labelValue}`,
				style: { ...sliderStyles.mark }
			};
		}
		if (!values.includes(maxPointValue.toString())) {
			const lastMarkPosition = knobsValuesToKnobsPositions([maxPointValue], 1 / stepValue, minPointValue);
			const lastMarkLabel = formatMark?.(maxPointValue.toFixed(markDigits));
			marks[lastMarkPosition[0]] = disabled ? {
				label: `${lastMarkLabel}`,
				style: { ...sliderStyles.disabledMark }
			} : {
				label: `${lastMarkLabel}`,
				style: { ...sliderStyles.mark }
			};
		}
	}
	return marks;
};
/**
* Generates the inline styles used for the track of each knob, applying colors if necessary.
*
* @param {Object} knobProperties - The object provided by the user with
* the desired configuration for the knobs.
* @param {Object} styles - the default styles for the tracks.
* @returns {Object} - An object with the style for each track.
* @memberof HvSlider
*/
var createTrackStyles = (knobProperties) => {
	const trackStyles = [];
	if (knobProperties.length > 0) knobProperties.forEach((knobProperty, index) => {
		trackStyles[index] = { ...sliderStyles.track };
		if (knobProperty.color) trackStyles[index].backgroundColor = knobProperty.trackColor;
	});
	return trackStyles;
};
/**
* Generates the inline styles used for each knob, applying colors if specified.
*
* @param {Object} knobProperties - The object provided by the user with
* the desired configuration for the knobs.
* @param {Object} styles - the default styles for the knobs.
* @returns {Object} - An object with both the inner and outer styles for the knob.
* @memberof HvSlider
*/
var createKnobStyles = (knobProperties) => {
	const knobInner = [];
	const knobOuterStyle = [];
	const lastItem = knobProperties.length - 1;
	if (knobProperties.length > 0) knobProperties.forEach((knobProperty, index) => {
		knobInner[index] = { ...sliderStyles.knobInner };
		knobOuterStyle[index] = { ...sliderStyles.knobOuter };
		if (knobProperty.color) {
			knobInner[index].backgroundColor = knobProperty.color;
			knobOuterStyle[index].backgroundColor = "transparent";
		}
		if (knobProperty.hidden) {
			knobInner[index] = sliderStyles.knobHidden;
			if (index === lastItem) {
				knobInner[index] = { ...sliderStyles.knobHiddenLast };
				knobInner[index].backgroundColor = knobProperty.color;
				knobOuterStyle[index] = { ...sliderStyles.knobHidden };
				knobOuterStyle[index].backgroundColor = knobProperty.color;
			}
		}
	});
	return {
		knobInner,
		knobOuterStyle
	};
};
/**
* Analyzes both the values and the default values to determine whether the slider is working in single mode.
*
* @param {Array} values - the values where the knobs are positioned when controlled.
* @param {Array} defaultValues - the values where the knobs start when uncontrolled.
* @returns {Boolean} - if true the slider should work as single slider
*/
var isSingleSlider = (values, defaultValues) => {
	if (!(values?.length > 1)) return defaultValues.length === 1;
	return values.length === 1;
};
/**
* Generates the default knob styles for each knob
*
* @param {Object} knobProperties - The object provided by the user with
* the desired configuration for the knobs.
* @param {Integer} numberOfKnobs - the default styles for the knobs.
* @param {Object} theme - The theme to extract the colors.
*
* @returns {Object} - An object with both the inner and outer styles for the knob.
* @memberof HvSlider
*/
var generateDefaultKnobProperties = (numberOfKnobs = 1, disabled = false, knobPropertiesProp) => {
	let knobProperties = knobPropertiesProp || [];
	const defaultKnobStyles = {
		color: theme.colors.text,
		hoverColor: theme.colors.text,
		trackColor: theme.colors.text,
		dragColor: theme.colors.text,
		knobRingColor: theme.colors.textDimmed
	};
	const disabledKnobStyles = {
		color: theme.colors.textDisabled,
		hoverColor: theme.colors.textDisabled,
		trackColor: theme.colors.textDisabled,
		dragColor: theme.colors.textDisabled,
		knobRingColor: theme.colors.textDisabled
	};
	if (knobProperties.length > 0) {
		knobProperties = knobProperties.slice(0, numberOfKnobs);
		knobProperties = knobProperties.map((knobProperty) => {
			if (!disabled) return {
				...disabledKnobStyles,
				...knobProperty
			};
			return {
				...defaultKnobStyles,
				...knobProperty
			};
		});
	} else for (let i = 0; i < numberOfKnobs; i += 1) {
		if (!disabled) knobProperties.push(defaultKnobStyles);
		if (disabled) knobProperties.push(disabledKnobStyles);
	}
	return knobProperties;
};
var pushSlider = (index, inputIndex, inputValue) => {
	return inputValue + (index - inputIndex);
};
var ensureValuesConsistency = (knobPositions, inputIndex) => {
	const newKnobsPosition = [...knobPositions];
	newKnobsPosition.forEach((value, index) => {
		if (Number.isNaN(value) || value == null) newKnobsPosition[index] = pushSlider(index, inputIndex, newKnobsPosition[inputIndex]);
		else if (index < inputIndex && value > newKnobsPosition[inputIndex]) newKnobsPosition[index] = pushSlider(index, inputIndex, newKnobsPosition[inputIndex]);
		else if (index > inputIndex && value < newKnobsPosition[inputIndex]) newKnobsPosition[index] = pushSlider(index, inputIndex, newKnobsPosition[inputIndex]);
	});
	return newKnobsPosition;
};
var convertStatusToArray = (length, status) => {
	const result = { arrayDefaultStatus: Array.from({ length }, () => "standBy") };
	if (status == null) return result;
	if (!Array.isArray(status)) {
		result.arrayStatus = Array.from({ length }, () => status);
		return result;
	}
	result.arrayStatus = status;
	return result;
};
var statusArrayToFormStatus = (arrayStatus) => {
	if (arrayStatus.some((status) => status === "invalid")) return "invalid";
	if (arrayStatus.some((status) => status === "valid")) return "valid";
	return "standBy";
};
var knobsValuesToString = (knobsValues, markDigits) => knobsValues.map((knobValue) => Number.isNaN(knobValue) ? "" : knobValue.toFixed(markDigits));
var stringValuesToKnobs = (inputsValues) => inputsValues.map((inputValue) => Number.parseFloat(inputValue));
//#endregion
export { calculateStepValue, convertStatusToArray, createKnobStyles, createMark, createTrackStyles, ensureValuesConsistency, generateDefaultKnobProperties, isSingleSlider, knobsPositionToScaledValue, knobsPositionsToKnobsValues, knobsValuesToKnobsPositions, knobsValuesToString, scaledValueToKnobsPositionValue, statusArrayToFormStatus, stringValuesToKnobs };