@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
173 lines (172 loc) • 7.16 kB
JavaScript
"use strict";
"use client";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SliderInstance = SliderInstance;
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _componentHelper = require("../../shared/component-helper.js");
var _AlignmentHelper2 = _interopRequireDefault(require("../../shared/AlignmentHelper.js"));
var _SpacingHelper = require("../space/SpacingHelper.js");
var _SkeletonHelper = require("../skeleton/SkeletonHelper.js");
var _Context = _interopRequireDefault(require("../../shared/Context.js"));
var _Suffix = _interopRequireDefault(require("../../shared/helpers/Suffix.js"));
var _Button = _interopRequireDefault(require("../button/Button.js"));
var _FormLabel = _interopRequireDefault(require("../form-label/FormLabel.js"));
var _FormStatus = _interopRequireDefault(require("../form-status/FormStatus.js"));
var _SliderTrack = require("./SliderTrack.js");
var _SliderThumb2 = require("./SliderThumb.js");
var _useSliderProps = require("./hooks/useSliderProps.js");
var _SliderHelpers = require("./SliderHelpers.js");
var _SubtractButton, _AddButton, _AlignmentHelper, _SliderThumb, _SliderTrackBefore, _SliderTrackAfter, _SliderSuffix;
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function SliderInstance() {
const context = _react.default.useContext(_Context.default);
const {
isReverse,
isVertical,
showButtons,
showStatus,
shouldAnimate,
allProps
} = (0, _useSliderProps.useSliderProps)();
const {
id,
label,
labelSrOnly,
labelDirection,
status,
statusProps,
statusState,
statusNoAnimation,
globalStatus,
stretch,
skeleton,
disabled,
className,
extensions
} = allProps;
const mainParams = {
className: (0, _classnames.default)("dnb-slider dnb-form-component", (0, _SkeletonHelper.createSkeletonClass)(null, skeleton), (0, _SpacingHelper.createSpacingClasses)(allProps), className, isVertical && 'dnb-slider--vertical', disabled && 'dnb-slider__state--disabled', shouldAnimate && 'dnb-slider__state--animate', !showButtons && 'dnb-slider--no-buttons', (0, _componentHelper.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.default.createElement(SubtractButton, null)) : null;
const addButton = showButtons ? _AddButton || (_AddButton = _react.default.createElement(AddButton, null)) : null;
(0, _SkeletonHelper.skeletonDOMAttributes)(mainParams, skeleton, context);
return _react.default.createElement("span", mainParams, label && _react.default.createElement(_FormLabel.default, {
forId: `${id}-thumb-0`,
id: id + '-label',
text: label,
disabled: disabled,
skeleton: skeleton,
labelDirection: labelDirection,
srOnly: labelSrOnly
}), _react.default.createElement("span", {
className: "dnb-slider__wrapper"
}, _AlignmentHelper || (_AlignmentHelper = _react.default.createElement(_AlignmentHelper2.default, null)), _react.default.createElement(_FormStatus.default, _extends({
show: showStatus,
id: id + '-form-status',
globalStatus: globalStatus,
text_id: id + '-status',
text: status,
state: statusState,
no_animation: statusNoAnimation,
skeleton: skeleton
}, statusProps)), _react.default.createElement("span", {
className: "dnb-slider__inner"
}, showButtons && (isReverse ? addButton : subtractButton), _react.default.createElement(_SliderTrack.SliderMainTrack, null, extensions && Object.entries(extensions).map(([key, {
instance,
...options
}]) => {
const Element = instance;
return _react.default.createElement(Element, _extends({
key: key
}, options));
}), _SliderThumb || (_SliderThumb = _react.default.createElement(_SliderThumb2.SliderThumb, null)), _SliderTrackBefore || (_SliderTrackBefore = _react.default.createElement(_SliderTrack.SliderTrackBefore, null)), _SliderTrackAfter || (_SliderTrackAfter = _react.default.createElement(_SliderTrack.SliderTrackAfter, null))), showButtons && (isReverse ? subtractButton : addButton), _SliderSuffix || (_SliderSuffix = _react.default.createElement(SliderSuffix, null)))));
}
function SliderSuffix() {
const {
allProps
} = (0, _useSliderProps.useSliderProps)();
const {
id,
suffix
} = allProps;
return suffix ? _react.default.createElement(_Suffix.default, {
className: "dnb-slider__suffix",
id: id + '-suffix',
context: allProps
}, suffix) : null;
}
function SubtractButton() {
const {
emitChange,
value,
attributes,
allProps
} = (0, _useSliderProps.useSliderProps)();
const {
step,
min,
max,
disabled,
skeleton,
subtractTitle,
numberFormat
} = allProps;
const onSubtractClickHandler = event => {
emitChange(event, (0, _SliderHelpers.clamp)(value - (step || 1), min, max));
};
const subtractParams = {};
if (typeof attributes['aria-hidden'] !== 'undefined') {
subtractParams['aria-hidden'] = attributes['aria-hidden'];
}
const humanNumber = (0, _SliderHelpers.getFormattedNumber)(value, numberFormat);
return _react.default.createElement(_Button.default, _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
} = (0, _useSliderProps.useSliderProps)();
const {
step,
min,
max,
disabled,
skeleton,
addTitle,
numberFormat
} = allProps;
const onAddClickHandler = event => {
emitChange(event, (0, _SliderHelpers.clamp)(value + (step || 1), min, max));
};
const addParams = {};
if (typeof attributes['aria-hidden'] !== 'undefined') {
addParams['aria-hidden'] = attributes['aria-hidden'];
}
const humanNumber = (0, _SliderHelpers.getFormattedNumber)(value, numberFormat);
return _react.default.createElement(_Button.default, _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