@prefect9/ui/components/TextSizedField.js

UI React components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _isType = require("@prefect9/is-type");
var _jsxRuntime = require("react/jsx-runtime");
const TextSizedField = /*#__PURE__*/(0, _react.forwardRef)((_ref, outsideApiRef) => {
  let {
    value,
    placeholder,
    onChange,
    onFocus,
    disabled
  } = _ref;
  const insideApiRef = (0, _react.useRef)(null);
  const apiRef = outsideApiRef !== null && outsideApiRef !== void 0 ? outsideApiRef : insideApiRef;
  const blockRef = (0, _react.useRef)(null);
  (0, _react.useLayoutEffect)(() => {
    if (!blockRef || !blockRef.current) return;
    const block = blockRef.current;
    const textBlock = block.querySelector('.prefect9-text-sized-field__text');
    const inputBlock = block.querySelector('.prefect9-text-sized-field__input');
    if (!textBlock || !inputBlock) return;
    if ((0, _isType.isObj)(apiRef) && !(0, _isType.isObj)(apiRef.current)) apiRef.current = {};
    let savedValue = '';
    let saveHandler = null;
    let isFocus;
    const setFocus = newFocus => {
      isFocus = newFocus;
      if ((0, _isType.isFunc)(onFocus)) onFocus(newFocus);
    };
    setFocus(false);
    let loading = false;
    const setLoading = () => {
      setFocus(false);
      loading = true;
      inputBlock.setAttribute('disabled', 'disabled');
      block.classList.add('prefect9-text-sized-field__loading');
    };
    const setLoaded = function setLoaded() {
      let newFocus = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
      setFocus(newFocus);
      loading = false;
      inputBlock.removeAttribute('disabled');
      block.classList.remove('prefect9-text-sized-field__loading');
      inputBlock.value = savedValue;
      updatedValue();
    };
    const updatedValue = () => {
      const actualValue = isFocus || loading ? inputBlock.value : savedValue;
      textBlock.innerText = actualValue.length < 1 ? placeholder : actualValue;
      const size = textBlock.getBoundingClientRect();
      inputBlock.style.width = "".concat(size.width, "px");
      inputBlock.style.height = "".concat(size.height, "px");
    };
    const focusHandler = () => {
      setFocus(true);
      inputBlock.value = savedValue;
      updatedValue();
    };
    inputBlock.addEventListener('focus', focusHandler, {
      passive: true
    });
    const blurHandler = () => {
      setFocus(false);
      if (!loading) inputBlock.value = savedValue;
      updatedValue();
    };
    inputBlock.addEventListener('blur', blurHandler, {
      passive: true
    });
    const changeHandler = e => {
      const newValue = inputBlock.value;
      updatedValue();
    };
    inputBlock.addEventListener('input', changeHandler);
    const keyDownHandler = e => {
      const keyCode = e.code;
      if (keyCode !== 'Enter') return;
      e.preventDefault();
      const value = inputBlock.value;
      if (value === savedValue) return setLoaded(true);
      const handlerResult = (0, _isType.isFunc)(saveHandler) ? saveHandler(value) : null;
      if (!(0, _isType.isProm)(handlerResult)) return setLoaded(true);
      setLoading();
      inputBlock.blur();
      handlerResult.then(() => setLoaded()).catch(e => {
        throw e;
      });
    };
    inputBlock.addEventListener('keydown', keyDownHandler);
    if ((0, _isType.isObj)(apiRef)) apiRef.current.focus = () => inputBlock.focus();
    const setSavedValue = newSavedValue => {
      savedValue = newSavedValue;
      if (!isFocus && !loading) inputBlock.value = savedValue;
      updatedValue();
    };
    if ((0, _isType.isObj)(apiRef)) apiRef.current.setValue = setSavedValue;
    const setSavedHandler = handler => saveHandler = handler;
    if ((0, _isType.isObj)(apiRef)) apiRef.current.setHandler = setSavedHandler;
    updatedValue();
    return () => {
      if (inputBlock) inputBlock.removeEventListener('focus', focusHandler, {
        passive: true
      });
      if (inputBlock) inputBlock.removeEventListener('blur', blurHandler, {
        passive: true
      });
      if (inputBlock) inputBlock.removeEventListener('input', changeHandler);
      if (inputBlock) inputBlock.removeEventListener('keydown', keyDownHandler);
    };
  }, [blockRef, apiRef]);
  (0, _react.useEffect)(() => {
    if (!apiRef || !(0, _isType.isObj)(apiRef)) return;
    apiRef.current.setValue(value);
    apiRef.current.setHandler(onChange);
  }, [apiRef, value, onChange]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    ref: blockRef,
    className: "prefect9-text-sized-field",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("pre", {
      className: "prefect9-text-sized-field__text"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
      className: "prefect9-text-sized-field__input",
      placeholder: placeholder,
      disabled: disabled
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "prefect9-text-sized-field__loader"
    })]
  });
});
var _default = exports.default = TextSizedField;