react-asc 18.9.1 → 18.9.5

package/index.js

@@ -177,17 +177,15 @@ var styles$S = {"list":"List-module_list__1ax9w"};
 styleInject(css_248z$S);
 
 const List = (props) => {
-    const { children, className, isFlush } = props;
+    const { children, className, isFlush } = props, rest = __rest(props, ["children", "className", "isFlush"]);
     const getCssClasses = () => {
         const cssClasses = [];
-        if (isFlush) {
-            cssClasses.push(styles$S.flush);
-        }
+        isFlush && cssClasses.push(styles$S.flush);
         cssClasses.push(styles$S.list);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React__default["default"].createElement("ul", { className: getCssClasses() }, children));
+    return (React__default["default"].createElement("ul", Object.assign({ className: getCssClasses() }, rest), children));
 };
 
 var css_248z$R = ".ListItem-module_listItem__3hAZb {\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: 0.75rem 1.25rem;\n  min-width: 100%;\n  color: var(--bodyColor);\n  text-align: inherit;\n  transition: background 0.5s ease; }\n  .ListItem-module_listItem__3hAZb:hover, .ListItem-module_listItem__3hAZb.ListItem-module_active__hyvch {\n    cursor: pointer;\n    z-index: 1;\n    text-decoration: none;\n    background-color: rgba(0, 0, 0, 0.04);\n    color: var(--primary); }\n  .ListItem-module_listItem__3hAZb + .ListItem-module_listItem__3hAZb {\n    border-top-width: 0; }\n  .ListItem-module_listItem__3hAZb.ListItem-module_primary__2OJAg {\n    color: var(--primary-contrast-text);\n    background-color: var(--primary); }\n  .ListItem-module_listItem__3hAZb.ListItem-module_accent__2RXHe {\n    color: var(--accent-contrast-text);\n    background-color: var(--accent); }\n  .ListItem-module_listItem__3hAZb.ListItem-module_secondary__3EVjH {\n    color: var(--secondary-contrast-text);\n    background-color: var(--secondary); }\n  .ListItem-module_listItem__3hAZb.ListItem-module_light__3CJBB {\n    color: var(--light-contrast-text);\n    background-color: var(--light); }\n  .ListItem-module_listItem__3hAZb.ListItem-module_dark__SazkE {\n    color: var(--dark-contrast-text);\n    background-color: var(--dark); }\n  .ListItem-module_listItem__3hAZb.ListItem-module_disabled__2Kh0o {\n    color: rgba(0, 0, 0, 0.26); }\n    .ListItem-module_listItem__3hAZb.ListItem-module_disabled__2Kh0o:hover {\n      cursor: not-allowed;\n      background-color: inherit; }\n";
