@lowdefy/blocks-antd 4.0.0-alpha.29 → 4.0.0-alpha.30

package/dist/blocks/Sider/Sider.js

@@ -0,0 +1,85 @@
+/*
+  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.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import React, { useState, useEffect } from 'react';
+import { blockDefaultProps } from '@lowdefy/block-utils';
+import { get } from '@lowdefy/helpers';
+import { Layout } from 'antd';
+const Sider = Layout.Sider;
+const triggerSetOpen = async ({ state , setOpen , methods , rename  })=>{
+    if (!state) {
+        await methods.triggerEvent({
+            name: get(rename, 'events.onClose', {
+                default: 'onClose'
+            })
+        });
+    }
+    if (state) {
+        await methods.triggerEvent({
+            name: get(rename, 'events.onOpen', {
+                default: 'onOpen'
+            })
+        });
+    }
+    setOpen(state);
+};
+const SiderBlock = ({ blockId , properties , content , methods , rename  })=>{
+    const [openState, setOpen] = useState(!properties.initialCollapsed);
+    useEffect(()=>{
+        methods.registerMethod(get(rename, 'methods.toggleOpen', {
+            default: 'toggleOpen'
+        }), async ()=>await triggerSetOpen({
+                state: !openState,
+                setOpen,
+                methods,
+                rename
+            }));
+        methods.registerMethod(get(rename, 'methods.setOpen', {
+            default: 'setOpen'
+        }), async ({ open  })=>await triggerSetOpen({
+                state: !!open,
+                setOpen,
+                methods,
+                rename
+            }));
+    });
+    return /*#__PURE__*/ React.createElement(Sider, {
+        id: blockId,
+        className: `${methods.makeCssClass([
+            {
+                overflow: 'auto'
+            },
+            properties.style
+        ])} hide-on-print`,
+        breakpoint: properties.breakpoint,
+        collapsed: !openState,
+        collapsedWidth: properties.collapsedWidth,
+        collapsible: properties.collapsible,
+        reverseArrow: properties.reverseArrow,
+        theme: properties.theme,
+        width: properties.width,
+        onBreakpoint: ()=>methods.triggerEvent({
+                name: 'onBreakpoint'
+            })
+    }, content.content && content.content());
+};
+SiderBlock.defaultProps = blockDefaultProps;
+SiderBlock.meta = {
+    category: 'container',
+    icons: [],
+    styles: [
+        'blocks/Sider/style.less'
+    ]
+};
+export default SiderBlock;

package/dist/blocks/Sider/schema.json

@@ -0,0 +1,71 @@
+{
+  "type": "object",
+  "properties": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "breakpoint": {
+        "type": "string",
+        "enum": ["xs", "sm", "md", "lg", "xl", "xxl"],
+        "default": "sm",
+        "description": "Breakpoint of the responsive layout"
+      },
+      "collapsedWidth": {
+        "type": "integer",
+        "description": "Width of the collapsed sidebar, by setting to 0 a special trigger will appear"
+      },
+      "collapsible": {
+        "type": "boolean",
+        "description": "Whether can be collapsed"
+      },
+      "initialCollapsed": {
+        "type": "boolean",
+        "default": true,
+        "description": "Set the initial collapsed state"
+      },
+      "reverseArrow": {
+        "type": "boolean",
+        "default": false,
+        "description": "Direction of arrow, for a sider that expands from the right"
+      },
+      "theme": {
+        "type": "string",
+        "enum": ["light", "dark"],
+        "default": "light",
+        "description": "Color theme of the sidebar"
+      },
+      "style": {
+        "type": "object",
+        "description": "Css style object to apply to sider.",
+        "docs": {
+          "displayType": "style"
+        }
+      },
+      "width": {
+        "type": ["string", "number"],
+        "description": "width of the sidebar",
+        "docs": {
+          "displayType": "string"
+        }
+      }
+    }
+  },
+  "events": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "onClose": {
+        "type": "array",
+        "description": "Trigger actions when sider is closed."
+      },
+      "onOpen": {
+        "type": "array",
+        "description": "Trigger actions when sider is opened."
+      },
+      "onBreakpoint": {
+        "type": "array",
+        "description": "Trigger actions on breakpoint change."
+      }
+    }
+  }
+}

