Merge pull request #7206 from weseek/imprv/show-tool-tip-for-presentation-feature

imprv: Show tool tip for presentation feature

packages/app/public/static/locales/en_US/translation.json

@@ -60,6 +60,7 @@
   "Presentation Mode": "Presentation",
   "The end": "The end",
   "Not available for guest": "Not available for guest",
+  "Not available in this version": "Not available in this version",
   "No users have liked this yet": "No users have liked this yet",
   "No users have liked this yet.": "No users have liked this yet.",
   "No users have bookmarked yet": "No users have bookmarked yet",

packages/app/public/static/locales/ja_JP/translation.json

@@ -57,6 +57,7 @@
   "Presentation Mode": "プレゼンテーション",
   "The end": "おしまい",
   "Not available for guest": "ゲストユーザーは利用できません",
+  "Not available in this version": "このバージョンでは利用できません",
   "No users have liked this yet": "いいねをしているユーザーはいません",
   "No users have bookmarked yet": "ブックマークしているユーザーはいません",
   "Create Archive Page": "アーカイブページの作成",

packages/app/public/static/locales/zh_CN/translation.json

@@ -56,7 +56,8 @@
   "No_attachments_yet": "暂无附件",
 	"Presentation Mode": "演示文稿",
   "The end": "结束",
-  "Not available for guest": "Not available for guest",
+  "Not available for guest": "不提供给客人",
+  "Not available in this version": "此版本中不提供",
   "No users have liked this yet": "还没有用户喜欢这个",
   "No users have bookmarked yet": "还没有用户加入书签",
   "Create Archive Page": "创建归档页",

packages/app/src/components/Navbar/GrowiContextualSubNavigation.tsx

@@ -33,6 +33,7 @@ import AttachmentIcon from '../Icons/AttachmentIcon';
 import HistoryIcon from '../Icons/HistoryIcon';
 import PresentationIcon from '../Icons/PresentationIcon';
 import ShareLinkIcon from '../Icons/ShareLinkIcon';
+import { NotAvailableForNow } from '../NotAvailableForNow';
 import { Skeleton } from '../Skeleton';
 
 import type { AuthorInfoProps } from './AuthorInfo';
@@ -86,16 +87,18 @@ const PageOperationMenuItems = (props: PageOperationMenuItemsProps): JSX.Element
   return (
     <>
       {/* Presentation */}
-      <DropdownItem
-        onClick={() => openPresentationModal(hrefForPresentationModal)}
-        data-testid="open-presentation-modal-btn"
-        className="grw-page-control-dropdown-item"
-      >
-        <i className="icon-fw grw-page-control-dropdown-icon">
-          <PresentationIcon />
-        </i>
-        { t('Presentation Mode') }
-      </DropdownItem>
+      <NotAvailableForNow>
+        <DropdownItem
+          onClick={() => openPresentationModal(hrefForPresentationModal)}
+          data-testid="open-presentation-modal-btn"
+          className="grw-page-control-dropdown-item"
+        >
+          <i className="icon-fw grw-page-control-dropdown-icon">
+            <PresentationIcon />
+          </i>
+          { t('Presentation Mode') }
+        </DropdownItem>
+      </NotAvailableForNow>
 
       {/* Export markdown */}
       <DropdownItem

packages/app/src/components/NotAvailable.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { TFunction } from 'next-i18next';
+import { Disable } from 'react-disable';
+import { UncontrolledTooltip, UncontrolledTooltipProps } from 'reactstrap';
+
+type NotAvailableProps = {
+  children: JSX.Element
+  isDisabled: boolean
+  title: ReturnType<TFunction>
+  classNamePrefix?: string
+  placement?: UncontrolledTooltipProps['placement']
+}
+
+export const NotAvailable = ({
+  children, isDisabled, title, classNamePrefix = 'grw-not-available', placement = 'top',
+}: NotAvailableProps): JSX.Element => {
+
+  if (!isDisabled) {
+    return children;
+  }
+
+  const id = `${classNamePrefix}-${Math.random().toString(32).substring(2)}`;
+
+  return (
+    <>
+      <div id={id}>
+        <Disable disabled={isDisabled}>
+          {children}
+        </Disable>
+      </div>
+      <UncontrolledTooltip placement={placement} target={id}>{title}</UncontrolledTooltip>
+    </>
+  );
+};

packages/app/src/components/NotAvailableForGuest.tsx

@@ -1,35 +1,31 @@
 import React from 'react';
 
 import { useTranslation } from 'next-i18next';
-import { Disable } from 'react-disable';
-import { UncontrolledTooltip } from 'reactstrap';
 
 import { useIsGuestUser } from '~/stores/context';
 
+import { NotAvailable } from './NotAvailable';
+
+
 type NotAvailableForGuestProps = {
   children: JSX.Element
 }
 
-export const NotAvailableForGuest = ({ children }: NotAvailableForGuestProps): JSX.Element => {
+export const NotAvailableForGuest = React.memo(({ children }: NotAvailableForGuestProps): JSX.Element => {
   const { t } = useTranslation();
-
   const { data: isGuestUser } = useIsGuestUser();
-  const isDisabled = !!isGuestUser;
-
-  if (!isGuestUser) {
-    return children;
-  }
 
-  const id = `grw-not-available-for-guest-${Math.random().toString(32).substring(2)}`;
+  const isDisabled = !!isGuestUser;
+  const title = t('Not available for guest');
 
   return (
-    <>
-      <div id={id}>
-        <Disable disabled={isDisabled}>
-          { children }
-        </Disable>
-      </div>
-      <UncontrolledTooltip placement="top" target={id}>{t('Not available for guest')}</UncontrolledTooltip>
-    </>
+    <NotAvailable
+      isDisabled={isDisabled}
+      title={title}
+      classNamePrefix="grw-not-available-for-guest"
+    >
+      {children}
+    </NotAvailable>
   );
-};
+});
+NotAvailableForGuest.displayName = 'NotAvailableForGuest';

packages/app/src/components/NotAvailableForNow.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { useTranslation } from 'next-i18next';
+
+import { NotAvailable } from './NotAvailable';
+
+
+type NotAvailableForNowProps = {
+  children: JSX.Element
+}
+
+export const NotAvailableForNow = React.memo(({ children }: NotAvailableForNowProps): JSX.Element => {
+  const { t } = useTranslation();
+
+  const title = t('Not available in this version');
+
+  return (
+    <NotAvailable
+      isDisabled
+      title={title}
+      classNamePrefix="grw-not-available-for-now"
+    >
+      {children}
+    </NotAvailable>
+  );
+});
+NotAvailableForNow.displayName = 'NotAvailableForNow';