ruiling/tachybase_todo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(plugin-workflow): add space control to RadioWithTooltip (#3252)

Browse Source
This commit is contained in:
Junyi 2023-12-24 17:14:38 +08:00 committed by GitHub
parent e4c97651bf
commit 0330e33704
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 22 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
packages/plugins/@nocobase/plugin-workflow/src/client/components/RadioWithTooltip.tsx
View File

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