33 lines
1.6 KiB
TypeScript
33 lines
1.6 KiB
TypeScript
import { StrictMode } from 'react';
|
|
import { createRoot } from 'react-dom/client';
|
|
import { OrgChart, type OrgChartProps } from '@hm-design/org-chart-react';
|
|
import { JsonOrgChartDataSource, type OrgChartState } from '@hm-design/org-chart';
|
|
import engineUrl from '@hm-design/org-chart/engine.css?url';
|
|
import coreUrl from '@hm-design/org-chart/style.css?url';
|
|
import fixture from '../org-chart/data-p1.json';
|
|
import './p1.css';
|
|
|
|
const root = createRoot(document.getElementById('root')!);
|
|
const events: OrgChartState[] = [];
|
|
const errors: string[] = [];
|
|
const displayMode = new URLSearchParams(location.search).get('mode') === 'readOnly' ? 'readOnly' : 'interactive';
|
|
document.documentElement.dataset.orgchartMode = displayMode;
|
|
type QueryOptions = Pick<OrgChartProps, 'organizationLinks' | 'onEmployeeClick'>;
|
|
let queryOptions: QueryOptions = {};
|
|
let currentData: unknown = fixture;
|
|
function setData(data: unknown) {
|
|
currentData = data;
|
|
root.render(<StrictMode><OrgChart
|
|
dataSource={new JsonOrgChartDataSource(data)} stylesheetUrls={{ engine: engineUrl, core: coreUrl }} className="consumer-chart"
|
|
displayMode={displayMode}
|
|
{...queryOptions}
|
|
onStateChange={state => events.push(state)} onLifecycleError={error => errors.push(String(error))}
|
|
/></StrictMode>);
|
|
}
|
|
// Optional public-prop seam for consumer integration checks; no URLs are preset.
|
|
function setOptions(options: QueryOptions) { queryOptions = options; setData(currentData); }
|
|
const demo = { data: fixture, events, errors, setData, setOptions, destroy: () => root.unmount() };
|
|
declare global { interface Window { OrgChartP1React: typeof demo } }
|
|
window.OrgChartP1React = demo;
|
|
setData(fixture);
|