react-asc 18.6.1 → 18.7.3

package/index.js

@@ -261,8 +261,9 @@ styleInject(css_248z$I);
 // multiple
 // custom template render items
 const AutoComplete = (props) => {
-    const { id, name, className, options = [], openOnFocus = true, disabled, readOnly, onChange, value } = props;
+    const { id, name, className, options = [], openOnFocus = true, disabled, readOnly, debounce = 0, placeholder, showClearButton, onChange, onSelect, value } = props;
     const [model, setModel] = React.useState('');
+    const [searchText, setSearchText] = React.useState('');
     const [isShow, setIsShow] = React.useState(false);
     const [optionsTemp, setOptionsTemp] = React.useState([]);
     const selectConainter = React.useRef(null);
@@ -273,9 +274,31 @@ const AutoComplete = (props) => {
         }
     }, [value]);
     React.useEffect(() => {
-        const optionsOrigin = JSON.parse(JSON.stringify(options));
-        setOptionsTemp(optionsOrigin);
+        if (options && options.length > 0) {
+            const optionsOrigin = JSON.parse(JSON.stringify(options));
+            const regex = new RegExp(searchText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&'), 'gi');
+            const optionsFiltered = optionsOrigin.filter(o => { var _a; return (_a = o.label) === null || _a === void 0 ? void 0 : _a.match(regex); });
+            setOptionsTemp(optionsFiltered);
+        }
     }, [options]);
+    useDebounce(() => { onChange && onChange(searchText); }, debounce, [searchText]);
+    React.useEffect(() => {
+        if (isShow === true) {
+            document.body.classList.add('modal-open');
+            const main = document.querySelector('.main');
+            main === null || main === void 0 ? void 0 : main.classList.add('modal-open');
+        }
+        else {
+            document.body.classList.remove('modal-open');
+            const main = document.querySelector('.main');
+            main === null || main === void 0 ? void 0 : main.classList.remove('modal-open');
+        }
+    }, [isShow]);
+    React.useEffect(() => {
+        return () => {
+            document.body.classList.remove('modal-open');
+        };
+    }, []);
     const getCssClass = () => {
         const cssClasses = [];
         className && cssClasses.push(className);
@@ -286,26 +309,29 @@ const AutoComplete = (props) => {
     const hide = () => setIsShow(false);
     const handleOnClick = (option) => {
         if (model !== option.value) {
-            onChange && onChange(option.value);
+            onSelect && onSelect(option);
         }
         setModel(option.label);
         hide();
     };
     const handleOnChange = (e) => {
-        const optionsOrigin = JSON.parse(JSON.stringify(options));
-        const searchText = e.target.value;
-        setModel(searchText);
-        const regex = new RegExp(searchText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&'), 'gi');
-        const optionsFiltered = optionsOrigin.filter(o => { var _a; return (_a = o.label) === null || _a === void 0 ? void 0 : _a.match(regex); });
-        setOptionsTemp(optionsFiltered);
+        setModel(e.target.value);
+        setSearchText(e.target.value);
         show();
     };
     const handleOnFocus = () => {
         openOnFocus && show();
     };
+    const handleClickReset = () => {
+        setModel('');
+        setSearchText('');
+    };
     return (React__default['default'].createElement(React__default['default'].Fragment, null,
         React__default['default'].createElement("div", { ref: selectConainter, className: styles$I.selectContainer },
-            React__default['default'].createElement("input", { type: "text", className: getCssClass(), id: id, name: name, tabIndex: 0, readOnly: readOnly, disabled: disabled, onChange: handleOnChange, onFocus: handleOnFocus, value: model }),
+            React__default['default'].createElement("div", { className: "d-flex" },
+                React__default['default'].createElement("input", { type: "text", className: getCssClass(), id: id, name: name, tabIndex: 0, readOnly: readOnly, disabled: disabled, onChange: handleOnChange, onFocus: handleOnFocus, placeholder: placeholder, value: model }),
+                showClearButton && (model === null || model === void 0 ? void 0 : model.length) > 0 &&
+                    React__default['default'].createElement(IconButton, { icon: React__default['default'].createElement(TimesSolidIcon, null), onClick: handleClickReset })),
             isShow &&
                 React__default['default'].createElement(React__default['default'].Fragment, null,
                     React__default['default'].createElement("div", { className: styles$I.selectMenu },
@@ -2134,6 +2160,15 @@ const useConstructor = (callBack = () => { }) => {
     setHasBeenCalled(true);
 };
 
+function useDebounce(callback, timeout, deps) {
+    const timeoutId = React.useRef();
+    React.useEffect(() => {
+        clearTimeout(timeoutId.current);
+        timeoutId.current = setTimeout(callback, timeout);
+        return () => clearTimeout(timeoutId.current);
+    }, deps);
+}
+
 var css_248z$4 = ".Step-module_stepWrapper__1se3l {\n  display: flex;\n  align-items: center;\n  padding-left: 8px;\n  padding-right: 8px;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.Step-module_stepWrapper__1se3l.Step-module_hasLabel__3cdCU:not(.Step-module_disabled__1R7hh):hover {\n  cursor: pointer;\n  background-color: rgba(0, 0, 0, 0.04);\n  border-radius: var(--borderRadius);\n}\n\n.Step-module_step__2siYu {\n  width: 40px;\n  height: 40px;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.Step-module_step__2siYu:not(.Step-module_hasLabel__3cdCU):not(.Step-module_disabled__1R7hh):hover {\n  border-radius: 100%;\n  cursor: pointer;\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.Step-module_step__2siYu.Step-module_hasLabel__3cdCU svg {\n  width: 18px !important;\n  height: 18px !important;\n}\n\n.Step-module_stepIconCircle__3IyDn svg {\n  width: 24px;\n  height: 24px;\n}\n\n.Step-module_stepValue__2TVrP {\n  position: absolute;\n  color: var(--secondary-contrast-text);\n}\n.Step-module_stepValue__2TVrP .Step-module_isActive__1QTL4 {\n  color: var(--primary-contrast-text);\n}";
 var styles$4 = {"stepWrapper":"Step-module_stepWrapper__1se3l","hasLabel":"Step-module_hasLabel__3cdCU","disabled":"Step-module_disabled__1R7hh","step":"Step-module_step__2siYu","stepIconCircle":"Step-module_stepIconCircle__3IyDn","stepValue":"Step-module_stepValue__2TVrP","isActive":"Step-module_isActive__1QTL4"};
 styleInject(css_248z$4);
@@ -2638,6 +2673,7 @@ exports.loadingIndicatorService = loadingIndicatorService;
 exports.modalService = modalService;
 exports.snackbarService = snackbarService;
 exports.useConstructor = useConstructor;
+exports.useDebounce = useDebounce;
 exports.useHover = useHover;
 exports.useWindowSize = useWindowSize;
 //# sourceMappingURL=index.js.map