@@ -195,55 +193,61 @@ var styles$R = {"listItem":"ListItem-module_listItem__3hAZb","active":"ListItem-
 styleInject(css_248z$R);
 
 const ListItem = (props) => {
-    const { id, children, color, active, className, isHoverable, disabled, onClick } = props;
+    const { children, color, active, className, disabled, onClick } = props, rest = __rest(props, ["children", "color", "active", "className", "disabled", "onClick"]);
     const getCssClasses = () => {
         const cssClasses = [];
-        if (active) {
-            cssClasses.push(styles$R['active']);
-        }
-        if (disabled) {
-            cssClasses.push(styles$R['disabled']);
-        }
-        color && cssClasses.push(styles$R[color]);
         cssClasses.push(styles$R.listItem);
+        color && cssClasses.push(styles$R[color]);
+        active && cssClasses.push(styles$R['active']);
+        disabled && cssClasses.push(styles$R['disabled']);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
     const handleClick = (e) => {
         !disabled && onClick && onClick(e);
     };
-    return (React__default["default"].createElement("li", { id: id, onClick: handleClick, className: getCssClasses() }, children));
+    return (React__default["default"].createElement("li", Object.assign({ onClick: handleClick, className: getCssClasses() }, rest), children));
 };
 
 var css_248z$Q = ".ListItemAvatar-module_avatar__1fjSE {\n  margin-right: 16px; }\n  .ListItemAvatar-module_avatar__1fjSE svg, .ListItemAvatar-module_avatar__1fjSE img {\n    width: 24px;\n    height: 24px; }\n  .ListItemAvatar-module_avatar__1fjSE img {\n    border-radius: 50%; }\n";
 var styles$Q = {"avatar":"ListItemAvatar-module_avatar__1fjSE"};
 styleInject(css_248z$Q);
 
-const ListItemAvatar = ({ avatar }) => (React__default["default"].createElement("div", { className: styles$Q.avatar }, avatar));
+const ListItemAvatar = (_a) => {
+    var { avatar } = _a, rest = __rest(_a, ["avatar"]);
+    return (React__default["default"].createElement("div", Object.assign({ className: styles$Q.avatar }, rest), avatar));
+};
 
 var css_248z$P = ".ListItemIcon-module_icon__-nsUy {\n  margin-right: 32px; }\n  .ListItemIcon-module_icon__-nsUy svg {\n    width: 24px;\n    height: 24px; }\n";
 var styles$P = {"icon":"ListItemIcon-module_icon__-nsUy"};
 styleInject(css_248z$P);
 
-const ListItemIcon = ({ icon }) => (React__default["default"].createElement("div", { className: styles$P.icon }, icon));
+const ListItemIcon = (_a) => {
+    var { icon } = _a, rest = __rest(_a, ["icon"]);
+    return (React__default["default"].createElement("div", Object.assign({ className: styles$P.icon }, rest), icon));
+};
 
 var css_248z$O = ".ListItemAction-module_listItemAction__26S66 {\n  display: flex;\n  justify-content: center;\n  min-width: 40px; }\n  .ListItemAction-module_listItemAction__26S66 svg {\n    width: 20px;\n    height: 20px; }\n";
 var styles$O = {"listItemAction":"ListItemAction-module_listItemAction__26S66"};
 styleInject(css_248z$O);
 
-const ListItemAction = ({ children, onClick }) => (React__default["default"].createElement("div", { className: styles$O.listItemAction, onClick: e => onClick && onClick(e) }, children));
+const ListItemAction = (_a) => {
+    var { children, onClick } = _a, rest = __rest(_a, ["children", "onClick"]);
+    return (React__default["default"].createElement("div", Object.assign({ className: styles$O.listItemAction, onClick: e => onClick && onClick(e) }, rest), children));
+};
 
 var css_248z$N = ".ListItemTextIcon-module_listItemText__ZUWxQ {\n  flex: 1; }\n";
 var styles$N = {"listItemText":"ListItemTextIcon-module_listItemText__ZUWxQ"};
 styleInject(css_248z$N);
 
-const ListItemText = ({ primary, secondary }) => {
+const ListItemText = (_a) => {
+    var { primary, secondary } = _a, rest = __rest(_a, ["primary", "secondary"]);
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$N.listItemText);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React__default["default"].createElement("div", { className: getCssClasses() },
+    return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest),
         React__default["default"].createElement(ListItemTextPrimary, null, primary),
         secondary &&
             React__default["default"].createElement(ListItemTextSecondary, null, secondary)));
@@ -632,7 +636,7 @@ var styles$y = {"iconButton":"IconButton-module_iconButton__1xqrL","shadow":"Ico
 styleInject(css_248z$y);
 
 const IconButton = (props) => {
-    const { children, icon, label, variant = exports.VARIANT.text, color = exports.COLOR.dark, size = exports.SIZE.md, isActive, disabled, className, shadow } = props, rest = __rest(props, ["children", "icon", "label", "variant", "color", "size", "isActive", "disabled", "className", "shadow"]);
+    const { children, icon, variant = exports.VARIANT.text, color = exports.COLOR.dark, size = exports.SIZE.md, isActive, disabled, className, shadow } = props, rest = __rest(props, ["children", "icon", "variant", "color", "size", "isActive", "disabled", "className", "shadow"]);
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$y[color]);
@@ -898,21 +902,20 @@ const Select = (props) => {
             }
         }
     };
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { ref: selectConainter, className: styles$u.selectContainer },
-            React__default["default"].createElement("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: e => handleOnKeyDown(e) },
-                !multiple && renderSingleViewModel(),
-                multiple && renderMultipleViewModel(),
-                React__default["default"].createElement(Icon, { className: "ml-auto" },
-                    React__default["default"].createElement(ChevronDownSolidIcon, null))),
-            isShow &&
-                reactDom.createPortal(React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement("div", { className: styles$u.selectMenu, style: { left: (_a = selectConainter.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().x, top: (_b = selectConainter.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().y, width: (_c = selectConainter.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().width } },
-                        React__default["default"].createElement(List, null, options && options.map((option, index) => React__default["default"].createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), active: isActive(option) },
-                            multiple &&
-                                React__default["default"].createElement(Checkbox, { checked: isActive(option), onChange: () => handleOnClick(option) }),
-                            React__default["default"].createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
-                    React__default["default"].createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() })), document.body))));
+    return (React__default["default"].createElement("div", { ref: selectConainter, className: styles$u.selectContainer },
+        React__default["default"].createElement("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: e => handleOnKeyDown(e) },
+            !multiple && renderSingleViewModel(),
+            multiple && renderMultipleViewModel(),
+            React__default["default"].createElement(Icon, { className: "ml-auto" },
+                React__default["default"].createElement(ChevronDownSolidIcon, null))),
+        isShow &&
+            reactDom.createPortal(React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement("div", { className: styles$u.selectMenu, style: { left: (_a = selectConainter.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().x, top: (_b = selectConainter.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().y, width: (_c = selectConainter.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().width } },
+                    React__default["default"].createElement(List, null, options && options.map((option, index) => React__default["default"].createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), active: isActive(option) },
+                        multiple &&
+                            React__default["default"].createElement(Checkbox, { checked: isActive(option), onChange: () => handleOnClick(option) }),
+                        React__default["default"].createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
+                React__default["default"].createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() })), document.body)));
 };
 
 var css_248z$t = "textarea {\n  min-height: calc(10em + 0.75rem + 2px);\n  display: block;\n  width: 100%;\n  padding: 0.375rem 0.75rem;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5;\n  background-clip: padding-box;\n  border: 2px solid var(--input-border-color);\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  border-radius: var(--borderRadius);\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  resize: vertical; }\n  textarea:focus {\n    outline: none !important;\n    border-color: var(--primary); }\n";
