@lowdefy/blocks-antd 4.0.2 → 4.1.0

package/dist/blocks/Pagination/Pagination.js

@@ -36,21 +36,31 @@ const createChangeHandler = ({ eventName, methods, setState })=>(current, pageSi
             }
         });
     };
+const calculateState = ({ defaultCurrent, defaultPageSize, value })=>{
+    const state = {
+        current: type.isInt(value?.current) ? value?.current : defaultCurrent,
+        pageSize: type.isInt(value?.pageSize) ? value?.pageSize : defaultPageSize
+    };
+    state.skip = (state.current - 1) * state.pageSize;
+    return state;
+};
 const PaginationBlock = ({ blockId, loading, methods, properties, value })=>{
-    const [state, setState] = useState({
-        current: parseInt(value?.current) || 1,
-        pageSize: parseInt(value?.pageSize) || properties.pageSizeOptions?.[0] || 10,
-        skip: parseInt(value?.skip) || 0
-    });
+    const [state, setState] = useState(()=>calculateState({
+            defaultCurrent: 1,
+            defaultPageSize: properties.pageSizeOptions?.[0] ?? 10,
+            value
+        }));
     useEffect(()=>{
         if (JSON.stringify(value) !== JSON.stringify(state)) {
-            const nextState = {
-                current: parseInt(value?.current) || state.current,
-                pageSize: parseInt(value?.pageSize) || state.pageSize,
-                skip: parseInt(value?.skip) || state.skip
-            };
+            const nextState = calculateState({
+                defaultCurrent: state.current,
+                defaultPageSize: state.pageSize,
+                value
+            });
             setState(nextState);
-            methods.setValue(nextState);
+            methods.setValue({
+                ...nextState
+            });
         }
     }, [
         value
@@ -98,9 +108,7 @@ PaginationBlock.defaultProps = blockDefaultProps;
 PaginationBlock.meta = {
     valueType: 'object',
     initValue: {
-        current: 1,
-        pageSize: 10,
-        skip: 0
+        current: 1
     },
     category: 'input',
     icons: [],

package/dist/blocks/Popover/Popover.js

@@ -0,0 +1,39 @@
+/*
+  Copyright 2020-2024 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 { Popover } from 'antd';
+const PopoverBlock = ({ blockId, content, methods, properties })=>{
+    return /*#__PURE__*/ React.createElement(Popover, {
+        id: blockId,
+        ...properties,
+        content: content.popover && content.popover(),
+        onOpenChange: ()=>methods.triggerEvent({
+                name: 'onOpenChange'
+            }),
+        getPopupContainer: ()=>document.getElementById(`${blockId}_popup`)
+    }, content.content && content.content(), /*#__PURE__*/ React.createElement("div", {
+        id: `${blockId}_popup`
+    }));
+};
+PopoverBlock.defaultProps = blockDefaultProps;
+PopoverBlock.meta = {
+    category: 'container',
+    icons: [],
+    styles: [
+        'blocks/Popover/style.less'
+    ]
+};
+export default PopoverBlock;

package/dist/blocks/Popover/schema.json

@@ -0,0 +1,86 @@
+{
+  "type": "object",
+  "properties": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "title": {
+        "type": "string",
+        "description": "Title of the card."
+      },
+      "color": {
+        "type": "string",
+        "description": "Popover background color.",
+        "docs": {
+          "displayType": "color"
+        }
+      },
+      "defaultOpen": {
+        "type": "boolean",
+        "description": "Whether the popover is open by default.",
+        "default": false
+      },
+      "autoAdjustOverflow": {
+        "type": "boolean",
+        "description": "Whether to adjust popup placement automatically when popup is off screen",
+        "default": true
+      },
+      "placement": {
+        "type": "string",
+        "description": "Placement of the popover.",
+        "enum": [
+          "top",
+          "topLeft",
+          "topRight",
+          "left",
+          "leftTop",
+          "leftBottom",
+          "right",
+          "rightTop",
+          "rightBottom",
+          "bottom",
+          "bottomLeft",
+          "bottomRight"
+        ],
+        "default": "bottom"
+      },
+      "trigger": {
+        "type": "string",
+        "description": "Trigger mode which executes the popover.",
+        "enum": ["hover", "click", "focus"],
+        "default": "hover"
+      },
+      "zIndex": {
+        "type": "number",
+        "description": "Z-index of the popover."
+      },
+      "overlayInnerStyle": {
+        "type": "object",
+        "description": "Style of overlay inner div.",
+        "docs": {
+          "displayType": "yaml"
+        }
+      },
+      "mouseEnterDelay": {
+        "type": "number",
+        "description": "Delay in milliseconds, before tooltip is shown on mouse enter.",
+        "default": 0.1
+      },
+      "mouseLeaveDelay": {
+        "type": "number",
+        "description": "Delay in milliseconds, before tooltip is hidden on mouse leave.",
+        "default": 0.1
+      }
+    }
+  },
+  "events": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "onOpenChange": {
+        "type": "array",
+        "description": "Trigger actions when visibility of the tooltip card is changed."
+      }
+    }
+  }
+}

