react-elegant-ui/esm/components/Textarea/Textarea.hocs/withAutoResize.js

Elegant UI components, made by BEM best practices for react

var __assign = this && this.__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];
      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
    }
    return t;
  };
  return __assign.apply(this, arguments);
};
import React, { useRef, useCallback, useEffect } from 'react';
import { runByReadyState } from '../../../lib/runByReadyState';
import { useMergeContext } from '../../../hooks/useMergeContext';
import { cnTextarea } from '../Textarea';
import { TextareaWrapContext } from '../Wrap/Textarea-Wrap';
import { TextareaControlContext } from '../Control/Textarea-Control';
/**
 * HOC implements auto resize of wrapper
 */
export var withAutoResize = function (WrappedComponent) {
  return function (props) {
    var controlRefInner = useRef(null);
    var wrapRefInner = useRef(null);
    // TODO: improve algorithm to consider scroll size for unlimit height
    var updateHeight = useCallback(function () {
      var controlElm = controlRefInner.current;
      var wrapElm = wrapRefInner.current;
      if (controlElm === null || wrapElm === null) return;
      wrapElm.style.height = 'auto';
      // For cases when after resize will create scroll and it influence to size, resize do twice
      var i = 2;
      while (controlElm.scrollHeight > controlElm.offsetHeight && i--) {
        var padding = controlElm.offsetHeight - controlElm.clientHeight;
        wrapElm.style.height = "".concat(controlElm.scrollHeight + padding, "px");
      }
    }, []);
    // Update size every render
    useEffect(updateHeight);
    // Fix size after loading resources
    // need run it only once
    // eslint-disable-next-line react-hooks/exhaustive-deps
    useEffect(function () {
      return runByReadyState(updateHeight, 'complete');
    }, []);
    var wrapCtx = useMergeContext(TextareaWrapContext, {
      innerRef: wrapRefInner
    });
    var controlCtx = useMergeContext(TextareaControlContext, {
      innerRef: controlRefInner
    });
    return /*#__PURE__*/React.createElement(TextareaWrapContext.Provider, {
      value: wrapCtx
    }, /*#__PURE__*/React.createElement(TextareaControlContext.Provider, {
      value: controlCtx
    }, /*#__PURE__*/React.createElement(WrappedComponent, __assign({}, props, {
      className: cnTextarea({
        autoResize: true
      }, [props.className])
    }))));
  };
};