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

package/dist/blocks/RatingSlider/RatingSlider.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.
@@ -21,15 +20,13 @@ import classNames from 'classnames';
 import CheckboxSelector from '../CheckboxSelector/CheckboxSelector.js';
 import Label from '../Label/Label.js';
 const includeMarks = (minMax, minMin, step = 1)=>{
-    const marks = {
-    };
+    const marks = {};
     marks[minMin] = {
         style: {
             marginTop: 2,
             fontSize: 12
         },
-        label: /*#__PURE__*/ _jsx("span", {
-        })
+        label: /*#__PURE__*/ React.createElement("span", null)
     };
     // round to fix floating point error
     for(let k = minMax[0]; k <= minMax[1]; k = parseFloat((k + step).toPrecision(8))){
@@ -38,9 +35,7 @@ const includeMarks = (minMax, minMin, step = 1)=>{
                 marginTop: 2,
                 fontSize: 12
             },
-            label: /*#__PURE__*/ _jsx("strong", {
-                children: k
-            })
+            label: /*#__PURE__*/ React.createElement("strong", null, k)
         };
     }
     return marks;
@@ -92,14 +87,13 @@ const RatingSlider = ({ blockId , components: { Icon , Link  } , events , loadin
     // round to fix floating point error
     const minMin = parseFloat((minMax[0] - (properties.step || 1)).toPrecision(8));
     const validationColor = validation.status === 'error' ? '#ff4d4f' : validation.status === 'warning' ? '#faad14' : null;
-    return(/*#__PURE__*/ _jsx(Label, {
+    return(/*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
         components: {
             Icon,
             Link
         },
         events: events,
-        loading: loading,
         methods: methods,
         properties: {
             title: properties.title,
@@ -109,133 +103,140 @@ const RatingSlider = ({ blockId , components: { Icon , Link  } , events , loadin
         required: required,
         validation: validation,
         content: {
-            content: ()=>/*#__PURE__*/ _jsxs("div", {
+            content: ()=>/*#__PURE__*/ React.createElement("div", {
                     className: methods.makeCssClass([
                         styles.content,
                         {
                             paddingRight: validation.status && 30
                         }, 
-                    ]),
-                    children: [
-                        !required && !properties.disableNotApplicable && /*#__PURE__*/ _jsx(CheckboxSelector, {
-                            blockId: `${blockId}_checkbox_selector`,
-                            components: {
-                                Icon,
-                                Link
+                    ])
+                }, !required && !properties.disableNotApplicable && /*#__PURE__*/ React.createElement(CheckboxSelector, {
+                    blockId: `${blockId}_checkbox_selector`,
+                    components: {
+                        Icon,
+                        Link
+                    },
+                    properties: mergeObjects([
+                        {
+                            label: {
+                                disabled: true
                             },
-                            properties: mergeObjects([
+                            options: [
                                 {
-                                    label: {
-                                        disabled: true
-                                    },
-                                    options: [
-                                        {
-                                            value: true,
-                                            label: properties.notApplicableLabel || 'N/A'
-                                        }
-                                    ],
-                                    color: properties.color
-                                },
-                                properties.CheckboxInput,
-                                {
-                                    style: styles.checkbox
-                                }, 
-                            ]),
-                            methods: {
-                                ...methods,
-                                setValue: (val)=>{
-                                    if (val[0] === true) {
-                                        unCheck(true);
-                                        methods.setValue(properties.notApplicableLabel || 'N/A');
-                                    } else {
-                                        unCheck(false);
-                                    }
+                                    value: true,
+                                    label: properties.notApplicableLabel || 'N/A'
                                 }
+                            ],
+                            color: properties.color,
+                            disabled: properties.disabled || loading
+                        },
+                        properties.CheckboxInput,
+                        {
+                            style: styles.checkbox
+                        }, 
+                    ]),
+                    methods: {
+                        ...methods,
+                        setValue: (val)=>{
+                            if (val[0] === true) {
+                                unCheck(true);
+                                methods.setValue(properties.notApplicableLabel || 'N/A');
+                            } else {
+                                unCheck(false);
+                            }
+                        }
+                    },
+                    value: [
+                        check
+                    ]
+                }), !properties.disableIcons && /*#__PURE__*/ React.createElement(Icon, {
+                    blockId: `${blockId}_iconMin`,
+                    events: events,
+                    properties: mergeObjects([
+                        {
+                            name: 'AiOutlineFrown',
+                            style: styles.iconLeft,
+                            color: properties.color
+                        },
+                        propertiesIconMin, 
+                    ])
+                }), /*#__PURE__*/ React.createElement(Slider, {
+                    id: `${blockId}_input`,
+                    components: {
+                        Icon,
+                        Link
+                    },
+                    events: events,
+                    className: classNames(methods.makeCssClass([
+                        properties.color && {
+                            '& > div.ant-slider-track': {
+                                backgroundColor: `${properties.color} !important`
                             },
-                            value: [
-                                check
-                            ]
-                        }),
-                        !properties.disableIcons && /*#__PURE__*/ _jsx(Icon, {
-                            blockId: `${blockId}_iconMin`,
-                            events: events,
-                            properties: mergeObjects([
-                                {
-                                    name: 'FrownOutlined',
-                                    style: styles.iconLeft,
-                                    color: properties.color
-                                },
-                                propertiesIconMin, 
-                            ])
-                        }),
-                        /*#__PURE__*/ _jsx(Slider, {
-                            id: `${blockId}_input`,
-                            components: {
-                                Icon,
-                                Link
-                            },
-                            events: events,
-                            className: classNames(methods.makeCssClass([
-                                properties.color && {
-                                    '& > div.ant-slider-track': {
-                                        backgroundColor: `${properties.color} !important`
-                                    },
-                                    '& > div.ant-slider-handle': {
-                                        borderColor: `${properties.color} !important`
-                                    },
-                                    '& > div.ant-slider-step > span.ant-slider-dot-active': {
-                                        borderColor: `${properties.color} !important`
-                                    }
-                                },
-                                validationColor && {
-                                    '& > div.ant-slider-rail': {
-                                        backgroundColor: `${validationColor} !important`
-                                    }
-                                }, 
-                            ]), methods.makeCssClass(styles.slider), methods.makeCssClass(properties.inputStyle)),
-                            autoFocus: properties.autoFocus,
-                            disabled: properties.disabled || check === true && !properties.disableNotApplicable,
-                            dots: get(properties, 'showDots', {
-                                default: true
-                            }),
-                            tooltipVisible: value === null || properties.tooltipVisible === 'never' ? false : properties.tooltipVisible === 'always' ? true : undefined,
-                            tipFormatter: (val)=>`${val}`
-                            ,
-                            marks: properties.marks || (get(properties, 'showMarks', {
-                                default: true
-                            }) ? includeMarks(minMax, minMin, properties.step || 1) : undefined),
-                            min: minMin,
-                            max: minMax[1],
-                            range: false,
-                            step: properties.step || 1,
-                            onChange: (val)=>{
-                                if (val === minMin) {
-                                    methods.setValue(null);
-                                } else {
-                                    methods.setValue(val);
-                                }
-                                methods.triggerEvent({
-                                    name: 'onChange'
-                                });
+                            '& > div.ant-slider-handle': {
+                                borderColor: `${properties.color} !important`
                             },
-                            value: value === null ? minMin : value
-                        }),
-                        !properties.disableIcons && /*#__PURE__*/ _jsx(Icon, {
-                            blockId: `${blockId}_iconMax`,
-                            events: events,
-                            properties: mergeObjects([
-                                {
-                                    name: 'SmileOutlined',
-                                    style: styles.iconRight,
-                                    color: properties.color
-                                },
-                                propertiesIconMax, 
-                            ])
-                        })
-                    ]
-                })
+                            '& > div.ant-slider-step > span.ant-slider-dot-active': {
+                                borderColor: `${properties.color} !important`
+                            }
+                        },
+                        validationColor && {
+                            '& > div.ant-slider-rail': {
+                                backgroundColor: `${validationColor} !important`
+                            }
+                        }, 
+                    ]), methods.makeCssClass(styles.slider), methods.makeCssClass(properties.inputStyle)),
+                    autoFocus: properties.autoFocus,
+                    disabled: properties.disabled || check === true && !properties.disableNotApplicable || loading,
+                    dots: get(properties, 'showDots', {
+                        default: true
+                    }),
+                    tooltipVisible: value === null || properties.tooltipVisible === 'never' ? false : properties.tooltipVisible === 'always' ? true : undefined,
+                    tipFormatter: (val)=>`${val}`
+                    ,
+                    marks: properties.marks || (get(properties, 'showMarks', {
+                        default: true
+                    }) ? includeMarks(minMax, minMin, properties.step || 1) : undefined),
+                    min: minMin,
+                    max: minMax[1],
+                    range: false,
+                    step: properties.step || 1,
+                    onChange: (val)=>{
+                        if (val === minMin) {
+                            methods.setValue(null);
+                        } else {
+                            methods.setValue(val);
+                        }
+                        methods.triggerEvent({
+                            name: 'onChange'
+                        });
+                    },
+                    value: value === null ? minMin : value
+                }), !properties.disableIcons && /*#__PURE__*/ React.createElement(Icon, {
+                    blockId: `${blockId}_iconMax`,
+                    events: events,
+                    properties: mergeObjects([
+                        {
+                            name: 'AiOutlineSmile',
+                            style: styles.iconRight,
+                            color: properties.color
+                        },
+                        propertiesIconMax, 
+                    ])
+                }))
         }
     }));
 };
 RatingSlider.defaultProps = blockDefaultProps;
+RatingSlider.meta = {
+    valueType: 'any',
+    category: 'input',
+    icons: [
+        ...Label.meta.icons,
+        'AiOutlineFrown',
+        'AiOutlineSmile'
+    ],
+    styles: [
+        'blocks/RatingSlider/style.less'
+    ]
+};
 export default RatingSlider;

package/dist/blocks/RatingSlider/schema.json

@@ -33,16 +33,16 @@
       },
       "minIcon": {
         "type": ["string", "object"],
-        "default": "FrownOutlined",
-        "description": "Name of an Ant Design Icon or properties of an Icon block to customize the icon to the left of the minimum side of the slider.",
+        "default": "AiOutlineFrown",
+        "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 the icon to the left of the minimum side of the slider.",
         "docs": {
           "displayType": "icon"
         }
       },
       "maxIcon": {
         "type": ["string", "object"],
-        "default": "SmileOutlined",
-        "description": "Name of an Ant Design Icon or properties of an Icon block to customize the icon to the right of the maximum side of the slider.",
+        "default": "AiOutlineSmile",
+        "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 the icon to the right of the maximum side of the slider.",
         "docs": {
           "displayType": "icon"
         }

package/dist/blocks/RatingSlider/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/Result/Result.js

@@ -1,6 +1,5 @@
-import { jsx as _jsx } 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.
@@ -16,7 +15,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 */ import React from 'react';
 import { Result } from 'antd';
 import { blockDefaultProps, renderHtml } from '@lowdefy/block-utils';
-const ResultBlock = ({ blockId , components: { Icon  } , events , content , methods , properties  })=>/*#__PURE__*/ _jsx(Result, {
+const ResultBlock = ({ blockId , components: { Icon  } , events , content , methods , properties  })=>/*#__PURE__*/ React.createElement(Result, {
         id: blockId,
         title: renderHtml({
             html: properties.title,
@@ -27,18 +26,24 @@ const ResultBlock = ({ blockId , components: { Icon  } , events , content , meth
             methods
         }),
         status: properties.status,
-        icon: properties.icon && /*#__PURE__*/ _jsx(Icon, {
+        icon: properties.icon && /*#__PURE__*/ React.createElement(Icon, {
             blockId: `${blockId}_icon`,
             events: events,
             properties: properties.icon
         }),
         extra: content.extra && content.extra({
             justifyContent: 'center'
-        }),
-        children: content.content && content.content({
-            justifyContent: 'center'
         })
-    })
+    }, content.content && content.content({
+        justifyContent: 'center'
+    }))
 ;
 ResultBlock.defaultProps = blockDefaultProps;
+ResultBlock.meta = {
+    category: 'container',
+    icons: [],
+    styles: [
+        'blocks/Result/style.less'
+    ]
+};
 export default ResultBlock;

package/dist/blocks/Result/schema.json

@@ -6,7 +6,7 @@
     "properties": {
       "icon": {
         "type": ["string", "object"],
-        "description": "Name of an Ant Design Icon or properties of an Icon block to customize icon to use as result image.",
+        "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 to use as result image.",
         "docs": {
           "displayType": "icon"
         }

package/dist/blocks/Result/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/Selector/Selector.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.
@@ -24,7 +23,7 @@ const Option = Select.Option;
 const Selector = ({ blockId , components: { Icon , Link  } , events , loading , methods , properties , required , validation , value: value1 ,  })=>{
     const [fetchState, setFetch] = useState(false);
     const uniqueValueOptions = getUniqueValues(properties.options || []);
-    return(/*#__PURE__*/ _jsx(Label, {
+    return(/*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
         components: {
             Icon,
@@ -38,100 +37,106 @@ const Selector = ({ blockId , components: { Icon , Link  } , 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(Select, {
+                    id: `${blockId}_input`,
+                    bordered: properties.bordered,
+                    className: methods.makeCssClass([
+                        {
+                            width: '100%'
+                        },
+                        properties.inputStyle
+                    ]),
+                    mode: "single",
+                    autoFocus: properties.autoFocus,
+                    getPopupContainer: ()=>document.getElementById(`${blockId}_popup`)
+                    ,
+                    disabled: properties.disabled || loading,
+                    placeholder: get(properties, 'placeholder', {
+                        default: 'Select item'
                     }),
-                    children: [
-                        /*#__PURE__*/ _jsx("div", {
-                            id: `${blockId}_popup`
-                        }),
-                        /*#__PURE__*/ _jsx(Select, {
-                            id: `${blockId}_input`,
-                            bordered: properties.bordered,
-                            className: methods.makeCssClass([
-                                {
-                                    width: '100%'
-                                },
-                                properties.inputStyle
-                            ]),
-                            mode: "single",
-                            autoFocus: properties.autoFocus,
-                            getPopupContainer: ()=>document.getElementById(`${blockId}_popup`)
-                            ,
-                            disabled: properties.disabled,
-                            placeholder: get(properties, 'placeholder', {
-                                default: 'Select item'
-                            }),
-                            suffixIcon: properties.suffixIcon && /*#__PURE__*/ _jsx(Icon, {
-                                blockId: `${blockId}_suffixIcon`,
-                                events: events,
-                                properties: properties.suffixIcon
-                            }),
-                            clearIcon: properties.clearIcon && /*#__PURE__*/ _jsx(Icon, {
-                                blockId: `${blockId}_clearIcon`,
-                                events: events,
-                                properties: properties.clearIcon
-                            }),
-                            showArrow: properties.showArrow,
-                            allowClear: properties.allowClear !== false,
-                            showSearch: get(properties, 'showSearch', {
-                                default: true
-                            }),
-                            size: properties.size,
-                            filterOption: (input, option)=>(option.filterstring || option.children.props.html || '').toLowerCase().indexOf(input.toLowerCase()) >= 0
-                            ,
-                            notFoundContent: fetchState ? 'Loading' : 'Not found',
-                            onChange: (newVal)=>{
-                                methods.setValue(type.isPrimitive(uniqueValueOptions[newVal]) ? uniqueValueOptions[newVal] : uniqueValueOptions[newVal].value);
-                                methods.triggerEvent({
-                                    name: 'onChange'
-                                });
-                            },
-                            onSearch: async (value)=>{
-                                setFetch(true);
-                                await methods.triggerEvent({
-                                    name: 'onSearch',
-                                    event: {
-                                        value
-                                    }
-                                });
-                                setFetch(false);
-                            },
-                            value: getValueIndex(value1, uniqueValueOptions),
-                            children: uniqueValueOptions.map((opt, i)=>type.isPrimitive(opt) ? /*#__PURE__*/ _jsx(Option, {
-                                    className: methods.makeCssClass(properties.optionsStyle),
-                                    id: `${blockId}_${i}`,
-                                    value: `${i}`,
-                                    children: renderHtml({
-                                        html: `${opt}`,
-                                        methods
-                                    })
-                                }, i) : /*#__PURE__*/ _jsx(Option, {
-                                    className: methods.makeCssClass([
-                                        properties.optionsStyle,
-                                        opt.style
-                                    ]),
-                                    disabled: opt.disabled,
-                                    filterstring: opt.filterString,
-                                    id: `${blockId}_${i}`,
-                                    value: `${i}`,
-                                    children: type.isNone(opt.label) ? renderHtml({
-                                        html: `${opt.value}`,
-                                        methods
-                                    }) : renderHtml({
-                                        html: opt.label,
-                                        methods
-                                    })
-                                }, i)
-                            )
-                        })
-                    ]
-                })
+                    suffixIcon: properties.suffixIcon && /*#__PURE__*/ React.createElement(Icon, {
+                        blockId: `${blockId}_suffixIcon`,
+                        events: events,
+                        properties: properties.suffixIcon
+                    }),
+                    clearIcon: properties.clearIcon && /*#__PURE__*/ React.createElement(Icon, {
+                        blockId: `${blockId}_clearIcon`,
+                        events: events,
+                        properties: properties.clearIcon
+                    }),
+                    showArrow: properties.showArrow,
+                    allowClear: properties.allowClear !== false,
+                    showSearch: get(properties, 'showSearch', {
+                        default: true
+                    }),
+                    size: properties.size,
+                    filterOption: (input, option)=>(option.filterstring || option.children.props.html || '').toLowerCase().indexOf(input.toLowerCase()) >= 0
+                    ,
+                    notFoundContent: fetchState ? 'Loading' : 'Not found',
+                    onChange: (newVal)=>{
+                        methods.setValue(type.isPrimitive(uniqueValueOptions[newVal]) ? uniqueValueOptions[newVal] : uniqueValueOptions[newVal].value);
+                        methods.triggerEvent({
+                            name: 'onChange'
+                        });
+                    },
+                    onSearch: async (value)=>{
+                        setFetch(true);
+                        const result = await methods.triggerEvent({
+                            name: 'onSearch',
+                            event: {
+                                value
+                            }
+                        });
+                        if (!result.bounced) {
+                            setFetch(false);
+                        }
+                    },
+                    value: getValueIndex(value1, uniqueValueOptions)
+                }, uniqueValueOptions.map((opt, i)=>type.isPrimitive(opt) ? /*#__PURE__*/ React.createElement(Option, {
+                        className: methods.makeCssClass(properties.optionsStyle),
+                        id: `${blockId}_${i}`,
+                        key: i,
+                        value: `${i}`
+                    }, renderHtml({
+                        html: `${opt}`,
+                        methods
+                    })) : /*#__PURE__*/ React.createElement(Option, {
+                        className: methods.makeCssClass([
+                            properties.optionsStyle,
+                            opt.style
+                        ]),
+                        disabled: opt.disabled,
+                        filterstring: opt.filterString,
+                        id: `${blockId}_${i}`,
+                        key: i,
+                        value: `${i}`
+                    }, type.isNone(opt.label) ? renderHtml({
+                        html: `${opt.value}`,
+                        methods
+                    }) : renderHtml({
+                        html: opt.label,
+                        methods
+                    }))
+                )))
         }
     }));
 };
 Selector.defaultProps = blockDefaultProps;
+Selector.meta = {
+    valueType: 'any',
+    category: 'input',
+    icons: [
+        ...Label.meta.icons
+    ],
+    styles: [
+        'blocks/Selector/style.less'
+    ]
+};
 export default Selector;

package/dist/blocks/Selector/schema.json

@@ -21,8 +21,8 @@
       },
       "clearIcon": {
         "type": ["string", "object"],
-        "default": "CloseCircleOutlined",
-        "description": "Name of an Ant Design Icon or properties of an Icon block to customize icon at far right position of the selector, shown when user is given option to clear input.",
+        "default": "AiOutlineCloseCircle",
+        "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 at far right position of the selector, shown when user is given option to clear input.",
         "docs": {
           "displayType": "icon"
         }
@@ -207,8 +207,8 @@
       },
       "suffixIcon": {
         "type": ["string", "object"],
-        "default": "DownOutlined",
-        "description": "Name of an Ant Design Icon or properties of an Icon block to customize icon at the drop-down position of the selector.",
+        "default": "AiOutlineDown",
+        "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 at the drop-down position of the selector.",
         "docs": {
           "displayType": "icon"
         }

package/dist/blocks/Selector/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.