@lowdefy/blocks-antd 4.7.3 → 5.1.0

package/dist/blocks/MultipleSelector/{schema.js → meta.js}

@@ -12,14 +12,48 @@
   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.
-*/ export default {
-    type: 'object',
+*/ import LabelMeta from '../Label/meta.js';
+import label from '../../schemas/label.js';
+import icon from '../../schemas/icon.js';
+import { disabled, autoFocus, variant, bordered, allowClear, sizeSmallDefaultLarge } from '../../schemas/inputProperties.js';
+export default {
+    category: 'input',
+    icons: [
+        ...LabelMeta.icons,
+        'AiOutlineCheck',
+        'AiOutlineCloseCircle',
+        'AiOutlineDown'
+    ],
+    valueType: 'array',
+    cssKeys: {
+        element: 'The MultipleSelector element.',
+        selector: 'The inner tag/value container of the MultipleSelector (antd `content` semantic slot). Use for capping the tag area height and enabling internal scroll.',
+        clearIcon: 'The clear icon in the MultipleSelector.',
+        label: 'The MultipleSelector label.',
+        extra: 'The MultipleSelector extra content.',
+        feedback: 'The MultipleSelector validation feedback.',
+        options: 'The MultipleSelector options.',
+        selectedIcon: 'The selected item icon in the MultipleSelector.',
+        suffixIcon: 'The suffix icon in the MultipleSelector.'
+    },
+    events: {
+        onChange: 'Trigger actions when selection is changed.',
+        onBlur: 'Trigger action event occurs when selector loses focus.',
+        onFocus: 'Trigger action when selector gets focus.',
+        onClear: 'Trigger action when selector gets cleared.',
+        onSearch: {
+            description: 'Trigger actions when input is changed.',
+            event: {
+                value: 'The search input value.'
+            }
+        }
+    },
     properties: {
         type: 'object',
         additionalProperties: false,
         properties: {
             allowClear: {
-                type: 'boolean',
+                ...allowClear,
                 default: true,
                 description: 'Allow the user to clear the selected value, sets the value to null.'
             },
@@ -28,108 +62,18 @@
                 default: true,
                 description: 'Whether the current search will be cleared on selecting an item.'
             },
-            autoFocus: {
-                type: 'boolean',
-                default: false,
-                description: 'Autofocus to the block on page load.'
-            },
+            autoFocus,
             bordered: {
-                type: 'boolean',
-                default: true,
-                description: 'Whether or not the selector has a border style.'
+                ...bordered,
+                description: 'Whether or not the selector has a border style. Deprecated, use variant instead.'
             },
             clearIcon: {
-                type: [
-                    'string',
-                    'object'
-                ],
+                ...icon,
                 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'
-                }
-            },
-            disabled: {
-                type: 'boolean',
-                default: false,
-                description: 'Disable the block if true.'
-            },
-            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'
-                }
-            },
-            label: {
-                type: 'object',
-                description: 'Label properties.',
-                additionalProperties: false,
-                properties: {
-                    align: {
-                        type: 'string',
-                        enum: [
-                            'left',
-                            'right'
-                        ],
-                        default: 'left',
-                        description: 'Align label left or right when inline.'
-                    },
-                    colon: {
-                        type: 'boolean',
-                        default: true,
-                        description: 'Append label with colon.'
-                    },
-                    extra: {
-                        type: 'string',
-                        description: 'Extra text to display beneath the content - supports html.'
-                    },
-                    title: {
-                        type: 'string',
-                        description: 'Label title - supports html.'
-                    },
-                    span: {
-                        type: 'number',
-                        description: 'Label inline span.'
-                    },
-                    disabled: {
-                        type: 'boolean',
-                        default: false,
-                        description: 'Hide input label.'
-                    },
-                    hasFeedback: {
-                        type: 'boolean',
-                        default: true,
-                        description: 'Display feedback extra from validation, this does not disable validation.'
-                    },
-                    inline: {
-                        type: 'boolean',
-                        default: false,
-                        description: 'Render input and label inline.'
-                    },
-                    extraStyle: {
-                        type: 'object',
-                        description: 'Css style to applied to label extra.',
-                        docs: {
-                            displayType: 'yaml'
-                        }
-                    },
-                    feedbackStyle: {
-                        type: 'object',
-                        description: 'Css style to applied to label feedback.',
-                        docs: {
-                            displayType: 'yaml'
-                        }
-                    }
-                }
+                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."
             },
