fix: textarea read pretty can support break line (#255)
* fix: textarea read pretty can support break line * fix: add autop props * fix: show in popover will be autop * fix: textarea support text props
This commit is contained in:
parent
16c0ca7412
commit
c5926ec64d
@ -15,6 +15,7 @@ export const EllipsisWithTooltip = (props) => {
|
||||
if (!props.ellipsis) {
|
||||
return <>{props.children}</>;
|
||||
}
|
||||
const { popoverContent } = props;
|
||||
return (
|
||||
<Popover
|
||||
visible={ellipsis && visible}
|
||||
@ -28,7 +29,7 @@ export const EllipsisWithTooltip = (props) => {
|
||||
overflowX: 'auto',
|
||||
}}
|
||||
>
|
||||
{props.children}
|
||||
{popoverContent}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
|
@ -4,11 +4,14 @@ import cls from 'classnames';
|
||||
import React from 'react';
|
||||
import { useCompile } from '../..';
|
||||
import { EllipsisWithTooltip } from './EllipsisWithTooltip';
|
||||
import { HTMLEncode } from './shared';
|
||||
|
||||
type Composed = {
|
||||
Input: React.FC<InputProps & { ellipsis?: any }>;
|
||||
URL: React.FC<InputProps>;
|
||||
TextArea: React.FC<TextAreaProps & { ellipsis?: any; text?: any; addonBefore?: any; suffix?: any; addonAfter?: any }>;
|
||||
TextArea: React.FC<
|
||||
TextAreaProps & { ellipsis?: any; text?: any; addonBefore?: any; suffix?: any; addonAfter?: any; autop?: boolean }
|
||||
>;
|
||||
};
|
||||
|
||||
export const ReadPretty: Composed = () => null;
|
||||
@ -30,11 +33,24 @@ ReadPretty.Input = (props) => {
|
||||
ReadPretty.TextArea = (props) => {
|
||||
const prefixCls = usePrefixCls('description-textarea', props);
|
||||
const compile = useCompile();
|
||||
const value = compile(props.value ?? '');
|
||||
const { autop = false } = props;
|
||||
let content = null;
|
||||
const values = HTMLEncode(value).split('\n').join('<br/>');
|
||||
content = (
|
||||
<EllipsisWithTooltip
|
||||
ellipsis={props.ellipsis}
|
||||
popoverContent={autop ? <div dangerouslySetInnerHTML={{ __html: values }} /> : value}
|
||||
>
|
||||
{props.text ?? value}
|
||||
</EllipsisWithTooltip>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={cls(prefixCls, props.className)} style={props.style}>
|
||||
{props.addonBefore}
|
||||
{props.prefix}
|
||||
<EllipsisWithTooltip ellipsis={props.ellipsis}>{compile(props.value)}</EllipsisWithTooltip>
|
||||
{content}
|
||||
{props.suffix}
|
||||
{props.addonAfter}
|
||||
</div>
|
||||
|
@ -16,7 +16,7 @@ const schema = {
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Input.TextArea',
|
||||
'x-reactions': {
|
||||
target: '*(read1,read2)',
|
||||
target: '*(read1,read2,read3)',
|
||||
fulfill: {
|
||||
state: {
|
||||
value: '{{$self.value}}',
|
||||
@ -43,6 +43,17 @@ const schema = {
|
||||
ellipsis: true,
|
||||
},
|
||||
},
|
||||
read3: {
|
||||
interface: 'string',
|
||||
type: 'string',
|
||||
title: `Read pretty(autop)`,
|
||||
'x-read-pretty': true,
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Input.TextArea',
|
||||
'x-component-props': {
|
||||
autop: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
@ -0,0 +1,7 @@
|
||||
export function HTMLEncode(html: string) {
|
||||
let temp = document.createElement('div');
|
||||
temp.textContent != null ? (temp.textContent = html) : (temp.innerText = html);
|
||||
const output = temp.innerHTML;
|
||||
temp = null;
|
||||
return output;
|
||||
}
|
Loading…
Reference in New Issue
Block a user