@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
959 lines (958 loc) • 38.5 kB
JavaScript
"use strict";
"use client";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("core-js/modules/web.dom-collections.iterator.js");
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Context = _interopRequireDefault(require("../../shared/Context"));
var _componentHelper = require("../../shared/component-helper");
var _helpers = require("../../shared/helpers");
var _DrawerListHelpers = require("./DrawerListHelpers");
var _DrawerListContext = _interopRequireDefault(require("./DrawerListContext"));
var _bodyScrollLock = require("../../components/modal/bodyScrollLock");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return 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) {
var _this;
super(props);
_this = this;
_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", function (active_item) {
let {
scrollTo = true,
element = null
} = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
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();
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", function (active_item) {
let {
fireSelectEvent = false,
scrollTo = true,
event = null
} = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
_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 ? 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", function () {
let wrapper_element = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props.wrapper_element;
if (typeof wrapper_element === 'string' && typeof document !== 'undefined') {
wrapper_element = document.querySelector(wrapper_element);
}
if (wrapper_element !== _this.state.wrapper_element) {
_this.setState({
wrapper_element
});
}
return _this;
});
_defineProperty(this, "setMetaKey", e => {
const we = typeof window !== 'undefined' && window.event ? window.event : e;
this.meta = {
cmd: we.metaKey,
ctrl: we.ctrlKey,
shift: we.shiftKey,
alt: we.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.getPreviousSibling)('dnb-drawer-list__options', document.activeElement);
isSameDrawer = ulElem === this._refUl.current || (ulElem === null || ulElem === void 0 ? void 0 : ulElem.getAttribute('id')) === this.props.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':
{
e.preventDefault();
if (this.state.direction === 'bottom' && this.state.active_item === this.getFirstItem()) {
active_item = -1;
} else {
active_item = this.getPrevActiveItem();
if (isNaN(active_item)) {
active_item = this.getLastItem();
}
}
}
break;
case 'down':
{
e.preventDefault();
if (this.state.direction === 'top' && this.state.active_item === this.getLastItem()) {
active_item = -1;
} else {
active_item = this.getNextActiveItem();
if (isNaN(active_item)) {
active_item = this.getFirstItem();
}
}
}
break;
case 'page up':
case 'home':
{
e.preventDefault();
active_item = this.getFirstItem() || 0;
}
break;
case 'page down':
case 'end':
{
e.preventDefault();
active_item = this.getLastItem();
if (isNaN(active_item)) {
active_item = total;
}
}
break;
case 'enter':
case 'space':
{
if (e.target.tagName === 'A') {
e.target.dispatchEvent(new MouseEvent('click'));
this.setHidden();
return;
}
active_item = this.getCurrentActiveItem();
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 'esc':
{
this.setHidden({
event: e
});
e.preventDefault();
}
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.getPreviousSibling)('dnb-drawer-list__option', document.activeElement);
if (currentActiveElement !== activeElement) {
const createTabElem = () => {
try {
const elem = document.createElement('BUTTON');
elem.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:
active_item = this.findItemByValue((0, _componentHelper.keycode)(e));
break;
}
if (active_item === -1 && this._refUl.current && typeof document !== 'undefined') {
const ulElem = (0, _componentHelper.getPreviousSibling)('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 (parseFloat(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 || {
getAttribute: () => null
};
});
_defineProperty(this, "getCurrentSelectedItem", () => {
const elem = this.getSelectedElement();
return parseFloat(elem && elem.getAttribute('data-item'));
});
_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')) || this.getSelectedElement();
});
_defineProperty(this, "getCurrentActiveItem", () => {
const elem = this.getActiveElement();
return parseFloat(elem && elem.getAttribute('data-item'));
});
_defineProperty(this, "getNextActiveItem", () => {
const elem = this.getActiveElement().nextSibling;
return parseFloat(elem && elem.getAttribute('data-item'));
});
_defineProperty(this, "getPrevActiveItem", () => {
const elem = this.getActiveElement().previousSibling;
return parseFloat(elem && elem.getAttribute('data-item'));
});
_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-of-type');
return parseFloat(elem && elem.getAttribute('data-item'));
});
_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-of-type');
return parseFloat(elem && elem.getAttribute('data-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);
document.addEventListener('keyup', this.onKeyUpHandler);
}
});
_defineProperty(this, "addObservers", () => {
this.setDirectionObserver();
this.setScrollObserver();
this.setOutsideClickObserver();
});
_defineProperty(this, "removeObservers", () => {
this.removeDirectionObserver();
this.removeScrollObserver();
this.removeOutsideClickObserver();
});
_defineProperty(this, "toggleVisible", function () {
return _this.state.opened ? _this.setHidden(...arguments) : _this.setVisible(...arguments);
});
_defineProperty(this, "setVisible", function () {
let args = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
let onStateComplete = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 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;
(0, _componentHelper.dispatchCustomElementEvent)(_this.state, 'on_show', _objectSpread(_objectSpread({}, args), {}, {
data: (0, _DrawerListHelpers.getEventData)(parseFloat(selected_item) > -1 ? selected_item : active_item, _this.state.data),
attributes: _this.attributes,
ulElement: _this._refUl.current
}));
_this.setActiveItemAndScrollToIt(parseFloat(active_item) > -1 ? active_item : -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", function () {
let args = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
let onStateComplete = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 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', _objectSpread(_objectSpread({}, 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", function (data) {
let cb = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
let {
overwriteOriginalData = false
} = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
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", function (state) {
let cb = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
_this.setState(_objectSpread({}, state), cb);
return _this;
});
_defineProperty(this, "selectItemAndClose", function (itemToSelect) {
let args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
args.closeOnSelection = true;
return _this.selectItem(itemToSelect, args);
});
_defineProperty(this, "selectItem", function (itemToSelect) {
let {
fireSelectEvent = false,
event = null,
closeOnSelection = false
} = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
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 = (0, _componentHelper.getPreviousSibling)('dnb-input', elem);
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', _objectSpread(_objectSpread({}, 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 = _objectSpread({
tagName: 'dnb-drawer-list',
cache_hash: '',
active_item: null,
selected_item: null,
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 ? 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() {
if (typeof window === 'undefined' || !this._refUl.current) {
return;
}
this.itemSpots = this.state.data.reduce((acc, cur, i) => {
var _this$_refUl$current7;
const element = (_this$_refUl$current7 = this._refUl.current) === null || _this$_refUl$current7 === void 0 ? void 0 : _this$_refUl$current7.querySelector(`li.dnb-drawer-list__option:nth-of-type(${i + 1})`);
if (element) {
acc[element.offsetTop] = {
i
};
}
return acc;
}, {});
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] && closestToTop !== tmpToTop) {
this.setState({
closestToTop: this.itemSpots[closestToTop].i
});
}
if (closestToBottom !== tmpToBottom && this.itemSpots[closestToBottom]) {
this.setState({
closestToBottom: this.itemSpots[closestToBottom].i
});
}
tmpToTop = closestToTop;
tmpToBottom = closestToBottom;
};
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 = _ref => {
let {
rootElem,
pageYOffset
} = _ref;
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 ? 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) => {
const str = String((0, _DrawerListHelpers.parseContentTitle)(itemData, {
separator: ' ',
removeNumericOnlyValues: true
}));
const firstLetter = String(str[0]).toLowerCase();
acc[firstLetter] = acc[firstLetter] || [];
acc[firstLetter].push({
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) {
found.push(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 ? 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.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);
document.removeEventListener('keyup', this.onKeyUpHandler);
}
}
setActiveState(active) {
if (typeof document !== 'undefined') {
try {
if (active) {
document.documentElement.setAttribute('data-dnb-drawer-list-active', String(this.props.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: _objectSpread(_objectSpread({}, this.context), {}, {
drawerList: _objectSpread({
attributes: this.attributes,
_refRoot: this._refRoot,
_refShell: this._refShell,
_refUl: this._refUl,
_refTriangle: this._refTriangle,
_rootElem: this._rootElem,
getActiveElement: this.getActiveElement,
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", _objectSpread(_objectSpread({}, _DrawerListHelpers.drawerListDefaultProps), _DrawerListHelpers.drawerListProviderDefaultProps));
_defineProperty(DrawerListProvider, "blurDelay", 201);
process.env.NODE_ENV !== "production" ? DrawerListProvider.propTypes = _objectSpread(_objectSpread(_objectSpread({}, _DrawerListHelpers.drawerListPropTypes), _DrawerListHelpers.drawerListProviderPropTypes), {}, {
children: _propTypes.default.node.isRequired
}) : void 0;
//# sourceMappingURL=DrawerListProvider.js.map