@lowdefy/blocks-antd 4.7.3 → 5.1.0

package/dist/blocks/RadioSelector/RadioSelector.js

@@ -13,17 +13,59 @@
   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 { ConfigProvider, Radio, Space } from 'antd';
+import { renderHtml, withBlockDefaults } 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';
+import withTheme from '../withTheme.js';
 const RadioGroup = Radio.Group;
-const RadioSelector = ({ blockId, components, events, loading, properties, required, validation, value, methods })=>{
+const RadioSelector = ({ blockId, classNames = {}, components, events, loading, properties, required, styles = {}, validation, value, methods })=>{
     const uniqueValueOptions = getUniqueValues(properties.options || []);
+    const radioGroup = /*#__PURE__*/ React.createElement(RadioGroup, {
+        id: `${blockId}_input`,
+        className: classNames.element,
+        disabled: properties.disabled || loading,
+        style: styles.element,
+        onChange: (event)=>{
+            const val = type.isPrimitive(uniqueValueOptions[event.target.value]) ? uniqueValueOptions[event.target.value] : uniqueValueOptions[event.target.value].value;
+            methods.setValue(val);
+            methods.triggerEvent({
+                name: 'onChange',
+                event: {
+                    value: val
+                }
+            });
+        },
+        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,
+            style: opt.style
+        }, type.isNone(opt.label) ? renderHtml({
+            html: `${opt.value}`,
+            methods
+        }) : renderHtml({
+            html: opt.label,
+            methods
+        })))));
     return /*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
+        classNames: classNames,
         components: components,
         events: events,
         properties: {
@@ -33,68 +75,18 @@ const RadioSelector = ({ blockId, components, events, loading, properties, requi
         },
         validation: validation,
         required: required,
+        styles: styles,
         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)=>{
-                        const val = type.isPrimitive(uniqueValueOptions[event.target.value]) ? uniqueValueOptions[event.target.value] : uniqueValueOptions[event.target.value].value;
-                        methods.setValue(val);
-                        methods.triggerEvent({
-                            name: 'onChange',
-                            event: {
-                                value: val
+            content: ()=>properties.color ? /*#__PURE__*/ React.createElement(ConfigProvider, {
+                    theme: {
+                        components: {
+                            Radio: {
+                                colorPrimary: properties.color
                             }
-                        });
-                    },
-                    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
-                    })))))
+                        }
+                    }
+                }, radioGroup) : radioGroup
         }
     });
 };
-RadioSelector.defaultProps = blockDefaultProps;
-RadioSelector.meta = {
-    valueType: 'any',
-    category: 'input',
-    icons: [
-        ...Label.meta.icons
-    ],
-    styles: [
-        'blocks/RadioSelector/style.less'
-    ]
-};
-export default RadioSelector;
+export default withTheme('Radio', withBlockDefaults(RadioSelector));

package/dist/blocks/RadioSelector/meta.js

