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

NUX (New User eXperience) module for GeChiUI.

import { createElement } from "@gechiui/element";

/**
 * GeChiUI dependencies
 */
import { compose } from '@gechiui/compose';
import { Popover, Button } from '@gechiui/components';
import { __ } from '@gechiui/i18n';
import { withSelect, withDispatch } from '@gechiui/data';
import { useCallback, useRef } from '@gechiui/element';
import { close } from '@gechiui/icons';
/**
 * Internal dependencies
 */

import { store as nuxStore } from '../../store';

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();
}

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

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

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

  if (!isVisible) {
    return null;
  }

  return createElement(Popover, {
    className: "nux-dot-tip",
    position: position,
    noArrow: true,
    focusOnMount: "container",
    shouldAnchorIncludePadding: true,
    role: "dialog",
    "aria-label": __('编辑器贴士'),
    onClick: onClick,
    onFocusOutside: onFocusOutsideCallback
  }, createElement("p", null, children), createElement("p", null, createElement(Button, {
    variant: "link",
    onClick: onDismiss
  }, hasNextTip ? __('查看下一个贴士') : __('知道了'))), createElement(Button, {
    className: "nux-dot-tip__disable",
    icon: close,
    label: __('禁用贴士'),
    onClick: onDisable
  }));
}
export default compose(withSelect((select, _ref2) => {
  let {
    tipId
  } = _ref2;
  const {
    isTipVisible,
    getAssociatedGuide
  } = select(nuxStore);
  const associatedGuide = getAssociatedGuide(tipId);
  return {
    isVisible: isTipVisible(tipId),
    hasNextTip: !!(associatedGuide && associatedGuide.nextTipId)
  };
}), withDispatch((dispatch, _ref3) => {
  let {
    tipId
  } = _ref3;
  const {
    dismissTip,
    disableTips
  } = dispatch(nuxStore);
  return {
    onDismiss() {
      dismissTip(tipId);
    },

    onDisable() {
      disableTips();
    }

  };
}))(DotTip);
//# sourceMappingURL=index.js.map