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

package/dist/blocks/ConfirmModal/schema.json

@@ -0,0 +1,122 @@
+{
+  "properties": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "title": {
+        "type": "string",
+        "description": "Modal title - supports html."
+      },
+      "bodyStyle": {
+        "type": "object",
+        "description": "Css style to applied to modal body.",
+        "docs": {
+          "displayType": "yaml"
+        }
+      },
+      "centered": {
+        "type": "boolean",
+        "default": false,
+        "description": "Centered Modal."
+      },
+      "closable": {
+        "type": "boolean",
+        "default": false,
+        "description": "Whether a close (x) button is visible on top right of the confirm dialog or not."
+      },
+      "content": {
+        "type": "string",
+        "description": "Modal content. Overridden by the \"content\" content area - supports html."
+      },
+      "icon": {
+        "type": ["string", "object"],
+        "description": "Name of an React-Icon (See <a href='https://react-icons.github.io/react-icons/'>all icons</a>) or properties of an Icon block to customize modal icon.",
+        "docs": {
+          "displayType": "icon"
+        }
+      },
+      "mask": {
+        "type": "boolean",
+        "default": true,
+        "description": "Whether show mask or not."
+      },
+      "maskClosable": {
+        "type": "boolean",
+        "default": false,
+        "description": "Whether to close the modal dialog when the mask (area outside the modal) is clicked."
+      },
+      "modalStyle": {
+        "type": "object",
+        "description": "Css style to applied to modal.",
+        "docs": {
+          "displayType": "yaml"
+        }
+      },
+      "okText": {
+        "type": "string",
+        "default": "Ok",
+        "description": "Text of the Ok button."
+      },
+      "cancelText": {
+        "type": "string",
+        "default": "Cancel",
+        "description": "Text of the Cancel button."
+      },
+      "okButton": {
+        "type": "object",
+        "description": "Ok button properties.",
+        "docs": {
+          "displayType": "button"
+        }
+      },
+      "cancelButton": {
+        "type": "object",
+        "description": "Cancel button properties.",
+        "docs": {
+          "displayType": "button"
+        }
+      },
+      "width": {
+        "type": ["number", "string"],
+        "default": 416,
+        "description": "Width of the modal dialog.",
+        "docs": {
+          "displayType": "string"
+        }
+      },
+      "zIndex": {
+        "type": "number",
+        "default": 1000,
+        "description": "The z-index of the Modal."
+      },
+      "status": {
+        "type": "string",
+        "enum": ["success", "error", "info", "warning", "confirm"],
+        "default": "confirm",
+        "description": "Modal status type."
+      }
+    }
+  },
+  "events": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "onOk": {
+        "type": "array",
+        "description": "Trigger actions when Ok button is clicked."
+      },
+      "onOpen": {
+        "type": "array",
+        "description": "Trigger actions when confirm modal is opened."
+      },
+      "onCancel": {
+        "type": "array",
+        "description": "Trigger actions when Cancel button is clicked."
+      },
+      "onClose": {
+        "type": "array",
+        "description": "Triggered after onOk or onCancel actions are completed."
+      }
+    }
+  }
+}

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

package/dist/blocks/Content/Content.js

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

package/dist/blocks/Content/schema.json

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

package/dist/blocks/Content/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/ControlledList/ControlledList.js

