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 {
|
&__tags {
|
||||||
margin: 0 -4px;
|
margin: 0 -4px;
|
||||||
}
|
|
||||||
|
|
||||||
&__tag {
|
// Override .module-ContactPills
|
||||||
align-items: center;
|
padding: 0;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__name-story-avatar-container {
|
&__name-story-avatar-container {
|
||||||
|
|
|
@ -3,15 +3,20 @@
|
||||||
|
|
||||||
import type { FunctionComponent, ReactNode } from 'react';
|
import type { FunctionComponent, ReactNode } from 'react';
|
||||||
import React, { useRef, useEffect, Children } from 'react';
|
import React, { useRef, useEffect, Children } from 'react';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
|
||||||
import { usePrevious } from '../hooks/usePrevious';
|
import { usePrevious } from '../hooks/usePrevious';
|
||||||
import { scrollToBottom } from '../util/scrollUtil';
|
import { scrollToBottom } from '../util/scrollUtil';
|
||||||
|
|
||||||
type PropsType = {
|
type PropsType = {
|
||||||
|
moduleClassName?: string;
|
||||||
children?: ReactNode;
|
children?: ReactNode;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const ContactPills: FunctionComponent<PropsType> = ({ children }) => {
|
export const ContactPills: FunctionComponent<PropsType> = ({
|
||||||
|
moduleClassName,
|
||||||
|
children,
|
||||||
|
}) => {
|
||||||
const elRef = useRef<null | HTMLDivElement>(null);
|
const elRef = useRef<null | HTMLDivElement>(null);
|
||||||
|
|
||||||
const childCount = Children.count(children);
|
const childCount = Children.count(children);
|
||||||
|
@ -26,7 +31,10 @@ export const ContactPills: FunctionComponent<PropsType> = ({ children }) => {
|
||||||
}, [childCount, previousChildCount]);
|
}, [childCount, previousChildCount]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="module-ContactPills" ref={elRef}>
|
<div
|
||||||
|
className={classNames('module-ContactPills', moduleClassName)}
|
||||||
|
ref={elRef}
|
||||||
|
>
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -16,6 +16,8 @@ import { Avatar, AvatarSize } from './Avatar';
|
||||||
import { Button, ButtonVariant } from './Button';
|
import { Button, ButtonVariant } from './Button';
|
||||||
import { Checkbox } from './Checkbox';
|
import { Checkbox } from './Checkbox';
|
||||||
import { ConfirmationDialog } from './ConfirmationDialog';
|
import { ConfirmationDialog } from './ConfirmationDialog';
|
||||||
|
import { ContactPills } from './ContactPills';
|
||||||
|
import { ContactPill } from './ContactPill';
|
||||||
import { ConversationList, RowType } from './ConversationList';
|
import { ConversationList, RowType } from './ConversationList';
|
||||||
import { Input } from './Input';
|
import { Input } from './Input';
|
||||||
import { Intl } from './Intl';
|
import { Intl } from './Intl';
|
||||||
|
@ -807,38 +809,26 @@ export const EditDistributionList = ({
|
||||||
value={searchTerm}
|
value={searchTerm}
|
||||||
/>
|
/>
|
||||||
{selectedContacts.length ? (
|
{selectedContacts.length ? (
|
||||||
<div className="StoriesSettingsModal__tags">
|
<ContactPills moduleClassName="StoriesSettingsModal__tags">
|
||||||
{selectedContacts.map(contact => (
|
{selectedContacts.map(contact => (
|
||||||
<div className="StoriesSettingsModal__tag" key={contact.id}>
|
<ContactPill
|
||||||
<Avatar
|
key={contact.id}
|
||||||
acceptedMessageRequest={contact.acceptedMessageRequest}
|
acceptedMessageRequest={contact.acceptedMessageRequest}
|
||||||
avatarPath={contact.avatarPath}
|
avatarPath={contact.avatarPath}
|
||||||
badge={getPreferredBadge(contact.badges)}
|
|
||||||
color={contact.color}
|
color={contact.color}
|
||||||
conversationType={contact.type}
|
firstName={contact.firstName}
|
||||||
i18n={i18n}
|
i18n={i18n}
|
||||||
|
id={contact.id}
|
||||||
isMe={contact.isMe}
|
isMe={contact.isMe}
|
||||||
|
name={contact.name}
|
||||||
|
phoneNumber={contact.phoneNumber}
|
||||||
|
profileName={contact.profileName}
|
||||||
sharedGroupNames={contact.sharedGroupNames}
|
sharedGroupNames={contact.sharedGroupNames}
|
||||||
size={AvatarSize.TWENTY_EIGHT}
|
|
||||||
theme={ThemeType.dark}
|
|
||||||
title={contact.title}
|
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}
|
) : undefined}
|
||||||
{candidateConversations.length ? (
|
{candidateConversations.length ? (
|
||||||
<Measure bounds>
|
<Measure bounds>
|
||||||
|
|
Loading…
Reference in a new issue