package/dist/blocks/Sider/style.less

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

package/dist/blocks/Statistic/Statistic.js

@@ -0,0 +1,51 @@
+/*
+  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.
+  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 { 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, {
+        className: methods.makeCssClass(properties.style),
+        decimalSeparator: properties.decimalSeparator,
+        groupSeparator: properties.groupSeparator,
+        id: blockId,
+        loading: properties.loading,
+        precision: properties.precision,
+        title: renderHtml({
+            html: properties.title,
+            methods
+        }),
+        value: type.isNone(properties.value) ? '' : properties.value,
+        valueStyle: methods.makeCssClass(properties.valueStyle, true),
+        prefix: properties.prefixIcon ? /*#__PURE__*/ React.createElement(Icon, {
+            blockId: `${blockId}_prefixIcon`,
+            events: events,
+            properties: properties.prefixIcon
+        }) : properties.prefix || '',
+        suffix: properties.suffixIcon ? /*#__PURE__*/ React.createElement(Icon, {
+            blockId: `${blockId}_suffixIcon`,
+            events: events,
+            properties: properties.suffixIcon
+        }) : properties.suffix || ''
+    });
+StatisticBlock.defaultProps = blockDefaultProps;
+StatisticBlock.meta = {
+    category: 'display',
+    icons: [],
+    styles: [
+        'blocks/Statistic/style.less'
+    ]
+};
+export default StatisticBlock;

package/dist/blocks/Statistic/schema.json

@@ -0,0 +1,74 @@
+{
+  "type": "object",
+  "properties": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "decimalSeparator": {
+        "type": "string",
+        "default": ".",
+        "description": "Decimal separator."
+      },
+      "groupSeparator": {
+        "type": "string",
+        "default": ",",
+        "description": "Group separator."
+      },
+      "loading": {
+        "type": "boolean",
+        "default": false,
+        "description": "Control the loading status of Statistic."
+      },
+      "precision": {
+        "type": "number",
+        "description": "Number of decimals to display."
+      },
+      "prefix": {
+        "type": "string",
+        "description": "Prefix text, priority over prefixIcon."
+      },
+      "prefixIcon": {
+        "type": ["string", "object"],
+        "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 which prefix the statistic.",
+        "docs": {
+          "displayType": "icon"
+        }
+      },
+      "suffix": {
+        "type": "string",
+        "description": "Suffix text, priority over suffixIcon."
+      },
+      "suffixIcon": {
+        "type": ["string", "object"],
+        "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 which suffix the statistic.",
+        "docs": {
+          "displayType": "icon"
+        }
+      },
+      "title": {
+        "type": "string",
+        "description": "Title to describe the component - supports html."
+      },
+      "value": {
+        "oneOf": [
+          {
+            "type": "number",
+            "description": "Value to display.",
+            "step": "0.01"
+          },
+          {
+            "type": "string",
+            "description": "Value to display."
+          }
+        ]
+      },
+      "valueStyle": {
+        "type": "object",
+        "description": "Css style to applied to value.",
+        "docs": {
+          "displayType": "yaml"
+        }
+      }
+    }
+  }
+}

package/dist/blocks/Statistic/style.less

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

package/dist/blocks/Switch/Switch.js

