Skip to content

Commit

Permalink
up
Browse files Browse the repository at this point in the history
  • Loading branch information
@panaC
panaC committed Oct 9, 2023
1 parent d34e8fe commit f5e3728
Show file tree
Hide file tree
Showing 3 changed files with 62 additions and 93 deletions.
94 changes: 44 additions & 50 deletions src/renderer/library/components/dialog/publicationInfos/PublicationInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ import { useLocation } from "react-router";
import * as stylesButtons from "readium-desktop/renderer/assets/styles/components/buttons.css";

const PublicationInfoLibContext = React.createContext<DialogType[DialogTypeName.PublicationInfoLib] | undefined>(undefined);

export const PublicationInfoLibWithRadix: React.FC<React.PropsWithChildren<{publicationView: Pick<PublicationView, "identifier">}>> = (props) => {
const defaultOpen = false;

Expand Down Expand Up @@ -105,58 +104,47 @@ export const PublicationInfoLibWithRadixContent = React.forwardRef<HTMLDivElemen
);
PublicationInfoLibWithRadixContent.displayName = "PublicationInfoLibWithRadixContent";

// export const PublicationInfoLibWithRadix = (props: { publicationView: Pick<PublicationView, "identifier">, trigger: React.ReactNode }) => {
// const [__] = useTranslator();

// const appOverlayElement = React.useMemo(() => document.getElementById("app-overlay"), []);
// return (
// <Dialog.Root defaultOpen={defaultOpen} open={open} onOpenChange={
// (open) => {
// if (open) {
// dispatch(dialogActions.openRequest.build(DialogTypeName.PublicationInfoLib, {
// publicationIdentifier: props.publicationView.identifier,
// }));
// } else {
// dispatch(dialogActions.closeRequest.build());
// }
// }
// }>
// <Dialog.Trigger asChild>
// {props.trigger}
// </Dialog.Trigger>

// </Dialog.Root>
// );
// };

