From a9a220273f3e87b69a3cde45a340278990026fdc Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Mon, 20 Nov 2023 22:29:13 +0600 Subject: [PATCH] refactored some common components --- .../{input => common}/ArcProgress/index.tsx | 0 .../ArcProgress/styles.module.scss | 0 .../common/BetterScrollDialog/index.tsx | 4 +- .../{input => common}/DropHereIcon/index.tsx | 0 .../DropHereIcon/styles.module.scss | 0 .../{input => common}/Icon/index.tsx | 0 .../common/ImageLoadingWrapper/index.tsx | 2 +- .../components}/LoaderCircleInner/index.tsx | 0 .../LoaderCircleInner/styles.module.scss | 0 .../{input => common}/LoaderCircle/index.tsx | 2 +- .../LoaderCircle/styles.module.scss | 0 .../{input => common}/LoaderScreen/index.tsx | 0 .../LoaderScreen/styles.module.scss | 0 src/components/flow/FlowCell/index.tsx | 2 +- src/components/flow/FlowCellMenu/index.tsx | 2 +- .../flow/FlowSearchResults/index.tsx | 2 +- src/components/flow/FlowSwiperHero/index.tsx | 4 +- src/components/input/Button/index.tsx | 4 +- src/components/input/Info/index.tsx | 22 -- src/components/input/Info/style.scss | 28 --- src/components/input/InputText/index.tsx | 22 +- src/components/input/SearchInput/index.tsx | 2 +- src/components/lab/LabBottomPanel/index.tsx | 2 +- src/components/lab/LabHero/index.tsx | 2 +- src/components/lab/LabNodeTitle/index.tsx | 2 +- src/components/media/AudioPlayer/index.tsx | 204 ++++++++++-------- src/components/media/ImagePreloader/index.tsx | 4 +- .../{common => menu}/CornerMenu/index.tsx | 2 +- .../CornerMenu/styles.module.scss | 0 src/components/menu/HorizontalMenu/index.tsx | 2 +- src/components/menu/MenuButton/index.tsx | 2 +- .../{common => menu}/MenuDots/index.tsx | 2 +- .../MenuDots/styles.module.scss | 0 .../menu/MenuItemWithIcon/index.tsx | 8 +- src/components/node/Backlink/index.tsx | 2 +- src/components/node/NodeEditMenu/index.tsx | 2 +- .../node/NodeImageBlockPlaceholder/index.tsx | 2 +- src/components/node/NodeLikeButton/index.tsx | 2 +- src/components/node/NodeThumbnail/index.tsx | 2 +- src/components/notes/NoteMenu/index.tsx | 4 +- .../tags/TagAutocompleteRow/index.tsx | 2 +- src/components/tags/TagWrapper/index.tsx | 2 +- src/components/upload/AudioUpload/index.tsx | 12 +- src/components/upload/ImageUpload/index.tsx | 19 +- .../upload/UploadDropzone/index.tsx | 2 +- .../components/TelegramLoginForm/index.tsx | 2 +- .../components/RestoreInvalidCode/index.tsx | 2 +- .../components/RestoreSuccess/index.tsx | 2 +- .../components/RestoreSent/index.tsx | 2 +- .../components/BorisContactItem/index.tsx | 2 +- .../components/EditorPublicSwitch/index.tsx | 2 +- .../components/EditorUploadButton/index.tsx | 2 +- .../EditorUploadCoverButton/index.tsx | 2 +- .../dialogs/EditorEditDialog/index.tsx | 2 +- .../dialogs/LoadingDialog/index.tsx | 2 +- src/containers/flow/FlowStamp/index.tsx | 2 +- .../components/SubmitBar/index.tsx | 11 +- .../components/CommentEmbedBlock/index.tsx | 10 +- .../components/CommentImageGrid/index.tsx | 2 +- .../components/CommentLike/index.tsx | 2 +- .../components/CommentMenu/index.tsx | 4 +- .../notifications/NotificationList/index.tsx | 2 +- .../PlayerView/components/PlayerBar/index.tsx | 20 +- .../profile/ProfileAccounts/index.tsx | 2 +- .../profile/ProfileLoader/index.tsx | 2 +- .../settings/SettingsDeleted/index.tsx | 2 +- src/containers/sidebars/TagSidebar/index.tsx | 2 +- 67 files changed, 238 insertions(+), 220 deletions(-) rename src/components/{input => common}/ArcProgress/index.tsx (100%) rename src/components/{input => common}/ArcProgress/styles.module.scss (100%) rename src/components/{input => common}/DropHereIcon/index.tsx (100%) rename src/components/{input => common}/DropHereIcon/styles.module.scss (100%) rename src/components/{input => common}/Icon/index.tsx (100%) rename src/components/{input => common/LoaderCircle/components}/LoaderCircleInner/index.tsx (100%) rename src/components/{input => common/LoaderCircle/components}/LoaderCircleInner/styles.module.scss (100%) rename src/components/{input => common}/LoaderCircle/index.tsx (85%) rename src/components/{input => common}/LoaderCircle/styles.module.scss (100%) rename src/components/{input => common}/LoaderScreen/index.tsx (100%) rename src/components/{input => common}/LoaderScreen/styles.module.scss (100%) delete mode 100644 src/components/input/Info/index.tsx delete mode 100644 src/components/input/Info/style.scss rename src/components/{common => menu}/CornerMenu/index.tsx (94%) rename src/components/{common => menu}/CornerMenu/styles.module.scss (100%) rename src/components/{common => menu}/MenuDots/index.tsx (90%) rename src/components/{common => menu}/MenuDots/styles.module.scss (100%) diff --git a/src/components/input/ArcProgress/index.tsx b/src/components/common/ArcProgress/index.tsx similarity index 100% rename from src/components/input/ArcProgress/index.tsx rename to src/components/common/ArcProgress/index.tsx diff --git a/src/components/input/ArcProgress/styles.module.scss b/src/components/common/ArcProgress/styles.module.scss similarity index 100% rename from src/components/input/ArcProgress/styles.module.scss rename to src/components/common/ArcProgress/styles.module.scss diff --git a/src/components/common/BetterScrollDialog/index.tsx b/src/components/common/BetterScrollDialog/index.tsx index b0d61d25..cb15f2aa 100644 --- a/src/components/common/BetterScrollDialog/index.tsx +++ b/src/components/common/BetterScrollDialog/index.tsx @@ -2,8 +2,8 @@ import React, { FC, MouseEventHandler, useEffect, useRef } from 'react'; import { clearAllBodyScrollLocks, disableBodyScroll } from 'body-scroll-lock'; -import { Icon } from '~/components/input/Icon'; -import { LoaderCircle } from '~/components/input/LoaderCircle'; +import { Icon } from '~/components/common/Icon'; +import { LoaderCircle } from '~/components/common/LoaderCircle'; import styles from './styles.module.scss'; diff --git a/src/components/input/DropHereIcon/index.tsx b/src/components/common/DropHereIcon/index.tsx similarity index 100% rename from src/components/input/DropHereIcon/index.tsx rename to src/components/common/DropHereIcon/index.tsx diff --git a/src/components/input/DropHereIcon/styles.module.scss b/src/components/common/DropHereIcon/styles.module.scss similarity index 100% rename from src/components/input/DropHereIcon/styles.module.scss rename to src/components/common/DropHereIcon/styles.module.scss diff --git a/src/components/input/Icon/index.tsx b/src/components/common/Icon/index.tsx similarity index 100% rename from src/components/input/Icon/index.tsx rename to src/components/common/Icon/index.tsx diff --git a/src/components/common/ImageLoadingWrapper/index.tsx b/src/components/common/ImageLoadingWrapper/index.tsx index 8c45cba9..a189e205 100644 --- a/src/components/common/ImageLoadingWrapper/index.tsx +++ b/src/components/common/ImageLoadingWrapper/index.tsx @@ -8,7 +8,7 @@ import React, { import classNames from 'classnames'; -import { LoaderCircle } from '~/components/input/LoaderCircle'; +import { LoaderCircle } from '~/components/common/LoaderCircle'; import { DivProps } from '~/utils/types'; import styles from './styles.module.scss'; diff --git a/src/components/input/LoaderCircleInner/index.tsx b/src/components/common/LoaderCircle/components/LoaderCircleInner/index.tsx similarity index 100% rename from src/components/input/LoaderCircleInner/index.tsx rename to src/components/common/LoaderCircle/components/LoaderCircleInner/index.tsx diff --git a/src/components/input/LoaderCircleInner/styles.module.scss b/src/components/common/LoaderCircle/components/LoaderCircleInner/styles.module.scss similarity index 100% rename from src/components/input/LoaderCircleInner/styles.module.scss rename to src/components/common/LoaderCircle/components/LoaderCircleInner/styles.module.scss diff --git a/src/components/input/LoaderCircle/index.tsx b/src/components/common/LoaderCircle/index.tsx similarity index 85% rename from src/components/input/LoaderCircle/index.tsx rename to src/components/common/LoaderCircle/index.tsx index dc5c7568..c04e112a 100644 --- a/src/components/input/LoaderCircle/index.tsx +++ b/src/components/common/LoaderCircle/index.tsx @@ -2,9 +2,9 @@ import React, { FC } from 'react'; import classNames from 'classnames'; -import { LoaderCircleInner } from '~/components/input/LoaderCircleInner'; import { SVGProps } from '~/utils/types'; +import { LoaderCircleInner } from './components/LoaderCircleInner'; import styles from './styles.module.scss'; interface IProps extends SVGProps { diff --git a/src/components/input/LoaderCircle/styles.module.scss b/src/components/common/LoaderCircle/styles.module.scss similarity index 100% rename from src/components/input/LoaderCircle/styles.module.scss rename to src/components/common/LoaderCircle/styles.module.scss diff --git a/src/components/input/LoaderScreen/index.tsx b/src/components/common/LoaderScreen/index.tsx similarity index 100% rename from src/components/input/LoaderScreen/index.tsx rename to src/components/common/LoaderScreen/index.tsx diff --git a/src/components/input/LoaderScreen/styles.module.scss b/src/components/common/LoaderScreen/styles.module.scss similarity index 100% rename from src/components/input/LoaderScreen/styles.module.scss rename to src/components/common/LoaderScreen/styles.module.scss diff --git a/src/components/flow/FlowCell/index.tsx b/src/components/flow/FlowCell/index.tsx index cf0308fe..608f1e85 100644 --- a/src/components/flow/FlowCell/index.tsx +++ b/src/components/flow/FlowCell/index.tsx @@ -3,11 +3,11 @@ import React, { FC, useMemo } from 'react'; import classNames from 'classnames'; import { Anchor } from '~/components/common/Anchor'; -import { MenuDots } from '~/components/common/MenuDots'; import { CellShade } from '~/components/flow/CellShade'; import { FlowCellImage } from '~/components/flow/FlowCellImage'; import { FlowCellMenu } from '~/components/flow/FlowCellMenu'; import { FlowCellText } from '~/components/flow/FlowCellText'; +import { MenuDots } from '~/components/menu/MenuDots'; import { useClickOutsideFocus } from '~/hooks/dom/useClickOutsideFocus'; import { useWindowSize } from '~/hooks/dom/useWindowSize'; import { useFlowCellControls } from '~/hooks/flow/useFlowCellControls'; diff --git a/src/components/flow/FlowCellMenu/index.tsx b/src/components/flow/FlowCellMenu/index.tsx index 314c8114..739d531b 100644 --- a/src/components/flow/FlowCellMenu/index.tsx +++ b/src/components/flow/FlowCellMenu/index.tsx @@ -3,7 +3,7 @@ import React, { FC } from 'react'; import classNames from 'classnames'; import { Group } from '~/components/common/Group'; -import { Icon } from '~/components/input/Icon'; +import { Icon } from '~/components/common/Icon'; import { Toggle } from '~/components/input/Toggle'; import { FlowDisplayVariant } from '~/types'; diff --git a/src/components/flow/FlowSearchResults/index.tsx b/src/components/flow/FlowSearchResults/index.tsx index 1d51c260..c4c539e7 100644 --- a/src/components/flow/FlowSearchResults/index.tsx +++ b/src/components/flow/FlowSearchResults/index.tsx @@ -1,7 +1,7 @@ import React, { FC } from 'react'; +import { Icon } from '~/components/common/Icon'; import { InfiniteScroll } from '~/components/common/InfiniteScroll'; -import { Icon } from '~/components/input/Icon'; import { INode } from '~/types'; import { FlowRecentItem } from '../FlowRecentItem'; diff --git a/src/components/flow/FlowSwiperHero/index.tsx b/src/components/flow/FlowSwiperHero/index.tsx index 140649d4..3fc07041 100644 --- a/src/components/flow/FlowSwiperHero/index.tsx +++ b/src/components/flow/FlowSwiperHero/index.tsx @@ -6,8 +6,8 @@ import { Autoplay, EffectFade, Navigation } from 'swiper/modules'; import { Swiper, SwiperSlide } from 'swiper/react'; import SwiperClass from 'swiper/types/swiper-class'; -import { Icon } from '~/components/input/Icon'; -import { LoaderCircle } from '~/components/input/LoaderCircle'; +import { Icon } from '~/components/common/Icon'; +import { LoaderCircle } from '~/components/common/LoaderCircle'; import { imagePresets, URLS } from '~/constants/urls'; import { useWindowSize } from '~/hooks/dom/useWindowSize'; import { useNavigation } from '~/hooks/navigation/useNavigation'; diff --git a/src/components/input/Button/index.tsx b/src/components/input/Button/index.tsx index 99a38ced..6e65fb6c 100644 --- a/src/components/input/Button/index.tsx +++ b/src/components/input/Button/index.tsx @@ -9,8 +9,8 @@ import React, { import Tippy from '@tippyjs/react'; import classnames from 'classnames'; -import { Icon } from '~/components/input/Icon'; -import { LoaderCircle } from '~/components/input/LoaderCircle'; +import { Icon } from '~/components/common/Icon'; +import { LoaderCircle } from '~/components/common/LoaderCircle'; import { IIcon } from '~/types'; import styles from './styles.module.scss'; diff --git a/src/components/input/Info/index.tsx b/src/components/input/Info/index.tsx deleted file mode 100644 index 8f6eee15..00000000 --- a/src/components/input/Info/index.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import * as React from 'react'; - -import classNames from 'classnames'; - -const style = require('./style.scss'); - -interface IInfoProps { - text?: string; - children?: string; - level?: string; -} -export const Info: React.FunctionComponent = ({ - text, - children, - level = 'normal', -}) => ( -
- { - text || children || '' - } -
-); diff --git a/src/components/input/Info/style.scss b/src/components/input/Info/style.scss deleted file mode 100644 index ed16dc16..00000000 --- a/src/components/input/Info/style.scss +++ /dev/null @@ -1,28 +0,0 @@ -@import 'src/styles/variables'; - -.container { - min-height: $info_height; - border-radius: $radius; - display: flex; - align-items: center; - justify-content: center; - font: $font_14_regular; - line-height: 1.2em; - padding: $gap; - background: $gray_90; - - &:global(.danger) { - color: white; - background: $content_bg_danger; - } - - &:global(.warning) { - color: white; - background: $content_bg_danger; - } - - &:global(.primary) { - color: white; - background: $content_bg_danger; - } -} diff --git a/src/components/input/InputText/index.tsx b/src/components/input/InputText/index.tsx index f6d49c25..b69f02c7 100644 --- a/src/components/input/InputText/index.tsx +++ b/src/components/input/InputText/index.tsx @@ -10,7 +10,7 @@ import React, { import classNames from 'classnames'; -import { Icon } from '~/components/input/Icon'; +import { Icon } from '~/components/common/Icon'; import { InputWrapper } from '~/components/input/InputWrapper'; import { useTranslatedError } from '~/hooks/data/useTranslatedError'; import { useFocusEvent } from '~/hooks/dom/useFocusEvent'; @@ -50,17 +50,25 @@ const InputText: FC = ({ handler(target.value); }, - [handler] + [handler], ); - const toggleRevealed = useCallback(() => setRevealed(!revealed), [setRevealed, revealed]); + const toggleRevealed = useCallback( + () => setRevealed(!revealed), + [setRevealed, revealed], + ); const translatedError = useTranslatedError(error); const type = props.type === 'password' && revealed ? 'text' : props.type; return ( - +
= ({
{suffix} {props.type === 'password' && ( - + )}
)} diff --git a/src/components/input/SearchInput/index.tsx b/src/components/input/SearchInput/index.tsx index ace8f50a..6a3fc4e5 100644 --- a/src/components/input/SearchInput/index.tsx +++ b/src/components/input/SearchInput/index.tsx @@ -1,6 +1,6 @@ import React, { VFC } from 'react'; -import { Icon } from '~/components/input/Icon'; +import { Icon } from '~/components/common/Icon'; import { InputText, InputTextProps } from '~/components/input/InputText'; interface SearchInputProps extends Omit {} diff --git a/src/components/lab/LabBottomPanel/index.tsx b/src/components/lab/LabBottomPanel/index.tsx index 50971be2..2ad11099 100644 --- a/src/components/lab/LabBottomPanel/index.tsx +++ b/src/components/lab/LabBottomPanel/index.tsx @@ -5,7 +5,7 @@ import classNames from 'classnames'; import { Filler } from '~/components/common/Filler'; import { Grid } from '~/components/common/Grid'; import { Group } from '~/components/common/Group'; -import { Icon } from '~/components/input/Icon'; +import { Icon } from '~/components/common/Icon'; import { Placeholder } from '~/components/placeholders/Placeholder'; import { URLS } from '~/constants/urls'; import { useNavigation } from '~/hooks/navigation/useNavigation'; diff --git a/src/components/lab/LabHero/index.tsx b/src/components/lab/LabHero/index.tsx index 417e7001..96301c04 100644 --- a/src/components/lab/LabHero/index.tsx +++ b/src/components/lab/LabHero/index.tsx @@ -1,7 +1,7 @@ import React, { FC, useCallback } from 'react'; import { Group } from '~/components/common/Group'; -import { Icon } from '~/components/input/Icon'; +import { Icon } from '~/components/common/Icon'; import { Placeholder } from '~/components/placeholders/Placeholder'; import { URLS } from '~/constants/urls'; import { useNavigation } from '~/hooks/navigation/useNavigation'; diff --git a/src/components/lab/LabNodeTitle/index.tsx b/src/components/lab/LabNodeTitle/index.tsx index 5fc69847..3d408133 100644 --- a/src/components/lab/LabNodeTitle/index.tsx +++ b/src/components/lab/LabNodeTitle/index.tsx @@ -3,7 +3,7 @@ import React, { FC } from 'react'; import Tippy from '@tippyjs/react'; import { Group } from '~/components/common/Group'; -import { Icon } from '~/components/input/Icon'; +import { Icon } from '~/components/common/Icon'; import { Placeholder } from '~/components/placeholders/Placeholder'; import { NodeComponentProps } from '~/constants/node'; import { useGotoNode } from '~/hooks/node/useGotoNode'; diff --git a/src/components/media/AudioPlayer/index.tsx b/src/components/media/AudioPlayer/index.tsx index 485a7e85..1e2d3700 100644 --- a/src/components/media/AudioPlayer/index.tsx +++ b/src/components/media/AudioPlayer/index.tsx @@ -2,7 +2,7 @@ import React, { memo, useCallback, useMemo } from 'react'; import classNames from 'classnames'; -import { Icon } from '~/components/input/Icon'; +import { Icon } from '~/components/common/Icon'; import { InputText } from '~/components/input/InputText'; import { PlayerState } from '~/constants/player'; import { IFile } from '~/types'; @@ -17,113 +17,133 @@ type Props = { onTitleChange?: (file_id: IFile['id'], title: string) => void; }; -const AudioPlayer = memo(({ file, onDelete, isEditing, onTitleChange }: Props) => { - const { toPercent, file: currentFile, setFile, play, status, progress, pause } = useAudioPlayer(); +const AudioPlayer = memo( + ({ file, onDelete, isEditing, onTitleChange }: Props) => { + const { + toPercent, + file: currentFile, + setFile, + play, + status, + progress, + pause, + } = useAudioPlayer(); - const onPlay = useCallback( - async event => { - event.stopPropagation(); + const onPlay = useCallback( + async (event) => { + event.stopPropagation(); - if (file.id !== currentFile?.id) { - setFile(file); - setTimeout(() => void play(), 0); - return; - } + if (file.id !== currentFile?.id) { + setFile(file); + setTimeout(() => void play(), 0); + return; + } - status === PlayerState.PLAYING ? pause() : await play(); - }, - [play, pause, setFile, file, currentFile, status] - ); + status === PlayerState.PLAYING ? pause() : await play(); + }, + [play, pause, setFile, file, currentFile, status], + ); - const onSeek = useCallback( - event => { - event.stopPropagation(); - const { clientX, target } = event; - const { left, width } = target.getBoundingClientRect(); - toPercent(((clientX - left) / width) * 100); - }, - [toPercent] - ); + const onSeek = useCallback( + (event) => { + event.stopPropagation(); + const { clientX, target } = event; + const { left, width } = target.getBoundingClientRect(); + toPercent(((clientX - left) / width) * 100); + }, + [toPercent], + ); - const onDropClick = useCallback(() => { - if (!onDelete) return; + const onDropClick = useCallback(() => { + if (!onDelete) return; - onDelete(file.id); - }, [file, onDelete]); + onDelete(file.id); + }, [file, onDelete]); - const title = useMemo( - () => - (file.metadata && - (file.metadata.title || - [file.metadata.id3artist, file.metadata.id3title].filter(el => el).join(' - '))) || - file.orig_name || - '', - [file.metadata, file.orig_name] - ); + const title = useMemo( + () => + (file.metadata && + (file.metadata.title || + [file.metadata.id3artist, file.metadata.id3title] + .filter((el) => el) + .join(' - '))) || + file.orig_name || + '', + [file.metadata, file.orig_name], + ); - const onRename = useCallback( - (val: string) => { - if (!onTitleChange) return; + const onRename = useCallback( + (val: string) => { + if (!onTitleChange) return; - onTitleChange(file.id, val); - }, - [onTitleChange, file.id] - ); + onTitleChange(file.id, val); + }, + [onTitleChange, file.id], + ); - const stopPropagation = useCallback( - event => { - if (!isEditing) { - return; - } + const stopPropagation = useCallback( + (event) => { + if (!isEditing) { + return; + } - event.stopPropagation(); - }, - [isEditing] - ); + event.stopPropagation(); + }, + [isEditing], + ); - const playing = currentFile?.id === file.id; + const playing = currentFile?.id === file.id; - return ( -
- {onDelete && ( -
- + return ( +
+ {onDelete && ( +
+ +
+ )} + +
+ {playing && status === PlayerState.PLAYING ? ( + + ) : ( + + )}
- )} -
- {playing && status === PlayerState.PLAYING ? : } -
- - {isEditing ? ( -
- -
- ) : ( -
-
{title || ''}
- -
-
+
-
- )} -
- ); -}); + ) : ( +
+
{title || ''}
+ +
+
+
+
+ )} +
+ ); + }, +); export { AudioPlayer }; diff --git a/src/components/media/ImagePreloader/index.tsx b/src/components/media/ImagePreloader/index.tsx index f1b00ea3..36c7185c 100644 --- a/src/components/media/ImagePreloader/index.tsx +++ b/src/components/media/ImagePreloader/index.tsx @@ -8,9 +8,9 @@ import React, { import classNames from 'classnames'; +import { Icon } from '~/components/common/Icon'; import { ImageWithSSRLoad } from '~/components/common/ImageWithSSRLoad'; -import { Icon } from '~/components/input/Icon'; -import { LoaderCircle } from '~/components/input/LoaderCircle'; +import { LoaderCircle } from '~/components/common/LoaderCircle'; import { DEFAULT_DOMINANT_COLOR } from '~/constants/node'; import { imagePresets } from '~/constants/urls'; import { useResizeHandler } from '~/hooks/dom/useResizeHandler'; diff --git a/src/components/common/CornerMenu/index.tsx b/src/components/menu/CornerMenu/index.tsx similarity index 94% rename from src/components/common/CornerMenu/index.tsx rename to src/components/menu/CornerMenu/index.tsx index 1594dade..4929bc37 100644 --- a/src/components/common/CornerMenu/index.tsx +++ b/src/components/menu/CornerMenu/index.tsx @@ -1,6 +1,6 @@ import React, { useCallback, useState, VFC } from 'react'; -import { MenuDots } from '~/components/common/MenuDots'; +import { MenuDots } from '~/components/menu/MenuDots'; import styles from './styles.module.scss'; diff --git a/src/components/common/CornerMenu/styles.module.scss b/src/components/menu/CornerMenu/styles.module.scss similarity index 100% rename from src/components/common/CornerMenu/styles.module.scss rename to src/components/menu/CornerMenu/styles.module.scss diff --git a/src/components/menu/HorizontalMenu/index.tsx b/src/components/menu/HorizontalMenu/index.tsx index 146f1ebc..07202e96 100644 --- a/src/components/menu/HorizontalMenu/index.tsx +++ b/src/components/menu/HorizontalMenu/index.tsx @@ -2,7 +2,7 @@ import React, { PropsWithChildren } from 'react'; import classNames from 'classnames'; -import { Icon } from '~/components/input/Icon'; +import { Icon } from '~/components/common/Icon'; import { Placeholder } from '~/components/placeholders/Placeholder'; import { DivProps } from '~/utils/types'; diff --git a/src/components/menu/MenuButton/index.tsx b/src/components/menu/MenuButton/index.tsx index 563fc125..bd9fa555 100644 --- a/src/components/menu/MenuButton/index.tsx +++ b/src/components/menu/MenuButton/index.tsx @@ -4,7 +4,7 @@ import { Placement } from '@popperjs/core'; import classNames from 'classnames'; import { usePopper } from 'react-popper'; -import { Icon } from '~/components/input/Icon'; +import { Icon } from '~/components/common/Icon'; import { useFocusEvent } from '~/hooks/dom/useFocusEvent'; import styles from './styles.module.scss'; diff --git a/src/components/common/MenuDots/index.tsx b/src/components/menu/MenuDots/index.tsx similarity index 90% rename from src/components/common/MenuDots/index.tsx rename to src/components/menu/MenuDots/index.tsx index 94be4527..da4a9adc 100644 --- a/src/components/common/MenuDots/index.tsx +++ b/src/components/menu/MenuDots/index.tsx @@ -2,7 +2,7 @@ import React, { FC } from 'react'; import classNames from 'classnames'; -import { Icon } from '~/components/input/Icon'; +import { Icon } from '~/components/common/Icon'; import { ButtonProps } from '~/utils/types'; import styles from './styles.module.scss'; diff --git a/src/components/common/MenuDots/styles.module.scss b/src/components/menu/MenuDots/styles.module.scss similarity index 100% rename from src/components/common/MenuDots/styles.module.scss rename to src/components/menu/MenuDots/styles.module.scss diff --git a/src/components/menu/MenuItemWithIcon/index.tsx b/src/components/menu/MenuItemWithIcon/index.tsx index 87e5eb6a..20045580 100644 --- a/src/components/menu/MenuItemWithIcon/index.tsx +++ b/src/components/menu/MenuItemWithIcon/index.tsx @@ -1,6 +1,6 @@ import React, { FC } from 'react'; -import { Icon } from '~/components/input/Icon'; +import { Icon } from '~/components/common/Icon'; import styles from './styles.module.scss'; @@ -10,7 +10,11 @@ interface MenuItemWithIconProps { onClick?: () => void; } -const MenuItemWithIcon: FC = ({ children, icon, onClick }) => ( +const MenuItemWithIcon: FC = ({ + children, + icon, + onClick, +}) => (
-
diff --git a/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentEmbedBlock/index.tsx b/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentEmbedBlock/index.tsx index 87ff3e33..3e2fc242 100644 --- a/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentEmbedBlock/index.tsx +++ b/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentEmbedBlock/index.tsx @@ -1,19 +1,18 @@ import React, { FC, memo, useMemo } from 'react'; -import { Icon } from '~/components/input/Icon'; +import { Icon } from '~/components/common/Icon'; import { ICommentBlockProps } from '~/constants/comment'; import { useYoutubeMetadata } from '~/hooks/metadata/useYoutubeMetadata'; import { getYoutubeThumb } from '~/utils/dom'; import styles from './styles.module.scss'; - type Props = ICommentBlockProps & {}; const CommentEmbedBlock: FC = memo(({ block }) => { const id = useMemo(() => { const match = block.content.match( - /https?:\/\/(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch)?(?:\?v=)?([\w\-=]+)/ + /https?:\/\/(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch)?(?:\?v=)?([\w\-=]+)/, ); return (match && match[1]) || ''; @@ -21,7 +20,10 @@ const CommentEmbedBlock: FC = memo(({ block }) => { const url = useMemo(() => `https://youtube.com/watch?v=${id}`, [id]); - const preview = useMemo(() => getYoutubeThumb(block.content), [block.content]); + const preview = useMemo( + () => getYoutubeThumb(block.content), + [block.content], + ); const metadata = useYoutubeMetadata(id); const title = metadata?.metadata?.title || ''; diff --git a/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentImageGrid/index.tsx b/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentImageGrid/index.tsx index 179f8ca8..20aa62b0 100644 --- a/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentImageGrid/index.tsx +++ b/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentImageGrid/index.tsx @@ -3,7 +3,7 @@ import { FC } from 'react'; import classNames from 'classnames'; import { Hoverable } from '~/components/common/Hoverable'; -import { Icon } from '~/components/input/Icon'; +import { Icon } from '~/components/common/Icon'; import { imagePresets } from '~/constants/urls'; import { IFile } from '~/types'; import { getURL } from '~/utils/dom'; diff --git a/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentLike/index.tsx b/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentLike/index.tsx index 12c6a565..e0ac77e8 100644 --- a/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentLike/index.tsx +++ b/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentLike/index.tsx @@ -2,7 +2,7 @@ import React, { FC } from 'react'; import classnames from 'classnames'; -import { Icon } from '~/components/input/Icon'; +import { Icon } from '~/components/common/Icon'; import styles from './styles.module.scss'; diff --git a/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentMenu/index.tsx b/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentMenu/index.tsx index 49c14dfe..f19028e7 100644 --- a/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentMenu/index.tsx +++ b/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentMenu/index.tsx @@ -1,6 +1,6 @@ import React, { FC, useMemo } from 'react'; -import { CornerMenu } from '~/components/common/CornerMenu'; +import { CornerMenu } from '~/components/menu/CornerMenu'; interface IProps { onEdit: () => void; @@ -16,7 +16,7 @@ const CommentMenu: FC = ({ onEdit, onDelete }) => { }, { title: 'Удалить', action: onDelete }, ], - [onEdit, onDelete] + [onEdit, onDelete], ); return ; diff --git a/src/containers/notifications/NotificationList/index.tsx b/src/containers/notifications/NotificationList/index.tsx index c011d877..49e9b571 100644 --- a/src/containers/notifications/NotificationList/index.tsx +++ b/src/containers/notifications/NotificationList/index.tsx @@ -3,9 +3,9 @@ import { FC, useCallback, useEffect } from 'react'; import classNames from 'classnames'; import { isAfter, parseISO } from 'date-fns'; +import { LoaderScreen } from '~/components/common/LoaderScreen'; import { Button } from '~/components/input/Button'; import { InputRow } from '~/components/input/InputRow'; -import { LoaderScreen } from '~/components/input/LoaderScreen'; import { NotificationComment } from '~/components/notifications/NotificationComment'; import { NotificationNode } from '~/components/notifications/NotificationNode'; import { useNotificationsList } from '~/hooks/notifications/useNotificationsList'; diff --git a/src/containers/player/PlayerView/components/PlayerBar/index.tsx b/src/containers/player/PlayerView/components/PlayerBar/index.tsx index 94dd8c3e..d59d9853 100644 --- a/src/containers/player/PlayerView/components/PlayerBar/index.tsx +++ b/src/containers/player/PlayerView/components/PlayerBar/index.tsx @@ -1,6 +1,6 @@ import React, { useCallback, VFC } from 'react'; -import { Icon } from '~/components/input/Icon'; +import { Icon } from '~/components/common/Icon'; import { PlayerState } from '~/constants/player'; import { IFile } from '~/types'; import { PlayerProgress } from '~/types/player'; @@ -33,13 +33,13 @@ const PlayerBar: VFC = ({ }, [playerPlay, playerPause, status]); const onSeek = useCallback( - event => { + (event) => { event.stopPropagation(); const { clientX, target } = event; const { left, width } = target.getBoundingClientRect(); playerSeek(((clientX - left) / width) * 100); }, - [playerSeek] + [playerSeek], ); if (status === PlayerState.UNSET) return null; @@ -47,21 +47,29 @@ const PlayerBar: VFC = ({ const metadata: IFile['metadata'] = path(['metadata'], file); const title = metadata && - (metadata.title || [metadata.id3artist, metadata.id3title].filter(el => !!el).join(' - ')); + (metadata.title || + [metadata.id3artist, metadata.id3title].filter((el) => !!el).join(' - ')); return (
- {status === PlayerState.PLAYING ? : } + {status === PlayerState.PLAYING ? ( + + ) : ( + + )}
{title}
-
+
diff --git a/src/containers/profile/ProfileAccounts/index.tsx b/src/containers/profile/ProfileAccounts/index.tsx index 4790022f..e876bbff 100644 --- a/src/containers/profile/ProfileAccounts/index.tsx +++ b/src/containers/profile/ProfileAccounts/index.tsx @@ -1,8 +1,8 @@ import React, { FC, Fragment } from 'react'; import { Group } from '~/components/common/Group'; +import { Icon } from '~/components/common/Icon'; import { Button } from '~/components/input/Button'; -import { Icon } from '~/components/input/Icon'; import { Placeholder } from '~/components/placeholders/Placeholder'; import { SOCIAL_ICONS } from '~/constants/auth/socials'; import { useOAuth } from '~/hooks/auth/useOAuth'; diff --git a/src/containers/profile/ProfileLoader/index.tsx b/src/containers/profile/ProfileLoader/index.tsx index af2c0563..6f2102d8 100644 --- a/src/containers/profile/ProfileLoader/index.tsx +++ b/src/containers/profile/ProfileLoader/index.tsx @@ -1,6 +1,6 @@ import React, { FC } from 'react'; -import { LoaderCircle } from '~/components/input/LoaderCircle'; +import { LoaderCircle } from '~/components/common/LoaderCircle'; import styles from './styles.module.scss'; diff --git a/src/containers/settings/SettingsDeleted/index.tsx b/src/containers/settings/SettingsDeleted/index.tsx index 0be086ac..cfd4b400 100644 --- a/src/containers/settings/SettingsDeleted/index.tsx +++ b/src/containers/settings/SettingsDeleted/index.tsx @@ -2,9 +2,9 @@ import React, { VFC } from 'react'; import { Filler } from '~/components/common/Filler'; import { Group } from '~/components/common/Group'; +import { Icon } from '~/components/common/Icon'; import { Padder } from '~/components/common/Padder'; import { FlowRecentItem } from '~/components/flow/FlowRecentItem'; -import { Icon } from '~/components/input/Icon'; import { InputText } from '~/components/input/InputText'; import { HorizontalMenu } from '~/components/menu/HorizontalMenu'; import { useFlowStore } from '~/store/flow/useFlowStore'; diff --git a/src/containers/sidebars/TagSidebar/index.tsx b/src/containers/sidebars/TagSidebar/index.tsx index 1a0543db..09fd3269 100644 --- a/src/containers/sidebars/TagSidebar/index.tsx +++ b/src/containers/sidebars/TagSidebar/index.tsx @@ -1,7 +1,7 @@ import { useMemo, VFC } from 'react'; +import { Icon } from '~/components/common/Icon'; import { InfiniteScroll } from '~/components/common/InfiniteScroll'; -import { Icon } from '~/components/input/Icon'; import { SidebarStack } from '~/components/sidebar/SidebarStack'; import { SidebarStackCard } from '~/components/sidebar/SidebarStackCard'; import { SidebarWrapper } from '~/components/sidebar/SidebarWrapper';