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

UI Plugin API (#4256)

Browse Source 
* Add page registration
* Add example plugin
* First version of proper react plugins
* Make reference react plugin
* Add patching functions
* Add tools link poc
* NavItem poc
* Add loading hook for lazily loaded components
* Add documentation
This commit is contained in:
WithoutPants
2023-11-28 13:06:44 +11:00
committed by GitHub
parent 11be56cc42
commit b915428f06
17 changed files with 2418 additions and 384 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
ui/v2.5/src/components/Settings/Inputs.tsx
View File

@@ -4,6 +4,7 @@ import { Button, Collapse, Form, Modal, ModalProps } from "react-bootstrap";
import { FormattedMessage, useIntl } from "react-intl";
import { Icon } from "../Shared/Icon";
import { StringListInput } from "../Shared/StringListInput";
import { PatchComponent } from "src/pluginApi";
interface ISetting {
id?: string;
@@ -17,57 +18,64 @@ interface ISetting {
disabled?: boolean;
}
export const Setting: React.FC<PropsWithChildren<ISetting>> = ({
id,
className,
heading,
headingID,
subHeadingID,
subHeading,
children,
tooltipID,
onClick,
disabled,
}) => {
const intl = useIntl();
export const Setting: React.FC<PropsWithChildren<ISetting>> = PatchComponent(
"Setting",
(props: PropsWithChildren<ISetting>) => {
const {
id,
className,
heading,
headingID,
subHeadingID,
subHeading,
children,
tooltipID,
onClick,
disabled,
} = props;
function renderHeading() {
if (headingID) {
return intl.formatMessage({ id: headingID });
const intl = useIntl();
function renderHeading() {
if (headingID) {
return intl.formatMessage({ id: headingID });
}
return heading;
}
return heading;
}
function renderSubHeading() {
if (subHeadingID) {
return (
<div className="sub-heading">
{intl.formatMessage({ id: subHeadingID })}
function renderSubHeading() {
if (subHeadingID) {
return (
<div className="sub-heading">
{intl.formatMessage({ id: subHeadingID })}
</div>
);
}
if (subHeading) {
return <div className="sub-heading">{subHeading}</div>;
}
}
const tooltip = tooltipID
? intl.formatMessage({ id: tooltipID })
: undefined;
const disabledClassName = disabled ? "disabled" : "";
return (
<div
className={`setting ${className ?? ""} ${disabledClassName}`}
id={id}
onClick={onClick}
>
<div>
<h3 title={tooltip}>{renderHeading()}</h3>
{renderSubHeading()}
</div>
);
}
if (subHeading) {
return <div className="sub-heading">{subHeading}</div>;
}
}
const tooltip = tooltipID ? intl.formatMessage({ id: tooltipID }) : undefined;
const disabledClassName = disabled ? "disabled" : "";
return (
<div
className={`setting ${className ?? ""} ${disabledClassName}`}
id={id}
onClick={onClick}
>
<div>
<h3 title={tooltip}>{renderHeading()}</h3>
{renderSubHeading()}
<div>{children}</div>
</div>
<div>{children}</div>
</div>
);
};
);
}
) as React.FC<PropsWithChildren<ISetting>>;
interface ISettingGroup {
settingProps?: ISetting;