@trilogy-ds/react 0.0.1-beta.9 → 0.0.4-beta-v4

package/lib/components/autocomplete/AutoComplete.native.js

@@ -1,71 +1,116 @@
+import { __awaiter, __generator, __read, __rest } from "tslib";
+import Input from '../../components/input/Input.native';
 import React, { useEffect, useMemo, useState } from 'react';
 import { Keyboard, StyleSheet, View } from 'react-native';
-import Input from '../input/Input.native';
+import { defaultMatching, getLabel } from './Autocomplete.helpers';
 import AutoCompleteMenuNative from './menu/AutoCompleteMenu.native';
-import { getLabel, defaultMatching } from './Autocomplete.helpers';
-import { ComponentName } from '../enumsComponentsName';
 import { debounce } from './utils';
-const AutoComplete = ({ value, data, onChange, displayMenu, onItemSelected, customIcon, placeholder, matching = defaultMatching, getSuggestions, debounceSuggestionsTimeout, }) => {
-    const [valueInput, setValueInput] = useState(value !== null && value !== void 0 ? value : '');
-    const [suggestions, setSuggestions] = useState(data !== null && data !== void 0 ? data : []);
-    const [isOpenMenu, setIsOpenMenu] = useState(displayMenu !== null && displayMenu !== void 0 ? displayMenu : false);
-    const updateSuggestions = async (valueInput) => {
-        if (getSuggestions) {
-            const suggestions = await getSuggestions(valueInput);
-            suggestions && setSuggestions(suggestions);
-            setIsOpenMenu(Boolean(suggestions === null || suggestions === void 0 ? void 0 : suggestions.length));
-        }
-        else if (matching && data.length) {
-            const suggestions = matching(data, valueInput);
-            setSuggestions(suggestions);
-            setIsOpenMenu(Boolean(suggestions.length));
-        }
-    };
-    const updateSuggestionsFn = useMemo(() => {
+/**
+ * AutoComplete Component
+ * @param placeholder {string} placeholder for input
+ * @param defaultValue {string} Default Value for Input
+ * @param data {string[]} Datas AutoComplete list Item
+ * @param value {string} Value of Input
+ * @param onChange {Function} OnChange Input Event
+ * @param onFocus {Function} OnFocus Input Event
+ * @param children {Function} Custom Component for dropdown list
+ * @param displayMenu {boolean} Display Autocomplete Menu (default: true)
+ * @param matching {Function} matching function
+ * @param status {InputStatus} Input with status - (SUCCESS|WARNING|ERROR|DEFAULT)
+ * @param onBlur {Function} onBlur Input Event
+ * @param testId {string} Test Id for Test Integration
+ * @param disabled {boolean} Disabled input
+ * @param onIconClick {Function} onIconClick Input Event
+ * @param onItemSelected {Function} OnSelectedItemList event
+ * @param iconName {IconName} Additional icon
+ * @param debounceSuggestionsTimeout {number} Timeout for getSuggestions debounce
+ * @param getSuggestions {Function} getSuggestions event
+ */
+var AutoComplete = function (_a) {
+    var value = _a.value, data = _a.data, onChange = _a.onChange, displayMenu = _a.displayMenu, onItemSelected = _a.onItemSelected, iconName = _a.iconName, placeholder = _a.placeholder, _b = _a.matching, matching = _b === void 0 ? defaultMatching : _b, getSuggestions = _a.getSuggestions, debounceSuggestionsTimeout = _a.debounceSuggestionsTimeout, onFocus = _a.onFocus, testId = _a.testId, status = _a.status, onBlur = _a.onBlur, disabled = _a.disabled, onIconClick = _a.onIconClick, others = __rest(_a, ["value", "data", "onChange", "displayMenu", "onItemSelected", "iconName", "placeholder", "matching", "getSuggestions", "debounceSuggestionsTimeout", "onFocus", "testId", "status", "onBlur", "disabled", "onIconClick"]);
+    var _c = __read(useState(value !== null && value !== void 0 ? value : ''), 2), valueInput = _c[0], setValueInput = _c[1];
+    var _d = __read(useState(data !== null && data !== void 0 ? data : []), 2), suggestions = _d[0], setSuggestions = _d[1];
+    var _e = __read(useState(displayMenu !== null && displayMenu !== void 0 ? displayMenu : false), 2), isOpenMenu = _e[0], setIsOpenMenu = _e[1];
+    var updateSuggestions = function (valueInput) { return __awaiter(void 0, void 0, void 0, function () {
+        var suggestions_1, suggestions_2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!getSuggestions) return [3 /*break*/, 2];
+                    return [4 /*yield*/, getSuggestions(valueInput)];
+                case 1:
+                    suggestions_1 = _a.sent();
+                    suggestions_1 && setSuggestions(suggestions_1);
+                    setIsOpenMenu(Boolean(suggestions_1 === null || suggestions_1 === void 0 ? void 0 : suggestions_1.length));
+                    return [3 /*break*/, 3];
+                case 2:
+                    if (matching && data.length) {
+                        suggestions_2 = matching(data, valueInput);
+                        setSuggestions(suggestions_2);
+                        setIsOpenMenu(Boolean(suggestions_2.length));
+                    }
+                    _a.label = 3;
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); };
+    var updateSuggestionsFn = useMemo(function () {
         return debounceSuggestionsTimeout ? debounce(updateSuggestions, debounceSuggestionsTimeout) : updateSuggestions;
     }, [debounceSuggestionsTimeout]);
-    useEffect(() => {
-        if (valueInput) {
-            updateSuggestionsFn(valueInput);
-        }
+    useEffect(function () {
+        updateSuggestionsFn(valueInput);
     }, [valueInput]);
-    const onTextChanged = async (e) => {
-        const { inputValue, inputName, inputSelectionStart } = e;
-        setValueInput(inputValue);
-        if (onChange) {
-            onChange({
-                inputName,
-                inputValue,
-                inputSelectionStart,
-            });
-        }
-    };
-    const handleSelectItem = (item) => {
+    useEffect(function () {
+        setValueInput(value || '');
+    }, [value]);
+    var onTextChanged = function (e) { return __awaiter(void 0, void 0, void 0, function () {
+        var inputValue, inputName, inputSelectionStart;
+        return __generator(this, function (_a) {
+            inputValue = e.inputValue, inputName = e.inputName, inputSelectionStart = e.inputSelectionStart;
+            setValueInput(inputValue);
+            if (onChange) {
+                onChange({
+                    inputName: inputName,
+                    inputValue: inputValue,
+                    inputSelectionStart: inputSelectionStart,
+                });
+            }
+            return [2 /*return*/];
+        });
+    }); };
+    var handleSelectItem = function (item) {
         setValueInput(getLabel(item));
         setIsOpenMenu(false);
         Keyboard.dismiss();
         if (onItemSelected && (data || suggestions)) {
-            onItemSelected({ value: item, index: (data.length ? data : suggestions).indexOf(item) });
+            onItemSelected({
+                value: item,
+                index: (data.length ? data : suggestions).indexOf(item),
+            });
         }
     };
-    useEffect(() => {
-        const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => setIsOpenMenu(true));
-        const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => setIsOpenMenu(false));
-        return () => {
+    var handleFocus = function (event) {
+        setIsOpenMenu(true);
+        if (onFocus)
+            onFocus(event);
+    };
+    useEffect(function () {
+        var keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', function () { return setIsOpenMenu(true); });
+        var keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', function () { return setIsOpenMenu(false); });
+        return function () {
             keyboardDidHideListener.remove();
             keyboardDidShowListener.remove();
         };
     }, []);
     return (React.createElement(View, { style: styles.autoComplete },
         React.createElement(View, null,
-            React.createElement(Input, { placeholder: placeholder, type: 'text', onFocus: () => setIsOpenMenu(true), customIcon: customIcon, value: valueInput, hasIcon: Boolean(customIcon), onChange: onTextChanged })),
+            React.createElement(Input, { status: status, testId: testId, placeholder: placeholder, type: 'text', iconNameLeft: iconName, value: valueInput, onChange: onTextChanged, onFocus: handleFocus, onBlur: onBlur, disabled: disabled, onClick: onIconClick })),
         isOpenMenu && React.createElement(AutoCompleteMenuNative, { suggestions: suggestions, handleSelectItem: handleSelectItem })));
 };
-const styles = StyleSheet.create({
+var styles = StyleSheet.create({
     autoComplete: {
         position: 'relative',
     },
 });
-AutoComplete.displayName = ComponentName.AutoComplete;
 export default AutoComplete;
-//# sourceMappingURL=AutoComplete.native.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQXV0b0NvbXBsZXRlLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvYXV0b2NvbXBsZXRlL0F1dG9Db21wbGV0ZS5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssTUFBTSxpQ0FBaUMsQ0FBQTtBQUVuRCxPQUFPLEtBQUssRUFBRSxFQUFFLFNBQVMsRUFBRSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBQzNELE9BQU8sRUFBRSxRQUFRLEVBQUUsVUFBVSxFQUFFLElBQUksRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUV6RCxPQUFPLEVBQUUsZUFBZSxFQUFFLFFBQVEsRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBQ2xFLE9BQU8sc0JBQXNCLE1BQU0sZ0NBQWdDLENBQUE7QUFDbkUsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLFNBQVMsQ0FBQTtBQUVsQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FvQkc7QUFDSCxJQUFNLFlBQVksR0FBRyxVQUFDLEVBa0JJO0lBakJ4QixJQUFBLEtBQUssV0FBQSxFQUNMLElBQUksVUFBQSxFQUNKLFFBQVEsY0FBQSxFQUNSLFdBQVcsaUJBQUEsRUFDWCxjQUFjLG9CQUFBLEVBQ2QsUUFBUSxjQUFBLEVBQ1IsV0FBVyxpQkFBQSxFQUNYLGdCQUEwQixFQUExQixRQUFRLG1CQUFHLGVBQWUsS0FBQSxFQUMxQixjQUFjLG9CQUFBLEVBQ2QsMEJBQTBCLGdDQUFBLEVBQzFCLE9BQU8sYUFBQSxFQUNQLE1BQU0sWUFBQSxFQUNOLE1BQU0sWUFBQSxFQUNOLE1BQU0sWUFBQSxFQUNOLFFBQVEsY0FBQSxFQUNSLFdBQVcsaUJBQUEsRUFDUixNQUFNLGNBakJXLHlOQWtCckIsQ0FEVTtJQUVILElBQUEsS0FBQSxPQUE4QixRQUFRLENBQVMsS0FBSyxhQUFMLEtBQUssY0FBTCxLQUFLLEdBQUksRUFBRSxDQUFDLElBQUEsRUFB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

package/lib/components/autocomplete/AutoCompleteProps.d.ts

@@ -1,24 +1,47 @@
-/// <reference types="react" />
-import { InputChangeEvent, InputClickEvent, InputProps } from '../input/InputProps';
+import { InputChangeEventWeb, InputChangeEventNative, InputClickEvent, InputProps } from '../../components/input/InputProps';
+import { FocusEventHandler } from 'react';
+import { IconName, IconNameValues } from '../../components/icon';
+import { CommonProps } from '../../objects/facets/CommonProps';
 /**
  * AutoComplete Interface
  */
-export interface AutoCompleteProps<T = string> extends InputProps {
+export interface AutoCompletePropsWeb<T = string> extends InputProps, CommonProps {
     children?: (item: T) => React.ReactNode;
     defaultValue?: string;
     value?: string;
-    inputValue?: string;
     data: T[];
     classNameMenu?: string;
     absoluteMenu?: boolean;
     fullwidthMenu?: boolean;
     matching?: (data: T[], value: string) => T[];
-    onChange?: (event: InputChangeEvent) => void;
+    onChange?: (event: InputChangeEventWeb) => void;
     onItemSelected?: (event: ItemSelectedEvent<T | null>) => void;
     displayMenu?: boolean;
     onIconClick?: (event: InputClickEvent) => void;
     getSuggestions?: (search: string) => Promise<T[]>;
     debounceSuggestionsTimeout?: number;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    iconName?: IconName | IconNameValues;
+}
+export interface AutoCompletePropsNative<T = string> extends InputProps {
+    children?: (item: T) => React.ReactNode;
+    defaultValue?: string;
+    value?: string;
+    data: T[];
+    classNameMenu?: string;
+    absoluteMenu?: boolean;
+    fullwidthMenu?: boolean;
+    matching?: (data: T[], value: string) => T[];
+    onChange?: (event: InputChangeEventNative) => void;
+    onItemSelected?: (event: ItemSelectedEvent<T | null>) => void;
+    displayMenu?: boolean;
+    onIconClick?: (event: InputClickEvent) => void;
+    getSuggestions?: (search: string) => Promise<T[]>;
+    debounceSuggestionsTimeout?: number;
+    onFocus?: (event: React.BaseSyntheticEvent) => void;
+    onBlur?: (event: unknown) => void;
+    iconName?: IconName | IconNameValues;
 }
 export interface Item<T = string> {
     label: string;

package/lib/components/autocomplete/AutoCompleteProps.js

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=AutoCompleteProps.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQXV0b0NvbXBsZXRlUHJvcHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2F1dG9jb21wbGV0ZS9BdXRvQ29tcGxldGVQcm9wcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIn0=