@lowdefy/blocks-antd 4.0.0-rc.10 → 4.0.0-rc.11

package/dist/blocks/DateTimeSelector/DateTimeSelector.js

@@ -21,6 +21,12 @@ import Label from '../Label/Label.js';
 import disabledDate from '../../disabledDate.js';
 const DateTimeSelector = ({ blockId, components: { Icon }, events, loading, methods, properties, required, validation, value })=>{
     const timeUnit = !type.isString(properties.timeFormat) ? 'minute' : properties.timeFormat === 'HH:mm:ss' ? 'second' : properties.timeFormat === 'HH' ? 'hour' : 'minute';
+    const onChange = (newVal)=>{
+        methods.setValue(!newVal ? null : moment.utc(newVal.add(properties.selectUTC ? newVal.utcOffset() : 0, 'minutes')).startOf(timeUnit).toDate());
+        methods.triggerEvent({
+            name: 'onChange'
+        });
+    };
     return /*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
         components: {
@@ -72,14 +78,10 @@ const DateTimeSelector = ({ blockId, components: { Icon }, events, loading, meth
                         minuteStep: properties.minuteStep || 5,
                         secondStep: properties.secondStep || 30
                     },
-                    onSelect: (newVal)=>{
-                        // NOTE: we use on select instead of onChange to make the block UX
-                        // more like the DataSelector which changes date on click and not on ok.
-                        methods.setValue(!newVal ? null : moment.utc(newVal.add(properties.selectUTC ? newVal.utcOffset() : 0, 'minutes')).startOf(timeUnit).toDate());
-                        methods.triggerEvent({
-                            name: 'onChange'
-                        });
-                    },
+                    onChange: onChange,
+                    onSelect: // NOTE: we use on select instead of onChange to make the block UX
+                    // more like the DataSelector which changes date on click and not on ok.
+                    onChange,
                     value: !type.isDate(value) ? null : properties.selectUTC ? moment.utc(value) : moment(value)
                 }))
         }

package/dist/blocks/MultipleSelector/MultipleSelector.js

@@ -19,7 +19,25 @@ import { Select } from 'antd';
 import getUniqueValues from '../../getUniqueValues.js';
 import getValueIndex from '../../getValueIndex.js';
 import Label from '../Label/Label.js';
+import Tag from '../Tag/Tag.js';
 const Option = Select.Option;
+const tagRender = (props, option, methods, components)=>{
+    const { label, closable, onClose } = props;
+    return /*#__PURE__*/ React.createElement(Tag, {
+        components: components,
+        methods: methods,
+        onClose: onClose,
+        properties: {
+            title: label,
+            ...option?.tag || {},
+            closable,
+            style: {
+                marginRight: 3,
+                ...option.tag?.style || {}
+            }
+        }
+    });
+};
 const MultipleSelector = ({ blockId, components: { Icon }, events, loading, methods, properties, required, validation, value })=>{
     const [fetchState, setFetch] = useState(false);
     const uniqueValueOptions = getUniqueValues(properties.options || []);
@@ -56,6 +74,10 @@ const MultipleSelector = ({ blockId, components: { Icon }, events, loading, meth
                     disabled: properties.disabled || loading,
                     getPopupContainer: ()=>document.getElementById(`${blockId}_popup`),
                     mode: "multiple",
+                    tagRender: properties.renderTags && ((props)=>tagRender(props, uniqueValueOptions[props.value], methods, {
+                            Icon
+                        })),
+                    maxTagCount: properties.maxTagCount,
                     notFoundContent: fetchState ? 'Loading' : 'Not found',
                     placeholder: get(properties, 'placeholder', {
                         default: 'Select items'

package/dist/blocks/MultipleSelector/schema.json

@@ -178,12 +178,39 @@
                   "docs": {
                     "displayType": "yaml"
                   }
+                },
+                "tag": {
+                  "type": "object",
+                  "properties": {
+                    "color": {
+                      "type": "string",
+                      "description": "Color of the Tag. Preset options are success, processing, error, warning, default, blue, cyan, geekblue, gold, green, lime, magenta, orange, purple, red, volcano, or alternatively any hex color.",
+                      "docs": {
+                        "displayType": "color"
+                      }
+                    },
+                    "title": {
+                      "type": "string",
+                      "description": "Content title of tag - supports html."
+                    },
+                    "icon": {
+                      "type": ["string", "object"],
+                      "description": "Name of an Ant Design Icon or properties of an Icon block to customize alert icon.",
+                      "docs": {
+                        "displayType": "icon"
+                      }
+                    }
+                  }
                 }
               }
             }
           }
         ]
       },