@@ -0,0 +1,137 @@
+/*
+  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, { useEffect } from 'react';
+import { get } from '@lowdefy/helpers';
+import { List, Typography } from 'antd';
+import { blockDefaultProps } from '@lowdefy/block-utils';
+import Button from '../Button/Button.js';
+const ControlledListBlock = ({ blockId , components: { Icon , Link  } , events , list , methods , properties ,  })=>{
+    useEffect(()=>{
+        methods.registerMethod('moveItemDown', methods.moveItemDown);
+        methods.registerMethod('moveItemUp', methods.moveItemUp);
+        methods.registerMethod('pushItem', methods.pushItem);
+        methods.registerMethod('removeItem', methods.removeItem);
+        methods.registerMethod('unshiftItem', methods.unshiftItem);
+    });
+    const styles = {
+        header: {
+            display: 'flex',
+            flexDirection: 'row',
+            flexWrap: 'nowrap',
+            justifyContent: 'space-between'
+        },
+        footer: {
+            display: 'flex',
+            flexDirection: 'row',
+            flexWrap: 'nowrap',
+            justifyContent: 'space-between'
+        },
+        item: {
+            width: '100%'
+        }
+    };
+    return /*#__PURE__*/ React.createElement(List, {
+        id: blockId,
+        size: properties.size,
+        header: (properties.title || properties.addToFront && !properties.hideAddButton) && /*#__PURE__*/ React.createElement("div", {
+            className: methods.makeCssClass([
+                styles.header,
+                properties.headerStyle
+            ])
+        }, properties.title ? /*#__PURE__*/ React.createElement(Typography.Text, {
+            strong: true
+        }, properties.title) : /*#__PURE__*/ React.createElement("br", null), properties.addToFront && !properties.hideAddButton && /*#__PURE__*/ React.createElement(Button, {
+            blockId: `${blockId}_add_button`,
+            components: {
+                Icon,
+                Link
+            },
+            events: events,
+            properties: {
+                icon: 'AiOutlinePlus',
+                size: properties.size,
+                title: get(properties, 'addItemButton.title ') || 'Add Item',
+                type: 'default',
+                ...properties.addItemButton
+            },
+            onClick: ()=>methods.unshiftItem()
+        })),
+        footer: !properties.addToFront && !properties.hideAddButton && /*#__PURE__*/ React.createElement("div", {
+            className: methods.makeCssClass([
+                styles.footer,
+                properties.footerStyle
+            ])
+        }, /*#__PURE__*/ React.createElement("br", null), /*#__PURE__*/ React.createElement(Button, {
+            blockId: `${blockId}_add_button`,
+            components: {
+                Icon,
+                Link
+            },
+            events: events,
+            properties: {
+                icon: 'AiOutlinePlus',
+                size: properties.size,
+                title: get(properties, 'addItemButton.title ') || 'Add Item',
+                type: 'dashed',
+                ...properties.addItemButton
+            },
+            onClick: ()=>methods.pushItem()
+        })),
+        bordered: true,
+        locale: {
+            emptyText: properties.noDataTitle || 'No Items'
+        },
+        dataSource: list,
+        renderItem: (item, i)=>/*#__PURE__*/ React.createElement(List.Item, {
+                key: `${blockId}_${i}`,
+                className: methods.makeCssClass([
+                    styles.item,
+                    properties.itemStyle
+                ]),
+                extra: !properties.hideRemoveButton && [
+                    // eslint-disable-next-line react/jsx-key
+                    /*#__PURE__*/ React.createElement(Icon, {
+                        blockId: `${blockId}_${i}_remove_icon`,
+                        events: events,
+                        properties: {
+                            name: 'AiOutlineMinusCircle',
+                            ...properties.removeItemIcon,
+                            style: {
+                                paddingLeft: properties.size === 'small' ? 2 : properties.size === 'large' ? 6 : 4,
+                                fontSize: properties.size === 'small' ? 16 : properties.size === 'large' ? 20 : 18,
+                                ...properties.removeItemIcon && properties.removeItemIcon.style ? properties.removeItemIcon.style : {}
+                            }
+                        },
+                        onClick: ()=>methods.removeItem(i)
+                    }), 
+                ]
+            }, item.content && item.content({
+                width: '100%'
+            }))
+    });
+};
+ControlledListBlock.defaultProps = blockDefaultProps;
+ControlledListBlock.meta = {
+    valueType: 'array',
+    category: 'list',
+    icons: [
+        'AiOutlinePlus',
+        'AiOutlineMinusCircle'
+    ],
+    styles: [
+        'blocks/ControlledList/style.less'
+    ]
+};
+export default ControlledListBlock;

package/dist/blocks/ControlledList/schema.json

