Use ContactPills in StoriesSettingsModal
This commit is contained in:
parent
9e02a57d77
commit
206f65e67d
3 changed files with 32 additions and 53 deletions
|
@ -203,28 +203,9 @@
|
|||
|
||||
&__tags {
|
||||
margin: 0 -4px;
|
||||
}
|
||||
|
||||
&__tag {
|
||||
align-items: center;
|
||||
background: $color-gray-75;
|
||||
border-radius: 26px;
|
||||
color: $color-gray-05;
|
||||
display: inline-flex;
|
||||
padding: 4px 0;
|
||||
margin: 0 4px;
|
||||
|
||||
&__name {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
&__remove {
|
||||
@include button-reset;
|
||||
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-15);
|
||||
height: 12px;
|
||||
margin: 0 8px;
|
||||
width: 12px;
|
||||
}
|
||||
// Override .module-ContactPills
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&__name-story-avatar-container {
|
||||
|
|
|
@ -3,15 +3,20 @@
|
|||
|
||||
import type { FunctionComponent, ReactNode } from 'react';
|
||||
import React, { useRef, useEffect, Children } from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { usePrevious } from '../hooks/usePrevious';
|
||||
import { scrollToBottom } from '../util/scrollUtil';
|
||||
|
||||
type PropsType = {
|
||||
moduleClassName?: string;
|
||||
children?: ReactNode;
|
||||
};
|
||||
|
||||
export const ContactPills: FunctionComponent<PropsType> = ({ children }) => {
|
||||
export const ContactPills: FunctionComponent<PropsType> = ({
|
||||
moduleClassName,
|
||||
children,
|
||||
}) => {
|
||||
const elRef = useRef<null | HTMLDivElement>(null);
|
||||
|
||||
const childCount = Children.count(children);
|
||||
|
@ -26,7 +31,10 @@ export const ContactPills: FunctionComponent<PropsType> = ({ children }) => {
|
|||
}, [childCount, previousChildCount]);
|
||||
|
||||
return (
|
||||
<div className="module-ContactPills" ref={elRef}>
|
||||
<div
|
||||
className={classNames('module-ContactPills', moduleClassName)}
|
||||
ref={elRef}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -16,6 +16,8 @@ import { Avatar, AvatarSize } from './Avatar';
|
|||
import { Button, ButtonVariant } from './Button';
|
||||
import { Checkbox } from './Checkbox';
|
||||
import { ConfirmationDialog } from './ConfirmationDialog';
|
||||
import { ContactPills } from './ContactPills';
|
||||
import { ContactPill } from './ContactPill';
|
||||
import { ConversationList, RowType } from './ConversationList';
|
||||
import { Input } from './Input';
|
||||
import { Intl } from './Intl';
|
||||
|
@ -807,38 +809,26 @@ export const EditDistributionList = ({
|
|||
value={searchTerm}
|
||||
/>
|
||||
{selectedContacts.length ? (
|
||||
<div className="StoriesSettingsModal__tags">
|
||||
<ContactPills moduleClassName="StoriesSettingsModal__tags">
|
||||
{selectedContacts.map(contact => (
|
||||
<div className="StoriesSettingsModal__tag" key={contact.id}>
|
||||
<Avatar
|
||||
<ContactPill
|
||||
key={contact.id}
|
||||
acceptedMessageRequest={contact.acceptedMessageRequest}
|
||||
avatarPath={contact.avatarPath}
|
||||
badge={getPreferredBadge(contact.badges)}
|
||||
color={contact.color}
|
||||
conversationType={contact.type}
|
||||
firstName={contact.firstName}
|
||||
i18n={i18n}
|
||||
id={contact.id}
|
||||
isMe={contact.isMe}
|
||||
name={contact.name}
|
||||
phoneNumber={contact.phoneNumber}
|
||||
profileName={contact.profileName}
|
||||
sharedGroupNames={contact.sharedGroupNames}
|
||||
size={AvatarSize.TWENTY_EIGHT}
|
||||
theme={ThemeType.dark}
|
||||
title={contact.title}
|
||||
onClickRemove={() => toggleSelectedConversation(contact.id)}
|
||||
/>
|
||||
<span className="StoriesSettingsModal__tag__name">
|
||||
{contact.firstName ||
|
||||
contact.profileName ||
|
||||
contact.phoneNumber}
|
||||
</span>
|
||||
<button
|
||||
aria-label={i18n('StoriesSettings__remove--title', [
|
||||
contact.title,
|
||||
])}
|
||||
className="StoriesSettingsModal__tag__remove"
|
||||
onClick={() => toggleSelectedConversation(contact.id)}
|
||||
type="button"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ContactPills>
|
||||
) : undefined}
|
||||
{candidateConversations.length ? (
|
||||
<Measure bounds>
|
||||
|
|
Loading…
Reference in a new issue