9ac389f506
- Adds a new section under settings/notifications for adding custom multi-word keywords that get highlighted without notification - Adds a new classname for highlighting words although the styling is the same as mentions highlights - Added a few components to the ReduxFromProps pattern - Adds supported type for the hook of PluginComponent type - Add upsell for highlight without notification - Moved 'setting_item.tsx' to the components folder - Improved prop names and function structure for setting_item, setting_item_max and setting_item_min - Moved 'toggle_modal_button.tsx' to the components folder - Removed t and utility messages from a few components - Fixed bug where the tooltip was not getting rendered on restrictedButtons - Improved the mobile view of the settings modal - Adds E2E for the feature
86 строки
2.0 KiB
TypeScript
86 строки
2.0 KiB
TypeScript
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
|
// See LICENSE.txt for license information.
|
|
|
|
import React, {type ComponentType, type MouseEvent, type ReactNode} from 'react';
|
|
import {useIntl} from 'react-intl';
|
|
import {useDispatch} from 'react-redux';
|
|
|
|
import {openModal} from 'actions/views/modals';
|
|
|
|
type Props = {
|
|
ariaLabel?: string;
|
|
children: ReactNode;
|
|
modalId: string;
|
|
dialogType: ComponentType<any>;
|
|
dialogProps?: Record<string, any>;
|
|
onClick?: () => void;
|
|
className?: string;
|
|
showUnread?: boolean;
|
|
disabled?: boolean;
|
|
id?: string;
|
|
role?: string;
|
|
};
|
|
|
|
const ToggleModalButton = ({
|
|
ariaLabel,
|
|
children,
|
|
modalId,
|
|
dialogType,
|
|
dialogProps = {},
|
|
onClick,
|
|
className = '',
|
|
showUnread,
|
|
disabled,
|
|
id,
|
|
role,
|
|
}: Props) => {
|
|
const intl = useIntl();
|
|
|
|
const dispatch = useDispatch();
|
|
|
|
const show = (e: MouseEvent<HTMLButtonElement>) => {
|
|
if (e) {
|
|
e.preventDefault();
|
|
}
|
|
|
|
const modalData = {
|
|
modalId,
|
|
dialogProps,
|
|
dialogType,
|
|
};
|
|
|
|
dispatch(openModal(modalData));
|
|
};
|
|
|
|
const ariaLabelElement = ariaLabel ? intl.formatMessage({
|
|
id: 'accessibility.button.dialog',
|
|
defaultMessage: '{dialogName} dialog',
|
|
}, {
|
|
dialogName: ariaLabel,
|
|
}) : undefined;
|
|
|
|
const badge = showUnread ? <span className={'unread-badge'}/> : null;
|
|
|
|
// allow callers to provide an onClick which will be called before the modal is shown
|
|
const clickHandler = (e: MouseEvent<HTMLButtonElement>) => {
|
|
onClick?.();
|
|
show(e);
|
|
};
|
|
|
|
return (
|
|
<button
|
|
className={'style--none ' + className}
|
|
aria-label={ariaLabelElement}
|
|
onClick={clickHandler}
|
|
id={id}
|
|
disabled={disabled}
|
|
role={role}
|
|
>
|
|
{children}
|
|
{badge}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default ToggleModalButton;
|