@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
1,160 lines (1,158 loc) • 65.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("core-js/modules/es.string.replace.js");
require("core-js/modules/web.dom-collections.iterator.js");
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _componentHelper = require("../../shared/component-helper");
var _helpers = require("../../shared/helpers");
var _AlignmentHelper2 = _interopRequireDefault(require("../../shared/AlignmentHelper"));
var _SpacingHelper = require("../space/SpacingHelper");
var _filterValidProps = require("../../shared/helpers/filterValidProps");
var _Suffix = _interopRequireDefault(require("../../shared/helpers/Suffix"));
var _AriaLive = _interopRequireDefault(require("../aria-live/AriaLive"));
var _FormLabel = _interopRequireDefault(require("../form-label/FormLabel"));
var _FormStatus = _interopRequireDefault(require("../form-status/FormStatus"));
var _IconPrimary2 = _interopRequireDefault(require("../icon-primary/IconPrimary"));
var _Input = _interopRequireWildcard(require("../input/Input"));
var _ProgressIndicator = _interopRequireDefault(require("../progress-indicator/ProgressIndicator"));
var _DrawerList = _interopRequireWildcard(require("../../fragments/drawer-list/DrawerList"));
var _DrawerListContext = _interopRequireDefault(require("../../fragments/drawer-list/DrawerListContext"));
var _DrawerListProvider = _interopRequireDefault(require("../../fragments/drawer-list/DrawerListProvider"));
var _DrawerListHelpers = require("../../fragments/drawer-list/DrawerListHelpers");
var _IconPrimary, _AlignmentHelper;
const _excluded = ["fillDataIfEmpty"],
_excluded2 = ["title", "placeholder", "label", "label_direction", "label_sr_only", "icon", "icon_size", "input_icon", "size", "align_autocomplete", "fixed_position", "status", "status_state", "status_props", "status_no_animation", "globalStatus", "suffix", "scrollable", "focusable", "keep_open", "keep_value", "keep_value_and_selection", "show_clear_button", "prevent_close", "no_animation", "no_scroll_animation", "show_submit_button", "submit_element", "input_element", "options_render", "prevent_selection", "max_height", "default_value", "search_numbers", "search_in_word_index", "show_options_sr", "selected_sr", "submit_button_title", "submit_button_icon", "portal_class", "drawer_class", "input_ref", "className", "disabled", "stretch", "skeleton", "triangle_position", "icon_position", "skip_portal", "independent_width", "mode", "data", "children", "direction", "id", "opened", "value", "input_value", "indicator_label", "no_options", "show_all", "aria_live_options", "disable_highlighting"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
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 _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({
id: this._id
}, this.props)));
}
}
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: 3,
search_numbers: null,
default_value: null,
value: 'initval',
input_value: 'initval',
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 = _objectSpread(_objectSpread(_objectSpread({}, _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]),
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
}) : 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$input_value, _props$data, _state$prevData;
state.disableHighlighting = (0, _componentHelper.isTrue)(props.disable_highlighting);
if (props.input_value !== 'initval' && ((_props$input_value = props.input_value) === null || _props$input_value === void 0 ? void 0 : _props$input_value.length) > 0) {
state.inputValue = props.input_value;
}
if ((props === null || props === void 0 ? void 0 : (_props$data = props.data) === null || _props$data === void 0 ? void 0 : _props$data.length) > 0 && (state === null || state === void 0 ? 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) {
var _this;
super(_props);
_this = this;
_defineProperty(this, "setVisible", function () {
let args = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
let onStateComplete = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
_this.context.drawerList.setWrapperElement(_this._ref.current).setVisible(args, onStateComplete);
});
_defineProperty(this, "setHidden", function () {
let args = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
let onStateComplete = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
_this.context.drawerList.setHidden(args, onStateComplete);
_this.setState({
hasFocus: false,
hasBlur: false
});
});
_defineProperty(this, "toggleVisible", function () {
let args = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
let onStateComplete = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 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", function () {
let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
let onStateComplete = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
const skipFilter = _this.state.showAllNextTime;
if (skipFilter) {
_this.setState({
showAllNextTime: false,
_listenForPropChanges: false
});
}
_this.runFilterToHighlight(_objectSpread({
fillDataIfEmpty: true,
skipFilter
}, options));
_this.setVisible(null, onStateComplete);
});
_defineProperty(this, "onInputChangeHandler", _ref => {
let {
value,
event
} = _ref;
this.setState({
typedInputValue: value,
inputValue: value,
_listenForPropChanges: false
});
(0, _componentHelper.dispatchCustomElementEvent)(this, 'on_type', _objectSpread({
value,
event
}, this.getEventObjects('on_type')));
value = String(value).trim();
if (value !== this.state.inputValue) {
this.runFilterWithSideEffects(value);
}
});
_defineProperty(this, "runFilterWithSideEffects", function (value) {
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
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) {
_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 {
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.hasFocus) {
_this.setVisible();
}
return data;
});
_defineProperty(this, "runFilterToHighlight", function () {
let _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
let value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _this.state.inputValue;
let {
fillDataIfEmpty = false
} = _ref2,
options = _objectWithoutProperties(_ref2, _excluded);
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) {
data.push({
__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", () => {
if (this.state.mode === 'async') {
return;
}
this.resetActiveItem();
this.ignoreEvents();
this.context.drawerList.setData([{
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) {
this.showNoOptionsItem();
}
} else {
this.resetActiveItem();
if (this.context.drawerList.opened) {
this.showAllItems();
}
}
});
}, {
overwriteOriginalData: true
});
return this;
});
_defineProperty(this, "onInputKeyDownHandler", _ref3 => {
let {
event: e
} = _ref3;
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 '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();
}
(0, _componentHelper.dispatchCustomElementEvent)(this, 'on_focus', _objectSpread({
event
}, this.getEventObjects('on_focus')));
this.setState({
hasFocus: true,
hasBlur: false
});
}
});
_defineProperty(this, "reserveActivityHandler", function () {
let event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
_this.__preventFiringBlurEvent = Boolean(event.key === 'enter' || (event !== null && event !== void 0 && event.currentTarget ? (0, _componentHelper.getPreviousSibling)('dnb-drawer-list', event.currentTarget) || (0, _componentHelper.getPreviousSibling)('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', _objectSpread({
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: function (func) {
let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
let wait = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 250;
_this.dbf = _this.dbf || {};
return (_this.dbf[key] || (_this.dbf[key] = (0, _helpers.debounce)(func, wait, {
context: _this
})))(props);
}
};
});
_defineProperty(this, "hasInjectedDataItem", function () {
let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.context.drawerList.data;
const lastItem = data.slice(-1)[0];
return lastItem ? lastItem.show_all || lastItem.__id === 'no_options' : false;
});
_defineProperty(this, "countData", function () {
let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.context.drawerList.data;
const count = data.length;
return count > 0 && _this.hasInjectedDataItem(data) ? count - 1 : count;
});
_defineProperty(this, "hasValidData", function () {
let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _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", function () {
let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _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', _objectSpread({}, this.getEventObjects('on_change')));
}
});
});
_defineProperty(this, "resetFilter", () => {
this.context.drawerList.setData(this.context.drawerList.original_data);
});
_defineProperty(this, "runFilter", function (value) {
let {
data = null,
searchIndex = _this.state.searchIndex,
searchNumbers = (0, _componentHelper.isTrue)(_this.props.search_numbers),
inWordIndex = (parseFloat(_this.props.search_in_word_index) || 3) - 2,
disableHighlighting = false,
skipFilter = false,
skipReorder = false
} = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
if (data) {
searchIndex = _this.setSearchIndex({
data
});
} else if (!searchIndex) {
searchIndex = _this.setSearchIndex();
}
if (typeof searchIndex === 'undefined') {
return [];
}
const searchWords = (value === null || value === void 0 ? void 0 : value.split(/\s+/g).filter(Boolean)) || [];
const wordCond = '^|\\s';
const findSearchWords = contentChunk => {
if (typeof contentChunk !== 'string') {
return [];
}
return searchWords.map((word, wordIndex) => ({
word,
wordIndex
})).filter(_ref4 => {
let {
word,
wordIndex
} = _ref4;
if (searchNumbers) {
word = word.replace(/[^\p{L}\p{N}]+/gu, '');
} else {
word = (0, _componentHelper.escapeRegexChars)(word);
}
if (searchNumbers) {
word = word.replace(/(\d)/g, '$1+');
}
const regexWord = new RegExp(wordIndex > inWordIndex ? `${word}` : `(${wordCond})${word}`, 'i');
if (regexWord.test(contentChunk)) {
return true;
}
if (searchNumbers && regexWord.test(contentChunk.replace(/[^0-9]/g, ''))) {
return true;
}
return false;
}).map(_ref5 => {
let {
word,
wordIndex
} = _ref5;
let wordScore = 0;
wordScore += (contentChunk.match(new RegExp(`(${wordCond})${(0, _componentHelper.escapeRegexChars)(word)}`, 'ig')) || []).length;
if (wordIndex === 0) {
const isFirstWord = new RegExp(`^${(0, _componentHelper.escapeRegexChars)(searchWords[0])}`, 'i').test(contentChunk.split(' ')[0]);
if (isFirstWord) {
wordScore += searchWords.length + 1;
}
}
return {
word,
wordIndex,
wordScore
};
});
};
const strS = '\uFFFE';
const strE = '\uFFFF';
const tagS = '<span class="dnb-drawer-list__option__item--highlight">';
const tagE = '</span>';
searchIndex = searchIndex.map((item, i) => {
const listOfFoundWords = findSearchWords(item.contentChunk, i);
if (typeof item.dataItem === 'string') {
item.dataItem = {
content: item.dataItem
};
}
if (!item.dataItem.render) {
item.dataItem = _objectSpread({}, item.dataItem);
}
item.dataItem.render = (children, id) => {
var _children2, _children2$props;
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 ? void 0 : (_children2$props = _children2.props) === null || _children2$props === void 0 ? void 0 : _children2$props.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((_ref6, idx) => {
let {
originalChild,
segment
} = _ref6;
searchWords.forEach((word, wordIndex) => {
if (segment) {
word = (0, _componentHelper.escapeRegexChars)(word);
if (searchNumbers) {
word.split('').forEach(char => {
if (/[\p{L}\p{N}]/u.test(char)) {
segment = segment.replace(new RegExp(`(${char})`, 'gi'), `${strS}$1${strE}`);
}
});
} else {
if (wordIndex > inWordIndex) {
segment = segment.replace(new RegExp(`(${word})`, 'gi'), `${strS}$1${strE}`);
} else {
segment = segment.replace(new RegExp(`(${wordCond})(${word})`, 'gi'), `$1${strS}$2${strE}`);
}
}
}
});
let result = segment;
if (segment.includes(strS)) {
const __html = segment.replace(new RegExp(`(${strS})+`, 'g'), strS).replace(new RegExp(`(${strE})+`, 'g'), strE).replace(new RegExp(`(${strE}${strS})`, 'g'), '').replace(new RegExp(strS, 'g'), tagS).replace(new RegExp(strE, 'g'), tagE);
result = _react.default.createElement("span", {
key: cacheHash + idx,
dangerouslySetInnerHTML: {
__html
}
});
} else {
result = _react.default.createElement("span", {
key: cacheHash + idx
}, segment);
}
if (isComponent) {
var _originalChild$props;
if (Array.isArray(originalChild === null || originalChild === void 0 ? 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(_ref7 => {
let {
totalScore
} = _ref7;
return totalScore;
});
if (!_this.skipReorder && !skipReorder) {
searchIndex = searchIndex.sort((_ref8, _ref9) => {
let {
totalScore: a
} = _ref8;
let {
totalScore: b
} = _ref9;
return b - a;
});
}
searchIndex = searchIndex.map(_ref10 => {
let {
item
} = _ref10;
return item.dataItem;
});
}
return searchIndex;
});
_defineProperty(this, "onHideHandler", function () {
let args = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
const res = (0, _componentHelper.dispatchCustomElementEvent)(_this, 'on_hide', _objectSpread(_objectSpread({}, 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', _objectSpread(_objectSpread({}, args), this.getEventObjects('on_select')));
}
});
_defineProperty(this, "onPreChangeHandler", _ref11 => {
let {
data
} = _ref11;
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({