migrate components stickers to eslint
This commit is contained in:
Chris Svenningsen
Josh Perez
parent
2ade4acd52
commit
5364de90a4
15 changed files with 225 additions and 203 deletions
|
|
@ -64,171 +64,175 @@ function renderBody({ pack, i18n }: Props) {
|
|||
);
|
||||
}
|
||||
|
||||
export const StickerPreviewModal = React.memo(
|
||||
// tslint:disable-next-line max-func-body-length
|
||||
(props: Props) => {
|
||||
const {
|
||||
onClose,
|
||||
pack,
|
||||
i18n,
|
||||
downloadStickerPack,
|
||||
installStickerPack,
|
||||
uninstallStickerPack,
|
||||
} = props;
|
||||
const focusRef = React.useRef<HTMLButtonElement>(null);
|
||||
const [root, setRoot] = React.useState<HTMLElement | null>(null);
|
||||
const [confirmingUninstall, setConfirmingUninstall] = React.useState(false);
|
||||
export const StickerPreviewModal = React.memo((props: Props) => {
|
||||
const {
|
||||
onClose,
|
||||
pack,
|
||||
i18n,
|
||||
downloadStickerPack,
|
||||
installStickerPack,
|
||||
uninstallStickerPack,
|
||||
} = props;
|
||||
const focusRef = React.useRef<HTMLButtonElement>(null);
|
||||
const [root, setRoot] = React.useState<HTMLElement | null>(null);
|
||||
const [confirmingUninstall, setConfirmingUninstall] = React.useState(false);
|
||||
|
||||
// Restore focus on teardown
|
||||
useRestoreFocus(focusRef, root);
|
||||
// Restore focus on teardown
|
||||
useRestoreFocus(focusRef, root);
|
||||
|
||||
React.useEffect(() => {
|
||||
const div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
setRoot(div);
|
||||
React.useEffect(() => {
|
||||
const div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
setRoot(div);
|
||||
|
||||
return () => {
|
||||
document.body.removeChild(div);
|
||||
};
|
||||
}, []);
|
||||
return () => {
|
||||
document.body.removeChild(div);
|
||||
};
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (pack && pack.status === 'known') {
|
||||
downloadStickerPack(pack.id, pack.key);
|
||||
}
|
||||
if (
|
||||
pack &&
|
||||
pack.status === 'error' &&
|
||||
(pack.attemptedStatus === 'downloaded' ||
|
||||
pack.attemptedStatus === 'installed')
|
||||
) {
|
||||
downloadStickerPack(pack.id, pack.key, {
|
||||
finalStatus: pack.attemptedStatus,
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
React.useEffect(() => {
|
||||
if (pack && pack.status === 'known') {
|
||||
downloadStickerPack(pack.id, pack.key);
|
||||
}
|
||||
if (
|
||||
pack &&
|
||||
pack.status === 'error' &&
|
||||
(pack.attemptedStatus === 'downloaded' ||
|
||||
pack.attemptedStatus === 'installed')
|
||||
) {
|
||||
downloadStickerPack(pack.id, pack.key, {
|
||||
finalStatus: pack.attemptedStatus,
|
||||
});
|
||||
}
|
||||
// We only want to attempt downloads on initial load
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
const isInstalled = Boolean(pack && pack.status === 'installed');
|
||||
const handleToggleInstall = React.useCallback(() => {
|
||||
if (!pack) {
|
||||
return;
|
||||
}
|
||||
if (isInstalled) {
|
||||
setConfirmingUninstall(true);
|
||||
} else if (pack.status === 'ephemeral') {
|
||||
downloadStickerPack(pack.id, pack.key, { finalStatus: 'installed' });
|
||||
onClose();
|
||||
} else {
|
||||
installStickerPack(pack.id, pack.key);
|
||||
const isInstalled = Boolean(pack && pack.status === 'installed');
|
||||
const handleToggleInstall = React.useCallback(() => {
|
||||
if (!pack) {
|
||||
return;
|
||||
}
|
||||
if (isInstalled) {
|
||||
setConfirmingUninstall(true);
|
||||
} else if (pack.status === 'ephemeral') {
|
||||
downloadStickerPack(pack.id, pack.key, { finalStatus: 'installed' });
|
||||
onClose();
|
||||
} else {
|
||||
installStickerPack(pack.id, pack.key);
|
||||
onClose();
|
||||
}
|
||||
}, [
|
||||
downloadStickerPack,
|
||||
installStickerPack,
|
||||
isInstalled,
|
||||
onClose,
|
||||
pack,
|
||||
setConfirmingUninstall,
|
||||
]);
|
||||
|
||||
const handleUninstall = React.useCallback(() => {
|
||||
if (!pack) {
|
||||
return;
|
||||
}
|
||||
uninstallStickerPack(pack.id, pack.key);
|
||||
setConfirmingUninstall(false);
|
||||
// onClose is called by the confirmation modal
|
||||
}, [uninstallStickerPack, setConfirmingUninstall, pack]);
|
||||
|
||||
React.useEffect(() => {
|
||||
const handler = ({ key }: KeyboardEvent) => {
|
||||
if (key === 'Escape') {
|
||||
onClose();
|
||||
}
|
||||
}, [
|
||||
isInstalled,
|
||||
pack,
|
||||
setConfirmingUninstall,
|
||||
installStickerPack,
|
||||
onClose,
|
||||
]);
|
||||
};
|
||||
|
||||
const handleUninstall = React.useCallback(() => {
|
||||
if (!pack) {
|
||||
return;
|
||||
document.addEventListener('keydown', handler);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handler);
|
||||
};
|
||||
}, [onClose]);
|
||||
|
||||
const handleClickToClose = React.useCallback(
|
||||
(e: React.MouseEvent) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
onClose();
|
||||
}
|
||||
uninstallStickerPack(pack.id, pack.key);
|
||||
setConfirmingUninstall(false);
|
||||
// onClose is called by the confirmation modal
|
||||
}, [uninstallStickerPack, setConfirmingUninstall, pack]);
|
||||
},
|
||||
[onClose]
|
||||
);
|
||||
|
||||
React.useEffect(() => {
|
||||
const handler = ({ key }: KeyboardEvent) => {
|
||||
if (key === 'Escape') {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', handler);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handler);
|
||||
};
|
||||
}, [onClose]);
|
||||
|
||||
const handleClickToClose = React.useCallback(
|
||||
(e: React.MouseEvent) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
onClose();
|
||||
}
|
||||
},
|
||||
[onClose]
|
||||
);
|
||||
|
||||
return root
|
||||
? createPortal(
|
||||
<div
|
||||
// Not really a button. Just a background which can be clicked to close modal
|
||||
role="button"
|
||||
className="module-sticker-manager__preview-modal__overlay"
|
||||
onClick={handleClickToClose}
|
||||
>
|
||||
{confirmingUninstall ? (
|
||||
<ConfirmationDialog
|
||||
i18n={i18n}
|
||||
onClose={onClose}
|
||||
actions={[
|
||||
{
|
||||
style: 'negative',
|
||||
text: i18n('stickers--StickerManager--Uninstall'),
|
||||
action: handleUninstall,
|
||||
},
|
||||
]}
|
||||
>
|
||||
{i18n('stickers--StickerManager--UninstallWarning')}
|
||||
</ConfirmationDialog>
|
||||
) : (
|
||||
<div className="module-sticker-manager__preview-modal__container">
|
||||
<header className="module-sticker-manager__preview-modal__container__header">
|
||||
<h2 className="module-sticker-manager__preview-modal__container__header__text">
|
||||
{i18n('stickers--StickerPreview--Title')}
|
||||
</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="module-sticker-manager__preview-modal__container__header__close-button"
|
||||
/>
|
||||
</header>
|
||||
{renderBody(props)}
|
||||
{pack && pack.status !== 'error' ? (
|
||||
<div className="module-sticker-manager__preview-modal__container__meta-overlay">
|
||||
<div className="module-sticker-manager__preview-modal__container__meta-overlay__info">
|
||||
<h3 className="module-sticker-manager__preview-modal__container__meta-overlay__info__title">
|
||||
{pack.title}
|
||||
{pack.isBlessed ? (
|
||||
<span className="module-sticker-manager__preview-modal__container__meta-overlay__info__blessed-icon" />
|
||||
) : null}
|
||||
</h3>
|
||||
<h4 className="module-sticker-manager__preview-modal__container__meta-overlay__info__author">
|
||||
{pack.author}
|
||||
</h4>
|
||||
</div>
|
||||
<div className="module-sticker-manager__preview-modal__container__meta-overlay__install">
|
||||
{pack.status === 'pending' ? (
|
||||
<Spinner svgSize="small" size="14px" />
|
||||
) : (
|
||||
<StickerPackInstallButton
|
||||
ref={focusRef}
|
||||
installed={isInstalled}
|
||||
i18n={i18n}
|
||||
onClick={handleToggleInstall}
|
||||
blue={true}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
return root
|
||||
? createPortal(
|
||||
// Not really a button. Just a background which can be clicked to close modal
|
||||
// eslint-disable-next-line max-len
|
||||
// eslint-disable-next-line jsx-a11y/interactive-supports-focus, jsx-a11y/click-events-have-key-events
|
||||
<div
|
||||
role="button"
|
||||
className="module-sticker-manager__preview-modal__overlay"
|
||||
onClick={handleClickToClose}
|
||||
>
|
||||
{confirmingUninstall ? (
|
||||
<ConfirmationDialog
|
||||
i18n={i18n}
|
||||
onClose={onClose}
|
||||
actions={[
|
||||
{
|
||||
style: 'negative',
|
||||
text: i18n('stickers--StickerManager--Uninstall'),
|
||||
action: handleUninstall,
|
||||
},
|
||||
]}
|
||||
>
|
||||
{i18n('stickers--StickerManager--UninstallWarning')}
|
||||
</ConfirmationDialog>
|
||||
) : (
|
||||
<div className="module-sticker-manager__preview-modal__container">
|
||||
<header className="module-sticker-manager__preview-modal__container__header">
|
||||
<h2 className="module-sticker-manager__preview-modal__container__header__text">
|
||||
{i18n('stickers--StickerPreview--Title')}
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="module-sticker-manager__preview-modal__container__header__close-button"
|
||||
aria-label={i18n('close')}
|
||||
/>
|
||||
</header>
|
||||
{renderBody(props)}
|
||||
{pack && pack.status !== 'error' ? (
|
||||
<div className="module-sticker-manager__preview-modal__container__meta-overlay">
|
||||
<div className="module-sticker-manager__preview-modal__container__meta-overlay__info">
|
||||
<h3 className="module-sticker-manager__preview-modal__container__meta-overlay__info__title">
|
||||
{pack.title}
|
||||
{pack.isBlessed ? (
|
||||
<span className="module-sticker-manager__preview-modal__container__meta-overlay__info__blessed-icon" />
|
||||
) : null}
|
||||
</h3>
|
||||
<h4 className="module-sticker-manager__preview-modal__container__meta-overlay__info__author">
|
||||
{pack.author}
|
||||
</h4>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
</div>,
|
||||
root
|
||||
)
|
||||
: null;
|
||||
}
|
||||
);
|
||||
<div className="module-sticker-manager__preview-modal__container__meta-overlay__install">
|
||||
{pack.status === 'pending' ? (
|
||||
<Spinner svgSize="small" size="14px" />
|
||||
) : (
|
||||
<StickerPackInstallButton
|
||||
ref={focusRef}
|
||||
installed={isInstalled}
|
||||
i18n={i18n}
|
||||
onClick={handleToggleInstall}
|
||||
blue
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
</div>,
|
||||
root
|
||||
)
|
||||
: null;
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue