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

package/dist/blocks/Drawer/Drawer.js

@@ -0,0 +1,104 @@
+/*
+  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 { Drawer } from 'antd';
+import { get } from '@lowdefy/helpers';
+import { blockDefaultProps } from '@lowdefy/block-utils';
+const triggerSetOpen = ({ state , setOpen , methods , rename  })=>{
+    if (!state) {
+        methods.triggerEvent({
+            name: get(rename, 'events.onClose', {
+                default: 'onClose'
+            })
+        });
+    }
+    if (state) {
+        methods.triggerEvent({
+            name: get(rename, 'events.onOpen', {
+                default: 'onOpen'
+            })
+        });
+    }
+    methods.triggerEvent({
+        name: get(rename, 'events.onToggle', {
+            default: 'onToggle'
+        })
+    });
+    setOpen(state);
+};
+const DrawerBlock = ({ blockId , content , properties , methods , rename , onClose  })=>{
+    const [openState, setOpen] = useState(false);
+    useEffect(()=>{
+        methods.registerMethod(get(rename, 'methods.toggleOpen', {
+            default: 'toggleOpen'
+        }), ()=>triggerSetOpen({
+                state: !openState,
+                setOpen,
+                methods,
+                rename
+            }));
+        methods.registerMethod(get(rename, 'methods.setOpen', {
+            default: 'setOpen'
+        }), ({ open  })=>triggerSetOpen({
+                state: !!open,
+                setOpen,
+                methods,
+                rename
+            }));
+    });
+    return /*#__PURE__*/ React.createElement(Drawer, {
+        id: blockId,
+        closable: properties.closable,
+        extra: content.extra && content.extra(),
+        getContainer: properties.getContainer,
+        mask: properties.mask,
+        maskClosable: properties.maskClosable,
+        title: properties.title,
+        visible: openState,
+        width: properties.width,
+        height: properties.height,
+        zIndex: properties.zIndex,
+        placement: properties.placement,
+        keyboard: properties.keyboard,
+        onClose: onClose || (async ()=>{
+            const response = await methods.triggerEvent({
+                name: 'onClose'
+            });
+            if (response.success === false) return;
+            if (response.bounced !== true) {
+                triggerSetOpen({
+                    state: false,
+                    setOpen,
+                    methods,
+                    rename
+                });
+            }
+        }),
+        drawerStyle: methods.makeCssClass(properties.drawerStyle, true),
+        headerStyle: methods.makeCssClass(properties.headerStyle, true),
+        bodyStyle: methods.makeCssClass(properties.bodyStyle, true),
+        maskStyle: methods.makeCssClass(properties.maskStyle, true),
+        contentWrapperStyle: methods.makeCssClass(properties.contentWrapperStyle, true)
+    }, content.content && content.content());
+};
+DrawerBlock.defaultProps = blockDefaultProps;
+DrawerBlock.meta = {
+    category: 'container',
+    icons: [],
+    styles: [
+        'blocks/Drawer/style.less'
+    ]
+};
+export default DrawerBlock;

package/dist/blocks/Drawer/schema.json

@@ -0,0 +1,113 @@
+{
+  "type": "object",
+  "properties": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "closable": {
+        "type": "boolean",
+        "default": true,
+        "description": "Whether a close (x) button is visible on top right of the Drawer dialog or not."
+      },
+      "mask": {
+        "type": "boolean",
+        "default": true,
+        "description": "Whether to show mask or not."
+      },
+      "maskClosable": {
+        "type": "boolean",
+        "default": true,
+        "description": "Clicking on the mask (area outside the Drawer) to close the Drawer or not."
+      },
+      "title": {
+        "type": "string",
+        "description": "The title of the Drawer."
+      },
+      "width": {
+        "type": ["string", "number"],
+        "default": "256px",
+        "description": "Width of the Drawer dialog.",
+        "docs": {
+          "displayType": "string"
+        }
+      },
+      "height": {
+        "type": ["string", "number"],
+        "default": "256px",
+        "description": "When placement is top or bottom, height of the Drawer dialog.",
+        "docs": {
+          "displayType": "string"
+        }
+      },
+      "headerStyle": {
+        "type": "object",
+        "description": "Css style to applied to drawer header.",
+        "docs": {
+          "displayType": "yaml"
+        }
+      },
+      "bodyStyle": {
+        "type": "object",
+        "description": "Css style to applied to drawer body.",
+        "docs": {
+          "displayType": "yaml"
+        }
+      },
+      "contentWrapperStyle": {
+        "type": "object",
+        "description": "Css style to applied to content area.",
+        "docs": {
+          "displayType": "yaml"
+        }
+      },
+      "maskStyle": {
+        "type": "object",
+        "description": "Css style to applied to drawer mask.",
+        "docs": {
+          "displayType": "yaml"
+        }
+      },
+      "drawerStyle": {
+        "type": "object",
+        "description": "Css style to applied to drawer.",
+        "docs": {
+          "displayType": "yaml"
+        }
+      },
+      "zIndex": {
+        "type": "integer",
+        "default": 1000,
+        "description": "The z-index of the Drawer."
+      },
+      "placement": {
+        "type": "string",
+        "enum": ["top", "right", "bottom", "left"],
+        "default": "right",
+        "description": "The placement of the Drawer."
+      },
+      "keyboard": {
+        "type": "boolean",
+        "default": true,
+        "description": "Whether support press esc to close."
+      }
+    }
+  },
+  "events": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "onToggle": {
+        "type": "array",
+        "description": "Trigger actions when drawer is toggled."
+      },
+      "onClose": {
+        "type": "array",
+        "description": "Trigger actions when drawer is closed."
+      },
+      "onOpen": {
+        "type": "array",
+        "description": "Trigger actions when drawer is opened."
+      }
+    }
+  }
+}

