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

package/dist/blocks/Label/labelLogic.js

@@ -0,0 +1,106 @@
+/*
+  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 { type } from '@lowdefy/helpers';
+import classNames from 'classnames';
+import getWrapperCol from './getWrapperCol.js';
+import getLabelCol from './getLabelCol.js';
+const labelLogic = ({ blockId , content , methods , properties ={} , required =false , validation ={
+    messages: [],
+    status: null
+} ,  })=>{
+    const wrapperCol = getWrapperCol(properties, properties.inline);
+    const labelCol = getLabelCol(properties, properties.inline);
+    // render label priority order: content.label area -> properties.title -> blockId and do not render an empty label
+    let label = content.label ? content.label() : !type.isString(properties.title) ? blockId : properties.title;
+    label = label === '' ? null : label;
+    // trim colon when colon is set, and the user inputs a colon, because antd class renders a colon
+    if (type.isString(label) && properties.colon && label.trim() !== '') {
+        label = label.replace(/[:|：]\s*$/, '');
+    }
+    const rowClassName = classNames({
+        [`ant-form-item`]: true,
+        [`ant-form-item-with-help`]: false,
+        [methods.makeCssClass({
+            flexWrap: properties.inline && 'inherit',
+            marginBottom: 0
+        })]: true
+    });
+    const labelColClassName = classNames({
+        [`ant-form-item-label`]: true,
+        [`ant-form-item-label-left`]: properties.align === 'left' || !properties.align,
+        [methods.makeCssClass({
+            overflow: properties.inline && 'inherit',
+            whiteSpace: !properties.inline && 'normal',
+            marginBottom: properties.size === 'small' ? 0 : 8
+        })]: true
+    });
+    const labelClassName = classNames({
+        [`ant-form-item-required`]: required,
+        [`ant-form-item-no-colon`]: properties.colon === false,
+        [methods.makeCssClass([
+            {
+                height: 'fit-content !important',
+                minHeight: properties.inline && (properties.size === 'large' ? 40 : properties.size === 'small' ? 24 : 32)
+            },
+            properties.style, 
+        ])]: true
+    });
+    const extraClassName = classNames({
+        'ant-form-item-explain': true,
+        'ant-form-item-extra': true,
+        [methods.makeCssClass([
+            {
+                marginTop: properties.size === 'small' ? -4 : 0
+            },
+            properties.extraStyle, 
+        ])]: true
+    });
+    const feedbackClassName = classNames({
+        [`ant-form-item-explain-success`]: validation.status === 'success',
+        [`ant-form-item-explain-warning`]: validation.status === 'warning',
+        [`ant-form-item-explain-error`]: validation.status === 'error',
+        [`ant-form-item-explain-validating`]: validation.status === 'validating',
+        [methods.makeCssClass([
+            {
+                marginTop: properties.size === 'small' ? -4 : 0
+            },
+            properties.feedbackStyle, 
+        ])]: true
+    });
+    const iconClassName = classNames({
+        'ant-form-item-feedback-icon': true,
+        [`ant-form-item-feedback-icon-success`]: validation.status === 'success',
+        [`ant-form-item-feedback-icon-warning`]: validation.status === 'warning',
+        [`ant-form-item-feedback-icon-error`]: validation.status === 'error',
+        [`ant-form-item-feedback-icon-validating`]: validation.status === 'validating',
+        'ldf-feedback-icon': true
+    });
+    const showExtra = !!properties.extra && (!validation.status || validation.status === 'success');
+    const showFeedback = validation.status === 'warning' || validation.status === 'error';
+    return {
+        extraClassName,
+        feedbackClassName,
+        iconClassName,
+        label: !properties.disabled && label,
+        labelClassName,
+        labelCol,
+        labelColClassName,
+        rowClassName,
+        showExtra,
+        showFeedback,
+        wrapperCol
+    };
+};
+export default labelLogic;

package/dist/blocks/Label/schema.json

@@ -0,0 +1,62 @@
+{
+  "type": "object",
+  "properties": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "align": {
+        "type": "string",
+        "enum": ["left", "right"],
+        "default": "left",
+        "description": "Align label left or right when inline."
+      },
+      "colon": {
+        "type": "boolean",
+        "default": true,
+        "description": "Append label with colon."
+      },
+      "disabled": {
+        "type": "boolean",
+        "default": false,
+        "description": "Disable to not render a label title."
+      },
+      "extra": {
+        "type": "string",
+        "description": "Extra text to display beneath the content - supports html."
+      },
+      "size": {
+        "type": "string",
+        "enum": ["small", "default", "large"],
+        "default": "default",
+        "description": "Size of the block."
+      },
+      "title": {
+        "type": "string",
+        "description": "Label title - supports html."
+      },
+      "extraStyle": {
+        "type": "object",
+        "description": "Css style to applied to label extra.",
+        "docs": {
+          "displayType": "yaml"
+        }
+      },
+      "feedbackStyle": {
+        "type": "object",
+        "description": "Css style to applied to label feedback.",
+        "docs": {
+          "displayType": "yaml"
+        }
+      },
+      "span": {
+        "type": "number",
+        "description": "Label inline span."
+      },
+      "inline": {
+        "type": "boolean",
+        "default": false,
+        "description": "Render input and label inline."
+      }
+    }
+  }
+}

package/dist/blocks/Label/style.less

@@ -0,0 +1,34 @@
+/*
+  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 'antd/lib/form/style/index.less';
+
+.ant-form-vertical .ant-form-item-label > label::after,
+.ant-form-item .ant-form-item-label > label::after,
+.ant-col-24.ant-form-item-label > label::after,
+.ant-col-xl-24.ant-form-item-label > label::after,
+.ant-col-lg-24.ant-form-item-label > label::after,
+.ant-col-md-24.ant-form-item-label > label::after,
+.ant-col-sm-24.ant-form-item-label > label::after {
+  display: block !important;
+}
+.ant-input-affix-wrapper {
+  height: 100% !important;
+}
+
+.ldf-feedback-icon {
+  margin-left: @margin-xss;
+}

package/dist/blocks/Layout/Layout.js

@@ -0,0 +1,30 @@
+/*
+  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 from 'react';
+import { blockDefaultProps } from '@lowdefy/block-utils';
+import { Layout } from 'antd';
+const LayoutBlock = ({ blockId , content , properties , methods  })=>/*#__PURE__*/ React.createElement(Layout, {
+        id: blockId,
+        className: methods.makeCssClass(properties.style)
+    }, content.content && content.content());
+LayoutBlock.defaultProps = blockDefaultProps;
+LayoutBlock.meta = {
+    category: 'container',
+    icons: [],
+    styles: [
+        'blocks/Layout/style.less'
+    ]
+};
+export default LayoutBlock;

package/dist/blocks/Layout/schema.json

@@ -0,0 +1,16 @@
+{
+  "type": "object",
+  "properties": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "style": {
+        "type": "object",
+        "description": "Css style object to applied to layout.",
+        "docs": {
+          "displayType": "yaml"
+        }
+      }
+    }
+  }
+}

package/dist/blocks/Layout/style.less

@@ -0,0 +1,17 @@
+/*
+  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 'antd/lib/layout/style/index.less';

package/dist/blocks/Menu/Menu.js

@@ -0,0 +1,209 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+/*
+  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 from 'react';
+import { blockDefaultProps } from '@lowdefy/block-utils';
+import { Menu } from 'antd';
+import { type, get } from '@lowdefy/helpers';
+const getDefaultMenu = (menus, menuId = 'default', links)=>{
+    if (type.isArray(links)) return links;
+    if (!type.isArray(menus)) return [];
+    const menu = (menus.find((item)=>item.menuId === menuId) ?? menus[0]) ?? {};
+    return menu.links ?? [];
+};
+const getTitle = ({ id , properties , pageId , url  })=>(((properties && properties.title) ?? pageId) ?? url) ?? id;
+const MenuComp = ({ blockId , components: { Icon , Link  } , events , menus , methods , pageId , properties , rename ,  })=>{
+    const styles = {
+        lineHeight: '64px',
+        width: '100%',
+        display: properties.mode === 'horizontal' && 'inline-block'
+    };
+    const exProps = {};
+    if (properties.mode === 'inline') {
+        exProps.collapsed = properties.collapsed;
+        exProps.inlineIndent = properties.inlineIndent;
+    }
+    const menu = getDefaultMenu(menus, properties.menuId, properties.links);
+    const theme = properties.theme ?? 'dark';
+    return /*#__PURE__*/ React.createElement(Menu, _extends({
+        id: blockId,
+        expandIcon: properties.expandIcon && /*#__PURE__*/ React.createElement(Icon, {
+            blockId: `${blockId}_expandIcon`,
+            events: events,
+            properties: properties.expandIcon
+        }),
+        forceSubMenuRender: properties.forceSubMenuRender,
+        mode: properties.mode,
+        selectable: true,
+        theme: theme,
+        className: methods.makeCssClass([
+            styles,
+            properties.style
+        ]),
+        defaultOpenKeys: (properties.defaultOpenKeys ?? (properties.mode === 'inline' && properties.collapsed !== true && [
+            (menu.find((link1)=>(link1.links || []).map((subLink)=>subLink.links ? subLink.links.map((subSubLink)=>subSubLink.pageId) : [
+                        subLink.pageId
+                    ]).flat().some((link)=>(properties.selectedKeys ?? [
+                        pageId
+                    ]).indexOf(link) !== -1)) ?? {}).id, 
+        ])) ?? [],
+        selectedKeys: properties.selectedKeys ?? [
+            pageId
+        ],
+        subMenuCloseDelay: properties.subMenuCloseDelay,
+        subMenuOpenDelay: properties.subMenuOpenDelay,
+        onSelect: (item)=>methods.triggerEvent({
+                name: get(rename, 'events.onSelect', {
+                    default: 'onSelect'
+                }),
+                event: {
+                    key: item.key
+                }
+            }),
+        onClick: (item)=>methods.triggerEvent({
+                name: get(rename, 'events.onClick', {
+                    default: 'onClick'
+                }),
+                event: {
+                    key: item.key
+                }
+            }),
+        onOpenChange: (openKeys)=>methods.triggerEvent({
+                name: get(rename, 'events.onToggleMenuGroup', {
+                    default: 'onToggleMenuGroup'
+                }),
+                event: {
+                    openKeys
+                }
+            })
+    }, exProps), menu.map((link, i)=>{
+        switch(link.type){
+            case 'MenuDivider':
+                return /*#__PURE__*/ React.createElement(Menu.Divider, {
+                    key: link.id,
+                    className: methods.makeCssClass([
+                        link.style
+                    ]),
+                    dashed: link.properties && link.properties.dashed
+                });
+            case 'MenuGroup':
+                return /*#__PURE__*/ React.createElement(Menu.SubMenu, {
+                    key: link.pageId ?? link.id,
+                    title: /*#__PURE__*/ React.createElement(Link, _extends({
+                        id: (link.pageId ?? link.id) ?? i,
+                        className: methods.makeCssClass(link.style, true)
+                    }, link), getTitle(link)),
+                    icon: link.properties && link.properties.icon && /*#__PURE__*/ React.createElement(Icon, {
+                        blockId: `${link.id}_icon`,
+                        events: events,
+                        properties: link.properties.icon
+                    })
+                }, get(link, 'links', {
+                    default: []
+                }).map((subLink, j)=>{
+                    switch(subLink.type){
+                        case 'MenuDivider':
+                            return /*#__PURE__*/ React.createElement(Menu.Divider, {
+                                key: subLink.id ?? j,
+                                className: methods.makeCssClass([
+                                    subLink.style
+                                ]),
+                                dashed: subLink.properties && subLink.properties.dashed
+                            });
+                        case 'MenuGroup':
+                            return /*#__PURE__*/ React.createElement(Menu.ItemGroup, {
+                                key: subLink.pageId ?? subLink.id,
+                                title: /*#__PURE__*/ React.createElement(Link, _extends({
+                                    id: (subLink.pageId ?? subLink.id) ?? j,
+                                    className: methods.makeCssClass(subLink.style, true)
+                                }, subLink), getTitle(subLink))
+                            }, subLink.links.map((subLinkGroup, k)=>{
+                                if (subLinkGroup.type === 'MenuDivider') {
+                                    return /*#__PURE__*/ React.createElement(Menu.Divider, {
+                                        key: `${subLink.id}_${k}`,
+                                        className: methods.makeCssClass([
+                                            subLink.style
+                                        ]),
+                                        dashed: subLink.properties && subLink.properties.dashed
+                                    });
+                                }
+                                return /*#__PURE__*/ React.createElement(Menu.Item, {
+                                    key: subLinkGroup.pageId ?? subLinkGroup.id,
+                                    danger: get(subLinkGroup, 'properties.danger'),
+                                    icon: subLinkGroup.properties && subLinkGroup.properties.icon && /*#__PURE__*/ React.createElement(Icon, {
+                                        blockId: `${subLinkGroup.id}_icon`,
+                                        events: events,
+                                        properties: subLinkGroup.properties.icon
+                                    })
+                                }, /*#__PURE__*/ React.createElement(Link, _extends({
+                                    id: (subLinkGroup.pageId ?? subLinkGroup.id) ?? k,
+                                    className: methods.makeCssClass(subLinkGroup.style, true)
+                                }, subLinkGroup), getTitle(subLinkGroup)));
+                            }));
+                        case 'MenuLink':
+                        default:
+                            return /*#__PURE__*/ React.createElement(Menu.Item, {
+                                key: subLink.pageId ?? subLink.id,
+                                danger: get(subLink, 'properties.danger'),
+                                icon: subLink.properties && subLink.properties.icon && /*#__PURE__*/ React.createElement(Icon, {
+                                    blockId: `${subLink.id}_icon`,
+                                    events: events,
+                                    properties: subLink.properties.icon
+                                })
+                            }, /*#__PURE__*/ React.createElement(Link, _extends({
+                                id: (subLink.pageId ?? subLink.id) ?? j,
+                                className: methods.makeCssClass(subLink.style, true)
+                            }, subLink), getTitle(subLink)));
+                    }
+                }));
+            case 'MenuLink':
+            default:
+                return /*#__PURE__*/ React.createElement(Menu.Item, {
+                    key: link.pageId ?? link.id,
+                    danger: get(link, 'properties.danger'),
+                    icon: link.properties && link.properties.icon && /*#__PURE__*/ React.createElement(Icon, {
+                        blockId: `${link.id}_icon`,
+                        events: events,
+                        properties: link.properties.icon
+                    })
+                }, /*#__PURE__*/ React.createElement(Link, _extends({
+                    id: (link.pageId ?? link.id) ?? i,
+                    className: methods.makeCssClass(link.style, true)
+                }, link), getTitle(link)));
+        }
+    }));
+};
+MenuComp.defaultProps = blockDefaultProps;
+MenuComp.meta = {
+    category: 'display',
+    icons: [],
+    styles: [
+        'blocks/Menu/style.less'
+    ]
+};
+export default MenuComp;