+      "maxTagCount": {
+        "type": "number",
+        "description": "Max tag count to show."
+      },
       "placeholder": {
         "type": "string",
         "default": "Select item",
@@ -219,6 +246,10 @@
       "title": {
         "type": "string",
         "description": "Multiple selector label title - supports html."
+      },
+      "renderTags": {
+        "type": "boolean",
+        "description": "When true, the selected option labels are rendered as tags in the selector input. This field must be true to render option tag values."
       }
     }
   },

package/dist/blocks/MultipleSelector/style.less

@@ -15,4 +15,5 @@
 */
 
 @import 'antd/lib/select/style/index.less';
+@import 'antd/lib/tag/style/index.less';
 @import '../Label/style.less';

package/dist/blocks/Paragraph/Paragraph.js

@@ -89,6 +89,7 @@ const ParagraphBlock = ({ blockId, components: { Icon }, events, methods, proper
         underline: properties.underline
     }, renderHtml({
         html: properties.content,
+        events,
         methods
     }));
 ParagraphBlock.defaultProps = blockDefaultProps;

package/dist/blocks/Paragraph/schema.json

@@ -125,6 +125,10 @@
       "onCopy": {
         "type": "array",
         "description": "Trigger action when copy text is clicked."
+      },
+      "onTextSelection": {
+        "type": "array",
+        "description": "Trigger action when text is selected and pass selected text to the event object."
       }
     }
   }

package/dist/blocks/PhoneNumberInput/PhoneNumberInput.js

@@ -20,11 +20,11 @@ import Label from '../Label/Label.js';
 import getValueIndex from '../../getValueIndex.js';
 import getUniqueValues from '../../getUniqueValues.js';
 const Option = Select.Option;
-function getAllowedRegions({ allowedRegions, regions: regions1 }) {
+function getAllowedRegions({ allowedRegions, regions }) {
     if (!allowedRegions || allowedRegions.length === 0) {
-        return regions1;
+        return regions;
     }
-    return regions1.filter((region)=>allowedRegions.includes(region.code));
+    return regions.filter((region)=>allowedRegions.includes(region.code));
 }
 function getDefaultRegion({ allowedRegions, defaultRegion, uniqueValueOptions }) {
     if (!defaultRegion) {

package/dist/blocks/Statistic/Statistic.js

@@ -16,9 +16,13 @@
 import { Statistic } from 'antd';
 import { type } from '@lowdefy/helpers';
 import { blockDefaultProps, renderHtml } from '@lowdefy/block-utils';
-const StatisticBlock = ({ blockId, components: { Icon }, events, properties, methods })=>/*#__PURE__*/ React.createElement(Statistic, {
+const StatisticBlock = ({ blockId, components: { Icon }, events, properties, methods })=>{
+    const additionalProps = {};
+    if (properties.decimalSeparator) {
+        additionalProps.decimalSeparator = properties.decimalSeparator;
+    }
+    return /*#__PURE__*/ React.createElement(Statistic, {
         className: methods.makeCssClass(properties.style),
-        decimalSeparator: properties.decimalSeparator,
         groupSeparator: properties.groupSeparator,
         id: blockId,
         loading: properties.loading,
@@ -38,8 +42,10 @@ const StatisticBlock = ({ blockId, components: { Icon }, events, properties, met
             blockId: `${blockId}_suffixIcon`,
             events: events,
             properties: properties.suffixIcon
-        }) : properties.suffix || ''
+        }) : properties.suffix || '',
+        ...additionalProps
     });
+};
 StatisticBlock.defaultProps = blockDefaultProps;
 StatisticBlock.meta = {
     category: 'display',

package/dist/blocks/Tag/Tag.js

@@ -0,0 +1,57 @@
+/*
+  Copyright 2020-2023 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 { Tag } from 'antd';
+import { blockDefaultProps, renderHtml } from '@lowdefy/block-utils';
+import { type } from '@lowdefy/helpers';
+const TagBlock = ({ blockId, components: { Icon }, events, methods, onClick, onClose, properties })=>{
+    const additionalProps = {};
+    if (properties.icon) {
+        additionalProps.icon = /*#__PURE__*/ React.createElement(Icon, {
+            blockId: `${blockId}_icon`,
+            events: events,
+            properties: properties.icon
+        });
+    }
+    if (onClick || events.onClick) {
+        additionalProps.onClick = onClick || (()=>methods.triggerEvent({
+                name: 'onClick'
+            }));
+    }
+    if (onClose || events.onClose) {
+        additionalProps.onClose = onClose || (()=>methods.triggerEvent({
+                name: 'onClose'
+            }));
+    }
+    return /*#__PURE__*/ React.createElement(Tag, {
+        id: blockId,
+        closable: properties.closable,
+        color: properties.color,
+        className: methods.makeCssClass(properties.style),
+        ...additionalProps
+    }, type.isString(properties.title) ? renderHtml({
+        html: properties.title,
+        methods
+    }) : properties.title ?? blockId);
+};
+TagBlock.defaultProps = blockDefaultProps;
+TagBlock.meta = {
+    category: 'display',
+    icons: [],
+    styles: [
+        'blocks/Tag/style.less'
+    ]
+};
+export default TagBlock;

package/dist/blocks/Tag/schema.json

@@ -0,0 +1,45 @@
+{
+  "properties": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "closable": {
+        "type": "boolean",
+        "default": false,
+        "description": "Allow tag to be closed."
+      },
+      "color": {
+        "type": "string",
+        "description": "Color of the Tag. Preset options are success, processing, error, warning, default, blue, cyan, geekblue, gold, green, lime, magenta, orange, purple, red, volcano, or alternatively any hex color.",
+        "docs": {
+          "displayType": "color"
+        }
+      },
+      "title": {
+        "type": "string",
+        "description": "Content title of tag - supports html."
+      },
+      "icon": {
+        "type": ["string", "object"],
+        "description": "Name of an Ant Design Icon or properties of an Icon block to customize alert icon.",
+        "docs": {
+          "displayType": "icon"
+        }
+      }
+    }
+  },
+  "events": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "onClick": {
+        "type": "array",
+        "description": "Called when Tag is clicked."
+      },
+      "onClose": {
+        "type": "array",
+        "description": "Called when Tag close icon is clicked."
+      }
+    }
+  }
+}

