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

package/dist/blocks/Progress/Progress.js

@@ -0,0 +1,42 @@
+/*
+  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 { Progress } from 'antd';
+import { blockDefaultProps } from '@lowdefy/block-utils';
+const ProgressBlock = ({ blockId , properties  })=>/*#__PURE__*/ React.createElement(Progress, {
+        gapDegree: properties.gapDegree,
+        gapPosition: properties.gapPosition,
+        id: blockId,
+        percent: properties.percent,
+        showInfo: properties.showInfo,
+        status: properties.status,
+        steps: properties.steps,
+        strokeColor: properties.strokeColor,
+        strokeLinecap: properties.strokeLinecap,
+        strokeWidth: properties.strokeWidth,
+        success: properties.success,
+        trailColor: properties.trailColor,
+        type: properties.type,
+        width: properties.width
+    });
+ProgressBlock.defaultProps = blockDefaultProps;
+ProgressBlock.meta = {
+    category: 'display',
+    icons: [],
+    styles: [
+        'blocks/Progress/style.less'
+    ]
+};
+export default ProgressBlock;

package/dist/blocks/Progress/schema.json

@@ -0,0 +1,76 @@
+{
+  "type": "object",
+  "properties": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "type": {
+        "type": "string",
+        "default": "line",
+        "enum": ["line", "circle", "dashboard"],
+        "description": "Set type of progress display."
+      },
+      "showInfo": {
+        "type": "boolean",
+        "default": true,
+        "description": "Whether to display the progress value and the status icon."
+      },
+      "percent": {
+        "type": "number",
+        "default": 0,
+        "description": "Set the completion percentage."
+      },
+      "status": {
+        "type": "string",
+        "enum": ["success", "exception", "normal", "active"],
+        "default": "normal",
+        "description": "Set the status of the Progress."
+      },
+      "strokeLinecap": {
+        "type": "string",
+        "default": "round",
+        "enum": ["round", "square"],
+        "description": "Set the style of the progress linecap."
+      },
+      "strokeColor": {
+        "type": ["string", "object"],
+        "description": "Color of progress bar.",
+        "docs": {
+          "displayType": "color"
+        }
+      },
+      "success": {
+        "type": "number",
+        "default": 0,
+        "description": "Segmented success percent."
+      },
+      "trailColor": {
+        "type": "string",
+        "description": "Color of unfilled part.",
+        "docs": {
+          "displayType": "color"
+        }
+      },
+      "strokeWidth": {
+        "type": "number",
+        "description": "Set the width of the progress bar."
+      },
+      "width": {
+        "type": "number",
+        "default": 132,
+        "description": "Set the canvas width of the circular progress."
+      },
+      "gapDegree": {
+        "type": "number",
+        "default": 75,
+        "description": "The gap degree of half circle."
+      },
+      "gapPosition": {
+        "type": "string",
+        "enum": ["top", "bottom", "left", "right"],
+        "default": "top",
+        "description": "The gap position."
+      }
+    }
+  }
+}

package/dist/blocks/Progress/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/progress/style/index.less';

package/dist/blocks/RadioSelector/RadioSelector.js

