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

Core React components for the NEXT Design System.

import { theme } from "@hitachivantara/uikit-styles";
import { sliderStyles } from "./Slider.styles.js";
const knobsPositionToScaledValue = (sliderValue, minPointValue, stepValue) => minPointValue + stepValue * sliderValue;
const scaledValueToKnobsPositionValue = (scaledValue, minPointValue, inverseStepValue) => typeof scaledValue === "number" ? Math.floor((scaledValue - minPointValue) * inverseStepValue) : Number.NaN;
const knobsValuesToKnobsPositions = (values, inverseStepValue, minPointValue) => {
  const knobsPositions = [];
  values.forEach((value, index) => {
    knobsPositions[index] = scaledValueToKnobsPositionValue(
      value,
      minPointValue,
      inverseStepValue
    );
  });
  return knobsPositions;
};
const knobsPositionsToKnobsValues = (knobPositions, stepValue, minPointValue) => {
  const knobsValues = [];
  knobPositions.forEach((value, index) => {
    knobsValues[index] = knobsPositionToScaledValue(
      value,
      minPointValue,
      stepValue
    );
  });
  return knobsValues;
};
const calculateStepValue = (maxPointValue, minPointValue, divisionQuantity) => Math.abs(maxPointValue - minPointValue) / divisionQuantity;
const 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;
};
const 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;
};
const 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
  };
};
const isSingleSlider = (values, defaultValues) => {
  if (!(values?.length > 1)) {
    return defaultValues.length === 1;
  }
  return values.length === 1;
};
const 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;
};
const pushSlider = (index, inputIndex, inputValue) => {
  const difference = index - inputIndex;
  return inputValue + difference;
};
const 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;
};
const 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;
};
const statusArrayToFormStatus = (arrayStatus) => {
  const invalid = arrayStatus.some((status) => status === "invalid");
  if (invalid) return "invalid";
  const valid = arrayStatus.some((status) => status === "valid");
  if (valid) return "valid";
  return "standBy";
};
const knobsValuesToString = (knobsValues, markDigits) => knobsValues.map(
  (knobValue) => Number.isNaN(knobValue) ? "" : knobValue.toFixed(markDigits)
);
const stringValuesToKnobs = (inputsValues) => inputsValues.map((inputValue) => Number.parseFloat(inputValue));
export {
  calculateStepValue,
  convertStatusToArray,
  createKnobStyles,
  createMark,
  createTrackStyles,
  ensureValuesConsistency,
  generateDefaultKnobProperties,
  isSingleSlider,
  knobsPositionToScaledValue,
  knobsPositionsToKnobsValues,
  knobsValuesToKnobsPositions,
  knobsValuesToString,
  scaledValueToKnobsPositionValue,
  statusArrayToFormStatus,
  stringValuesToKnobs
};