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:
SemmyWong 2022-03-30 15:47:35 +08:00 committed by GitHub
parent 16c0ca7412
commit c5926ec64d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 39 additions and 4 deletions

View File

@ -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>
}
>

View File

@ -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>

View File

@ -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,
},
},
},
};

View File

@ -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;
}