package/dist/blocks/Tag/style.less

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

package/dist/blocks.js

@@ -63,6 +63,7 @@ export { default as Sider } from './blocks/Sider/Sider.js';
 export { default as Statistic } from './blocks/Statistic/Statistic.js';
 export { default as Switch } from './blocks/Switch/Switch.js';
 export { default as Tabs } from './blocks/Tabs/Tabs.js';
+export { default as Tag } from './blocks/Tag/Tag.js';
 export { default as TimelineList } from './blocks/TimelineList/TimelineList.js';
 export { default as TextArea } from './blocks/TextArea/TextArea.js';
 export { default as TextInput } from './blocks/TextInput/TextInput.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lowdefy/blocks-antd",
-  "version": "4.0.0-rc.10",
+  "version": "4.0.0-rc.11",
   "license": "Apache-2.0",
   "description": "Lowdefy Ant Design Blocks",
   "homepage": "https://lowdefy.com",
@@ -50,24 +50,24 @@
   },
   "dependencies": {
     "@ant-design/icons": "4.8.0",
-    "@lowdefy/block-utils": "4.0.0-rc.10",
-    "@lowdefy/helpers": "4.0.0-rc.10",
-    "antd": "4.22.5",
+    "@lowdefy/block-utils": "4.0.0-rc.11",
+    "@lowdefy/helpers": "4.0.0-rc.11",
+    "antd": "4.24.14",
     "classnames": "2.3.2",
     "moment": "2.29.4",
-    "rc-motion": "2.6.2",
+    "rc-motion": "2.9.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "tinycolor2": "1.5.2"
+    "tinycolor2": "1.6.0"
   },
   "devDependencies": {
     "@emotion/jest": "11.10.5",
-    "@lowdefy/block-dev": "4.0.0-rc.10",
-    "@lowdefy/jest-yaml-transform": "4.0.0-rc.10",
-    "@lowdefy/node-utils": "4.0.0-rc.10",
+    "@lowdefy/block-dev": "4.0.0-rc.11",
+    "@lowdefy/jest-yaml-transform": "4.0.0-rc.11",
+    "@lowdefy/node-utils": "4.0.0-rc.11",
     "@swc/cli": "0.1.62",
-    "@swc/core": "1.3.70",
-    "@swc/jest": "0.2.27",
+    "@swc/core": "1.3.92",
+    "@swc/jest": "0.2.29",
     "@testing-library/dom": "8.19.1",
     "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "14.4.3",
@@ -79,5 +79,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "537af074f27770e32da9da8d48490f2eda94b406"
+  "gitHead": "dbc49d3688a6d2f44de25cc3f4bc071627f7ebfa"
 }