@vivliostyle/react
Version:
React component for Vivliostyle
6 lines (5 loc) • 2.71 kB
JavaScript
import e from"@emotion/styled";import{Navigation as n,PageViewMode as t,ReadyState as r,CoreViewer as o}from"@vivliostyle/core";import a,{useRef as i,useEffect as d}from"react";function c(){return c=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)({}).hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},c.apply(null,arguments)}let s;const u=({source:e,page:s=1,zoom:u=1,bookMode:f=!0,fontSize:g=16,background:p="#ececec",renderAllPages:m=!0,autoResize:v=!0,pageViewMode:S=t.SINGLE_PAGE,defaultPaperSize:h,pageBorderWidth:L=1,fitToScreen:y=!1,userStyleSheet:b,authorStyleSheet:z,style:P,onMessage:w,onError:k,onReadyStateChange:E,onLoad:A,onNavigation:M,onHyperlink:O,children:R})=>{const T=i(null),W=i(),G=a.useRef();function j(){W.current.setOptions({fontSize:g,pageViewMode:S,renderAllPages:m,autoResize:v,defaultPaperSize:h,pageBorderWidth:L})}function x(){const n=W.current,t=c({},b?{userStyleSheet:[{[b.endsWith(".css")?"url":"text"]:b}]}:null,z?{authorStyleSheet:[{[z.endsWith(".css")?"url":"text"]:z}]}:null);f?n.loadPublication(e,t):n.loadDocument({url:e},t,{fontSize:g,pageViewMode:S,zoom:u,renderAllPages:m,autoResize:v,defaultPaperSize:h,pageBorderWidth:L,fitToScreen:y})}d(()=>(W.current=new o({viewportElement:T.current}),j(),function(){const e=e=>{var n,t;return null!=(n=null==(t=e.content.error)?void 0:t.toString())?n:e.content.messages.join("\n")};function n(n,t){w&&w(e(n),t)}const t=e=>n(e,"debug"),o=e=>n(e,"info"),a=e=>n(e,"warn");function i(n){k&&k(e(n))}function d(){const{readyState:e}=W.current;E&&E(e)}function c(){A&&A(G.current)}function s(e){const{docTitle:n,epageCount:t,epage:r,metadata:o}=e,a={docTitle:n,epageCount:t,epage:r,metadata:o};G.current=a,M&&M(a)}function u(e){O&&O(e)}const l=W.current;return l.addListener("debug",t),l.addListener("info",o),l.addListener("warn",a),l.addListener("error",i),l.addListener("readystatechange",d),l.addListener("loaded",c),l.addListener("nav",s),l.addListener("hyperlink",u),()=>{E&&E(r.LOADING),l.removeListener("debug",t),l.removeListener("info",o),l.removeListener("warn",a),l.removeListener("error",i),l.removeListener("readystatechange",d),l.removeListener("loaded",c),l.removeListener("nav",s),l.removeListener("hyperlink",u)}}()),[]),d(()=>{x()},[e,z,b,u,y]),d(()=>{j()},[g,S,m,v,h,L]),d(()=>{var e;null==(e=W.current)||e.navigateToPage(n.EPAGE,s-1)},[s]);const B=a.createElement(l,{ref:T,style:P,background:p});return"function"==typeof R&&R instanceof Function?R({container:B,reload:x}):B},l=e.div(s||(s=(e=>e)`
overflow: scroll;
background: ${0} !important;
`),({background:e})=>e);export{u as Renderer};
//# sourceMappingURL=react-vivliostyle.modern.mjs.map