@@ -0,0 +1,101 @@
+/*
+  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.
+  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 { Switch } from 'antd';
+import { blockDefaultProps } from '@lowdefy/block-utils';
+import { type, serializer } from '@lowdefy/helpers';
+import Label from '../Label/Label.js';
+const SwitchBlock = ({ blockId , components: { Icon , Link  } , events , loading , methods , properties , required , validation , value ,  })=>{
+    let propertiesIconChecked = serializer.copy(properties.checkedIcon);
+    if (type.isString(propertiesIconChecked)) {
+        propertiesIconChecked = {
+            name: propertiesIconChecked
+        };
+    }
+    let propertiesIconUnchecked = serializer.copy(properties.uncheckedIcon);
+    if (type.isString(propertiesIconUnchecked)) {
+        propertiesIconUnchecked = {
+            name: propertiesIconUnchecked
+        };
+    }
+    return /*#__PURE__*/ React.createElement(Label, {
+        blockId: blockId,
+        components: {
+            Icon,
+            Link
+        },
+        events: events,
+        properties: {
+            title: properties.title,
+            size: properties.size,
+            ...properties.label
+        },
+        required: required,
+        validation: validation,
+        content: {
+            content: ()=>/*#__PURE__*/ React.createElement(Switch, {
+                    autoFocus: properties.autoFocus,
+                    checked: !!value,
+                    className: methods.makeCssClass([
+                        properties.color && {
+                            '&.ant-switch-checked': {
+                                backgroundColor: `${properties.color} !important`
+                            }
+                        },
+                        properties.inputStyle, 
+                    ]),
+                    disabled: properties.disabled || loading,
+                    id: `${blockId}_input`,
+                    size: properties.size,
+                    checkedChildren: properties.checkedText ? /*#__PURE__*/ React.createElement("span", null, properties.checkedText) : /*#__PURE__*/ React.createElement(Icon, {
+                        blockId: `${blockId}_checkedIcon`,
+                        events: events,
+                        properties: {
+                            name: 'AiOutlineCheck',
+                            ...propertiesIconChecked || {}
+                        }
+                    }),
+                    unCheckedChildren: properties.uncheckedText ? /*#__PURE__*/ React.createElement("span", null, properties.uncheckedText) : /*#__PURE__*/ React.createElement(Icon, {
+                        blockId: `${blockId}_uncheckedIcon`,
+                        events: events,
+                        properties: {
+                            name: 'AiOutlineClose',
+                            ...propertiesIconUnchecked || {}
+                        }
+                    }),
+                    onChange: (newVal)=>{
+                        methods.setValue(newVal);
+                        methods.triggerEvent({
+                            name: 'onChange'
+                        });
+                    }
+                })
+        }
+    });
+};
+SwitchBlock.defaultProps = blockDefaultProps;
+SwitchBlock.meta = {
+    valueType: 'boolean',
+    category: 'input',
+    icons: [
+        ...Label.meta.icons,
+        'AiOutlineCheck',
+        'AiOutlineClose'
+    ],
+    styles: [
+        'blocks/Switch/style.less'
+    ]
+};
+export default SwitchBlock;

package/dist/blocks/Switch/schema.json

@@ -0,0 +1,136 @@
+{
+  "type": "object",
+  "properties": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "autoFocus": {
+        "type": "boolean",
+        "default": false,
+        "description": "Autofocus to the block on page load."
+      },
+      "checkedIcon": {
+        "type": ["string", "object"],
+        "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 to shown when switch is checked (true).",
+        "docs": {
+          "displayType": "icon"
+        }
+      },
+      "checkedText": {
+        "type": "string",
+        "description": "Text to shown when switch is checked (true)."
+      },
+      "color": {
+        "type": "string",
+        "description": "Switch checked color.",
+        "docs": {
+          "displayType": "color"
+        }
+      },
+      "disabled": {
+        "type": "boolean",
+        "default": false,
+        "description": "Disable the block if true."
+      },
+      "inputStyle": {
+        "type": "object",
+        "description": "Css style to applied to input.",
+        "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"
+            }
+          }
+        }
+      },
+      "size": {
+        "type": "string",
+        "enum": ["small", "default"],
+        "default": "default",
+        "description": "Size of the block."
+      },
+      "title": {
+        "type": "string",
+        "description": "Title to describe the input component, if no title is specified the block id is displayed - supports html."
+      },
+      "uncheckedIcon": {
+        "type": ["string", "object"],
+        "default": "AiOutlineClose",
+        "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 shown when switch is unchecked (false).",
+        "docs": {
+          "displayType": "icon"
+        }
+      },
+      "uncheckedText": {
+        "type": "string",
+        "description": "Text to shown when switch is not checked (false)."
+      }
+    }
+  },
+  "events": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "onChange": {
+        "type": "array",
+        "description": "Trigger action when switch is changed."
+      }
+    }
+  }
+}

