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

NodeView data provider for @atlaskit/editor-core plugins

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useNodeViewDataProvider = useNodeViewDataProvider;
exports.useNodeViewDataProviderGet = useNodeViewDataProviderGet;
exports.useNodeViewDataProviderValue = useNodeViewDataProviderValue;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
function useNodeViewDataProvider() {
  // Implementation pending
}
// 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} />;
 * ```
 */
function useNodeViewDataProviderValue(options) {
  var providerValue = (0, _react.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) />
 * ```
 */
function useNodeViewDataProviderGet(options) {
  var getResult = (0, _react.useMemo)(function () {
    return options.provider.get(options.node);
  }, [options.provider, options.node]);
  var _useState = (0, _react.useState)(getResult !== undefined && !isPromise(getResult) ? getResult : undefined),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    resolved = _useState2[0],
    setResolved = _useState2[1];
  (0, _react.useEffect)(function () {
    if (!isPromise(getResult)) {
      return;
    }
    var cancelled = false;
    (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
      var _resolved;
      return _regenerator.default.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 && ((0, _typeof2.default)(obj) === 'object' || typeof obj === 'function') &&
  // @ts-ignore
  typeof obj.then === 'function';
}