@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
1,232 lines (1,231 loc) • 62.8 kB
JavaScript
"use strict";
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 _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _componentHelper = require("../../shared/component-helper.js");
var _helpers = require("../../shared/helpers.js");
var _AlignmentHelper2 = _interopRequireDefault(require("../../shared/AlignmentHelper.js"));
var _SpacingHelper = require("../space/SpacingHelper.js");
var _filterValidProps = require("../../shared/helpers/filterValidProps.js");
var _Suffix = _interopRequireDefault(require("../../shared/helpers/Suffix.js"));
var _AriaLive = _interopRequireDefault(require("../aria-live/AriaLive.js"));
var _FormLabel = _interopRequireDefault(require("../form-label/FormLabel.js"));
var _FormStatus = _interopRequireDefault(require("../form-status/FormStatus.js"));
var _IconPrimary2 = _interopRequireDefault(require("../icon-primary/IconPrimary.js"));
var _Input = _interopRequireWildcard(require("../input/Input.js"));
var _ProgressIndicator = _interopRequireDefault(require("../progress-indicator/ProgressIndicator.js"));
var _DrawerList = _interopRequireDefault(require("../../fragments/drawer-list/DrawerList.js"));
var _DrawerListItem = require("../../fragments/drawer-list/DrawerListItem.js");
var _DrawerListContext = _interopRequireDefault(require("../../fragments/drawer-list/DrawerListContext.js"));
var _DrawerListProvider = _interopRequireDefault(require("../../fragments/drawer-list/DrawerListProvider.js"));
var _DrawerListHelpers = require("../../fragments/drawer-list/DrawerListHelpers.js");
var _IconPrimary, _AlignmentHelper;
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
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 _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 Autocomplete extends _react.default.PureComponent {
constructor(props) {
super(props);
this._id = props.id || (0, _componentHelper.makeUniqueId)();
}
render() {
return _react.default.createElement(_DrawerListProvider.default, _extends({}, this.props, {
id: this._id,
data: this.props.data || this.props.children,
opened: null,
tagName: "dnb-autocomplete",
ignore_events: false,
prevent_focus: true,
skip_keysearch: true
}), _react.default.createElement(AutocompleteInstance, _extends({}, this.props, {
id: this._id
})));
}
}
exports.default = Autocomplete;
_defineProperty(Autocomplete, "defaultProps", {
id: null,
mode: 'sync',
title: 'Option Menu',
placeholder: null,
no_options: null,
show_all: null,
aria_live_options: null,
indicator_label: null,
show_options_sr: null,
selected_sr: null,
submit_button_title: null,
submit_button_icon: 'chevron_down',
input_ref: null,
icon: null,
icon_size: null,
icon_position: 'left',
triangle_position: null,
input_icon: 'loupe',
label: null,
label_direction: null,
label_sr_only: null,
keep_value: null,
keep_selection: null,
keep_value_and_selection: null,
show_clear_button: null,
status: null,
status_state: 'error',
status_props: null,
status_no_animation: null,
globalStatus: null,
suffix: null,
disable_filter: false,
disable_reorder: false,
scrollable: true,
focusable: false,
disable_highlighting: false,
max_height: null,
direction: 'auto',
skip_portal: null,
no_animation: false,
no_scroll_animation: false,
show_submit_button: false,
submit_element: null,
prevent_selection: false,
size: 'default',
align_autocomplete: null,
options_render: null,
data: null,
search_in_word_index: null,
search_numbers: null,
default_value: null,
value: 'initval',
input_value: 'initval',
autoComplete: 'off',
open_on_focus: false,
prevent_close: false,
keep_open: false,
opened: null,
disabled: null,
stretch: null,
skeleton: null,
portal_class: null,
drawer_class: null,
page_offset: null,
observer_element: null,
enable_body_lock: false,
className: null,
children: null,
on_show: null,
on_hide: null,
on_type: null,
on_focus: null,
on_blur: null,
on_change: null,
on_select: null,
on_state_update: null,
input_element: null
});
process.env.NODE_ENV !== "production" ? Autocomplete.propTypes = {
..._SpacingHelper.spacingPropTypes,
..._DrawerListHelpers.drawerListPropTypes,
id: _propTypes.default.string,
mode: _propTypes.default.oneOf(['sync', 'async']),
title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
placeholder: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
no_options: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
show_all: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
aria_live_options: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
indicator_label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
show_options_sr: _propTypes.default.string,
selected_sr: _propTypes.default.string,
submit_button_title: _propTypes.default.string,
submit_button_icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.func]),
input_ref: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
icon_size: _propTypes.default.string,
icon_position: _propTypes.default.oneOf(['left', 'right']),
triangle_position: _propTypes.default.oneOf(['left', 'right']),
input_icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.func]),
label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.node]),
label_direction: _propTypes.default.oneOf(['horizontal', 'vertical']),
label_sr_only: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
keep_value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
keep_selection: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
keep_value_and_selection: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
show_clear_button: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
status: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool, _propTypes.default.func, _propTypes.default.node]),
status_state: _propTypes.default.string,
status_props: _propTypes.default.object,
status_no_animation: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
globalStatus: _propTypes.default.shape({
id: _propTypes.default.string,
message: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node])
}),
suffix: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.node]),
disable_filter: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
disable_reorder: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
scrollable: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
focusable: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
disable_highlighting: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
direction: _propTypes.default.oneOf(['auto', 'top', 'bottom']),
max_height: _propTypes.default.number,
skip_portal: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
no_animation: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
no_scroll_animation: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
show_submit_button: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
submit_element: _propTypes.default.node,
prevent_selection: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
size: _propTypes.default.oneOf(['default', 'small', 'medium', 'large']),
align_autocomplete: _propTypes.default.oneOf(['left', 'right']),
options_render: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func, _propTypes.default.node]),
input_element: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
data: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.node, _propTypes.default.object]), _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]), _propTypes.default.shape({
selectedKey: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
selected_key: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
selected_value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
suffix_value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
content: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.arrayOf(_propTypes.default.string)])
})]))]),
search_in_word_index: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
searchMatch: _propTypes.default.oneOf(['word', 'starts-with']),
search_numbers: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
default_value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
input_value: _propTypes.default.string,
open_on_focus: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
prevent_close: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
keep_open: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
opened: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
disabled: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
stretch: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
skeleton: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
portal_class: _propTypes.default.string,
drawer_class: _propTypes.default.string,
page_offset: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
observer_element: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
enable_body_lock: _propTypes.default.bool,
class: _propTypes.default.string,
className: _propTypes.default.string,
children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.node, _propTypes.default.object, _propTypes.default.array]),
on_show: _propTypes.default.func,
on_type: _propTypes.default.func,
on_focus: _propTypes.default.func,
on_blur: _propTypes.default.func,
on_hide: _propTypes.default.func,
on_change: _propTypes.default.func,
on_select: _propTypes.default.func,
on_state_update: _propTypes.default.func,
onClear: _propTypes.default.func
} : void 0;
class AutocompleteInstance extends _react.default.PureComponent {
static parseDataItem(dataItem) {
const searchWord = (0, _DrawerListHelpers.parseContentTitle)(dataItem.search_content || dataItem, {
separator: ' '
});
if (typeof searchWord !== 'string' && Array.isArray(searchWord)) {
return AutocompleteInstance.parseDataItem(searchWord);
}
return searchWord;
}
static createSearchIndex(data) {
return data.map(dataItem => {
const contentChunk = AutocompleteInstance.parseDataItem(dataItem);
return {
dataItem,
contentChunk
};
});
}
static getCurrentDataTitle(selected_item, data) {
const currentData = (0, _DrawerListHelpers.getCurrentData)(selected_item, data);
return (0, _DrawerListHelpers.parseContentTitle)(currentData, {
separator: ' ',
preferSelectedValue: true
});
}
static getDerivedStateFromProps(props, state) {
if (state._listenForPropChanges) {
var _props$data, _state$prevData;
state.disableHighlighting = (0, _componentHelper.isTrue)(props.disable_highlighting);
if (props.input_value !== 'initval') {
state.inputValue = props.input_value;
}
if ((props === null || props === void 0 || (_props$data = props.data) === null || _props$data === void 0 ? void 0 : _props$data.length) > 0 && (state === null || state === void 0 || (_state$prevData = state.prevData) === null || _state$prevData === void 0 ? void 0 : _state$prevData.length) === 0) {
let selectedItem = state.selected_item;
if (props.default_value) {
selectedItem = props.default_value;
}
if (!props.default_value && props.value && props.value !== 'initval') {
selectedItem = props.value;
}
const currentData = (0, _DrawerListHelpers.getCurrentData)(selectedItem, (0, _DrawerListHelpers.normalizeData)(props.data));
state.inputValue = (0, _DrawerListHelpers.parseContentTitle)(currentData, {
separator: ' ',
preferSelectedValue: true
});
}
if (props.data !== state.prevData) {
state.updateData(props.data);
state.prevData = props.data;
}
}
state._listenForPropChanges = true;
return state;
}
constructor(_props, context) {
super(_props);
_defineProperty(this, "setVisible", (args = null, onStateComplete = null) => {
this.wasVisible = true;
this.context.drawerList.setWrapperElement(this._ref.current).setVisible(args, onStateComplete);
});
_defineProperty(this, "setHidden", (args = null, onStateComplete = null) => {
this.context.drawerList.setHidden(args, onStateComplete);
this.setState({
hasFocus: false,
hasBlur: false
});
});
_defineProperty(this, "toggleVisible", (args = null, onStateComplete = null) => {
args = args || {};
if (typeof args.hasFilter === 'undefined') {
args.hasFilter = false;
}
if ((0, _componentHelper.isTrue)(this.props.disabled)) {
return;
}
if (!args.hasFilter && !(0, _componentHelper.isTrue)(this.props.prevent_close) && !this.context.drawerList.hidden && this.context.drawerList.isOpen) {
this.setHidden(null, onStateComplete);
} else {
this.setVisibleByContext(null, onStateComplete);
}
});
_defineProperty(this, "toggleVisibleAndFocusOptions", () => {
this.context.drawerList.toggleVisible(null, isVisible => {
if (isVisible) {
this.focusDrawerList();
}
});
});
_defineProperty(this, "setVisibleByContext", (options = {}, onStateComplete = null) => {
const skipFilter = this.state.showAllNextTime;
if (skipFilter) {
this.setState({
showAllNextTime: false,
_listenForPropChanges: false
});
}
this.runFilterToHighlight({
fillDataIfEmpty: true,
skipFilter,
...options
});
this.setVisible(null, onStateComplete);
});
_defineProperty(this, "onInputChangeHandler", ({
value,
event
}) => {
this.setState({
typedInputValue: value,
inputValue: value,
_listenForPropChanges: false
});
(0, _componentHelper.dispatchCustomElementEvent)(this, 'on_type', {
value,
event,
...this.getEventObjects('on_type')
});
value = String(value).trim();
if (value !== this.state.inputValue) {
this.runFilterWithSideEffects(value);
}
});
_defineProperty(this, "runFilterWithSideEffects", (value, options = {}) => {
const data = this.runFilter(value, options);
const count = this.countData(data);
const {
keep_value,
keep_selection,
keep_value_and_selection
} = this.props;
if ((value === null || value === void 0 ? void 0 : value.length) > 0) {
if (count === 0) {
if (this.state.mode !== 'async') {
this.showNoOptionsItem();
}
} else if (count > 0) {
this.context.drawerList.setData(this.wrapWithShowAll(data));
this.context.drawerList.setState({
cache_hash: value + count
});
if (count === 1) {
this.context.drawerList.setState({
active_item: data[0].__id
});
}
}
} else {
var _this$state$inputValu;
if (!(0, _componentHelper.isTrue)(keep_value) && !(0, _componentHelper.isTrue)(keep_selection) && !(0, _componentHelper.isTrue)(keep_value_and_selection)) {
this.totalReset();
} else if ((0, _componentHelper.isTrue)(keep_value)) {
this.resetSelectedItem();
}
this.showAllItems();
if (((_this$state$inputValu = this.state.inputValue) === null || _this$state$inputValu === void 0 ? void 0 : _this$state$inputValu.length) > 0) {
this.setVisible();
}
}
if (this.state.hasFocus) {
this.setVisible();
}
return data;
});
_defineProperty(this, "runFilterToHighlight", ({
fillDataIfEmpty = false,
...options
} = {}, value = this.state.inputValue) => {
const possibleTitle = AutocompleteInstance.getCurrentDataTitle(this.context.drawerList.selected_item, this.context.drawerList.original_data);
if (value === possibleTitle) {
return;
}
value = String(value || '').trim();
this.setState({
disableHighlighting: false,
_listenForPropChanges: false
});
let data = this.runFilter(value, options);
if (fillDataIfEmpty && data.length === 0 && value === '') {
data = this.context.drawerList.original_data;
}
this.context.drawerList.setData(this.wrapWithShowAll(data));
this.context.drawerList.setState({
cache_hash: value + this.countData(data)
});
return data;
});
_defineProperty(this, "wrapWithShowAll", data => {
if (!data || !this.hasFilterActive(data)) {
return data;
}
const lastItem = this.context.drawerList.original_data.slice(-1)[0];
if (lastItem && !lastItem.show_all) {
const lastActiveItem = data.slice(-1)[0];
if (lastActiveItem) {
(0, _push.default)(data).call(data, {
__id: lastItem.__id + 1,
lastActiveItem: lastActiveItem.__id,
class_name: 'dnb-autocomplete__show-all',
show_all: true,
active_item: false,
selected_item: false,
content: _react.default.createElement(_react.default.Fragment, null, _IconPrimary || (_IconPrimary = _react.default.createElement(_IconPrimary2.default, {
icon: "arrow_down"
})), this._props.show_all)
});
}
}
return data;
});
_defineProperty(this, "setInputValue", inputValue => {
this.setState({
inputValue,
_listenForPropChanges: false
});
});
_defineProperty(this, "emptyData", () => {
this._cacheMemory = {};
this.clearInputValue();
this.context.drawerList.setData(() => [], () => {
this.setSearchIndex({
overwriteSearchIndex: true
});
this.resetActiveItem();
this.totalReset();
}, {
overwriteOriginalData: true
});
});
_defineProperty(this, "clearInputValue", () => {
this.setState({
inputValue: '',
typedInputValue: null,
_listenForPropChanges: false
});
});
_defineProperty(this, "resetInputValue", () => {
const {
input_value,
keep_value,
keep_value_and_selection
} = this.props;
if ((0, _componentHelper.isTrue)(keep_value) || (0, _componentHelper.isTrue)(keep_value_and_selection) || input_value !== 'initval' && input_value.length > 0) {
return;
}
clearTimeout(this._selectTimeout);
this._selectTimeout = setTimeout(() => {
if (this.hasSelectedItem()) {
const inputValue = AutocompleteInstance.getCurrentDataTitle(this.context.drawerList.selected_item, this.context.drawerList.original_data);
this.setInputValue(inputValue);
} else {
this.clearInputValue();
}
}, 1);
});
_defineProperty(this, "showNoOptionsItem", () => {
this.resetActiveItem();
this.ignoreEvents();
this.context.drawerList.setData(this.props.no_options === false ? [] : [{
class_name: 'dnb-autocomplete__no-options',
content: this._props.no_options,
ignore_events: true,
__id: 'no_options'
}]);
this.context.drawerList.setState({
cache_hash: 'no_options'
});
this.setVisible();
});
_defineProperty(this, "showIndicatorItem", () => {
this.resetActiveItem();
this.ignoreEvents();
this.context.drawerList.setData([{
class_name: 'dnb-autocomplete__indicator',
content: _react.default.createElement(_ProgressIndicator.default, {
label: this._props.indicator_label
}),
ignore_events: true,
__id: 'indicator'
}]);
this.context.drawerList.setState({
cache_hash: 'indicator'
});
this.setVisible();
});
_defineProperty(this, "showIndicator", () => {
if (!this.state.visibleIndicator) {
this.setState({
visibleIndicator: true,
_listenForPropChanges: false
});
}
});
_defineProperty(this, "hideIndicator", () => {
this.setState({
visibleIndicator: false,
_listenForPropChanges: false
});
});
_defineProperty(this, "setMode", mode => {
this.setState({
mode,
_listenForPropChanges: false
});
});
_defineProperty(this, "revalidateInputValue", () => {
const {
input_value,
value
} = this.props;
if (input_value && input_value !== 'initval') {
return;
}
const selected_item = (0, _DrawerListHelpers.getCurrentIndex)(value, this.context.drawerList.original_data);
const inputValue = AutocompleteInstance.getCurrentDataTitle(selected_item, this.context.drawerList.original_data);
this.setInputValue(inputValue);
});
_defineProperty(this, "revalidateSelectedItem", () => {
const selected_item = (0, _DrawerListHelpers.getCurrentIndex)(this.props.value, this.context.drawerList.original_data);
this.context.drawerList.setState({
selected_item
});
});
_defineProperty(this, "hasDatasetChanged", rawData => {
const {
selected_item
} = this.context.drawerList;
if (parseFloat(selected_item) > -1) {
const newItem = rawData === null || rawData === void 0 ? void 0 : rawData[selected_item];
const oldItem = this.context.drawerList.original_data[selected_item];
if (typeof (newItem === null || newItem === void 0 ? void 0 : newItem.selectedKey) !== 'undefined' ? (newItem === null || newItem === void 0 ? void 0 : newItem.selectedKey) !== (oldItem === null || oldItem === void 0 ? void 0 : oldItem.selectedKey) : (newItem === null || newItem === void 0 ? void 0 : newItem.selected_key) !== (oldItem === null || oldItem === void 0 ? void 0 : oldItem.selected_key)) {
return true;
}
}
return false;
});
_defineProperty(this, "updateData", rawData => {
const hasChanged = this.hasDatasetChanged(rawData);
this.context.drawerList.setState({
cache_hash: 'updateData'
}, () => {
if (hasChanged) {
const {
value
} = this.props;
if (value && value !== 'initval') {
this.revalidateSelectedItem();
this.revalidateInputValue();
} else {
this.resetSelectedItem();
}
}
});
this.context.drawerList.setData(() => rawData, newData => {
this.setSearchIndex({
overwriteSearchIndex: true,
data: newData
}, () => {
const {
typedInputValue
} = this.state;
if ((typedInputValue === null || typedInputValue === void 0 ? void 0 : typedInputValue.length) > 0) {
const filteredData = this.runFilterWithSideEffects(typedInputValue);
if (this.countData(filteredData) === 0) {
if (this.state.mode !== 'async') {
this.showNoOptionsItem();
}
}
} else {
this.resetActiveItem();
if (this.context.drawerList.opened) {
this.showAllItems();
}
}
});
}, {
overwriteOriginalData: true
});
return this;
});
_defineProperty(this, "onInputKeyDownHandler", ({
event: e
}) => {
const key = (0, _componentHelper.keycode)(e);
switch (key) {
case 'page up':
case 'page down':
case 'home':
case 'end':
case 'down':
case 'up':
e.preventDefault();
break;
}
switch (key) {
case 'up':
case 'down':
if (!this.context.drawerList.opened) {
this.setVisible();
}
break;
case 'escape':
case 'esc':
this.setState({
showAllNextTime: true,
_listenForPropChanges: false
});
break;
case 'enter':
e.preventDefault();
if (!this.context.drawerList.opened && this.hasFilterActive()) {
this.ignoreEvents();
this.showAll();
}
if ((!this.hasValidData() || !this.hasSelectedItem()) && !this.hasActiveItem()) {
this.toggleVisible();
} else {
this.setVisible();
}
break;
}
});
_defineProperty(this, "onInputClickHandler", e => {
if (!this.context.drawerList.opened && this.hasFilterActive()) {
this.ignoreEvents();
this.showAll();
}
const {
value
} = e.target;
this.setVisibleByContext({
value
});
});
_defineProperty(this, "onInputFocusHandler", event => {
if (this.state.skipFocusDuringChange) {
return;
}
const {
open_on_focus,
keep_value_and_selection
} = this.props;
if (!this.state.hasFocus) {
if ((0, _componentHelper.isTrue)(open_on_focus) && this.hasValidData()) {
const {
value
} = event.target;
this.setVisibleByContext({
value
});
} else {
this.setSearchIndex();
}
if ((0, _componentHelper.isTrue)(keep_value_and_selection)) {
this.showAll();
}
this.setState({
hasFocus: true,
hasBlur: false
});
(0, _componentHelper.dispatchCustomElementEvent)(this, 'on_focus', {
event,
...this.getEventObjects('on_focus')
});
}
});
_defineProperty(this, "reserveActivityHandler", (event = null) => {
this.__preventFiringBlurEvent = Boolean(event.key === 'enter' || (event !== null && event !== void 0 && event.currentTarget ? (0, _componentHelper.getClosestParent)('dnb-drawer-list', event.currentTarget) || (0, _componentHelper.getClosestParent)('dnb-input__submit-button__button', event.currentTarget) : false));
if (this.__preventFiringBlurEvent) {
setTimeout(() => {
this.__preventFiringBlurEvent = false;
}, (0, _componentHelper.isTrue)(this.props.no_animation) ? 1 : _DrawerList.default.blurDelay);
}
});
_defineProperty(this, "onBlurHandler", event => {
if (this.__preventFiringBlurEvent || this.context.drawerList.hasFocusOnElement || this.state.hasBlur) {
this.__preventFiringBlurEvent = null;
return false;
}
const {
open_on_focus,
keep_value,
keep_value_and_selection,
prevent_selection,
no_animation
} = this.props;
this.setState({
hasBlur: true,
hasFocus: false
});
if (!(0, _componentHelper.isTrue)(keep_value) && !(0, _componentHelper.isTrue)(keep_value_and_selection)) {
this.setState({
typedInputValue: null,
_listenForPropChanges: false
});
}
if (!(0, _componentHelper.isTrue)(prevent_selection)) {
const existingValue = this.state.inputValue;
this.resetInputValue();
const resetAfterClose = () => {
if (!(0, _componentHelper.isTrue)(keep_value) || !existingValue || this.hasSelectedItem()) {
this.resetActiveItem();
}
this.resetFilter();
};
if ((0, _componentHelper.isTrue)(no_animation)) {
resetAfterClose();
} else {
clearTimeout(this._blurTimeout);
this._blurTimeout = setTimeout(resetAfterClose, _DrawerList.default.blurDelay);
}
}
if ((0, _componentHelper.isTrue)(open_on_focus)) {
this.setHidden();
}
(0, _componentHelper.dispatchCustomElementEvent)(this, 'on_blur', {
event,
...this.getEventObjects('on_blur')
});
});
_defineProperty(this, "onTriggerKeyDownHandler", e => {
const key = (0, _componentHelper.keycode)(e);
switch (key) {
case 'space':
case 'enter':
{
this.setVisible();
}
break;
}
switch (key) {
case 'space':
case 'enter':
case 'page up':
case 'page down':
case 'down':
case 'up':
{
e.preventDefault();
this.focusInput();
}
break;
}
});
_defineProperty(this, "focusDrawerList", () => {
try {
this.context.drawerList._refUl.current.focus({
preventScroll: true
});
} catch (e) {}
});
_defineProperty(this, "focusInput", () => {
try {
this._refInput.current._ref.current.focus({
preventScroll: true
});
} catch (e) {
(0, _componentHelper.warn)(e);
}
});
_defineProperty(this, "getEventObjects", key => {
const attributes = this.attributes;
return {
attributes,
dataList: this.context.drawerList.data,
updateData: this.updateData,
revalidateSelectedItem: this.revalidateSelectedItem,
revalidateInputValue: this.revalidateInputValue,
resetSelectedItem: this.resetSelectedItem,
clearInputValue: this.clearInputValue,
showAllItems: this.showAllItems,
setVisible: this.setVisible,
resetInputValue: this.resetInputValue,
setHidden: this.setHidden,
emptyData: this.emptyData,
focusInput: this.focusInput,
setInputValue: this.setInputValue,
showNoOptionsItem: this.showNoOptionsItem,
showIndicatorItem: this.showIndicatorItem,
showIndicator: this.showIndicator,
hideIndicator: this.hideIndicator,
setMode: this.setMode,
debounce: (func, props = {}, wait = 250) => {
this.dbf = this.dbf || {};
return (this.dbf[key] || (this.dbf[key] = (0, _helpers.debounce)(func, wait, {
context: this
})))(props);
}
};
});
_defineProperty(this, "hasInjectedDataItem", (data = this.context.drawerList.data) => {
const lastItem = data.slice(-1)[0];
return lastItem ? lastItem.show_all || lastItem.__id === 'no_options' : false;
});
_defineProperty(this, "countData", (data = this.context.drawerList.data) => {
const count = data.length;
return count > 0 && this.hasInjectedDataItem(data) ? count - 1 : count;
});
_defineProperty(this, "hasValidData", (data = this.context.drawerList.data) => {
if (this.countData(data) > 0) {
const first = data[0];
if (!first.show_all && !['no_options', 'indicator'].includes(first.__id)) {
return true;
}
}
return false;
});
_defineProperty(this, "hasSelectedItem", () => {
return parseFloat(this.context.drawerList.selected_item) > -1;
});
_defineProperty(this, "hasActiveItem", () => {
return parseFloat(this.context.drawerList.active_item) > -1;
});
_defineProperty(this, "hasFilterActive", (data = this.context.drawerList.data) => {
return !(this.context.drawerList.original_data && this.context.drawerList.original_data.length === this.countData(data));
});
_defineProperty(this, "ignoreEvents", () => {
clearTimeout(this.showAllTimeout);
this.context.drawerList.setState({
ignore_events: true
}, () => {
this.showAllTimeout = setTimeout(() => {
this.context && this.context.drawerList && this.context.drawerList.setState({
ignore_events: false
});
}, 10);
});
});
_defineProperty(this, "showAll", () => {
this.resetFilter();
this.context.drawerList.setState({
cache_hash: 'all'
});
this.runFilterToHighlight({
skipFilter: true,
fillDataIfEmpty: true
});
});
_defineProperty(this, "showAllItems", () => {
this.resetFilter();
this.context.drawerList.setState({
cache_hash: 'all'
});
this.context.drawerList.setActiveItemAndScrollToIt(this.context.drawerList.selected_item, {
scrollTo: false
});
});
_defineProperty(this, "totalReset", () => {
this.setState({
inputValue: null,
typedInputValue: null,
_listenForPropChanges: false
});
this.resetActiveItem();
this.resetSelectedItem();
});
_defineProperty(this, "resetActiveItem", () => {
this.context.drawerList.setState({
active_item: null
});
});
_defineProperty(this, "resetSelectedItem", () => {
const hasHadValue = this.hasSelectedItem();
this.context.drawerList.setState({
selected_item: null
}, () => {
if (hasHadValue) {
(0, _componentHelper.dispatchCustomElementEvent)(this, 'on_change', {
...this.getEventObjects('on_change')
});
}
});
});
_defineProperty(this, "resetFilter", () => {
this.context.drawerList.setData(this.context.drawerList.original_data);
});
_defineProperty(this, "runFilter", (value, {
data = null,
searchIndex = this.state.searchIndex,
searchNumbers = (0, _componentHelper.isTrue)(this.props.search_numbers),
inWordIndex = parseFloat((_this$props$search_in => (_this$props$search_in = this.props.search_in_word_index) !== null && _this$props$search_in !== void 0 ? _this$props$search_in : this.skipFilter ? 1 : 3)()) - 1,
disableHighlighting = false,
skipFilter = false,
skipReorder = false
} = {}) => {
if (data) {
searchIndex = this.setSearchIndex({
data
});
} else if (!searchIndex) {
searchIndex = this.setSearchIndex();
}
if (typeof searchIndex === 'undefined') {
return [];
}
const startsWithMatch = this.props.searchMatch === 'starts-with';
const rawValue = value !== null && value !== void 0 ? value : '';
let searchWords = rawValue.split(/\s+/g).filter(Boolean);
if (startsWithMatch) {
const hasLetters = /[\p{L}]/u.test(rawValue);
const hasNumbers = /[\p{N}]/u.test(rawValue);
if (startsWithMatch && searchNumbers && hasNumbers && !hasLetters) {
const normalizedNumeric = rawValue.replace(/[^\p{N}]+/gu, '');
searchWords = normalizedNumeric ? [normalizedNumeric] : [];
}
}
const getWordBoundary = wordIndex => startsWithMatch && wordIndex === 0 ? '^' : searchNumbers ? '' : '^|\\s';
const searchWordsData = searchWords.map((word, wordIndex) => {
const processedWord = searchNumbers ? word.replace(/[^\p{L}\p{N}]+/gu, '') : (0, _componentHelper.escapeRegexChars)(word);
const wordBoundary = getWordBoundary(wordIndex);
return {
originalWord: word,
processedWord,
wordIndex,
filterRegex: new RegExp(wordIndex >= inWordIndex ? `${processedWord}` : `(${wordBoundary})${processedWord}`, 'i'),
scoreRegex: new RegExp(`(${wordBoundary})${(0, _componentHelper.escapeRegexChars)(word)}`, 'ig')
};
});
const firstWordRegex = searchWords.length > 0 ? new RegExp(`^${(0, _componentHelper.escapeRegexChars)(searchWords[0])}`, 'i') : null;
const findSearchWords = contentChunk => {
if (typeof contentChunk !== 'string') {
return [];
}
return searchWordsData.filter(({
filterRegex,
processedWord
}) => {
if (filterRegex.test(contentChunk)) {
return true;
}
if (searchNumbers && filterRegex.test(contentChunk.replace(/[^0-9]/g, ''))) {
return true;
}
return false;
}).map(({
originalWord,
wordIndex,
scoreRegex
}) => {
let wordScore = 0;
wordScore += (contentChunk.match(scoreRegex) || []).length;
if (wordIndex === 0 && firstWordRegex) {
const isFirstWord = firstWordRegex.test(contentChunk.split(' ')[0]);
if (isFirstWord) {
wordScore += searchWords.length + 1;
}
}
return {
word: originalWord,
wordIndex,
wordScore
};
});
};
const strS = '\uFFFE';
const strE = '\uFFFF';
searchIndex = searchIndex.map((item, i) => {
const listOfFoundWords = findSearchWords(item.contentChunk, i);
const allWordsAreNumeric = searchNumbers ? searchWords.every(word => /^[\p{N}\s.,]+$/u.test(word)) : false;
const hasMultipleNumericTerms = searchNumbers && searchWords && searchWords.length > 1 && allWordsAreNumeric;
if (hasMultipleNumericTerms && listOfFoundWords.length !== searchWords.length) {
return {
totalScore: 0,
item
};
}
if (typeof item.dataItem === 'string') {
item.dataItem = {
content: item.dataItem
};
}
if (!item.dataItem.render) {
item.dataItem = {
...item.dataItem
};
}
item.dataItem.render = (children, id) => {
var _children2;
if (disableHighlighting || this.state.disableHighlighting) {
return children;
}
const cacheHash = id + value;
this._cacheMemory = this._cacheMemory || {};
if (this._cacheMemory[cacheHash]) {
return this._cacheMemory[cacheHash];
}
const isComponent = typeof children !== 'string' && _react.default.isValidElement(children);
if (isComponent && Array.isArray((_children2 = children) === null || _children2 === void 0 || (_children2 = _children2.props) === null || _children2 === void 0 ? void 0 : _children2.children)) {
children = children.props.children;
} else if (!Array.isArray(children)) {
children = [children];
}
children = children.map(originalChild => ({
originalChild,
segment: (0, _componentHelper.convertJsxToString)(originalChild, ' ')
}));
children = children.map(({
originalChild,
segment
}, idx) => {
searchWords.forEach((word, wordIndex) => {
if (segment) {
word = (0, _componentHelper.escapeRegexChars)(word);
if (searchNumbers) {
const cleanedWord = word.replace(/[^\p{L}\p{N}]+/gu, '');
if (cleanedWord) {
const escapedWord = (0, _componentHelper.escapeRegexChars)(cleanedWord);
segment = segment.replace(new RegExp(`(${escapedWord})`, 'gi'), match => {
if (match.includes(strS)) {
return match;
}
return `${strS}${match}${strE}`;
});
}
} else {
if (wordIndex >= inWordIndex) {
segment = segment.replace(new RegExp(`(${word})`, 'gi'), `${strS}$1${strE}`);
} else {
segment = segment.replace(new RegExp(`(${getWordBoundary(wordIndex)})(${word})`, 'gi'), `$1${strS}$2${strE}`);
}
}
}
});
let result = segment;
if (segment.includes(strS)) {
const startRepeatRegex = new RegExp(`(${strS})+`, 'g');
const endRepeatRegex = new RegExp(`(${strE})+`, 'g');
const adjacentRegex = new RegExp(`(${strE}${strS})`, 'g');
const splitRegex = new RegExp(`(${strS}|${strE})`, 'g');
const normalized = segment.replace(startRepeatRegex, strS).replace(endRepeatRegex, strE).replace(adjacentRegex, '');
const tokens = normalized.split(splitRegex).filter(Boolean);
let isHighlighted = false;
let highlightIndex = 0;
const parts = tokens.map(token => {
if (token === strS) {
isHighlighted = true;
return null;
}
if (token === strE) {
isHighlighted = false;
return null;
}
if (isHighlighted) {
const key = `highlight-${cacheHash}-${idx}-${highlightIndex++}`;
return _react.default.createElement("span", {
key: key,
className: "dnb-drawer-list__option__item--highlight"
}, token);
}
return token;
});
result = _react.default.createElement("span", {
key: cacheHash + idx
}, parts);
} else {
result = _react.default.createElement("span", {
key: cacheHash + idx
}, segment);
}
if (isComponent) {
var _originalChild$props;
if (Array.isArray(originalChild === null || originalChild === void 0 || (_originalChild$props = originalChild.props) === null || _originalChild$props === void 0 ? void 0 : _originalChild$props.children)) {
result = originalChild.props.children.map(Comp => {
return Comp === originalChild || Comp.props && Comp.props.children === originalChild ? result : Comp;
});
} else if (typeof originalChild === 'string') {
result = originalChild;
}
if (_react.default.isValidElement(originalChild)) {
result = _react.default.cloneElement(originalChild, {
key: 'clone' + cacheHash + idx
}, result);
}
}
return result;
});
return this._cacheMemory[cacheHash] = children;
};
if (this.skipFilter || skipFilter) {
return item.dataItem;
}
let totalScore = listOfFoundWords.length;
for (const {
wordScore
} of listOfFoundWords) {
totalScore += wordScore;
}
return {
totalScore,
item
};
});
if (!this.skipFilter && !skipFilter) {
searchIndex = searchIndex.filter(({
totalScore
}) => totalScore);
if (!this.skipReorder && !skipReorder) {
searchIndex = searchIndex.sort(({
totalScore: a
}, {
totalScore: b
}) => b - a);
}
searchIndex = searchIndex.map(({
item
}) => item.dataItem);
}
return searchIndex;
});
_defineProperty(this, "onHideHandler", (args = {}) => {
const res = (0, _componentHelper.dispatchCustomElementEvent)(this, 'on_hide', {
...args,
...this.getEventObjects('on_hide')
});
if (res !== false) {
this.setFocusOnInput();
}
return res;
});
_defineProperty(this, "setVisibleAndFocusOnInput", () => {
if (!this.state.hasFocus && !(0, _helpers.hasSelectedText)()) {
this.setFocusOnInput();
this.setVisible();
}
});
_defineProperty(this, "onSelectHandler", args => {
if (parseFloat(args.active_item) > -1) {
(0, _componentHelper.dispatchCustomElementEvent)(this, 'on_select', {
...args,
...this.getEventObjects('on_select')
});
}
});
_defineProperty(this, "onPreChangeHandler", ({
data
}) => {
if (data && data.show_all) {
this.showAll();
const active_item = data.lastActiveItem;
if (parseFloat(active_item) > -1) {
this.context.drawerList.setActiveItemAndScrollToIt(active_item, {
scrollTo: false
});
}
this.setFocusOnInput();
return false;
}
});
_defineProperty(this, "onChangeHandler", args => {
var _args$data;
const selected_item = args.selected_item;
const {
prevent_selection,
keep_open
} = this.props;
if (!(0, _componentHelper.isTrue)(prevent_selection)) {
if (!(0, _componentHelper.isTrue)(keep_open)) {
this.setState({
skipFocusDuringChange: true,
disableHighlighting: true,
_listenForPropChanges: false
});
this.setHidden();
this.focusDrawerList();
this.setState({
skipFocusDuringChange: false,
_listenForPropChanges: false
}, () => this.setFocusOnInput());
}
const inputValue = AutocompleteInstance.getCurrentDataTitle(selected_item, this.context.drawerList.data);
this.setInputValue(inputValue);
}
if (typeof ((_args$data = args.data) === null || _args$data === void 0 ? void 0 : _args$data.render) === 'function') {
delete args.data.render;
}
(0, _componentHelper.dispatchCustomElementEvent)(this, 'on_change', {
...args,
...this.getEventObjects('on_change')
});
});
this.attributes = {};
this.state = this.state || {};
this.state._listenForPropChanges = true;
this.state.mode = _props.mode;
this.state.prevData = _props.data;
this.state.updateData = this.updateData;
if (context.drawerList && context.drawerList.current_title) {
this.state.inputValue = context.drawerList.current_title;
}
this._ref = _react.default.createRef();
this._refShell = _react.default.createRef();
this._refInput = _react.default.createRef();
this.isTouchDevice = (0, _componentHelper.isTouchDevice)();
this.skipFilter = (0, _componentHelper.isTrue)(_props.disable_filter);
this.skipReorder = (0, _componentHelper.isTrue)(_props.disable_reorder);
this.wasVisible = false;
}
componentDidMount() {
if ((0, _componentHelper.isTrue)(this.props.opened)) {
this.runFilterToHighlight({
fillDataIfEmpty: true
});
this.setVisible();
}
}
componentDidUpdate(prevProps) {
if ((this.context.drawerList.opened || this.state.hasFocus) && prevProps.data !=