ActiveReportsJS 디자이너에서 보고서 저장

import React, { Fragment } from "react";
import { Designer } from "@mescius/activereportsjs-react";

function App() {
  const counter = React.useRef(0);
  const [reportStorage, setReportStorage] = React.useState(new Map());

  const onSave = function (info) {
    const reportId = info.id || `report${counter.current++}`;
    setReportStorage(new Map(reportStorage.set(reportId, info.definition)));
    return Promise.resolve({ displayName: reportId });
  };

  const onSaveAs = function (info) {
    const reportId = info.id || `report${counter.current++}`;
    setReportStorage(new Map(reportStorage.set(reportId, info.definition)));
    return Promise.resolve({ id: reportId, displayName: reportId });
  };

  return (
    <div id="designer-host">
      <Designer onSave={onSave} onSaveAs={onSaveAs} />
    </div>
  );
}

var designer = new MESCIUS.ActiveReportsJS.ReportDesigner.Designer(
  "#designer-host"
);
designer.setActionHandlers({
  onSave: function(){
    // the implementation of the onSave handler
  },
  onSaveAs: function(){
    // the implementation of the onSaveAs handler
  }
})
designer.documentChanged.register(function(args){
  if(args.isDirty){
    designer.processCommand('save');
  }
});