@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
315 lines • 10.9 kB
JavaScript
import _pushInstanceProperty from "core-js-pure/stable/instance/push.js";
import _JSON$parse from "core-js-pure/stable/json/parse.js";
import React from 'react';
import { makeUniqueId, convertJsxToString } from "../../shared/component-helper.js";
import Icon from "../../components/icon/Icon.js";
import CountryFlag from "../../components/country-flag/CountryFlag.js";
export const drawerListDefaultProps = {
id: null,
role: 'listbox',
cacheHash: null,
arrowPosition: 'left',
scrollable: true,
focusable: false,
maxHeight: null,
direction: 'auto',
size: 'default',
noAnimation: false,
noScrollAnimation: false,
preventSelection: false,
isPopup: false,
alignDrawer: 'left',
wrapperElement: null,
defaultValue: null,
value: 'initval',
portalClass: null,
listClass: null,
skipPortal: null,
preventClose: false,
keepOpen: false,
preventFocus: false,
fixedPosition: false,
independentWidth: false,
skipKeysearch: false,
open: null,
data: null,
ignoreEvents: null,
className: null,
children: null,
onOpen: null,
onClose: null,
handleDismissFocus: null,
onChange: null,
onPreChange: null,
onResize: null,
onSelect: null,
optionsRender: null
};
export const drawerListProviderDefaultProps = {
enableBodyLock: false,
pageOffset: null,
observerElement: null,
minHeight: 10
};
export function parseContentTitle(dataItem, {
separator = '\n',
removeNumericOnlyValues = false,
preferSelectedValue = false
} = {}) {
dataItem = normalizeDataItem(dataItem);
if (!dataItem) {
return null;
}
let ret = '';
const onlyNumericRegex = /[0-9.,-\s]+/;
const hasValue = dataItem && dataItem.selectedValue;
if (!(preferSelectedValue && hasValue) && Array.isArray(dataItem.content)) {
ret = dataItem.content.reduce((acc, cur) => {
const converted = convertJsxToString(cur, ' ');
if (!converted) {
return acc;
}
const found = removeNumericOnlyValues && converted.match(onlyNumericRegex);
if (!(found && found[0].length === converted.length)) {
_pushInstanceProperty(acc).call(acc, converted);
}
return acc;
}, []).join(separator);
} else {
ret = convertJsxToString(dataItem.content, ' ');
}
if (hasValue) {
if (preferSelectedValue) {
ret = String(convertJsxToString(dataItem.selectedValue, separator, word => {
var _props;
const element = word;
const nestedChildren = !element.props.children && (element === null || element === void 0 ? void 0 : element.type) !== Icon && (element === null || element === void 0 ? void 0 : element.type) !== CountryFlag && typeof (element === null || element === void 0 ? void 0 : element.type) === 'function' && element.type();
return nestedChildren !== null && nestedChildren !== void 0 && (_props = nestedChildren.props) !== null && _props !== void 0 && _props.children ? nestedChildren : element;
}));
} else if (!onlyNumericRegex.test(dataItem.selectedValue)) {
ret = separator + ret;
}
}
return ret;
}
export const hasObjectKeyAsValue = data => {
var _data;
data = ((_data = data) === null || _data === void 0 ? void 0 : _data.rawData) || data;
return data && typeof data === 'object' && !Array.isArray(data);
};
export function preSelectData(data) {
if (typeof data === 'string') {
data = data[0] === '{' || data[0] === '[' ? _JSON$parse(data) : undefined;
} else if (data && React.isValidElement(data)) {
data = [];
} else if (typeof data === 'function') {
data = data();
}
return data;
}
export function normalizeData(props) {
var _preSelectData;
let data = (_preSelectData = preSelectData(props.data || props.children || props)) !== null && _preSelectData !== void 0 ? _preSelectData : [];
if (typeof data === 'object' && !Array.isArray(data)) {
const list = [];
for (const key in data) {
_pushInstanceProperty(list).call(list, {
selectedKey: key,
value: key,
content: data[key],
type: 'object'
});
}
data = list;
}
return data.map((dataItem, __id) => {
const normalized = normalizeDataItem(dataItem, true);
return typeof (normalized === null || normalized === void 0 ? void 0 : normalized.__id) !== 'undefined' ? normalized : {
...normalized,
__id
};
});
}
function normalizeDataItem(dataItem, markAsTransformed = false) {
return dataItem === null ? undefined : typeof dataItem === 'object' && 'content' in dataItem ? dataItem : {
content: dataItem,
...(markAsTransformed ? {
__isTransformed: true
} : {})
};
}
export const getData = props => {
return normalizeData(props);
};
export const getCurrentIndex = (value, data) => {
if (/[^0-9]/.test(String(value))) {
return data === null || data === void 0 ? void 0 : data.findIndex(cur => parseCurrentValue(cur) === value);
}
if (selectedKeyExists()) {
const index = data === null || data === void 0 ? void 0 : data.findIndex(cur => String(parseCurrentValue(cur)) === String(value));
if (index > -1) {
return index;
}
}
if (!isNaN(parseFloat(value))) {
return value;
}
return null;
function selectedKeyExists() {
for (let i = 0, l = data === null || data === void 0 ? void 0 : data.length; i < l; i++) {
var _data$i, _data$i2;
if (i > 10) {
return false;
}
if (typeof ((_data$i = data[i]) === null || _data$i === void 0 ? void 0 : _data$i.selectedKey) !== 'undefined' || ((_data$i2 = data[i]) === null || _data$i2 === void 0 ? void 0 : _data$i2.type) === 'object') {
return true;
}
}
return undefined;
}
};
export const getSelectedItemValue = (value, state) => {
if (hasObjectKeyAsValue(state)) {
return parseCurrentValue(state.data.filter((_, i) => i === parseFloat(value))[0]);
}
return value;
};
export const parseCurrentValue = current => {
if (typeof (current === null || current === void 0 ? void 0 : current.selectedKey) !== 'undefined') {
return current === null || current === void 0 ? void 0 : current.selectedKey;
}
if (typeof (current === null || current === void 0 ? void 0 : current.content) !== 'undefined') {
return current === null || current === void 0 ? void 0 : current.content;
}
return current;
};
export const getEventData = (itemIndex, data) => {
data = getCurrentData(itemIndex, data);
if (data && data.__id) {
data = {
...data
};
delete data.__id;
delete data.__isTransformed;
}
return data;
};
export const getCurrentData = (itemIndex, data) => {
if (typeof data === 'function') {
data = normalizeData(data);
}
data = data && data.find(({
__id
}) => __id === itemIndex) || null;
if (data && data.__isTransformed) {
return data.content;
}
return data;
};
function getFirstItemFromData(data) {
let firstItemIndex = data.length > 0 ? 0 : null;
let firstGroupIndex = -1;
data.forEach((item, index) => {
var _item$groupIndex;
if (((_item$groupIndex = item.groupIndex) !== null && _item$groupIndex !== void 0 ? _item$groupIndex : undefined) > -1) {
if (firstGroupIndex === -1 || item.groupIndex < firstGroupIndex) {
firstGroupIndex = item.groupIndex;
firstItemIndex = index;
}
if (item.groupIndex === 0) {
return undefined;
}
}
});
return firstItemIndex;
}
export function prepareStartupState(props) {
const selectedItem = null;
const rawData = preSelectData(props.data || (!React.isValidElement(props.children) ? props.children : undefined));
const data = getData(props);
const open = props.open !== null ? props.open : null;
const state = {
id: props.id || makeUniqueId(),
open,
data,
originalData: data,
rawData,
direction: props.direction,
maxHeight: props.maxHeight,
selectedItem,
activeItem: selectedItem,
onClose: props.onClose,
onOpen: props.onOpen,
onChange: props.onChange,
onSelect: props.onSelect
};
if (props.value !== null && typeof props.value !== 'undefined' && props.value !== 'initval') {
state.selectedItem = state.activeItem = getCurrentIndex(props.value, data);
} else if (props.defaultValue !== null) {
state.selectedItem = state.activeItem = getCurrentIndex(props.defaultValue, data);
state._value = props.value;
}
return state;
}
export const prepareDerivedState = (props, state) => {
if (state.open && !state.data && typeof props.data === 'function') {
state.data = getData(props);
}
if (props.data && props.data !== state._data) {
if (state._data) {
state.cacheHash = state.cacheHash + Date.now();
}
state.data = getData(props);
state.originalData = getData(props);
if (props.value != null && props.value !== 'initval') {
state.selectedItem = getCurrentIndex(props.value, state.originalData);
}
}
state.skipPortal = props.skipPortal;
if (typeof props.wrapperElement === 'string') {
if (typeof document !== 'undefined') {
const wrapperElement = document.querySelector(props.wrapperElement);
if (wrapperElement) {
state.wrapperElement = wrapperElement;
}
}
} else if (props.wrapperElement) {
state.wrapperElement = props.wrapperElement;
}
if (state.selectedItem !== props.value && (state._value !== props.value || props.preventSelection)) {
if (props.value === 'initval') {
state.selectedItem = null;
} else {
state.selectedItem = getCurrentIndex(props.value, state.originalData);
}
}
if (!(state.activeItem !== null && parseFloat(state.activeItem) > -2) || state._value !== props.value) {
state.activeItem = state.selectedItem;
}
if (isNaN(parseFloat(state.activeItem)) || parseFloat(state.activeItem) === -1 || getCurrentData(parseFloat(state.activeItem), state.data) === null) {
const firstItem = getFirstItemFromData(state.data);
state.ariaActiveDescendant = firstItem === null ? '' : `option-${state.id}-${firstItem}`;
state.activeItem = -1;
} else {
state.ariaActiveDescendant = `option-${state.id}-${state.activeItem}`;
}
if (props.direction !== 'auto' && props.direction !== state.direction) {
state.direction = props.direction;
}
if (state.selectedItem !== null && parseFloat(state.selectedItem) > -1) {
state.currentTitle = getCurrentDataTitle(state.selectedItem, state.data);
}
state._data = props.data;
state._value = props.value;
state.groups = props.groups;
return state;
};
export const getCurrentDataTitle = (selectedItem, data) => {
const currentData = getCurrentData(selectedItem, data);
return parseContentTitle(currentData, {
separator: ' ',
preferSelectedValue: true
});
};
export const findClosest = (arr, val) => Math.max.apply(null, arr.filter(v => v <= val));
//# sourceMappingURL=DrawerListHelpers.js.map