• 自适应高度文本框 react contenteditable


    import React, { Component } from 'react';
    import PropTypes from 'prop-types';
    
    const reduceTargetKeys = (target, keys, predicate) => Object.keys(target).reduce(predicate, {});
    
    const omit = (target = {}, keys = []) =>
        reduceTargetKeys(target, keys, (acc, key) => keys.some(omitKey => omitKey === key) ? acc : { ...acc, [key]: target[key] });
    
    const pick = (target = {}, keys = []) =>
        reduceTargetKeys(target, keys, (acc, key) => keys.some(pickKey => pickKey === key) ? { ...acc, [key]: target[key] } : acc);
    
    const isEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);
    
    const propTypes = {
        content: PropTypes.string,
        editable: PropTypes.bool,
        focus: PropTypes.bool,
        maxLength: PropTypes.number,
        multiLine: PropTypes.bool,
        sanitise: PropTypes.bool,
        caretPosition: PropTypes.oneOf(['start', 'end']),
        tagName: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), // The element to make contenteditable. Takes an element string ('div', 'span', 'h1') or a styled component
        innerRef: PropTypes.func,
        onBlur: PropTypes.func,
        onFocus: PropTypes.func,
        onKeyDown: PropTypes.func,
        onPaste: PropTypes.func,
        onChange: PropTypes.func,
        styled: PropTypes.bool, // If element is a styled component (uses innerRef instead of ref)
    };
    
    const defaultProps = {
        content: '',
        editable: true,
        focus: false,
        maxLength: Infinity,
        multiLine: false,
        sanitise: true,
        caretPosition: null,
        tagName: 'div',
        innerRef: () => { },
        onBlur: () => { },
        onFocus: () => { },
        onKeyDown: () => { },
        onPaste: () => { },
        onChange: () => { },
        styled: false,
    };
    
    class ContentEditable extends Component {
        constructor(props) {
            super();
    
            this.state = {
                value: props.content,
                isFocused: false,
            };
        }
    
        componentDidMount() {
            this.setFocus();
            this.setCaret();
        }
    
        componentWillReceiveProps(nextProps) {
            if (nextProps.content !== this.sanitiseValue(this.state.value)) {
                this.setState({ value: nextProps.content }, () => {
                    if (!this.state.isFocused) this.forceUpdate();
                });
            }
        }
    
        shouldComponentUpdate(nextProps) {
            const propKeys = Object.keys(nextProps).filter(key => key !== 'content');
            return !isEqual(pick(nextProps, propKeys), pick(this.props, propKeys));
        }
    
        componentDidUpdate() {
            this.setFocus();
            this.setCaret();
        }
    
        setFocus = () => {
            if (this.props.focus && this._element) {
                this._element.focus();
            }
        };
    
        setCaret = () => {
            const { caretPosition } = this.props;
    
            if (caretPosition && this._element) {
                const { value } = this.state;
                const offset = value.length && caretPosition === 'end' ? 1 : 0;
                const range = document.createRange();
                const selection = window.getSelection();
                range.setStart(this._element, offset);
                range.collapse(true);
    
                selection.removeAllRanges();
                selection.addRange(range);
            }
        };
    
        sanitiseValue(val) {
            const { maxLength, multiLine, sanitise } = this.props;
    
            if (!sanitise) {
                return val;
            }
    
            // replace encoded spaces
            let value = val.replace(/ /, ' ').replace(/[u00a0u2000-u200bu2028-u2029u202e-u202fu3000]/g, ' ');
    
            if (multiLine) {
                // replace any 2+ character whitespace (other than new lines) with a single space
                value = value.replace(/[	vf
     ]+/g, ' ');
            } else {
                value = value.replace(/s+/g, ' ');
            }
    
            return value
                .split('
    ')
                .map(line => line.trim())
                .join('
    ')
                .replace(/
    {3,}/g, '
    
    ') // replace 3+ line breaks with two
                .trim()
                .substr(0, maxLength);
        }
    
        _onChange = ev => {
            const { sanitise } = this.props;
            const rawValue = this._element.innerText;
            const value = sanitise ? this.sanitiseValue(rawValue) : rawValue;
    
            if (this.state.value !== value) {
                this.setState({ value: rawValue }, () => {
                    this.props.onChange(ev, value);
                });
            }
        };
    
        _onPaste = ev => {
            const { maxLength } = this.props;
    
            ev.preventDefault();
            const text = ev.clipboardData.getData('text').substr(0, maxLength);
            document.execCommand('insertText', false, text);
    
            this.props.onPaste(ev);
        };
    
        _onBlur = ev => {
            const { sanitise } = this.props;
            const rawValue = this._element.innerText;
            const value = sanitise ? this.sanitiseValue(rawValue) : rawValue;
    
            // We finally set the state to the sanitised version (rather than the `rawValue`) because we're blurring the field.
            this.setState({
                value,
                isFocused: false,
            }, () => {
                this.props.onChange(ev, value);
                this.forceUpdate();
            });
    
            this.props.onBlur(ev);
        };
    
        _onFocus = ev => {
            this.setState({
                isFocused: true,
            });
            this.props.onFocus(ev);
        };
    
        _onKeyDown = ev => {
            const { maxLength, multiLine } = this.props;
            const value = this._element.innerText;
    
            // return key
            if (!multiLine && ev.keyCode === 13) {
                ev.preventDefault();
                ev.currentTarget.blur();
                // Call onKeyUp directly as ev.preventDefault() means that it will not be called
                this._onKeyUp(ev);
            }
    
            // Ensure we don't exceed `maxLength` (keycode 8 === backspace)
            if (maxLength && !ev.metaKey && ev.which !== 8 && value.replace(/ss/g, ' ').length >= maxLength) {
                ev.preventDefault();
                // Call onKeyUp directly as ev.preventDefault() means that it will not be called
                this._onKeyUp(ev);
            }
        };
    
        _onKeyUp = ev => {
            // Call prop.onKeyDown callback from the onKeyUp event to mitigate both of these issues:
            // Access to Synthetic event: https://github.com/ashleyw/react-sane-contenteditable/issues/14
            // Current value onKeyDown: https://github.com/ashleyw/react-sane-contenteditable/pull/6
            // this._onKeyDown can't be moved in it's entirety to onKeyUp as we lose the opportunity to preventDefault
            this.props.onKeyDown(ev, this._element.innerText);
        };
    
        render() {
            const { tagName: Element, content, editable, styled, ...props } = this.props;
    
            return (
                <Element
                    {...omit(props, Object.keys(propTypes))}
                    {...(styled
                        ? {
                            innerRef: c => {
                                this._element = c;
                                props.innerRef(c);
                            },
                        }
                        : {
                            ref: c => {
                                this._element = c;
                                props.innerRef(c);
                            },
                        })}
                    style={{ minHeight: '0.28rem', minWidth: '100%', display: 'inline-block', whiteSpace: 'pre-wrap', wordWrap: 'break-word', wordBreak: 'break-all', ...props.style }}
                    contentEditable={editable}
                    key={Date()}
                    dangerouslySetInnerHTML={{ __html: this.state.value }}
                    onBlur={this._onBlur}
                    onFocus={this._onFocus}
                    onInput={this._onChange}
                    onKeyDown={this._onKeyDown}
                    onKeyUp={this._onKeyUp}
                    onPaste={this._onPaste}
                />
            );
        }
    }
    
    ContentEditable.propTypes = propTypes;
    ContentEditable.defaultProps = defaultProps;
    
    export default ContentEditable;
  • 相关阅读:
    【20220508】连岳摘抄
    Python PyWin32 模块
    C/C++ 反汇编:数据类型与常量
    Python 多线程实现爬取图片
    C/C++ 反汇编:流程控制与循环结构
    C/C++ 反汇编:函数与结构体
    PE结构:VA&RVA&FOA 转换复习
    理论:第五章:Spring和SpringMVC,MyBatis以及SpringBoot的注解分别有哪些?SpringMVC的工作原理,SpringBoot框架的优点,MyBatis框架的优点
    达梦数据库:第一章:MySQL数据库与达梦数据库的区别
    理论:第二章:Spring的AOP和IOC是什么?使用场景有哪些?Spring事务与数据库事务,传播行为,数据库隔离级别
  • 原文地址:https://www.cnblogs.com/thinkingthigh/p/11726820.html
Copyright © 2020-2023  润新知