@@ -0,0 +1,96 @@
+/*
+  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 { Radio, Space } from 'antd';
+import { blockDefaultProps, renderHtml } from '@lowdefy/block-utils';
+import { type } from '@lowdefy/helpers';
+import Label from '../Label/Label.js';
+import getValueIndex from '../../getValueIndex.js';
+import getUniqueValues from '../../getUniqueValues.js';
+const RadioGroup = Radio.Group;
+const RadioSelector = ({ blockId , components , events , loading , properties , required , validation , value , methods ,  })=>{
+    const uniqueValueOptions = getUniqueValues(properties.options || []);
+    return /*#__PURE__*/ React.createElement(Label, {
+        blockId: blockId,
+        components: components,
+        events: events,
+        properties: {
+            title: properties.title,
+            size: properties.size,
+            ...properties.label
+        },
+        validation: validation,
+        required: required,
+        content: {
+            content: ()=>/*#__PURE__*/ React.createElement(RadioGroup, {
+                    id: `${blockId}_input`,
+                    className: methods.makeCssClass([
+                        properties.color && {
+                            '& > label > span.ant-radio-checked:not(.ant-radio-disabled) > span': {
+                                borderColor: `${properties.color} !important`,
+                                '&:after': {
+                                    backgroundColor: `${properties.color} !important`
+                                }
+                            }
+                        },
+                        properties.inputStyle, 
+                    ]),
+                    disabled: properties.disabled || loading,
+                    onChange: (event)=>{
+                        methods.setValue(type.isPrimitive(uniqueValueOptions[event.target.value]) ? uniqueValueOptions[event.target.value] : uniqueValueOptions[event.target.value].value);
+                        methods.triggerEvent({
+                            name: 'onChange'
+                        });
+                    },
+                    value: `${getValueIndex(value, uniqueValueOptions)}`
+                }, /*#__PURE__*/ React.createElement(Space, {
+                    direction: properties.direction,
+                    wrap: type.isNone(properties.wrap) ? true : properties.wrap,
+                    align: type.isNone(properties.align) ? 'start' : properties.align
+                }, uniqueValueOptions.map((opt, i)=>type.isPrimitive(opt) ? /*#__PURE__*/ React.createElement(Radio, {
+                        id: `${blockId}_${opt}`,
+                        key: i,
+                        value: i
+                    }, renderHtml({
+                        html: `${opt}`,
+                        methods
+                    })) : /*#__PURE__*/ React.createElement(Radio, {
+                        id: `${blockId}_${i}`,
+                        key: i,
+                        value: `${i}`,
+                        disabled: opt.disabled,
+                        className: methods.makeCssClass(opt.style)
+                    }, type.isNone(opt.label) ? renderHtml({
+                        html: `${opt.value}`,
+                        methods
+                    }) : renderHtml({
+                        html: opt.label,
+                        methods
+                    })))))
+        }
+    });
+};
+RadioSelector.defaultProps = blockDefaultProps;
+RadioSelector.meta = {
+    valueType: 'any',
+    category: 'input',
+    icons: [
+        ...Label.meta.icons
+    ],
+    styles: [
+        'blocks/RadioSelector/style.less'
+    ]
+};
+export default RadioSelector;

package/dist/blocks/RadioSelector/schema.json

@@ -0,0 +1,190 @@
+{
+  "type": "object",
+  "properties": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "align": {
+        "type": "string",
+        "enum": ["start", "end", "center", "baseline"],
+        "default": "start",
+        "description": "Align options."
+      },
+      "color": {
+        "type": "string",
+        "description": "Selected radio color.",
+        "docs": {
+          "displayType": "color"
+        }
+      },
+      "disabled": {
+        "type": "boolean",
+        "default": false,
+        "description": "Disable the block if true."
+      },
+      "direction": {
+        "type": "string",
+        "enum": ["horizontal", "vertical"],
+        "default": "horizontal",
+        "description": "List options horizontally or vertical."
+      },
+      "wrap": {
+        "type": "boolean",
+        "default": true,
+        "description": "Specifies wrapping of options. Applies when 'direction' is 'horizontal'."
+      },
+      "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"
+            }
+          }
+        }
+      },
+      "options": {
+        "default": [],
+        "oneOf": [
+          {
+            "type": "array",
+            "description": "Options can either be an array of primitive values, on an array of label, value pairs - supports html.",
+            "items": {
+              "type": "string"
+            }
+          },
+          {
+            "type": "array",
+            "description": "Options can either be an array of primitive values, on an array of label, value pairs.",
+            "items": {
+              "type": "number"
+            }
+          },
+          {
+            "type": "array",
+            "description": "Options can either be an array of primitive values, on an array of label, value pairs.",
+            "items": {
+              "type": "boolean"
+            }
+          },
+          {
+            "type": "array",
+            "description": "Options can either be an array of primitive values, on an array of label, value pairs.",
+            "items": {
+              "type": "object",
+              "required": ["value"],
+              "properties": {
+                "label": {
+                  "type": "string",
+                  "description": "Value label shown to user - supports html."
+                },
+                "value": {
+                  "description": "Value selected.",
+                  "oneOf": [
+                    {
+                      "type": "string"
+                    },
+                    {
+                      "type": "number"
+                    },
+                    {
+                      "type": "boolean"
+                    },
+                    {
+                      "type": "object"
+                    }
+                  ],
+                  "docs": {
+                    "displayType": "yaml"
+                  }
+                },
+                "disabled": {
+                  "type": "boolean",
+                  "default": false,
+                  "description": "Disable the option if true."
+                },
+                "style": {
+                  "type": "object",
+                  "description": "Css style to applied to option.",
+                  "docs": {
+                    "displayType": "yaml"
+                  }
+                }
+              }
+            }
+          }
+        ]
+      },
+      "title": {
+        "type": "string",
+        "description": "Title to describe the input component, if no title is specified the block id is displayed - supports html."
+      }
+    }
+  },
+  "events": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "onChange": {
+        "type": "array",
+        "description": "Trigger action when selection is changed."
+      }
+    }
+  }
+}

