mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use the new Select component everywhere

Browse source
This commit is contained in:
Josh Perez 2021-06-03 18:12:23 -04:00 committed by GitHub
parent cdf8b0b28d
commit 016ef8af79
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 53 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ts/components/Select.tsx
View file

@ -1,7 +1,7 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
import React, { ChangeEvent } from 'react';
import classNames from 'classnames';
export type Option = Readonly<{
@ -19,7 +19,7 @@ export type PropsType = Readonly<{
export function Select(props: PropsType): JSX.Element {
const { moduleClassName, value, options, onChange } = props;
const onSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
const onSelectChange = (event: ChangeEvent<HTMLSelectElement>) => {
onChange(event.target.value);
};

51
ts/components/conversation/conversation-details/GroupLinkManagement.tsx
View file

@ -9,6 +9,7 @@ import { LocalizerType } from '../../../types/Util';
import { PanelRow } from './PanelRow';
import { PanelSection } from './PanelSection';
import { AccessControlClass } from '../../../textsecure.d';
import { Select } from '../../Select';
export type PropsType = {
accessEnum: typeof AccessControlClass.AccessRequired;
@ -36,8 +37,8 @@ export const GroupLinkManagement: React.ComponentType<PropsType> = ({
}
const createEventHandler = (handleEvent: (x: boolean) => void) => {
return (event: React.ChangeEvent<HTMLSelectElement>) => {
handleEvent(event.target.value === 'true');
return (value: string) => {
handleEvent(value === 'true');
};
};
@ -57,19 +58,20 @@ export const GroupLinkManagement: React.ComponentType<PropsType> = ({
label={i18n('ConversationDetails--group-link')}
right={
isAdmin ? (
<div className="module-conversation-details-select">
<select
<Select
onChange={createEventHandler(changeHasGroupLink)}
options={[
{
text: i18n('on'),
value: i18n('on'),
},
{
text: i18n('off'),
value: i18n('off'),
},
]}
value={String(Boolean(hasGroupLink))}
>
<option value="true" aria-label={i18n('on')}>
{i18n('on')}
</option>
<option value="false" aria-label={i18n('off')}>
{i18n('off')}
</option>
</select>
</div>
/>
) : null
}
/>
@ -112,21 +114,22 @@ export const GroupLinkManagement: React.ComponentType<PropsType> = ({
info={i18n('GroupLinkManagement--approve-info')}
label={i18n('GroupLinkManagement--approve-label')}
right={
<div className="module-conversation-details-select">
<select
<Select
onChange={createEventHandler(
setAccessControlAddFromInviteLinkSetting
)}
options={[
{
text: i18n('on'),
value: i18n('on'),
},
{
text: i18n('off'),
value: i18n('off'),
},
]}
value={String(membersNeedAdminApproval)}
>
<option value="true" aria-label={i18n('on')}>
{i18n('on')}
</option>
<option value="false" aria-label={i18n('off')}>
{i18n('off')}
</option>
</select>
</div>
/>
}
/>
</PanelSection>

43
ts/components/conversation/conversation-details/GroupV2Permissions.tsx
View file

@ -10,6 +10,7 @@ import { AccessControlClass } from '../../../textsecure.d';
import { PanelRow } from './PanelRow';
import { PanelSection } from './PanelSection';
import { Select } from '../../Select';
export type PropsType = {
accessEnum: typeof AccessControlClass.AccessRequired;
@ -30,15 +31,11 @@ export const GroupV2Permissions: React.ComponentType<PropsType> = ({
throw new Error('GroupV2Permissions rendered without a conversation');
}
const updateAccessControlAttributes = (
event: React.ChangeEvent<HTMLSelectElement>
) => {
setAccessControlAttributesSetting(Number(event.target.value));
const updateAccessControlAttributes = (value: string) => {
setAccessControlAttributesSetting(Number(value));
};
const updateAccessControlMembers = (
event: React.ChangeEvent<HTMLSelectElement>
) => {
setAccessControlMembersSetting(Number(event.target.value));
const updateAccessControlMembers = (value: string) => {
setAccessControlMembersSetting(Number(value));
};
const accessControlOptions = getAccessControlOptions(accessEnum, i18n);
@ -48,36 +45,22 @@ export const GroupV2Permissions: React.ComponentType<PropsType> = ({
label={i18n('ConversationDetails--add-members-label')}
info={i18n('ConversationDetails--add-members-info')}
right={
<div className="module-conversation-details-select">
<select
<Select
onChange={updateAccessControlMembers}
value={conversation.accessControlMembers}
>
{accessControlOptions.map(({ name, value }) => (
<option aria-label={name} key={name} value={value}>
{name}
</option>
))}
</select>
</div>
options={accessControlOptions}
value={String(conversation.accessControlMembers)}
/>
}
/>
<PanelRow
label={i18n('ConversationDetails--group-info-label')}
info={i18n('ConversationDetails--group-info-info')}
right={
<div className="module-conversation-details-select">
<select
<Select
onChange={updateAccessControlAttributes}
value={conversation.accessControlAttributes}
>
{accessControlOptions.map(({ name, value }) => (
<option aria-label={name} key={name} value={value}>
{name}
</option>
))}
</select>
</div>
options={accessControlOptions}
value={String(conversation.accessControlAttributes)}
/>
}
/>
</PanelSection>

6
ts/util/getAccessControlOptions.ts
View file

@ -5,7 +5,7 @@ import { LocalizerType } from '../types/Util';
import { AccessControlClass } from '../textsecure.d';
type AccessControlOption = {
name: string;
text: string;
value: number;
};
@ -15,11 +15,11 @@ export function getAccessControlOptions(
): Array<AccessControlOption> {
return [
{
name: i18n('GroupV2--all-members'),
text: i18n('GroupV2--all-members'),
value: accessEnum.MEMBER,
},
{
name: i18n('GroupV2--only-admins'),
text: i18n('GroupV2--only-admins'),
value: accessEnum.ADMINISTRATOR,
},
];