package/dist/blocks/Switch/style.less

@@ -0,0 +1,18 @@
+/*
+  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.
+  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/switch/style/index.less';
+@import '../Label/style.less';

package/dist/blocks/Tabs/Tabs.js

@@ -0,0 +1,108 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+/*
+  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.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import React from 'react';
+import { blockDefaultProps } from '@lowdefy/block-utils';
+import { Tabs } from 'antd';
+const getTabs = ({ content , properties  })=>{
+    let tabs = properties.tabs;
+    if (!tabs) {
+        tabs = Object.keys(content).sort().map((key)=>({
+                key,
+                title: key
+            }));
+    }
+    // remove extraAreaKey key area from tabs
+    return tabs.filter((tab)=>tab.key !== properties.extraAreaKey);
+};
+const getAdditionalProps = ({ content , properties  })=>{
+    const additionalProps = {};
+    if (properties.activeKey) {
+        additionalProps.activeKey = properties.activeKey;
+    }
+    if (properties.extraAreaKey) {
+        additionalProps.tabBarExtraContent = content[properties.extraAreaKey] && content[properties.extraAreaKey]();
+    }
+    return additionalProps;
+};
+const TabsBlock = ({ blockId , components: { Icon  } , events , content , methods , properties  })=>{
+    const tabs = getTabs({
+        content,
+        properties
+    });
+    const additionalProps = getAdditionalProps({
+        content,
+        properties
+    });
+    return /*#__PURE__*/ React.createElement(Tabs, _extends({
+        animated: properties.animated !== undefined ? properties.animated : true,
+        defaultActiveKey: properties.defaultActiveKey || tabs[0].key,
+        id: blockId,
+        onChange: (activeKey)=>methods.triggerEvent({
+                name: 'onChange',
+                event: {
+                    activeKey
+                }
+            }),
+        size: properties.size || 'default',
+        tabBarStyle: methods.makeCssClass(properties.tabBarStyle, true),
+        tabPosition: properties.tabPosition || 'top',
+        type: properties.tabType || 'line',
+        onTabScroll: ({ direction  })=>methods.triggerEvent({
+                name: 'onTabScroll',
+                event: {
+                    direction
+                }
+            }),
+        onTabClick: (key)=>methods.triggerEvent({
+                name: 'onTabClick',
+                event: {
+                    key
+                }
+            })
+    }, additionalProps), tabs.map((tab)=>/*#__PURE__*/ React.createElement(Tabs.TabPane, {
+            disabled: tab.disabled,
+            key: tab.key,
+            tab: /*#__PURE__*/ React.createElement("span", {
+                className: methods.makeCssClass(tab.titleStyle)
+            }, tab.icon && /*#__PURE__*/ React.createElement(Icon, {
+                blockId: `${blockId}_icon`,
+                events: events,
+                properties: tab.icon
+            }), tab.title || tab.key)
+        }, content[tab.key] && content[tab.key]())));
+};
+TabsBlock.defaultProps = blockDefaultProps;
+TabsBlock.meta = {
+    category: 'container',
+    icons: [],
+    styles: [
+        'blocks/Tabs/style.less'
+    ]
+};
+export default TabsBlock;