Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
adintel-lib-poc
Advanced tools
adintel-lib-poc - npm Package Compare versions
Comparing version 0.1.6 to 0.1.7
@@ -5,11 +5,59 @@ 'use strict'; | ||
| function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } | ||
| var React = require('react'); | ||
| require('@fortawesome/react-fontawesome'); | ||
| require('@fortawesome/free-regular-svg-icons'); | ||
| var reactFontawesome = require('@fortawesome/react-fontawesome'); | ||
| var freeRegularSvgIcons = require('@fortawesome/free-regular-svg-icons'); | ||
| require('flatpickr/dist/themes/material_green.css'); | ||
| require('react-flatpickr'); | ||
| require('@fortawesome/free-solid-svg-icons'); | ||
| require('canvas'); | ||
| require('moment'); | ||
| var Flatpickr = _interopDefault(require('react-flatpickr')); | ||
| var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons'); | ||
| var canvas = require('canvas'); | ||
| var moment = _interopDefault(require('moment')); | ||
| function _extends() { | ||
| _extends = Object.assign ? Object.assign.bind() : function (target) { | ||
| for (var i = 1; i < arguments.length; i++) { | ||
| var source = arguments[i]; | ||
| for (var key in source) { | ||
| if (Object.prototype.hasOwnProperty.call(source, key)) { | ||
| target[key] = source[key]; | ||
| } | ||
| } | ||
| } | ||
| return target; | ||
| }; | ||
| return _extends.apply(this, arguments); | ||
| } | ||
| function _unsupportedIterableToArray(o, minLen) { | ||
| if (!o) return; | ||
| if (typeof o === "string") return _arrayLikeToArray(o, minLen); | ||
| var n = Object.prototype.toString.call(o).slice(8, -1); | ||
| if (n === "Object" && o.constructor) n = o.constructor.name; | ||
| if (n === "Map" || n === "Set") return Array.from(o); | ||
| if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); | ||
| } | ||
| function _arrayLikeToArray(arr, len) { | ||
| if (len == null || len > arr.length) len = arr.length; | ||
| for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; | ||
| return arr2; | ||
| } | ||
| function _createForOfIteratorHelperLoose(o, allowArrayLike) { | ||
| var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; | ||
| if (it) return (it = it.call(o)).next.bind(it); | ||
| if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { | ||
| if (it) o = it; | ||
| var i = 0; | ||
| return function () { | ||
| if (i >= o.length) return { | ||
| done: true | ||
| }; | ||
| return { | ||
| done: false, | ||
| value: o[i++] | ||
| }; | ||
| }; | ||
| } | ||
| throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); | ||
| } | ||
| (function (buttonSize) { | ||
@@ -86,2 +134,46 @@ buttonSize["small"] = "small"; | ||
| })(tooltipPosition || (tooltipPosition = {})); | ||
| var Tooltip = function Tooltip(_ref) { | ||
| var children = _ref.children, | ||
| text = _ref.text, | ||
| position = _ref.position; | ||
| var tooltipRef = React.useRef(null); | ||
| var tooltipTextRef = React.useRef(null); | ||
| var showTooltip = function showTooltip() { | ||
| return tooltipTextRef.current.style.visibility = 'visible'; | ||
| }; | ||
| var hideTooltip = function hideTooltip() { | ||
| return tooltipTextRef.current.style.visibility = 'hidden'; | ||
| }; | ||
| React.useEffect(function () { | ||
| var tooltip = tooltipRef.current; | ||
| if (tooltip) { | ||
| tooltip.addEventListener('mouseenter', showTooltip); | ||
| tooltip.addEventListener('mouseleave', hideTooltip); | ||
| } | ||
| if (!position) { | ||
| var tooltipTextElement = tooltipTextRef.current; | ||
| if (tooltip && tooltipTextElement) { | ||
| if (tooltipTextElement.getBoundingClientRect().top < 0) tooltip.className = 'bottom-tooltip'; | ||
| if (tooltip.getBoundingClientRect().left + tooltipTextElement.getBoundingClientRect().width > screen.width) tooltip.className = 'left-tooltip'; | ||
| } | ||
| } | ||
| return function () { | ||
| return tooltipRef.current && tooltipRef.current.removeEventListener('mouseenter', showTooltip); | ||
| }; | ||
| }, []); | ||
| return text ? React.createElement("div", { | ||
| ref: tooltipRef, | ||
| className: position ? position : 'top-tooltip', | ||
| onClick: function onClick(event) { | ||
| event.stopPropagation(); | ||
| tooltipTextRef.current.style.visibility = 'hidden'; | ||
| } | ||
| }, children, React.createElement("span", { | ||
| ref: tooltipTextRef, | ||
| className: 'tooltiptext', | ||
| onMouseEnter: function onMouseEnter(event) { | ||
| return event.preventDefault(); | ||
| } | ||
| }, text)) : children; | ||
| }; | ||
@@ -95,3 +187,112 @@ var inputType; | ||
| })(inputType || (inputType = {})); | ||
| var TextInput = function TextInput(props) { | ||
| var id = props.id, | ||
| name = props.name, | ||
| type = props.type, | ||
| customClass = props.customClass, | ||
| placeholder = props.placeholder, | ||
| value = props.value, | ||
| onChange = props.onChange, | ||
| _props$tabIndex = props.tabIndex, | ||
| tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex, | ||
| _props$disabled = props.disabled, | ||
| disabled = _props$disabled === void 0 ? false : _props$disabled, | ||
| _props$hasError = props.hasError, | ||
| hasError = _props$hasError === void 0 ? false : _props$hasError, | ||
| _props$autofocus = props.autofocus, | ||
| autofocus = _props$autofocus === void 0 ? false : _props$autofocus, | ||
| reference = props.reference, | ||
| onKeyUp = props.onKeyUp, | ||
| title = props.title, | ||
| _props$spellCheck = props.spellCheck, | ||
| spellCheck = _props$spellCheck === void 0 ? true : _props$spellCheck, | ||
| onBlur = props.onBlur, | ||
| onClick = props.onClick, | ||
| onKeyDown = props.onKeyDown, | ||
| step = props.step, | ||
| min = props.min, | ||
| onKeyPress = props.onKeyPress, | ||
| maxLength = props.maxLength; | ||
| return React.createElement(Tooltip, { | ||
| text: title | ||
| }, React.createElement("input", { | ||
| id: id, | ||
| "aria-label": id, | ||
| autoComplete: 'off', | ||
| name: name, | ||
| placeholder: placeholder, | ||
| value: value, | ||
| type: type, | ||
| className: "input " + (hasError ? 'input-error' : '') + (customClass ? customClass : '') + " " + (disabled ? 'disabled' : ''), | ||
| onChange: onChange, | ||
| tabIndex: tabIndex, | ||
| disabled: disabled, | ||
| autoFocus: autofocus, | ||
| ref: reference, | ||
| onKeyUp: onKeyUp, | ||
| onKeyDown: onKeyDown, | ||
| spellCheck: spellCheck, | ||
| onBlur: onBlur, | ||
| onClick: onClick, | ||
| "data-test-id": id || '', | ||
| "data-test-class": customClass || '', | ||
| step: step, | ||
| min: min, | ||
| onKeyPress: onKeyPress, | ||
| maxLength: maxLength | ||
| })); | ||
| }; | ||
| var DatePickerCom = function DatePickerCom(props) { | ||
| var id = props.id, | ||
| name = props.name, | ||
| date = props.date, | ||
| _onChange = props.onChange, | ||
| minDate = props.minDate, | ||
| maxDate = props.maxDate, | ||
| placeholder = props.placeholder, | ||
| clearDate = props.clearDate, | ||
| disabled = props.disabled, | ||
| reference = props.reference, | ||
| small = props.small, | ||
| customClass = props.customClass; | ||
| return React.createElement("div", { | ||
| className: small ? 'date-picker-small' : 'date-picker' | ||
| }, React.createElement(Flatpickr, { | ||
| ref: reference, | ||
| id: id, | ||
| "data-test-id": id || '', | ||
| name: name, | ||
| className: customClass + " date-picker-input " + (disabled ? ' disabled' : ''), | ||
| value: date, | ||
| options: { | ||
| minDate: minDate, | ||
| maxDate: maxDate, | ||
| dateFormat: 'm-d-Y' | ||
| }, | ||
| placeholder: placeholder, | ||
| autocomplete: 'off', | ||
| disabled: disabled, | ||
| "data-selected-date": date, | ||
| onChange: function onChange(changedDate) { | ||
| if (_onChange) _onChange(changedDate[0]);else return; | ||
| } | ||
| }), React.createElement("div", { | ||
| className: 'icon-container' | ||
| }, date ? React.createElement(Button, { | ||
| id: id, | ||
| customClass: 'cross', | ||
| onClick: clearDate, | ||
| disabled: disabled | ||
| }, React.createElement(reactFontawesome.FontAwesomeIcon, { | ||
| icon: freeSolidSvgIcons.faTimes, | ||
| className: disabled ? 'cross-icon disabled' : 'cross-icon' | ||
| })) : React.createElement("label", { | ||
| htmlFor: id, | ||
| className: disabled ? 'calender-icon disabled' : 'calender-icon' | ||
| }, React.createElement(reactFontawesome.FontAwesomeIcon, { | ||
| icon: freeRegularSvgIcons.faCalendarAlt | ||
| })))); | ||
| }; | ||
| var SearchResultType; | ||
@@ -108,3 +309,97 @@ (function (SearchResultType) { | ||
| })(ColumnTypes || (ColumnTypes = {})); | ||
| var inOperator = { | ||
| label: 'IN', | ||
| value: 'in', | ||
| type: 'any' | ||
| }; | ||
| var notInOperator = { | ||
| label: 'NOT IN', | ||
| value: 'not in', | ||
| type: 'any' | ||
| }; | ||
| var orderByOperator = { | ||
| label: 'ORDER BY', | ||
| value: 'order by' | ||
| }; | ||
| var byOperator = { | ||
| label: 'BY', | ||
| value: 'by' | ||
| }; | ||
| var orderOperator = { | ||
| label: 'ORDER', | ||
| value: 'order' | ||
| }; | ||
| var conditionalOperators = [{ | ||
| label: '=', | ||
| value: '=', | ||
| type: 'any' | ||
| }, { | ||
| label: '<', | ||
| value: '<', | ||
| type: 'number' | ||
| }, { | ||
| label: '>', | ||
| value: '>', | ||
| type: 'number' | ||
| }, { | ||
| label: '<=', | ||
| value: '<=', | ||
| type: 'number' | ||
| }, { | ||
| label: '>=', | ||
| value: '>=', | ||
| type: 'number' | ||
| }, { | ||
| label: '!=', | ||
| value: '>=', | ||
| type: 'any' | ||
| }, inOperator, notInOperator]; | ||
| var sortingOperators = [{ | ||
| label: 'ASC', | ||
| value: 'asc' | ||
| }, { | ||
| label: 'DESC', | ||
| value: 'desc' | ||
| }]; | ||
| var logicalOperators = [{ | ||
| label: 'AND', | ||
| value: 'and' | ||
| }, { | ||
| label: 'OR', | ||
| value: 'or' | ||
| }, orderByOperator]; | ||
| var notOperator = { | ||
| label: 'NOT', | ||
| value: 'not' | ||
| }; | ||
| var datePickerDefaultLeftMargin = 76; | ||
| var SingleSelectResultOption = function SingleSelectResultOption(props) { | ||
| var option = props.option, | ||
| _onClick = props.onClick, | ||
| focus = props.focus, | ||
| index = props.index, | ||
| onkeyPressed = props.onkeyPressed, | ||
| optionRef = props.optionRef; | ||
| var value = option.value, | ||
| label = option.label; | ||
| React.useEffect(function () { | ||
| if (focus) { | ||
| if (optionRef && optionRef.current) optionRef.current.focus(); | ||
| } | ||
| }, [focus]); | ||
| return React.createElement(Button, { | ||
| key: value, | ||
| btnRef: optionRef, | ||
| onClick: function onClick() { | ||
| return _onClick(option); | ||
| }, | ||
| customClass: 'option', | ||
| tabIndex: 0, | ||
| onKeyDown: function onKeyDown(event) { | ||
| onkeyPressed(event, index); | ||
| } | ||
| }, React.createElement("div", null, label)); | ||
| }; | ||
| var keyCode; | ||
@@ -127,3 +422,606 @@ (function (keyCode) { | ||
| var SingleSelectSearchResult = function SingleSelectSearchResult(_ref) { | ||
| var options = _ref.options, | ||
| onOptionClick = _ref.onOptionClick, | ||
| highlight = _ref.highlight, | ||
| setShowResults = _ref.setShowResults; | ||
| var _useState = React.useState(), | ||
| focus = _useState[0], | ||
| setFocus = _useState[1]; | ||
| var selectedRefs = React.useRef([]); | ||
| React.useEffect(function () { | ||
| selectedRefs.current = Array(options.length).fill(null).map(function (_, i) { | ||
| return selectedRefs.current[i] || React.createRef(); | ||
| }); | ||
| }, [options]); | ||
| var handleKeyDown = function handleKeyDown(event, index) { | ||
| if (event.keyCode === keyCode.Down) { | ||
| setFocus(index + 1); | ||
| } else if (event.keyCode === keyCode.Up) { | ||
| setFocus(index - 1); | ||
| } else if (event.keyCode === keyCode.Tab) { | ||
| setShowResults(false); | ||
| } | ||
| if (selectedRefs.current[index] && selectedRefs.current[index].current) { | ||
| selectedRefs.current[index].current.scrollIntoView({ | ||
| block: 'center', | ||
| behavior: 'auto' | ||
| }); | ||
| } | ||
| }; | ||
| return React.createElement("div", { | ||
| className: 'search-body' | ||
| }, options && options.length > 0 ? React.createElement("div", null, React.createElement("div", { | ||
| className: 'options scroller' | ||
| }, options.map(function (inSearchOption, index) { | ||
| return React.createElement(SingleSelectResultOption, { | ||
| key: index, | ||
| option: inSearchOption, | ||
| onClick: onOptionClick, | ||
| index: index, | ||
| focus: focus === index, | ||
| onkeyPressed: handleKeyDown, | ||
| highlight: highlight, | ||
| optionRef: selectedRefs.current[index] | ||
| }); | ||
| }))) : null); | ||
| }; | ||
| var DynamicCustomResultRenderer = function DynamicCustomResultRenderer(_ref) { | ||
| var searchResultType = _ref.searchResultType, | ||
| searchResults = _ref.searchResults, | ||
| _ref$onOptionClick = _ref.onOptionClick, | ||
| onOptionClick = _ref$onOptionClick === void 0 ? function () {} : _ref$onOptionClick, | ||
| highlight = _ref.highlight, | ||
| setShowResults = _ref.setShowResults, | ||
| datePickerPosition = _ref.datePickerPosition; | ||
| var dateRef = React.useRef(null); | ||
| var _useState = React.useState(false), | ||
| datePicker = _useState[0], | ||
| toggleDatePicker = _useState[1]; | ||
| React.useEffect(function () { | ||
| if (dateRef.current && searchResultType === SearchResultType.datePicker) { | ||
| dateRef.current.flatpickr.open(); | ||
| toggleDatePicker(!datePicker); | ||
| } else toggleDatePicker(!datePicker); | ||
| }, [datePickerPosition]); | ||
| React.useEffect(function () { | ||
| if (datePickerPosition && searchResultType === SearchResultType.datePicker && dateRef.current) { | ||
| var newLeftValue = parseInt(datePickerPosition.left, 10); | ||
| dateRef.current.flatpickr.calendarContainer.style.left = (newLeftValue > datePickerPosition.inputLeft ? datePickerPosition.inputLeft - 50 : newLeftValue) + 'px'; | ||
| dateRef.current.flatpickr.open(); | ||
| } | ||
| }, [datePicker]); | ||
| if (searchResultType === SearchResultType.singleSelect) return React.createElement(SingleSelectSearchResult, { | ||
| options: searchResults ? searchResults : [], | ||
| onOptionClick: onOptionClick, | ||
| highlight: highlight, | ||
| setShowResults: setShowResults | ||
| }); | ||
| if (searchResultType === SearchResultType.datePicker) return React.createElement(DatePickerCom, { | ||
| reference: dateRef, | ||
| date: new Date(), | ||
| onChange: function onChange(selectedDate) { | ||
| return onOptionClick(moment(selectedDate).format('MM-DD-YYYY')); | ||
| } | ||
| }); | ||
| return React.createElement(React.Fragment, null); | ||
| }; | ||
| var isValidSearchQuery = function isValidSearchQuery(searchQuery) { | ||
| if (!searchQuery) return true; | ||
| var queryValidatorRegex = /^\(*(NOT )*(\(*((([A-Za-z]\s*)|('[^']*'\s*))+((?:^|\W)in\s*(\('[^']*'\s*([,]\s*'[^']*'\s*)*\))|(?:^|\W)not\s*in\s*([A-Za-z]+\s*)|(?:^|\W)in\s*([A-Za-z]+\s*)|(?:^|\W)= '[^']*'|(?:^|\W)!= '[^']*'|(?:^|\W)> '[^']*'|(?:^|\W)< '[^']*'|(?:^|\W)<= '[^']*'|(?:^|\W)>= '[^']*'|(?:^|\W)is '[^']*'|(?:^|\W)not is '[^']*')\)*((?:^|\W)AND\W|(?:^|\W)OR\W)+(NOT\W)*)*\(*((([A-Za-z])|('[^']*'))+((?:^|\W)in (\('[^']*' *([,] *'[^']*')*\))|(?:^|\W)in ([A-Za-z]+)|(?:^|\W)not in (\('[^']*'([,]'[^']*')*\))|(?:^|\W)not in ([A-Za-z]+)|(?:^|\W)= '[^']*'|(?:^|\W)!= '[^']*'|(?:^|\W)> '[^']*'|(?:^|\W)< '[^']*'|(?:^|\W)<= '[^']*'|(?:^|\W)>= '[^']*'|(?:^|\W)is '[^']*'|(?:^|\W)not is '[^']*'))*\)*)* *\(*(((ORDER BY '[^']*')*)|((ORDER BY [A-Za-z]*)*) *(ASC|DESC)*)*\)*\)*$/gi; | ||
| return queryValidatorRegex.test(searchQuery.trim()) && isMatchingBrackets(searchQuery); | ||
| }; | ||
| var isMatchingBrackets = function isMatchingBrackets(query) { | ||
| var stack = []; | ||
| var map = { | ||
| '(': ')' | ||
| }; | ||
| for (var _iterator = _createForOfIteratorHelperLoose(query), _step; !(_step = _iterator()).done;) { | ||
| var value = _step.value; | ||
| if (value === '(') { | ||
| stack.push(value); | ||
| } | ||
| if (value === ')') { | ||
| var last = stack.pop(); | ||
| if (value !== map[last]) { | ||
| return false; | ||
| } | ||
| } | ||
| } | ||
| if (stack.length !== 0) { | ||
| return false; | ||
| } | ||
| return true; | ||
| }; | ||
| var getWidthByText = function getWidthByText(text, font) { | ||
| var canvas$1 = canvas.createCanvas(0, 0); | ||
| var context = canvas$1.getContext('2d'); | ||
| if (context) { | ||
| context.font = font; | ||
| return context.measureText(text).width; | ||
| } | ||
| return 0; | ||
| }; | ||
| var CustomSearch = function CustomSearch(props) { | ||
| var customSearchData = props.customSearchData, | ||
| onSearch = props.onSearch, | ||
| onChange = props.onChange, | ||
| onEnterButtonClick = props.onEnterButtonClick, | ||
| planeQuery = props.planeQuery, | ||
| onCheckBoxChecked = props.onCheckBoxChecked; | ||
| var columns = customSearchData.columns, | ||
| searchResults = customSearchData.searchResults; | ||
| var _useState = React.useState(false), | ||
| showResults = _useState[0], | ||
| setShowResults = _useState[1]; | ||
| var _useState2 = React.useState([]), | ||
| options = _useState2[0], | ||
| setOptions = _useState2[1]; | ||
| var _useState3 = React.useState(planeQuery ? planeQuery.split(' ') : []), | ||
| queryArray = _useState3[0], | ||
| setQueryArray = _useState3[1]; | ||
| var _useState4 = React.useState(null), | ||
| lastColumn = _useState4[0], | ||
| setLastColumn = _useState4[1]; | ||
| var _useState5 = React.useState(SearchResultType.singleSelect), | ||
| currentResultType = _useState5[0], | ||
| setCurrentResultType = _useState5[1]; | ||
| var _useState6 = React.useState(null), | ||
| cursorElement = _useState6[0], | ||
| setCursorElement = _useState6[1]; | ||
| var _useState7 = React.useState({ | ||
| status: true, | ||
| position: 0 | ||
| }), | ||
| inputCaret = _useState7[0], | ||
| setInputCaret = _useState7[1]; | ||
| var _useState8 = React.useState({ | ||
| left: 0 | ||
| }), | ||
| datePickerPosition = _useState8[0], | ||
| setDatePickerPosition = _useState8[1]; | ||
| var queryRef = React.useRef(); | ||
| var searchQuery = queryArray.join(' '); | ||
| React.useEffect(function () { | ||
| document.addEventListener('mousedown', outSideClick); | ||
| return function () { | ||
| return document.removeEventListener('mousedown', outSideClick); | ||
| }; | ||
| }, []); | ||
| React.useEffect(function () { | ||
| var query = getSearchQueryReplacedByValues(); | ||
| onChange(query ? query : searchQuery, searchQuery, isValidSearchQuery(searchQuery)); | ||
| }, [onCheckBoxChecked]); | ||
| React.useEffect(function () { | ||
| var query = getSearchQueryReplacedByValues(); | ||
| onChange(query ? query : searchQuery, searchQuery, isValidSearchQuery(searchQuery)); | ||
| }, [queryArray]); | ||
| React.useEffect(function () { | ||
| if (inputCaret && inputCaret.position && queryArray.length) { | ||
| //code needs to be validated | ||
| var thresholdQueryArray = [].concat(queryArray); | ||
| if (thresholdQueryArray && thresholdQueryArray.length) { | ||
| thresholdQueryArray.splice(inputCaret.position + 1, queryArray.length - inputCaret.position); | ||
| setCaretPosition(thresholdQueryArray.join(' ').length); | ||
| } | ||
| } | ||
| }, [inputCaret]); | ||
| var getSearchQueryReplacedByValues = function getSearchQueryReplacedByValues() { | ||
| var wordsWithQuotesAndSpace = searchQuery.match(/'.*?'/g); | ||
| var columnsWithQuotes = wordsWithQuotesAndSpace && wordsWithQuotesAndSpace.filter(function (wordWithSpace) { | ||
| return columns && columns.find(function (column) { | ||
| return column.label.toLowerCase() === wordWithSpace.split("'").join('').toLowerCase(); | ||
| }); | ||
| }); | ||
| var query = searchQuery.replace(/'.*?'/g, '$'); | ||
| var remainingColumns = []; | ||
| if (customSearchData.columns) customSearchData.columns.forEach(function (element) { | ||
| var replaceCount = 0; | ||
| query = query.replace(new RegExp(element.label, 'gi'), function () { | ||
| replaceCount++; | ||
| return element.value.toString(); | ||
| }); | ||
| if (!replaceCount) { | ||
| remainingColumns.push(element); | ||
| } | ||
| }); | ||
| var finalQueryArray = []; | ||
| var spaceWordIndex = 0; | ||
| query.split(' ').forEach(function (element) { | ||
| var currentW = ''; | ||
| for (var _iterator = _createForOfIteratorHelperLoose(element), _step; !(_step = _iterator()).done;) { | ||
| var _char = _step.value; | ||
| if (_char === '$') { | ||
| // TO DO Handle It Using Regex | ||
| if (columnsWithQuotes.find(function (columnWithQuote) { | ||
| return columnWithQuote.toLowerCase() === wordsWithQuotesAndSpace[spaceWordIndex].toLowerCase(); | ||
| })) { | ||
| var remainingColumnValue = remainingColumns.find(function (remainingColumn) { | ||
| return wordsWithQuotesAndSpace[spaceWordIndex].split("'").join('').toLowerCase() === remainingColumn.label.toLowerCase(); | ||
| }); | ||
| currentW += remainingColumnValue ? remainingColumnValue.value : ''; | ||
| } else currentW += wordsWithQuotesAndSpace[spaceWordIndex].toUpperCase(); | ||
| spaceWordIndex++; | ||
| } else currentW += _char; | ||
| } | ||
| finalQueryArray.push(currentW); | ||
| }); | ||
| return finalQueryArray.join(' '); | ||
| }; | ||
| React.useEffect(function () { | ||
| if (lastColumn && searchResults) { | ||
| setOptions(searchResults); | ||
| setShowResults(true); | ||
| } | ||
| }, [JSON.stringify(customSearchData)]); | ||
| var getAutoCompleteSuggestions = function getAutoCompleteSuggestions(lastWord, currentColumn, secondLastExpression) { | ||
| var isLogicalOperator = logicalOperators.find(function (searchOption) { | ||
| return lastWord && searchOption.label.toLowerCase() === lastWord.toLowerCase(); | ||
| }); | ||
| if (!lastWord || isLogicalOperator) return [].concat(columns, [notOperator]); | ||
| if ((lastWord === notOperator.label || lastWord === notOperator.value) && currentColumn) return [inOperator]; | ||
| var isSortingOperator = sortingOperators.find(function (searchOption) { | ||
| return lastWord && searchOption.label.toLowerCase() === lastWord.toLowerCase(); | ||
| }); | ||
| if (isSortingOperator) return []; | ||
| if (lastWord === orderOperator.label || lastWord === orderOperator.value) return [byOperator]; | ||
| if (lastWord === byOperator.label || lastWord === byOperator.value) return columns; | ||
| if (lastWord === notOperator.label || lastWord === notOperator.value) return [].concat(columns, [notOperator]); | ||
| var isColumnValue = columns.find(function (searchOption) { | ||
| return searchOption.label.toLowerCase() === removeCharactersFromString(lastWord, ["'", '(']).toLowerCase(); | ||
| }); | ||
| if (isColumnValue && (secondLastExpression === byOperator.label || secondLastExpression === byOperator.value)) return sortingOperators; | ||
| if (isColumnValue && isColumnValue.type === 'string') return [].concat(conditionalOperators.filter(function (operator) { | ||
| return operator.type === 'any'; | ||
| }));else if (isColumnValue && isColumnValue.type === 'date') return conditionalOperators; | ||
| var isConditionalOperator = conditionalOperators.find(function (searchOption) { | ||
| return searchOption.label.toLowerCase() === lastWord.toLowerCase(); | ||
| }); | ||
| if (isConditionalOperator) return []; | ||
| return logicalOperators; | ||
| }; | ||
| var getQueryArrayByQuery = function getQueryArrayByQuery(query) { | ||
| var finalQueryArray = []; | ||
| var wordsWithQuotesAndSpace = query.match(/'.*?'/g); | ||
| var queryArrayBySpace = query.replace(/'.*?'/g, '$').split(' '); | ||
| var spaceWordIndex = 0; | ||
| queryArrayBySpace.forEach(function (element) { | ||
| var currentW = ''; | ||
| for (var _iterator2 = _createForOfIteratorHelperLoose(element), _step2; !(_step2 = _iterator2()).done;) { | ||
| var _char2 = _step2.value; | ||
| if (_char2 === '$') { | ||
| currentW += wordsWithQuotesAndSpace[spaceWordIndex]; | ||
| spaceWordIndex++; | ||
| } else currentW += _char2; | ||
| } | ||
| finalQueryArray.push(currentW); | ||
| }); | ||
| return finalQueryArray; | ||
| }; | ||
| var setLastColumnValue = function setLastColumnValue(newQueryArray) { | ||
| var modifiedWordIndex = newQueryArray.findIndex(function (newElement, index) { | ||
| return newElement !== getQueryArrayByQuery(queryArray.join(' ').replace(/ +/g, ' '))[index]; | ||
| }); | ||
| var lastExpression = newQueryArray[modifiedWordIndex - 1]; | ||
| var newColumnValue = newQueryArray[modifiedWordIndex - 2]; | ||
| if (newColumnValue === notOperator.label || newColumnValue === notOperator.value) newColumnValue = newQueryArray[modifiedWordIndex - 3]; | ||
| var currentColumn = columns.find(function (columnData) { | ||
| return newColumnValue && columnData.label.toLowerCase() === removeCharactersFromString(newColumnValue, ['(']).toLowerCase().replace(/\'/gi, ''); | ||
| }); | ||
| if (currentColumn) setLastColumn(currentColumn); | ||
| return { | ||
| lastExpression: lastExpression, | ||
| modifiedWord: newQueryArray[modifiedWordIndex], | ||
| currentColumn: currentColumn, | ||
| modifiedWordIndex: modifiedWordIndex, | ||
| newColumnValue: newColumnValue | ||
| }; | ||
| }; | ||
| var getMultipleColumnValues = function getMultipleColumnValues(currentWord, newWord) { | ||
| if (currentWord.substr(0, 1) === '(') { | ||
| var multipleValues = currentWord.replace('(', '').split(','); | ||
| if (multipleValues.length) { | ||
| multipleValues[multipleValues.length - 1] = "'" + newWord + "'"; | ||
| return '(' + multipleValues; | ||
| } else return '(' + [newWord]; | ||
| } else return ''; | ||
| }; | ||
| var isQueryValidByQuotes = function isQueryValidByQuotes(newQueryArray) { | ||
| var incompleteWordIndex = -1; | ||
| var quotesCount = 0; | ||
| newQueryArray.forEach(function (queryElement, index) { | ||
| for (var _iterator3 = _createForOfIteratorHelperLoose(queryElement), _step3; !(_step3 = _iterator3()).done;) { | ||
| var _char3 = _step3.value; | ||
| if (_char3 === "'") { | ||
| incompleteWordIndex = index; | ||
| quotesCount++; | ||
| } | ||
| } | ||
| }); | ||
| return { | ||
| incompleteWordIndex: incompleteWordIndex, | ||
| status: quotesCount % 2 === 0 | ||
| }; | ||
| }; | ||
| var getIncompleteQuoteQueryArray = function getIncompleteQuoteQueryArray(newQueryArray) { | ||
| var queryValidByQuotes = isQueryValidByQuotes(newQueryArray); | ||
| if (queryValidByQuotes.status) return newQueryArray;else { | ||
| var incompleteWordIndex = queryValidByQuotes.incompleteWordIndex; | ||
| var allIncompleteElements = newQueryArray.slice(incompleteWordIndex); | ||
| newQueryArray.splice(incompleteWordIndex, newQueryArray.length - incompleteWordIndex, allIncompleteElements.join(' ')); | ||
| return newQueryArray; | ||
| } | ||
| }; | ||
| var removeCharactersFromString = function removeCharactersFromString(targetString, characters) { | ||
| var finalString = ''; | ||
| characters.forEach(function (characterToRemove) { | ||
| if (!finalString) finalString = targetString.split(characterToRemove).join('');else finalString = finalString.split(characterToRemove).join(''); | ||
| }); | ||
| return finalString; | ||
| }; | ||
| var setCaretPosition = function setCaretPosition(pos) { | ||
| if (queryRef.current.setSelectionRange) { | ||
| queryRef.current.focus(); | ||
| queryRef.current.setSelectionRange(pos, pos); | ||
| } | ||
| }; | ||
| var suggestOptions = function suggestOptions(newQuery) { | ||
| if (newQuery === ' ') { | ||
| setOptions(getAutoCompleteSuggestions(null, null, null)); | ||
| setShowResults(true); | ||
| } | ||
| var newQueryArray = getIncompleteQuoteQueryArray(getQueryArrayByQuery(newQuery)); | ||
| // .replace(/ +/g, ' ') | ||
| var _setLastColumnValue = setLastColumnValue(newQueryArray), | ||
| lastExpression = _setLastColumnValue.lastExpression, | ||
| modifiedWord = _setLastColumnValue.modifiedWord, | ||
| currentColumn = _setLastColumnValue.currentColumn, | ||
| modifiedWordIndex = _setLastColumnValue.modifiedWordIndex, | ||
| newColumnValue = _setLastColumnValue.newColumnValue; | ||
| if (currentColumn && currentColumn.type === 'date') { | ||
| setCurrentResultType(SearchResultType.datePicker); | ||
| setCursorElement({ | ||
| index: modifiedWordIndex, | ||
| word: modifiedWord | ||
| }); | ||
| var changedWordArray = newQueryArray; | ||
| changedWordArray.splice(modifiedWordIndex + 1, newQueryArray.length - (modifiedWordIndex + 1)); | ||
| setQueryArray(newQueryArray); | ||
| setDatePickerPosition({ | ||
| left: getWidthByText(changedWordArray.join(' '), '12px system-ui') + datePickerDefaultLeftMargin, | ||
| inputLeft: parseInt(queryRef.current.getBoundingClientRect().left, 10) + parseInt(queryRef.current.clientWidth, 10) | ||
| }); | ||
| if (modifiedWord.substr(-1) !== ')' && conditionalOperators.find(function (operator) { | ||
| return operator.label.toLowerCase() === lastExpression.toLowerCase(); | ||
| })) { | ||
| setShowResults(true); | ||
| } else setShowResults(false); | ||
| return; | ||
| } | ||
| var numberOfSpaces = newQueryArray.filter(function (element) { | ||
| return element === ''; | ||
| }); | ||
| setCurrentResultType(SearchResultType.singleSelect); | ||
| var suggestions = numberOfSpaces.length > 1 ? [] : getAutoCompleteSuggestions(lastExpression, currentColumn, newColumnValue); | ||
| if (!newQueryArray[modifiedWord] && newQueryArray[modifiedWordIndex - 1] && newQueryArray[modifiedWordIndex - 1].substr(0, 1) === '(' && newQueryArray[modifiedWordIndex - 2] && newQueryArray[modifiedWordIndex - 2].toLowerCase() === inOperator.label.toLowerCase() && newQueryArray[modifiedWordIndex - 1].substr(-1) !== ')') { | ||
| newQueryArray.pop(); | ||
| setOptions([]); | ||
| } else if (currentColumn && !suggestions.length && modifiedWord && removeCharactersFromString(modifiedWord, ["'"]).length >= 2 && modifiedWord.substr(-1) !== "'") { | ||
| if (modifiedWord.substr(0, 1) === '(') { | ||
| var allColumnValues = modifiedWord.replace('(', '').split(','); | ||
| var modifiedColumnValue = ''; | ||
| var modifiedIncompleteStatus = isQueryValidByQuotes(allColumnValues); | ||
| if (modifiedIncompleteStatus.status) modifiedColumnValue = allColumnValues[allColumnValues.length - 1];else modifiedColumnValue = allColumnValues[modifiedIncompleteStatus.incompleteWordIndex]; | ||
| if (modifiedWord.substr(-1) !== ',' && modifiedWord.substr(-1) !== ')' && modifiedColumnValue && modifiedColumnValue.split("'").join('').length >= 2) onSearch({ | ||
| searchText: btoa(modifiedColumnValue.split("'").join('')), | ||
| id: currentColumn.id, | ||
| currentValueKey: currentColumn.value | ||
| }); | ||
| } else { | ||
| if (/[a-zA-z]/.test(modifiedWord.substr(-1))) onSearch({ | ||
| searchText: btoa(modifiedWord.split("'").join('')), | ||
| id: currentColumn.id, | ||
| currentValueKey: currentColumn.value | ||
| }); | ||
| } | ||
| } else { | ||
| setOptions(suggestions.filter(function (option) { | ||
| return option.label.toLowerCase().includes(modifiedWord && modifiedWord.split('(').join('') && modifiedWord.split('(').join('').toLowerCase()); | ||
| })); | ||
| setShowResults(true); | ||
| } | ||
| setCursorElement({ | ||
| index: modifiedWordIndex, | ||
| word: modifiedWord | ||
| }); | ||
| setQueryArray(newQueryArray); | ||
| }; | ||
| var onInputChange = function onInputChange(event) { | ||
| suggestOptions(event.target.value); | ||
| }; | ||
| var getOptionValue = function getOptionValue(lastConditionalOperator, label) { | ||
| if ([].concat(logicalOperators, conditionalOperators, [notOperator]).find(function (operator) { | ||
| return operator.label.toLowerCase() === label.toLowerCase(); | ||
| })) { | ||
| return label; | ||
| } else if (lastConditionalOperator && lastConditionalOperator.toLowerCase() === inOperator.label.toLowerCase()) { | ||
| return "('" + label + "'"; | ||
| } else if (conditionalOperators.find(function (operator) { | ||
| return operator.label === lastConditionalOperator; | ||
| })) { | ||
| return "'" + label + "'"; | ||
| } else return null; | ||
| }; | ||
| var setOptionForDateTypeColumn = function setOptionForDateTypeColumn(lastConditionalOperator, option, caretPosition) { | ||
| setQueryArray(queryArray.map(function (queryElement, index) { | ||
| if (index === cursorElement.index) { | ||
| caretPosition = index; | ||
| var optionValue = getOptionValue(lastConditionalOperator, option); | ||
| if (optionValue) return optionValue;else return "" + (option.includes(' ') ? "'" + option + "'" : "" + option); | ||
| } else return queryElement; | ||
| })); | ||
| return caretPosition; | ||
| }; | ||
| var setOptionForStringTypeColumn = function setOptionForStringTypeColumn(lastConditionalOperator, option, caretPosition) { | ||
| setQueryArray(queryArray.map(function (queryElement, index) { | ||
| if (index === cursorElement.index) { | ||
| caretPosition = index; | ||
| var optionValue = getOptionValue(lastConditionalOperator, option.label); | ||
| if (optionValue) return optionValue;else if (columns.find(function (operator) { | ||
| return operator.label.toLowerCase() === option.label.toLowerCase(); | ||
| })) return option.label.includes(' ') ? "'" + option.label + "'" : option.label;else return "" + (option.label.includes(' ') ? "'" + option.label + "'" : "" + option.label); | ||
| } else return queryElement; | ||
| })); | ||
| return caretPosition; | ||
| }; | ||
| var onOptionClick = function onOptionClick(option) { | ||
| var lastConditionalOperator = queryArray[queryArray.length - 2]; | ||
| var caretPosition = null; | ||
| if (cursorElement) { | ||
| if (lastConditionalOperator && lastConditionalOperator.toLowerCase() === inOperator.label.toLowerCase() && cursorElement.word.includes('(')) { | ||
| setQueryArray(queryArray.map(function (queryElement, index) { | ||
| if (index === cursorElement.index) { | ||
| caretPosition = index; | ||
| return "" + getMultipleColumnValues(cursorElement.word, currentResultType === SearchResultType.datePicker ? option : option.label); | ||
| } else return queryElement; | ||
| })); | ||
| } else { | ||
| if (currentResultType === SearchResultType.datePicker) { | ||
| caretPosition = setOptionForDateTypeColumn(lastConditionalOperator, option, caretPosition); | ||
| } else if (currentResultType === SearchResultType.singleSelect) { | ||
| caretPosition = setOptionForStringTypeColumn(lastConditionalOperator, option, caretPosition); | ||
| } | ||
| } | ||
| } | ||
| if (caretPosition) { | ||
| setInputCaret({ | ||
| status: !inputCaret.status, | ||
| position: caretPosition | ||
| }); | ||
| } | ||
| setShowResults(false); | ||
| queryRef.current.focus(); | ||
| }; | ||
| var outSideClick = function outSideClick(event) { | ||
| var selectedElement = document.getElementById('dynamic-results'); | ||
| var datePickers = document.getElementsByClassName('flatpickr-calendar'); | ||
| if (selectedElement && selectedElement.contains(event.target)) return; | ||
| var elementInDatePicker = false; | ||
| Array.from(datePickers).forEach(function (datePicker) { | ||
| if (datePicker.contains(event.target)) elementInDatePicker = true; | ||
| }); | ||
| if (elementInDatePicker) return; | ||
| return setShowResults(false); | ||
| }; | ||
| var onInputClick = function onInputClick() { | ||
| setOptions([]); | ||
| setShowResults(false); | ||
| }; | ||
| var onCrossButtonClick = function onCrossButtonClick() { | ||
| setQueryArray([]); | ||
| }; | ||
| var onEnterClick = function onEnterClick(event) { | ||
| if (event.keyCode === keyCode.Enter && isValidSearchQuery(searchQuery) && searchQuery.length) onEnterButtonClick(); | ||
| }; | ||
| return React.createElement("div", { | ||
| className: 'custom-search' | ||
| }, React.createElement(TextInput, { | ||
| type: inputType.text, | ||
| customClass: 'custom-search-input', | ||
| reference: queryRef, | ||
| value: searchQuery, | ||
| onChange: onInputChange, | ||
| onClick: onInputClick, | ||
| onKeyUp: onEnterClick, | ||
| placeholder: 'Find records using search query' | ||
| }), searchQuery.length ? React.createElement(Button, { | ||
| customClass: 'clear-query', | ||
| onClick: onCrossButtonClick, | ||
| tabIndex: showResults ? -1 : 0 | ||
| }, React.createElement(reactFontawesome.FontAwesomeIcon, { | ||
| icon: freeSolidSvgIcons.faTimes | ||
| })) : null, isValidSearchQuery(searchQuery) ? React.createElement(reactFontawesome.FontAwesomeIcon, { | ||
| className: 'custom-search-query-status valid', | ||
| icon: freeSolidSvgIcons.faCheckCircle | ||
| }) : React.createElement(reactFontawesome.FontAwesomeIcon, { | ||
| className: 'custom-search-query-status invalid', | ||
| icon: freeSolidSvgIcons.faTimesCircle | ||
| }), showResults && React.createElement("div", { | ||
| id: 'dynamic-results', | ||
| className: 'custom-search-results' | ||
| }, React.createElement(DynamicCustomResultRenderer, { | ||
| searchResultType: currentResultType, | ||
| searchResults: searchQuery.length > 0 ? options : [], | ||
| onOptionClick: onOptionClick, | ||
| setShowResults: setShowResults, | ||
| datePickerPosition: datePickerPosition | ||
| })), isValidSearchQuery(searchQuery) ? React.createElement("div", null, planeQuery) : null); | ||
| }; | ||
| var CustomSearchWrapper = function CustomSearchWrapper(_ref) { | ||
| var searchData = _ref.searchData, | ||
| handleSearchData = _ref.handleSearchData; | ||
| var _useState = React.useState(), | ||
| customSearchData = _useState[0], | ||
| setCustomSearchData = _useState[1]; | ||
| var _useState2 = React.useState(), | ||
| searchQuery = _useState2[0], | ||
| setSearchQuery = _useState2[1]; | ||
| var _useState3 = React.useState(true), | ||
| isQueryValid = _useState3[0], | ||
| setIsQueryValid = _useState3[1]; | ||
| React.useEffect(function () { | ||
| console.log(searchData); | ||
| setCustomSearchData(searchData); | ||
| }, [searchData]); | ||
| // const handleSearchData = (payload: any) => { | ||
| // // console.log(payload); | ||
| // const urlConfig = { | ||
| // method: 'GET', | ||
| // headers: new Headers({ | ||
| // 'Authorization': bearerToken | ||
| // }) | ||
| // } | ||
| // const url = `https://dev.api.adlake.numerator.cloud/api/classification/reference/customsearchfields/?search_text=${payload.searchText}&id=${payload.id}`; | ||
| // fetch(url, urlConfig).then((res) => { | ||
| // return res.json(); | ||
| // }).then((response) => { | ||
| // const result = { ...customSearchData, searchResults: response.data.fields } | ||
| // // console.log(customSearchData); | ||
| // setCustomSearchData(result); | ||
| // }) | ||
| // } | ||
| var handleOnChange = function handleOnChange(args, args2, args3) { | ||
| // console.log(args); | ||
| setSearchQuery(args); | ||
| console.log(args2); | ||
| // console.log(args3); | ||
| setIsQueryValid(args3); | ||
| var result = _extends({}, customSearchData, { | ||
| searchResults: [] | ||
| }); | ||
| // console.log(customSearchData); | ||
| setCustomSearchData(result); | ||
| }; | ||
| return React.createElement("div", { | ||
| className: 'custom-wrapper' | ||
| }, customSearchData && React.createElement(CustomSearch, { | ||
| customSearchData: customSearchData, | ||
| onChange: handleOnChange, | ||
| onCheckBoxChecked: true, | ||
| onEnterButtonClick: function onEnterButtonClick() {}, | ||
| onSearch: handleSearchData, | ||
| planeQuery: '' | ||
| }), React.createElement("div", { | ||
| className: "query-label " + (isQueryValid ? 'valid-text' : 'invalid-text') | ||
| }, searchQuery)); | ||
| }; | ||
| // export default CustomSearchWrapper; | ||
| exports.Button = Button; | ||
| exports.CustomSearchWrapper = CustomSearchWrapper; | ||
| //# sourceMappingURL=adintel-lib-poc.cjs.development.js.map |
@@ -1,2 +0,2 @@ | ||
| "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t,o=require("react");require("@fortawesome/react-fontawesome"),require("@fortawesome/free-regular-svg-icons"),require("flatpickr/dist/themes/material_green.css"),require("react-flatpickr"),require("@fortawesome/free-solid-svg-icons"),require("canvas"),require("moment"),(e=exports.buttonSize||(exports.buttonSize={})).small="small",e.medium="medium",e.large="large",(t=exports.buttonVariant||(exports.buttonVariant={})).primary="primary",t.secondary="secondary";var r,i,n,a,s,l=function(e,t){var o=e.size,r=void 0===o?exports.buttonSize.medium:o,i=e.block,n=e.variant,a=void 0===n?exports.buttonVariant.primary:n,s="c_btn c_btn-"+r;return s=void 0!==i&&i?s+" c_btn-block":s,s=a?s+" c_btn-"+a:s,t?s+" "+t:s};!function(e){e.left="left-tooltip",e.top="top-tooltip",e.bottom="bottom-tooltip",e.right="right-tooltip"}(r||(r={})),function(e){e.text="text",e.email="email",e.number="number",e.password="password"}(i||(i={})),function(e){e.singleSelect="singleSelect",e.multiSelect="multiSelect",e.datePicker="datePicker"}(n||(n={})),function(e){e.date="date",e.string="string"}(a||(a={})),function(e){e[e.Down=40]="Down",e[e.Up=38]="Up",e[e.Enter=13]="Enter",e[e.Tab=9]="Tab",e[e.Space=32]="Space",e[e.Ctrl=17]="Ctrl",e[e.Right=39]="Right",e[e.Left=37]="Left",e[e.One=49]="One",e[e.Two=50]="Two",e[e.Three=51]="Three",e[e.Period=46]="Period",e[e.Minus=45]="Minus"}(s||(s={})),exports.Button=function(e){var t=e.type,r=e.children,i=e.customClass,n=e.disabled,a=void 0!==n&&n,s=e.id,u=void 0===s?"":s,c=e.tabIndex,d=void 0===c?0:c,m=e.onKeyDown,p=e.onKeyUp,b=e.autoFocus,f=void 0!==b&&b,v=e.onFocus,g=e.onDoubleClick,w=e.testId;return o.createElement("button",{ref:e.btnRef,type:void 0===t?"button":t,name:e.name,onClick:e.onClick,className:l(e,i),disabled:a,id:u,"aria-label":u,tabIndex:d,onKeyDown:m,onKeyUp:p,autoFocus:f,onFocus:v,onDoubleClick:g,"data-test-id":w||u||"","data-test-class":i||""},r)}; | ||
| "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=require("@fortawesome/react-fontawesome"),r=require("@fortawesome/free-regular-svg-icons");require("flatpickr/dist/themes/material_green.css");var o,a,i=e(require("react-flatpickr")),l=require("@fortawesome/free-solid-svg-icons"),u=require("canvas"),s=e(require("moment"));function c(){return(c=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function f(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function d(e,t){var n="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(n)return(n=n.call(e)).next.bind(n);if(Array.isArray(e)||(n=function(e,t){if(e){if("string"==typeof e)return f(e,void 0);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?f(e,void 0):void 0}}(e))||t&&e&&"number"==typeof e.length){n&&(e=n);var r=0;return function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}(o=exports.buttonSize||(exports.buttonSize={})).small="small",o.medium="medium",o.large="large",(a=exports.buttonVariant||(exports.buttonVariant={})).primary="primary",a.secondary="secondary";var m,p=function(e,t){var n=e.size,r=void 0===n?exports.buttonSize.medium:n,o=e.block,a=e.variant,i=void 0===a?exports.buttonVariant.primary:a,l="c_btn c_btn-"+r;return l=void 0!==o&&o?l+" c_btn-block":l,l=i?l+" c_btn-"+i:l,t?l+" "+t:l},v=function(e){var n=e.type,r=e.children,o=e.customClass,a=e.disabled,i=void 0!==a&&a,l=e.id,u=void 0===l?"":l,s=e.tabIndex,c=void 0===s?0:s,f=e.onKeyDown,d=e.onKeyUp,m=e.autoFocus,v=void 0!==m&&m,b=e.onFocus,h=e.onDoubleClick,C=e.testId;return t.createElement("button",{ref:e.btnRef,type:void 0===n?"button":n,name:e.name,onClick:e.onClick,className:p(e,o),disabled:i,id:u,"aria-label":u,tabIndex:c,onKeyDown:f,onKeyUp:d,autoFocus:v,onFocus:b,onDoubleClick:h,"data-test-id":C||u||"","data-test-class":o||""},r)};!function(e){e.left="left-tooltip",e.top="top-tooltip",e.bottom="bottom-tooltip",e.right="right-tooltip"}(m||(m={}));var b,h=function(e){var n=e.children,r=e.text,o=e.position,a=t.useRef(null),i=t.useRef(null),l=function(){return i.current.style.visibility="visible"},u=function(){return i.current.style.visibility="hidden"};return t.useEffect((function(){var e=a.current;if(e&&(e.addEventListener("mouseenter",l),e.addEventListener("mouseleave",u)),!o){var t=i.current;e&&t&&(t.getBoundingClientRect().top<0&&(e.className="bottom-tooltip"),e.getBoundingClientRect().left+t.getBoundingClientRect().width>screen.width&&(e.className="left-tooltip"))}return function(){return a.current&&a.current.removeEventListener("mouseenter",l)}}),[]),r?t.createElement("div",{ref:a,className:o||"top-tooltip",onClick:function(e){e.stopPropagation(),i.current.style.visibility="hidden"}},n,t.createElement("span",{ref:i,className:"tooltiptext",onMouseEnter:function(e){return e.preventDefault()}},r)):n};!function(e){e.text="text",e.email="email",e.number="number",e.password="password"}(b||(b={}));var C,g,y=function(e){var n=e.id,r=e.customClass,o=e.tabIndex,a=e.disabled,i=void 0!==a&&a,l=e.hasError,u=e.autofocus,s=e.spellCheck;return t.createElement(h,{text:e.title},t.createElement("input",{id:n,"aria-label":n,autoComplete:"off",name:e.name,placeholder:e.placeholder,value:e.value,type:e.type,className:"input "+(void 0!==l&&l?"input-error":"")+(r||"")+" "+(i?"disabled":""),onChange:e.onChange,tabIndex:void 0===o?0:o,disabled:i,autoFocus:void 0!==u&&u,ref:e.reference,onKeyUp:e.onKeyUp,onKeyDown:e.onKeyDown,spellCheck:void 0===s||s,onBlur:e.onBlur,onClick:e.onClick,"data-test-id":n||"","data-test-class":r||"",step:e.step,min:e.min,onKeyPress:e.onKeyPress,maxLength:e.maxLength}))},w=function(e){var o=e.id,a=e.date,u=e.onChange,s=e.clearDate,c=e.disabled;return t.createElement("div",{className:e.small?"date-picker-small":"date-picker"},t.createElement(i,{ref:e.reference,id:o,"data-test-id":o||"",name:e.name,className:e.customClass+" date-picker-input "+(c?" disabled":""),value:a,options:{minDate:e.minDate,maxDate:e.maxDate,dateFormat:"m-d-Y"},placeholder:e.placeholder,autocomplete:"off",disabled:c,"data-selected-date":a,onChange:function(e){u&&u(e[0])}}),t.createElement("div",{className:"icon-container"},a?t.createElement(v,{id:o,customClass:"cross",onClick:s,disabled:c},t.createElement(n.FontAwesomeIcon,{icon:l.faTimes,className:c?"cross-icon disabled":"cross-icon"})):t.createElement("label",{htmlFor:o,className:c?"calender-icon disabled":"calender-icon"},t.createElement(n.FontAwesomeIcon,{icon:r.faCalendarAlt}))))};!function(e){e.singleSelect="singleSelect",e.multiSelect="multiSelect",e.datePicker="datePicker"}(C||(C={})),function(e){e.date="date",e.string="string"}(g||(g={}));var E,k={label:"IN",value:"in",type:"any"},x={label:"BY",value:"by"},S=[{label:"=",value:"=",type:"any"},{label:"<",value:"<",type:"number"},{label:">",value:">",type:"number"},{label:"<=",value:"<=",type:"number"},{label:">=",value:">=",type:"number"},{label:"!=",value:">=",type:"any"},k,{label:"NOT IN",value:"not in",type:"any"}],L=[{label:"ASC",value:"asc"},{label:"DESC",value:"desc"}],R=[{label:"AND",value:"and"},{label:"OR",value:"or"},{label:"ORDER BY",value:"order by"}],W={label:"NOT",value:"not"},D=function(e){var n=e.option,r=e.onClick,o=e.focus,a=e.index,i=e.onkeyPressed,l=e.optionRef,u=n.value,s=n.label;return t.useEffect((function(){o&&l&&l.current&&l.current.focus()}),[o]),t.createElement(v,{key:u,btnRef:l,onClick:function(){return r(n)},customClass:"option",tabIndex:0,onKeyDown:function(e){i(e,a)}},t.createElement("div",null,s))};!function(e){e[e.Down=40]="Down",e[e.Up=38]="Up",e[e.Enter=13]="Enter",e[e.Tab=9]="Tab",e[e.Space=32]="Space",e[e.Ctrl=17]="Ctrl",e[e.Right=39]="Right",e[e.Left=37]="Left",e[e.One=49]="One",e[e.Two=50]="Two",e[e.Three=51]="Three",e[e.Period=46]="Period",e[e.Minus=45]="Minus"}(E||(E={}));var N=function(e){var n=e.options,r=e.onOptionClick,o=e.highlight,a=e.setShowResults,i=t.useState(),l=i[0],u=i[1],s=t.useRef([]);t.useEffect((function(){s.current=Array(n.length).fill(null).map((function(e,n){return s.current[n]||t.createRef()}))}),[n]);var c=function(e,t){e.keyCode===E.Down?u(t+1):e.keyCode===E.Up?u(t-1):e.keyCode===E.Tab&&a(!1),s.current[t]&&s.current[t].current&&s.current[t].current.scrollIntoView({block:"center",behavior:"auto"})};return t.createElement("div",{className:"search-body"},n&&n.length>0?t.createElement("div",null,t.createElement("div",{className:"options scroller"},n.map((function(e,n){return t.createElement(D,{key:n,option:e,onClick:r,index:n,focus:l===n,onkeyPressed:c,highlight:o,optionRef:s.current[n]})})))):null)},I=function(e){var n=e.searchResultType,r=e.searchResults,o=e.onOptionClick,a=void 0===o?function(){}:o,i=e.highlight,l=e.setShowResults,u=e.datePickerPosition,c=t.useRef(null),f=t.useState(!1),d=f[0],m=f[1];return t.useEffect((function(){c.current&&n===C.datePicker?(c.current.flatpickr.open(),m(!d)):m(!d)}),[u]),t.useEffect((function(){if(u&&n===C.datePicker&&c.current){var e=parseInt(u.left,10);c.current.flatpickr.calendarContainer.style.left=(e>u.inputLeft?u.inputLeft-50:e)+"px",c.current.flatpickr.open()}}),[d]),n===C.singleSelect?t.createElement(N,{options:r||[],onOptionClick:a,highlight:i,setShowResults:l}):n===C.datePicker?t.createElement(w,{reference:c,date:new Date,onChange:function(e){return a(s(e).format("MM-DD-YYYY"))}}):t.createElement(t.Fragment,null)},A=function(e){return!e||/^\(*(NOT )*(\(*((([A-Za-z]\s*)|('[^']*'\s*))+((?:^|\W)in\s*(\('[^']*'\s*([,]\s*'[^']*'\s*)*\))|(?:^|\W)not\s*in\s*([A-Za-z]+\s*)|(?:^|\W)in\s*([A-Za-z]+\s*)|(?:^|\W)= '[^']*'|(?:^|\W)!= '[^']*'|(?:^|\W)> '[^']*'|(?:^|\W)< '[^']*'|(?:^|\W)<= '[^']*'|(?:^|\W)>= '[^']*'|(?:^|\W)is '[^']*'|(?:^|\W)not is '[^']*')\)*((?:^|\W)AND\W|(?:^|\W)OR\W)+(NOT\W)*)*\(*((([A-Za-z])|('[^']*'))+((?:^|\W)in (\('[^']*' *([,] *'[^']*')*\))|(?:^|\W)in ([A-Za-z]+)|(?:^|\W)not in (\('[^']*'([,]'[^']*')*\))|(?:^|\W)not in ([A-Za-z]+)|(?:^|\W)= '[^']*'|(?:^|\W)!= '[^']*'|(?:^|\W)> '[^']*'|(?:^|\W)< '[^']*'|(?:^|\W)<= '[^']*'|(?:^|\W)>= '[^']*'|(?:^|\W)is '[^']*'|(?:^|\W)not is '[^']*'))*\)*)* *\(*(((ORDER BY '[^']*')*)|((ORDER BY [A-Za-z]*)*) *(ASC|DESC)*)*\)*\)*$/gi.test(e.trim())&&O(e)},O=function(e){for(var t,n=[],r={"(":")"},o=d(e);!(t=o()).done;){var a=t.value;if("("===a&&n.push(a),")"===a&&a!==r[n.pop()])return!1}return 0===n.length},j=function(e){var r=e.customSearchData,o=e.onSearch,a=e.onChange,i=e.onEnterButtonClick,s=e.planeQuery,c=e.onCheckBoxChecked,f=r.columns,m=r.searchResults,p=t.useState(!1),h=p[0],g=p[1],w=t.useState([]),D=w[0],N=w[1],O=t.useState(s?s.split(" "):[]),j=O[0],P=O[1],T=t.useState(null),B=T[0],F=T[1],K=t.useState(C.singleSelect),q=K[0],z=K[1],U=t.useState(null),Y=U[0],V=U[1],M=t.useState({status:!0,position:0}),Z=M[0],_=M[1],$=t.useState({left:0}),Q=$[0],J=$[1],G=t.useRef(),H=j.join(" ");t.useEffect((function(){return document.addEventListener("mousedown",ie),function(){return document.removeEventListener("mousedown",ie)}}),[]),t.useEffect((function(){var e=X();a(e||H,H,A(H))}),[c]),t.useEffect((function(){var e=X();a(e||H,H,A(H))}),[j]),t.useEffect((function(){if(Z&&Z.position&&j.length){var e=[].concat(j);e&&e.length&&(e.splice(Z.position+1,j.length-Z.position),oe(e.join(" ").length))}}),[Z]);var X=function(){var e=H.match(/'.*?'/g),t=e&&e.filter((function(e){return f&&f.find((function(t){return t.label.toLowerCase()===e.split("'").join("").toLowerCase()}))})),n=H.replace(/'.*?'/g,"$"),o=[];r.columns&&r.columns.forEach((function(e){var t=0;n=n.replace(new RegExp(e.label,"gi"),(function(){return t++,e.value.toString()})),t||o.push(e)}));var a=[],i=0;return n.split(" ").forEach((function(n){for(var r,l="",u=d(n);!(r=u()).done;){var s=r.value;if("$"===s){if(t.find((function(t){return t.toLowerCase()===e[i].toLowerCase()}))){var c=o.find((function(t){return e[i].split("'").join("").toLowerCase()===t.label.toLowerCase()}));l+=c?c.value:""}else l+=e[i].toUpperCase();i++}else l+=s}a.push(l)})),a.join(" ")};t.useEffect((function(){B&&m&&(N(m),g(!0))}),[JSON.stringify(r)]);var ee=function(e,t,n){var r=R.find((function(t){return e&&t.label.toLowerCase()===e.toLowerCase()}));if(!e||r)return[].concat(f,[W]);if((e===W.label||e===W.value)&&t)return[k];if(L.find((function(t){return e&&t.label.toLowerCase()===e.toLowerCase()})))return[];if("ORDER"===e||"order"===e)return[x];if(e===x.label||e===x.value)return f;if(e===W.label||e===W.value)return[].concat(f,[W]);var o=f.find((function(t){return t.label.toLowerCase()===re(e,["'","("]).toLowerCase()}));return!o||n!==x.label&&n!==x.value?o&&"string"===o.type?[].concat(S.filter((function(e){return"any"===e.type}))):o&&"date"===o.type?S:S.find((function(t){return t.label.toLowerCase()===e.toLowerCase()}))?[]:R:L},te=function(e){var t=[],n=e.match(/'.*?'/g),r=e.replace(/'.*?'/g,"$").split(" "),o=0;return r.forEach((function(e){for(var r,a="",i=d(e);!(r=i()).done;){var l=r.value;"$"===l?(a+=n[o],o++):a+=l}t.push(a)})),t},ne=function(e){var t=-1,n=0;return e.forEach((function(e,r){for(var o,a=d(e);!(o=a()).done;)"'"===o.value&&(t=r,n++)})),{incompleteWordIndex:t,status:n%2==0}},re=function(e,t){var n="";return t.forEach((function(t){n=n?n.split(t).join(""):e.split(t).join("")})),n},oe=function(e){G.current.setSelectionRange&&(G.current.focus(),G.current.setSelectionRange(e,e))},ae=function(e,t){return[].concat(R,S,[W]).find((function(e){return e.label.toLowerCase()===t.toLowerCase()}))?t:e&&e.toLowerCase()===k.label.toLowerCase()?"('"+t+"'":S.find((function(t){return t.label===e}))?"'"+t+"'":null},ie=function(e){var t=document.getElementById("dynamic-results"),n=document.getElementsByClassName("flatpickr-calendar");if(!t||!t.contains(e.target)){var r=!1;if(Array.from(n).forEach((function(t){t.contains(e.target)&&(r=!0)})),!r)return g(!1)}};return t.createElement("div",{className:"custom-search"},t.createElement(y,{type:b.text,customClass:"custom-search-input",reference:G,value:H,onChange:function(e){!function(e){" "===e&&(N(ee(null,null,null)),g(!0));var t,n,r=function(e){var t=ne(e);if(t.status)return e;var n=t.incompleteWordIndex,r=e.slice(n);return e.splice(n,e.length-n,r.join(" ")),e}(te(e)),a=function(e){var t=e.findIndex((function(e,t){return e!==te(j.join(" ").replace(/ +/g," "))[t]})),n=e[t-1],r=e[t-2];r!==W.label&&r!==W.value||(r=e[t-3]);var o=f.find((function(e){return r&&e.label.toLowerCase()===re(r,["("]).toLowerCase().replace(/\'/gi,"")}));return o&&F(o),{lastExpression:n,modifiedWord:e[t],currentColumn:o,modifiedWordIndex:t,newColumnValue:r}}(r),i=a.lastExpression,l=a.modifiedWord,s=a.currentColumn,c=a.modifiedWordIndex,d=a.newColumnValue;if(s&&"date"===s.type){z(C.datePicker),V({index:c,word:l});var m=r;return m.splice(c+1,r.length-(c+1)),P(r),J({left:(t=m.join(" "),n=u.createCanvas(0,0).getContext("2d"),(n?(n.font="12px system-ui",n.measureText(t).width):0)+76),inputLeft:parseInt(G.current.getBoundingClientRect().left,10)+parseInt(G.current.clientWidth,10)}),void(")"!==l.substr(-1)&&S.find((function(e){return e.label.toLowerCase()===i.toLowerCase()}))?g(!0):g(!1))}var p=r.filter((function(e){return""===e}));z(C.singleSelect);var v=p.length>1?[]:ee(i,s,d);if(!r[l]&&r[c-1]&&"("===r[c-1].substr(0,1)&&r[c-2]&&r[c-2].toLowerCase()===k.label.toLowerCase()&&")"!==r[c-1].substr(-1))r.pop(),N([]);else if(s&&!v.length&&l&&re(l,["'"]).length>=2&&"'"!==l.substr(-1))if("("===l.substr(0,1)){var b=l.replace("(","").split(","),h="",y=ne(b);h=y.status?b[b.length-1]:b[y.incompleteWordIndex],","!==l.substr(-1)&&")"!==l.substr(-1)&&h&&h.split("'").join("").length>=2&&o({searchText:btoa(h.split("'").join("")),id:s.id,currentValueKey:s.value})}else/[a-zA-z]/.test(l.substr(-1))&&o({searchText:btoa(l.split("'").join("")),id:s.id,currentValueKey:s.value});else N(v.filter((function(e){return e.label.toLowerCase().includes(l&&l.split("(").join("")&&l.split("(").join("").toLowerCase())}))),g(!0);V({index:c,word:l}),P(r)}(e.target.value)},onClick:function(){N([]),g(!1)},onKeyUp:function(e){e.keyCode===E.Enter&&A(H)&&H.length&&i()},placeholder:"Find records using search query"}),H.length?t.createElement(v,{customClass:"clear-query",onClick:function(){P([])},tabIndex:h?-1:0},t.createElement(n.FontAwesomeIcon,{icon:l.faTimes})):null,A(H)?t.createElement(n.FontAwesomeIcon,{className:"custom-search-query-status valid",icon:l.faCheckCircle}):t.createElement(n.FontAwesomeIcon,{className:"custom-search-query-status invalid",icon:l.faTimesCircle}),h&&t.createElement("div",{id:"dynamic-results",className:"custom-search-results"},t.createElement(I,{searchResultType:q,searchResults:H.length>0?D:[],onOptionClick:function(e){var t=j[j.length-2],n=null;Y&&(t&&t.toLowerCase()===k.label.toLowerCase()&&Y.word.includes("(")?P(j.map((function(t,r){return r===Y.index?(n=r,""+function(e,t){if("("===e.substr(0,1)){var n=e.replace("(","").split(",");return n.length?(n[n.length-1]="'"+t+"'","("+n):"("+[t]}return""}(Y.word,q===C.datePicker?e:e.label)):t}))):q===C.datePicker?n=function(e,t,n){return P(j.map((function(r,o){return o===Y.index?(n=o,ae(e,t)||(t.includes(" ")?"'"+t+"'":""+t)):r}))),n}(t,e,n):q===C.singleSelect&&(n=function(e,t,n){return P(j.map((function(r,o){return o===Y.index?(n=o,ae(e,t.label)||(f.find((function(e){return e.label.toLowerCase()===t.label.toLowerCase()}))?t.label.includes(" ")?"'"+t.label+"'":t.label:t.label.includes(" ")?"'"+t.label+"'":""+t.label)):r}))),n}(t,e,n))),n&&_({status:!Z.status,position:n}),g(!1),G.current.focus()},setShowResults:g,datePickerPosition:Q})),A(H)?t.createElement("div",null,s):null)};exports.Button=v,exports.CustomSearchWrapper=function(e){var n=e.searchData,r=e.handleSearchData,o=t.useState(),a=o[0],i=o[1],l=t.useState(),u=l[0],s=l[1],f=t.useState(!0),d=f[0],m=f[1];return t.useEffect((function(){console.log(n),i(n)}),[n]),t.createElement("div",{className:"custom-wrapper"},a&&t.createElement(j,{customSearchData:a,onChange:function(e,t,n){s(e),console.log(t),m(n);var r=c({},a,{searchResults:[]});i(r)},onCheckBoxChecked:!0,onEnterButtonClick:function(){},onSearch:r,planeQuery:""}),t.createElement("div",{className:"query-label "+(d?"valid-text":"invalid-text")},u))}; | ||
| //# sourceMappingURL=adintel-lib-poc.cjs.production.min.js.map |
@@ -1,10 +0,56 @@ | ||
| import { createElement } from 'react'; | ||
| import '@fortawesome/react-fontawesome'; | ||
| import '@fortawesome/free-regular-svg-icons'; | ||
| import { createElement, useRef, useEffect, useState, createRef, Fragment } from 'react'; | ||
| import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; | ||
| import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons'; | ||
| import 'flatpickr/dist/themes/material_green.css'; | ||
| import 'react-flatpickr'; | ||
| import '@fortawesome/free-solid-svg-icons'; | ||
| import 'canvas'; | ||
| import 'moment'; | ||
| import Flatpickr from 'react-flatpickr'; | ||
| import { faTimes, faCheckCircle, faTimesCircle } from '@fortawesome/free-solid-svg-icons'; | ||
| import { createCanvas } from 'canvas'; | ||
| import moment from 'moment'; | ||
| function _extends() { | ||
| _extends = Object.assign ? Object.assign.bind() : function (target) { | ||
| for (var i = 1; i < arguments.length; i++) { | ||
| var source = arguments[i]; | ||
| for (var key in source) { | ||
| if (Object.prototype.hasOwnProperty.call(source, key)) { | ||
| target[key] = source[key]; | ||
| } | ||
| } | ||
| } | ||
| return target; | ||
| }; | ||
| return _extends.apply(this, arguments); | ||
| } | ||
| function _unsupportedIterableToArray(o, minLen) { | ||
| if (!o) return; | ||
| if (typeof o === "string") return _arrayLikeToArray(o, minLen); | ||
| var n = Object.prototype.toString.call(o).slice(8, -1); | ||
| if (n === "Object" && o.constructor) n = o.constructor.name; | ||
| if (n === "Map" || n === "Set") return Array.from(o); | ||
| if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); | ||
| } | ||
| function _arrayLikeToArray(arr, len) { | ||
| if (len == null || len > arr.length) len = arr.length; | ||
| for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; | ||
| return arr2; | ||
| } | ||
| function _createForOfIteratorHelperLoose(o, allowArrayLike) { | ||
| var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; | ||
| if (it) return (it = it.call(o)).next.bind(it); | ||
| if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { | ||
| if (it) o = it; | ||
| var i = 0; | ||
| return function () { | ||
| if (i >= o.length) return { | ||
| done: true | ||
| }; | ||
| return { | ||
| done: false, | ||
| value: o[i++] | ||
| }; | ||
| }; | ||
| } | ||
| throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); | ||
| } | ||
| var buttonSize; | ||
@@ -83,2 +129,46 @@ (function (buttonSize) { | ||
| })(tooltipPosition || (tooltipPosition = {})); | ||
| var Tooltip = function Tooltip(_ref) { | ||
| var children = _ref.children, | ||
| text = _ref.text, | ||
| position = _ref.position; | ||
| var tooltipRef = useRef(null); | ||
| var tooltipTextRef = useRef(null); | ||
| var showTooltip = function showTooltip() { | ||
| return tooltipTextRef.current.style.visibility = 'visible'; | ||
| }; | ||
| var hideTooltip = function hideTooltip() { | ||
| return tooltipTextRef.current.style.visibility = 'hidden'; | ||
| }; | ||
| useEffect(function () { | ||
| var tooltip = tooltipRef.current; | ||
| if (tooltip) { | ||
| tooltip.addEventListener('mouseenter', showTooltip); | ||
| tooltip.addEventListener('mouseleave', hideTooltip); | ||
| } | ||
| if (!position) { | ||
| var tooltipTextElement = tooltipTextRef.current; | ||
| if (tooltip && tooltipTextElement) { | ||
| if (tooltipTextElement.getBoundingClientRect().top < 0) tooltip.className = 'bottom-tooltip'; | ||
| if (tooltip.getBoundingClientRect().left + tooltipTextElement.getBoundingClientRect().width > screen.width) tooltip.className = 'left-tooltip'; | ||
| } | ||
| } | ||
| return function () { | ||
| return tooltipRef.current && tooltipRef.current.removeEventListener('mouseenter', showTooltip); | ||
| }; | ||
| }, []); | ||
| return text ? createElement("div", { | ||
| ref: tooltipRef, | ||
| className: position ? position : 'top-tooltip', | ||
| onClick: function onClick(event) { | ||
| event.stopPropagation(); | ||
| tooltipTextRef.current.style.visibility = 'hidden'; | ||
| } | ||
| }, children, createElement("span", { | ||
| ref: tooltipTextRef, | ||
| className: 'tooltiptext', | ||
| onMouseEnter: function onMouseEnter(event) { | ||
| return event.preventDefault(); | ||
| } | ||
| }, text)) : children; | ||
| }; | ||
@@ -92,3 +182,112 @@ var inputType; | ||
| })(inputType || (inputType = {})); | ||
| var TextInput = function TextInput(props) { | ||
| var id = props.id, | ||
| name = props.name, | ||
| type = props.type, | ||
| customClass = props.customClass, | ||
| placeholder = props.placeholder, | ||
| value = props.value, | ||
| onChange = props.onChange, | ||
| _props$tabIndex = props.tabIndex, | ||
| tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex, | ||
| _props$disabled = props.disabled, | ||
| disabled = _props$disabled === void 0 ? false : _props$disabled, | ||
| _props$hasError = props.hasError, | ||
| hasError = _props$hasError === void 0 ? false : _props$hasError, | ||
| _props$autofocus = props.autofocus, | ||
| autofocus = _props$autofocus === void 0 ? false : _props$autofocus, | ||
| reference = props.reference, | ||
| onKeyUp = props.onKeyUp, | ||
| title = props.title, | ||
| _props$spellCheck = props.spellCheck, | ||
| spellCheck = _props$spellCheck === void 0 ? true : _props$spellCheck, | ||
| onBlur = props.onBlur, | ||
| onClick = props.onClick, | ||
| onKeyDown = props.onKeyDown, | ||
| step = props.step, | ||
| min = props.min, | ||
| onKeyPress = props.onKeyPress, | ||
| maxLength = props.maxLength; | ||
| return createElement(Tooltip, { | ||
| text: title | ||
| }, createElement("input", { | ||
| id: id, | ||
| "aria-label": id, | ||
| autoComplete: 'off', | ||
| name: name, | ||
| placeholder: placeholder, | ||
| value: value, | ||
| type: type, | ||
| className: "input " + (hasError ? 'input-error' : '') + (customClass ? customClass : '') + " " + (disabled ? 'disabled' : ''), | ||
| onChange: onChange, | ||
| tabIndex: tabIndex, | ||
| disabled: disabled, | ||
| autoFocus: autofocus, | ||
| ref: reference, | ||
| onKeyUp: onKeyUp, | ||
| onKeyDown: onKeyDown, | ||
| spellCheck: spellCheck, | ||
| onBlur: onBlur, | ||
| onClick: onClick, | ||
| "data-test-id": id || '', | ||
| "data-test-class": customClass || '', | ||
| step: step, | ||
| min: min, | ||
| onKeyPress: onKeyPress, | ||
| maxLength: maxLength | ||
| })); | ||
| }; | ||
| var DatePickerCom = function DatePickerCom(props) { | ||
| var id = props.id, | ||
| name = props.name, | ||
| date = props.date, | ||
| _onChange = props.onChange, | ||
| minDate = props.minDate, | ||
| maxDate = props.maxDate, | ||
| placeholder = props.placeholder, | ||
| clearDate = props.clearDate, | ||
| disabled = props.disabled, | ||
| reference = props.reference, | ||
| small = props.small, | ||
| customClass = props.customClass; | ||
| return createElement("div", { | ||
| className: small ? 'date-picker-small' : 'date-picker' | ||
| }, createElement(Flatpickr, { | ||
| ref: reference, | ||
| id: id, | ||
| "data-test-id": id || '', | ||
| name: name, | ||
| className: customClass + " date-picker-input " + (disabled ? ' disabled' : ''), | ||
| value: date, | ||
| options: { | ||
| minDate: minDate, | ||
| maxDate: maxDate, | ||
| dateFormat: 'm-d-Y' | ||
| }, | ||
| placeholder: placeholder, | ||
| autocomplete: 'off', | ||
| disabled: disabled, | ||
| "data-selected-date": date, | ||
| onChange: function onChange(changedDate) { | ||
| if (_onChange) _onChange(changedDate[0]);else return; | ||
| } | ||
| }), createElement("div", { | ||
| className: 'icon-container' | ||
| }, date ? createElement(Button, { | ||
| id: id, | ||
| customClass: 'cross', | ||
| onClick: clearDate, | ||
| disabled: disabled | ||
| }, createElement(FontAwesomeIcon, { | ||
| icon: faTimes, | ||
| className: disabled ? 'cross-icon disabled' : 'cross-icon' | ||
| })) : createElement("label", { | ||
| htmlFor: id, | ||
| className: disabled ? 'calender-icon disabled' : 'calender-icon' | ||
| }, createElement(FontAwesomeIcon, { | ||
| icon: faCalendarAlt | ||
| })))); | ||
| }; | ||
| var SearchResultType; | ||
@@ -105,3 +304,97 @@ (function (SearchResultType) { | ||
| })(ColumnTypes || (ColumnTypes = {})); | ||
| var inOperator = { | ||
| label: 'IN', | ||
| value: 'in', | ||
| type: 'any' | ||
| }; | ||
| var notInOperator = { | ||
| label: 'NOT IN', | ||
| value: 'not in', | ||
| type: 'any' | ||
| }; | ||
| var orderByOperator = { | ||
| label: 'ORDER BY', | ||
| value: 'order by' | ||
| }; | ||
| var byOperator = { | ||
| label: 'BY', | ||
| value: 'by' | ||
| }; | ||
| var orderOperator = { | ||
| label: 'ORDER', | ||
| value: 'order' | ||
| }; | ||
| var conditionalOperators = [{ | ||
| label: '=', | ||
| value: '=', | ||
| type: 'any' | ||
| }, { | ||
| label: '<', | ||
| value: '<', | ||
| type: 'number' | ||
| }, { | ||
| label: '>', | ||
| value: '>', | ||
| type: 'number' | ||
| }, { | ||
| label: '<=', | ||
| value: '<=', | ||
| type: 'number' | ||
| }, { | ||
| label: '>=', | ||
| value: '>=', | ||
| type: 'number' | ||
| }, { | ||
| label: '!=', | ||
| value: '>=', | ||
| type: 'any' | ||
| }, inOperator, notInOperator]; | ||
| var sortingOperators = [{ | ||
| label: 'ASC', | ||
| value: 'asc' | ||
| }, { | ||
| label: 'DESC', | ||
| value: 'desc' | ||
| }]; | ||
| var logicalOperators = [{ | ||
| label: 'AND', | ||
| value: 'and' | ||
| }, { | ||
| label: 'OR', | ||
| value: 'or' | ||
| }, orderByOperator]; | ||
| var notOperator = { | ||
| label: 'NOT', | ||
| value: 'not' | ||
| }; | ||
| var datePickerDefaultLeftMargin = 76; | ||
| var SingleSelectResultOption = function SingleSelectResultOption(props) { | ||
| var option = props.option, | ||
| _onClick = props.onClick, | ||
| focus = props.focus, | ||
| index = props.index, | ||
| onkeyPressed = props.onkeyPressed, | ||
| optionRef = props.optionRef; | ||
| var value = option.value, | ||
| label = option.label; | ||
| useEffect(function () { | ||
| if (focus) { | ||
| if (optionRef && optionRef.current) optionRef.current.focus(); | ||
| } | ||
| }, [focus]); | ||
| return createElement(Button, { | ||
| key: value, | ||
| btnRef: optionRef, | ||
| onClick: function onClick() { | ||
| return _onClick(option); | ||
| }, | ||
| customClass: 'option', | ||
| tabIndex: 0, | ||
| onKeyDown: function onKeyDown(event) { | ||
| onkeyPressed(event, index); | ||
| } | ||
| }, createElement("div", null, label)); | ||
| }; | ||
| var keyCode; | ||
@@ -124,3 +417,605 @@ (function (keyCode) { | ||
| export { Button, buttonSize, buttonVariant }; | ||
| var SingleSelectSearchResult = function SingleSelectSearchResult(_ref) { | ||
| var options = _ref.options, | ||
| onOptionClick = _ref.onOptionClick, | ||
| highlight = _ref.highlight, | ||
| setShowResults = _ref.setShowResults; | ||
| var _useState = useState(), | ||
| focus = _useState[0], | ||
| setFocus = _useState[1]; | ||
| var selectedRefs = useRef([]); | ||
| useEffect(function () { | ||
| selectedRefs.current = Array(options.length).fill(null).map(function (_, i) { | ||
| return selectedRefs.current[i] || createRef(); | ||
| }); | ||
| }, [options]); | ||
| var handleKeyDown = function handleKeyDown(event, index) { | ||
| if (event.keyCode === keyCode.Down) { | ||
| setFocus(index + 1); | ||
| } else if (event.keyCode === keyCode.Up) { | ||
| setFocus(index - 1); | ||
| } else if (event.keyCode === keyCode.Tab) { | ||
| setShowResults(false); | ||
| } | ||
| if (selectedRefs.current[index] && selectedRefs.current[index].current) { | ||
| selectedRefs.current[index].current.scrollIntoView({ | ||
| block: 'center', | ||
| behavior: 'auto' | ||
| }); | ||
| } | ||
| }; | ||
| return createElement("div", { | ||
| className: 'search-body' | ||
| }, options && options.length > 0 ? createElement("div", null, createElement("div", { | ||
| className: 'options scroller' | ||
| }, options.map(function (inSearchOption, index) { | ||
| return createElement(SingleSelectResultOption, { | ||
| key: index, | ||
| option: inSearchOption, | ||
| onClick: onOptionClick, | ||
| index: index, | ||
| focus: focus === index, | ||
| onkeyPressed: handleKeyDown, | ||
| highlight: highlight, | ||
| optionRef: selectedRefs.current[index] | ||
| }); | ||
| }))) : null); | ||
| }; | ||
| var DynamicCustomResultRenderer = function DynamicCustomResultRenderer(_ref) { | ||
| var searchResultType = _ref.searchResultType, | ||
| searchResults = _ref.searchResults, | ||
| _ref$onOptionClick = _ref.onOptionClick, | ||
| onOptionClick = _ref$onOptionClick === void 0 ? function () {} : _ref$onOptionClick, | ||
| highlight = _ref.highlight, | ||
| setShowResults = _ref.setShowResults, | ||
| datePickerPosition = _ref.datePickerPosition; | ||
| var dateRef = useRef(null); | ||
| var _useState = useState(false), | ||
| datePicker = _useState[0], | ||
| toggleDatePicker = _useState[1]; | ||
| useEffect(function () { | ||
| if (dateRef.current && searchResultType === SearchResultType.datePicker) { | ||
| dateRef.current.flatpickr.open(); | ||
| toggleDatePicker(!datePicker); | ||
| } else toggleDatePicker(!datePicker); | ||
| }, [datePickerPosition]); | ||
| useEffect(function () { | ||
| if (datePickerPosition && searchResultType === SearchResultType.datePicker && dateRef.current) { | ||
| var newLeftValue = parseInt(datePickerPosition.left, 10); | ||
| dateRef.current.flatpickr.calendarContainer.style.left = (newLeftValue > datePickerPosition.inputLeft ? datePickerPosition.inputLeft - 50 : newLeftValue) + 'px'; | ||
| dateRef.current.flatpickr.open(); | ||
| } | ||
| }, [datePicker]); | ||
| if (searchResultType === SearchResultType.singleSelect) return createElement(SingleSelectSearchResult, { | ||
| options: searchResults ? searchResults : [], | ||
| onOptionClick: onOptionClick, | ||
| highlight: highlight, | ||
| setShowResults: setShowResults | ||
| }); | ||
| if (searchResultType === SearchResultType.datePicker) return createElement(DatePickerCom, { | ||
| reference: dateRef, | ||
| date: new Date(), | ||
| onChange: function onChange(selectedDate) { | ||
| return onOptionClick(moment(selectedDate).format('MM-DD-YYYY')); | ||
| } | ||
| }); | ||
| return createElement(Fragment, null); | ||
| }; | ||
| var isValidSearchQuery = function isValidSearchQuery(searchQuery) { | ||
| if (!searchQuery) return true; | ||
| var queryValidatorRegex = /^\(*(NOT )*(\(*((([A-Za-z]\s*)|('[^']*'\s*))+((?:^|\W)in\s*(\('[^']*'\s*([,]\s*'[^']*'\s*)*\))|(?:^|\W)not\s*in\s*([A-Za-z]+\s*)|(?:^|\W)in\s*([A-Za-z]+\s*)|(?:^|\W)= '[^']*'|(?:^|\W)!= '[^']*'|(?:^|\W)> '[^']*'|(?:^|\W)< '[^']*'|(?:^|\W)<= '[^']*'|(?:^|\W)>= '[^']*'|(?:^|\W)is '[^']*'|(?:^|\W)not is '[^']*')\)*((?:^|\W)AND\W|(?:^|\W)OR\W)+(NOT\W)*)*\(*((([A-Za-z])|('[^']*'))+((?:^|\W)in (\('[^']*' *([,] *'[^']*')*\))|(?:^|\W)in ([A-Za-z]+)|(?:^|\W)not in (\('[^']*'([,]'[^']*')*\))|(?:^|\W)not in ([A-Za-z]+)|(?:^|\W)= '[^']*'|(?:^|\W)!= '[^']*'|(?:^|\W)> '[^']*'|(?:^|\W)< '[^']*'|(?:^|\W)<= '[^']*'|(?:^|\W)>= '[^']*'|(?:^|\W)is '[^']*'|(?:^|\W)not is '[^']*'))*\)*)* *\(*(((ORDER BY '[^']*')*)|((ORDER BY [A-Za-z]*)*) *(ASC|DESC)*)*\)*\)*$/gi; | ||
| return queryValidatorRegex.test(searchQuery.trim()) && isMatchingBrackets(searchQuery); | ||
| }; | ||
| var isMatchingBrackets = function isMatchingBrackets(query) { | ||
| var stack = []; | ||
| var map = { | ||
| '(': ')' | ||
| }; | ||
| for (var _iterator = _createForOfIteratorHelperLoose(query), _step; !(_step = _iterator()).done;) { | ||
| var value = _step.value; | ||
| if (value === '(') { | ||
| stack.push(value); | ||
| } | ||
| if (value === ')') { | ||
| var last = stack.pop(); | ||
| if (value !== map[last]) { | ||
| return false; | ||
| } | ||
| } | ||
| } | ||
| if (stack.length !== 0) { | ||
| return false; | ||
| } | ||
| return true; | ||
| }; | ||
| var getWidthByText = function getWidthByText(text, font) { | ||
| var canvas = createCanvas(0, 0); | ||
| var context = canvas.getContext('2d'); | ||
| if (context) { | ||
| context.font = font; | ||
| return context.measureText(text).width; | ||
| } | ||
| return 0; | ||
| }; | ||
| var CustomSearch = function CustomSearch(props) { | ||
| var customSearchData = props.customSearchData, | ||
| onSearch = props.onSearch, | ||
| onChange = props.onChange, | ||
| onEnterButtonClick = props.onEnterButtonClick, | ||
| planeQuery = props.planeQuery, | ||
| onCheckBoxChecked = props.onCheckBoxChecked; | ||
| var columns = customSearchData.columns, | ||
| searchResults = customSearchData.searchResults; | ||
| var _useState = useState(false), | ||
| showResults = _useState[0], | ||
| setShowResults = _useState[1]; | ||
| var _useState2 = useState([]), | ||
| options = _useState2[0], | ||
| setOptions = _useState2[1]; | ||
| var _useState3 = useState(planeQuery ? planeQuery.split(' ') : []), | ||
| queryArray = _useState3[0], | ||
| setQueryArray = _useState3[1]; | ||
| var _useState4 = useState(null), | ||
| lastColumn = _useState4[0], | ||
| setLastColumn = _useState4[1]; | ||
| var _useState5 = useState(SearchResultType.singleSelect), | ||
| currentResultType = _useState5[0], | ||
| setCurrentResultType = _useState5[1]; | ||
| var _useState6 = useState(null), | ||
| cursorElement = _useState6[0], | ||
| setCursorElement = _useState6[1]; | ||
| var _useState7 = useState({ | ||
| status: true, | ||
| position: 0 | ||
| }), | ||
| inputCaret = _useState7[0], | ||
| setInputCaret = _useState7[1]; | ||
| var _useState8 = useState({ | ||
| left: 0 | ||
| }), | ||
| datePickerPosition = _useState8[0], | ||
| setDatePickerPosition = _useState8[1]; | ||
| var queryRef = useRef(); | ||
| var searchQuery = queryArray.join(' '); | ||
| useEffect(function () { | ||
| document.addEventListener('mousedown', outSideClick); | ||
| return function () { | ||
| return document.removeEventListener('mousedown', outSideClick); | ||
| }; | ||
| }, []); | ||
| useEffect(function () { | ||
| var query = getSearchQueryReplacedByValues(); | ||
| onChange(query ? query : searchQuery, searchQuery, isValidSearchQuery(searchQuery)); | ||
| }, [onCheckBoxChecked]); | ||
| useEffect(function () { | ||
| var query = getSearchQueryReplacedByValues(); | ||
| onChange(query ? query : searchQuery, searchQuery, isValidSearchQuery(searchQuery)); | ||
| }, [queryArray]); | ||
| useEffect(function () { | ||
| if (inputCaret && inputCaret.position && queryArray.length) { | ||
| //code needs to be validated | ||
| var thresholdQueryArray = [].concat(queryArray); | ||
| if (thresholdQueryArray && thresholdQueryArray.length) { | ||
| thresholdQueryArray.splice(inputCaret.position + 1, queryArray.length - inputCaret.position); | ||
| setCaretPosition(thresholdQueryArray.join(' ').length); | ||
| } | ||
| } | ||
| }, [inputCaret]); | ||
| var getSearchQueryReplacedByValues = function getSearchQueryReplacedByValues() { | ||
| var wordsWithQuotesAndSpace = searchQuery.match(/'.*?'/g); | ||
| var columnsWithQuotes = wordsWithQuotesAndSpace && wordsWithQuotesAndSpace.filter(function (wordWithSpace) { | ||
| return columns && columns.find(function (column) { | ||
| return column.label.toLowerCase() === wordWithSpace.split("'").join('').toLowerCase(); | ||
| }); | ||
| }); | ||
| var query = searchQuery.replace(/'.*?'/g, '$'); | ||
| var remainingColumns = []; | ||
| if (customSearchData.columns) customSearchData.columns.forEach(function (element) { | ||
| var replaceCount = 0; | ||
| query = query.replace(new RegExp(element.label, 'gi'), function () { | ||
| replaceCount++; | ||
| return element.value.toString(); | ||
| }); | ||
| if (!replaceCount) { | ||
| remainingColumns.push(element); | ||
| } | ||
| }); | ||
| var finalQueryArray = []; | ||
| var spaceWordIndex = 0; | ||
| query.split(' ').forEach(function (element) { | ||
| var currentW = ''; | ||
| for (var _iterator = _createForOfIteratorHelperLoose(element), _step; !(_step = _iterator()).done;) { | ||
| var _char = _step.value; | ||
| if (_char === '$') { | ||
| // TO DO Handle It Using Regex | ||
| if (columnsWithQuotes.find(function (columnWithQuote) { | ||
| return columnWithQuote.toLowerCase() === wordsWithQuotesAndSpace[spaceWordIndex].toLowerCase(); | ||
| })) { | ||
| var remainingColumnValue = remainingColumns.find(function (remainingColumn) { | ||
| return wordsWithQuotesAndSpace[spaceWordIndex].split("'").join('').toLowerCase() === remainingColumn.label.toLowerCase(); | ||
| }); | ||
| currentW += remainingColumnValue ? remainingColumnValue.value : ''; | ||
| } else currentW += wordsWithQuotesAndSpace[spaceWordIndex].toUpperCase(); | ||
| spaceWordIndex++; | ||
| } else currentW += _char; | ||
| } | ||
| finalQueryArray.push(currentW); | ||
| }); | ||
| return finalQueryArray.join(' '); | ||
| }; | ||
| useEffect(function () { | ||
| if (lastColumn && searchResults) { | ||
| setOptions(searchResults); | ||
| setShowResults(true); | ||
| } | ||
| }, [JSON.stringify(customSearchData)]); | ||
| var getAutoCompleteSuggestions = function getAutoCompleteSuggestions(lastWord, currentColumn, secondLastExpression) { | ||
| var isLogicalOperator = logicalOperators.find(function (searchOption) { | ||
| return lastWord && searchOption.label.toLowerCase() === lastWord.toLowerCase(); | ||
| }); | ||
| if (!lastWord || isLogicalOperator) return [].concat(columns, [notOperator]); | ||
| if ((lastWord === notOperator.label || lastWord === notOperator.value) && currentColumn) return [inOperator]; | ||
| var isSortingOperator = sortingOperators.find(function (searchOption) { | ||
| return lastWord && searchOption.label.toLowerCase() === lastWord.toLowerCase(); | ||
| }); | ||
| if (isSortingOperator) return []; | ||
| if (lastWord === orderOperator.label || lastWord === orderOperator.value) return [byOperator]; | ||
| if (lastWord === byOperator.label || lastWord === byOperator.value) return columns; | ||
| if (lastWord === notOperator.label || lastWord === notOperator.value) return [].concat(columns, [notOperator]); | ||
| var isColumnValue = columns.find(function (searchOption) { | ||
| return searchOption.label.toLowerCase() === removeCharactersFromString(lastWord, ["'", '(']).toLowerCase(); | ||
| }); | ||
| if (isColumnValue && (secondLastExpression === byOperator.label || secondLastExpression === byOperator.value)) return sortingOperators; | ||
| if (isColumnValue && isColumnValue.type === 'string') return [].concat(conditionalOperators.filter(function (operator) { | ||
| return operator.type === 'any'; | ||
| }));else if (isColumnValue && isColumnValue.type === 'date') return conditionalOperators; | ||
| var isConditionalOperator = conditionalOperators.find(function (searchOption) { | ||
| return searchOption.label.toLowerCase() === lastWord.toLowerCase(); | ||
| }); | ||
| if (isConditionalOperator) return []; | ||
| return logicalOperators; | ||
| }; | ||
| var getQueryArrayByQuery = function getQueryArrayByQuery(query) { | ||
| var finalQueryArray = []; | ||
| var wordsWithQuotesAndSpace = query.match(/'.*?'/g); | ||
| var queryArrayBySpace = query.replace(/'.*?'/g, '$').split(' '); | ||
| var spaceWordIndex = 0; | ||
| queryArrayBySpace.forEach(function (element) { | ||
| var currentW = ''; | ||
| for (var _iterator2 = _createForOfIteratorHelperLoose(element), _step2; !(_step2 = _iterator2()).done;) { | ||
| var _char2 = _step2.value; | ||
| if (_char2 === '$') { | ||
| currentW += wordsWithQuotesAndSpace[spaceWordIndex]; | ||
| spaceWordIndex++; | ||
| } else currentW += _char2; | ||
| } | ||
| finalQueryArray.push(currentW); | ||
| }); | ||
| return finalQueryArray; | ||
| }; | ||
| var setLastColumnValue = function setLastColumnValue(newQueryArray) { | ||
| var modifiedWordIndex = newQueryArray.findIndex(function (newElement, index) { | ||
| return newElement !== getQueryArrayByQuery(queryArray.join(' ').replace(/ +/g, ' '))[index]; | ||
| }); | ||
| var lastExpression = newQueryArray[modifiedWordIndex - 1]; | ||
| var newColumnValue = newQueryArray[modifiedWordIndex - 2]; | ||
| if (newColumnValue === notOperator.label || newColumnValue === notOperator.value) newColumnValue = newQueryArray[modifiedWordIndex - 3]; | ||
| var currentColumn = columns.find(function (columnData) { | ||
| return newColumnValue && columnData.label.toLowerCase() === removeCharactersFromString(newColumnValue, ['(']).toLowerCase().replace(/\'/gi, ''); | ||
| }); | ||
| if (currentColumn) setLastColumn(currentColumn); | ||
| return { | ||
| lastExpression: lastExpression, | ||
| modifiedWord: newQueryArray[modifiedWordIndex], | ||
| currentColumn: currentColumn, | ||
| modifiedWordIndex: modifiedWordIndex, | ||
| newColumnValue: newColumnValue | ||
| }; | ||
| }; | ||
| var getMultipleColumnValues = function getMultipleColumnValues(currentWord, newWord) { | ||
| if (currentWord.substr(0, 1) === '(') { | ||
| var multipleValues = currentWord.replace('(', '').split(','); | ||
| if (multipleValues.length) { | ||
| multipleValues[multipleValues.length - 1] = "'" + newWord + "'"; | ||
| return '(' + multipleValues; | ||
| } else return '(' + [newWord]; | ||
| } else return ''; | ||
| }; | ||
| var isQueryValidByQuotes = function isQueryValidByQuotes(newQueryArray) { | ||
| var incompleteWordIndex = -1; | ||
| var quotesCount = 0; | ||
| newQueryArray.forEach(function (queryElement, index) { | ||
| for (var _iterator3 = _createForOfIteratorHelperLoose(queryElement), _step3; !(_step3 = _iterator3()).done;) { | ||
| var _char3 = _step3.value; | ||
| if (_char3 === "'") { | ||
| incompleteWordIndex = index; | ||
| quotesCount++; | ||
| } | ||
| } | ||
| }); | ||
| return { | ||
| incompleteWordIndex: incompleteWordIndex, | ||
| status: quotesCount % 2 === 0 | ||
| }; | ||
| }; | ||
| var getIncompleteQuoteQueryArray = function getIncompleteQuoteQueryArray(newQueryArray) { | ||
| var queryValidByQuotes = isQueryValidByQuotes(newQueryArray); | ||
| if (queryValidByQuotes.status) return newQueryArray;else { | ||
| var incompleteWordIndex = queryValidByQuotes.incompleteWordIndex; | ||
| var allIncompleteElements = newQueryArray.slice(incompleteWordIndex); | ||
| newQueryArray.splice(incompleteWordIndex, newQueryArray.length - incompleteWordIndex, allIncompleteElements.join(' ')); | ||
| return newQueryArray; | ||
| } | ||
| }; | ||
| var removeCharactersFromString = function removeCharactersFromString(targetString, characters) { | ||
| var finalString = ''; | ||
| characters.forEach(function (characterToRemove) { | ||
| if (!finalString) finalString = targetString.split(characterToRemove).join('');else finalString = finalString.split(characterToRemove).join(''); | ||
| }); | ||
| return finalString; | ||
| }; | ||
| var setCaretPosition = function setCaretPosition(pos) { | ||
| if (queryRef.current.setSelectionRange) { | ||
| queryRef.current.focus(); | ||
| queryRef.current.setSelectionRange(pos, pos); | ||
| } | ||
| }; | ||
| var suggestOptions = function suggestOptions(newQuery) { | ||
| if (newQuery === ' ') { | ||
| setOptions(getAutoCompleteSuggestions(null, null, null)); | ||
| setShowResults(true); | ||
| } | ||
| var newQueryArray = getIncompleteQuoteQueryArray(getQueryArrayByQuery(newQuery)); | ||
| // .replace(/ +/g, ' ') | ||
| var _setLastColumnValue = setLastColumnValue(newQueryArray), | ||
| lastExpression = _setLastColumnValue.lastExpression, | ||
| modifiedWord = _setLastColumnValue.modifiedWord, | ||
| currentColumn = _setLastColumnValue.currentColumn, | ||
| modifiedWordIndex = _setLastColumnValue.modifiedWordIndex, | ||
| newColumnValue = _setLastColumnValue.newColumnValue; | ||
| if (currentColumn && currentColumn.type === 'date') { | ||
| setCurrentResultType(SearchResultType.datePicker); | ||
| setCursorElement({ | ||
| index: modifiedWordIndex, | ||
| word: modifiedWord | ||
| }); | ||
| var changedWordArray = newQueryArray; | ||
| changedWordArray.splice(modifiedWordIndex + 1, newQueryArray.length - (modifiedWordIndex + 1)); | ||
| setQueryArray(newQueryArray); | ||
| setDatePickerPosition({ | ||
| left: getWidthByText(changedWordArray.join(' '), '12px system-ui') + datePickerDefaultLeftMargin, | ||
| inputLeft: parseInt(queryRef.current.getBoundingClientRect().left, 10) + parseInt(queryRef.current.clientWidth, 10) | ||
| }); | ||
| if (modifiedWord.substr(-1) !== ')' && conditionalOperators.find(function (operator) { | ||
| return operator.label.toLowerCase() === lastExpression.toLowerCase(); | ||
| })) { | ||
| setShowResults(true); | ||
| } else setShowResults(false); | ||
| return; | ||
| } | ||
| var numberOfSpaces = newQueryArray.filter(function (element) { | ||
| return element === ''; | ||
| }); | ||
| setCurrentResultType(SearchResultType.singleSelect); | ||
| var suggestions = numberOfSpaces.length > 1 ? [] : getAutoCompleteSuggestions(lastExpression, currentColumn, newColumnValue); | ||
| if (!newQueryArray[modifiedWord] && newQueryArray[modifiedWordIndex - 1] && newQueryArray[modifiedWordIndex - 1].substr(0, 1) === '(' && newQueryArray[modifiedWordIndex - 2] && newQueryArray[modifiedWordIndex - 2].toLowerCase() === inOperator.label.toLowerCase() && newQueryArray[modifiedWordIndex - 1].substr(-1) !== ')') { | ||
| newQueryArray.pop(); | ||
| setOptions([]); | ||
| } else if (currentColumn && !suggestions.length && modifiedWord && removeCharactersFromString(modifiedWord, ["'"]).length >= 2 && modifiedWord.substr(-1) !== "'") { | ||
| if (modifiedWord.substr(0, 1) === '(') { | ||
| var allColumnValues = modifiedWord.replace('(', '').split(','); | ||
| var modifiedColumnValue = ''; | ||
| var modifiedIncompleteStatus = isQueryValidByQuotes(allColumnValues); | ||
| if (modifiedIncompleteStatus.status) modifiedColumnValue = allColumnValues[allColumnValues.length - 1];else modifiedColumnValue = allColumnValues[modifiedIncompleteStatus.incompleteWordIndex]; | ||
| if (modifiedWord.substr(-1) !== ',' && modifiedWord.substr(-1) !== ')' && modifiedColumnValue && modifiedColumnValue.split("'").join('').length >= 2) onSearch({ | ||
| searchText: btoa(modifiedColumnValue.split("'").join('')), | ||
| id: currentColumn.id, | ||
| currentValueKey: currentColumn.value | ||
| }); | ||
| } else { | ||
| if (/[a-zA-z]/.test(modifiedWord.substr(-1))) onSearch({ | ||
| searchText: btoa(modifiedWord.split("'").join('')), | ||
| id: currentColumn.id, | ||
| currentValueKey: currentColumn.value | ||
| }); | ||
| } | ||
| } else { | ||
| setOptions(suggestions.filter(function (option) { | ||
| return option.label.toLowerCase().includes(modifiedWord && modifiedWord.split('(').join('') && modifiedWord.split('(').join('').toLowerCase()); | ||
| })); | ||
| setShowResults(true); | ||
| } | ||
| setCursorElement({ | ||
| index: modifiedWordIndex, | ||
| word: modifiedWord | ||
| }); | ||
| setQueryArray(newQueryArray); | ||
| }; | ||
| var onInputChange = function onInputChange(event) { | ||
| suggestOptions(event.target.value); | ||
| }; | ||
| var getOptionValue = function getOptionValue(lastConditionalOperator, label) { | ||
| if ([].concat(logicalOperators, conditionalOperators, [notOperator]).find(function (operator) { | ||
| return operator.label.toLowerCase() === label.toLowerCase(); | ||
| })) { | ||
| return label; | ||
| } else if (lastConditionalOperator && lastConditionalOperator.toLowerCase() === inOperator.label.toLowerCase()) { | ||
| return "('" + label + "'"; | ||
| } else if (conditionalOperators.find(function (operator) { | ||
| return operator.label === lastConditionalOperator; | ||
| })) { | ||
| return "'" + label + "'"; | ||
| } else return null; | ||
| }; | ||
| var setOptionForDateTypeColumn = function setOptionForDateTypeColumn(lastConditionalOperator, option, caretPosition) { | ||
| setQueryArray(queryArray.map(function (queryElement, index) { | ||
| if (index === cursorElement.index) { | ||
| caretPosition = index; | ||
| var optionValue = getOptionValue(lastConditionalOperator, option); | ||
| if (optionValue) return optionValue;else return "" + (option.includes(' ') ? "'" + option + "'" : "" + option); | ||
| } else return queryElement; | ||
| })); | ||
| return caretPosition; | ||
| }; | ||
| var setOptionForStringTypeColumn = function setOptionForStringTypeColumn(lastConditionalOperator, option, caretPosition) { | ||
| setQueryArray(queryArray.map(function (queryElement, index) { | ||
| if (index === cursorElement.index) { | ||
| caretPosition = index; | ||
| var optionValue = getOptionValue(lastConditionalOperator, option.label); | ||
| if (optionValue) return optionValue;else if (columns.find(function (operator) { | ||
| return operator.label.toLowerCase() === option.label.toLowerCase(); | ||
| })) return option.label.includes(' ') ? "'" + option.label + "'" : option.label;else return "" + (option.label.includes(' ') ? "'" + option.label + "'" : "" + option.label); | ||
| } else return queryElement; | ||
| })); | ||
| return caretPosition; | ||
| }; | ||
| var onOptionClick = function onOptionClick(option) { | ||
| var lastConditionalOperator = queryArray[queryArray.length - 2]; | ||
| var caretPosition = null; | ||
| if (cursorElement) { | ||
| if (lastConditionalOperator && lastConditionalOperator.toLowerCase() === inOperator.label.toLowerCase() && cursorElement.word.includes('(')) { | ||
| setQueryArray(queryArray.map(function (queryElement, index) { | ||
| if (index === cursorElement.index) { | ||
| caretPosition = index; | ||
| return "" + getMultipleColumnValues(cursorElement.word, currentResultType === SearchResultType.datePicker ? option : option.label); | ||
| } else return queryElement; | ||
| })); | ||
| } else { | ||
| if (currentResultType === SearchResultType.datePicker) { | ||
| caretPosition = setOptionForDateTypeColumn(lastConditionalOperator, option, caretPosition); | ||
| } else if (currentResultType === SearchResultType.singleSelect) { | ||
| caretPosition = setOptionForStringTypeColumn(lastConditionalOperator, option, caretPosition); | ||
| } | ||
| } | ||
| } | ||
| if (caretPosition) { | ||
| setInputCaret({ | ||
| status: !inputCaret.status, | ||
| position: caretPosition | ||
| }); | ||
| } | ||
| setShowResults(false); | ||
| queryRef.current.focus(); | ||
| }; | ||
| var outSideClick = function outSideClick(event) { | ||
| var selectedElement = document.getElementById('dynamic-results'); | ||
| var datePickers = document.getElementsByClassName('flatpickr-calendar'); | ||
| if (selectedElement && selectedElement.contains(event.target)) return; | ||
| var elementInDatePicker = false; | ||
| Array.from(datePickers).forEach(function (datePicker) { | ||
| if (datePicker.contains(event.target)) elementInDatePicker = true; | ||
| }); | ||
| if (elementInDatePicker) return; | ||
| return setShowResults(false); | ||
| }; | ||
| var onInputClick = function onInputClick() { | ||
| setOptions([]); | ||
| setShowResults(false); | ||
| }; | ||
| var onCrossButtonClick = function onCrossButtonClick() { | ||
| setQueryArray([]); | ||
| }; | ||
| var onEnterClick = function onEnterClick(event) { | ||
| if (event.keyCode === keyCode.Enter && isValidSearchQuery(searchQuery) && searchQuery.length) onEnterButtonClick(); | ||
| }; | ||
| return createElement("div", { | ||
| className: 'custom-search' | ||
| }, createElement(TextInput, { | ||
| type: inputType.text, | ||
| customClass: 'custom-search-input', | ||
| reference: queryRef, | ||
| value: searchQuery, | ||
| onChange: onInputChange, | ||
| onClick: onInputClick, | ||
| onKeyUp: onEnterClick, | ||
| placeholder: 'Find records using search query' | ||
| }), searchQuery.length ? createElement(Button, { | ||
| customClass: 'clear-query', | ||
| onClick: onCrossButtonClick, | ||
| tabIndex: showResults ? -1 : 0 | ||
| }, createElement(FontAwesomeIcon, { | ||
| icon: faTimes | ||
| })) : null, isValidSearchQuery(searchQuery) ? createElement(FontAwesomeIcon, { | ||
| className: 'custom-search-query-status valid', | ||
| icon: faCheckCircle | ||
| }) : createElement(FontAwesomeIcon, { | ||
| className: 'custom-search-query-status invalid', | ||
| icon: faTimesCircle | ||
| }), showResults && createElement("div", { | ||
| id: 'dynamic-results', | ||
| className: 'custom-search-results' | ||
| }, createElement(DynamicCustomResultRenderer, { | ||
| searchResultType: currentResultType, | ||
| searchResults: searchQuery.length > 0 ? options : [], | ||
| onOptionClick: onOptionClick, | ||
| setShowResults: setShowResults, | ||
| datePickerPosition: datePickerPosition | ||
| })), isValidSearchQuery(searchQuery) ? createElement("div", null, planeQuery) : null); | ||
| }; | ||
| var CustomSearchWrapper = function CustomSearchWrapper(_ref) { | ||
| var searchData = _ref.searchData, | ||
| handleSearchData = _ref.handleSearchData; | ||
| var _useState = useState(), | ||
| customSearchData = _useState[0], | ||
| setCustomSearchData = _useState[1]; | ||
| var _useState2 = useState(), | ||
| searchQuery = _useState2[0], | ||
| setSearchQuery = _useState2[1]; | ||
| var _useState3 = useState(true), | ||
| isQueryValid = _useState3[0], | ||
| setIsQueryValid = _useState3[1]; | ||
| useEffect(function () { | ||
| console.log(searchData); | ||
| setCustomSearchData(searchData); | ||
| }, [searchData]); | ||
| // const handleSearchData = (payload: any) => { | ||
| // // console.log(payload); | ||
| // const urlConfig = { | ||
| // method: 'GET', | ||
| // headers: new Headers({ | ||
| // 'Authorization': bearerToken | ||
| // }) | ||
| // } | ||
| // const url = `https://dev.api.adlake.numerator.cloud/api/classification/reference/customsearchfields/?search_text=${payload.searchText}&id=${payload.id}`; | ||
| // fetch(url, urlConfig).then((res) => { | ||
| // return res.json(); | ||
| // }).then((response) => { | ||
| // const result = { ...customSearchData, searchResults: response.data.fields } | ||
| // // console.log(customSearchData); | ||
| // setCustomSearchData(result); | ||
| // }) | ||
| // } | ||
| var handleOnChange = function handleOnChange(args, args2, args3) { | ||
| // console.log(args); | ||
| setSearchQuery(args); | ||
| console.log(args2); | ||
| // console.log(args3); | ||
| setIsQueryValid(args3); | ||
| var result = _extends({}, customSearchData, { | ||
| searchResults: [] | ||
| }); | ||
| // console.log(customSearchData); | ||
| setCustomSearchData(result); | ||
| }; | ||
| return createElement("div", { | ||
| className: 'custom-wrapper' | ||
| }, customSearchData && createElement(CustomSearch, { | ||
| customSearchData: customSearchData, | ||
| onChange: handleOnChange, | ||
| onCheckBoxChecked: true, | ||
| onEnterButtonClick: function onEnterButtonClick() {}, | ||
| onSearch: handleSearchData, | ||
| planeQuery: '' | ||
| }), createElement("div", { | ||
| className: "query-label " + (isQueryValid ? 'valid-text' : 'invalid-text') | ||
| }, searchQuery)); | ||
| }; | ||
| // export default CustomSearchWrapper; | ||
| export { Button, CustomSearchWrapper, buttonSize, buttonVariant }; | ||
| //# sourceMappingURL=adintel-lib-poc.esm.js.map |
| /// <reference types="react" /> | ||
| import './search.scss'; | ||
| declare const CustomSearchWrapper: ({ searchData, handleSearchData }: { | ||
| export declare const CustomSearchWrapper: ({ searchData, handleSearchData }: { | ||
| searchData: any; | ||
| handleSearchData: any; | ||
| }) => JSX.Element; | ||
| export default CustomSearchWrapper; |
@@ -1,2 +0,2 @@ | ||
| export * from './components/composite/CustomSearch/CustomSearchWrapper'; | ||
| export * from './components/composite/CustomSearch/index'; | ||
| export * from './components/core/Button/index'; |
| { | ||
| "version": "0.1.6", | ||
| "version": "0.1.7", | ||
| "license": "MIT", | ||
@@ -4,0 +4,0 @@ "main": "dist/index.js", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by74.59%
625742
- Number of package files
- increased by2.41%
85
- Lines of code
- increased by94.3%
3783
No dependency changes