@dnb/eufemia/cjs/components/slider/SliderProvider.js

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SliderContext = void 0;
exports.SliderProvider = SliderProvider;
var _react = require("react");
var _filterValidProps = require("../../shared/helpers/filterValidProps.js");
var _componentHelper = require("../../shared/component-helper.js");
var _useId = _interopRequireDefault(require("../../shared/helpers/useId.js"));
var _Context = _interopRequireDefault(require("../../shared/Context.js"));
var _SliderHelpers = require("./SliderHelpers.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const defaultProps = {
  statusState: 'error',
  min: 0,
  max: 100,
  value: -1,
  multiThumbBehavior: 'swap',
  labelDirection: 'vertical'
};
const SliderContext = exports.SliderContext = (0, _react.createContext)(null);
function SliderProvider(localProps) {
  const context = (0, _react.useContext)(_Context.default);
  const allProps = (0, _componentHelper.extendPropsWithContext)(localProps, defaultProps, {
    skeleton: context === null || context === void 0 ? void 0 : context.skeleton
  }, (0, _filterValidProps.pickFormElementProps)(context === null || context === void 0 ? void 0 : context.formElement), context === null || context === void 0 ? void 0 : context.getTranslation(localProps).Slider, context === null || context === void 0 ? void 0 : context.Slider);
  const _id = (0, _useId.default)(allProps.id);
  if (!allProps.id) {
    allProps.id = _id;
  }
  const {
    step,
    label,
    labelDirection,
    labelSrOnly,
    status,
    statusState,
    statusProps,
    statusNoAnimation,
    globalStatus,
    stretch,
    suffix,
    thumbTitle: title,
    subtractTitle,
    addTitle,
    hideButtons,
    multiThumbBehavior,
    numberFormat,
    tooltip,
    alwaysShowTooltip,
    skeleton,
    max,
    min,
    extensions,
    disabled,
    className,
    id,
    onChange,
    onDragStart,
    onDragEnd,
    vertical: _vertical,
    reverse: _reverse,
    value: _value,
    children: _children,
    ...attributes
  } = allProps;
  const [value, setValue] = (0, _react.useState)(_value);
  const [externValue, updateExternValue] = (0, _react.useState)(_value);
  const realtimeValue = (0, _react.useRef)(_value);
  const [thumbState, setThumbState] = (0, _react.useState)('initial');
  const thumbIndex = (0, _react.useRef)(-1);
  const [shouldAnimate, updateAnimateState] = (0, _react.useState)(false);
  const [isVertical] = (0, _react.useState)(_vertical);
  const [isReverse] = (0, _react.useState)(isVertical ? !_reverse : _reverse);
  const isMulti = Array.isArray(value);
  const setThumbIndex = index => {
    if (!isNaN(index)) {
      thumbIndex.current = index;
    }
  };
  const getAndUpdateCurrentIndex = currentValue => {
    let currentIndex = null;
    if (thumbIndex.current > -1) {
      currentIndex = thumbIndex.current;
    } else {
      currentIndex = (0, _SliderHelpers.closestIndex)(currentValue, value);
      setThumbIndex(currentIndex);
    }
    return currentIndex;
  };
  const updateValue = value => {
    setValue(value);
    realtimeValue.current = value;
  };
  const emitChange = (event, rawValue) => {
    if (disabled || skeleton) {
      return;
    }
    let numberValue = (0, _SliderHelpers.roundValue)(rawValue, {
      step,
      min,
      max
    });
    let multiValues = numberValue;
    if (numberValue >= min) {
      if (isMulti) {
        const currentIndex = getAndUpdateCurrentIndex(numberValue);
        const lower = realtimeValue.current[currentIndex - 1];
        const upper = realtimeValue.current[currentIndex + 1];
        if (multiThumbBehavior === 'omit') {
          if (numberValue < lower) {
            numberValue = lower;
          }
          if (numberValue > upper) {
            numberValue = upper;
          }
        }
        multiValues = (0, _SliderHelpers.getUpdatedValues)(multiThumbBehavior === 'push' ? realtimeValue.current : value, currentIndex, numberValue);
        if (multiThumbBehavior === 'push') {
          if (typeof lower !== 'undefined' && numberValue < lower) {
            multiValues[currentIndex - 1] = numberValue;
          }
          if (typeof upper !== 'undefined' && numberValue >= upper) {
            multiValues[currentIndex + 1] = numberValue;
          }
        }
        if (numberValue === realtimeValue.current[currentIndex]) {
          return;
        }
      } else if (numberValue === realtimeValue.current) {
        return;
      }
      if (typeof onChange === 'function') {
        const obj = {
          value: multiValues,
          rawValue,
          event,
          number: null
        };
        if (numberFormat) {
          obj.number = (0, _SliderHelpers.getFormattedNumber)(numberValue, numberFormat).number;
        }
        (0, _componentHelper.dispatchCustomElementEvent)(allProps, 'onChange', obj);
      }
      updateValue(multiValues);
    }
  };
  (0, _react.useEffect)(() => {
    if (isMulti) {
      const hasChanged = _value.some((val, i) => {
        return val !== externValue[i];
      });
      if (hasChanged) {
        updateValue(_value);
        updateExternValue(_value);
      }
    } else if (_value !== externValue) {
      updateValue(_value);
      updateExternValue(_value);
    }
  }, [_value, isMulti]);
  const trackRef = (0, _react.useRef)(undefined);
  const animationTimeout = (0, _react.useRef)(undefined);
  const setShouldAnimate = state => {
    updateAnimateState(state);
    clearTimeout(animationTimeout.current);
    if (state) {
      animationTimeout.current = setTimeout(() => updateAnimateState(false), 250);
    }
  };
  const showStatus = (0, _componentHelper.getStatusState)(status);
  const showButtons = !isMulti && !hideButtons;
  const values = isMulti ? value : [value];
  return (0, _jsxRuntime.jsx)(SliderContext, {
    value: {
      isMulti,
      isReverse,
      isVertical,
      shouldAnimate,
      value,
      values,
      setValue,
      attributes,
      showStatus,
      showButtons,
      thumbState,
      setThumbState,
      thumbIndex,
      setThumbIndex,
      emitChange,
      allProps,
      trackRef,
      setShouldAnimate,
      animationTimeout
    },
    children: localProps.children
  });
}
//# sourceMappingURL=SliderProvider.js.map