export const PublicationInfoOpdsWithRadix = (props: { opdsPublicationView: IOpdsPublicationView, trigger: React.ReactNode }) => {
const [__] = useTranslator();
const PublicationInfoOpdsContext = React.createContext<IOpdsPublicationView | undefined>(undefined);
export const PublicationInfoOpdsWithRadix: React.FC<React.PropsWithChildren<{opdsPublicationView: IOpdsPublicationView}>> = (props) => {
const defaultOpen = false;

const dispatch = useDispatch();

const open = useSelector((state: ILibraryRootState) => state.dialog.open);

const appOverlayElement = React.useMemo(() => document.getElementById("app-overlay"), []);
const [open, setOpen] = React.useState(defaultOpen);
return (
<Dialog.Root defaultOpen={defaultOpen} open={open} onOpenChange={
(open) => {
if (open) {
dispatch(dialogActions.openRequest.build(DialogTypeName.PublicationInfoOpds, {
publication: props.opdsPublicationView,
}));
} else {
dispatch(dialogActions.closeRequest.build());
}
}
}>
<Dialog.Trigger asChild>
{props.trigger}
</Dialog.Trigger>
<Dialog.Root
defaultOpen={defaultOpen}
open={open}
onOpenChange={
(open) => {
if (open) {
dispatch(dialogActions.openRequest.build(DialogTypeName.PublicationInfoOpds, {
publication: props.opdsPublicationView,
}));
setOpen(true);
} else {
dispatch(dialogActions.closeRequest.build());
setOpen(false);
}
}}
>
<PublicationInfoOpdsContext.Provider value={props.opdsPublicationView}>
{props.children}
</PublicationInfoOpdsContext.Provider>
</Dialog.Root>
);
};
export const PublicationInfoOpdsWithRadixTrigger = Dialog.Trigger;
PublicationInfoOpdsWithRadixTrigger.displayName = Dialog.Trigger.displayName;
export const PublicationInfoOpdsWithRadixContent = React.forwardRef<HTMLDivElement>(
({ ...props }, forwardRef) => {
const appOverlayElement = React.useMemo(() => document.getElementById("app-overlay"), []);
const [__] = useTranslator();
const dispatch = useDispatch();
return (
<Dialog.Portal container={appOverlayElement}>
{/* <Dialog.Overlay className="DialogOverlay" /> */}
<div className={stylesModals.modal_dialog_overlay}></div>
<Dialog.Content className={stylesModals.modal_dialog}>
<Dialog.Content className={stylesModals.modal_dialog} {...props} ref={forwardRef}>
<div className={stylesModals.modal_dialog_header}>
{/* <Dialog.Title className="DialogTitle">{__("catalog.bookInfo")}</Dialog.Title> */}
<h2>{__("catalog.bookInfo")}</h2>
Expand All @@ -167,13 +155,19 @@ export const PublicationInfoOpdsWithRadix = (props: { opdsPublicationView: IOpds
</Dialog.Close>
</div>
<div className={stylesModals.modal_dialog_body}>
<PublicationInfoWithRadixContent publicationViewMaybeOpds={props.opdsPublicationView} closeDialog={() => dispatch(dialogActions.closeRequest.build())} />
<PublicationInfoOpdsContext.Consumer>
{
(opdsPublicationView) =>
<PublicationInfoWithRadixContent publicationViewMaybeOpds={opdsPublicationView} closeDialog={() => dispatch(dialogActions.closeRequest.build())} />
}
</PublicationInfoOpdsContext.Consumer>
</div>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
);
};
);
},
);
PublicationInfoOpdsWithRadixContent.displayName = "PublicationInfoOpdsWithRadixContent";

const PublicationInfoWithRadixContent = (props: {publicationViewMaybeOpds: TPublication | undefined, closeDialog: () => void, isOpds?: boolean}) => {
const [, translator] = useTranslator(); // FIXME
Expand Down
12 changes: 7 additions & 5 deletions src/renderer/library/components/publication/menu/CatalogMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import {

import PublicationExportButton from "./PublicationExportButton";
import DeletePublicationConfirm from "../../dialog/DeletePublicationConfirm";
import { PublicationInfoLibWithRadix } from "../../dialog/publicationInfos/PublicationInfo";
import { PublicationInfoLibWithRadix, PublicationInfoLibWithRadixContent, PublicationInfoLibWithRadixTrigger } from "../../dialog/publicationInfos/PublicationInfo";

// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface IBaseProps extends TranslatorProps {
Expand Down Expand Up @@ -53,14 +53,16 @@ export class CatalogMenu extends React.Component<IProps, IState> {
return (
<>
<PublicationInfoLibWithRadix
trigger={(
publicationView={this.props.publicationView}
>
<PublicationInfoLibWithRadixTrigger asChild>
<button
>
{__("catalog.bookInfo")}
</button>
)}
publicationView={this.props.publicationView}
/>
</PublicationInfoLibWithRadixTrigger>
<PublicationInfoLibWithRadixContent />
</PublicationInfoLibWithRadix>
<DeletePublicationConfirm
trigger={(
<button
Expand Down
49 changes: 11 additions & 38 deletions src/renderer/library/components/publication/menu/OpdsMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,11 @@
// ==LICENSE-END==

import * as React from "react";
import { connect } from "react-redux";
import { DialogTypeName } from "readium-desktop/common/models/dialog";
import { dialogActions } from "readium-desktop/common/redux/actions/";
import { IOpdsPublicationView } from "readium-desktop/common/views/opds";
import {
TranslatorProps, withTranslator,
} from "readium-desktop/renderer/common/components/hoc/translator";
import { ILibraryRootState } from "readium-desktop/common/redux/states/renderer/libraryRootState";
import { TMouseEventOnButton } from "readium-desktop/typings/react";
import { TDispatch } from "readium-desktop/typings/redux";
import { PublicationInfoOpdsWithRadix } from "../../dialog/publicationInfos/PublicationInfo";
import { PublicationInfoOpdsWithRadix, PublicationInfoOpdsWithRadixContent, PublicationInfoOpdsWithRadixTrigger } from "../../dialog/publicationInfos/PublicationInfo";

// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface IBaseProps extends TranslatorProps {
Expand All @@ -27,7 +21,7 @@ interface IBaseProps extends TranslatorProps {
// ReturnType<typeof mapStateToProps>
// ReturnType<typeof mapDispatchToProps>
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface IProps extends IBaseProps, ReturnType<typeof mapDispatchToProps>, ReturnType<typeof mapStateToProps> {
interface IProps extends IBaseProps {
}

export class OpdsMenu extends React.Component<IProps, undefined> {
Expand All @@ -46,40 +40,19 @@ export class OpdsMenu extends React.Component<IProps, undefined> {
return (
<>
<PublicationInfoOpdsWithRadix
trigger={(
<button role="menuitem"
onClick={this.displayPublicationInfo}
>
opdsPublicationView={this.props.opdsPublicationView}
>
<PublicationInfoOpdsWithRadixTrigger asChild>
<button>
{__("opds.menu.aboutBook")}
</button>
)}
opdsPublicationView={this.props.opdsPublicationView}
/>

</PublicationInfoOpdsWithRadixTrigger>
<PublicationInfoOpdsWithRadixContent />
</PublicationInfoOpdsWithRadix>
</>
);
}

private displayPublicationInfo = (e: TMouseEventOnButton) => {
e.preventDefault();
this.props.displayPublicationInfo();
};
}

const mapDispatchToProps = (dispatch: TDispatch, props: IBaseProps) => {
return {
displayPublicationInfo: () => {
dispatch(dialogActions.openRequest.build(DialogTypeName.PublicationInfoOpds,
{
publication: props.opdsPublicationView,
},
));
},
};
};

const mapStateToProps = (_state: ILibraryRootState, _props: IBaseProps) => {
return {
};
};

export default connect(mapStateToProps, mapDispatchToProps)(withTranslator(OpdsMenu));
export default withTranslator(OpdsMenu);

0 comments on commit f5e3728

Please sign in to comment.