react-asc 18.6.1 → 18.7.3

package/components/AutoComplete/AutoComplete.d.ts

@@ -8,8 +8,12 @@ export interface IAutoCompleteProps {
     value?: string;
     openOnFocus?: boolean;
     disabled?: boolean;
+    placeholder?: string;
     readOnly?: boolean;
-    onChange?: (val: string) => void;
+    debounce?: number;
+    showClearButton?: boolean;
+    onSelect?: (val: ISelectOption) => void;
+    onChange?: (val: string | undefined) => void;
     onKeyDown?: (event: any) => void;
 }
 export declare const AutoComplete: (props: IAutoCompleteProps) => JSX.Element;

package/hooks/index.d.ts

@@ -1,4 +1,4 @@
-export * from './Debounce.hook';
 export * from './useWindowSize';
 export * from './useHover';
 export * from './useConstructor';
+export * from './useDebounce';

package/hooks/useDebounce.d.ts

@@ -0,0 +1 @@
+export declare function useDebounce(callback: any, timeout: any, deps: any): void;

package/index.es.js

@@ -253,8 +253,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] = useState('');
+    const [searchText, setSearchText] = useState('');
     const [isShow, setIsShow] = useState(false);
     const [optionsTemp, setOptionsTemp] = useState([]);
     const selectConainter = useRef(null);
@@ -265,9 +266,31 @@ const AutoComplete = (props) => {
         }
     }, [value]);
     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]);
+    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]);
+    useEffect(() => {
+        return () => {
+            document.body.classList.remove('modal-open');
+        };
+    }, []);
     const getCssClass = () => {
         const cssClasses = [];
         className && cssClasses.push(className);
@@ -278,26 +301,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.createElement(React.Fragment, null,
         React.createElement("div", { ref: selectConainter, className: styles$I.selectContainer },
-            React.createElement("input", { type: "text", className: getCssClass(), id: id, name: name, tabIndex: 0, readOnly: readOnly, disabled: disabled, onChange: handleOnChange, onFocus: handleOnFocus, value: model }),
+            React.createElement("div", { className: "d-flex" },
+                React.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.createElement(IconButton, { icon: React.createElement(TimesSolidIcon, null), onClick: handleClickReset })),
             isShow &&
                 React.createElement(React.Fragment, null,
                     React.createElement("div", { className: styles$I.selectMenu },
@@ -2126,6 +2152,15 @@ const useConstructor = (callBack = () => { }) => {
     setHasBeenCalled(true);
 };
 
+function useDebounce(callback, timeout, deps) {
+    const timeoutId = useRef();
+    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);
@@ -2525,5 +2560,5 @@ const TreeView = (props) => {
     })));
 };
 
-export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonGroup, COLOR, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Column, ConditionalWrapper, DATEMODE, DateSelect, DaySelect, Drawer, EmailValidator, ExpansionPanel, ExpansionPanelContent, ExpansionPanelHeader, FileInput, FloatingActionButton, Form, FormControl, FormError, FormGroup, FormHint, FormInput, FormLabel, GlobalModal, HomeSolidIcon, HourSelect, Icon, IconButton, IsEmptyValidator, IsEqualValidator, Link, List, ListItem, ListItemAction, ListItemAvatar, ListItemIcon, ListItemText, LoadingIndicator, LoadingIndicatorContainer, MODALBUTTONTYPE, MODALTYPE, Menu, MenuBody, MenuDivider, MenuItem, MenuToggle, MilliSecondSelect, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, NumberSelect, POSITION, PlusSolidIcon, Row, SIZE, STATUS, SecondSelect, Select, Sidebar, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, Tab, TabPanel, Table, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TreeView, Typography, VARIANT, YearSelect, loadingIndicatorService, modalService, snackbarService, useConstructor, useHover, useWindowSize };
+export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonGroup, COLOR, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Column, ConditionalWrapper, DATEMODE, DateSelect, DaySelect, Drawer, EmailValidator, ExpansionPanel, ExpansionPanelContent, ExpansionPanelHeader, FileInput, FloatingActionButton, Form, FormControl, FormError, FormGroup, FormHint, FormInput, FormLabel, GlobalModal, HomeSolidIcon, HourSelect, Icon, IconButton, IsEmptyValidator, IsEqualValidator, Link, List, ListItem, ListItemAction, ListItemAvatar, ListItemIcon, ListItemText, LoadingIndicator, LoadingIndicatorContainer, MODALBUTTONTYPE, MODALTYPE, Menu, MenuBody, MenuDivider, MenuItem, MenuToggle, MilliSecondSelect, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, NumberSelect, POSITION, PlusSolidIcon, Row, SIZE, STATUS, SecondSelect, Select, Sidebar, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, Tab, TabPanel, Table, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TreeView, Typography, VARIANT, YearSelect, loadingIndicatorService, modalService, snackbarService, useConstructor, useDebounce, useHover, useWindowSize };
 //# sourceMappingURL=index.es.js.map