@lowdefy/blocks-antd 4.0.0-alpha.1 → 4.0.0-alpha.12

package/dist/blocks/Menu/Menu.js

@@ -1,6 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 /*
-  Copyright 2020-2021 Lowdefy, Inc
+  Copyright 2020-2022 Lowdefy, Inc
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
@@ -17,85 +16,45 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { blockDefaultProps } from '@lowdefy/block-utils';
 import { Menu } from 'antd';
 import { type, get } from '@lowdefy/helpers';
-import color from '../../color.js';
+function _extends() {
+    _extends = Object.assign || 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);
+}
 const getDefaultMenu = (menus, menuId = 'default', links)=>{
     if (type.isArray(links)) return links;
     if (!type.isArray(menus)) return [];
     const menu = menus.find((item)=>item.menuId === menuId
-    ) || menus[0] || {
-    };
+    ) || menus[0] || {};
     return menu.links || [];
 };
-const getTitle = (id, properties, defaultTitle)=>properties && properties.title || defaultTitle || id
+const getTitle = ({ id , properties , pageId , url  })=>properties && properties.title || pageId || url || id
 ;
-const MenuTitle = ({ basePath , id , Link , linkStyle , makeCssClass , pageId , properties , url  })=>{
-    if (type.isString(pageId)) {
-        return(/*#__PURE__*/ _jsx(Link, {
-            href: `${basePath}/${pageId}`,
-            className: makeCssClass([
-                linkStyle
-            ]),
-            children: getTitle(id, properties, pageId)
-        }));
-    }
-    if (url) {
-        return(/*#__PURE__*/ _jsx(Link, {
-            href: url,
-            className: makeCssClass([
-                linkStyle
-            ]),
-            children: getTitle(id, properties, url)
-        }));
-    }
-    return(/*#__PURE__*/ _jsx("span", {
-        className: makeCssClass([
-            linkStyle
-        ]),
-        children: getTitle(id, properties)
-    }));
-};
-const getNestedColors = (menuColor, background)=>{
-    const fontColor = color(menuColor, 6);
-    const bgColor = color(menuColor, 3);
-    return {
-        backgroundColor: background && `${bgColor} !important`,
-        color: `${fontColor} !important`,
-        '& > *': {
-            color: `${fontColor} !important`
-        },
-        '& > * > *': {
-            color: `${fontColor} !important`
-        },
-        borderColor: `${fontColor} !important`,
-        '&:after': {
-            borderColor: `${fontColor} !important`
-        }
-    };
-};
-const MenuComp = ({ basePath , blockId , components: { Icon , Link  } , events , menus , methods , pageId , properties , rename ,  })=>{
+const MenuComp = ({ blockId , components: { Icon , Link  } , events , menus , methods , pageId , properties , rename ,  })=>{
     const styles = {
         lineHeight: '64px',
+        width: '100%',
         display: properties.mode === 'horizontal' && 'inline-block'
     };
-    const exProps = {
-    };
+    const exProps = {};
     if (properties.mode === 'inline') {
         exProps.collapsed = properties.collapsed;
         exProps.inlineIndent = properties.inlineIndent;
     }
     const menu = getDefaultMenu(menus, properties.menuId, properties.links);
     const theme = properties.theme || 'dark';
-    const nestedColors = getNestedColors(properties.selectedColor);
-    const nestedColorsBg = getNestedColors(properties.selectedColor, true);
-    const bgColorDarker = {
-        backgroundColor: properties.backgroundColor && `${color(properties.backgroundColor, 7)} !important`
-    };
-    const bgColor = {
-        backgroundColor: properties.backgroundColor && `${properties.backgroundColor} !important`
-    };
-    return(/*#__PURE__*/ _jsx(Menu, {
+    return(/*#__PURE__*/ React.createElement(Menu, _extends({
         id: blockId,
-        expandIcon: properties.expandIcon && /*#__PURE__*/ _jsx(Icon, {
+        expandIcon: properties.expandIcon && /*#__PURE__*/ React.createElement(Icon, {
             blockId: `${blockId}_expandIcon`,
             events: events,
             properties: properties.expandIcon
@@ -106,22 +65,7 @@ const MenuComp = ({ basePath , blockId , components: { Icon , Link  } , events ,
         theme: theme,
         className: methods.makeCssClass([
             styles,
-            properties.backgroundColor && bgColor,
-            properties.selectedColor && theme === 'dark' && {
-                '& > li.ant-menu-item-selected': nestedColorsBg,
-                '& > li.ant-menu-submenu > ul > li.ant-menu-item-selected': nestedColorsBg,
-                '& > li.ant-menu-submenu > ul > li.ant-menu-item-group > ul > li.ant-menu-item-selected': nestedColorsBg
-            },
-            properties.selectedColor && theme === 'light' && {
-                '& > li.ant-menu-item-selected': nestedColorsBg,
-                '& > li.ant-menu-submenu-selected': nestedColors,
-                '& > li.ant-menu-item:hover': nestedColors,
-                '& > li.ant-menu-submenu:hover': nestedColors,
-                '& > li.ant-menu-submenu > ul > li.ant-menu-item:hover': nestedColors,
-                '& > li.ant-menu-submenu > ul > li.ant-menu-item-selected': nestedColorsBg,
-                '& > li.ant-menu-submenu > ul > li.ant-menu-item-group > ul > li.ant-menu-item-selected': nestedColorsBg
-            },
-            properties.style, 
+            properties.style
         ]),
         defaultOpenKeys: properties.defaultOpenKeys || properties.mode === 'inline' && properties.collapsed !== true && [
             (menu.find((link1)=>(link1.links || []).map((subLink)=>subLink.links ? subLink.links.map((subSubLink)=>subSubLink.pageId
@@ -132,8 +76,7 @@ const MenuComp = ({ basePath , blockId , components: { Icon , Link  } , events ,
                         pageId
                     ]).indexOf(link) !== -1
                 )
-            ) || {
-            }).id, 
+            ) || {}).id, 
         ] || [],
         selectedKeys: properties.selectedKeys || [
             pageId
@@ -166,147 +109,109 @@ const MenuComp = ({ basePath , blockId , components: { Icon , Link  } , events ,
                     openKeys
                 }
             })
-        ,
-        ...exProps,
-        children: menu.map((link, i)=>{
-            switch(link.type){
-                case 'MenuDivider':
-                    return(/*#__PURE__*/ _jsx(Menu.Divider, {
-                        className: methods.makeCssClass([
-                            link.style
-                        ]),
-                        dashed: link.properties && link.properties.dashed
-                    }, `${link.id}_${i}`));
-                case 'MenuGroup':
-                    return(/*#__PURE__*/ _jsx(Menu.SubMenu, {
-                        className: methods.makeCssClass([
-                            {
-                                '& > ul': bgColorDarker
-                            }, 
-                        ]),
-                        popupClassName: methods.makeCssClass([
-                            properties.backgroundColor && {
-                                '& > ul': bgColorDarker
-                            },
-                            properties.selectedColor && theme === 'dark' && {
-                                '& > ul > li.ant-menu-item-selected': nestedColorsBg,
-                                '& > ul > li.ant-menu-item-group > ul > li.ant-menu-item-selected': nestedColorsBg
-                            },
-                            properties.selectedColor && theme === 'light' && {
-                                '& > ul > li.ant-menu-item-selected': nestedColorsBg,
-                                '& > ul > li.ant-menu-item:hover': nestedColors,
-                                '& > ul > li.ant-menu-item-group > ul > li.ant-menu-item-selected': nestedColorsBg
-                            }, 
-                        ]),
-                        title: /*#__PURE__*/ _jsx(MenuTitle, {
-                            basePath: basePath,
-                            Link: Link,
-                            linkStyle: methods.makeCssClass(link.style, true),
-                            id: link.id,
-                            makeCssClass: methods.makeCssClass,
-                            properties: link.properties
-                        }),
-                        icon: link.properties && link.properties.icon && /*#__PURE__*/ _jsx(Icon, {
-                            blockId: `${link.id}_icon`,
-                            events: events,
-                            properties: link.properties.icon
-                        }),
-                        children: get(link, 'links', {
-                            default: []
-                        }).map((subLink, j)=>{
-                            switch(subLink.type){
-                                case 'MenuDivider':
-                                    return(/*#__PURE__*/ _jsx(Menu.Divider, {
+    }, exProps), menu.map((link, i)=>{
+        switch(link.type){
+            case 'MenuDivider':
+                return(/*#__PURE__*/ React.createElement(Menu.Divider, {
+                    key: `${link.id}_${i}`,
+                    className: methods.makeCssClass([
+                        link.style
+                    ]),
+                    dashed: link.properties && link.properties.dashed
+                }));
+            case 'MenuGroup':
+                return(/*#__PURE__*/ React.createElement(Menu.SubMenu, {
+                    key: `${link.pageId || link.id}_${i}`,
+                    title: /*#__PURE__*/ React.createElement(Link, _extends({
+                        id: link.pageId || link.id || i,
+                        className: methods.makeCssClass(link.style, true)
+                    }, link), getTitle(link)),
+                    icon: link.properties && link.properties.icon && /*#__PURE__*/ React.createElement(Icon, {
+                        blockId: `${link.id}_icon`,
+                        events: events,
+                        properties: link.properties.icon
+                    })
+                }, get(link, 'links', {
+                    default: []
+                }).map((subLink, j)=>{
+                    switch(subLink.type){
+                        case 'MenuDivider':
+                            return(/*#__PURE__*/ React.createElement(Menu.Divider, {
+                                key: `${subLink.id || i}_${j}`,
+                                className: methods.makeCssClass([
+                                    subLink.style
+                                ]),
+                                dashed: subLink.properties && subLink.properties.dashed
+                            }));
+                        case 'MenuGroup':
+                            return(/*#__PURE__*/ React.createElement(Menu.ItemGroup, {
+                                key: `${subLink.pageId || subLink.id}_${j}`,
+                                title: /*#__PURE__*/ React.createElement(Link, _extends({
+                                    id: subLink.pageId || subLink.id || j,
+                                    className: methods.makeCssClass(subLink.style, true)
+                                }, subLink), getTitle(subLink))
+                            }, subLink.links.map((subLinkGroup, k)=>{
+                                if (subLinkGroup.type === 'MenuDivider') {
+                                    return(/*#__PURE__*/ React.createElement(Menu.Divider, {
+                                        key: `${subLink.id}_${k}`,
                                         className: methods.makeCssClass([
                                             subLink.style
                                         ]),
                                         dashed: subLink.properties && subLink.properties.dashed
-                                    }, `${subLink.id || i}_${j}`));
-                                case 'MenuGroup':
-                                    return(/*#__PURE__*/ _jsx(Menu.ItemGroup, {
-                                        title: /*#__PURE__*/ _jsx(MenuTitle, {
-                                            basePath: basePath,
-                                            Link: Link,
-                                            linkStyle: methods.makeCssClass(subLink.style, true),
-                                            id: subLink.id,
-                                            makeCssClass: methods.makeCssClass,
-                                            properties: subLink.properties
-                                        }),
-                                        children: subLink.links.map((subLinkGroup, k)=>{
-                                            if (subLinkGroup.type === 'MenuDivider') {
-                                                return(/*#__PURE__*/ _jsx(Menu.Divider, {
-                                                    className: methods.makeCssClass([
-                                                        subLink.style
-                                                    ]),
-                                                    dashed: subLink.properties && subLink.properties.dashed
-                                                }, `${subLink.id}_${k}`));
-                                            }
-                                            return(/*#__PURE__*/ _jsx(Menu.Item, {
-                                                danger: get(subLinkGroup, 'properties.danger'),
-                                                icon: subLinkGroup.properties && subLinkGroup.properties.icon && /*#__PURE__*/ _jsx(Icon, {
-                                                    blockId: `${subLinkGroup.id}_icon`,
-                                                    events: events,
-                                                    properties: subLinkGroup.properties.icon
-                                                }),
-                                                children: /*#__PURE__*/ _jsx(MenuTitle, {
-                                                    basePath: basePath,
-                                                    Link: Link,
-                                                    linkStyle: methods.makeCssClass(subLinkGroup.style, true),
-                                                    id: subLinkGroup.id,
-                                                    makeCssClass: methods.makeCssClass,
-                                                    pageId: subLinkGroup.pageId,
-                                                    properties: subLinkGroup.properties,
-                                                    url: subLinkGroup.url
-                                                })
-                                            }, `${subLinkGroup.pageId || subLinkGroup.id}_${k}`));
-                                        })
-                                    }, `${subLink.pageId || subLink.id}_${j}`));
-                                case 'MenuLink':
-                                default:
-                                    return(/*#__PURE__*/ _jsx(Menu.Item, {
-                                        danger: get(subLink, 'properties.danger'),
-                                        icon: subLink.properties && subLink.properties.icon && /*#__PURE__*/ _jsx(Icon, {
-                                            blockId: `${subLink.id}_icon`,
-                                            events: events,
-                                            properties: subLink.properties.icon
-                                        }),
-                                        children: /*#__PURE__*/ _jsx(MenuTitle, {
-                                            basePath: basePath,
-                                            Link: Link,
-                                            linkStyle: methods.makeCssClass(subLink.style, true),
-                                            id: subLink.id,
-                                            makeCssClass: methods.makeCssClass,
-                                            pageId: subLink.pageId,
-                                            properties: subLink.properties,
-                                            url: subLink.url
-                                        })
-                                    }, `${subLink.pageId || subLink.id}_${j}`));
-                            }
-                        })
-                    }, `${link.pageId || link.id}_${i}`));
-                case 'MenuLink':
-                default:
-                    return(/*#__PURE__*/ _jsx(Menu.Item, {
-                        danger: get(link, 'properties.danger'),
-                        icon: link.properties && link.properties.icon && /*#__PURE__*/ _jsx(Icon, {
-                            blockId: `${link.id}_icon`,
-                            events: events,
-                            properties: link.properties.icon
-                        }),
-                        children: /*#__PURE__*/ _jsx(MenuTitle, {
-                            basePath: basePath,
-                            Link: Link,
-                            linkStyle: methods.makeCssClass(link.style, true),
-                            id: link.id,
-                            makeCssClass: methods.makeCssClass,
-                            pageId: link.pageId,
-                            properties: link.properties,
-                            url: link.url
-                        })
-                    }, `${link.pageId || link.id}_${i}`));
-            }
-        })
-    }));
+                                    }));
+                                }
+                                return(/*#__PURE__*/ React.createElement(Menu.Item, {
+                                    key: `${subLinkGroup.pageId || subLinkGroup.id}_${k}`,
+                                    danger: get(subLinkGroup, 'properties.danger'),
+                                    icon: subLinkGroup.properties && subLinkGroup.properties.icon && /*#__PURE__*/ React.createElement(Icon, {
+                                        blockId: `${subLinkGroup.id}_icon`,
+                                        events: events,
+                                        properties: subLinkGroup.properties.icon
+                                    })
+                                }, /*#__PURE__*/ React.createElement(Link, _extends({
+                                    id: subLinkGroup.pageId || subLinkGroup.id || k,
+                                    className: methods.makeCssClass(subLinkGroup.style, true)
+                                }, subLinkGroup), getTitle(subLinkGroup))));
+                            })));
+                        case 'MenuLink':
+                        default:
+                            return(/*#__PURE__*/ React.createElement(Menu.Item, {
+                                key: `${subLink.pageId || subLink.id}_${j}`,
+                                danger: get(subLink, 'properties.danger'),
+                                icon: subLink.properties && subLink.properties.icon && /*#__PURE__*/ React.createElement(Icon, {
+                                    blockId: `${subLink.id}_icon`,
+                                    events: events,
+                                    properties: subLink.properties.icon
+                                })
+                            }, /*#__PURE__*/ React.createElement(Link, _extends({
+                                id: subLink.pageId || subLink.id || j,
+                                className: methods.makeCssClass(subLink.style, true)
+                            }, subLink), getTitle(subLink))));
+                    }
+                })));
+            case 'MenuLink':
+            default:
+                return(/*#__PURE__*/ React.createElement(Menu.Item, {
+                    key: `${link.pageId || link.id}_${i}`,
+                    danger: get(link, 'properties.danger'),
+                    icon: link.properties && link.properties.icon && /*#__PURE__*/ React.createElement(Icon, {
+                        blockId: `${link.id}_icon`,
+                        events: events,
+                        properties: link.properties.icon
+                    })
+                }, /*#__PURE__*/ React.createElement(Link, _extends({
+                    id: link.pageId || link.id || i,
+                    className: methods.makeCssClass(link.style, true)
+                }, link), getTitle(link))));
+        }
+    })));
 };
 MenuComp.defaultProps = blockDefaultProps;
+MenuComp.meta = {
+    category: 'display',
+    icons: [],
+    styles: [
+        'blocks/Menu/style.less'
+    ]
+};
 export default MenuComp;

package/dist/blocks/Menu/schema.json

@@ -4,13 +4,6 @@
     "type": "object",
     "additionalProperties": false,
     "properties": {
-      "backgroundColor": {
-        "type": "string",
-        "description": "Menu background color.",
-        "docs": {
-          "displayType": "color"
-        }
-      },
       "expandIcon": {
         "type": ["string", "object"],
         "description": "Menu expand icon.",
@@ -18,13 +11,6 @@
           "displayType": "icon"
         }
       },
-      "selectedColor": {
-        "type": "string",
-        "description": "Menu primary selected color.",
-        "docs": {
-          "displayType": "color"
-        }
-      },
       "menuId": {
         "type": "string",
         "description": "App menu id used to get menu links."
@@ -107,7 +93,7 @@
                 },
                 "icon": {
                   "type": ["string", "object"],
-                  "description": "Name of an Ant Design Icon or properties of an Icon block to customize icon on menu item.",
+                  "description": "Name of an React-Icon (See <a href='https://react-icons.github.io/react-icons/'>all icons</a>) or properties of an Icon block to customize icon on menu item.",
                   "docs": {
                     "displayType": "icon"
                   }

package/dist/blocks/Menu/style.less

@@ -1,5 +1,5 @@
 /*
-  Copyright 2020-2021 Lowdefy, Inc
+  Copyright 2020-2022 Lowdefy, Inc
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.

package/dist/blocks/Message/Message.js

@@ -1,6 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 /*
-  Copyright 2020-2021 Lowdefy, Inc
+  Copyright 2020-2022 Lowdefy, Inc
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
@@ -19,8 +18,7 @@ import { type } from '@lowdefy/helpers';
 import { blockDefaultProps, renderHtml } from '@lowdefy/block-utils';
 const MessageBlock = ({ blockId , components: { Icon  } , events , methods , properties  })=>{
     useEffect(()=>{
-        methods.registerMethod('open', (args = {
-        })=>{
+        methods.registerMethod('open', (args = {})=>{
             return message[args.status || properties.status || 'success']({
                 id: `${blockId}_message`,
                 content: renderHtml({
@@ -32,7 +30,7 @@ const MessageBlock = ({ blockId , components: { Icon  } , events , methods , pro
                         name: 'onClose'
                     })
                 ,
-                icon: (args.icon || properties.icon) && /*#__PURE__*/ _jsx(Icon, {
+                icon: (args.icon || properties.icon) && /*#__PURE__*/ React.createElement(Icon, {
                     blockId: `${blockId}_icon`,
                     events: events,
                     properties: args.icon || properties.icon
@@ -41,9 +39,16 @@ const MessageBlock = ({ blockId , components: { Icon  } , events , methods , pro
             });
         });
     });
-    return(/*#__PURE__*/ _jsx("div", {
+    return(/*#__PURE__*/ React.createElement("div", {
         id: blockId
     }));
 };
 MessageBlock.defaultProps = blockDefaultProps;
+MessageBlock.meta = {
+    category: 'display',
+    icons: [],
+    styles: [
+        'blocks/Message/style.less'
+    ]
+};
 export default MessageBlock;

package/dist/blocks/Message/schema.json

@@ -15,7 +15,7 @@
       },
       "icon": {
         "type": ["string", "object"],
-        "description": "Name of an Ant Design Icon or properties of an Icon block to customize message icon.",
+        "description": "Name of an React-Icon (See <a href='https://react-icons.github.io/react-icons/'>all icons</a>) or properties of an Icon block to customize message icon.",
         "docs": {
           "displayType": "icon"
         }

package/dist/blocks/Message/style.less

@@ -1,5 +1,5 @@
 /*
-  Copyright 2020-2021 Lowdefy, Inc
+  Copyright 2020-2022 Lowdefy, Inc
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.