@@ -0,0 +1,68 @@
+{
+  "type": "object",
+  "properties": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "title": {
+        "type": "string",
+        "description": "Controlled list title."
+      },
+      "addToFront": {
+        "type": "boolean",
+        "default": false,
+        "description": "When true, add new items to the front of the list."
+      },
+      "hideAddButton": {
+        "type": "boolean",
+        "default": false,
+        "description": "When true, hide the add new item button."
+      },
+      "size": {
+        "type": "string",
+        "enum": ["small", "default", "large"],
+        "default": "default",
+        "description": "When true, hide the add new item button."
+      },
+      "style": {
+        "type": "object",
+        "description": "Css style object to applied to content.",
+        "docs": {
+          "displayType": "yaml"
+        }
+      },
+      "addItemButton": {
+        "type": "object",
+        "description": "Custom add item button properties.",
+        "docs": {
+          "displayType": "button"
+        }
+      },
+      "removeItemIcon": {
+        "type": ["string", "object"],
+        "description": "Custom remove item icon properties.",
+        "docs": {
+          "displayType": "icon"
+        }
+      },
+      "footerStyle": {
+        "type": "object",
+        "description": "Css style object to applied to controlled list footer.",
+        "docs": {
+          "displayType": "yaml"
+        }
+      },
+      "itemStyle": {
+        "type": "object",
+        "description": "Css style object to applied to controlled list items.",
+        "docs": {
+          "displayType": "yaml"
+        }
+      },
+      "noDataTitle": {
+        "type": "string",
+        "description": "Title to show when list is empty."
+      }
+    }
+  }
+}

package/dist/blocks/ControlledList/style.less

@@ -0,0 +1,19 @@
+/*
+  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/list/style/index.less';
+@import 'antd/lib/typography/style/index.less';
+@import '../Button/style.less';

package/dist/blocks/DateRangeSelector/DateRangeSelector.js

@@ -0,0 +1,102 @@
+/*
+  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 { DatePicker } from 'antd';
+import moment from 'moment';
+import { blockDefaultProps } from '@lowdefy/block-utils';
+import { type } from '@lowdefy/helpers';
+import Label from '../Label/Label.js';
+import disabledDate from '../../disabledDate.js';
+const RangePicker = DatePicker.RangePicker;
+const rangeValue = (value, format)=>{
+    if (value && format) return value.map((val)=>moment.utc(val, format).startOf('day'));
+    if (value) return value.map((val)=>moment.utc(val).startOf('day'));
+    return null;
+};
+const DateRangeSelector = ({ blockId , components: { Icon  } , events , loading , methods , properties , required , validation , value ,  })=>{
+    return /*#__PURE__*/ React.createElement(Label, {
+        blockId: blockId,
+        components: {
+            Icon
+        },
+        events: events,
+        properties: {
+            title: properties.title,
+            size: properties.size,
+            ...properties.label
+        },
+        validation: validation,
+        required: required,
+        content: {
+            content: ()=>/*#__PURE__*/ React.createElement("div", {
+                    className: methods.makeCssClass({
+                        width: '100%'
+                    })
+                }, /*#__PURE__*/ React.createElement("div", {
+                    id: `${blockId}_popup`
+                }), /*#__PURE__*/ React.createElement(RangePicker, {
+                    id: `${blockId}_input`,
+                    allowClear: properties.allowClear !== false,
+                    autoFocus: properties.autoFocus,
+                    bordered: properties.bordered,
+                    className: methods.makeCssClass([
+                        {
+                            width: '100%'
+                        },
+                        properties.inputStyle
+                    ]),
+                    disabled: properties.disabled || loading,
+                    disabledDate: disabledDate(properties.disabledDates),
+                    format: properties.format || 'YYYY-MM-DD',
+                    getPopupContainer: ()=>document.getElementById(`${blockId}_popup`),
+                    separator: properties.separator || '~',
+                    size: properties.size,
+                    status: validation.status,
+                    placeholder: type.isArray(properties.placeholder) && [
+                        properties.placeholder[0] || 'Start Date',
+                        properties.placeholder[1] || 'End Date', 
+                    ] || [
+                        'Start Date',
+                        'End Date'
+                    ],
+                    suffixIcon: /*#__PURE__*/ React.createElement(Icon, {
+                        blockId: `${blockId}_suffixIcon`,
+                        events: events,
+                        properties: properties.suffixIcon || 'AiOutlineCalendar'
+                    }),
+                    onChange: (newVal)=>{
+                        methods.setValue(!newVal ? null : newVal.map((val)=>moment.utc(val.add(val.utcOffset(), 'minutes')).startOf('day').toDate()));
+                        methods.triggerEvent({
+                            name: 'onChange'
+                        });
+                    },
+                    value: rangeValue(value)
+                }))
+        }
+    });
+};
+DateRangeSelector.defaultProps = blockDefaultProps;
+DateRangeSelector.meta = {
+    valueType: 'array',
+    category: 'input',
+    icons: [
+        ...Label.meta.icons,
+        'AiOutlineCalendar'
+    ],
+    styles: [
+        'blocks/DateRangeSelector/style.less'
+    ]
+};
+export default DateRangeSelector;