Mirrors/stash
1
0
Fork 0
mirror of https://github.com/stashapp/stash.git synced 2025-12-17 12:24:38 +03:00
Code Issues Packages Projects Releases Wiki Activity

React code splitting (#2603)

Browse Source 
* Code split using react lazy
* Split locales
* Move to lodash-es
* Import individual icons
This commit is contained in:
WithoutPants
2022-06-22 14:41:31 +10:00
committed by GitHub
parent 33b68b4464
commit 3b4b20e9b2
147 changed files with 969 additions and 610 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
ui/v2.5/src/hooks/Lightbox/Lightbox.tsx
View File

@@ -10,7 +10,7 @@ import {
} from "react-bootstrap";
import cx from "classnames";
import Mousetrap from "mousetrap";
import debounce from "lodash/debounce";
import debounce from "lodash-es/debounce";
import { Icon, LoadingIndicator } from "src/components/Shared";
import { useInterval, usePageVisibility, useToast } from "src/hooks";
@@ -29,6 +29,19 @@ import {
import * as GQL from "src/core/generated-graphql";
import { useInterfaceLocalForage } from "../LocalForage";
import { imageLightboxDisplayModeIntlMap } from "src/core/enums";
import { ILightboxImage } from "./types";
import {
faArrowLeft,
faArrowRight,
faChevronLeft,
faChevronRight,
faCog,
faExpand,
faPause,
faPlay,
faSearchMinus,
faTimes,
} from "@fortawesome/free-solid-svg-icons";
const CLASSNAME = "Lightbox";
const CLASSNAME_HEADER = `${CLASSNAME}-header`;
@@ -53,18 +66,6 @@ const DEFAULT_SLIDESHOW_DELAY = 5000;
const SECONDS_TO_MS = 1000;
const MIN_VALID_INTERVAL_SECONDS = 1;
interface IImagePaths {
image?: GQL.Maybe<string>;
thumbnail?: GQL.Maybe<string>;
}
export interface ILightboxImage {
id?: string;
title?: GQL.Maybe<string>;
rating?: GQL.Maybe<number>;
o_counter?: GQL.Maybe<number>;
paths: IImagePaths;
}
interface IProps {
images: ILightboxImage[];
isVisible: boolean;
@@ -643,7 +644,7 @@ export const LightboxComponent: React.FC<IProps> = ({
})}
onClick={() => setShowOptions(!showOptions)}
>
<Icon icon="cog" />
<Icon icon={faCog} />
</Button>
<Overlay
target={overlayTarget.current}
@@ -679,7 +680,7 @@ export const LightboxComponent: React.FC<IProps> = ({
onClick={toggleSlideshow}
title="Toggle Slideshow"
>
<Icon icon={slideshowInterval !== null ? "pause" : "play"} />
<Icon icon={slideshowInterval !== null ? faPause : faPlay} />
</Button>
)}
{zoom !== 1 && (
@@ -691,7 +692,7 @@ export const LightboxComponent: React.FC<IProps> = ({
}}
title="Reset zoom"
>
<Icon icon="search-minus" />
<Icon icon={faSearchMinus} />
</Button>
)}
{document.fullscreenEnabled && (
@@ -700,11 +701,11 @@ export const LightboxComponent: React.FC<IProps> = ({
onClick={toggleFullscreen}
title="Toggle Fullscreen"
>
<Icon icon="expand" />
<Icon icon={faExpand} />
</Button>
)}
<Button variant="link" onClick={() => close()} title="Close Lightbox">
<Icon icon="times" />
<Icon icon={faTimes} />
</Button>
</div>
</div>
@@ -715,7 +716,7 @@ export const LightboxComponent: React.FC<IProps> = ({
onClick={handleLeft}
className={`${CLASSNAME_NAVBUTTON} d-none d-lg-block`}
>
<Icon icon="chevron-left" />
<Icon icon={faChevronLeft} />
</Button>
)}
@@ -757,7 +758,7 @@ export const LightboxComponent: React.FC<IProps> = ({
onClick={handleRight}
className={`${CLASSNAME_NAVBUTTON} d-none d-lg-block`}
>
<Icon icon="chevron-right" />
<Icon icon={faChevronRight} />
</Button>
)}
</div>
@@ -768,7 +769,7 @@ export const LightboxComponent: React.FC<IProps> = ({
onClick={() => setIndex(images.length - 1)}
className={CLASSNAME_NAVBUTTON}
>
<Icon icon="arrow-left" className="mr-4" />
<Icon icon={faArrowLeft} className="mr-4" />
</Button>
{navItems}
<Button
@@ -776,7 +777,7 @@ export const LightboxComponent: React.FC<IProps> = ({
onClick={() => setIndex(0)}
className={CLASSNAME_NAVBUTTON}
>
<Icon icon="arrow-right" className="ml-4" />
<Icon icon={faArrowRight} className="ml-4" />
</Button>
</div>
)}
@@ -813,3 +814,5 @@ export const LightboxComponent: React.FC<IProps> = ({
</div>
);
};
export default LightboxComponent;