@prefect9/ui/components/useTextFieldV2.js

UI React components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("core-js/modules/es.string.trim.js");
require("core-js/modules/web.dom-collections.iterator.js");
var _react = require("react");
var _isType = require("@prefect9/is-type");
function useTextFieldV2(_ref) {
  let {
    value: initialValue,
    initial,
    validators,
    onEdit: initialEditHandler,
    error: initialError
  } = _ref;
  const id = (0, _react.useId)();
  const ref = (0, _react.useRef)(null);
  const preparedValue = (0, _react.useMemo)(() => (0, _isType.isStr)(initialValue) ? initialValue : '', [initialValue]);
  const preparedInitialValue = (0, _react.useMemo)(() => !(0, _isType.isStr)(initial) ? '' : initial, [initial]);
  const changed = (0, _react.useMemo)(() => preparedValue !== preparedInitialValue, [preparedValue, preparedInitialValue]);
  const empty = (0, _react.useMemo)(() => preparedValue.trim().length < 1, [preparedValue]);
  const [showed, setShowed] = (0, _react.useState)(false);
  const showToggle = (0, _react.useCallback)(() => setShowed(!showed), [showed]);
  const [focus, setFocus] = (0, _react.useState)(false);
  (0, _react.useEffect)(() => {
    if (!(0, _isType.isObj)(ref) || !(0, _isType.isObj)(ref.current)) return;
    const input = ref.current;
    const focusHandler = () => setFocus(true);
    input.addEventListener('focus', focusHandler, {
      passive: true
    });
    const blurHandler = () => setFocus(false);
    input.addEventListener('blur', blurHandler, {
      passive: true
    });
    return () => {
      input.removeEventListener('focus', focusHandler, {
        passive: true
      });
      input.removeEventListener('blur', blurHandler, {
        passive: true
      });
    };
  }, [ref]);
  const [customError, setCustomError] = (0, _react.useState)(null);
  (0, _react.useEffect)(() => setCustomError(null), [preparedValue]);
  /*useEffect(() => {
  	if(!isObj(ref) || !isObj(ref.current)) return;
  	const input = ref.current
  		const editHandler = () => setCustomError(null)
  	input.addEventListener('input', editHandler, { passive:true })
  	input.addEventListener('change', editHandler, { passive:true })
  		return () => {
  		input.removeEventListener('input', editHandler, { passive:true })
  		input.removeEventListener('change', editHandler, { passive:true })
  	}
  }, [ref])*/

  const anyValid = (0, _react.useMemo)(() => {
    if ((0, _isType.isStr)(customError) && customError.trim().length > 0) return customError.trim();
    if ((0, _isType.isStr)(initialError) && initialError.trim().length > 0) return initialError.trim();
    let result = true;
    for (let validator of (0, _isType.ofArr)(validators)) {
      if (!(0, _isType.isFunc)(validator)) throw new Error('Validator must be function');
      const valid = validator(preparedValue);
      if (valid === true) continue;
      result = valid;
      break;
    }
    return result;
  }, [customError, initialError, preparedValue, validators]);
  const valid = (0, _react.useMemo)(() => {
    if ((0, _isType.isStr)(customError) && customError.trim().length > 0) return customError.trim();
    if ((0, _isType.isStr)(initialError) && initialError.trim().length > 0) return initialError.trim();
    if (!changed) return true;
    return anyValid;
  }, [customError, initialError, changed, anyValid]);
  const editHandler = (0, _react.useCallback)(e => {
    const newValue = e.target.value;
    if ((0, _isType.isFunc)(initialEditHandler)) initialEditHandler(newValue);
  }, [initialEditHandler]);
  const setHandler = (0, _react.useCallback)(newValue => {
    if ((0, _isType.isFunc)(initialEditHandler)) initialEditHandler(newValue);
  }, [initialEditHandler]);
  return {
    id,
    ref,
    value: preparedValue,
    changed,
    empty,
    focus,
    anyValid,
    valid,
    editHandler,
    setHandler,
    showed,
    showToggle,
    setError: setCustomError
  };
}
var _default = exports.default = useTextFieldV2;