fix: added type for all accessibility ids with react.d.ts
Audric Ackermann
1 year ago
parent
0a4e3041de
commit
5867c5af7f
@ -1,63 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { SessionIcon, SessionIconType } from '../icon';
|
||||
|
||||
import { SessionDropdownItem, SessionDropDownItemType } from './SessionDropdownItem';
|
||||
|
||||
// THIS IS DROPDOWN ACCORDION STYLE OPTIONS SELECTOR ELEMENT, NOT A CONTEXTMENU
|
||||
|
||||
type Props = {
|
||||
label: string;
|
||||
onClick?: any;
|
||||
expanded?: boolean;
|
||||
options: Array<{
|
||||
content: string;
|
||||
id?: string;
|
||||
icon?: SessionIconType | null;
|
||||
type?: SessionDropDownItemType;
|
||||
active?: boolean;
|
||||
onClick?: any;
|
||||
}>;
|
||||
dataTestId?: string;
|
||||
};
|
||||
|
||||
export const SessionDropdown = (props: Props) => {
|
||||
const { label, options, dataTestId } = props;
|
||||
const [expanded, setExpanded] = useState(!!props.expanded);
|
||||
const chevronOrientation = expanded ? 180 : 0;
|
||||
|
||||
return (
|
||||
<div className="session-dropdown" data-testid={dataTestId}>
|
||||
<div
|
||||
className="session-dropdown__label"
|
||||
onClick={() => {
|
||||
setExpanded(!expanded);
|
||||
}}
|
||||
role="button"
|
||||
>
|
||||
{label}
|
||||
<SessionIcon iconType="chevron" iconSize="small" iconRotation={chevronOrientation} />
|
||||
</div>
|
||||
|
||||
{expanded && (
|
||||
<div className="session-dropdown__list-container">
|
||||
{options.map((item: any) => {
|
||||
return (
|
||||
<SessionDropdownItem
|
||||
key={item.content}
|
||||
dataTestId={`dropdownitem-${item.content.replace(' ', '-')}`}
|
||||
content={item.content}
|
||||
icon={item.icon}
|
||||
type={item.type}
|
||||
active={item.active}
|
||||
onClick={() => {
|
||||
setExpanded(false);
|
||||
item.onClick();
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,44 +0,0 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { SessionIcon, SessionIconType } from '../icon';
|
||||
|
||||
export enum SessionDropDownItemType {
|
||||
Default = 'default',
|
||||
Danger = 'danger',
|
||||
}
|
||||
|
||||
type Props = {
|
||||
content: string;
|
||||
type: SessionDropDownItemType;
|
||||
icon: SessionIconType | null;
|
||||
active: boolean;
|
||||
onClick: any;
|
||||
dataTestId?: string;
|
||||
};
|
||||
|
||||
export const SessionDropdownItem = (props: Props) => {
|
||||
const clickHandler = (e: any) => {
|
||||
if (props.onClick) {
|
||||
e.stopPropagation();
|
||||
props.onClick();
|
||||
}
|
||||
};
|
||||
|
||||
const { content, type, icon, active, dataTestId } = props;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
'session-dropdown__item',
|
||||
active ? 'active' : '',
|
||||
type || SessionDropDownItemType.Default
|
||||
)}
|
||||
role="button"
|
||||
onClick={clickHandler}
|
||||
data-testid={dataTestId}
|
||||
>
|
||||
{icon ? <SessionIcon iconType={icon} iconSize="small" /> : ''}
|
||||
<div className="item-content">{content}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,202 @@
|
||||
import 'react';
|
||||
|
||||
/**
|
||||
* WARNING: if you change something here, you will most likely break some integration tests.
|
||||
* So be sure to check with QA first.
|
||||
*/
|
||||
|
||||
declare module 'react' {
|
||||
type SessionDataTestId =
|
||||
| 'group_member_status_text'
|
||||
| 'group_member_name'
|
||||
| 'loading-spinner'
|
||||
| 'session-toast'
|
||||
| 'loading-animation'
|
||||
| 'your-session-id'
|
||||
| 'chooser-new-community'
|
||||
| 'chooser-new-group'
|
||||
| 'chooser-new-conversation-button'
|
||||
| 'new-conversation-button'
|
||||
| 'module-conversation__user__profile-name'
|
||||
| 'message-request-banner'
|
||||
| 'leftpane-section-container'
|
||||
| 'group-name-input'
|
||||
| 'recovery-phrase-seed-modal'
|
||||
| 'password-input-reconfirm'
|
||||
| 'conversation-header-subtitle'
|
||||
| 'password-input'
|
||||
| 'nickname-input'
|
||||
| 'image-upload-click'
|
||||
| 'profile-name-input'
|
||||
| 'your-profile-name'
|
||||
| 'edit-profile-dialog'
|
||||
| 'image-upload-section'
|
||||
| 'right-panel-group-name'
|
||||
| 'control-message'
|
||||
| 'header-conversation-name'
|
||||
| 'disappear-messages-type-and-time'
|
||||
| 'message-input'
|
||||
| 'messages-container'
|
||||
| 'decline-and-block-message-request'
|
||||
| 'session-dropdown'
|
||||
| 'path-light-container'
|
||||
| 'add-user-button'
|
||||
| 'back-button-conversation-options'
|
||||
| 'send-message-button'
|
||||
| 'scroll-to-bottom-button'
|
||||
| 'end-call'
|
||||
| 'modal-close-button'
|
||||
| 'end-voice-message'
|
||||
| 'back-button-message-details'
|
||||
| 'edit-profile-icon'
|
||||
| 'microphone-button'
|
||||
| 'call-button'
|
||||
| 'attachments-button'
|
||||
|
||||
// generic button types
|
||||
| 'emoji-button'
|
||||
| 'reveal-blocked-user-settings'
|
||||
|
||||
// left pane section types
|
||||
| 'theme-section'
|
||||
| 'settings-section'
|
||||
| 'message-section'
|
||||
| 'privacy-section'
|
||||
|
||||
// settings menu item types
|
||||
| 'messageRequests-settings-menu-item' // needs to be tweaked
|
||||
| 'recoveryPhrase-settings-menu-item' // needs to be tweaked
|
||||
| 'privacy-settings-menu-item' // needs to be tweaked
|
||||
| 'notifications-settings-menu-item' // needs to be tweaked
|
||||
| 'conversations-settings-menu-item' // needs to be tweaked
|
||||
| 'appearance-settings-menu-item' // needs to be tweaked
|
||||
| 'help-settings-menu-item' // needs to be tweaked
|
||||
| 'permissions-settings-menu-item' // needs to be tweaked
|
||||
| 'ClearData-settings-menu-item' // TODO AUDRIC needs to be tweaked
|
||||
|
||||
// timer options
|
||||
| 'time-option-0'
|
||||
| 'time-option-5'
|
||||
| 'time-option-10'
|
||||
| 'time-option-30'
|
||||
| 'time-option-60'
|
||||
| 'time-option-300'
|
||||
| 'time-option-1800'
|
||||
| 'time-option-3600'
|
||||
| 'time-option-21600'
|
||||
| 'time-option-43200'
|
||||
| 'time-option-86400'
|
||||
| 'time-option-604800'
|
||||
| 'time-option-1209600'
|
||||
|
||||
// generic readably message (not control message)
|
||||
| 'message-content'
|
||||
|
||||
// control message types
|
||||
| 'message-request-response-message'
|
||||
| 'interaction-notification'
|
||||
| 'data-extraction-notification'
|
||||
| 'group-update-message'
|
||||
| 'disappear-control-message'
|
||||
|
||||
// subtle control message types
|
||||
| 'group-request-explanation'
|
||||
| 'conversation-request-explanation'
|
||||
| 'group-invite-control-message'
|
||||
| 'empty-conversation-notification'
|
||||
|
||||
// call notification types
|
||||
| 'call-notification-missed-call'
|
||||
| 'call-notification-started-call'
|
||||
| 'call-notification-answered-a-call'
|
||||
|
||||
// disappear options
|
||||
| 'disappear-after-send-option'
|
||||
| 'disappear-after-read-option'
|
||||
| 'disappear-legacy-option'
|
||||
| 'disappear-off-option'
|
||||
|
||||
// settings toggle and buttons
|
||||
| 'remove-password-settings-button'
|
||||
| 'change-password-settings-button'
|
||||
| 'enable-read-receipts'
|
||||
| 'set-password-button'
|
||||
| 'enable-read-receipts'
|
||||
| 'enable-calls'
|
||||
| 'enable-microphone'
|
||||
| 'enable-follow-system-theme'
|
||||
| 'unblock-button-settings-screen'
|
||||
| 'save-attachment-from-details'
|
||||
| 'resend-msg-from-details'
|
||||
| 'reply-to-msg-from-details'
|
||||
| 'leave-group-button'
|
||||
| 'disappearing-messages'
|
||||
| 'group-members'
|
||||
| 'remove-moderators'
|
||||
| 'add-moderators'
|
||||
| 'edit-group-name'
|
||||
|
||||
// SessionRadioGroup & SessionRadio
|
||||
| 'password-input-confirm'
|
||||
| 'msg-status'
|
||||
| 'input-device_and_network'
|
||||
| 'label-device_and_network'
|
||||
| 'input-device_only'
|
||||
| 'label-device_only'
|
||||
| 'input-deleteForEveryone'
|
||||
| 'label-deleteForEveryone'
|
||||
| 'input-deleteJustForMe'
|
||||
| 'label-deleteJustForMe'
|
||||
| 'input-enterForSend'
|
||||
| 'label-enterForSend'
|
||||
| 'input-enterForNewLine'
|
||||
| 'label-enterForNewLine'
|
||||
| 'input-message'
|
||||
| 'label-message'
|
||||
| 'input-name'
|
||||
| 'label-name'
|
||||
| 'input-count'
|
||||
| 'label-count'
|
||||
|
||||
// to sort
|
||||
| 'restore-using-recovery'
|
||||
| 'link-device'
|
||||
| 'continue-session-button'
|
||||
| 'next-new-conversation-button'
|
||||
| 'reveal-recovery-phrase'
|
||||
| 'resend_invite_button'
|
||||
| 'session-confirm-cancel-button'
|
||||
| 'session-confirm-ok-button'
|
||||
| 'confirm-nickname'
|
||||
| 'path-light-svg'
|
||||
| 'group_member_status_text'
|
||||
| 'group_member_name'
|
||||
| 'resend_promote_button'
|
||||
| 'next-button'
|
||||
| 'save-button-profile-update'
|
||||
| 'save-button-profile-update'
|
||||
| 'copy-button-profile-update'
|
||||
| 'disappear-set-button'
|
||||
| 'decline-message-request'
|
||||
| 'accept-message-request'
|
||||
| 'mentions-popup-row'
|
||||
| 'session-id-signup'
|
||||
| 'three-dot-loading-animation'
|
||||
| 'recovery-phrase-input'
|
||||
| 'display-name-input'
|
||||
| 'new-session-conversation'
|
||||
| 'new-closed-group-name'
|
||||
| 'leftpane-primary-avatar'
|
||||
| 'img-leftpane-primary-avatar'
|
||||
| 'conversation-options-avatar'
|
||||
// modules profile name
|
||||
| 'module-conversation__user__profile-name'
|
||||
| 'module-message-search-result__header__name__profile-name'
|
||||
| 'module-message__author__profile-name'
|
||||
| 'module-contact-name__profile-name'
|
||||
| 'delete-from-details';
|
||||
|
||||
interface HTMLAttributes {
|
||||
'data-testid'?: SessionDataTestId;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
/**
|
||||
* Returns a string with all spaces replaced to '-'.
|
||||
* A datatestid cannot have spaces on desktop, so we use this to format them accross the app.
|
||||
*
|
||||
*/
|
||||
export function strToDataTestId(input: string) {
|
||||
return input.replaceAll(' ', '-');
|
||||
}
|
||||
Loading…
Reference in New Issue