From 0330e33704d8b0597d082fc198561779b1fa8579 Mon Sep 17 00:00:00 2001
From: Junyi <mytharcher@users.noreply.github.com>
Date: Sun, 24 Dec 2023 17:14:38 +0800
Subject: [PATCH] feat(plugin-workflow): add space control to RadioWithTooltip
 (#3252)

---
 .../client/components/RadioWithTooltip.tsx    | 42 ++++++++++---------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/packages/plugins/@nocobase/plugin-workflow/src/client/components/RadioWithTooltip.tsx b/packages/plugins/@nocobase/plugin-workflow/src/client/components/RadioWithTooltip.tsx
index cbce6ab64b..9663d13283 100644
--- a/packages/plugins/@nocobase/plugin-workflow/src/client/components/RadioWithTooltip.tsx
+++ b/packages/plugins/@nocobase/plugin-workflow/src/client/components/RadioWithTooltip.tsx
@@ -1,6 +1,6 @@
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import { css, useCompile } from '@nocobase/client';
-import { Radio, Tooltip } from 'antd';
+import { Radio, Space, Tooltip } from 'antd';
 import React from 'react';
 
 export interface RadioWithTooltipOption {
@@ -10,29 +10,31 @@ export interface RadioWithTooltipOption {
 }
 
 export function RadioWithTooltip(props) {
-  const { options = [], ...other } = props;
+  const { options = [], direction, ...other } = props;
   const compile = useCompile();
 
   return (
     <Radio.Group {...other}>
-      {options.map((option) => (
-        <Radio key={option.value} value={option.value}>
-          <span
-            className={css`
-              & + .anticon {
-                margin-left: 0.25em;
-              }
-            `}
-          >
-            {compile(option.label)}
-          </span>
-          {option.tooltip && (
-            <Tooltip title={compile(option.tooltip)}>
-              <QuestionCircleOutlined style={{ color: '#666' }} />
-            </Tooltip>
-          )}
-        </Radio>
-      ))}
+      <Space direction={direction}>
+        {options.map((option) => (
+          <Radio key={option.value} value={option.value}>
+            <span
+              className={css`
+                & + .anticon {
+                  margin-left: 0.25em;
+                }
+              `}
+            >
+              {compile(option.label)}
+            </span>
+            {option.tooltip && (
+              <Tooltip title={compile(option.tooltip)}>
+                <QuestionCircleOutlined style={{ color: '#666' }} />
+              </Tooltip>
+            )}
+          </Radio>
+        ))}
+      </Space>
     </Radio.Group>
   );
 }