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

package/dist/blocks/PageSiderMenu/PageSiderMenu.js

@@ -1,6 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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.
@@ -26,7 +25,7 @@ import Layout from '../Layout/Layout.js';
 import Menu from '../Menu/Menu.js';
 import MobileMenu from '../MobileMenu/MobileMenu.js';
 import Sider from '../Sider/Sider.js';
-const PageSiderMenu = ({ basePath , blockId , components: { Icon , Link  } , events , content , homePageId , menus , methods , pageId , properties ,  })=>{
+const PageSiderMenu = ({ basePath , blockId , components: { Icon , Link  } , events , content , menus , methods , pageId , properties ,  })=>{
     const [openSiderState, setSiderOpen] = useState(!(properties.sider && properties.sider.initialCollapsed));
     useEffect(()=>{
         methods.registerMethod('toggleSiderOpen', ()=>{
@@ -109,8 +108,7 @@ const PageSiderMenu = ({ basePath , blockId , components: { Icon , Link  } , eve
             height: '100%',
             flexDirection: 'column'
         },
-        content: {
-        },
+        content: {},
         breadcrumb: {
             margin: '16px 0'
         },
@@ -124,7 +122,7 @@ const PageSiderMenu = ({ basePath , blockId , components: { Icon , Link  } , eve
             }
         }
     };
-    return(/*#__PURE__*/ _jsx(Layout, {
+    return(/*#__PURE__*/ React.createElement(Layout, {
         blockId: blockId,
         components: {
             Icon,
@@ -140,295 +138,270 @@ const PageSiderMenu = ({ basePath , blockId , components: { Icon , Link  } , eve
             ])
         },
         content: {
-            content: ()=>/*#__PURE__*/ _jsxs(_Fragment, {
-                    children: [
-                        /*#__PURE__*/ _jsx(Header, {
-                            blockId: `${blockId}_header`,
-                            components: {
-                                Icon,
-                                Link
-                            },
-                            events: events,
-                            properties: mergeObjects([
+            // TODO: use next/image
+            content: ()=>/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Header, {
+                    blockId: `${blockId}_header`,
+                    components: {
+                        Icon,
+                        Link
+                    },
+                    events: events,
+                    properties: mergeObjects([
+                        {
+                            style: styles.header
+                        },
+                        properties.header
+                    ]),
+                    content: {
+                        content: ()=>/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
+                                className: methods.makeCssClass(styles.headerContent)
+                            }, content.header && content.header(mergeObjects([
                                 {
-                                    style: styles.header
+                                    width: 'auto'
+                                },
+                                properties.header && properties.header.contentStyle, 
+                            ])), /*#__PURE__*/ React.createElement("div", {
+                                className: methods.makeCssClass([
+                                    styles.mobile,
+                                    styles.mdMenu
+                                ])
+                            }, /*#__PURE__*/ React.createElement(MobileMenu, {
+                                blockId: `${blockId}_mobile_menu`,
+                                components: {
+                                    Icon,
+                                    Link
+                                },
+                                basePath: basePath,
+                                events: events,
+                                methods: methods,
+                                menus: menus,
+                                pageId: pageId,
+                                properties: mergeObjects([
+                                    {
+                                        mode: 'inline',
+                                        theme: get(properties, 'sider.theme') || 'light'
+                                    },
+                                    properties.menu,
+                                    properties.menuMd, 
+                                ]),
+                                rename: {
+                                    methods: {
+                                        toggleOpen: 'toggleMobileMenuOpen',
+                                        setOpen: 'setMobileMenuOpen'
+                                    },
+                                    events: {
+                                        onClose: 'onMobileMenuClose',
+                                        onOpen: 'onMobileMenuOpen'
+                                    }
+                                }
+                            }))), /*#__PURE__*/ React.createElement(Link, {
+                                home: true
+                            }, /*#__PURE__*/ React.createElement("img", {
+                                src: properties.logo && properties.logo.src || (get(properties, 'header.theme') === 'light' ? `${basePath}/logo-light-theme.png` : `${basePath}/logo-dark-theme.png`),
+                                srcSet: properties.logo && (properties.logo.srcSet || properties.logo.src) || (get(properties, 'header.theme') === 'light' ? `${basePath}/logo-square-light-theme.png 40w, ${basePath}/logo-light-theme.png 577w` : `${basePath}/logo-square-dark-theme.png 40w, ${basePath}/logo-dark-theme.png 577w`),
+                                sizes: properties.logo && properties.logo.sizes || '(max-width: 576px) 40px, 577px',
+                                alt: properties.logo && properties.logo.alt || 'Lowdefy',
+                                className: methods.makeCssClass([
+                                    {
+                                        width: 130,
+                                        sm: {
+                                            width: properties.logo && properties.logo.src && !properties.logo.srcSet ? 130 : 40
+                                        },
+                                        md: {
+                                            width: 130
+                                        }
+                                    },
+                                    styles.logo,
+                                    properties.logo && properties.logo.style, 
+                                ])
+                            })))
+                    }
+                }), /*#__PURE__*/ React.createElement(Layout, {
+                    blockId: `${blockId}_layout`,
+                    components: {
+                        Icon,
+                        Link
+                    },
+                    events: events,
+                    properties: properties.layout,
+                    content: {
+                        content: ()=>/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Sider, {
+                                blockId: `${blockId}_sider`,
+                                components: {
+                                    Icon,
+                                    Link
+                                },
+                                events: events,
+                                methods: methods,
+                                properties: mergeObjects([
+                                    {
+                                        theme: get(properties, 'sider.theme') || 'light',
+                                        style: styles.desktop
+                                    },
+                                    properties.sider, 
+                                ]),
+                                rename: {
+                                    methods: {
+                                        toggleOpen: '_toggleSiderOpen',
+                                        setOpen: '_setSiderOpen'
+                                    }
                                 },
-                                properties.header
-                            ]),
-                            content: {
-                                content: ()=>/*#__PURE__*/ _jsxs(_Fragment, {
-                                        children: [
-                                            /*#__PURE__*/ _jsxs("div", {
-                                                className: methods.makeCssClass(styles.headerContent),
-                                                children: [
-                                                    content.header && content.header(mergeObjects([
-                                                        {
-                                                            width: 'auto'
+                                content: {
+                                    content: ()=>/*#__PURE__*/ React.createElement("div", {
+                                            style: styles.sider
+                                        }, /*#__PURE__*/ React.createElement(Menu, {
+                                            blockId: `${blockId}_menu`,
+                                            components: {
+                                                Icon,
+                                                Link
+                                            },
+                                            basePath: basePath,
+                                            events: events,
+                                            methods: methods,
+                                            menus: menus,
+                                            pageId: pageId,
+                                            properties: mergeObjects([
+                                                {
+                                                    mode: 'inline',
+                                                    theme: get(properties, 'sider.theme') || 'light'
+                                                },
+                                                properties.menu,
+                                                properties.menuLg,
+                                                {
+                                                    style: styles.desktop
+                                                }, 
+                                            ]),
+                                            rename: {
+                                                methods: {
+                                                    toggleOpen: 'toggleMobileMenuOpen',
+                                                    setOpen: 'setMobileMenuOpen'
+                                                },
+                                                events: {
+                                                    onClick: 'onMenuItemClick',
+                                                    onSelect: 'onMenuItemCSelect',
+                                                    onToggleMenuGroup: 'onToggleMenuGroup'
+                                                }
+                                            }
+                                        }), /*#__PURE__*/ React.createElement("div", {
+                                            style: {
+                                                flex: '1 0 auto'
+                                            }
+                                        }, content.sider && content.sider()), !get(properties, 'sider.hideToggleButton') && /*#__PURE__*/ React.createElement(Affix, {
+                                            blockId: `${blockId}_toggle_sider_affix`,
+                                            components: {
+                                                Icon,
+                                                Link
+                                            },
+                                            events: events,
+                                            properties: {
+                                                offsetBottom: 0
+                                            },
+                                            methods: methods,
+                                            rename: {
+                                                events: {
+                                                    onChange: 'onChangeToggleSiderAffix'
+                                                }
+                                            },
+                                            content: {
+                                                content: ()=>/*#__PURE__*/ React.createElement("div", {
+                                                        style: {
+                                                            background: get(properties, 'sider.theme') === 'dark' ? '#30393e' : 'white'
+                                                        }
+                                                    }, /*#__PURE__*/ React.createElement(Button, {
+                                                        blockId: `${blockId}_toggle_sider`,
+                                                        components: {
+                                                            Icon,
+                                                            Link
                                                         },
-                                                        properties.header && properties.header.contentStyle, 
-                                                    ])),
-                                                    /*#__PURE__*/ _jsx("div", {
-                                                        className: methods.makeCssClass([
-                                                            styles.mobile,
-                                                            styles.mdMenu
-                                                        ]),
-                                                        children: /*#__PURE__*/ _jsx(MobileMenu, {
-                                                            blockId: `${blockId}_mobile_menu`,
-                                                            components: {
-                                                                Icon,
-                                                                Link
+                                                        events: events,
+                                                        properties: {
+                                                            hideTitle: true,
+                                                            type: 'link',
+                                                            block: true,
+                                                            icon: {
+                                                                name: openSiderState ? 'AiOutlineMenuFold' : 'AiOutlineMenuUnfold'
                                                             },
-                                                            basePath: basePath,
-                                                            events: events,
-                                                            methods: methods,
-                                                            menus: menus,
-                                                            pageId: pageId,
-                                                            properties: mergeObjects([
-                                                                {
-                                                                    mode: 'inline',
-                                                                    theme: get(properties, 'sider.theme') || 'light',
-                                                                    backgroundColor: get(properties, 'sider.color')
-                                                                },
-                                                                properties.menu,
-                                                                properties.menuMd, 
-                                                            ]),
-                                                            rename: {
-                                                                methods: {
-                                                                    toggleOpen: 'toggleMobileMenuOpen',
-                                                                    setOpen: 'setMobileMenuOpen'
-                                                                },
-                                                                events: {
-                                                                    onClose: 'onMobileMenuClose',
-                                                                    onOpen: 'onMobileMenuOpen'
-                                                                }
-                                                            }
-                                                        })
-                                                    })
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ _jsx(Link, {
-                                                href: `${basePath}/${homePageId}`,
-                                                children: /*#__PURE__*/ _jsx("img", {
-                                                    src: properties.logo && properties.logo.src || (get(properties, 'header.theme') === 'light' ? `${basePath}/public/logo-light-theme.png` : `${basePath}/public/logo-dark-theme.png`),
-                                                    srcSet: properties.logo && (properties.logo.srcSet || properties.logo.src) || (get(properties, 'header.theme') === 'light' ? `${basePath}/public/logo-square-light-theme.png 40w, ${basePath}/public/logo-light-theme.png 577w` : `${basePath}/public/logo-square-dark-theme.png 40w, ${basePath}/public/logo-dark-theme.png 577w`),
-                                                    sizes: properties.logo && properties.logo.sizes || '(max-width: 576px) 40px, 577px',
-                                                    alt: properties.logo && properties.logo.alt || 'Lowdefy',
-                                                    className: methods.makeCssClass([
-                                                        {
-                                                            width: 130,
-                                                            sm: {
-                                                                width: properties.logo && properties.logo.src && !properties.logo.srcSet ? 130 : 40
-                                                            },
-                                                            md: {
-                                                                width: 130
-                                                            }
+                                                            ...properties.toggleSiderButton || {}
                                                         },
-                                                        styles.logo,
-                                                        properties.logo && properties.logo.style, 
-                                                    ])
-                                                })
-                                            })
-                                        ]
-                                    })
-                            }
-                        }),
-                        /*#__PURE__*/ _jsx(Layout, {
-                            blockId: `${blockId}_layout`,
-                            components: {
-                                Icon,
-                                Link
-                            },
-                            events: events,
-                            properties: properties.layout,
-                            content: {
-                                content: ()=>/*#__PURE__*/ _jsxs(_Fragment, {
-                                        children: [
-                                            /*#__PURE__*/ _jsx(Sider, {
-                                                blockId: `${blockId}_sider`,
-                                                components: {
-                                                    Icon,
-                                                    Link
-                                                },
-                                                events: events,
-                                                methods: methods,
-                                                properties: mergeObjects([
-                                                    {
-                                                        theme: get(properties, 'sider.theme') || 'light',
-                                                        style: styles.desktop
-                                                    },
-                                                    properties.sider, 
-                                                ]),
-                                                rename: {
-                                                    methods: {
-                                                        toggleOpen: '_toggleSiderOpen',
-                                                        setOpen: '_setSiderOpen'
+                                                        methods: methods,
+                                                        onClick: ()=>methods.toggleSiderOpen()
+                                                        ,
+                                                        rename: {
+                                                            events: {
+                                                                onClick: 'onToggleSider'
+                                                            }
+                                                        }
+                                                    }))
+                                            }
+                                        }))
+                                }
+                            }), /*#__PURE__*/ React.createElement(Content, {
+                                blockId: `${blockId}_content`,
+                                components: {
+                                    Icon,
+                                    Link
+                                },
+                                events: events,
+                                properties: mergeObjects([
+                                    {
+                                        style: styles.body
+                                    },
+                                    properties.content
+                                ]),
+                                content: {
+                                    content: ()=>/*#__PURE__*/ React.createElement(React.Fragment, null, !type.isNone(properties.breadcrumb) ? /*#__PURE__*/ React.createElement(Breadcrumb, {
+                                            blockId: `${blockId}_breadcrumb`,
+                                            basePath: basePath,
+                                            components: {
+                                                Icon,
+                                                Link
+                                            },
+                                            events: events,
+                                            methods: methods,
+                                            properties: mergeObjects([
+                                                {
+                                                    style: {
+                                                        padding: '16px 0'
                                                     }
                                                 },
-                                                content: {
-                                                    content: ()=>/*#__PURE__*/ _jsxs("div", {
-                                                            style: styles.sider,
-                                                            children: [
-                                                                /*#__PURE__*/ _jsx(Menu, {
-                                                                    blockId: `${blockId}_menu`,
-                                                                    components: {
-                                                                        Icon,
-                                                                        Link
-                                                                    },
-                                                                    basePath: basePath,
-                                                                    events: events,
-                                                                    methods: methods,
-                                                                    menus: menus,
-                                                                    pageId: pageId,
-                                                                    properties: mergeObjects([
-                                                                        {
-                                                                            mode: 'inline',
-                                                                            theme: get(properties, 'sider.theme') || 'light',
-                                                                            backgroundColor: get(properties, 'sider.color')
-                                                                        },
-                                                                        properties.menu,
-                                                                        properties.menuLg,
-                                                                        {
-                                                                            style: styles.desktop
-                                                                        }, 
-                                                                    ]),
-                                                                    rename: {
-                                                                        methods: {
-                                                                            toggleOpen: 'toggleMobileMenuOpen',
-                                                                            setOpen: 'setMobileMenuOpen'
-                                                                        },
-                                                                        events: {
-                                                                            onClick: 'onMenuItemClick',
-                                                                            onSelect: 'onMenuItemCSelect',
-                                                                            onToggleMenuGroup: 'onToggleMenuGroup'
-                                                                        }
-                                                                    }
-                                                                }),
-                                                                /*#__PURE__*/ _jsx("div", {
-                                                                    style: {
-                                                                        flex: '1 0 auto'
-                                                                    },
-                                                                    children: content.sider && content.sider()
-                                                                }),
-                                                                !get(properties, 'sider.hideToggleButton') && /*#__PURE__*/ _jsx(Affix, {
-                                                                    blockId: `${blockId}_toggle_sider_affix`,
-                                                                    components: {
-                                                                        Icon,
-                                                                        Link
-                                                                    },
-                                                                    events: events,
-                                                                    properties: {
-                                                                        offsetBottom: 0
-                                                                    },
-                                                                    methods: methods,
-                                                                    rename: {
-                                                                        events: {
-                                                                            onChange: 'onChangeToggleSiderAffix'
-                                                                        }
-                                                                    },
-                                                                    content: {
-                                                                        content: ()=>/*#__PURE__*/ _jsx("div", {
-                                                                                style: {
-                                                                                    background: get(properties, 'sider.color') || (get(properties, 'sider.theme') === 'dark' ? '#30393e' : 'white')
-                                                                                },
-                                                                                children: /*#__PURE__*/ _jsx(Button, {
-                                                                                    blockId: `${blockId}_toggle_sider`,
-                                                                                    components: {
-                                                                                        Icon,
-                                                                                        Link
-                                                                                    },
-                                                                                    events: events,
-                                                                                    properties: {
-                                                                                        hideTitle: true,
-                                                                                        type: 'link',
-                                                                                        block: true,
-                                                                                        icon: {
-                                                                                            name: openSiderState ? 'MenuFoldOutlined' : 'MenuUnfoldOutlined'
-                                                                                        },
-                                                                                        ...properties.toggleSiderButton || {
-                                                                                        }
-                                                                                    },
-                                                                                    methods: methods,
-                                                                                    onClick: ()=>methods.toggleSiderOpen()
-                                                                                    ,
-                                                                                    rename: {
-                                                                                        events: {
-                                                                                            onClick: 'onToggleSider'
-                                                                                        }
-                                                                                    }
-                                                                                })
-                                                                            })
-                                                                    }
-                                                                })
-                                                            ]
-                                                        })
-                                                }
-                                            }),
-                                            /*#__PURE__*/ _jsx(Content, {
-                                                blockId: `${blockId}_content`,
-                                                components: {
-                                                    Icon,
-                                                    Link
-                                                },
-                                                events: events,
-                                                properties: mergeObjects([
-                                                    {
-                                                        style: styles.body
-                                                    },
-                                                    properties.content
-                                                ]),
-                                                content: {
-                                                    content: ()=>/*#__PURE__*/ _jsxs(_Fragment, {
-                                                            children: [
-                                                                !type.isNone(properties.breadcrumb) ? /*#__PURE__*/ _jsx(Breadcrumb, {
-                                                                    blockId: `${blockId}_breadcrumb`,
-                                                                    basePath: basePath,
-                                                                    components: {
-                                                                        Icon,
-                                                                        Link
-                                                                    },
-                                                                    events: events,
-                                                                    methods: methods,
-                                                                    properties: mergeObjects([
-                                                                        {
-                                                                            style: {
-                                                                                padding: '16px 0'
-                                                                            }
-                                                                        },
-                                                                        properties.breadcrumb, 
-                                                                    ]),
-                                                                    rename: {
-                                                                        events: {
-                                                                            onClick: 'onBreadcrumbClick'
-                                                                        }
-                                                                    }
-                                                                }) : /*#__PURE__*/ _jsx("div", {
-                                                                    className: methods.makeCssClass(styles.noBreadcrumb)
-                                                                }),
-                                                                content.content && content.content(),
-                                                                content.footer && /*#__PURE__*/ _jsx(Footer, {
-                                                                    blockId: `${blockId}_footer`,
-                                                                    components: {
-                                                                        Icon,
-                                                                        Link
-                                                                    },
-                                                                    events: events,
-                                                                    properties: properties.footer,
-                                                                    content: {
-                                                                        content: ()=>content.footer()
-                                                                    }
-                                                                })
-                                                            ]
-                                                        })
+                                                properties.breadcrumb, 
+                                            ]),
+                                            rename: {
+                                                events: {
+                                                    onClick: 'onBreadcrumbClick'
                                                 }
-                                            })
-                                        ]
-                                    })
-                            }
-                        })
-                    ]
-                })
+                                            }
+                                        }) : /*#__PURE__*/ React.createElement("div", {
+                                            className: methods.makeCssClass(styles.noBreadcrumb)
+                                        }), content.content && content.content(), content.footer && /*#__PURE__*/ React.createElement(Footer, {
+                                            blockId: `${blockId}_footer`,
+                                            components: {
+                                                Icon,
+                                                Link
+                                            },
+                                            events: events,
+                                            properties: properties.footer,
+                                            content: {
+                                                content: ()=>content.footer()
+                                            }
+                                        }))
+                                }
+                            }))
+                    }
+                }))
         }
     }));
 };
 PageSiderMenu.defaultProps = blockDefaultProps;
+PageSiderMenu.meta = {
+    category: 'container',
+    icons: [
+        'AiOutlineMenuFold',
+        'AiOutlineMenuUnfold',
+        ...MobileMenu.meta.icons
+    ],
+    styles: [
+        'blocks/PageSiderMenu/style.less'
+    ]
+};
 export default PageSiderMenu;