@@ -1550,11 +1553,10 @@ const Row = (props) => {
 };
 
 const Link = (props) => {
-    const { url, className, target, children } = props;
+    const { href = '#', className, target, children } = props, rest = __rest(props, ["href", "className", "target", "children"]);
     const [status, setStatus] = React.useState(STATUS.NORMAL);
     const getCssClasses = () => {
         const cssClasses = [];
-        // cssClasses.push(styles.badgeContainer);
         className && cssClasses.push(className);
         status !== STATUS.NORMAL && cssClasses.push(status);
         return cssClasses.filter(css => css).join(' ');
@@ -1565,20 +1567,21 @@ const Link = (props) => {
     const onMouseLeave = () => {
         setStatus(STATUS.NORMAL);
     };
-    return (React__default["default"].createElement("a", { className: getCssClasses(), href: url || '#', target: target, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, children));
+    return (React__default["default"].createElement("a", Object.assign({ className: getCssClasses(), href: href, target: target, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, rest), children));
 };
 
 var css_248z$i = ".LoadingIndicator-module_loadingIndicatorContainer__3e1-3 {\n  position: fixed;\n  top: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%; }\n\n.LoadingIndicator-module_loadingIndicator__tvp5i {\n  animation-name: LoadingIndicator-module_spinAnimation__PKRNn;\n  animation-duration: 5000ms;\n  animation-iteration-count: infinite;\n  animation-timing-function: linear;\n  width: 24px;\n  height: 24px; }\n\n@keyframes LoadingIndicator-module_spinAnimation__PKRNn {\n  from {\n    transform: rotate(0deg); }\n  to {\n    transform: rotate(360deg); } }\n";
 var styles$i = {"loadingIndicatorContainer":"LoadingIndicator-module_loadingIndicatorContainer__3e1-3","loadingIndicator":"LoadingIndicator-module_loadingIndicator__tvp5i","spinAnimation":"LoadingIndicator-module_spinAnimation__PKRNn"};
 styleInject(css_248z$i);
 
-const LoadingIndicator = () => {
+const LoadingIndicator = (_a) => {
+    var rest = __rest(_a, []);
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$i.loadingIndicator);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React__default["default"].createElement("div", { className: getCssClasses() },
+    return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest),
         React__default["default"].createElement(SpinnerSolidIcon, null)));
 };
 
@@ -1805,14 +1808,18 @@ class SidebarItemModel {
 }
 
 const Sidebar = (props) => {
-    const { items, currentUrl, onItemClicked } = props;
+    const { className, items, currentUrl, onItemClicked } = props, rest = __rest(props, ["className", "items", "currentUrl", "onItemClicked"]);
     const [menuItems, setMenuItems] = React.useState([]);
     React.useEffect(() => {
         if (items && items.length > 0) {
             initMenuItems();
         }
     }, []);
-    React.useEffect(() => { initMenuItems(); }, [currentUrl]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
     const initMenuItems = () => {
         const newItems = items.map(item => new SidebarItemModel(item.id, item.label, item.path, item.icon, isMenuItemActive(item.path), item.items && item.items.map(subItem => new SidebarItemModel(subItem.id, subItem.label, subItem.path, subItem.icon, isMenuItemActive(`${item.path}/${subItem.path}`))), item.isCollapsible, item.isCollapsed));
         setMenuItems(newItems);
@@ -1836,10 +1843,7 @@ const Sidebar = (props) => {
     const handleClickItem = (item, e) => {
         if (item.items && item.items.length > 0 && item.isCollapsible) {
             const newMenuItems = menuItems.map((menuItem) => {
-                if (item.id === menuItem.id) {
-                    const updatedItem = Object.assign(Object.assign({}, menuItem), { isCollapsed: !menuItem.isCollapsed });
-                    return updatedItem;
-                }
+                menuItem.isCollapsed = !menuItem.isCollapsed;
                 return menuItem;
             });
             setMenuItems(newMenuItems);
@@ -1851,7 +1855,7 @@ const Sidebar = (props) => {
     const handleClickSubItem = (itemPath, subItemPath, e) => {
         navigate(e, `/${itemPath}/${subItemPath}`);
     };
-    return (React__default["default"].createElement("nav", { className: "sidebar" },
+    return (React__default["default"].createElement("nav", Object.assign({ className: getCssClasses() }, rest),
         React__default["default"].createElement(List, null, menuItems.map(item => (React__default["default"].createElement(React__default["default"].Fragment, { key: item.id },
             React__default["default"].createElement(ListItem, { active: isMenuItemActive(item.path), onClick: (e) => handleClickItem(item, e) },
                 React__default["default"].createElement(ListItemText, { primary: React__default["default"].createElement(React__default["default"].Fragment, null,
@@ -1870,7 +1874,7 @@ var styles$e = {"snackbar":"Snackbar-module_snackbar__3AF3D","bounceIn":"Snackba
 styleInject(css_248z$e);
 
 const Snackbar = (props) => {
-    const { children, color = exports.COLOR.dark, actionText = 'ok', onOk } = props;
+    const { children, color = exports.COLOR.dark, actionText = 'ok', onOk } = props, rest = __rest(props, ["children", "color", "actionText", "onOk"]);
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$e.snackbar);
@@ -1881,7 +1885,7 @@ const Snackbar = (props) => {
     const handleClickAction = (e) => {
         onOk && onOk(e);
     };
-    return (React__default["default"].createElement("div", { className: getCssClasses() },
+    return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest),
         React__default["default"].createElement("div", { className: styles$e.text }, children),
         React__default["default"].createElement("div", { className: styles$e.action + " text-accent", onClick: handleClickAction },
             React__default["default"].createElement("span", null, actionText))));