Browse Source

feat: 输入参数组件添加tooltip

pull/193/head
cp3hnu 10 months ago
parent
commit
de75e6041e
3 changed files with 47 additions and 3 deletions
  1. +1
    -1
      react-ui/src/components/ParameterInput/index.less
  2. +7
    -2
      react-ui/src/components/ParameterInput/index.tsx
  3. +39
    -0
      react-ui/src/stories/ParameterInput.stories.tsx

+ 1
- 1
react-ui/src/components/ParameterInput/index.less View File

@@ -22,7 +22,7 @@
border-radius: 4px; border-radius: 4px;


&__value { &__value {
.singleLine();
//.singleLine();
margin-right: 8px; margin-right: 8px;
font-size: @font-size-input; font-size: @font-size-input;
line-height: 1.5714285714285714; line-height: 1.5714285714285714;


+ 7
- 2
react-ui/src/components/ParameterInput/index.tsx View File

@@ -6,7 +6,7 @@


import { CommonTabKeys } from '@/enums'; import { CommonTabKeys } from '@/enums';
import { CloseOutlined } from '@ant-design/icons'; import { CloseOutlined } from '@ant-design/icons';
import { ConfigProvider, Form, Input } from 'antd';
import { ConfigProvider, Form, Input, Typography } from 'antd';
import { RuleObject } from 'antd/es/form'; import { RuleObject } from 'antd/es/form';
import classNames from 'classnames'; import classNames from 'classnames';
import './index.less'; import './index.less';
@@ -120,7 +120,12 @@ function ParameterInput({
> >
{valueObj?.showValue ? ( {valueObj?.showValue ? (
<div className="parameter-input__content"> <div className="parameter-input__content">
<span className="parameter-input__content__value">{valueObj?.showValue}</span>
<Typography.Text
className="parameter-input__content__value"
ellipsis={{ tooltip: valueObj.showValue }}
>
{valueObj.showValue}
</Typography.Text>
<CloseOutlined <CloseOutlined
className="parameter-input__content__close-icon" className="parameter-input__content__close-icon"
onClick={handleRemove} onClick={handleRemove}


+ 39
- 0
react-ui/src/stories/ParameterInput.stories.tsx View File

@@ -76,6 +76,45 @@ export const Select: Story = {
}, },
}; };


export const Ellipse: Story = {
args: {
placeholder: '请输入工作目录',
style: { width: 300 },
canInput: true,
size: 'large',
},
render: function Render(args) {
const [value, setValue] = useState<ParameterInputValue | undefined>('');

const onClick = () => {
const value = {
value: 'storybook',
showValue:
'storybookstorybookstorybookstorybookstorybookstorybookstorybookstorybookstorybookstorybook',
fromSelect: true,
otherValue: 'others',
};
setValue(value);
action('onChange')(value);
};
return (
<>
<ParameterInput
{...args}
value={value}
onChange={(value) => {
setValue(value);
action('onChange')(value);
}}
></ParameterInput>
<Button type="primary" style={{ display: 'block', marginTop: 10 }} onClick={onClick}>
模拟从全局参数选择
</Button>
</>
);
},
};

export const Disabled: Story = { export const Disabled: Story = {
args: { args: {
placeholder: '请输入工作目录', placeholder: '请输入工作目录',


Loading…
Cancel
Save