+            disabled,
+            label,
             options: {
                 default: [],
                 oneOf: [
@@ -257,75 +201,158 @@
                 description: 'Placeholder text to show when list of options are empty.'
             },
             selectedIcon: {
-                type: [
-                    'string',
-                    'object'
-                ],
+                ...icon,
                 default: 'AiOutlineCheck',
-                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 showing when a selection is made in the drop-down list.",
-                docs: {
-                    displayType: 'icon'
-                }
+                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 showing when a selection is made in the drop-down list."
             },
             showArrow: {
                 type: 'boolean',
                 default: true,
                 description: 'Show the suffix icon at the drop-down position of the selector.'
             },
-            size: {
-                type: 'string',
-                enum: [
-                    'small',
-                    'default',
-                    'large'
-                ],
-                default: 'default',
-                description: 'Size of the block.'
-            },
+            size: sizeSmallDefaultLarge,
             suffixIcon: {
-                type: [
-                    'string',
-                    'object'
-                ],
+                ...icon,
                 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 at the drop-down position of the selector.",
-                docs: {
-                    displayType: 'icon'
-                }
+                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 at the drop-down position of the selector."
             },
             title: {
                 type: 'string',
                 description: 'Multiple selector label title - supports html.'
             },
+            variant,
             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.'
-            }
-        }
-    },
-    events: {
-        type: 'object',
-        additionalProperties: false,
-        properties: {
-            onChange: {
-                type: 'array',
-                description: 'Trigger actions when selection is changed.'
             },
-            onBlur: {
-                type: 'array',
-                description: 'Trigger action event occurs when selector loses focus.'
-            },
-            onFocus: {
-                type: 'array',
-                description: 'Trigger action when selector gets focus.'
-            },
-            onClear: {
-                type: 'array',
-                description: 'Trigger action when selector gets cleared.'
-            },
-            onSearch: {
-                type: 'array',
-                description: "Trigger actions when input is changed. 'value' is passed to the _event operator to be used in actions such as search queries."
+            theme: {
+                type: 'object',
+                description: 'Antd design token overrides for this block. See <a href="https://ant.design/components/overview#design-token">antd design tokens</a>.',
+                docs: {
+                    displayType: 'yaml',
+                    link: 'https://ant.design/components/select#design-token'
+                },
+                properties: {
+                    clearBg: {
+                        type: 'string',
+                        default: '#ffffff',
+                        description: 'Background color of the clear button.'
+                    },
+                    hoverBorderColor: {
+                        type: 'string',
+                        default: '#4096ff',
+                        description: 'Border color when the selector is hovered.'
+                    },
+                    activeBorderColor: {
+                        type: 'string',
+                        default: '#1677ff',
+                        description: 'Border color when the selector is focused/active.'
+                    },
+                    activeOutlineColor: {
+                        type: 'string',
+                        default: 'rgba(5, 145, 255, 0.1)',
+                        description: 'Outline color when the selector is focused/active.'
+                    },
+                    selectorBg: {
+                        type: 'string',
+                        default: '#ffffff',
+                        description: 'Background color of the selector.'
+                    },
+                    multipleItemBg: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.06)',
+                        description: 'Background color for selected items in multiple mode.'
+                    },
+                    multipleItemBorderColor: {
+                        type: 'string',
+                        default: 'transparent',
+                        description: 'Border color for selected items in multiple mode.'
+                    },
+                    multipleItemHeight: {
+                        type: 'number',
+                        default: 24,
+                        description: 'Height of selected items in multiple mode.'
+                    },
+                    multipleItemHeightSM: {
+                        type: 'number',
+                        default: 16,
+                        description: 'Height of selected items in small multiple mode.'
+                    },
+                    multipleItemHeightLG: {
+                        type: 'number',
+                        default: 32,
+                        description: 'Height of selected items in large multiple mode.'
+                    },
+                    multipleSelectorBgDisabled: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.04)',
+                        description: 'Background color of the selector when disabled in multiple mode.'
+                    },
+                    multipleItemColorDisabled: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.25)',
+                        description: 'Text color of selected items when disabled in multiple mode.'
+                    },
+                    multipleItemBorderColorDisabled: {
+                        type: 'string',
+                        default: 'transparent',
+                        description: 'Border color of selected items when disabled in multiple mode.'
+                    },
+                    optionSelectedBg: {
+                        type: 'string',
+                        default: '#e6f4ff',
+                        description: 'Background color of the selected option in the dropdown.'
+                    },
+                    optionSelectedColor: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.88)',
+                        description: 'Text color of the selected option in the dropdown.'
+                    },
+                    optionSelectedFontWeight: {
+                        type: 'number',
+                        default: 600,
+                        description: 'Font weight of the selected option in the dropdown.'
+                    },
+                    optionActiveBg: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.04)',
+                        description: 'Background color of the active/hovered option in the dropdown.'
+                    },
+                    optionFontSize: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Font size of options in the dropdown.'
+                    },
+                    optionHeight: {
+                        type: 'number',
+                        default: 32,
+                        description: 'Height of each option in the dropdown.'
+                    },
+                    optionLineHeight: {
+                        type: 'number',
+                        description: 'Line height of options in the dropdown.'
+                    },
+                    optionPadding: {
+                        type: 'string',
+                        default: '5px 12px',
+                        description: 'Padding inside each dropdown option.'
+                    },
+                    singleItemHeightLG: {
+                        type: 'number',
+                        default: 40,
+                        description: 'Height of the selector in large single mode.'
+                    },
+                    zIndexPopup: {
+                        type: 'number',
+                        default: 1050,
+                        description: 'Z-index of the dropdown popup.'
+                    },
+                    showArrowPaddingInlineEnd: {
+                        type: 'number',
+                        default: 18,
+                        description: 'Padding at the inline end when the arrow is shown.'
+                    }
+                }
             }
         }
     }

