@itwin/presentation-rules-editor-react
v0.1.1
Published
iTwin.js Presentation Rules Editor React components
Downloads
7
Readme
@itwin/presentation-rules-editor-react
A set of React components used by Presentation Rules Editor.
Installation
npm install @itwin/presentation-rules-editor-react
Usage
The following example demonstrates how to assemble a basic Presentation rules editor out of provided React components:
import * as monaco from "monaco-editor";
import { useEffect, useState } from "react";
import { IModelConnection } from "@itwin/core-frontend";
import { ContentSpecificationTypes, Ruleset, RuleTypes } from "@itwin/presentation-common";
import { EditableRuleset, PropertyGrid, SoloRulesetEditor, Tree } from "@itwin/presentation-rules-editor-react";
function MyComponent(props: { iModel: IModelConnection }): React.ReactElement {
const [editableRuleset] = useState(() => new EditableRuleset({ initialRuleset: ruleset }));
const [rulesetEditor] = useState(
() => new SoloRulesetEditor({ editableRuleset, monaco, contributions: { submitButton: true } }),
);
useEffect(
() => {
// Free resources when MyComponent unmounts
return () => {
rulesetEditor.dispose();
editableRuleset.dispose();
};
},
[editableRuleset, rulesetEditor],
);
return (
<>
<rulesetEditor.Component width={800} height={600} />
<Tree
width={350}
height={400}
iModel={props.iModel}
editableRuleset={editableRuleset}
/>
<PropertyGrid
width={350}
height={400}
iModel={props.iModel}
editableRuleset={editableRuleset}
/>
</>
);
}
const ruleset: Ruleset = {
id: "ruleset1",
rules: [{
ruleType: RuleTypes.Content,
specifications: [{
specType: ContentSpecificationTypes.SelectedNodeInstances,
}],
}],
};