mirror of
https://gitee.com/nocobase/nocobase.git
synced 2025-05-05 21:49:25 +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;
|
const disabled = props.disabled || form.disabled;
|
||||||
|
|
||||||
return wrapSSR(
|
return wrapSSR(
|
||||||
<Space.Compact style={style} className={classNames(componentCls, hashId, className)}>
|
<>
|
||||||
{/* 确保所有ant input样式都已加载 */}
|
<Space.Compact style={style} className={classNames(componentCls, hashId, className)}>
|
||||||
<AntInput style={{ display: 'none' }} />
|
{variable ? (
|
||||||
{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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
role="button"
|
className={cx(
|
||||||
aria-label="variable-tag"
|
'variable',
|
||||||
style={{ overflow: 'hidden' }}
|
css`
|
||||||
className={cx('ant-input ant-input-outlined', { 'ant-input-disabled': disabled }, hashId)}
|
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">
|
<div
|
||||||
{variableText.map((item, index) => {
|
|
||||||
return (
|
|
||||||
<React.Fragment key={item}>
|
|
||||||
{index ? ' / ' : ''}
|
|
||||||
{item}
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</Tag>
|
|
||||||
</div>
|
|
||||||
{!disabled ? (
|
|
||||||
<span
|
|
||||||
role="button"
|
role="button"
|
||||||
aria-label="icon-close"
|
aria-label="variable-tag"
|
||||||
className={cx('clear-button')}
|
style={{ overflow: 'hidden' }}
|
||||||
// eslint-disable-next-line react/no-unknown-property
|
className={cx('ant-input ant-input-outlined', { 'ant-input-disabled': disabled }, hashId)}
|
||||||
unselectable="on"
|
|
||||||
onClick={onClearVariable}
|
|
||||||
>
|
>
|
||||||
<CloseCircleFilled />
|
<Tag color="blue">
|
||||||
</span>
|
{variableText.map((item, index) => {
|
||||||
) : null}
|
return (
|
||||||
</div>
|
<React.Fragment key={item}>
|
||||||
) : (
|
{index ? ' / ' : ''}
|
||||||
<div style={{ flex: 1 }}>
|
{item}
|
||||||
{children && (isFieldValue || !nullable) ? (
|
</React.Fragment>
|
||||||
children
|
);
|
||||||
) : ConstantComponent ? (
|
})}
|
||||||
<ConstantComponent
|
</Tag>
|
||||||
role="button"
|
</div>
|
||||||
aria-label="variable-constant"
|
{!disabled ? (
|
||||||
{...constantComponentProps}
|
<span
|
||||||
value={value}
|
role="button"
|
||||||
onChange={onChange}
|
aria-label="icon-close"
|
||||||
/>
|
className={cx('clear-button')}
|
||||||
) : null}
|
// eslint-disable-next-line react/no-unknown-property
|
||||||
</div>
|
unselectable="on"
|
||||||
)}
|
onClick={onClearVariable}
|
||||||
{hideVariableButton ? null : (
|
>
|
||||||
<Cascader
|
<CloseCircleFilled />
|
||||||
options={options}
|
</span>
|
||||||
value={variable ?? cValue}
|
) : null}
|
||||||
onChange={onSwitch}
|
</div>
|
||||||
loadData={loadData as any}
|
) : (
|
||||||
changeOnSelect={changeOnSelect}
|
<div style={{ flex: 1 }}>
|
||||||
fieldNames={fieldNames}
|
{children && (isFieldValue || !nullable) ? (
|
||||||
disabled={disabled}
|
children
|
||||||
>
|
) : ConstantComponent ? (
|
||||||
{button ?? (
|
<ConstantComponent
|
||||||
<XButton
|
role="button"
|
||||||
className={css(`
|
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;
|
margin-left: -1px;
|
||||||
`)}
|
`)}
|
||||||
type={variable ? 'primary' : 'default'}
|
type={variable ? 'primary' : 'default'}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</Cascader>
|
</Cascader>
|
||||||
)}
|
)}
|
||||||
</Space.Compact>,
|
</Space.Compact>
|
||||||
|
{/* 确保所有ant input样式都已加载, 放到Compact中会导致Compact中的Input样式不对 */}
|
||||||
|
<AntInput style={{ display: 'none' }} />
|
||||||
|
</>,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -9,7 +9,7 @@
|
|||||||
|
|
||||||
import { css, cx } from '@emotion/css';
|
import { css, cx } from '@emotion/css';
|
||||||
import { useForm } from '@formily/react';
|
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 type { CascaderProps, DefaultOptionType } from 'antd/lib/cascader';
|
||||||
import useInputStyle from 'antd/es/input/style';
|
import useInputStyle from 'antd/es/input/style';
|
||||||
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||||
@ -422,95 +422,99 @@ export function TextArea(props: TextAreaProps) {
|
|||||||
);
|
);
|
||||||
const disabled = props.disabled || form.disabled;
|
const disabled = props.disabled || form.disabled;
|
||||||
return wrapSSR(
|
return wrapSSR(
|
||||||
<Space.Compact
|
<>
|
||||||
className={cx(
|
<Space.Compact
|
||||||
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}
|
|
||||||
className={cx(
|
className={cx(
|
||||||
|
componentCls,
|
||||||
hashId,
|
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`
|
css`
|
||||||
min-height: ${token.controlHeight}px;
|
display: flex;
|
||||||
overflow: auto;
|
.ant-input {
|
||||||
white-space: pre-wrap;
|
flex-grow: 1;
|
||||||
|
min-width: 200px;
|
||||||
&[placeholder]:empty::before {
|
word-break: break-all;
|
||||||
content: attr(placeholder);
|
border-top-left-radius: ${addonBefore ? '0px' : '6px'};
|
||||||
color: #ccc;
|
border-bottom-left-radius: ${addonBefore ? '0px' : '6px'};
|
||||||
|
}
|
||||||
|
.ant-input-disabled {
|
||||||
|
.ant-tag {
|
||||||
|
color: #bfbfbf;
|
||||||
|
border-color: #d9d9d9;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-tag {
|
> .x-button {
|
||||||
display: inline;
|
height: min-content;
|
||||||
line-height: 19px;
|
|
||||||
margin: 0 0.5em;
|
|
||||||
padding: 2px 7px;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
)}
|
)}
|
||||||
ref={inputRef}
|
>
|
||||||
contentEditable={!disabled}
|
{addonBefore && (
|
||||||
dangerouslySetInnerHTML={{ __html: html }}
|
<div
|
||||||
/>
|
className={css`
|
||||||
<VariableSelect
|
background: rgba(0, 0, 0, 0.02);
|
||||||
options={options}
|
border: 1px solid rgb(217, 217, 217);
|
||||||
setOptions={setOptions}
|
padding: 0px 11px;
|
||||||
onInsert={onInsert}
|
border-radius: 6px 0px 0px 6px;
|
||||||
changeOnSelect={changeOnSelect}
|
border-right: 0px;
|
||||||
fieldNames={fieldNames || defaultFieldNames}
|
`}
|
||||||
disabled={disabled}
|
>
|
||||||
/>
|
{addonBefore}
|
||||||
</Space.Compact>,
|
</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