@@ -0,0 +1,179 @@
+/*
+  Copyright 2020-2026 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 LabelMeta from '../Label/meta.js';
+import label from '../../schemas/label.js';
+import options from '../../schemas/options.js';
+import { disabled, inputTitle } from '../../schemas/inputProperties.js';
+export default {
+    category: 'input',
+    icons: [
+        ...LabelMeta.icons
+    ],
+    valueType: 'any',
+    cssKeys: {
+        element: 'The RadioSelector element.',
+        label: 'The RadioSelector label.',
+        extra: 'The RadioSelector extra content.',
+        feedback: 'The RadioSelector validation feedback.'
+    },
+    events: {
+        onChange: {
+            description: 'Trigger action when selection is changed.',
+            event: {
+                value: 'The selected value.'
+            }
+        }
+    },
+    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,
+            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'."
+            },
+            label,
+            options,
+            title: inputTitle,
+            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/radio#design-token'
+                },
+                properties: {
+                    radioSize: {
+                        type: 'number',
+                        default: 16,
+                        description: 'Size of the radio button circle.'
+                    },
+                    dotSize: {
+                        type: 'number',
+                        default: 6,
+                        description: 'Size of the inner dot indicator.'
+                    },
+                    dotColorDisabled: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.25)',
+                        description: 'Dot color when the radio is disabled.'
+                    },
+                    colorPrimary: {
+                        type: 'string',
+                        description: 'Primary color for the selected radio button.'
+                    },
+                    colorBorder: {
+                        type: 'string',
+                        description: 'Border color of the radio button circle.'
+                    },
+                    colorBgContainer: {
+                        type: 'string',
+                        description: 'Background color of the radio button circle.'
+                    },
+                    wrapperMarginInlineEnd: {
+                        type: 'number',
+                        default: 8,
+                        description: 'Right margin of the radio wrapper.'
+                    },
+                    radioColor: {
+                        type: 'string',
+                        default: '#fff',
+                        description: 'Color of the radio indicator dot when selected.'
+                    },
+                    radioBgColor: {
+                        type: 'string',
+                        description: 'Background color of the radio circle when selected.'
+                    },
+                    buttonBg: {
+                        type: 'string',
+                        default: '#ffffff',
+                        description: 'Background color for button-style radio.'
+                    },
+                    buttonCheckedBg: {
+                        type: 'string',
+                        default: '#ffffff',
+                        description: 'Background color for checked button-style radio.'
+                    },
+                    buttonColor: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.88)',
+                        description: 'Text color for button-style radio.'
+                    },
+                    buttonPaddingInline: {
+                        type: 'number',
+                        default: 15,
+                        description: 'Horizontal padding for button-style radio.'
+                    },
+                    buttonCheckedBgDisabled: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.15)',
+                        description: 'Background color for disabled checked button-style radio.'
+                    },
+                    buttonCheckedColorDisabled: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.25)',
+                        description: 'Text color for disabled checked button-style radio.'
+                    },
+                    buttonSolidCheckedColor: {
+                        type: 'string',
+                        default: '#fff',
+                        description: 'Text color for solid button-style radio when checked.'
+                    },
+                    buttonSolidCheckedBg: {
+                        type: 'string',
+                        description: 'Background color for solid button-style radio when checked.'
+                    },
+                    buttonSolidCheckedHoverBg: {
+                        type: 'string',
+                        description: 'Hover background for solid button-style radio when checked.'
+                    },
+                    buttonSolidCheckedActiveBg: {
+                        type: 'string',
+                        description: 'Active background for solid button-style radio when checked.'
+                    }
+                }
+            }
+        }
+    }
+};

package/dist/blocks/RatingSlider/RatingSlider.js

@@ -13,12 +13,12 @@
   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 { ConfigProvider, Slider } from 'antd';
+import { withBlockDefaults } from '@lowdefy/block-utils';
 import CheckboxSelector from '../CheckboxSelector/CheckboxSelector.js';
 import Label from '../Label/Label.js';
+import withTheme from '../withTheme.js';
 const includeMarks = (minMax, minMin, step = 1)=>{
     const marks = {};
     marks[minMin] = {
@@ -40,30 +40,7 @@ const includeMarks = (minMax, minMin, step = 1)=>{
     }
     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 RatingSlider = ({ blockId, classNames = {}, components: { Icon, Link }, events, loading, methods, properties, required, styles = {}, validation, value })=>{
     const [check, unCheck] = useState(false);
     let propertiesIconMin = serializer.copy(properties.minIcon);
     if (type.isString(propertiesIconMin)) {
@@ -85,9 +62,58 @@ const RatingSlider = ({ blockId, components: { Icon, Link }, events, loading, me
     ].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;
+    const validationColor = validation?.status === 'error' ? '#ff4d4f' : validation?.status === 'warning' ? '#faad14' : null;
+    const sliderTheme = {};
+    if (properties.color) {
+        sliderTheme.colorPrimary = properties.color;
+    }
+    if (validationColor) {
+        sliderTheme.railBg = validationColor;
+    }
+    const hasSliderTheme = Object.keys(sliderTheme).length > 0;
+    const slider = /*#__PURE__*/ React.createElement(Slider, {
+        id: `${blockId}_input`,
+        className: classNames.element,
+        components: {
+            Icon,
+            Link
+        },
+        events: events,
+        autoFocus: properties.autoFocus,
+        disabled: properties.disabled || check === true && !properties.disableNotApplicable || loading,
+        dots: get(properties, 'showDots', {
+            default: true
+        }),
+        tooltip: {
+            open: value === null || properties.tooltipVisible === 'never' ? false : properties.tooltipVisible === 'always' ? true : undefined,
+            formatter: (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,
+        style: {
+            flex: 'auto',
+            ...styles.element
+        },
+        onChange: (val)=>{
+            const v = val === minMin ? null : val;
+            methods.setValue(v);
+            methods.triggerEvent({
+                name: 'onChange',
+                event: {
+                    value: v
+                }
+            });
+        },
+        value: value === null ? minMin : value
+    });
     return /*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
+        classNames: classNames,
         components: {
             Icon,
             Link
@@ -100,15 +126,15 @@ const RatingSlider = ({ blockId, components: { Icon, Link }, events, loading, me
             ...properties.label
         },
         required: required,
+        styles: styles,
         validation: validation,
         content: {
             content: ()=>/*#__PURE__*/ React.createElement("div", {
-                    className: methods.makeCssClass([
-                        styles.content,
-                        {
-                            paddingRight: validation.status && 30
-                        }
-                    ])
+                    style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        paddingRight: validation?.status ? 30 : undefined
+                    }
                 }, !required && !properties.disableNotApplicable && /*#__PURE__*/ React.createElement(CheckboxSelector, {
                     blockId: `${blockId}_checkbox_selector`,
                     components: {
@@ -131,7 +157,10 @@ const RatingSlider = ({ blockId, components: { Icon, Link }, events, loading, me
                         },
                         properties.CheckboxInput,
                         {
-                            style: styles.checkbox
+                            style: {
+                                flex: '0 0 1',
+                                paddingTop: 6
+                            }
                         }
                     ]),
                     methods: {
@@ -150,91 +179,54 @@ const RatingSlider = ({ blockId, components: { Icon, Link }, events, loading, me
                     ]
                 }), !properties.disableIcons && /*#__PURE__*/ React.createElement(Icon, {
                     blockId: `${blockId}_iconMin`,
+                    classNames: {
+                        element: classNames.minIcon
+                    },
                     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`
-                            }
+                    ]),
+                    styles: {
+                        element: {
+                            flex: '0 0 1',
+                            fontSize: '20px',
+                            padding: '6px 6px 0 0',
+                            ...styles.minIcon
                         }
-                    ]), 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)=>{
-                        const v = val === minMin ? null : val;
-                        methods.setValue(v);
-                        methods.triggerEvent({
-                            name: 'onChange',
-                            event: {
-                                value: v
-                            }
-                        });
-                    },
-                    value: value === null ? minMin : value
-                }), !properties.disableIcons && /*#__PURE__*/ React.createElement(Icon, {
+                    }
+                }), hasSliderTheme ? /*#__PURE__*/ React.createElement(ConfigProvider, {
+                    theme: {
+                        components: {
+                            Slider: sliderTheme
+                        }
+                    }
+                }, slider) : slider, !properties.disableIcons && /*#__PURE__*/ React.createElement(Icon, {
                     blockId: `${blockId}_iconMax`,
+                    classNames: {
+                        element: classNames.maxIcon
+                    },
                     events: events,
                     properties: mergeObjects([
                         {
                             name: 'AiOutlineSmile',
-                            style: styles.iconRight,
                             color: properties.color
                         },
                         propertiesIconMax
-                    ])
+                    ]),
+                    styles: {
+                        element: {
+                            flex: '0 0 1',
+                            fontSize: '20px',
+                            padding: '6px 0 0 6px',
+                            ...styles.maxIcon
+                        }
+                    }
                 }))
         }
     });
 };
-RatingSlider.defaultProps = blockDefaultProps;
-RatingSlider.meta = {
-    valueType: 'any',
-    category: 'input',
-    icons: [
-        ...Label.meta.icons,
-        'AiOutlineFrown',
-        'AiOutlineSmile'
-    ],
-    styles: [
-        'blocks/RatingSlider/style.less'
-    ]
-};
-export default RatingSlider;
+export default withTheme('Slider', withBlockDefaults(RatingSlider));