@lowdefy/blocks-antd 5.5.1 → 6.0.0

package/dist/blocks/RadioSelector/RadioSelector.js

@@ -13,7 +13,7 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React from 'react';
-import { ConfigProvider, Radio, Space } from 'antd';
+import { Col, ConfigProvider, Radio, Row, Space, theme } from 'antd';
 import { renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
 import { type } from '@lowdefy/helpers';
 import Label from '../Label/Label.js';
@@ -22,6 +22,7 @@ import useSelectorOptions from '../../useSelectorOptions.js';
 import withTheme from '../withTheme.js';
 const RadioGroup = Radio.Group;
 const RadioSelector = ({ blockId, classNames = {}, components, events, loading, properties, required, styles = {}, validation, value, methods })=>{
+    const { token } = theme.useToken();
     const uniqueValueOptions = useSelectorOptions({
         properties,
         methods
@@ -29,29 +30,17 @@ const RadioSelector = ({ blockId, classNames = {}, components, events, loading,
     const selectedIndex = getSelectedIndex(value, uniqueValueOptions, {
         properties
     });
-    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: `${getSelectedIndex(value, uniqueValueOptions, {
-            properties
-        })}`
-    }, /*#__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)=>{
+    const grid = !type.isNone(properties.columns);
+    // Col takes spans, not counts, so a breakpoint map of counts converts per key.
+    const colProps = type.isObject(properties.columns) ? Object.fromEntries(Object.entries(properties.columns).map(([breakpoint, columns])=>[
+            breakpoint,
+            {
+                span: 24 / columns
+            }
+        ])) : {
+        span: 24 / properties.columns
+    };
+    const renderOption = (opt, i)=>{
         if (type.isPrimitive(opt)) {
             return /*#__PURE__*/ React.createElement(Radio, {
                 id: `${blockId}_${opt}`,
@@ -91,7 +80,43 @@ const RadioSelector = ({ blockId, classNames = {}, components, events, loading,
                 }
             }
         }, radio);
-    })));
+    };
+    const radioGroup = /*#__PURE__*/ React.createElement(RadioGroup, {
+        id: `${blockId}_input`,
+        className: classNames.element,
+        disabled: properties.disabled || loading,
+        // Radio.Group is inline-block and shrink-wraps, so the Row inside it can
+        // only fill a group that has been given a width.
+        style: grid ? {
+            width: '100%',
+            ...styles.element
+        } : 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: `${getSelectedIndex(value, uniqueValueOptions, {
+            properties
+        })}`
+    }, grid ? /*#__PURE__*/ React.createElement(Row, {
+        gutter: type.isNone(properties.gutter) ? [
+            token.paddingXS,
+            0
+        ] : properties.gutter
+    }, uniqueValueOptions.map((opt, i)=>/*#__PURE__*/ React.createElement(Col, {
+            key: i,
+            ...colProps
+        }, renderOption(opt, i)))) : /*#__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(renderOption)));
     return /*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
         methods: methods,