mirror of
https://gitee.com/nocobase/nocobase.git
synced 2025-05-05 13:39:24 +08:00
fix: incorrect variable input style (#6645)
* fix: textarea variable style issue * fix: variable input border radius not correct * fix: unit tests error
This commit is contained in:
gchust
GitHub
parent
9f8fb0e362
commit
b20c8b05bd
@ -398,105 +398,107 @@ export function Input(props: VariableInputProps) {
|
||||
const disabled = props.disabled || form.disabled;
|
||||
|
||||
return wrapSSR(
|
||||
<Space.Compact style={style} className={classNames(componentCls, hashId, className)}>
|
||||
{/* 确保所有ant input样式都已加载 */}
|
||||
<AntInput style={{ display: 'none' }} />
|
||||
{variable ? (
|
||||
<div
|
||||
className={cx(
|
||||
'variable',
|
||||
css`
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
|
||||
&:hover {
|
||||
.clear-button {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-input {
|
||||
overflow: auto;
|
||||
white-space: nowrap;
|
||||
${disabled ? '' : 'padding-right: 28px;'}
|
||||
|
||||
.ant-tag {
|
||||
display: inline;
|
||||
line-height: 19px;
|
||||
margin: 0;
|
||||
padding: 2px 7px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
`,
|
||||
)}
|
||||
>
|
||||
<>
|
||||
<Space.Compact style={style} className={classNames(componentCls, hashId, className)}>
|
||||
{variable ? (
|
||||
<div
|
||||
role="button"
|
||||
aria-label="variable-tag"
|
||||
style={{ overflow: 'hidden' }}
|
||||
className={cx('ant-input ant-input-outlined', { 'ant-input-disabled': disabled }, hashId)}
|
||||
className={cx(
|
||||
'variable',
|
||||
css`
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
|
||||
&:hover {
|
||||
.clear-button {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-input {
|
||||
overflow: auto;
|
||||
white-space: nowrap;
|
||||
${disabled ? '' : 'padding-right: 28px;'}
|
||||
|
||||
.ant-tag {
|
||||
display: inline;
|
||||
line-height: 19px;
|
||||
margin: 0;
|
||||
padding: 2px 7px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
`,
|
||||
)}
|
||||
>
|
||||
<Tag color="blue">
|
||||
{variableText.map((item, index) => {
|
||||
return (
|
||||
<React.Fragment key={item}>
|
||||
{index ? ' / ' : ''}
|
||||
{item}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</Tag>
|
||||
</div>
|
||||
{!disabled ? (
|
||||
<span
|
||||
<div
|
||||
role="button"
|
||||
aria-label="icon-close"
|
||||
className={cx('clear-button')}
|
||||
// eslint-disable-next-line react/no-unknown-property
|
||||
unselectable="on"
|
||||
onClick={onClearVariable}
|
||||
aria-label="variable-tag"
|
||||
style={{ overflow: 'hidden' }}
|
||||
className={cx('ant-input ant-input-outlined', { 'ant-input-disabled': disabled }, hashId)}
|
||||
>
|
||||
<CloseCircleFilled />
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ flex: 1 }}>
|
||||
{children && (isFieldValue || !nullable) ? (
|
||||
children
|
||||
) : ConstantComponent ? (
|
||||
<ConstantComponent
|
||||
role="button"
|
||||
aria-label="variable-constant"
|
||||
{...constantComponentProps}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
{hideVariableButton ? null : (
|
||||
<Cascader
|
||||
options={options}
|
||||
value={variable ?? cValue}
|
||||
onChange={onSwitch}
|
||||
loadData={loadData as any}
|
||||
changeOnSelect={changeOnSelect}
|
||||
fieldNames={fieldNames}
|
||||
disabled={disabled}
|
||||
>
|
||||
{button ?? (
|
||||
<XButton
|
||||
className={css(`
|
||||
<Tag color="blue">
|
||||
{variableText.map((item, index) => {
|
||||
return (
|
||||
<React.Fragment key={item}>
|
||||
{index ? ' / ' : ''}
|
||||
{item}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</Tag>
|
||||
</div>
|
||||
{!disabled ? (
|
||||
<span
|
||||
role="button"
|
||||
aria-label="icon-close"
|
||||
className={cx('clear-button')}
|
||||
// eslint-disable-next-line react/no-unknown-property
|
||||
unselectable="on"
|
||||
onClick={onClearVariable}
|
||||
>
|
||||
<CloseCircleFilled />
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ flex: 1 }}>
|
||||
{children && (isFieldValue || !nullable) ? (
|
||||
children
|
||||
) : ConstantComponent ? (
|
||||
<ConstantComponent
|
||||
role="button"
|
||||
aria-label="variable-constant"
|
||||
{...constantComponentProps}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
{hideVariableButton ? null : (
|
||||
<Cascader
|
||||
options={options}
|
||||
value={variable ?? cValue}
|
||||
onChange={onSwitch}
|
||||
loadData={loadData as any}
|
||||
changeOnSelect={changeOnSelect}
|
||||
fieldNames={fieldNames}
|
||||
disabled={disabled}
|
||||
>
|
||||
{button ?? (
|
||||
<XButton
|
||||
className={css(`
|
||||
margin-left: -1px;
|
||||
`)}
|
||||
type={variable ? 'primary' : 'default'}
|
||||
disabled={disabled}
|
||||
/>
|
||||
)}
|
||||
</Cascader>
|
||||
)}
|
||||
</Space.Compact>,
|
||||
type={variable ? 'primary' : 'default'}
|
||||
disabled={disabled}
|
||||
/>
|
||||
)}
|
||||
</Cascader>
|
||||
)}
|
||||
</Space.Compact>
|
||||
{/* 确保所有ant input样式都已加载, 放到Compact中会导致Compact中的Input样式不对 */}
|
||||
<AntInput style={{ display: 'none' }} />
|
||||
</>,
|
||||
);
|
||||
}
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
|
||||
import { css, cx } from '@emotion/css';
|
||||
import { useForm } from '@formily/react';
|
||||
import { Space, theme } from 'antd';
|
||||
import { Input as AntInput, Space, theme } from 'antd';
|
||||
import type { CascaderProps, DefaultOptionType } from 'antd/lib/cascader';
|
||||
import useInputStyle from 'antd/es/input/style';
|
||||
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
@ -422,95 +422,99 @@ export function TextArea(props: TextAreaProps) {
|
||||
);
|
||||
const disabled = props.disabled || form.disabled;
|
||||
return wrapSSR(
|
||||
<Space.Compact
|
||||
className={cx(
|
||||
componentCls,
|
||||
hashId,
|
||||
css`
|
||||
display: flex;
|
||||
.ant-input {
|
||||
flex-grow: 1;
|
||||
min-width: 200px;
|
||||
word-break: break-all;
|
||||
border-top-left-radius: ${addonBefore ? '0px' : '6px'};
|
||||
border-bottom-left-radius: ${addonBefore ? '0px' : '6px'};
|
||||
}
|
||||
.ant-input-disabled {
|
||||
.ant-tag {
|
||||
color: #bfbfbf;
|
||||
border-color: #d9d9d9;
|
||||
}
|
||||
}
|
||||
|
||||
> .x-button {
|
||||
height: min-content;
|
||||
}
|
||||
`,
|
||||
)}
|
||||
>
|
||||
{addonBefore && (
|
||||
<div
|
||||
className={css`
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
border: 1px solid rgb(217, 217, 217);
|
||||
padding: 0px 11px;
|
||||
border-radius: 6px 0px 0px 6px;
|
||||
border-right: 0px;
|
||||
`}
|
||||
>
|
||||
{addonBefore}
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
role="button"
|
||||
aria-label="textbox"
|
||||
onInput={onInput}
|
||||
onBlur={onBlur}
|
||||
onKeyDown={onKeyDown}
|
||||
onPaste={onPaste}
|
||||
onCompositionStart={onCompositionStart}
|
||||
onCompositionEnd={onCompositionEnd}
|
||||
// should use data-placeholder here, but not sure if it is safe to make the change, so add ignore here
|
||||
// @ts-ignore
|
||||
placeholder={props.placeholder}
|
||||
style={style}
|
||||
<>
|
||||
<Space.Compact
|
||||
className={cx(
|
||||
componentCls,
|
||||
hashId,
|
||||
'ant-input ant-input-outlined',
|
||||
{ 'ant-input-disabled': disabled },
|
||||
// NOTE: `pre-wrap` here for avoid the ` ` (\x160) issue when paste content, we need normal space (\x32).
|
||||
css`
|
||||
min-height: ${token.controlHeight}px;
|
||||
overflow: auto;
|
||||
white-space: pre-wrap;
|
||||
|
||||
&[placeholder]:empty::before {
|
||||
content: attr(placeholder);
|
||||
color: #ccc;
|
||||
display: flex;
|
||||
.ant-input {
|
||||
flex-grow: 1;
|
||||
min-width: 200px;
|
||||
word-break: break-all;
|
||||
border-top-left-radius: ${addonBefore ? '0px' : '6px'};
|
||||
border-bottom-left-radius: ${addonBefore ? '0px' : '6px'};
|
||||
}
|
||||
.ant-input-disabled {
|
||||
.ant-tag {
|
||||
color: #bfbfbf;
|
||||
border-color: #d9d9d9;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tag {
|
||||
display: inline;
|
||||
line-height: 19px;
|
||||
margin: 0 0.5em;
|
||||
padding: 2px 7px;
|
||||
border-radius: 10px;
|
||||
> .x-button {
|
||||
height: min-content;
|
||||
}
|
||||
`,
|
||||
)}
|
||||
ref={inputRef}
|
||||
contentEditable={!disabled}
|
||||
dangerouslySetInnerHTML={{ __html: html }}
|
||||
/>
|
||||
<VariableSelect
|
||||
options={options}
|
||||
setOptions={setOptions}
|
||||
onInsert={onInsert}
|
||||
changeOnSelect={changeOnSelect}
|
||||
fieldNames={fieldNames || defaultFieldNames}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</Space.Compact>,
|
||||
>
|
||||
{addonBefore && (
|
||||
<div
|
||||
className={css`
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
border: 1px solid rgb(217, 217, 217);
|
||||
padding: 0px 11px;
|
||||
border-radius: 6px 0px 0px 6px;
|
||||
border-right: 0px;
|
||||
`}
|
||||
>
|
||||
{addonBefore}
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
role="button"
|
||||
aria-label="textbox"
|
||||
onInput={onInput}
|
||||
onBlur={onBlur}
|
||||
onKeyDown={onKeyDown}
|
||||
onPaste={onPaste}
|
||||
onCompositionStart={onCompositionStart}
|
||||
onCompositionEnd={onCompositionEnd}
|
||||
// should use data-placeholder here, but not sure if it is safe to make the change, so add ignore here
|
||||
// @ts-ignore
|
||||
placeholder={props.placeholder}
|
||||
style={style}
|
||||
className={cx(
|
||||
hashId,
|
||||
'ant-input ant-input-outlined',
|
||||
{ 'ant-input-disabled': disabled },
|
||||
// NOTE: `pre-wrap` here for avoid the ` ` (\x160) issue when paste content, we need normal space (\x32).
|
||||
css`
|
||||
min-height: ${token.controlHeight}px;
|
||||
overflow: auto;
|
||||
white-space: pre-wrap;
|
||||
|
||||
&[placeholder]:empty::before {
|
||||
content: attr(placeholder);
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.ant-tag {
|
||||
display: inline;
|
||||
line-height: 19px;
|
||||
margin: 0 0.5em;
|
||||
padding: 2px 7px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
`,
|
||||
)}
|
||||
ref={inputRef}
|
||||
contentEditable={!disabled}
|
||||
dangerouslySetInnerHTML={{ __html: html }}
|
||||
/>
|
||||
<VariableSelect
|
||||
options={options}
|
||||
setOptions={setOptions}
|
||||
onInsert={onInsert}
|
||||
changeOnSelect={changeOnSelect}
|
||||
fieldNames={fieldNames || defaultFieldNames}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</Space.Compact>
|
||||
{/* 确保所有ant input样式都已加载, 放到Compact中会导致Compact中的Input样式不对 */}
|
||||
<AntInput style={{ display: 'none' }} />
|
||||
</>,
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user