@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
170 lines (169 loc) • 6.21 kB
JavaScript
"use client";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/esm/extends";
const _excluded = ["instance"];
var _SubtractButton, _AddButton, _AlignmentHelper, _SliderThumb, _SliderTrackBefore, _SliderTrackAfter, _SliderSuffix;
import React from 'react';
import classnames from 'classnames';
import { isTrue } from '../../shared/component-helper';
import AlignmentHelper from '../../shared/AlignmentHelper';
import { createSpacingClasses } from '../space/SpacingHelper';
import { createSkeletonClass, skeletonDOMAttributes } from '../skeleton/SkeletonHelper';
import Context from '../../shared/Context';
import Suffix from '../../shared/helpers/Suffix';
import Button from '../button/Button';
import FormLabel from '../form-label/FormLabel';
import FormStatus from '../form-status/FormStatus';
import { SliderMainTrack, SliderTrackBefore, SliderTrackAfter } from './SliderTrack';
import { SliderThumb } from './SliderThumb';
import { useSliderProps } from './hooks/useSliderProps';
import { clamp, getFormattedNumber } from './SliderHelpers';
export function SliderInstance() {
const context = React.useContext(Context);
const {
isReverse,
isVertical,
showButtons,
showStatus,
shouldAnimate,
allProps
} = useSliderProps();
const {
id,
label,
labelSrOnly,
labelDirection,
status,
statusProps,
statusState,
statusNoAnimation,
globalStatus,
stretch,
skeleton,
disabled,
className,
extensions
} = allProps;
const mainParams = {
className: classnames("dnb-slider dnb-form-component", createSkeletonClass(null, skeleton), createSpacingClasses(allProps), className, isVertical && 'dnb-slider--vertical', disabled && 'dnb-slider__state--disabled', shouldAnimate && 'dnb-slider__state--animate', !showButtons && 'dnb-slider--no-buttons', isTrue(stretch) && 'dnb-slider--stretch', label && labelDirection && `dnb-slider__label--${labelDirection}`, showStatus && 'dnb-slider__form-status', status && `dnb-slider__status--${statusState}`)
};
const subtractButton = showButtons ? _SubtractButton || (_SubtractButton = React.createElement(SubtractButton, null)) : null;
const addButton = showButtons ? _AddButton || (_AddButton = React.createElement(AddButton, null)) : null;
skeletonDOMAttributes(mainParams, skeleton, context);
return React.createElement("span", mainParams, label && React.createElement(FormLabel, {
forId: `${id}-thumb-0`,
id: id + '-label',
text: label,
disabled: disabled,
skeleton: skeleton,
labelDirection: labelDirection,
srOnly: labelSrOnly
}), React.createElement("span", {
className: "dnb-slider__wrapper"
}, _AlignmentHelper || (_AlignmentHelper = React.createElement(AlignmentHelper, null)), React.createElement(FormStatus, _extends({
show: showStatus,
id: id + '-form-status',
globalStatus: globalStatus,
text_id: id + '-status',
text: status,
state: statusState,
no_animation: statusNoAnimation,
skeleton: skeleton
}, statusProps)), React.createElement("span", {
className: "dnb-slider__inner"
}, showButtons && (isReverse ? addButton : subtractButton), React.createElement(SliderMainTrack, null, extensions && Object.entries(extensions).map(([key, _ref]) => {
let {
instance
} = _ref,
options = _objectWithoutProperties(_ref, _excluded);
const Element = instance;
return React.createElement(Element, _extends({
key: key
}, options));
}), _SliderThumb || (_SliderThumb = React.createElement(SliderThumb, null)), _SliderTrackBefore || (_SliderTrackBefore = React.createElement(SliderTrackBefore, null)), _SliderTrackAfter || (_SliderTrackAfter = React.createElement(SliderTrackAfter, null))), showButtons && (isReverse ? subtractButton : addButton), _SliderSuffix || (_SliderSuffix = React.createElement(SliderSuffix, null)))));
}
function SliderSuffix() {
const {
allProps
} = useSliderProps();
const {
id,
suffix
} = allProps;
return suffix ? React.createElement(Suffix, {
className: "dnb-slider__suffix",
id: id + '-suffix',
context: allProps
}, suffix) : null;
}
function SubtractButton() {
const {
emitChange,
value,
attributes,
allProps
} = useSliderProps();
const {
step,
min,
max,
disabled,
skeleton,
subtractTitle,
numberFormat
} = allProps;
const onSubtractClickHandler = event => {
emitChange(event, clamp(value - (step || 1), min, max));
};
const subtractParams = {};
if (typeof attributes['aria-hidden'] !== 'undefined') {
subtractParams['aria-hidden'] = attributes['aria-hidden'];
}
const humanNumber = getFormattedNumber(value, numberFormat);
return React.createElement(Button, _extends({
className: "dnb-slider__button dnb-slider__button--subtract",
variant: "secondary",
icon: "subtract",
size: "small",
"aria-label": subtractTitle === null || subtractTitle === void 0 ? void 0 : subtractTitle.replace('%s', humanNumber.aria || String(value)),
on_click: onSubtractClickHandler,
disabled: disabled,
skeleton: skeleton
}, subtractParams));
}
function AddButton() {
const {
emitChange,
value,
attributes,
allProps
} = useSliderProps();
const {
step,
min,
max,
disabled,
skeleton,
addTitle,
numberFormat
} = allProps;
const onAddClickHandler = event => {
emitChange(event, clamp(value + (step || 1), min, max));
};
const addParams = {};
if (typeof attributes['aria-hidden'] !== 'undefined') {
addParams['aria-hidden'] = attributes['aria-hidden'];
}
const humanNumber = getFormattedNumber(value, numberFormat);
return React.createElement(Button, _extends({
className: "dnb-slider__button dnb-slider__button--add",
variant: "secondary",
icon: "add",
size: "small",
"aria-label": addTitle === null || addTitle === void 0 ? void 0 : addTitle.replace('%s', humanNumber.aria || String(value)),
on_click: onAddClickHandler,
disabled: disabled,
skeleton: skeleton
}, addParams));
}
//# sourceMappingURL=SliderInstance.js.map