package/dist/blocks/RadioSelector/style.less

@@ -0,0 +1,19 @@
+/*
+  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/radio/style/index.less';
+@import 'antd/lib/space/style/index.less';
+@import '../Label/style.less';

package/dist/blocks/RatingSlider/RatingSlider.js

@@ -0,0 +1,240 @@
+/*
+  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 } from 'react';
+import { blockDefaultProps } from '@lowdefy/block-utils';
+import { get, mergeObjects, serializer, type } from '@lowdefy/helpers';
+import { Slider } from 'antd';
+import classNames from 'classnames';
+import CheckboxSelector from '../CheckboxSelector/CheckboxSelector.js';
+import Label from '../Label/Label.js';
+const includeMarks = (minMax, minMin, step = 1)=>{
+    const marks = {};
+    marks[minMin] = {
+        style: {
+            marginTop: 2,
+            fontSize: 12
+        },
+        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))){
+        marks[k] = {
+            style: {
+                marginTop: 2,
+                fontSize: 12
+            },
+            label: /*#__PURE__*/ React.createElement("strong", null, k)
+        };
+    }
+    return marks;
+};
+const styles = {
+    iconLeft: {
+        flex: '0 0 1',
+        fontSize: '20px',
+        padding: '6px 6px 0 0'
+    },
+    iconRight: {
+        flex: '0 0 1',
+        fontSize: '20px',
+        padding: '6px 0 0 6px'
+    },
+    checkbox: {
+        flex: '0 0 1',
+        paddingTop: 6
+    },
+    slider: {
+        flex: 'auto'
+    },
+    content: {
+        display: 'flex',
+        flexDirection: 'row'
+    }
+};
+const RatingSlider = ({ blockId , components: { Icon , Link  } , events , loading , methods , properties , required , validation , value ,  })=>{
+    const [check, unCheck] = useState(false);
+    let propertiesIconMin = serializer.copy(properties.minIcon);
+    if (type.isString(propertiesIconMin)) {
+        propertiesIconMin = {
+            name: propertiesIconMin
+        };
+    }
+    let propertiesIconMax = serializer.copy(properties.maxIcon);
+    if (type.isString(propertiesIconMax)) {
+        propertiesIconMax = {
+            name: propertiesIconMax
+        };
+    }
+    const minMax = [
+        get(properties, 'max', {
+            default: 10
+        }),
+        properties.min || 0
+    ].sort((a, b)=>a - b);
+    // 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__*/ React.createElement(Label, {
+        blockId: blockId,
+        components: {
+            Icon,
+            Link
+        },
+        events: events,
+        methods: methods,
+        properties: {
+            title: properties.title,
+            size: properties.size,
+            ...properties.label
+        },
+        required: required,
+        validation: validation,
+        content: {
+            content: ()=>/*#__PURE__*/ React.createElement("div", {
+                    className: methods.makeCssClass([
+                        styles.content,
+                        {
+                            paddingRight: validation.status && 30
+                        }, 
+                    ])
+                }, !required && !properties.disableNotApplicable && /*#__PURE__*/ React.createElement(CheckboxSelector, {
+                    blockId: `${blockId}_checkbox_selector`,
+                    components: {
+                        Icon,
+                        Link
+                    },
+                    properties: mergeObjects([
+                        {
+                            label: {
+                                disabled: true
+                            },
+                            options: [
+                                {
+                                    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`
+                            },
+                            '& > 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 || 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;