@lowdefy/blocks-antd 4.0.0-alpha.29 → 4.0.0-alpha.30

package/dist/blocks/PageSHCF/schema.json

@@ -0,0 +1,148 @@
+{
+  "type": "object",
+  "properties": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "header": {
+        "type": "object",
+        "description": "Header properties.",
+        "additionalProperties": false,
+        "properties": {
+          "theme": {
+            "type": "string",
+            "enum": ["light", "dark"],
+            "default": "dark",
+            "description": "Header theme color."
+          },
+          "style": {
+            "type": "object",
+            "description": "Header css style object.",
+            "docs": {
+              "displayType": "yaml"
+            }
+          }
+        }
+      },
+      "main": {
+        "type": "object",
+        "description": "Main layout properties.",
+        "additionalProperties": false,
+        "properties": {
+          "style": {
+            "type": "object",
+            "description": "Main css style object.",
+            "docs": {
+              "displayType": "yaml"
+            }
+          }
+        }
+      },
+      "content": {
+        "type": "object",
+        "description": "Content properties.",
+        "additionalProperties": false,
+        "properties": {
+          "style": {
+            "type": "object",
+            "description": "Content css style object.",
+            "docs": {
+              "displayType": "yaml"
+            }
+          }
+        }
+      },
+      "sider": {
+        "type": "object",
+        "description": "Sider properties.",
+        "additionalProperties": false,
+        "properties": {
+          "breakpoint": {
+            "type": "string",
+            "enum": ["xs", "sm", "md", "lg", "xl", "xxl"],
+            "default": "sm",
+            "description": "Breakpoint of the responsive layout"
+          },
+          "collapsedWidth": {
+            "type": "integer",
+            "description": "Width of the collapsed sidebar, by setting to 0 a special trigger will appear"
+          },
+          "collapsible": {
+            "type": "boolean",
+            "default": true,
+            "description": "Whether can be collapsed"
+          },
+          "initialCollapsed": {
+            "type": "boolean",
+            "default": true,
+            "description": "Set the initial collapsed state"
+          },
+          "reverseArrow": {
+            "type": "boolean",
+            "default": false,
+            "description": "Direction of arrow, for a sider that expands from the right"
+          },
+          "theme": {
+            "type": "string",
+            "enum": ["light", "dark"],
+            "default": "light",
+            "description": "Color theme of the sidebar"
+          },
+          "style": {
+            "type": "object",
+            "description": "Css style object to apply to sider.",
+            "docs": {
+              "displayType": "yaml"
+            }
+          },
+          "width": {
+            "type": ["string", "number"],
+            "description": "width of the sidebar",
+            "docs": {
+              "displayType": "string"
+            }
+          }
+        }
+      },
+      "footer": {
+        "type": "object",
+        "description": "Footer properties.",
+        "additionalProperties": false,
+        "properties": {
+          "style": {
+            "type": "object",
+            "description": "Footer css style object.",
+            "docs": {
+              "displayType": "yaml"
+            }
+          }
+        }
+      },
+      "style": {
+        "type": "object",
+        "description": "Css style object to apply to layout.",
+        "docs": {
+          "displayType": "yaml"
+        }
+      }
+    }
+  },
+  "events": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "onBreakpoint": {
+        "type": "array",
+        "description": "Trigger actions when sider breakpoint id crossed."
+      },
+      "onSiderClose": {
+        "type": "array",
+        "description": "Trigger actions when sider is closed."
+      },
+      "onSiderOpen": {
+        "type": "array",
+        "description": "Trigger actions when sider is opened."
+      }
+    }
+  }
+}

package/dist/blocks/PageSHCF/style.less

@@ -0,0 +1,21 @@
+/*
+  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.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+@import '../Header/style.less';
+@import '../Footer/style.less';
+@import '../Content/style.less';
+@import '../Layout/style.less';
+@import '../Sider/style.less';

package/dist/blocks/PageSiderMenu/PageSiderMenu.js

@@ -0,0 +1,409 @@
+/*
+  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.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import React, { useState, useEffect } from 'react';
+import { get, mergeObjects, type } from '@lowdefy/helpers';
+import { blockDefaultProps } from '@lowdefy/block-utils';
+import Affix from '../Affix/Affix.js';
+import Breadcrumb from '../Breadcrumb/Breadcrumb.js';
+import Button from '../Button/Button.js';
+import Content from '../Content/Content.js';
+import Footer from '../Footer/Footer.js';
+import Header from '../Header/Header.js';
+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);
+    useEffect(()=>{
+        methods.registerMethod('toggleSiderOpen', ()=>{
+            methods._toggleSiderOpen({
+                open: !openSiderState
+            });
+            setSiderOpen(!openSiderState);
+        });
+        methods.registerMethod('setSiderOpen', ({ open  })=>{
+            methods._toggleSiderOpen({
+                open
+            });
+            setSiderOpen(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
+        },
+        events: events,
+        properties: {
+            style: mergeObjects([
+                styles.layout,
+                properties.style
+            ])
+        },
+        content: {
+            // 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([
+                                {
+                                    width: 'auto'
+                                },
+                                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("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`
+                            }), /*#__PURE__*/ React.createElement("img", {
+                                src: (properties.logo?.srcMobile ?? properties.logo?.src) ?? `${basePath}/logo-square-${properties.header?.theme ?? 'dark'}-theme.png`,
+                                alt: properties.logo?.alt ?? 'Lowdefy',
+                                className: methods.makeCssClass([
+                                    styles.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'
+                                    }
+                                },
+                                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'
+                                                },
+                                                {
+                                                    style: styles.desktop
+                                                },
+                                                properties.menu,
+                                                properties.menuLg, 
+                                            ]),
+                                            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
+                                                        },
+                                                        events: events,
+                                                        properties: {
+                                                            hideTitle: true,
+                                                            type: 'link',
+                                                            block: true,
+                                                            icon: {
+                                                                name: openSiderState ? 'AiOutlineMenuFold' : 'AiOutlineMenuUnfold'
+                                                            },
+                                                            ...properties.toggleSiderButton ?? {}
+                                                        },
+                                                        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: styles.breadcrumb
+                                                },
+                                                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;