package/dist/blocks/Drawer/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/drawer/style/index.less';

package/dist/blocks/Footer/Footer.js

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

package/dist/blocks/Footer/schema.json

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

package/dist/blocks/Footer/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/Header/Header.js

@@ -0,0 +1,36 @@
+/*
+  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 { Layout } from 'antd';
+import { blockDefaultProps } from '@lowdefy/block-utils';
+const Header = Layout.Header;
+const HeaderBlock = ({ blockId , content , methods , properties  })=>/*#__PURE__*/ React.createElement(Header, {
+        id: blockId,
+        className: `${methods.makeCssClass([
+            {
+                backgroundColor: properties.theme === 'light' && '#fff'
+            },
+            properties.style, 
+        ])} hide-on-print`
+    }, content.content && content.content());
+HeaderBlock.defaultProps = blockDefaultProps;
+HeaderBlock.meta = {
+    category: 'container',
+    icons: [],
+    styles: [
+        'blocks/Header/style.less'
+    ]
+};
+export default HeaderBlock;

package/dist/blocks/Header/schema.json

@@ -0,0 +1,22 @@
+{
+  "type": "object",
+  "properties": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "style": {
+        "type": "object",
+        "description": "Css style object to applied to header.",
+        "docs": {
+          "displayType": "yaml"
+        }
+      },
+      "theme": {
+        "type": "string",
+        "enum": ["light", "dark"],
+        "default": "light",
+        "description": "Page theme."
+      }
+    }
+  }
+}

package/dist/blocks/Header/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/Label/Label.js

