react-vk/dist/react-vk.umd.js

VK API bindings for React

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
  typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
  (global = global || self, factory(global.ReactVK = {}, global.React));
}(this, function (exports, React) { 'use strict';

  var React__default = 'default' in React ? React['default'] : React;

  function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
      throw new TypeError("Cannot call a class as a function");
    }
  }

  function _defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
      var descriptor = props[i];
      descriptor.enumerable = descriptor.enumerable || false;
      descriptor.configurable = true;
      if ("value" in descriptor) descriptor.writable = true;
      Object.defineProperty(target, descriptor.key, descriptor);
    }
  }

  function _createClass(Constructor, protoProps, staticProps) {
    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
    if (staticProps) _defineProperties(Constructor, staticProps);
    return Constructor;
  }

  function _defineProperty(obj, key, value) {
    if (key in obj) {
      Object.defineProperty(obj, key, {
        value: value,
        enumerable: true,
        configurable: true,
        writable: true
      });
    } else {
      obj[key] = value;
    }

    return obj;
  }

  function _objectSpread(target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i] != null ? arguments[i] : {};
      var ownKeys = Object.keys(source);

      if (typeof Object.getOwnPropertySymbols === 'function') {
        ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
          return Object.getOwnPropertyDescriptor(source, sym).enumerable;
        }));
      }

      ownKeys.forEach(function (key) {
        _defineProperty(target, key, source[key]);
      });
    }

    return target;
  }

  function _slicedToArray(arr, i) {
    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
  }

  function _arrayWithHoles(arr) {
    if (Array.isArray(arr)) return arr;
  }

  function _iterableToArrayLimit(arr, i) {
    var _arr = [];
    var _n = true;
    var _d = false;
    var _e = undefined;

    try {
      for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
        _arr.push(_s.value);

        if (i && _arr.length === i) break;
      }
    } catch (err) {
      _d = true;
      _e = err;
    } finally {
      try {
        if (!_n && _i["return"] != null) _i["return"]();
      } finally {
        if (_d) throw _e;
      }
    }

    return _arr;
  }

  function _nonIterableRest() {
    throw new TypeError("Invalid attempt to destructure non-iterable instance");
  }

  var VKContext = React__default.createContext(null);

  /* global document, window */
  var VKApi =
  /*#__PURE__*/
  function () {
    function VKApi(apiId) {
      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

      _classCallCheck(this, VKApi);

      this.apiId = apiId;
      this.options = options;
      this.promise = null;
      this.load();
    }

    _createClass(VKApi, [{
      key: "init",
      value: function init() {
        var apiId = this.apiId,
            onlyWidgets = this.options.onlyWidgets;

        if (apiId) {
          window.VK.init({
            apiId: apiId,
            onlyWidgets: onlyWidgets
          });
        }
      }
    }, {
      key: "load",
      value: function load() {
        var _this = this;

        var version = this.options.version;
        if (this.promise) return this.promise;
        this.promise = new Promise(function (resolve) {
          if (window.VK && window.VK.init) {
            _this.init();

            resolve(window.VK);
          } else {
            window.vkAsyncInit = function () {
              _this.init();

              resolve(window.VK);
            };
          }

          var baseUrl = "https://vk.com/js/api/openapi.js?".concat(version);

          if (!document.getElementById("vk-openapi")) {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.id = "vk-openapi";
            script.src = baseUrl;
            script.async = true;
            document.head.appendChild(script);
          }
        });
        return this.promise;
      }
    }]);

    return VKApi;
  }();

  /* global window */

  /* eslint-disable import/prefer-default-export */
  var isDOMReady = typeof window !== "undefined" && window.document && window.document.createElement;

  var VK = function VK(_ref) {
    var onApiAvailable = _ref.onApiAvailable,
        apiId = _ref.apiId,
        options = _ref.options,
        children = _ref.children;

    var _useState = React.useState(null),
        _useState2 = _slicedToArray(_useState, 2),
        vk = _useState2[0],
        setVK = _useState2[1];

    React.useEffect(function () {
      if (isDOMReady) {
        new VKApi(apiId, options).load().then(function (api) {
          onApiAvailable(api);
          setVK(api);
        });
      }
    }, []);
    return vk ? React__default.createElement(VKContext.Provider, {
      value: vk
    }, children) : null;
  };

  VK.defaultProps = {
    apiId: null,
    options: {
      version: 160,
      onlyWidgets: true
    },
    onApiAvailable: function onApiAvailable() {}
  };

  var AllowMessagesFromCommunity = function AllowMessagesFromCommunity(_ref) {
    var elementId = _ref.elementId,
        options = _ref.options,
        groupId = _ref.groupId,
        onAllow = _ref.onAllow,
        onDeny = _ref.onDeny;
    var vk = React.useContext(VKContext);
    React.useEffect(function () {
      vk.Widgets.AllowMessagesFromCommunity(elementId, options, groupId);
      vk.Observer.subscribe("widgets.allowMessagesFromCommunity.allowed", function (userId) {
        return onAllow(userId);
      });
      vk.Observer.subscribe("widgets.allowMessagesFromCommunity.denied", function (userId) {
        return onDeny(userId);
      });
      return function () {
        return vk.Observer.unsubscribe("widgets.allowMessagesFromCommunity.allowed");
      };
    }, []);
    return React__default.createElement("div", {
      id: elementId
    });
  };

  AllowMessagesFromCommunity.defaultProps = {
    elementId: "vk_allow_messages_from_community",
    options: {
      height: 24
    },
    onAllow: function onAllow() {},
    onDeny: function onDeny() {}
  };

  var Application = function Application(_ref) {
    var elementId = _ref.elementId,
        appId = _ref.appId,
        options = _ref.options;
    var vk = React.useContext(VKContext);
    React.useEffect(function () {
      vk.Widgets.App(elementId, appId, options);
    }, []);
    return React__default.createElement("div", {
      id: elementId
    });
  };

  Application.defaultProps = {
    elementId: "vk_app",
    options: {
      mode: 1
    }
  };

  var Auth = function Auth(_ref) {
    var elementId = _ref.elementId,
        options = _ref.options;
    var vk = React.useContext(VKContext);
    React.useEffect(function () {
      var copy = _objectSpread({}, options);

      copy.onAuth = function (uid, first_name, last_name, photo, photo_rec, hash) {
        return options.onAuth(uid, first_name, last_name, photo, photo_rec, hash);
      };

      vk.Widgets.Auth(elementId, copy);
    }, []);
    return React__default.createElement("div", {
      id: elementId
    });
  };

  Auth.defaultProps = {
    elementId: "vk_auth",
    options: {
      width: 300,
      onAuth: function onAuth() {}
    }
  };

  var Comments = function Comments(_ref) {
    var elementId = _ref.elementId,
        options = _ref.options,
        pageId = _ref.pageId,
        onNewComment = _ref.onNewComment,
        onDeleteComment = _ref.onDeleteComment;
    var vk = React.useContext(VKContext);
    React.useEffect(function () {
      vk.Widgets.Comments(elementId, options, pageId);
      vk.Observer.subscribe("widgets.comments.new_comment", function (num, last_comment, date, sign) {
        return onNewComment(num, last_comment, date, sign);
      });
      vk.Observer.subscribe("widgets.comments.delete_comment", onDeleteComment);
      return function () {
        vk.Observer.unsubscribe("widgets.comments.new_comment");
        vk.Observer.unsubscribe("widgets.comments.delete_comment");
      };
    }, []);
    return React__default.createElement("div", {
      id: elementId
    });
  };

  Comments.defaultProps = {
    elementId: "vk_comments",
    options: {
      height: 0,
      limit: 10,
      attach: "*",
      autoPublish: 0,
      mini: "auto",
      norealtime: 0
    },
    pageId: null,
    onNewComment: function onNewComment() {},
    onDeleteComment: function onDeleteComment() {}
  };

  var CommentsBrowse = function CommentsBrowse(_ref) {
    var elementId = _ref.elementId,
        options = _ref.options;
    var vk = React.useContext(VKContext);
    React.useEffect(function () {
      vk.Widgets.CommentsBrowse(elementId, options);
    }, []);
    return React__default.createElement("div", {
      id: elementId
    });
  };

  CommentsBrowse.defaultProps = {
    elementId: "vk_comments_browse",
    options: {
      height: 0,
      limit: 10,
      mini: "auto",
      norealtime: 0
    }
  };

  var CommunityMessages = function CommunityMessages(_ref) {
    var elementId = _ref.elementId,
        groupId = _ref.groupId,
        options = _ref.options,
        onMount = _ref.onMount;
    var vk = React.useContext(VKContext);
    React.useEffect(function () {
      var widget = vk.Widgets.CommunityMessages(elementId, groupId, options);
      onMount(widget, elementId);
    }, []);
    return React__default.createElement("div", {
      id: elementId
    });
  };

  CommunityMessages.defaultProps = {
    elementId: "vk_community_messages",
    options: {
      onCanNotWrite: function onCanNotWrite() {},
      welcomeScreen: 1,
      expandTimeout: 0,
      expanded: 0,
      widgetPosition: "right",
      buttonType: "blue_circle",
      disableButtonTooltip: 0
    },
    onMount: function onMount() {}
  };

  var ContactUs = function ContactUs(_ref) {
    var elementId = _ref.elementId,
        options = _ref.options,
        ownerId = _ref.ownerId;
    var vk = React.useContext(VKContext);
    React.useEffect(function () {
      vk.Widgets.ContactUs(elementId, options, -ownerId);
    }, []);
    return React__default.createElement("div", {
      id: elementId
    });
  };

  ContactUs.defaultProps = {
    elementId: "vk_contact_us",
    options: {
      height: 24
    }
  };

  var Group = function Group(_ref) {
    var elementId = _ref.elementId,
        options = _ref.options,
        groupId = _ref.groupId,
        onJoin = _ref.onJoin,
        onLeave = _ref.onLeave;
    var vk = React.useContext(VKContext);
    React.useEffect(function () {
      vk.Widgets.Group(elementId, options, groupId);
      vk.Observer.subscribe("widgets.groups.joined", onJoin);
      vk.Observer.subscribe("widgets.groups.leaved", onLeave);
      return function () {
        vk.Observer.unsubscribe("widgets.groups.joined");
        vk.Observer.unsubscribe("widgets.groups.leaved");
      };
    }, []);
    return React__default.createElement("div", {
      id: elementId
    });
  };

  Group.defaultProps = {
    elementId: "vk_groups",
    options: {
      width: "auto",
      mode: 3,
      no_cover: 1,
      wide: 1
    },
    onJoin: function onJoin() {},
    onLeave: function onLeave() {}
  };

  var Like = function Like(_ref) {
    var elementId = _ref.elementId,
        options = _ref.options,
        pageId = _ref.pageId,
        onLike = _ref.onLike,
        onUnlike = _ref.onUnlike,
        onShare = _ref.onShare,
        onUnshare = _ref.onUnshare;
    var vk = React.useContext(VKContext);
    React.useEffect(function () {
      if (pageId) {
        vk.Widgets.Like(elementId, options, pageId);
      } else {
        vk.Widgets.Like(elementId, options);
      }

      vk.Observer.subscribe("widgets.like.liked", function (quantity) {
        return onLike(quantity);
      });
      vk.Observer.subscribe("widgets.like.unliked", function (quantity) {
        return onUnlike(quantity);
      });
      vk.Observer.subscribe("widgets.like.shared", function (quantity) {
        return onShare(quantity);
      });
      vk.Observer.subscribe("widgets.like.unshared", function (quantity) {
        return onUnshare(quantity);
      });
      return function () {
        vk.Observer.unsubscribe("widgets.like.liked");
        vk.Observer.unsubscribe("widgets.like.unliked");
        vk.Observer.unsubscribe("widgets.like.shared");
        vk.Observer.unsubscribe("widgets.like.unshared");
      };
    }, []);
    return React__default.createElement("div", {
      id: elementId
    });
  };

  Like.defaultProps = {
    elementId: "vk_like",
    options: {
      type: "full",
      width: 350,
      height: 22,
      verb: 0
    },
    pageId: null,
    onLike: function onLike() {},
    onUnlike: function onUnlike() {},
    onShare: function onShare() {},
    onUnshare: function onUnshare() {}
  };

  var Playlist = function Playlist(_ref) {
    var elementId = _ref.elementId,
        ownerId = _ref.ownerId,
        playlistId = _ref.playlistId,
        hash = _ref.hash,
        options = _ref.options;
    var vk = React.useContext(VKContext);
    React.useEffect(function () {
      vk.Widgets.Playlist(elementId, -ownerId, playlistId, hash, options);
    }, []);
    return React__default.createElement("div", {
      id: elementId
    });
  };

  Playlist.defaultProps = {
    elementId: "vk_playlist",
    options: {}
  };

  var Poll = function Poll(_ref) {
    var elementId = _ref.elementId,
        options = _ref.options,
        pollId = _ref.pollId;
    var vk = React.useContext(VKContext);
    React.useEffect(function () {
      vk.Widgets.Poll(elementId, options, pollId);
    }, []);
    return React__default.createElement("div", {
      id: elementId
    });
  };

  Poll.defaultProps = {
    elementId: "vk_poll",
    options: {
      height: 24
    }
  };

  var Post = function Post(_ref) {
    var elementId = _ref.elementId,
        ownerId = _ref.ownerId,
        postId = _ref.postId,
        hash = _ref.hash,
        options = _ref.options;
    var vk = React.useContext(VKContext);
    React.useEffect(function () {
      vk.Widgets.Post(elementId, ownerId, postId, hash, options);
    }, []);
    return React__default.createElement("div", {
      id: elementId
    });
  };

  Post.defaultProps = {
    elementId: "vk_post",
    options: {}
  };

  var Recommended = function Recommended(_ref) {
    var elementId = _ref.elementId,
        options = _ref.options;
    var vk = React.useContext(VKContext);
    React.useEffect(function () {
      vk.Widgets.Recommended(elementId, options);
    }, []);
    return React__default.createElement("div", {
      id: elementId
    });
  };

  Recommended.defaultProps = {
    elementId: "vk_recommend",
    options: {
      limit: 5,
      max: 20,
      period: "week",
      sort: "friend_like",
      target: "parent"
    }
  };

  /* global document, window */
  var URL = "https://vk.com/js/api/share.js?93";

  var Share = function Share(_ref) {
    var shareOptions = _ref.shareOptions,
        buttonOptions = _ref.buttonOptions;
    var container = React__default.createRef();
    React.useEffect(function () {
      if (isDOMReady) {
        if (!document.getElementById("vk-share")) {
          var script = document.createElement("script");
          script.type = "text/javascript";
          script.charset = "windows-1251";
          script.id = "vk-share";
          script.src = URL;
          script.async = true;
          document.head.appendChild(script);
          script.addEventListener("load", function () {
            container.current.innerHTML = window.VK.Share.button(shareOptions, buttonOptions);
          });
        } else if (window.VK.Share) {
          container.current.innerHTML = window.VK.Share.button(shareOptions, buttonOptions);
        }
      }
    }, []);
    return React__default.createElement("div", {
      ref: container
    });
  };

  Share.defaultProps = {
    shareOptions: null,
    buttonOptions: null
  };

  var Subscribe = function Subscribe(_ref) {
    var elementId = _ref.elementId,
        options = _ref.options,
        ownerId = _ref.ownerId,
        onSubscribe = _ref.onSubscribe,
        onUnsubscribe = _ref.onUnsubscribe;
    var vk = React.useContext(VKContext);
    React.useEffect(function () {
      vk.Widgets.Subscribe(elementId, options, ownerId);
      vk.Observer.subscribe("widgets.subscribed", onSubscribe);
      vk.Observer.subscribe("widgets.unsubscribed", onUnsubscribe);
      return function () {
        vk.Observer.unsubscribe("widgets.subscribed");
        vk.Observer.unsubscribe("widgets.unsubscribed");
      };
    }, []);
    return React__default.createElement("div", {
      id: elementId
    });
  };

  Subscribe.defaultProps = {
    elementId: "vk_subscribe",
    options: {
      mode: 0,
      soft: 0
    },
    onSubscribe: function onSubscribe() {},
    onUnsubscribe: function onUnsubscribe() {}
  };

  var Article = function Article(_ref) {
    var elementId = _ref.elementId,
        articleUrl = _ref.articleUrl;
    var vk = React.useContext(VKContext);
    React.useEffect(function () {
      vk.Widgets.Article(elementId, articleUrl);
    }, []);
    return React__default.createElement("div", {
      id: elementId
    });
  };

  Article.defaultProps = {
    elementId: "vk_article"
  };

  exports.AllowMessagesFromCommunity = AllowMessagesFromCommunity;
  exports.Application = Application;
  exports.Article = Article;
  exports.Auth = Auth;
  exports.Comments = Comments;
  exports.CommentsBrowse = CommentsBrowse;
  exports.CommunityMessages = CommunityMessages;
  exports.ContactUs = ContactUs;
  exports.Group = Group;
  exports.Like = Like;
  exports.Playlist = Playlist;
  exports.Poll = Poll;
  exports.Post = Post;
  exports.Recommended = Recommended;
  exports.Share = Share;
  exports.Subscribe = Subscribe;
  exports.default = VK;

  Object.defineProperty(exports, '__esModule', { value: true });

}));