Page MenuHomePhabricator
Files F3372572

D5185.diff
No OneTemporary
Actions

D5185.diff
View Options

diff --git a/web/modals/threads/members/add-members-group.react.js b/web/modals/components/add-members-group.react.js
rename from web/modals/threads/members/add-members-group.react.js
rename to web/modals/components/add-members-group.react.js
--- a/web/modals/threads/members/add-members-group.react.js
+++ b/web/modals/components/add-members-group.react.js
@@ -5,7 +5,7 @@
import type { UserListItem } from 'lib/types/user-types';
import AddMembersItem from './add-members-item.react';
-import css from './members-modal.css';
+import css from './add-members.css';
type AddMemberItemGroupProps = {
+header: ?string,
diff --git a/web/modals/threads/members/add-members-item.react.js b/web/modals/components/add-members-item.react.js
rename from web/modals/threads/members/add-members-item.react.js
rename to web/modals/components/add-members-item.react.js
--- a/web/modals/threads/members/add-members-item.react.js
+++ b/web/modals/components/add-members-item.react.js
@@ -4,7 +4,7 @@
import type { UserListItem } from 'lib/types/user-types';
-import css from './members-modal.css';
+import css from './add-members.css';
type AddMembersItemProps = {
+userInfo: UserListItem,
diff --git a/web/modals/components/add-members-list.react.js b/web/modals/components/add-members-list.react.js
new file mode 100644
--- /dev/null
+++ b/web/modals/components/add-members-list.react.js
@@ -0,0 +1,40 @@
+// @flow
+
+import * as React from 'react';
+
+import type { UserListItem } from 'lib/types/user-types';
+
+import AddMembersItemGroup from './add-members-group.react';
+
+type MemberGroupItem = {
+ +header: ?string,
+ +userInfos: $ReadOnlyArray<UserListItem>,
+};
+
+type Props = {
+ +switchUser: string => void,
+ +pendingUsersToAdd: $ReadOnlySet<string>,
+ +sortedGroupedUsersList: $ReadOnlyArray<MemberGroupItem>,
+};
+
+function AddMembersList(props: Props): React.Node {
+ const { switchUser, pendingUsersToAdd, sortedGroupedUsersList } = props;
+
+ const addMembersList = React.useMemo(
+ () =>
+ sortedGroupedUsersList.map(({ header, userInfos }) => (
+ <AddMembersItemGroup
+ key={header}
+ header={header}
+ userInfos={userInfos}
+ onUserClick={switchUser}
+ usersAdded={pendingUsersToAdd}
+ />
+ )),
+ [sortedGroupedUsersList, switchUser, pendingUsersToAdd],
+ );
+
+ return addMembersList;
+}
+
+export default AddMembersList;
diff --git a/web/modals/components/add-members.css b/web/modals/components/add-members.css
new file mode 100644
--- /dev/null
+++ b/web/modals/components/add-members.css
@@ -0,0 +1,41 @@
+div.addMemberItemsGroupHeader {
+ font-size: var(--s-font-14);
+ color: var(--add-members-group-header-color);
+ margin: 16px;
+}
+
+button.addMemberItem {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ color: var(--add-members-item-color);
+ font-size: var(--l-font-18);
+ background-color: transparent;
+ border: none;
+ width: 100%;
+}
+
+button.addMemberItem:hover {
+ color: var(--add-members-item-color-hover);
+}
+
+button.addMemberItem:disabled {
+ color: var(--add-members-item-disabled-color);
+ cursor: not-allowed;
+}
+
+button.addMemberItem:hover:disabled {
+ color: var(--add-members-item-disabled-color-hover);
+}
+
+button.addMemberItem .label {
+ padding: 8px 16px;
+}
+
+button.addMemberItem .danger {
+ color: var(--add-members-remove-pending-color);
+}
+button.addMemberItem:hover .danger {
+ color: var(--add-members-remove-pending-color-hover);
+}
diff --git a/web/modals/threads/members/add-members-list.react.js b/web/modals/threads/members/add-members-list-content.react.js
rename from web/modals/threads/members/add-members-list.react.js
rename to web/modals/threads/members/add-members-list-content.react.js
--- a/web/modals/threads/members/add-members-list.react.js
+++ b/web/modals/threads/members/add-members-list-content.react.js
@@ -6,7 +6,7 @@
import type { UserListItem } from 'lib/types/user-types';
-import AddMembersItemGroup from './add-members-group.react';
+import AddMembersList from '../../components/add-members-list.react';
type Props = {
+userListItems: $ReadOnlyArray<UserListItem>,
@@ -15,7 +15,7 @@
+hasParentThread: boolean,
};
-function AddMembersList(props: Props): React.Node {
+function AddMembersListContent(props: Props): React.Node {
const {
userListItems,
pendingUsersToAdd,
@@ -67,19 +67,19 @@
membersInParentThread,
...membersNotInParentThread,
usersUnavailableToAdd,
- ].filter(Boolean),
+ ]
+ .filter(Boolean)
+ .map(([header, userInfos]) => ({ header, userInfos })),
[membersInParentThread, membersNotInParentThread, usersUnavailableToAdd],
);
- return sortedGroupedUsersList.map(([header, userInfos]) => (
- <AddMembersItemGroup
- key={header}
- header={header}
- userInfos={userInfos}
- onUserClick={switchUser}
- usersAdded={pendingUsersToAdd}
+ return (
+ <AddMembersList
+ switchUser={switchUser}
+ pendingUsersToAdd={pendingUsersToAdd}
+ sortedGroupedUsersList={sortedGroupedUsersList}
/>
- ));
+ );
}
-export default AddMembersList;
+export default AddMembersListContent;
diff --git a/web/modals/threads/members/add-members-modal.react.js b/web/modals/threads/members/add-members-modal.react.js
--- a/web/modals/threads/members/add-members-modal.react.js
+++ b/web/modals/threads/members/add-members-modal.react.js
@@ -22,7 +22,7 @@
import Label from '../../../components/label.react';
import { useSelector } from '../../../redux/redux-utils';
import SearchModal from '../../search-modal.react';
-import AddMembersList from './add-members-list.react';
+import AddMembersListContent from './add-members-list-content.react';
import css from './members-modal.css';
type ContentProps = {
@@ -139,7 +139,7 @@
<div className={css.addMembersContent}>
{labelItems}
<div className={css.addMembersListContainer}>
- <AddMembersList
+ <AddMembersListContent
userListItems={userSearchResults}
switchUser={onSwitchUser}
pendingUsersToAdd={pendingUsersToAdd}
diff --git a/web/modals/threads/members/members-modal.css b/web/modals/threads/members/members-modal.css
--- a/web/modals/threads/members/members-modal.css
+++ b/web/modals/threads/members/members-modal.css
@@ -91,45 +91,3 @@
column-gap: 16px;
margin-top: 16px;
}
-
-div.addMemberItemsGroupHeader {
- font-size: var(--s-font-14);
- color: var(--add-members-group-header-color);
- margin: 16px;
-}
-
-button.addMemberItem {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- color: var(--add-members-item-color);
- font-size: var(--l-font-18);
- background-color: transparent;
- border: none;
- width: 100%;
-}
-
-button.addMemberItem:hover {
- color: var(--add-members-item-color-hover);
-}
-
-button.addMemberItem:disabled {
- color: var(--add-members-item-disabled-color);
- cursor: not-allowed;
-}
-
-button.addMemberItem:hover:disabled {
- color: var(--add-members-item-disabled-color-hover);
-}
-
-button.addMemberItem .label {
- padding: 8px 16px;
-}
-
-button.addMemberItem .danger {
- color: var(--add-members-remove-pending-color);
-}
-button.addMemberItem:hover .danger {
- color: var(--add-members-remove-pending-color-hover);
-}

File Metadata

Mime Type
text/plain
Expires
Wed, Nov 27, 7:03 AM (20 h, 22 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2589293
Default Alt Text
D5185.diff (7 KB)

Event Timeline