@lowdefy/blocks-antd 4.0.0-alpha.1 → 4.0.0-alpha.12

package/dist/blocks/ControlledList/ControlledList.js

@@ -1,6 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /*
-  Copyright 2020-2021 Lowdefy, Inc
+  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.
@@ -43,97 +42,96 @@ const ControlledListBlock = ({ blockId , components: { Icon , Link  } , events ,
             width: '100%'
         }
     };
-    return(/*#__PURE__*/ _jsx(List, {
+    return(/*#__PURE__*/ React.createElement(List, {
         id: blockId,
         size: properties.size,
-        header: (properties.title || properties.addToFront && !properties.hideAddButton) && /*#__PURE__*/ _jsxs("div", {
+        header: (properties.title || properties.addToFront && !properties.hideAddButton) && /*#__PURE__*/ React.createElement("div", {
             className: methods.makeCssClass([
                 styles.header,
                 properties.headerStyle
-            ]),
-            children: [
-                properties.title ? /*#__PURE__*/ _jsx(Typography.Text, {
-                    strong: true,
-                    children: properties.title
-                }) : /*#__PURE__*/ _jsx("br", {
-                }),
-                properties.addToFront && !properties.hideAddButton && /*#__PURE__*/ _jsx(Button, {
-                    blockId: `${blockId}_add_button`,
-                    components: {
-                        Icon,
-                        Link
-                    },
-                    events: events,
-                    properties: {
-                        icon: 'PlusOutlined',
-                        size: properties.size,
-                        title: get(properties, 'addItemButton.title ') || 'Add Item',
-                        type: 'default',
-                        ...properties.addItemButton
-                    },
-                    onClick: ()=>methods.unshiftItem()
-                })
-            ]
-        }),
-        footer: !properties.addToFront && !properties.hideAddButton && /*#__PURE__*/ _jsxs("div", {
+            ])
+        }, 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
-            ]),
-            children: [
-                /*#__PURE__*/ _jsx("br", {
-                }),
-                /*#__PURE__*/ _jsx(Button, {
-                    blockId: `${blockId}_add_button`,
-                    components: {
-                        Icon,
-                        Link
-                    },
-                    events: events,
-                    properties: {
-                        icon: 'PlusOutlined',
-                        size: properties.size,
-                        title: get(properties, 'addItemButton.title ') || 'Add Item',
-                        type: 'dashed',
-                        ...properties.addItemButton
-                    },
-                    onClick: ()=>methods.pushItem()
-                })
-            ]
-        }),
+            ])
+        }, /*#__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__*/ _jsx(List.Item, {
+        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__*/ _jsx(Icon, {
+                    /*#__PURE__*/ React.createElement(Icon, {
                         blockId: `${blockId}_${i}_remove_icon`,
                         events: events,
                         properties: {
-                            name: 'MinusCircleOutlined',
+                            name: 'AiOutlineMinusCircle',
                             ...properties.removeItemIcon,
                             style: {
-                                paddingLeft: properties.size === 'small' ? 16 : properties.size === 'large' ? 20 : 18,
+                                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 : {
-                                }
+                                ...properties.removeItemIcon && properties.removeItemIcon.style ? properties.removeItemIcon.style : {}
                             }
                         },
                         onClick: ()=>methods.removeItem(i)
                     }), 
-                ],
-                children: item.content && item.content({
-                    width: '100%'
-                })
-            }, `${blockId}_${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/style.less

@@ -1,5 +1,5 @@
 /*
-  Copyright 2020-2021 Lowdefy, Inc
+  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.

package/dist/blocks/DateRangeSelector/DateRangeSelector.js

@@ -1,6 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /*
-  Copyright 2020-2021 Lowdefy, Inc
+  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.
@@ -29,7 +28,7 @@ const rangeValue = (value, format)=>{
     return null;
 };
 const DateRangeSelector = ({ blockId , components: { Icon  } , events , loading , methods , properties , required , validation , value ,  })=>{
-    return(/*#__PURE__*/ _jsx(Label, {
+    return(/*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
         components: {
             Icon
@@ -42,59 +41,65 @@ const DateRangeSelector = ({ blockId , components: { Icon  } , events , loading
         },
         validation: validation,
         required: required,
-        loading: loading,
         content: {
-            content: ()=>/*#__PURE__*/ _jsxs("div", {
+            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,
+                    placeholder: type.isArray(properties.placeholder) && [
+                        properties.placeholder[0] || 'Start Date',
+                        properties.placeholder[1] || 'End Date', 
+                    ] || [
+                        'Start Date',
+                        'End Date'
+                    ],
+                    suffixIcon: properties.suffixIcon && /*#__PURE__*/ React.createElement(Icon, {
+                        blockId: `${blockId}_suffixIcon`,
+                        events: events,
+                        properties: properties.suffixIcon || 'AiOutlineCalendar'
                     }),
-                    children: [
-                        /*#__PURE__*/ _jsx("div", {
-                            id: `${blockId}_popup`
-                        }),
-                        /*#__PURE__*/ _jsx(RangePicker, {
-                            id: `${blockId}_input`,
-                            allowClear: properties.allowClear !== false,
-                            autoFocus: properties.autoFocus,
-                            bordered: properties.bordered,
-                            className: methods.makeCssClass([
-                                {
-                                    width: '100%'
-                                },
-                                properties.inputStyle
-                            ]),
-                            disabled: properties.disabled,
-                            disabledDate: disabledDate(properties.disabledDates),
-                            format: properties.format || 'YYYY-MM-DD',
-                            getPopupContainer: ()=>document.getElementById(`${blockId}_popup`)
-                            ,
-                            separator: properties.separator || '~',
-                            size: properties.size,
-                            placeholder: type.isArray(properties.placeholder) && [
-                                properties.placeholder[0] || 'Start Date',
-                                properties.placeholder[1] || 'End Date', 
-                            ] || [
-                                'Start Date',
-                                'End Date'
-                            ],
-                            suffixIcon: properties.suffixIcon && /*#__PURE__*/ _jsx(Icon, {
-                                blockId: `${blockId}_suffixIcon`,
-                                events: events,
-                                properties: properties.suffixIcon || 'CalendarOutlined'
-                            }),
-                            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)
-                        })
-                    ]
-                })
+                    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;

package/dist/blocks/DateRangeSelector/schema.json

@@ -196,8 +196,8 @@
       },
       "suffixIcon": {
         "type": ["string", "object"],
-        "default": "CalendarOutlined",
-        "description": "Name of an Ant Design Icon or properties of an Icon block to customize icon on right-hand side of the date picker.",
+        "default": "AiOutlineCalendar",
+        "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 icon on right-hand side of the date picker.",
         "docs": {
           "displayType": "icon"
         }

package/dist/blocks/DateRangeSelector/style.less

@@ -1,5 +1,5 @@
 /*
-  Copyright 2020-2021 Lowdefy, Inc
+  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.

package/dist/blocks/DateSelector/DateSelector.js

@@ -1,6 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /*
-  Copyright 2020-2021 Lowdefy, Inc
+  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.
@@ -20,8 +19,8 @@ import { blockDefaultProps } from '@lowdefy/block-utils';
 import { DatePicker } from 'antd';
 import Label from '../Label/Label.js';
 import disabledDate from '../../disabledDate.js';
-const DateSelector = ({ blockId , events , loading , components: { Icon  } , methods , properties , required , validation , value ,  })=>{
-    return(/*#__PURE__*/ _jsx(Label, {
+const DateSelector = ({ blockId , components: { Icon  } , events , loading , methods , properties , required , validation , value ,  })=>{
+    return(/*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
         components: {
             Icon
@@ -34,52 +33,58 @@ const DateSelector = ({ blockId , events , loading , components: { Icon  } , met
         },
         validation: validation,
         required: required,
-        loading: loading,
         content: {
-            content: ()=>/*#__PURE__*/ _jsxs("div", {
+            content: ()=>/*#__PURE__*/ React.createElement("div", {
                     className: methods.makeCssClass({
                         width: '100%'
+                    })
+                }, /*#__PURE__*/ React.createElement("div", {
+                    id: `${blockId}_popup`
+                }), /*#__PURE__*/ React.createElement(DatePicker, {
+                    id: `${blockId}_input`,
+                    allowClear: properties.allowClear !== false,
+                    autoFocus: properties.autoFocus,
+                    bordered: properties.bordered,
+                    className: methods.makeCssClass([
+                        {
+                            width: '100%'
+                        },
+                        properties.inputStyle
+                    ]),
+                    disabled: properties.disabled || loading,
+                    format: properties.format || 'YYYY-MM-DD',
+                    getPopupContainer: ()=>document.getElementById(`${blockId}_popup`)
+                    ,
+                    placeholder: properties.placeholder || 'Select Date',
+                    showToday: properties.showToday,
+                    size: properties.size,
+                    suffixIcon: properties.suffixIcon && /*#__PURE__*/ React.createElement(Icon, {
+                        blockId: `${blockId}_suffixIcon`,
+                        events: events,
+                        properties: properties.suffixIcon || 'AiOutlineCalendar'
                     }),
-                    children: [
-                        /*#__PURE__*/ _jsx("div", {
-                            id: `${blockId}_popup`
-                        }),
-                        /*#__PURE__*/ _jsx(DatePicker, {
-                            id: `${blockId}_input`,
-                            allowClear: properties.allowClear !== false,
-                            autoFocus: properties.autoFocus,
-                            bordered: properties.bordered,
-                            className: methods.makeCssClass([
-                                {
-                                    width: '100%'
-                                },
-                                properties.inputStyle
-                            ]),
-                            disabled: properties.disabled,
-                            format: properties.format || 'YYYY-MM-DD',
-                            getPopupContainer: ()=>document.getElementById(`${blockId}_popup`)
-                            ,
-                            placeholder: properties.placeholder || 'Select Date',
-                            showToday: properties.showToday,
-                            size: properties.size,
-                            suffixIcon: properties.suffixIcon && /*#__PURE__*/ _jsx(Icon, {
-                                blockId: `${blockId}_suffixIcon`,
-                                events: events,
-                                properties: properties.suffixIcon || 'CalendarOutlined'
-                            }),
-                            disabledDate: disabledDate(properties.disabledDates),
-                            onChange: (newVal)=>{
-                                methods.setValue(!newVal ? null : moment.utc(newVal.add(newVal.utcOffset(), 'minutes')).startOf('day').toDate());
-                                methods.triggerEvent({
-                                    name: 'onChange'
-                                });
-                            },
-                            value: type.isDate(value) ? moment.utc(value).startOf('day') : null
-                        })
-                    ]
-                })
+                    disabledDate: disabledDate(properties.disabledDates),
+                    onChange: (newVal)=>{
+                        methods.setValue(!newVal ? null : moment.utc(newVal.add(newVal.utcOffset(), 'minutes')).startOf('day').toDate());
+                        methods.triggerEvent({
+                            name: 'onChange'
+                        });
+                    },
+                    value: type.isDate(value) ? moment.utc(value).startOf('day') : null
+                }))
         }
     }));
 };
 DateSelector.defaultProps = blockDefaultProps;
+DateSelector.meta = {
+    valueType: 'date',
+    category: 'input',
+    icons: [
+        ...Label.meta.icons,
+        'AiOutlineCalendar'
+    ],
+    styles: [
+        'blocks/DateSelector/style.less'
+    ]
+};
 export default DateSelector;

package/dist/blocks/DateSelector/schema.json

@@ -158,8 +158,8 @@
       },
       "suffixIcon": {
         "type": ["string", "object"],
-        "default": "CalendarOutlined",
-        "description": "Name of an Ant Design Icon or properties of an Icon block to customize icon on right-hand side of the date picker.",
+        "default": "AiOutlineCalendar",
+        "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 icon on right-hand side of the date picker.",
         "docs": {
           "displayType": "icon"
         }

package/dist/blocks/DateSelector/style.less

@@ -1,5 +1,5 @@
 /*
-  Copyright 2020-2021 Lowdefy, Inc
+  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.

package/dist/blocks/DateTimeSelector/DateTimeSelector.js

@@ -1,6 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /*
-  Copyright 2020-2021 Lowdefy, Inc
+  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.
@@ -20,9 +19,9 @@ import { type } from '@lowdefy/helpers';
 import { blockDefaultProps } from '@lowdefy/block-utils';
 import Label from '../Label/Label.js';
 import disabledDate from '../../disabledDate.js';
-const DateTimeSelector = ({ blockId , events , loading , components: { Icon  } , methods , properties , required , validation , value ,  })=>{
+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';
-    return(/*#__PURE__*/ _jsx(Label, {
+    return(/*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
         components: {
             Icon
@@ -35,59 +34,65 @@ const DateTimeSelector = ({ blockId , events , loading , components: { Icon  } ,
         },
         validation: validation,
         required: required,
-        loading: loading,
         content: {
-            content: ()=>/*#__PURE__*/ _jsxs("div", {
+            content: ()=>/*#__PURE__*/ React.createElement("div", {
                     className: methods.makeCssClass({
                         width: '100%'
+                    })
+                }, /*#__PURE__*/ React.createElement("div", {
+                    id: `${blockId}_popup`
+                }), /*#__PURE__*/ React.createElement(DatePicker, {
+                    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 HH:mm',
+                    getPopupContainer: ()=>document.getElementById(`${blockId}_popup`)
+                    ,
+                    placeholder: properties.placeholder || 'Select Date & Time',
+                    showNow: properties.showNow,
+                    showToday: properties.showToday,
+                    size: properties.size,
+                    suffixIcon: properties.suffixIcon && /*#__PURE__*/ React.createElement(Icon, {
+                        blockId: `${blockId}_suffixIcon`,
+                        events: events,
+                        properties: properties.suffixIcon || 'AiOutlineCalendar'
                     }),
-                    children: [
-                        /*#__PURE__*/ _jsx("div", {
-                            id: `${blockId}_popup`
-                        }),
-                        /*#__PURE__*/ _jsx(DatePicker, {
-                            id: `${blockId}_input`,
-                            allowClear: properties.allowClear !== false,
-                            autoFocus: properties.autoFocus,
-                            bordered: properties.bordered,
-                            className: methods.makeCssClass([
-                                {
-                                    width: '100%'
-                                },
-                                properties.inputStyle
-                            ]),
-                            disabled: properties.disabled,
-                            disabledDate: disabledDate(properties.disabledDates),
-                            format: properties.format || 'YYYY-MM-DD HH:mm',
-                            getPopupContainer: ()=>document.getElementById(`${blockId}_popup`)
-                            ,
-                            placeholder: properties.placeholder || 'Select Date & Time',
-                            showNow: properties.showNow,
-                            showToday: properties.showToday,
-                            size: properties.size,
-                            suffixIcon: properties.suffixIcon && /*#__PURE__*/ _jsx(Icon, {
-                                blockId: `${blockId}_suffixIcon`,
-                                events: events,
-                                properties: properties.suffixIcon || 'CalendarOutlined'
-                            }),
-                            showTime: {
-                                format: properties.timeFormat || 'HH:mm',
-                                hourStep: properties.hourStep || 1,
-                                minuteStep: properties.minuteStep || 5,
-                                secondStep: properties.secondStep || 30
-                            },
-                            onChange: (newVal)=>{
-                                methods.setValue(!newVal ? null : moment.utc(newVal.add(properties.selectUTC ? newVal.utcOffset() : 0, 'minutes')).startOf(timeUnit).toDate());
-                                methods.triggerEvent({
-                                    name: 'onChange'
-                                });
-                            },
-                            value: !type.isDate(value) ? null : properties.selectUTC ? moment.utc(value) : moment(value)
-                        })
-                    ]
-                })
+                    showTime: {
+                        format: properties.timeFormat || 'HH:mm',
+                        hourStep: properties.hourStep || 1,
+                        minuteStep: properties.minuteStep || 5,
+                        secondStep: properties.secondStep || 30
+                    },
+                    onChange: (newVal)=>{
+                        methods.setValue(!newVal ? null : moment.utc(newVal.add(properties.selectUTC ? newVal.utcOffset() : 0, 'minutes')).startOf(timeUnit).toDate());
+                        methods.triggerEvent({
+                            name: 'onChange'
+                        });
+                    },
+                    value: !type.isDate(value) ? null : properties.selectUTC ? moment.utc(value) : moment(value)
+                }))
         }
     }));
 };
 DateTimeSelector.defaultProps = blockDefaultProps;
+DateTimeSelector.meta = {
+    valueType: 'date',
+    category: 'input',
+    icons: [
+        ...Label.meta.icons,
+        'AiOutlineCalendar'
+    ],
+    styles: [
+        'blocks/DateTimeSelector/style.less'
+    ]
+};
 export default DateTimeSelector;

package/dist/blocks/DateTimeSelector/schema.json

@@ -185,8 +185,8 @@
       },
       "suffixIcon": {
         "type": ["string", "object"],
-        "default": "CalendarOutlined",
-        "description": "Name of an Ant Design Icon or properties of an Icon block to customize icon on right-hand side of the date picker.",
+        "default": "AiOutlineCalendar",
+        "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 icon on right-hand side of the date picker.",
         "docs": {
           "displayType": "icon"
         }

package/dist/blocks/DateTimeSelector/style.less

@@ -1,5 +1,5 @@
 /*
-  Copyright 2020-2021 Lowdefy, Inc
+  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.