package/dist/blocks/Notification/Notification.js

@@ -13,24 +13,26 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React, { useEffect } from 'react';
-import { blockDefaultProps, renderHtml } from '@lowdefy/block-utils';
-import { notification } from 'antd';
+import { ErrorBoundary, renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
+import { App } from 'antd';
 import { type } from '@lowdefy/helpers';
 import Button from '../Button/Button.js';
-const NotificationBlock = ({ blockId, components: { Icon }, events, methods, properties })=>{
+const NotificationBlock = ({ blockId, classNames = {}, components: { Icon, ShortcutBadge, handleError }, events, methods, properties, styles = {} })=>{
+    const { notification } = App.useApp();
     useEffect(()=>{
         methods.registerMethod('open', (args = {})=>{
             notification[args.status || properties.status || 'success']({
                 id: `${blockId}_notification`,
                 bottom: properties.bottom,
-                className: methods.makeCssClass(properties.notificationStyle),
+                className: classNames.element,
+                style: styles.element,
                 description: renderHtml({
                     html: args.description || properties.description,
                     methods
                 }),
                 duration: type.isNone(args.duration) ? properties.duration : args.duration,
-                message: renderHtml({
-                    html: args.message || properties.message || blockId,
+                title: renderHtml({
+                    html: args.title || properties.title || blockId,
                     methods
                 }),
                 onClick: ()=>methods.triggerEvent({
@@ -41,24 +43,46 @@ const NotificationBlock = ({ blockId, components: { Icon }, events, methods, pro
                     }),
                 placement: properties.placement,
                 top: properties.top,
-                icon: properties.icon && /*#__PURE__*/ React.createElement(Icon, {
+                icon: properties.icon && /*#__PURE__*/ React.createElement(ErrorBoundary, {
+                    onError: handleError
+                }, /*#__PURE__*/ React.createElement(Icon, {
                     blockId: `${blockId}_icon`,
+                    classNames: {
+                        element: classNames.icon
+                    },
                     events: events,
-                    properties: properties.icon
-                }),
-                btn: properties.button && /*#__PURE__*/ React.createElement(Button, {
+                    properties: properties.icon,
+                    styles: {
+                        element: styles.icon
+                    }
+                })),
+                btn: properties.button && /*#__PURE__*/ React.createElement(ErrorBoundary, {
+                    onError: handleError
+                }, /*#__PURE__*/ React.createElement(Button, {
                     blockId: `${blockId}_button`,
+                    components: {
+                        Icon,
+                        ShortcutBadge
+                    },
                     events: events,
                     properties: properties.button,
                     onClick: ()=>methods.triggerEvent({
                             name: 'onClose'
                         })
-                }),
-                closeIcon: properties.closeIcon && /*#__PURE__*/ React.createElement(Icon, {
+                })),
+                closeIcon: properties.closeIcon && /*#__PURE__*/ React.createElement(ErrorBoundary, {
+                    onError: handleError
+                }, /*#__PURE__*/ React.createElement(Icon, {
                     blockId: `${blockId}_closeIcon`,
+                    classNames: {
+                        element: classNames.closeIcon
+                    },
                     events: events,
-                    properties: properties.closeIcon
-                })
+                    properties: properties.closeIcon,
+                    styles: {
+                        element: styles.closeIcon
+                    }
+                }))
             });
         });
     });
@@ -66,12 +90,4 @@ const NotificationBlock = ({ blockId, components: { Icon }, events, methods, pro
         id: blockId
     });
 };
-NotificationBlock.defaultProps = blockDefaultProps;
-NotificationBlock.meta = {
-    category: 'display',
-    icons: [],
-    styles: [
-        'blocks/Notification/style.less'
-    ]
-};
-export default NotificationBlock;
+export default withBlockDefaults(NotificationBlock);

package/dist/blocks/Notification/{schema.js → meta.js}

@@ -13,7 +13,18 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ export default {
-    type: 'object',
+    category: 'display',
+    icons: [],
+    valueType: null,
+    cssKeys: {
+        element: 'The Notification element.',
+        closeIcon: 'The close icon in the Notification.',
+        icon: 'The icon in the Notification.'
+    },
+    events: {
+        onClose: 'Trigger actions when notification is closed.',
+        onClick: 'Trigger actions when notification is clicked.'
+    },
     properties: {
         type: 'object',
         additionalProperties: false,
@@ -59,17 +70,10 @@
                     displayType: 'icon'
                 }
             },
-            message: {
+            title: {
                 type: 'string',
                 description: 'The title of notification box - supports html.'
             },
-            notificationStyle: {
-                type: 'object',
-                description: 'Css style to applied to notification.',
-                docs: {
-                    displayType: 'yaml'
-                }
-            },
             placement: {
                 type: 'string',
                 enum: [
@@ -95,20 +99,30 @@
                     'warning'
                 ],
                 description: 'Notification status type.'
-            }
-        }
-    },
-    events: {
-        type: 'object',
-        additionalProperties: false,
-        properties: {
-            onClose: {
-                type: 'array',
-                description: 'Trigger actions when notification is closed.'
             },
-            onClick: {
-                type: 'array',
-                description: 'Trigger actions when notification is clicked.'
+            theme: {
+                type: 'object',
+                description: 'Antd design token overrides for this block. See <a href="https://ant.design/components/overview#design-token">antd design tokens</a>.',
+                docs: {
+                    displayType: 'yaml',
+                    link: 'https://ant.design/components/notification#design-token'
+                },
+                properties: {
+                    zIndexPopup: {
+                        type: 'number',
+                        default: 1100,
+                        description: 'Z-index of the notification popup.'
+                    },
+                    width: {
+                        type: 'number',
+                        default: 384,
+                        description: 'Width of the notification box.'
+                    },
+                    progressBg: {
+                        type: 'string',
+                        description: 'Background gradient for the auto-close progress bar. Defaults to a gradient from colorPrimaryBorderHover to colorPrimary.'
+                    }
+                }
             }
         }
     }

package/dist/blocks/NumberInput/NumberInput.js

@@ -13,12 +13,14 @@
   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 { InputNumber } from 'antd';
+import { withBlockDefaults } from '@lowdefy/block-utils';
 import Label from '../Label/Label.js';
-const NumberInput = ({ blockId, events, components, loading, methods, properties, required, validation, value })=>{
+import withTheme from '../withTheme.js';
+const NumberInput = ({ blockId, classNames = {}, events, components, loading, methods, properties, required, styles = {}, validation, value })=>{
     return /*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
+        classNames: classNames,
         components: components,
         events: events,
         properties: {
@@ -27,19 +29,19 @@ const NumberInput = ({ blockId, events, components, loading, methods, properties
             ...properties.label
         },
         required: required,
+        styles: styles,
         validation: validation,
         content: {
             content: ()=>/*#__PURE__*/ React.createElement(InputNumber, {
                     id: `${blockId}_input`,
                     autoComplete: "off",
                     autoFocus: properties.autoFocus,
-                    bordered: properties.bordered,
-                    className: methods.makeCssClass([
-                        {
-                            width: '100%'
-                        },
-                        properties.inputStyle
-                    ]),
+                    variant: properties.bordered === false ? 'borderless' : properties.variant,
+                    className: classNames.element,
+                    style: {
+                        width: '100%',
+                        ...styles.element
+                    },
                     controls: properties.controls,
                     decimalSeparator: properties.decimalSeparator,
                     disabled: properties.disabled || loading,
@@ -82,15 +84,4 @@ const NumberInput = ({ blockId, events, components, loading, methods, properties
         }
     });
 };
-NumberInput.defaultProps = blockDefaultProps;
-NumberInput.meta = {
-    valueType: 'number',
-    category: 'input',
-    icons: [
-        ...Label.meta.icons
-    ],
-    styles: [
-        'blocks/NumberInput/style.less'
-    ]
-};
-export default NumberInput;
+export default withTheme('InputNumber', withBlockDefaults(NumberInput));