@gechiui/nux/build/components/dot-tip/index.js

NUX (New User eXperience) module for GeChiUI.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DotTip = DotTip;
exports.default = void 0;

var _element = require("@gechiui/element");

var _compose = require("@gechiui/compose");

var _components = require("@gechiui/components");

var _i18n = require("@gechiui/i18n");

var _data = require("@gechiui/data");

var _icons = require("@gechiui/icons");

var _store = require("../../store");

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
function onClick(event) {
  // Tips are often nested within buttons. We stop propagation so that clicking
  // on a tip doesn't result in the button being clicked.
  event.stopPropagation();
}

function DotTip(_ref) {
  let {
    position = 'middle right',
    children,
    isVisible,
    hasNextTip,
    onDismiss,
    onDisable
  } = _ref;
  const anchorParent = (0, _element.useRef)(null);
  const onFocusOutsideCallback = (0, _element.useCallback)(event => {
    if (!anchorParent.current) {
      return;
    }

    if (anchorParent.current.contains(event.relatedTarget)) {
      return;
    }

    onDisable();
  }, [onDisable, anchorParent]);

  if (!isVisible) {
    return null;
  }

  return (0, _element.createElement)(_components.Popover, {
    className: "nux-dot-tip",
    position: position,
    noArrow: true,
    focusOnMount: "container",
    shouldAnchorIncludePadding: true,
    role: "dialog",
    "aria-label": (0, _i18n.__)('编辑器贴士'),
    onClick: onClick,
    onFocusOutside: onFocusOutsideCallback
  }, (0, _element.createElement)("p", null, children), (0, _element.createElement)("p", null, (0, _element.createElement)(_components.Button, {
    variant: "link",
    onClick: onDismiss
  }, hasNextTip ? (0, _i18n.__)('查看下一个贴士') : (0, _i18n.__)('知道了'))), (0, _element.createElement)(_components.Button, {
    className: "nux-dot-tip__disable",
    icon: _icons.close,
    label: (0, _i18n.__)('禁用贴士'),
    onClick: onDisable
  }));
}

var _default = (0, _compose.compose)((0, _data.withSelect)((select, _ref2) => {
  let {
    tipId
  } = _ref2;
  const {
    isTipVisible,
    getAssociatedGuide
  } = select(_store.store);
  const associatedGuide = getAssociatedGuide(tipId);
  return {
    isVisible: isTipVisible(tipId),
    hasNextTip: !!(associatedGuide && associatedGuide.nextTipId)
  };
}), (0, _data.withDispatch)((dispatch, _ref3) => {
  let {
    tipId
  } = _ref3;
  const {
    dismissTip,
    disableTips
  } = dispatch(_store.store);
  return {
    onDismiss() {
      dismissTip(tipId);
    },

    onDisable() {
      disableTips();
    }

  };
}))(DotTip);

exports.default = _default;
//# sourceMappingURL=index.js.map