fix: textarea read pretty can support break line
This commit is contained in:
		
							parent
							
								
									81978711e4
								
							
						
					
					
						commit
						b51daf2220
					
				@ -4,11 +4,14 @@ import cls from 'classnames';
 | 
				
			|||||||
import React from 'react';
 | 
					import React from 'react';
 | 
				
			||||||
import { useCompile } from '../..';
 | 
					import { useCompile } from '../..';
 | 
				
			||||||
import { EllipsisWithTooltip } from './EllipsisWithTooltip';
 | 
					import { EllipsisWithTooltip } from './EllipsisWithTooltip';
 | 
				
			||||||
 | 
					import { HTMLEncode } from './shared';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
type Composed = {
 | 
					type Composed = {
 | 
				
			||||||
  Input: React.FC<InputProps & { ellipsis?: any }>;
 | 
					  Input: React.FC<InputProps & { ellipsis?: any }>;
 | 
				
			||||||
  URL: React.FC<InputProps>;
 | 
					  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;
 | 
					export const ReadPretty: Composed = () => null;
 | 
				
			||||||
@ -30,11 +33,18 @@ ReadPretty.Input = (props) => {
 | 
				
			|||||||
ReadPretty.TextArea = (props) => {
 | 
					ReadPretty.TextArea = (props) => {
 | 
				
			||||||
  const prefixCls = usePrefixCls('description-textarea', props);
 | 
					  const prefixCls = usePrefixCls('description-textarea', props);
 | 
				
			||||||
  const compile = useCompile();
 | 
					  const compile = useCompile();
 | 
				
			||||||
 | 
					  const value = compile(props.value ?? '');
 | 
				
			||||||
 | 
					  const values = HTMLEncode(value).split('\n').join('<br/>');
 | 
				
			||||||
 | 
					  const content = (
 | 
				
			||||||
 | 
					    <EllipsisWithTooltip ellipsis={props.ellipsis}>
 | 
				
			||||||
 | 
					      <div dangerouslySetInnerHTML={{ __html: values }} />
 | 
				
			||||||
 | 
					    </EllipsisWithTooltip>
 | 
				
			||||||
 | 
					  );
 | 
				
			||||||
  return (
 | 
					  return (
 | 
				
			||||||
    <div className={cls(prefixCls, props.className)} style={props.style}>
 | 
					    <div className={cls(prefixCls, props.className)} style={props.style}>
 | 
				
			||||||
      {props.addonBefore}
 | 
					      {props.addonBefore}
 | 
				
			||||||
      {props.prefix}
 | 
					      {props.prefix}
 | 
				
			||||||
      <EllipsisWithTooltip ellipsis={props.ellipsis}>{compile(props.value)}</EllipsisWithTooltip>
 | 
					      {content}
 | 
				
			||||||
      {props.suffix}
 | 
					      {props.suffix}
 | 
				
			||||||
      {props.addonAfter}
 | 
					      {props.addonAfter}
 | 
				
			||||||
    </div>
 | 
					    </div>
 | 
				
			||||||
 | 
				
			|||||||
@ -16,7 +16,7 @@ const schema = {
 | 
				
			|||||||
      'x-decorator': 'FormItem',
 | 
					      'x-decorator': 'FormItem',
 | 
				
			||||||
      'x-component': 'Input.TextArea',
 | 
					      'x-component': 'Input.TextArea',
 | 
				
			||||||
      'x-reactions': {
 | 
					      'x-reactions': {
 | 
				
			||||||
        target: '*(read1,read2)',
 | 
					        target: '*(read1,read2,read3)',
 | 
				
			||||||
        fulfill: {
 | 
					        fulfill: {
 | 
				
			||||||
          state: {
 | 
					          state: {
 | 
				
			||||||
            value: '{{$self.value}}',
 | 
					            value: '{{$self.value}}',
 | 
				
			||||||
@ -43,6 +43,17 @@ const schema = {
 | 
				
			|||||||
        ellipsis: true,
 | 
					        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