Merge pull request #1314 from weseek/support/apply-bst4-UserPictureList.jsx

UserPictureList の<Tooltip>/ <OverlayTrigger>BST4化

src/client/js/app.jsx

@@ -125,9 +125,8 @@ if (pageContainer.state.pageId != null) {
     'page-comment-write':  <CommentEditorLazyRenderer />,
     'revision-toc': <TableOfContents />,
     'like-button': <LikeButton pageId={pageContainer.state.pageId} isLiked={pageContainer.state.isLiked} />,
-    // TODO: GW-333
-    // 'seen-user-list': <UserPictureList userIds={pageContainer.state.seenUserIds} />,
-    // 'liker-list': <UserPictureList userIds={pageContainer.state.likerUserIds} />,
+    'seen-user-list': <UserPictureList userIds={pageContainer.state.seenUserIds} />,
+    'liker-list': <UserPictureList userIds={pageContainer.state.likerUserIds} />,
     'bookmark-button':  <BookmarkButton pageId={pageContainer.state.pageId} crowi={appContainer} />,
     'bookmark-button-lg':  <BookmarkButton pageId={pageContainer.state.pageId} crowi={appContainer} size="lg" />,
     'rename-page-name-input':  <PagePathAutoComplete crowi={appContainer} initializedPath={pageContainer.state.path} />,

src/client/js/components/User/UserPictureList.jsx

@@ -1,10 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
-// TODO: GW-333
-// import OverlayTrigger from 'react-bootstrap/es/OverlayTrigger';
-// import Tooltip from 'react-bootstrap/es/Tooltip';
-
+import { UncontrolledTooltip } from 'reactstrap';
 import { createSubscribedElement } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
 
@@ -30,15 +26,18 @@ class UserPictureList extends React.Component {
 
   render() {
     const users = this.state.users.map((user) => {
-      // create Tooltip
-      const tooltip = <Tooltip id={`tooltip-${user._id}`}>@{user.username}<br />{user.name}</Tooltip>;
-
       return (
-        <OverlayTrigger key={user._id} overlay={tooltip} placement="bottom">
-          <span key={`span-${user._id}`}>{/* workaround from https://github.com/react-bootstrap/react-bootstrap/issues/2208#issuecomment-301737531 */}
-            <UserPicture user={user} size="xs" ref={`userPicture-${user._id}`} />
-          </span>
-        </OverlayTrigger>
+        <>
+          {/* workaround from https://github.com/react-bootstrap/react-bootstrap/issues/2208#issuecomment-301737531 */}
+          <span id={`span-${user._id}`}><UserPicture user={user} size="xs" ref={`userPicture-${user._id}`} /></span>
+          <UncontrolledTooltip
+            id={`tooltip-${user._id}`}
+            placement="bottom"
+            target={`span-${user._id}`}
+          >
+            @{user.username}<br />{user.name}
+          </UncontrolledTooltip>
+        </>
       );
     });