@lowdefy/blocks-antd 4.7.3 → 5.1.0

package/dist/blocks/PageSiderMenu/PageSiderMenu.js

@@ -14,7 +14,7 @@
   limitations under the License.
 */ import React, { useState, useEffect } from 'react';
 import { get, mergeObjects, type } from '@lowdefy/helpers';
-import { blockDefaultProps } from '@lowdefy/block-utils';
+import { withBlockDefaults } from '@lowdefy/block-utils';
 import Affix from '../Affix/Affix.js';
 import Breadcrumb from '../Breadcrumb/Breadcrumb.js';
 import Button from '../Button/Button.js';
@@ -25,164 +25,128 @@ 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, menus, methods, pageId, properties })=>{
-    const [openSiderState, setSiderOpen] = useState(!properties.sider?.initialCollapsed);
+import { getDarkMode, renderHeaderActions, registerDarkModeMethod } from '../headerActions.js';
+function getInitialSiderState({ properties }) {
+    const storageKey = `lf-${properties.siderStorageKey ?? 'sider'}-open`;
+    try {
+        const stored = localStorage.getItem(storageKey);
+        if (stored === 'true') return true;
+        if (stored === 'false') return false;
+    } catch  {
+    // localStorage unavailable (SSR, privacy mode)
+    }
+    return !properties.sider?.initialCollapsed;
+}
+function writeSiderState({ properties, open }) {
+    const storageKey = `lf-${properties.siderStorageKey ?? 'sider'}-open`;
+    try {
+        localStorage.setItem(storageKey, String(open));
+    } catch  {
+    // localStorage unavailable
+    }
+}
+const PageSiderMenu = ({ basePath, blockId, classNames = {}, components: { Icon, Link, ShortcutBadge }, events, content, menus, methods, pageId, properties, styles = {} })=>{
+    const [openSiderState, setSiderOpen] = useState(()=>getInitialSiderState({
+            properties
+        }));
     useEffect(()=>{
+        registerDarkModeMethod(methods);
         methods.registerMethod('toggleSiderOpen', ()=>{
-            methods._toggleSiderOpen({
-                open: !openSiderState
+            const next = !openSiderState;
+            methods._setSiderOpen({
+                open: next
+            });
+            setSiderOpen(next);
+            writeSiderState({
+                properties,
+                open: next
             });
-            setSiderOpen(!openSiderState);
         });
         methods.registerMethod('setSiderOpen', ({ open })=>{
-            methods._toggleSiderOpen({
+            methods._setSiderOpen({
                 open
             });
             setSiderOpen(open);
+            writeSiderState({
+                properties,
+                open
+            });
         });
     });
-    const styles = {
-        layout: {
-            minHeight: '100vh'
-        },
-        header: {
-            display: 'flex',
-            alignItems: 'center',
-            padding: '0 46px',
-            xs: {
-                padding: '0 10px'
-            },
-            sm: {
-                padding: '0 15px'
-            },
-            md: {
-                padding: '0 30px'
-            },
-            lg: {
-                padding: '0 46px'
-            },
-            flexDirection: 'row-reverse'
-        },
-        headerContent: {
-            alignItems: 'center',
-            flex: '1 1 auto',
-            display: 'flex',
-            justifyContent: 'flex-end'
-        },
-        logo: {
-            margin: '0 30px 0 0',
-            flex: '0 1 auto',
-            width: 130,
-            xs: {
-                margin: '0 5px',
-                width: 40
-            },
-            sm: {
-                margin: '0 10px',
-                width: 130
-            },
-            md: {
-                margin: '0 15px'
-            }
-        },
-        desktop: {
-            display: 'none',
-            lg: {
-                display: 'block'
-            }
-        },
-        mobile: {
-            display: 'block',
-            lg: {
-                display: 'none'
-            }
-        },
-        mdMenu: {
-            paddingLeft: '1rem'
-        },
-        body: {
-            padding: '0 40px 40px 40px',
-            xs: {
-                padding: '0 5px 5px 5px'
-            },
-            sm: {
-                padding: '0 10px 10px 10px'
-            },
-            md: {
-                padding: '0 20px 20px 20px'
-            },
-            lg: {
-                padding: '0 40px 40px 40px'
-            }
-        },
-        sider: {
-            display: 'flex',
-            height: '100%',
-            flexDirection: 'column'
-        },
-        content: {},
-        breadcrumb: {
-            margin: '16px 0'
-        },
-        noBreadcrumb: {
-            padding: '20px 0',
-            xs: {
-                padding: '5px 0'
-            },
-            sm: {
-                padding: '5px 0'
-            },
-            md: {
-                padding: '10px 0'
-            }
-        }
-    };
     return /*#__PURE__*/ React.createElement(Layout, {
         blockId: blockId,
         components: {
             Icon,
-            Link
+            Link,
+            ShortcutBadge
         },
         events: events,
-        properties: {
-            style: mergeObjects([
-                styles.layout,
-                properties.style
+        styles: {
+            element: mergeObjects([
+                {
+                    minHeight: '100vh'
+                },
+                styles.element
             ])
         },
         content: {
-            // TODO: use next/image
             content: ()=>/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Header, {
                     blockId: `${blockId}_header`,
                     components: {
                         Icon,
-                        Link
+                        Link,
+                        ShortcutBadge
+                    },
+                    classNames: {
+                        element: classNames.header
                     },
                     events: events,
-                    properties: mergeObjects([
-                        {
-                            style: styles.header
-                        },
-                        properties.header
-                    ]),
+                    properties: {},
+                    styles: {
+                        element: mergeObjects([
+                            {
+                                background: 'var(--ant-color-bg-container)',
+                                flexDirection: 'row-reverse',
+                                borderBottom: '1px solid var(--ant-color-border)'
+                            },
+                            styles.header
+                        ])
+                    },
                     content: {
                         content: ()=>/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
-                                className: methods.makeCssClass(styles.headerContent)
+                                className: "flex flex-auto items-center justify-end"
                             }, content.header && content.header(mergeObjects([
                                 {
-                                    width: 'auto'
+                                    width: 'auto',
+                                    alignItems: 'center',
+                                    flexWrap: 'nowrap'
+                                },
+                                styles.headerContent
+                            ])), renderHeaderActions({
+                                blockId,
+                                classNames,
+                                styles,
+                                properties,
+                                methods,
+                                events,
+                                components: {
+                                    Icon,
+                                    Link,
+                                    ShortcutBadge
+                                },
+                                iconsColor: properties.iconsColor
+                            }), /*#__PURE__*/ React.createElement(MobileMenu, {
+                                classNames: {
+                                    element: classNames.mobileMenu ?? 'block lg:hidden pl-4'
+                                },
+                                styles: {
+                                    element: styles.mobileMenu
                                 },
-                                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
+                                    Link,
+                                    ShortcutBadge
                                 },
                                 basePath: basePath,
                                 events: events,
@@ -191,8 +155,7 @@ const PageSiderMenu = ({ basePath, blockId, components: { Icon, Link }, events,
                                 pageId: pageId,
                                 properties: mergeObjects([
                                     {
-                                        mode: 'inline',
-                                        theme: get(properties, 'sider.theme') ?? 'light'
+                                        mode: 'inline'
                                     },
                                     properties.menu,
                                     properties.menuMd
@@ -207,44 +170,61 @@ const PageSiderMenu = ({ basePath, blockId, components: { Icon, Link }, events,
                                         onOpen: 'onMobileMenuOpen'
                                     }
                                 }
-                            }))), /*#__PURE__*/ React.createElement(Link, {
+                            })), /*#__PURE__*/ React.createElement(Link, {
                                 home: true
                             }, /*#__PURE__*/ React.createElement("picture", null, /*#__PURE__*/ React.createElement("source", {
                                 media: `(min-width:${properties.logo?.breakpoint ?? 577}px)`,
-                                srcSet: properties.logo?.src ?? `${basePath}/logo-${properties.header?.theme ?? 'dark'}-theme.png`
+                                srcSet: properties.logo?.src ?? `${basePath}/logo-${getDarkMode() ? 'dark' : 'light'}-theme.png`
                             }), /*#__PURE__*/ React.createElement("img", {
-                                src: properties.logo?.srcMobile ?? properties.logo?.src ?? `${basePath}/logo-square-${properties.header?.theme ?? 'dark'}-theme.png`,
+                                src: properties.logo?.srcMobile ?? properties.logo?.src ?? `${basePath}/logo-square-${getDarkMode() ? 'dark' : 'light'}-theme.png`,
                                 alt: properties.logo?.alt ?? 'Lowdefy',
-                                className: methods.makeCssClass([
-                                    styles.logo,
-                                    properties.logo?.style
-                                ])
+                                className: classNames.logo ?? 'mr-[30px] shrink w-10 sm:w-[130px] mx-1.5 sm:mx-2.5 md:mx-4',
+                                style: styles.logo
                             }))))
                     }
                 }), /*#__PURE__*/ React.createElement(Layout, {
                     blockId: `${blockId}_layout`,
                     components: {
                         Icon,
-                        Link
+                        Link,
+                        ShortcutBadge
                     },
                     events: events,
-                    properties: properties.layout,
+                    properties: {
+                        hasSider: true,
+                        ...properties.layout
+                    },
+                    styles: {
+                        element: styles.layout
+                    },
+                    classNames: {
+                        element: classNames.layout
+                    },
                     content: {
                         content: ()=>/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Sider, {
                                 blockId: `${blockId}_sider`,
                                 components: {
                                     Icon,
-                                    Link
+                                    Link,
+                                    ShortcutBadge
                                 },
                                 events: events,
                                 methods: methods,
-                                properties: mergeObjects([
-                                    {
-                                        theme: get(properties, 'sider.theme') ?? 'light',
-                                        style: styles.desktop
-                                    },
-                                    properties.sider
-                                ]),
+                                properties: {
+                                    ...properties.sider ?? {},
+                                    initialCollapsed: !openSiderState
+                                },
+                                classNames: {
+                                    element: classNames.sider ?? 'hidden lg:block'
+                                },
+                                styles: {
+                                    element: mergeObjects([
+                                        {
+                                            borderInlineEnd: '1px solid var(--ant-color-border)'
+                                        },
+                                        styles.sider
+                                    ])
+                                },
                                 rename: {
                                     methods: {
                                         toggleOpen: '_toggleSiderOpen',
@@ -253,37 +233,40 @@ const PageSiderMenu = ({ basePath, blockId, components: { Icon, Link }, events,
                                 },
                                 content: {
                                     content: ()=>/*#__PURE__*/ React.createElement("div", {
-                                            style: styles.sider
+                                            style: {
+                                                display: 'flex',
+                                                height: '100%',
+                                                flexDirection: 'column'
+                                            }
                                         }, /*#__PURE__*/ React.createElement(Menu, {
                                             blockId: `${blockId}_menu`,
                                             components: {
                                                 Icon,
-                                                Link
+                                                Link,
+                                                ShortcutBadge
                                             },
                                             basePath: basePath,
+                                            classNames: {
+                                                element: classNames.menu ?? 'hidden lg:block'
+                                            },
                                             events: events,
                                             methods: methods,
                                             menus: menus,
                                             pageId: pageId,
                                             properties: mergeObjects([
                                                 {
-                                                    mode: 'inline',
-                                                    theme: get(properties, 'sider.theme') ?? 'light'
-                                                },
-                                                {
-                                                    style: styles.desktop
+                                                    mode: 'inline'
                                                 },
                                                 properties.menu,
                                                 properties.menuLg
                                             ]),
+                                            styles: {
+                                                element: styles.menu
+                                            },
                                             rename: {
-                                                methods: {
-                                                    toggleOpen: 'toggleMobileMenuOpen',
-                                                    setOpen: 'setMobileMenuOpen'
-                                                },
                                                 events: {
                                                     onClick: 'onMenuItemClick',
-                                                    onSelect: 'onMenuItemCSelect',
+                                                    onSelect: 'onMenuItemSelect',
                                                     onToggleMenuGroup: 'onToggleMenuGroup'
                                                 }
                                             }
@@ -291,11 +274,12 @@ const PageSiderMenu = ({ basePath, blockId, components: { Icon, Link }, events,
                                             style: {
                                                 flex: '1 0 auto'
                                             }
-                                        }, content.sider && content.sider()), !get(properties, 'sider.hideToggleButton') ?? /*#__PURE__*/ React.createElement(Affix, {
+                                        }, content.sider && content.sider()), !get(properties, 'sider.hideToggleButton') && /*#__PURE__*/ React.createElement(Affix, {
                                             blockId: `${blockId}_toggle_sider_affix`,
                                             components: {
                                                 Icon,
-                                                Link
+                                                Link,
+                                                ShortcutBadge
                                             },
                                             events: events,
                                             properties: {
@@ -308,20 +292,18 @@ const PageSiderMenu = ({ basePath, blockId, components: { Icon, Link }, events,
                                                 }
                                             },
                                             content: {
-                                                content: ()=>/*#__PURE__*/ React.createElement("div", {
-                                                        style: {
-                                                            background: get(properties, 'sider.theme') === 'dark' ? '#30393e' : 'white'
-                                                        }
-                                                    }, /*#__PURE__*/ React.createElement(Button, {
+                                                content: ()=>/*#__PURE__*/ React.createElement(Button, {
                                                         blockId: `${blockId}_toggle_sider`,
                                                         components: {
                                                             Icon,
-                                                            Link
+                                                            Link,
+                                                            ShortcutBadge
                                                         },
                                                         events: events,
                                                         properties: {
                                                             hideTitle: true,
-                                                            type: 'link',
+                                                            color: 'default',
+                                                            variant: 'filled',
                                                             block: true,
                                                             icon: {
                                                                 name: openSiderState ? 'AiOutlineMenuFold' : 'AiOutlineMenuUnfold'
@@ -335,7 +317,7 @@ const PageSiderMenu = ({ basePath, blockId, components: { Icon, Link }, events,
                                                                 onClick: 'onToggleSider'
                                                             }
                                                         }
-                                                    }))
+                                                    })
                                             }
                                         }))
                                 }
@@ -343,46 +325,68 @@ const PageSiderMenu = ({ basePath, blockId, components: { Icon, Link }, events,
                                 blockId: `${blockId}_content`,
                                 components: {
                                     Icon,
-                                    Link
+                                    Link,
+                                    ShortcutBadge
+                                },
+                                classNames: {
+                                    element: classNames.content
                                 },
                                 events: events,
-                                properties: mergeObjects([
-                                    {
-                                        style: styles.body
-                                    },
-                                    properties.content
-                                ]),
+                                properties: properties.content ?? {},
+                                styles: {
+                                    element: mergeObjects([
+                                        {
+                                            padding: '0 40px 40px 40px',
+                                            minWidth: 0
+                                        },
+                                        styles.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
+                                                Link,
+                                                ShortcutBadge
+                                            },
+                                            classNames: {
+                                                element: classNames.breadcrumb
                                             },
                                             events: events,
                                             methods: methods,
-                                            properties: mergeObjects([
-                                                {
-                                                    style: styles.breadcrumb
-                                                },
-                                                properties.breadcrumb
-                                            ]),
+                                            properties: properties.breadcrumb,
+                                            styles: {
+                                                element: mergeObjects([
+                                                    {
+                                                        margin: '16px 0'
+                                                    },
+                                                    styles.breadcrumb
+                                                ])
+                                            },
                                             rename: {
                                                 events: {
                                                     onClick: 'onBreadcrumbClick'
                                                 }
                                             }
                                         }) : /*#__PURE__*/ React.createElement("div", {
-                                            className: methods.makeCssClass(styles.noBreadcrumb)
+                                            className: "py-1.5 sm:py-1.5 md:py-2.5 lg:py-5"
                                         }), content.content && content.content(), content.footer && /*#__PURE__*/ React.createElement(Footer, {
                                             blockId: `${blockId}_footer`,
                                             components: {
                                                 Icon,
-                                                Link
+                                                Link,
+                                                ShortcutBadge
+                                            },
+                                            classNames: {
+                                                element: classNames.footer
                                             },
                                             events: events,
                                             properties: properties.footer,
+                                            styles: {
+                                                element: styles.footer
+                                            },
                                             content: {
                                                 content: ()=>content.footer()
                                             }
@@ -394,16 +398,4 @@ const PageSiderMenu = ({ basePath, blockId, components: { Icon, Link }, events,
         }
     });
 };
-PageSiderMenu.defaultProps = blockDefaultProps;
-PageSiderMenu.meta = {
-    category: 'container',
-    icons: [
-        'AiOutlineMenuFold',
-        'AiOutlineMenuUnfold',
-        ...MobileMenu.meta.icons
-    ],
-    styles: [
-        'blocks/PageSiderMenu/style.less'
-    ]
-};
-export default PageSiderMenu;
+export default withBlockDefaults(PageSiderMenu);