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 { 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,18 @@ ReadPretty.Input = (props) => {
 | 
			
		||||
ReadPretty.TextArea = (props) => {
 | 
			
		||||
  const prefixCls = usePrefixCls('description-textarea', props);
 | 
			
		||||
  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 (
 | 
			
		||||
    <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