package/dist/blocks/Popover/style.less

@@ -0,0 +1,17 @@
+/*
+  Copyright 2020-2024 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/popover/style/index.less';

package/dist/blocks/TextInput/TextInput.js

@@ -48,6 +48,7 @@ const TextInput = ({ blockId, components: { Icon, Link }, events, loading, metho
                     showCount: properties.showCount,
                     status: validation.status,
                     value: value,
+                    type: properties.type,
                     onChange: onChange || ((event)=>{
                         let input = event.target.value;
                         if (properties.replaceInput) {
@@ -61,7 +62,21 @@ const TextInput = ({ blockId, components: { Icon, Link }, events, loading, metho
                         const cStart = event.target.selectionStart;
                         const cEnd = event.target.selectionEnd;
                         runAfterUpdate(()=>{
-                            event.target.setSelectionRange(cStart, cEnd);
+                            // Allows for input types that don't support SelectionRange
+                            if (![
+                                'email',
+                                'date',
+                                'datetime-local',
+                                'month',
+                                'number',
+                                'time',
+                                'week',
+                                'range',
+                                'color',
+                                'file'
+                            ].includes(properties.type)) {
+                                event.target.setSelectionRange(cStart, cEnd);
+                            }
                         });
                     }),
                     onPressEnter: ()=>{

package/dist/blocks/TextInput/schema.json

@@ -9,6 +9,12 @@
         "default": false,
         "description": "Allow the user to clear their input."
       },
+      "type": {
+        "type": "string",
+        "enum": ["text", "number", "password", "tel", "email", "url"],
+        "default": "text",
+        "description": "The type of input, (see <a href='https://developer.mozilla.org/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types'>MDN</a>)."
+      },
       "autoFocus": {
         "type": "boolean",
         "default": false,

package/dist/blocks/TreeSelector/TreeSelector.js

@@ -0,0 +1,111 @@
+/*
+  Copyright 2020-2024 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 { Tree } from 'antd';
+import { blockDefaultProps, renderHtml } from '@lowdefy/block-utils';
+const transformData = (data, valueMap, prefix = '')=>{
+    return data.map(({ children, disabled, disableCheckbox, label, value }, i)=>{
+        const key = `${prefix}-${i}`;
+        valueMap[key] = prefix ? [
+            value,
+            ...valueMap[prefix]
+        ] : [
+            value
+        ];
+        return {
+            children: children && transformData(children, valueMap, key),
+            disabled,
+            disableCheckbox,
+            key,
+            renderTitle: label
+        };
+    });
+};
+const getValueKeys = (value, valueMap)=>{
+    for(const key in valueMap){
+        if (JSON.stringify(value) === JSON.stringify(valueMap[key])) {
+            return key.split('-').slice(1).reduce((acc, curr, i)=>[
+                    ...acc,
+                    acc[i - 1] ? acc[i - 1] + '-' + curr : '-' + curr
+                ], []);
+        }
+    }
+    return [];
+};
+const TreeSelector = ({ blockId, properties, content, methods, value })=>{
+    const treeData = properties.options;
+    const valueMap = {};
+    const transformedData = transformData(treeData, valueMap);
+    const [selectedKeys, setSelectedKeys] = useState([]);
+    const [expandedKeys, setExpandedKeys] = useState([]);
+    useEffect(()=>{
+        let nextValue;
+        if (value === null || Array.isArray(value) && !value.length) {
+            nextValue = [];
+        } else {
+            nextValue = getValueKeys(value, valueMap);
+        }
+        setSelectedKeys([
+            nextValue[nextValue.length - 1]
+        ]);
+        setExpandedKeys([
+            ...new Set([
+                ...nextValue.slice(0, nextValue.length - 1),
+                ...expandedKeys
+            ])
+        ]);
+    }, [
+        value
+    ]);
+    const onSelect = (selectedKeys)=>{
+        methods.setValue(selectedKeys.map((key)=>valueMap[key]).flat());
+        methods.triggerEvent({
+            name: 'onChange'
+        });
+        setSelectedKeys(selectedKeys);
+    };
+    const onExpand = (nextExpandedKeys)=>{
+        setExpandedKeys(nextExpandedKeys);
+    };
+    return /*#__PURE__*/ React.createElement(Tree, {
+        id: blockId,
+        checkable: properties.checkable,
+        disabled: properties.disabled,
+        defaultExpandAll: properties.defaultExpandAll,
+        showLine: properties.showLine,
+        selectable: properties.selectable,
+        multiple: false,
+        content: content.options && content.options(),
+        treeData: transformedData,
+        onSelect: onSelect,
+        onExpand: onExpand,
+        titleRender: ({ renderTitle })=>renderHtml({
+                html: renderTitle,
+                methods
+            }),
+        selectedKeys: selectedKeys,
+        expandedKeys: expandedKeys
+    });
+};
+TreeSelector.defaultProps = blockDefaultProps;
+TreeSelector.meta = {
+    category: 'input',
+    valueType: 'array',
+    icons: [],
+    styles: [
+        'blocks/TreeSelector/style.less'
+    ]
+};
+export default TreeSelector;

