@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
204 lines (203 loc) • 6.73 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SliderContext = void 0;
exports.SliderProvider = SliderProvider;
var _react = _interopRequireDefault(require("react"));
var _filterValidProps = require("../../shared/helpers/filterValidProps.js");
var _componentHelper = require("../../shared/component-helper.js");
var _Context = _interopRequireDefault(require("../../shared/Context.js"));
var _SliderHelpers = require("./SliderHelpers.js");
var _withSnakeCaseProps = require("../../shared/helpers/withSnakeCaseProps.js");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const defaultProps = {
statusState: 'error',
min: 0,
max: 100,
value: -1,
multiThumbBehavior: 'swap'
};
const SliderContext = exports.SliderContext = _react.default.createContext(null);
function SliderProvider(localProps) {
const context = _react.default.useContext(_Context.default);
const allProps = (0, _withSnakeCaseProps.convertSnakeCaseProps)((0, _componentHelper.extendPropsWithContext)(localProps, defaultProps, {
skeleton: context === null || context === void 0 ? void 0 : context.skeleton
}, context === null || context === void 0 ? void 0 : context.getTranslation(localProps).Slider, (0, _filterValidProps.pickFormElementProps)(context === null || context === void 0 ? void 0 : context.FormRow, {
vertical: null
}), (0, _filterValidProps.pickFormElementProps)(context === null || context === void 0 ? void 0 : context.formElement, {
vertical: null
}), context === null || context === void 0 ? void 0 : context.Slider));
const [_id] = _react.default.useState(_componentHelper.makeUniqueId);
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] = _react.default.useState(_value);
const [externValue, updateExternValue] = _react.default.useState(_value);
const realtimeValue = _react.default.useRef(_value);
const [thumbState, setThumbState] = _react.default.useState('initial');
const thumbIndex = _react.default.useRef(-1);
const [shouldAnimate, updateAnimateState] = _react.default.useState(false);
const [isVertical] = _react.default.useState((0, _componentHelper.isTrue)(_vertical));
const [isReverse] = _react.default.useState(isVertical ? !(0, _componentHelper.isTrue)(_reverse) : (0, _componentHelper.isTrue)(_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 || (0, _componentHelper.isTrue)(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);
}
};
_react.default.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 = _react.default.useRef();
const animationTimeout = _react.default.useRef();
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 && !(0, _componentHelper.isTrue)(hideButtons);
const values = isMulti ? value : [value];
return _react.default.createElement(SliderContext.Provider, {
value: {
isMulti,
isReverse,
isVertical,
shouldAnimate,
value,
values,
setValue,
attributes,
showStatus,
showButtons,
thumbState,
setThumbState,
thumbIndex,
setThumbIndex,
emitChange,
allProps,
trackRef,
setShouldAnimate,
animationTimeout
}
}, localProps.children);
}
//# sourceMappingURL=SliderProvider.js.map