@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
951 lines (950 loc) • 38.1 kB
JavaScript
"use strict";
"use client";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _push = _interopRequireDefault(require("core-js-pure/stable/instance/push.js"));
var _react = _interopRequireDefault(require("react"));
var _Context = _interopRequireDefault(require("../../shared/Context.js"));
var _componentHelper = require("../../shared/component-helper.js");
var _helpers = require("../../shared/helpers.js");
var _DrawerListHelpers = require("./DrawerListHelpers.js");
var _DrawerListContext = _interopRequireDefault(require("./DrawerListContext.js"));
var _bodyScrollLock = require("../../components/modal/bodyScrollLock.js");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
class DrawerListProvider extends _react.default.PureComponent {
static getDerivedStateFromProps(props, state) {
return (0, _DrawerListHelpers.prepareDerivedState)(props, state);
}
constructor(props) {
super(props);
_defineProperty(this, "enableBodyLock", () => {
if (this._refUl.current) {
this._bodyLockIsEnabled = true;
(0, _bodyScrollLock.disableBodyScroll)(this._refUl.current);
}
});
_defineProperty(this, "disableBodyLock", () => {
if (this._bodyLockIsEnabled && this._refUl.current) {
this._bodyLockIsEnabled = null;
(0, _bodyScrollLock.enableBodyScroll)(this._refUl.current);
}
});
_defineProperty(this, "correctHiddenView", () => {
if (!this._refShell.current || !this._refUl.current) {
return;
}
try {
const spaceToLeft = (0, _helpers.getOffsetLeft)(this._refUl.current);
const spaceToRight = window.innerWidth - ((0, _helpers.getOffsetLeft)(this._refUl.current) + this._refUl.current.offsetWidth);
const triangleStyle = this._refTriangle.current.style;
const shellStyle = this._refShell.current.style;
if (spaceToLeft < 0) {
shellStyle.transform = `translateX(${Math.abs(spaceToLeft / 16)}rem)`;
triangleStyle.right = `${Math.abs(spaceToLeft / 16)}rem`;
} else if (spaceToRight < 0) {
shellStyle.transform = `translateX(${spaceToRight / 16}rem)`;
triangleStyle.left = `${Math.abs(spaceToRight / 16)}rem`;
} else {
if (shellStyle.transform) {
shellStyle.transform = '';
triangleStyle.left = 'auto';
triangleStyle.right = 'auto';
}
}
} catch (e) {}
});
_defineProperty(this, "scrollToItem", (active_item, {
scrollTo = true,
element = null
} = {}) => {
clearTimeout(this._scrollTimeout);
this._scrollTimeout = setTimeout(() => {
if (this._refUl.current && parseFloat(active_item) > -1) {
try {
const ulElement = this._refUl.current;
const liElement = element || this.getActiveElement() || this.getSelectedElement();
if (liElement) {
const top = liElement.offsetTop;
if (ulElement.scrollTo) {
if (scrollTo === false || window['IS_TEST']) {
ulElement.style.scrollBehavior = 'auto';
}
ulElement.scrollTo({
top,
behavior: scrollTo ? 'smooth' : 'auto'
});
if (scrollTo === false) {
ulElement.style.scrollBehavior = 'smooth';
}
} else if (ulElement.scrollTop) {
ulElement.scrollTop = top;
}
if (!(0, _componentHelper.isTrue)(this.props.prevent_focus) && liElement) {
liElement.focus();
(0, _componentHelper.dispatchCustomElementEvent)(this, 'on_show_focus', {
element: liElement
});
}
} else {
(0, _componentHelper.warn)('The DrawerList item was not a DOM Element');
}
} catch (e) {
(0, _componentHelper.warn)('List could not scroll into element:', e);
}
}
}, 1);
});
_defineProperty(this, "setActiveItemAndScrollToIt", (active_item, {
fireSelectEvent = false,
scrollTo = true,
event = null
} = {}) => {
this.setState({
active_item
}, () => {
if (parseFloat(active_item) === -1) {
var _document$activeEleme;
if (((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.tagName) !== 'INPUT') {
var _this$_refUl$current;
(_this$_refUl$current = this._refUl.current) === null || _this$_refUl$current === void 0 || _this$_refUl$current.focus({
preventScroll: true
});
}
(0, _componentHelper.dispatchCustomElementEvent)(this, 'on_show_focus', {
element: this._refUl.current
});
} else if (parseFloat(active_item) > -1) {
const {
selected_item
} = this.state;
if (fireSelectEvent) {
const attributes = this.attributes;
const ret = (0, _componentHelper.dispatchCustomElementEvent)(this.state, 'on_select', {
active_item,
value: (0, _DrawerListHelpers.getSelectedItemValue)(selected_item, this.state),
data: (0, _DrawerListHelpers.getEventData)(active_item, this.state.data),
event,
attributes
});
if (ret === false) {
return;
}
}
if ((0, _componentHelper.isTrue)(this.props.no_animation)) {
scrollTo = false;
}
this.scrollToItem(active_item, {
scrollTo
});
}
});
});
_defineProperty(this, "setWrapperElement", (wrapper_element = this.props.wrapper_element) => {
if (typeof wrapper_element === 'string') {
wrapper_element = typeof document !== 'undefined' ? document.querySelector(wrapper_element) : undefined;
}
if (wrapper_element !== this.state.wrapper_element) {
this.setState({
wrapper_element
});
}
return this;
});
_defineProperty(this, "setMetaKey", e => {
this.meta = {
cmd: e.metaKey,
ctrl: e.ctrlKey,
shift: e.shiftKey,
alt: e.altKey
};
});
_defineProperty(this, "onKeyUpHandler", e => {
this.setMetaKey(e);
});
_defineProperty(this, "onKeyDownHandler", e => {
const key = (0, _componentHelper.keycode)(e);
if (/command|alt|shift|ctrl/.test(key)) {
this.setMetaKey(e);
}
(0, _componentHelper.dispatchCustomElementEvent)(this.state, 'on_key_down', {
event: e,
key
});
if ((0, _componentHelper.isTrue)(this.props.prevent_close)) {
let isSameDrawer = false;
try {
const ulElem = (0, _componentHelper.getClosestParent)('dnb-drawer-list__options', document.activeElement);
isSameDrawer = ulElem === this._refUl.current || (ulElem === null || ulElem === void 0 ? void 0 : ulElem.getAttribute('id')) === this.state.id;
} catch (e) {
(0, _componentHelper.warn)(e);
}
if (!isSameDrawer && key !== 'tab') {
return;
}
}
if (!this.state.isOpen) {
return;
}
if ((0, _componentHelper.isTrue)(this.state.ignore_events) && key !== 'tab') {
return;
}
let active_item = parseFloat(this.state.active_item);
if (isNaN(active_item)) {
active_item = -1;
}
const total = this.state.data && this.state.data.length - 1;
switch (key) {
case 'up':
{
var _this$getPrevActiveIt;
e.preventDefault();
active_item = (_this$getPrevActiveIt = this.getPrevActiveItem()) !== null && _this$getPrevActiveIt !== void 0 ? _this$getPrevActiveIt : this.getLastItem();
}
break;
case 'down':
{
var _this$getNextActiveIt;
e.preventDefault();
active_item = (_this$getNextActiveIt = this.getNextActiveItem()) !== null && _this$getNextActiveIt !== void 0 ? _this$getNextActiveIt : this.getFirstItem();
}
break;
case 'page up':
case 'home':
{
var _this$getFirstItem;
e.preventDefault();
active_item = (_this$getFirstItem = this.getFirstItem()) !== null && _this$getFirstItem !== void 0 ? _this$getFirstItem : 0;
}
break;
case 'page down':
case 'end':
{
var _this$getLastItem;
e.preventDefault();
active_item = (_this$getLastItem = this.getLastItem()) !== null && _this$getLastItem !== void 0 ? _this$getLastItem : total;
}
break;
case 'enter':
case 'space':
{
var _this$getCurrentActiv;
if (e.target.tagName === 'A') {
e.target.dispatchEvent(new MouseEvent('click'));
this.setHidden();
return;
}
active_item = (_this$getCurrentActiv = this.getCurrentActiveItem()) !== null && _this$getCurrentActiv !== void 0 ? _this$getCurrentActiv : this.getCurrentSelectedItem();
if ((0, _componentHelper.isTrue)(this.props.skip_keysearch) ? active_item > -1 && key !== 'space' : true) {
e.preventDefault();
const result = this.selectItemAndClose(active_item, {
fireSelectEvent: true,
event: e
});
if (result === false) {
return;
}
}
}
break;
case 'escape':
case 'esc':
{
this.setHidden({
event: e
});
e.preventDefault();
e.stopPropagation();
}
break;
case 'tab':
{
if (active_item > -1) {
const activeElement = this.getActiveElement();
const hasFocusOnElement = Boolean(this.getAnchorElem(activeElement));
this.setState({
hasFocusOnElement
});
if (hasFocusOnElement) {
e.stopPropagation();
const currentActiveElement = (0, _componentHelper.getClosestParent)('dnb-drawer-list__option', document.activeElement);
if (currentActiveElement !== activeElement) {
const createTabElem = () => {
try {
const elem = document.createElement('BUTTON');
elem.setAttribute('style', 'opacity:0;position:absolute;');
const focus = () => {
prevActiveElement.focus();
elem.removeEventListener('focus', focus);
activeElement.removeChild(after);
activeElement.removeChild(before);
};
elem.addEventListener('focus', focus);
return elem;
} catch (e) {}
};
const prevActiveElement = document.activeElement;
const after = createTabElem();
const before = createTabElem();
activeElement.focus();
const insertElem = () => {
try {
activeElement.appendChild(after);
activeElement.insertBefore(before, activeElement.firstChild);
} catch (e) {}
};
if (typeof window.requestAnimationFrame === 'function') {
window.requestAnimationFrame(insertElem);
} else {
insertElem();
}
}
return;
} else if ((0, _componentHelper.isTrue)(this.props.prevent_close)) {
active_item = -1;
}
}
this.setHidden({
event: e
});
}
break;
default:
{
const searchIndex = this.findItemByValue((0, _componentHelper.keycode)(e));
if (searchIndex > -1) {
active_item = searchIndex;
}
}
break;
}
if (active_item === -1 && this._refUl.current && typeof document !== 'undefined') {
const ulElem = (0, _componentHelper.getClosestParent)('dnb-drawer-list__options', document.activeElement);
if (ulElem === this._refUl.current) {
this.setState({
showFocusRing: true,
active_item
});
this._refUl.current.focus({
preventScroll: true
});
(0, _componentHelper.dispatchCustomElementEvent)(this.state, 'handle_dismiss_focus');
}
} else if (active_item > -1 && active_item !== this.state.active_item) {
this.setState({
showFocusRing: false
});
this.setActiveItemAndScrollToIt(active_item, {
fireSelectEvent: true,
event: e
});
}
});
_defineProperty(this, "getSelectedElement", () => {
var _this$_refUl$current2;
return ((_this$_refUl$current2 = this._refUl.current) === null || _this$_refUl$current2 === void 0 ? void 0 : _this$_refUl$current2.querySelector('li.dnb-drawer-list__option--selected')) || this._refUl.current;
});
_defineProperty(this, "getCurrentSelectedItem", () => {
const elem = this.getSelectedElement();
return this.getItemData(elem);
});
_defineProperty(this, "getActiveElement", () => {
var _this$_refUl$current3;
return (_this$_refUl$current3 = this._refUl.current) === null || _this$_refUl$current3 === void 0 ? void 0 : _this$_refUl$current3.querySelector('li.dnb-drawer-list__option--focus');
});
_defineProperty(this, "getElementGroup", element => {
var _element$parentElemen;
return element !== null && element !== void 0 && (_element$parentElemen = element.parentElement) !== null && _element$parentElemen !== void 0 && _element$parentElemen.classList.contains('dnb-drawer-list__group') ? element.parentElement : null;
});
_defineProperty(this, "getCurrentActiveItem", () => {
const elem = this.getActiveElement();
return this.getItemData(elem);
});
_defineProperty(this, "getNextActiveItem", () => {
var _this$getElementGroup;
const activeElement = this.getActiveElement();
const elem = (activeElement === null || activeElement === void 0 ? void 0 : activeElement.nextElementSibling) || ((_this$getElementGroup = this.getElementGroup(activeElement)) === null || _this$getElementGroup === void 0 || (_this$getElementGroup = _this$getElementGroup.nextElementSibling) === null || _this$getElementGroup === void 0 ? void 0 : _this$getElementGroup.querySelector('li.dnb-drawer-list__option.first-of-type'));
return this.getItemData(elem);
});
_defineProperty(this, "getPrevActiveItem", () => {
var _activeElement$previo, _this$getElementGroup2;
const activeElement = this.getActiveElement();
const elem = (activeElement === null || activeElement === void 0 || (_activeElement$previo = activeElement.previousElementSibling) === null || _activeElement$previo === void 0 ? void 0 : _activeElement$previo.classList.contains('dnb-drawer-list__option')) && (activeElement === null || activeElement === void 0 ? void 0 : activeElement.previousElementSibling) || ((_this$getElementGroup2 = this.getElementGroup(activeElement)) === null || _this$getElementGroup2 === void 0 || (_this$getElementGroup2 = _this$getElementGroup2.previousElementSibling) === null || _this$getElementGroup2 === void 0 ? void 0 : _this$getElementGroup2.querySelector('li.dnb-drawer-list__option.last-of-type'));
return this.getItemData(elem);
});
_defineProperty(this, "getFirstItem", () => {
var _this$_refUl$current4;
const elem = (_this$_refUl$current4 = this._refUl.current) === null || _this$_refUl$current4 === void 0 ? void 0 : _this$_refUl$current4.querySelector('li.dnb-drawer-list__option.first-item');
return this.getItemData(elem);
});
_defineProperty(this, "getLastItem", () => {
var _this$_refUl$current5;
const elem = (_this$_refUl$current5 = this._refUl.current) === null || _this$_refUl$current5 === void 0 ? void 0 : _this$_refUl$current5.querySelector('li.dnb-drawer-list__option.last-item');
return this.getItemData(elem);
});
_defineProperty(this, "getItemData", element => {
const item = parseFloat(element && element.getAttribute('data-item'));
return isNaN(item) ? undefined : item;
});
_defineProperty(this, "setOutsideClickObserver", () => {
this.removeOutsideClickObserver();
this.outsideClick = (0, _componentHelper.detectOutsideClick)([this.state.wrapper_element, this._refRoot.current, this._refUl.current], () => this.setHidden({
preventHideFocus: true
}), {
includedKeys: ['tab']
});
if (typeof document !== 'undefined') {
document.addEventListener('keydown', this.onKeyDownHandler, true);
document.addEventListener('keyup', this.onKeyUpHandler, true);
}
});
_defineProperty(this, "addObservers", () => {
this.setDirectionObserver();
this.setScrollObserver();
this.setOutsideClickObserver();
});
_defineProperty(this, "removeObservers", () => {
this.removeDirectionObserver();
this.removeScrollObserver();
this.removeOutsideClickObserver();
});
_defineProperty(this, "toggleVisible", (...args) => {
return this.state.opened ? this.setHidden(...args) : this.setVisible(...args);
});
_defineProperty(this, "setVisible", (args = {}, onStateComplete = null) => {
if (this.state.opened && this.state.hidden === false) {
if (typeof onStateComplete === 'function') {
onStateComplete(true);
}
return;
}
clearTimeout(this._showTimeout);
clearTimeout(this._hideTimeout);
this.searchCache = null;
const handleSingleComponentCheck = () => {
this.setState({
hidden: false,
opened: true
});
const animationDelayHandler = () => {
DrawerListProvider.isOpen = true;
this.setState({
isOpen: true
});
if (typeof onStateComplete === 'function') {
onStateComplete(true);
}
this.setActiveState(true);
};
if ((0, _componentHelper.isTrue)(this.props.no_animation)) {
var _process;
if (((_process = process) === null || _process === void 0 ? void 0 : _process.env.NODE_ENV) === 'test') {
animationDelayHandler();
} else {
clearTimeout(this._showTimeout);
this._showTimeout = setTimeout(animationDelayHandler, 0);
}
} else {
clearTimeout(this._showTimeout);
this._showTimeout = setTimeout(animationDelayHandler, DrawerListProvider.blurDelay);
}
const {
selected_item,
active_item
} = this.state;
const newActiveItem = parseFloat(selected_item) > -1 ? selected_item : active_item;
(0, _componentHelper.dispatchCustomElementEvent)(this.state, 'on_show', {
...args,
data: (0, _DrawerListHelpers.getEventData)(newActiveItem, this.state.data),
attributes: this.attributes,
ulElement: this._refUl.current
});
this.setActiveItemAndScrollToIt(parseFloat(newActiveItem) > -1 ? newActiveItem : -1, {
scrollTo: false
});
};
if (DrawerListProvider.isOpen && !(0, _componentHelper.isTrue)(this.props.no_animation)) {
clearTimeout(this._hideTimeout);
this._hideTimeout = setTimeout(handleSingleComponentCheck, DrawerListProvider.blurDelay);
} else {
handleSingleComponentCheck();
}
});
_defineProperty(this, "setHidden", (args = {}, onStateComplete = null) => {
if (!this.state.opened || (0, _componentHelper.isTrue)(this.props.prevent_close)) {
if (typeof onStateComplete === 'function') {
onStateComplete(false);
}
return;
}
clearTimeout(this._showTimeout);
clearTimeout(this._hideTimeout);
const {
selected_item,
active_item
} = this.state;
const res = (0, _componentHelper.dispatchCustomElementEvent)(this.state, 'on_hide', {
...args,
data: (0, _DrawerListHelpers.getEventData)(parseFloat(selected_item) > -1 ? selected_item : active_item, this.state.data),
attributes: this.attributes
});
if (res !== false) {
this.setState({
opened: false
});
const delayHandler = () => {
this.removeObservers();
this.setState({
hidden: true,
isOpen: false
});
if (typeof onStateComplete === 'function') {
onStateComplete(false);
}
DrawerListProvider.isOpen = false;
this.setActiveState(false);
};
if ((0, _componentHelper.isTrue)(this.props.no_animation)) {
delayHandler();
} else {
clearTimeout(this._hideTimeout);
this._hideTimeout = setTimeout(delayHandler, DrawerListProvider.blurDelay);
}
}
});
_defineProperty(this, "setDataHandler", (data, cb = null, {
overwriteOriginalData = false
} = {}) => {
if (!data) {
return;
}
if (typeof data === 'function') {
data = (0, _DrawerListHelpers.getData)(data);
}
data = (0, _DrawerListHelpers.normalizeData)(data);
this.setState({
data,
original_data: overwriteOriginalData ? data : this.state.original_data
}, () => {
this.refreshScrollObserver();
typeof cb === 'function' && cb(data);
});
return this;
});
_defineProperty(this, "setStateHandler", (state, cb = null) => {
this.setState({
...state
}, cb);
return this;
});
_defineProperty(this, "selectItemAndClose", (itemToSelect, args = {}) => {
args.closeOnSelection = true;
return this.selectItem(itemToSelect, args);
});
_defineProperty(this, "selectItem", (itemToSelect, {
fireSelectEvent = false,
event = null,
closeOnSelection = false
} = {}) => {
if (event && typeof event.persist === 'function') {
event.persist();
}
if (itemToSelect === -1) {
itemToSelect = null;
}
const data = (0, _DrawerListHelpers.getEventData)(itemToSelect, this.state.data) || null;
const value = (0, _DrawerListHelpers.getSelectedItemValue)(itemToSelect, this.state);
const attributes = this.attributes;
const attr = {
selected_item: itemToSelect,
value,
data,
event,
attributes
};
if (data !== null && data !== void 0 && data.disabled) {
return false;
}
const res = (0, _componentHelper.dispatchCustomElementEvent)(this.state, 'on_pre_change', attr);
if (res === false) {
return res;
}
if ((0, _helpers.hasSelectedText)()) {
const elem = (0, _helpers.getSelectedElement)();
const isInput = elem instanceof Element ? (0, _componentHelper.getClosestParent)('dnb-input', elem) : null;
if (!isInput) {
return;
}
}
const {
keep_open,
prevent_selection
} = this.props;
const doCallOnChange = parseFloat(itemToSelect) > -1 && itemToSelect !== this.state.selected_item;
const onSelectionIsComplete = () => {
if (doCallOnChange) {
(0, _componentHelper.dispatchCustomElementEvent)(this.state, 'on_change', attr);
}
if (fireSelectEvent) {
(0, _componentHelper.dispatchCustomElementEvent)(this.state, 'on_select', {
...attr,
active_item: itemToSelect
});
}
if (closeOnSelection && !(0, _componentHelper.isTrue)(keep_open)) {
this.setHidden();
}
};
if ((0, _componentHelper.isTrue)(prevent_selection)) {
onSelectionIsComplete();
} else {
this.setState({
selected_item: itemToSelect,
active_item: itemToSelect
}, onSelectionIsComplete);
}
});
this.attributes = {};
this.state = {
cache_hash: '',
active_item: undefined,
selected_item: undefined,
ignore_events: false,
...(0, _DrawerListHelpers.prepareStartupState)(props)
};
this._refRoot = _react.default.createRef();
this._refShell = _react.default.createRef();
this._refUl = _react.default.createRef();
this._refTriangle = _react.default.createRef();
}
componentDidMount() {
if ((0, _componentHelper.isTrue)(this.props.opened)) {
this.setVisible();
}
}
componentDidUpdate(prevProps) {
if (this.props.opened !== null && this.props.opened !== prevProps.opened) {
if ((0, _componentHelper.isTrue)(this.props.opened)) {
this.setVisible();
} else if ((0, _componentHelper.isTrue)(this.props.opened) === false) {
this.setHidden();
}
}
if (this.state.opened) {
var _document$activeEleme2;
if (this.props.data !== prevProps.data && typeof document !== 'undefined' && ((_document$activeEleme2 = document.activeElement) === null || _document$activeEleme2 === void 0 ? void 0 : _document$activeEleme2.tagName) === 'BODY') {
var _this$_refUl$current6;
(_this$_refUl$current6 = this._refUl.current) === null || _this$_refUl$current6 === void 0 || _this$_refUl$current6.focus();
}
}
}
componentWillUnmount() {
clearTimeout(this._showTimeout);
clearTimeout(this._hideTimeout);
clearTimeout(this._scrollTimeout);
clearTimeout(this._directionTimeout);
this.removeObservers();
this.setActiveState(false);
}
refreshScrollObserver() {
var _this$_refUl$current7;
if (typeof window === 'undefined' || !this._refUl.current) {
return;
}
const elements = (_this$_refUl$current7 = this._refUl.current) === null || _this$_refUl$current7 === void 0 ? void 0 : _this$_refUl$current7.querySelectorAll(`li.dnb-drawer-list__option,li.dnb-drawer-list__group-title`);
this.itemSpots = {};
elements.forEach(element => {
this.itemSpots[element.offsetTop] = {
id: element.getAttribute('id')
};
});
this.itemSpotsCount = Object.keys(this.itemSpots).length;
}
setScrollObserver() {
if (typeof window === 'undefined' || !this._refUl.current) {
return;
}
this.removeScrollObserver();
this.itemSpotsCount = 1;
try {
let closestToTop = null,
closestToBottom = null,
tmpToTop,
tmpToBottom;
this.setOnScroll = () => {
if (!this._refUl.current) {
return;
}
if (this.itemSpotsCount <= 1) {
this.refreshScrollObserver();
}
const counts = Object.keys(this.itemSpots);
closestToBottom = (0, _DrawerListHelpers.findClosest)(counts, this._refUl.current.scrollTop + this._refUl.current.offsetHeight);
closestToTop = (0, _DrawerListHelpers.findClosest)(counts, this._refUl.current.scrollTop);
if (this.itemSpots[closestToTop] && this.itemSpots[closestToTop].id !== tmpToTop) {
tmpToTop = this.itemSpots[closestToTop].id;
this.setState({
closestToTop: this.itemSpots[closestToTop].id
});
}
if (this.itemSpots[closestToBottom] && this.itemSpots[closestToBottom].id !== tmpToBottom) {
tmpToBottom = this.itemSpots[closestToBottom].id;
this.setState({
closestToBottom: this.itemSpots[closestToBottom].id
});
}
};
this._refUl.current.addEventListener('scroll', this.setOnScroll);
this.setOnScroll();
} catch (e) {
(0, _componentHelper.warn)('List could not set onScroll:', e);
}
}
removeScrollObserver() {
if (typeof window !== 'undefined' && this.setOnScroll) {
window.removeEventListener('resize', this.setOnScroll);
this.setOnScroll = null;
}
}
setDirectionObserver() {
if (typeof window === 'undefined' || typeof document === 'undefined' || !(this.state.wrapper_element || this._refRoot.current)) {
return;
}
const {
enable_body_lock,
scrollable,
min_height,
max_height,
on_resize,
page_offset,
observer_element,
direction: directionProp
} = this.props;
const useBodyLock = (0, _componentHelper.isTrue)(enable_body_lock);
const isScrollable = (0, _componentHelper.isTrue)(scrollable);
const customMinHeight = parseFloat(min_height) * 16;
const customMaxHeight = parseFloat(max_height) || 0;
let customElem = typeof observer_element === 'string' ? document.querySelector(observer_element) : null;
if (!customElem) {
customElem = (0, _componentHelper.getClosestScrollViewElement)(this._refRoot.current);
}
this.removeDirectionObserver();
const directionOffset = 96;
const spaceToTopOffset = 2 * 16;
const spaceToBottomOffset = 2 * 16;
const elem = this.state.wrapper_element || this._refRoot.current;
const getSpaceToBottom = ({
rootElem,
pageYOffset
}) => {
const spaceToBottom = rootElem.clientHeight - ((0, _helpers.getOffsetTop)(elem) + elem.offsetHeight) + pageYOffset;
const html = document.documentElement;
if (spaceToBottom < customMinHeight && rootElem !== html) {
return getSpaceToBottom({
rootElem: html,
pageYOffset
});
}
return spaceToBottom;
};
const calculateMaxHeight = () => {
const rootElem = customElem || document.documentElement;
const pageYOffset = !isNaN(parseFloat(page_offset)) ? parseFloat(page_offset) : rootElem.scrollTop;
const spaceToTop = (0, _helpers.getOffsetTop)(elem) + elem.offsetHeight - pageYOffset;
const spaceToBottom = getSpaceToBottom({
rootElem,
pageYOffset
});
let direction = directionProp;
if (!direction || direction === 'auto') {
direction = Math.max(spaceToBottom - directionOffset, directionOffset) < customMinHeight && spaceToTop > customMinHeight ? 'top' : 'bottom';
}
let maxHeight = customMaxHeight;
if (!(maxHeight > 0)) {
if (direction === 'top') {
maxHeight = spaceToTop - ((this.state.wrapper_element || this._refRoot.current).offsetHeight || 0) - spaceToTopOffset;
}
if (direction === 'bottom') {
maxHeight = spaceToBottom - spaceToBottomOffset;
}
let vh = 0;
if (typeof window.visualViewport !== 'undefined') {
vh = window.visualViewport.height;
} else {
vh = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
}
vh = vh * (isScrollable ? 0.7 : 0.9);
if (maxHeight > vh) {
maxHeight = vh;
}
maxHeight = (0, _componentHelper.roundToNearest)(maxHeight, 8) / 16;
}
return {
direction,
maxHeight
};
};
const renderDirection = () => {
var _window, _window$requestAnimat;
try {
const {
direction,
maxHeight: max_height
} = calculateMaxHeight();
if (this.props.direction === 'auto') {
this.setState({
direction
});
}
this.setState({
max_height
});
if (on_resize) {
(0, _componentHelper.dispatchCustomElementEvent)(this.state, 'on_resize', {
direction,
max_height
});
}
} catch (e) {
(0, _componentHelper.warn)('List could not set onResize:', e);
}
((_window = window) === null || _window === void 0 || (_window$requestAnimat = _window.requestAnimationFrame) === null || _window$requestAnimat === void 0 ? void 0 : _window$requestAnimat.call(_window, this.correctHiddenView)) || this.correctHiddenView();
};
this.setDirection = () => {
clearTimeout(this._directionTimeout);
this._directionTimeout = setTimeout(renderDirection, 50);
};
this._rootElem = customElem || window;
this._rootElem.addEventListener('scroll', this.setDirection);
if (typeof window.visualViewport !== 'undefined') {
window.visualViewport.addEventListener('scroll', this.setDirection);
window.visualViewport.addEventListener('resize', this.setDirection);
} else {
window.addEventListener('resize', this.setDirection);
}
if (useBodyLock) {
this.enableBodyLock();
}
this.refreshScrollObserver();
renderDirection();
}
findItemByValue(value) {
if ((0, _componentHelper.isTrue)(this.props.skip_keysearch)) {
return;
}
let index = -1;
try {
value = String(value).toLowerCase();
if (this.changedOrderFor !== value) {
this.searchCache = null;
this.changedOrderFor = null;
}
this.searchCache = this.searchCache || this.state.data.reduce((acc, itemData, i) => {
var _context;
const str = String((0, _DrawerListHelpers.parseContentTitle)(itemData, {
separator: ' ',
removeNumericOnlyValues: true
}));
const firstLetter = String(str[0]).toLowerCase();
acc[firstLetter] = acc[firstLetter] || [];
(0, _push.default)(_context = acc[firstLetter]).call(_context, {
i
});
return acc;
}, {});
const found = this.searchCache[value];
index = found && found[0] && found[0].i > -1 ? found[0].i : -1;
if (found && found.length > 1) {
(0, _push.default)(found).call(found, found.shift());
this.changedOrderFor = value;
}
} catch (e) {
(0, _componentHelper.warn)('List could not findItemByValue:', e);
}
return index;
}
removeDirectionObserver() {
this.disableBodyLock();
clearTimeout(this._directionTimeout);
if (typeof window !== 'undefined' && this.setDirection) {
var _this$_rootElem;
(_this$_rootElem = this._rootElem) === null || _this$_rootElem === void 0 || _this$_rootElem.removeEventListener('scroll', this.setDirection);
if (typeof window.visualViewport !== 'undefined') {
window.visualViewport.removeEventListener('scroll', this.setDirection);
window.visualViewport.removeEventListener('resize', this.setDirection);
} else {
window.removeEventListener('resize', this.setDirection);
}
this.setDirection = null;
}
}
getAnchorElem(activeElement) {
try {
return activeElement === null || activeElement === void 0 ? void 0 : activeElement.querySelector('a:first-of-type');
} catch (e) {
return null;
}
}
removeOutsideClickObserver() {
if (this.outsideClick) {
this.outsideClick.remove();
}
if (typeof document !== 'undefined') {
document.removeEventListener('keydown', this.onKeyDownHandler, true);
document.removeEventListener('keyup', this.onKeyUpHandler, true);
}
}
setActiveState(active) {
if (typeof document !== 'undefined') {
try {
if (active) {
document.documentElement.setAttribute('data-dnb-drawer-list-active', String(this.state.id));
} else {
document.documentElement.removeAttribute('data-dnb-drawer-list-active');
}
} catch (e) {
(0, _componentHelper.warn)('DrawerList: Error on set "data-dnb-drawer-list-active" by using element.setAttribute()', e);
}
}
}
render() {
return _react.default.createElement(_DrawerListContext.default.Provider, {
value: {
...this.context,
drawerList: {
attributes: this.attributes,
_refRoot: this._refRoot,
_refShell: this._refShell,
_refUl: this._refUl,
_refTriangle: this._refTriangle,
_rootElem: this._rootElem,
setData: this.setDataHandler,
setState: this.setStateHandler,
setWrapperElement: this.setWrapperElement,
addObservers: this.addObservers,
removeObservers: this.removeObservers,
setVisible: this.setVisible,
setHidden: this.setHidden,
toggleVisible: this.toggleVisible,
selectItem: this.selectItem,
selectItemAndClose: this.selectItemAndClose,
scrollToItem: this.scrollToItem,
setActiveItemAndScrollToIt: this.setActiveItemAndScrollToIt,
...this.state
}
}
}, this.props.children);
}
}
exports.default = DrawerListProvider;
_defineProperty(DrawerListProvider, "contextType", _Context.default);
_defineProperty(DrawerListProvider, "defaultProps", {
..._DrawerListHelpers.drawerListDefaultProps,
..._DrawerListHelpers.drawerListProviderDefaultProps
});
_defineProperty(DrawerListProvider, "blurDelay", 201);
//# sourceMappingURL=DrawerListProvider.js.map