Update eslint to 8.27.0
This commit is contained in:
Fedor Indutny
GitHub
parent
c8fb43a846
commit
98ef4c627a
499 changed files with 8995 additions and 8494 deletions
|
|
@ -45,330 +45,325 @@ export type OwnProps = {
|
|||
|
||||
export type Props = OwnProps;
|
||||
|
||||
export const StickerButton = React.memo(
|
||||
({
|
||||
className,
|
||||
i18n,
|
||||
clearInstalledStickerPack,
|
||||
onClickAddPack,
|
||||
onPickSticker,
|
||||
recentStickers,
|
||||
onOpenStateChanged,
|
||||
receivedPacks,
|
||||
installedPack,
|
||||
installedPacks,
|
||||
blessedPacks,
|
||||
knownPacks,
|
||||
showIntroduction,
|
||||
clearShowIntroduction,
|
||||
showPickerHint,
|
||||
clearShowPickerHint,
|
||||
position = 'top-end',
|
||||
theme,
|
||||
}: Props) => {
|
||||
const [open, internalSetOpen] = React.useState(false);
|
||||
export const StickerButton = React.memo(function StickerButtonInner({
|
||||
className,
|
||||
i18n,
|
||||
clearInstalledStickerPack,
|
||||
onClickAddPack,
|
||||
onPickSticker,
|
||||
recentStickers,
|
||||
onOpenStateChanged,
|
||||
receivedPacks,
|
||||
installedPack,
|
||||
installedPacks,
|
||||
blessedPacks,
|
||||
knownPacks,
|
||||
showIntroduction,
|
||||
clearShowIntroduction,
|
||||
showPickerHint,
|
||||
clearShowPickerHint,
|
||||
position = 'top-end',
|
||||
theme,
|
||||
}: Props) {
|
||||
const [open, internalSetOpen] = React.useState(false);
|
||||
|
||||
const setOpen = React.useCallback(
|
||||
(value: boolean) => {
|
||||
internalSetOpen(value);
|
||||
if (onOpenStateChanged) {
|
||||
onOpenStateChanged(value);
|
||||
}
|
||||
},
|
||||
[internalSetOpen, onOpenStateChanged]
|
||||
);
|
||||
|
||||
const [popperRoot, setPopperRoot] = React.useState<HTMLElement | null>(
|
||||
null
|
||||
);
|
||||
const buttonRef = React.useRef<HTMLButtonElement | null>(null);
|
||||
const refMerger = useRefMerger();
|
||||
|
||||
const handleClickButton = React.useCallback(() => {
|
||||
// Clear tooltip state
|
||||
clearInstalledStickerPack();
|
||||
clearShowIntroduction();
|
||||
|
||||
// Handle button click
|
||||
if (installedPacks.length === 0) {
|
||||
onClickAddPack?.();
|
||||
} else if (popperRoot) {
|
||||
setOpen(false);
|
||||
} else {
|
||||
setOpen(true);
|
||||
const setOpen = React.useCallback(
|
||||
(value: boolean) => {
|
||||
internalSetOpen(value);
|
||||
if (onOpenStateChanged) {
|
||||
onOpenStateChanged(value);
|
||||
}
|
||||
}, [
|
||||
clearInstalledStickerPack,
|
||||
clearShowIntroduction,
|
||||
installedPacks,
|
||||
onClickAddPack,
|
||||
popperRoot,
|
||||
setOpen,
|
||||
]);
|
||||
},
|
||||
[internalSetOpen, onOpenStateChanged]
|
||||
);
|
||||
|
||||
const handlePickSticker = React.useCallback(
|
||||
(packId: string, stickerId: number, url: string) => {
|
||||
setOpen(false);
|
||||
onPickSticker(packId, stickerId, url);
|
||||
},
|
||||
[setOpen, onPickSticker]
|
||||
);
|
||||
const [popperRoot, setPopperRoot] = React.useState<HTMLElement | null>(null);
|
||||
const buttonRef = React.useRef<HTMLButtonElement | null>(null);
|
||||
const refMerger = useRefMerger();
|
||||
|
||||
const handleClose = React.useCallback(() => {
|
||||
setOpen(false);
|
||||
}, [setOpen]);
|
||||
const handleClickButton = React.useCallback(() => {
|
||||
// Clear tooltip state
|
||||
clearInstalledStickerPack();
|
||||
clearShowIntroduction();
|
||||
|
||||
const handleClickAddPack = React.useCallback(() => {
|
||||
setOpen(false);
|
||||
if (showPickerHint) {
|
||||
clearShowPickerHint();
|
||||
}
|
||||
// Handle button click
|
||||
if (installedPacks.length === 0) {
|
||||
onClickAddPack?.();
|
||||
}, [onClickAddPack, showPickerHint, setOpen, clearShowPickerHint]);
|
||||
} else if (popperRoot) {
|
||||
setOpen(false);
|
||||
} else {
|
||||
setOpen(true);
|
||||
}
|
||||
}, [
|
||||
clearInstalledStickerPack,
|
||||
clearShowIntroduction,
|
||||
installedPacks,
|
||||
onClickAddPack,
|
||||
popperRoot,
|
||||
setOpen,
|
||||
]);
|
||||
|
||||
const handleClearIntroduction = React.useCallback(() => {
|
||||
clearInstalledStickerPack();
|
||||
clearShowIntroduction();
|
||||
}, [clearInstalledStickerPack, clearShowIntroduction]);
|
||||
const handlePickSticker = React.useCallback(
|
||||
(packId: string, stickerId: number, url: string) => {
|
||||
setOpen(false);
|
||||
onPickSticker(packId, stickerId, url);
|
||||
},
|
||||
[setOpen, onPickSticker]
|
||||
);
|
||||
|
||||
// Create popper root and handle outside clicks
|
||||
React.useEffect(() => {
|
||||
if (open) {
|
||||
const root = document.createElement('div');
|
||||
setPopperRoot(root);
|
||||
document.body.appendChild(root);
|
||||
const handleClose = React.useCallback(() => {
|
||||
setOpen(false);
|
||||
}, [setOpen]);
|
||||
|
||||
return () => {
|
||||
document.body.removeChild(root);
|
||||
setPopperRoot(null);
|
||||
};
|
||||
}
|
||||
const handleClickAddPack = React.useCallback(() => {
|
||||
setOpen(false);
|
||||
if (showPickerHint) {
|
||||
clearShowPickerHint();
|
||||
}
|
||||
onClickAddPack?.();
|
||||
}, [onClickAddPack, showPickerHint, setOpen, clearShowPickerHint]);
|
||||
|
||||
return noop;
|
||||
}, [open, setOpen, setPopperRoot]);
|
||||
const handleClearIntroduction = React.useCallback(() => {
|
||||
clearInstalledStickerPack();
|
||||
clearShowIntroduction();
|
||||
}, [clearInstalledStickerPack, clearShowIntroduction]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!open) {
|
||||
return noop;
|
||||
}
|
||||
|
||||
return handleOutsideClick(
|
||||
target => {
|
||||
const targetElement = target as HTMLElement;
|
||||
const targetClassName = targetElement
|
||||
? targetElement.className || ''
|
||||
: '';
|
||||
|
||||
// We need to special-case sticker picker header buttons, because they can
|
||||
// disappear after being clicked, which breaks the .contains() check below.
|
||||
const isMissingButtonClass =
|
||||
!targetClassName ||
|
||||
targetClassName.indexOf('module-sticker-picker__header__button') <
|
||||
0;
|
||||
|
||||
if (!isMissingButtonClass) {
|
||||
return false;
|
||||
}
|
||||
|
||||
setOpen(false);
|
||||
return true;
|
||||
},
|
||||
{
|
||||
containerElements: [popperRoot, buttonRef],
|
||||
name: 'StickerButton',
|
||||
}
|
||||
);
|
||||
}, [open, popperRoot, setOpen]);
|
||||
|
||||
// Install keyboard shortcut to open sticker picker
|
||||
React.useEffect(() => {
|
||||
const handleKeydown = (event: KeyboardEvent) => {
|
||||
const { ctrlKey, metaKey, shiftKey } = event;
|
||||
const commandKey = get(window, 'platform') === 'darwin' && metaKey;
|
||||
const controlKey = get(window, 'platform') !== 'darwin' && ctrlKey;
|
||||
const commandOrCtrl = commandKey || controlKey;
|
||||
const key = KeyboardLayout.lookup(event);
|
||||
|
||||
// We don't want to open up if the conversation has any panels open
|
||||
const panels = document.querySelectorAll('.conversation .panel');
|
||||
if (panels && panels.length > 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (commandOrCtrl && shiftKey && (key === 's' || key === 'S')) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
setOpen(!open);
|
||||
}
|
||||
};
|
||||
document.addEventListener('keydown', handleKeydown);
|
||||
// Create popper root and handle outside clicks
|
||||
React.useEffect(() => {
|
||||
if (open) {
|
||||
const root = document.createElement('div');
|
||||
setPopperRoot(root);
|
||||
document.body.appendChild(root);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handleKeydown);
|
||||
document.body.removeChild(root);
|
||||
setPopperRoot(null);
|
||||
};
|
||||
}, [open, setOpen]);
|
||||
|
||||
// Clear the installed pack after one minute
|
||||
React.useEffect(() => {
|
||||
if (installedPack) {
|
||||
const timerId = setTimeout(clearInstalledStickerPack, 10 * 1000);
|
||||
|
||||
return () => {
|
||||
clearTimeout(timerId);
|
||||
};
|
||||
}
|
||||
|
||||
return noop;
|
||||
}, [installedPack, clearInstalledStickerPack]);
|
||||
|
||||
if (
|
||||
countStickers({
|
||||
knownPacks,
|
||||
blessedPacks,
|
||||
installedPacks,
|
||||
receivedPacks,
|
||||
}) === 0
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Manager>
|
||||
<Reference>
|
||||
{({ ref }) => (
|
||||
<button
|
||||
type="button"
|
||||
ref={refMerger(buttonRef, ref)}
|
||||
onClick={handleClickButton}
|
||||
className={classNames(
|
||||
{
|
||||
'module-sticker-button__button': true,
|
||||
'module-sticker-button__button--active': open,
|
||||
},
|
||||
className
|
||||
)}
|
||||
aria-label={i18n('stickers--StickerPicker--Open')}
|
||||
/>
|
||||
)}
|
||||
</Reference>
|
||||
{!open && !showIntroduction && installedPack ? (
|
||||
<Popper
|
||||
placement={position}
|
||||
key={installedPack.id}
|
||||
modifiers={[offsetDistanceModifier(6)]}
|
||||
>
|
||||
{({ ref, style, placement, arrowProps }) => (
|
||||
<div className={theme ? themeClassName(theme) : undefined}>
|
||||
<button
|
||||
type="button"
|
||||
ref={ref}
|
||||
style={style}
|
||||
className="module-sticker-button__tooltip"
|
||||
onClick={clearInstalledStickerPack}
|
||||
>
|
||||
{installedPack.cover ? (
|
||||
<img
|
||||
className="module-sticker-button__tooltip__image"
|
||||
src={installedPack.cover.url}
|
||||
alt={installedPack.title}
|
||||
/>
|
||||
) : (
|
||||
<div className="module-sticker-button__tooltip__image-placeholder" />
|
||||
)}
|
||||
<span className="module-sticker-button__tooltip__text">
|
||||
<span className="module-sticker-button__tooltip__text__title">
|
||||
{installedPack.title}
|
||||
</span>{' '}
|
||||
installed
|
||||
</span>
|
||||
<div
|
||||
ref={arrowProps.ref}
|
||||
style={arrowProps.style}
|
||||
className={classNames(
|
||||
'module-sticker-button__tooltip__triangle',
|
||||
`module-sticker-button__tooltip__triangle--${placement}`
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</Popper>
|
||||
) : null}
|
||||
{!open && showIntroduction ? (
|
||||
<Popper placement={position} modifiers={[offsetDistanceModifier(6)]}>
|
||||
{({ ref, style, placement, arrowProps }) => (
|
||||
<div className={theme ? themeClassName(theme) : undefined}>
|
||||
<button
|
||||
type="button"
|
||||
ref={ref}
|
||||
style={style}
|
||||
className={classNames(
|
||||
'module-sticker-button__tooltip',
|
||||
'module-sticker-button__tooltip--introduction'
|
||||
)}
|
||||
onClick={handleClearIntroduction}
|
||||
>
|
||||
<img
|
||||
className="module-sticker-button__tooltip--introduction__image"
|
||||
srcSet="images/sticker_splash@1x.png 1x, images/sticker_splash@2x.png 2x"
|
||||
alt={i18n('stickers--StickerManager--Introduction--Image')}
|
||||
/>
|
||||
<div className="module-sticker-button__tooltip--introduction__meta">
|
||||
<div className="module-sticker-button__tooltip--introduction__meta__title">
|
||||
{i18n('stickers--StickerManager--Introduction--Title')}
|
||||
</div>
|
||||
<div className="module-sticker-button__tooltip--introduction__meta__subtitle">
|
||||
{i18n('stickers--StickerManager--Introduction--Body')}
|
||||
</div>
|
||||
</div>
|
||||
<div className="module-sticker-button__tooltip--introduction__close">
|
||||
<button
|
||||
type="button"
|
||||
className="module-sticker-button__tooltip--introduction__close__button"
|
||||
onClick={handleClearIntroduction}
|
||||
aria-label={i18n('close')}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
ref={arrowProps.ref}
|
||||
style={arrowProps.style}
|
||||
className={classNames(
|
||||
'module-sticker-button__tooltip__triangle',
|
||||
'module-sticker-button__tooltip__triangle--introduction',
|
||||
`module-sticker-button__tooltip__triangle--${placement}`
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</Popper>
|
||||
) : null}
|
||||
{open && popperRoot
|
||||
? createPortal(
|
||||
<Popper placement={position}>
|
||||
{({ ref, style }) => (
|
||||
<div className={theme ? themeClassName(theme) : undefined}>
|
||||
<StickerPicker
|
||||
ref={ref}
|
||||
i18n={i18n}
|
||||
style={style}
|
||||
packs={installedPacks}
|
||||
onClose={handleClose}
|
||||
onClickAddPack={
|
||||
onClickAddPack ? handleClickAddPack : undefined
|
||||
}
|
||||
onPickSticker={handlePickSticker}
|
||||
recentStickers={recentStickers}
|
||||
showPickerHint={showPickerHint}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Popper>,
|
||||
popperRoot
|
||||
)
|
||||
: null}
|
||||
</Manager>
|
||||
return noop;
|
||||
}, [open, setOpen, setPopperRoot]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!open) {
|
||||
return noop;
|
||||
}
|
||||
|
||||
return handleOutsideClick(
|
||||
target => {
|
||||
const targetElement = target as HTMLElement;
|
||||
const targetClassName = targetElement
|
||||
? targetElement.className || ''
|
||||
: '';
|
||||
|
||||
// We need to special-case sticker picker header buttons, because they can
|
||||
// disappear after being clicked, which breaks the .contains() check below.
|
||||
const isMissingButtonClass =
|
||||
!targetClassName ||
|
||||
targetClassName.indexOf('module-sticker-picker__header__button') < 0;
|
||||
|
||||
if (!isMissingButtonClass) {
|
||||
return false;
|
||||
}
|
||||
|
||||
setOpen(false);
|
||||
return true;
|
||||
},
|
||||
{
|
||||
containerElements: [popperRoot, buttonRef],
|
||||
name: 'StickerButton',
|
||||
}
|
||||
);
|
||||
}, [open, popperRoot, setOpen]);
|
||||
|
||||
// Install keyboard shortcut to open sticker picker
|
||||
React.useEffect(() => {
|
||||
const handleKeydown = (event: KeyboardEvent) => {
|
||||
const { ctrlKey, metaKey, shiftKey } = event;
|
||||
const commandKey = get(window, 'platform') === 'darwin' && metaKey;
|
||||
const controlKey = get(window, 'platform') !== 'darwin' && ctrlKey;
|
||||
const commandOrCtrl = commandKey || controlKey;
|
||||
const key = KeyboardLayout.lookup(event);
|
||||
|
||||
// We don't want to open up if the conversation has any panels open
|
||||
const panels = document.querySelectorAll('.conversation .panel');
|
||||
if (panels && panels.length > 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (commandOrCtrl && shiftKey && (key === 's' || key === 'S')) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
setOpen(!open);
|
||||
}
|
||||
};
|
||||
document.addEventListener('keydown', handleKeydown);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handleKeydown);
|
||||
};
|
||||
}, [open, setOpen]);
|
||||
|
||||
// Clear the installed pack after one minute
|
||||
React.useEffect(() => {
|
||||
if (installedPack) {
|
||||
const timerId = setTimeout(clearInstalledStickerPack, 10 * 1000);
|
||||
|
||||
return () => {
|
||||
clearTimeout(timerId);
|
||||
};
|
||||
}
|
||||
|
||||
return noop;
|
||||
}, [installedPack, clearInstalledStickerPack]);
|
||||
|
||||
if (
|
||||
countStickers({
|
||||
knownPacks,
|
||||
blessedPacks,
|
||||
installedPacks,
|
||||
receivedPacks,
|
||||
}) === 0
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
<Manager>
|
||||
<Reference>
|
||||
{({ ref }) => (
|
||||
<button
|
||||
type="button"
|
||||
ref={refMerger(buttonRef, ref)}
|
||||
onClick={handleClickButton}
|
||||
className={classNames(
|
||||
{
|
||||
'module-sticker-button__button': true,
|
||||
'module-sticker-button__button--active': open,
|
||||
},
|
||||
className
|
||||
)}
|
||||
aria-label={i18n('stickers--StickerPicker--Open')}
|
||||
/>
|
||||
)}
|
||||
</Reference>
|
||||
{!open && !showIntroduction && installedPack ? (
|
||||
<Popper
|
||||
placement={position}
|
||||
key={installedPack.id}
|
||||
modifiers={[offsetDistanceModifier(6)]}
|
||||
>
|
||||
{({ ref, style, placement, arrowProps }) => (
|
||||
<div className={theme ? themeClassName(theme) : undefined}>
|
||||
<button
|
||||
type="button"
|
||||
ref={ref}
|
||||
style={style}
|
||||
className="module-sticker-button__tooltip"
|
||||
onClick={clearInstalledStickerPack}
|
||||
>
|
||||
{installedPack.cover ? (
|
||||
<img
|
||||
className="module-sticker-button__tooltip__image"
|
||||
src={installedPack.cover.url}
|
||||
alt={installedPack.title}
|
||||
/>
|
||||
) : (
|
||||
<div className="module-sticker-button__tooltip__image-placeholder" />
|
||||
)}
|
||||
<span className="module-sticker-button__tooltip__text">
|
||||
<span className="module-sticker-button__tooltip__text__title">
|
||||
{installedPack.title}
|
||||
</span>{' '}
|
||||
installed
|
||||
</span>
|
||||
<div
|
||||
ref={arrowProps.ref}
|
||||
style={arrowProps.style}
|
||||
className={classNames(
|
||||
'module-sticker-button__tooltip__triangle',
|
||||
`module-sticker-button__tooltip__triangle--${placement}`
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</Popper>
|
||||
) : null}
|
||||
{!open && showIntroduction ? (
|
||||
<Popper placement={position} modifiers={[offsetDistanceModifier(6)]}>
|
||||
{({ ref, style, placement, arrowProps }) => (
|
||||
<div className={theme ? themeClassName(theme) : undefined}>
|
||||
<button
|
||||
type="button"
|
||||
ref={ref}
|
||||
style={style}
|
||||
className={classNames(
|
||||
'module-sticker-button__tooltip',
|
||||
'module-sticker-button__tooltip--introduction'
|
||||
)}
|
||||
onClick={handleClearIntroduction}
|
||||
>
|
||||
<img
|
||||
className="module-sticker-button__tooltip--introduction__image"
|
||||
srcSet="images/sticker_splash@1x.png 1x, images/sticker_splash@2x.png 2x"
|
||||
alt={i18n('stickers--StickerManager--Introduction--Image')}
|
||||
/>
|
||||
<div className="module-sticker-button__tooltip--introduction__meta">
|
||||
<div className="module-sticker-button__tooltip--introduction__meta__title">
|
||||
{i18n('stickers--StickerManager--Introduction--Title')}
|
||||
</div>
|
||||
<div className="module-sticker-button__tooltip--introduction__meta__subtitle">
|
||||
{i18n('stickers--StickerManager--Introduction--Body')}
|
||||
</div>
|
||||
</div>
|
||||
<div className="module-sticker-button__tooltip--introduction__close">
|
||||
<button
|
||||
type="button"
|
||||
className="module-sticker-button__tooltip--introduction__close__button"
|
||||
onClick={handleClearIntroduction}
|
||||
aria-label={i18n('close')}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
ref={arrowProps.ref}
|
||||
style={arrowProps.style}
|
||||
className={classNames(
|
||||
'module-sticker-button__tooltip__triangle',
|
||||
'module-sticker-button__tooltip__triangle--introduction',
|
||||
`module-sticker-button__tooltip__triangle--${placement}`
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</Popper>
|
||||
) : null}
|
||||
{open && popperRoot
|
||||
? createPortal(
|
||||
<Popper placement={position}>
|
||||
{({ ref, style }) => (
|
||||
<div className={theme ? themeClassName(theme) : undefined}>
|
||||
<StickerPicker
|
||||
ref={ref}
|
||||
i18n={i18n}
|
||||
style={style}
|
||||
packs={installedPacks}
|
||||
onClose={handleClose}
|
||||
onClickAddPack={
|
||||
onClickAddPack ? handleClickAddPack : undefined
|
||||
}
|
||||
onPickSticker={handlePickSticker}
|
||||
recentStickers={recentStickers}
|
||||
showPickerHint={showPickerHint}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Popper>,
|
||||
popperRoot
|
||||
)
|
||||
: null}
|
||||
</Manager>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue