@atlaskit/editor-nodeview-data-provider/dist/esm/hooks.js

NodeView data provider for @atlaskit/editor-core plugins

import _typeof from "@babel/runtime/helpers/typeof";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _regeneratorRuntime from "@babel/runtime/regenerator";
export function useNodeViewDataProvider() {
  // Implementation pending
}
import { useEffect, useMemo, useState } from 'react';

// re exported to avoid type issues
// this type is only used in jsdoc comments in this file.

/**
 * Access the value via {@link NodeViewDataProvider} when cached.
 *
 * It will return the value of the provider if it is already available.
 *
 * For more information on building caches, see {@link buildCaches}.
 *
 * @example
 * ```ts
 * await buildCaches({ adf, oneTickProviders: [emojiNodeViewDataProvider] });
 * const value = useNodeViewDataProviderValue({ provider: emojiNodeViewDataProvider, node });
 * if (value) {
 *  return <SinglePassRenderEmoji emoji={value} />;
 * }
 * return <LegacyMultiPassRenderEmoji node={node} />;
 * ```
 */
export function useNodeViewDataProviderValue(options) {
  var providerValue = useMemo(function () {
    return options.provider.cache[options.provider.nodeToKey(options.node)];
  }, [options.provider, options.node]);
  return providerValue;
}

// The following hooks are not expected to be used with the initial experimentation of the NodeViewDataProvider
// and are not covered in the initial tests.
// They are provided as a reference

/**
 *
 *
 * This hook is intended to simplify accessing data via the one tick providers.
 *
 * ```ts
 * const value = useNodeViewDataProviderGet(emojiProvider, emojiNode);
 *
 * if (value.state === 'loading') {
 *   return <Loading />;
 * }
 * if (value.state === 'failed') {
 *  return <Fallback />;
 * }
 * return <Emoji properties=(value.result) />
 * ```
 */
export function useNodeViewDataProviderGet(options) {
  var getResult = useMemo(function () {
    return options.provider.get(options.node);
  }, [options.provider, options.node]);
  var _useState = useState(getResult !== undefined && !isPromise(getResult) ? getResult : undefined),
    _useState2 = _slicedToArray(_useState, 2),
    resolved = _useState2[0],
    setResolved = _useState2[1];
  useEffect(function () {
    if (!isPromise(getResult)) {
      return;
    }
    var cancelled = false;
    _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      var _resolved;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            _context.prev = 0;
            _context.next = 3;
            return getResult;
          case 3:
            _resolved = _context.sent;
            if (!cancelled) {
              setResolved(_resolved);
            }
            _context.next = 10;
            break;
          case 7:
            _context.prev = 7;
            _context.t0 = _context["catch"](0);
            setResolved('error');
          case 10:
          case "end":
            return _context.stop();
        }
      }, _callee, null, [[0, 7]]);
    }))();
    return function () {
      cancelled = true;
    };
  }, [getResult]);
  if (resolved === undefined) {
    return {
      state: 'loading',
      result: undefined
    };
  }
  if (resolved === 'error') {
    return {
      state: 'failed',
      result: undefined
    };
  }
  return {
    state: 'resolved',
    result: resolved
  };
}
function isPromise(obj) {
  return !!obj && (_typeof(obj) === 'object' || typeof obj === 'function') &&
  // @ts-ignore
  typeof obj.then === 'function';
}