@@ -0,0 +1,116 @@
+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.
+*/ // Derived from https://github.com/ant-design/ant-design/blob/master/components/form/FormItemLabel.tsx
+// MIT Copyright (c) 2015-present Ant UED, https://xtech.antfin.com/ - 2020-09-08
+import React from 'react';
+import { blockDefaultProps, renderHtml } from '@lowdefy/block-utils';
+import { Col, Row } from 'antd';
+import classNames from 'classnames';
+import CSSMotion from 'rc-motion';
+import labelLogic from './labelLogic.js';
+const validationKeyMap = {
+    error: 'errors',
+    warning: 'warnings'
+};
+let iconMap;
+const Label = ({ blockId , components: { Icon  } , content , methods , properties , required , validation ,  })=>{
+    const { extraClassName , feedbackClassName , iconClassName , label , labelClassName , labelCol , labelColClassName , rowClassName , showExtra , showFeedback , wrapperCol ,  } = labelLogic({
+        blockId,
+        content,
+        methods,
+        properties,
+        required,
+        validation
+    });
+    if (!iconMap) {
+        iconMap = {
+            error: ()=>/*#__PURE__*/ React.createElement(Icon, {
+                    properties: "AiFillCloseCircle"
+                }),
+            success: ()=>/*#__PURE__*/ React.createElement(Icon, {
+                    properties: "AiFillCheckCircle"
+                }),
+            validating: ()=>/*#__PURE__*/ React.createElement(Icon, {
+                    properties: "AiOutlineLoading"
+                }),
+            warning: ()=>/*#__PURE__*/ React.createElement(Icon, {
+                    properties: "AiFillExclamationCircle"
+                })
+        };
+    }
+    const IconNode = validation.status && iconMap[validation.status];
+    const icon = validation.status && IconNode ? /*#__PURE__*/ React.createElement("span", {
+        className: iconClassName
+    }, /*#__PURE__*/ React.createElement(IconNode, null)) : null;
+    return /*#__PURE__*/ React.createElement(Row, {
+        id: blockId,
+        className: rowClassName
+    }, label && /*#__PURE__*/ React.createElement(Col, _extends({}, labelCol, {
+        className: labelColClassName
+    }), /*#__PURE__*/ React.createElement("label", {
+        htmlFor: `${blockId}_input`,
+        className: labelClassName,
+        title: label
+    }, renderHtml({
+        html: label,
+        methods
+    }))), /*#__PURE__*/ React.createElement(Col, _extends({}, wrapperCol, {
+        className: "ant-form-item-control"
+    }), /*#__PURE__*/ React.createElement("div", {
+        className: "ant-form-item-control-input"
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: "ant-form-item-control-input-content"
+    }, content.content && content.content()), icon), (showFeedback || showExtra) && /*#__PURE__*/ React.createElement(CSSMotion, {
+        visible: showFeedback || showExtra,
+        motionName: "show-help",
+        motionAppear: true,
+        removeOnLeave: true
+    }, ({ className: motionClassName  })=>/*#__PURE__*/ React.createElement("div", {
+            className: classNames(extraClassName, motionClassName)
+        }, showFeedback ? /*#__PURE__*/ React.createElement("div", {
+            className: classNames(feedbackClassName)
+        }, validation[validationKeyMap[validation.status]] && validation[validationKeyMap[validation.status]].length > 0 && validation[validationKeyMap[validation.status]][0]) : renderHtml({
+            html: properties.extra,
+            methods
+        })))));
+};
+Label.defaultProps = blockDefaultProps;
+Label.meta = {
+    category: 'container',
+    icons: [
+        'AiFillCloseCircle',
+        'AiFillCheckCircle',
+        'AiOutlineLoading',
+        'AiFillExclamationCircle'
+    ],
+    styles: [
+        'blocks/Label/style.less'
+    ]
+};
+export default Label;

package/dist/blocks/Label/getLabelCol.js

@@ -0,0 +1,55 @@
+/*
+  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.
+*/ const getLabelCol = (value, inline)=>{
+    if (inline) {
+        return {
+            flex: '0 1 auto'
+        };
+    }
+    const defaultVal = {
+        xs: {
+            span: 24
+        },
+        sm: {
+            span: 24
+        }
+    };
+    if (value.span) {
+        defaultVal.md = {
+            span: value.span
+        };
+    }
+    if (value.sm) {
+        defaultVal.sm = value.sm;
+        defaultVal.xs = value.sm;
+    }
+    if (value.xs) {
+        defaultVal.xs = value.xs;
+    }
+    if (value.md) {
+        defaultVal.md = value.md;
+    }
+    if (value.lg) {
+        defaultVal.lg = value.lg;
+    }
+    if (value.xl) {
+        defaultVal.xl = value.xl;
+    }
+    if (value.xxl) {
+        defaultVal.xxl = value.xxl;
+    }
+    return defaultVal;
+};
+export default getLabelCol;

package/dist/blocks/Label/getWrapperCol.js

@@ -0,0 +1,69 @@
+/*
+  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.
+*/ const getWrapperCol = (value, inline)=>{
+    if (inline) {
+        return {
+            flex: '1 1 auto'
+        };
+    }
+    const defaultVal = {
+        xs: {
+            span: 24
+        },
+        sm: {
+            span: 24
+        }
+    };
+    if (value.span) {
+        defaultVal.md = {
+            span: 24 - value.span
+        };
+    }
+    if (value.sm && value.sm.span) {
+        defaultVal.sm = {
+            span: 24 - value.sm.span
+        };
+        defaultVal.xs = {
+            span: 24 - value.sm.span
+        };
+    }
+    if (value.xs && value.xs.span) {
+        defaultVal.xs = {
+            span: 24 - value.xs.span
+        };
+    }
+    if (value.md && value.md.span) {
+        defaultVal.md = {
+            span: 24 - value.md.span
+        };
+    }
+    if (value.lg && value.lg.span) {
+        defaultVal.lg = {
+            span: 24 - value.lg.span
+        };
+    }
+    if (value.xl && value.xl.span) {
+        defaultVal.xl = {
+            span: 24 - value.xl.span
+        };
+    }
+    if (value.xxl && value.xxl.span) {
+        defaultVal.xxl = {
+            span: 24 - value.xxl.span
+        };
+    }
+    return defaultVal;
+};
+export default getWrapperCol;