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

Upgrade create-react-app and assorted libraries (#914)

Browse Source 
* Update create-react-app, react, typescript and eslint versions
* Various library updates
This commit is contained in:
InfiniteTF
2020-11-25 03:20:48 +01:00
committed by GitHub
parent e3eb550a7d
commit 794ea00d37
26 changed files with 4812 additions and 5460 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx
View File

@@ -1,6 +1,7 @@
import React, { useEffect, useState } from "react";
import { useHistory } from "react-router-dom";
import { Button, Form, Col, Row } from "react-bootstrap";
import Mousetrap from "mousetrap";
import * as GQL from "src/core/generated-graphql";
import {
queryScrapeGalleryURL,

1
ui/v2.5/src/components/Galleries/GalleryList.tsx
View File

@@ -2,6 +2,7 @@ import React, { useState } from "react";
import _ from "lodash";
import { Table } from "react-bootstrap";
import { Link, useHistory } from "react-router-dom";
import Mousetrap from "mousetrap";
import {
FindGalleriesQueryResult,
GallerySlimDataFragment,

1
ui/v2.5/src/components/Images/ImageDetails/ImageEditPanel.tsx
View File

@@ -1,5 +1,6 @@
import React, { useEffect, useState } from "react";
import { Button, Form, Col, Row } from "react-bootstrap";
import Mousetrap from "mousetrap";
import * as GQL from "src/core/generated-graphql";
import { useImageUpdate } from "src/core/StashService";
import {

1
ui/v2.5/src/components/Images/ImageList.tsx
View File

@@ -2,6 +2,7 @@ import React, { useState } from "react";
import _ from "lodash";
import { useHistory } from "react-router-dom";
import FsLightbox from "fslightbox-react";
import Mousetrap from "mousetrap";
import {
FindImagesQueryResult,
SlimImageDataFragment,

1
ui/v2.5/src/components/List/AddFilter.tsx
View File

@@ -1,6 +1,7 @@
import _ from "lodash";
import React, { useEffect, useRef, useState } from "react";
import { Button, Form, Modal, OverlayTrigger, Tooltip } from "react-bootstrap";
import Mousetrap from "mousetrap";
import { Icon, FilterSelect, DurationInput } from "src/components/Shared";
import { CriterionModifier } from "src/core/generated-graphql";
import {

1
ui/v2.5/src/components/List/ListFilter.tsx
View File

@@ -1,5 +1,6 @@
import _, { debounce } from "lodash";
import React, { useState, useEffect } from "react";
import Mousetrap from "mousetrap";
import { SortDirectionEnum } from "src/core/generated-graphql";
import {
Badge,

3
ui/v2.5/src/components/MainNavbar.tsx
View File

@@ -9,8 +9,9 @@ import { Nav, Navbar, Button } from "react-bootstrap";
import { IconName } from "@fortawesome/fontawesome-svg-core";
import { LinkContainer } from "react-router-bootstrap";
import { Link, NavLink, useLocation, useHistory } from "react-router-dom";
import { SessionUtils } from "src/utils";
import Mousetrap from "mousetrap";
import { SessionUtils } from "src/utils";
import { Icon } from "src/components/Shared";
import { Manual } from "./Help/Manual";

1
ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx
View File

@@ -1,5 +1,6 @@
import React, { useEffect, useState, useCallback } from "react";
import { useIntl } from "react-intl";
import Mousetrap from "mousetrap";
import * as GQL from "src/core/generated-graphql";
import {
useFindMovie,

1
ui/v2.5/src/components/Movies/MovieList.tsx
View File

@@ -1,5 +1,6 @@
import React, { useState } from "react";
import _ from "lodash";
import Mousetrap from "mousetrap";
import { FindMoviesQueryResult } from "src/core/generated-graphql";
import { ListFilterModel } from "src/models/list-filter/filter";
import { DisplayMode } from "src/models/list-filter/types";

1
ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx
View File

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
import { Button, Tabs, Tab } from "react-bootstrap";
import { useParams, useHistory } from "react-router-dom";
import cx from "classnames";
import Mousetrap from "mousetrap";
import * as GQL from "src/core/generated-graphql";
import {
useFindPerformer,

1
ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx
View File

@@ -1,6 +1,7 @@
import React, { useEffect, useState } from "react";
import { useIntl } from "react-intl";
import { Button, Popover, OverlayTrigger, Table } from "react-bootstrap";
import Mousetrap from "mousetrap";
import * as GQL from "src/core/generated-graphql";
import {
getGenderStrings,

1
ui/v2.5/src/components/Performers/PerformerList.tsx
View File

@@ -1,6 +1,7 @@
import _ from "lodash";
import React, { useState } from "react";
import { useHistory } from "react-router-dom";
import Mousetrap from "mousetrap";
import { FindPerformersQueryResult } from "src/core/generated-graphql";
import { queryFindPerformers } from "src/core/StashService";
import { usePerformersList } from "src/hooks";

1
ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx
View File

@@ -7,6 +7,7 @@ import {
Col,
Row,
} from "react-bootstrap";
import Mousetrap from "mousetrap";
import * as GQL from "src/core/generated-graphql";
import {
queryScrapeScene,

1
ui/v2.5/src/components/Scenes/SceneDetails/SceneMarkersPanel.tsx
View File

@@ -1,5 +1,6 @@
import React, { useState, useEffect } from "react";
import { Button } from "react-bootstrap";
import Mousetrap from "mousetrap";
import * as GQL from "src/core/generated-graphql";
import { WallPanel } from "src/components/Wall/WallPanel";
import { PrimaryTags } from "./PrimaryTags";

1
ui/v2.5/src/components/Scenes/SceneList.tsx
View File

@@ -1,6 +1,7 @@
import React, { useState } from "react";
import _ from "lodash";
import { useHistory } from "react-router-dom";
import Mousetrap from "mousetrap";
import {
FindScenesQueryResult,
SlimSceneDataFragment,

1
ui/v2.5/src/components/Scenes/SceneMarkerList.tsx
View File

@@ -1,6 +1,7 @@
import _ from "lodash";
import React from "react";
import { useHistory } from "react-router-dom";
import Mousetrap from "mousetrap";
import { FindSceneMarkersQueryResult } from "src/core/generated-graphql";
import { queryFindSceneMarkers } from "src/core/StashService";
import { NavUtils } from "src/utils";

286
ui/v2.5/src/components/Shared/Select.tsx
View File

@@ -88,6 +88,142 @@ const getSelectedValues = (selectedItems: ValueType<Option>) =>
)
: [];
const SelectComponent: React.FC<ISelectProps & ITypeProps> = ({
type,
initialIds,
onChange,
className,
items,
selectedOptions,
isLoading,
isDisabled = false,
onCreateOption,
isClearable = true,
creatable = false,
isMulti = false,
onInputChange,
placeholder,
showDropdown = true,
groupHeader,
closeMenuOnSelect = true,
}) => {
const defaultValue =
items.filter((item) => initialIds?.indexOf(item.value) !== -1) ?? null;
const options = groupHeader
? [
{
label: groupHeader,
options: items,
},
]
: items;
const styles = {
option: (base: CSSProperties) => ({
...base,
color: "#000",
}),
container: (base: CSSProperties, props: Props) => ({
...base,
zIndex: props.isFocused ? 10 : base.zIndex,
}),
multiValueRemove: (base: CSSProperties, props: Props) => ({
...base,
color: props.isFocused ? base.color : "#333333",
}),
};
const props = {
options,
value: selectedOptions,
className,
classNamePrefix: "react-select",
onChange,
isMulti,
isClearable,
defaultValue,
noOptionsMessage: () => (type !== "tags" ? "None" : null),
placeholder: isDisabled ? "" : placeholder,
onInputChange,
isDisabled,
isLoading,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
styles: styles as any, // TODO: Typing error, remove at some point
closeMenuOnSelect,
components: {
IndicatorSeparator: () => null,
...((!showDropdown || isDisabled) && { DropdownIndicator: () => null }),
...(isDisabled && { MultiValueRemove: () => null }),
},
};
return creatable ? (
<CreatableSelect
{...props}
isDisabled={isLoading || isDisabled}
onCreateOption={onCreateOption}
/>
) : (
<Select {...props} />
);
};
const FilterSelectComponent: React.FC<
IFilterComponentProps & ITypeProps & IFilterSelectProps
> = (props) => {
const [loading, setLoading] = useState(false);
const selectedIds = props.ids ?? [];
const Toast = useToast();
const { items } = props;
const options = items.map((i) => ({
value: i.id,
label: i.name ?? "",
}));
const selectedOptions = options.filter((option) =>
selectedIds.includes(option.value)
);
const onChange = (selectedItems: ValueType<Option>) => {
const selectedValues = getSelectedValues(selectedItems);
props.onSelect?.(items.filter((item) => selectedValues.includes(item.id)));
};
const onCreate = async (name: string) => {
try {
setLoading(true);
const { item: newItem, message } = await props.onCreate!(name);
props.onSelect?.([
...items.filter((item) => selectedIds.includes(item.id)),
newItem,
]);
setLoading(false);
Toast.success({
content: (
<span>
{message}: <b>{name}</b>
</span>
),
});
} catch (e) {
Toast.error(e);
}
};
return (
<SelectComponent
{...(props as ITypeProps)}
{...(props as IFilterSelectProps)}
isLoading={props.isLoading || loading}
onChange={onChange}
items={options}
selectedOptions={selectedOptions}
onCreateOption={props.creatable ? onCreate : undefined}
/>
);
};
export const SceneGallerySelect: React.FC<ISceneGallerySelect> = (props) => {
const [query, setQuery] = React.useState<string>("");
const { data, loading } = useFindGalleries(getFilter());
@@ -201,16 +337,6 @@ export const MarkerTitleSuggest: React.FC<IMarkerSuggestProps> = (props) => {
/>
);
};
export const FilterSelect: React.FC<IFilterProps & ITypeProps> = (props) =>
props.type === "performers" ? (
<PerformerSelect {...(props as IFilterProps)} />
) : props.type === "studios" || props.type === "parent_studios" ? (
<StudioSelect {...(props as IFilterProps)} />
) : props.type === "movies" ? (
<MovieSelect {...(props as IFilterProps)} />
) : (
<TagSelect {...(props as IFilterProps)} />
);
export const PerformerSelect: React.FC<IFilterProps> = (props) => {
const { data, loading } = useAllPerformersForFilter();
@@ -308,137 +434,13 @@ export const TagSelect: React.FC<IFilterProps> = (props) => {
);
};
const FilterSelectComponent: React.FC<
IFilterComponentProps & ITypeProps & IFilterSelectProps
> = (props) => {
const [loading, setLoading] = useState(false);
const selectedIds = props.ids ?? [];
const Toast = useToast();
const { items } = props;
const options = items.map((i) => ({
value: i.id,
label: i.name ?? "",
}));
const selectedOptions = options.filter((option) =>
selectedIds.includes(option.value)
);
const onChange = (selectedItems: ValueType<Option>) => {
const selectedValues = getSelectedValues(selectedItems);
props.onSelect?.(items.filter((item) => selectedValues.includes(item.id)));
};
const onCreate = async (name: string) => {
try {
setLoading(true);
const { item: newItem, message } = await props.onCreate!(name);
props.onSelect?.([
...items.filter((item) => selectedIds.includes(item.id)),
newItem,
]);
setLoading(false);
Toast.success({
content: (
<span>
{message}: <b>{name}</b>
</span>
),
});
} catch (e) {
Toast.error(e);
}
};
return (
<SelectComponent
{...(props as ITypeProps)}
{...(props as IFilterSelectProps)}
isLoading={props.isLoading || loading}
onChange={onChange}
items={options}
selectedOptions={selectedOptions}
onCreateOption={props.creatable ? onCreate : undefined}
/>
);
};
const SelectComponent: React.FC<ISelectProps & ITypeProps> = ({
type,
initialIds,
onChange,
className,
items,
selectedOptions,
isLoading,
isDisabled = false,
onCreateOption,
isClearable = true,
creatable = false,
isMulti = false,
onInputChange,
placeholder,
showDropdown = true,
groupHeader,
closeMenuOnSelect = true,
}) => {
const defaultValue =
items.filter((item) => initialIds?.indexOf(item.value) !== -1) ?? null;
const options = groupHeader
? [
{
label: groupHeader,
options: items,
},
]
: items;
const styles = {
option: (base: CSSProperties) => ({
...base,
color: "#000",
}),
container: (base: CSSProperties, props: Props) => ({
...base,
zIndex: props.isFocused ? 10 : base.zIndex,
}),
multiValueRemove: (base: CSSProperties, props: Props) => ({
...base,
color: props.isFocused ? base.color : "#333333",
}),
};
const props = {
options,
value: selectedOptions,
className,
classNamePrefix: "react-select",
onChange,
isMulti,
isClearable,
defaultValue,
noOptionsMessage: () => (type !== "tags" ? "None" : null),
placeholder: isDisabled ? "" : placeholder,
onInputChange,
isDisabled,
isLoading,
styles,
closeMenuOnSelect,
components: {
IndicatorSeparator: () => null,
...((!showDropdown || isDisabled) && { DropdownIndicator: () => null }),
...(isDisabled && { MultiValueRemove: () => null }),
},
};
return creatable ? (
<CreatableSelect
{...props}
isDisabled={isLoading || isDisabled}
onCreateOption={onCreateOption}
/>
export const FilterSelect: React.FC<IFilterProps & ITypeProps> = (props) =>
props.type === "performers" ? (
<PerformerSelect {...(props as IFilterProps)} />
) : props.type === "studios" || props.type === "parent_studios" ? (
<StudioSelect {...(props as IFilterProps)} />
) : props.type === "movies" ? (
<MovieSelect {...(props as IFilterProps)} />
) : (
<Select {...props} />
<TagSelect {...(props as IFilterProps)} />
);
};

1
ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx
View File

@@ -2,6 +2,7 @@ import { Table, Tabs, Tab } from "react-bootstrap";
import React, { useEffect, useState } from "react";
import { useParams, useHistory, Link } from "react-router-dom";
import cx from "classnames";
import Mousetrap from "mousetrap";
import * as GQL from "src/core/generated-graphql";
import {

1
ui/v2.5/src/components/Studios/StudioList.tsx
View File

@@ -1,6 +1,7 @@
import React, { useState } from "react";
import _ from "lodash";
import { useHistory } from "react-router-dom";
import Mousetrap from "mousetrap";
import { FindStudiosQueryResult } from "src/core/generated-graphql";
import { useStudiosList } from "src/hooks";
import { showWhenSelected } from "src/hooks/ListHook";

1
ui/v2.5/src/components/Tags/TagDetails/Tag.tsx
View File

@@ -2,6 +2,7 @@ import { Table, Tabs, Tab } from "react-bootstrap";
import React, { useEffect, useState } from "react";
import { useParams, useHistory } from "react-router-dom";
import cx from "classnames";
import Mousetrap from "mousetrap";
import * as GQL from "src/core/generated-graphql";
import {

1
ui/v2.5/src/components/Tags/TagList.tsx
View File

@@ -1,5 +1,6 @@
import React, { useState } from "react";
import _ from "lodash";
import Mousetrap from "mousetrap";
import { FindTagsQueryResult } from "src/core/generated-graphql";
import { ListFilterModel } from "src/models/list-filter/filter";
import { DisplayMode } from "src/models/list-filter/types";