package/dist/blocks/TreeSelector/schema.json

@@ -0,0 +1,166 @@
+{
+  "type": "object",
+  "properties": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "checkable": {
+        "type": "boolean",
+        "default": false,
+        "description": "Make nodes checkboxes."
+      },
+      "inputStyle": {
+        "type": "object",
+        "description": "Css style to applied to input.",
+        "docs": {
+          "displayType": "yaml"
+        }
+      },
+      "optionsStyle": {
+        "type": "object",
+        "description": "Css style to applied to option elements.",
+        "docs": {
+          "displayType": "yaml"
+        }
+      },
+      "disabled": {
+        "type": "boolean",
+        "default": false,
+        "description": "Disable the block if true."
+      },
+      "showLine": {
+        "type": "boolean",
+        "default": false,
+        "description": "Show a connecting line if true."
+      },
+      "selectable": {
+        "type": "boolean",
+        "default": true,
+        "description": "Selectable if true."
+      },
+      "options": {
+        "default": [],
+        "oneOf": [
+          {
+            "type": "array",
+            "description": "Options can either be an array of label, value pairs.",
+            "items": {
+              "type": "object",
+              "required": ["value"],
+              "properties": {
+                "label": {
+                  "type": "string",
+                  "description": "Value label shown to user - supports html."
+                },
+                "value": {
+                  "description": "Value selected. Can be of any type.",
+                  "oneOf": [
+                    {
+                      "type": "string"
+                    },
+                    {
+                      "type": "number"
+                    },
+                    {
+                      "type": "boolean"
+                    },
+                    {
+                      "type": "object"
+                    },
+                    {
+                      "type": "array"
+                    }
+                  ],
+                  "docs": {
+                    "displayType": "yaml"
+                  }
+                },
+                "disabled": {
+                  "type": "boolean",
+                  "description": "Disable the node if true.",
+                  "default": false
+                },
+                "disableCheckbox": {
+                  "type": "boolean",
+                  "description": "Disable the checkbox if true.",
+                  "default": false
+                },
+                "style": {
+                  "type": "object",
+                  "description": "Css style to applied to option.",
+                  "docs": {
+                    "displayType": "yaml"
+                  }
+                },
+                "children": {
+                  "type": "array",
+                  "description": "Options can either be an array of label, value pairs.",
+                  "items": {
+                    "type": "object",
+                    "required": ["value"],
+                    "properties": {
+                      "label": {
+                        "type": "string",
+                        "description": "Value label shown to user - supports html."
+                      },
+                      "value": {
+                        "description": "Value selected. Can be of any type.",
+                        "oneOf": [
+                          {
+                            "type": "string"
+                          },
+                          {
+                            "type": "number"
+                          },
+                          {
+                            "type": "boolean"
+                          },
+                          {
+                            "type": "object"
+                          },
+                          {
+                            "type": "array"
+                          }
+                        ],
+                        "docs": {
+                          "displayType": "yaml"
+                        }
+                      },
+                      "disabled": {
+                        "type": "boolean",
+                        "description": "Disable the node if true.",
+                        "default": false
+                      },
+                      "disableCheckbox": {
+                        "type": "boolean",
+                        "description": "Disable the checkbox if true.",
+                        "default": false
+                      },
+                      "style": {
+                        "type": "object",
+                        "description": "Css style to applied to option.",
+                        "docs": {
+                          "displayType": "yaml"
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        ]
+      }
+    }
+  },
+  "events": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "onChange": {
+        "type": "array",
+        "description": "Trigger action when selection is changed."
+      }
+    }
+  }
+}

package/dist/blocks/TreeSelector/style.less

@@ -0,0 +1,27 @@
+/*
+  Copyright 2020-2024 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/tree/style/index.less';
+
+// bug in antd less file
+.ant-tree-switcher-leaf-line:before {
+  right: unset;
+}
+
+// @tree-bg doesn't affect the tree switcher background
+.ant-tree-show-line .ant-tree-switcher {
+  background: transparent;
+}

package/dist/blocks.js

@@ -54,6 +54,7 @@ export { default as Paragraph } from './blocks/Paragraph/Paragraph.js';
 export { default as ParagraphInput } from './blocks/ParagraphInput/ParagraphInput.js';
 export { default as PasswordInput } from './blocks/PasswordInput/PasswordInput.js';
 export { default as PhoneNumberInput } from './blocks/PhoneNumberInput/PhoneNumberInput.js';
+export { default as Popover } from './blocks/Popover/Popover.js';
 export { default as Progress } from './blocks/Progress/Progress.js';
 export { default as RadioSelector } from './blocks/RadioSelector/RadioSelector.js';
 export { default as RatingSlider } from './blocks/RatingSlider/RatingSlider.js';
@@ -70,5 +71,6 @@ export { default as TextArea } from './blocks/TextArea/TextArea.js';
 export { default as TextInput } from './blocks/TextInput/TextInput.js';
 export { default as Title } from './blocks/Title/Title.js';
 export { default as TitleInput } from './blocks/TitleInput/TitleInput.js';
+export { default as TreeSelector } from './blocks/TreeSelector/TreeSelector.js';
 export { default as Tooltip } from './blocks/Tooltip/Tooltip.js';
 export { default as WeekSelector } from './blocks/WeekSelector/WeekSelector.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lowdefy/blocks-antd",
-  "version": "4.0.2",
+  "version": "4.1.0",
   "license": "Apache-2.0",
   "description": "Lowdefy Ant Design Blocks",
   "homepage": "https://lowdefy.com",
@@ -43,8 +43,8 @@
   ],
   "dependencies": {
     "@ant-design/icons": "4.8.0",
-    "@lowdefy/block-utils": "4.0.2",
-    "@lowdefy/helpers": "4.0.2",
+    "@lowdefy/block-utils": "4.1.0",
+    "@lowdefy/helpers": "4.1.0",
     "antd": "4.24.14",
     "classnames": "2.3.2",
     "moment": "2.29.4",
@@ -55,9 +55,9 @@
   },
   "devDependencies": {
     "@emotion/jest": "11.10.5",
-    "@lowdefy/block-dev": "4.0.2",
-    "@lowdefy/jest-yaml-transform": "4.0.2",
-    "@lowdefy/node-utils": "4.0.2",
+    "@lowdefy/block-dev": "4.1.0",
+    "@lowdefy/jest-yaml-transform": "4.1.0",
+    "@lowdefy/node-utils": "4.1.0",
     "@swc/cli": "0.1.63",
     "@swc/core": "1.3.99",
     "@swc/jest": "0.2.29",