Skip to content

Commit

Permalink
..
Browse files Browse the repository at this point in the history
  • Loading branch information
@tiagobento
tiagobento committed Nov 5, 2024
1 parent 779fd4b commit 67e2e94
Show file tree
Hide file tree
Showing 40 changed files with 905 additions and 1,462 deletions.
17 changes: 11 additions & 6 deletions examples/bpmn-editor-classic-on-webapp/src/BpmnEditorClassicPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,10 @@ import * as React from "react";
import { ChannelType, EnvelopeContentType } from "@kie-tools-core/editor/dist/api";
import { EditorEnvelopeLocator, EnvelopeMapping } from "@kie-tools-core/editor/dist/api";
import { useMemo, useState } from "react";
import { Page } from "@patternfly/react-core/dist/js/components/Page";
import { EmbeddedEditor, useEditorRef } from "@kie-tools-core/editor/dist/embedded";
import { EmbeddedEditorFile } from "@kie-tools-core/editor/dist/channel";
import { Brand } from "@patternfly/react-core/dist/js/components/Brand";
import { Page, PageSection, PageHeader } from "@patternfly/react-core/dist/js/components/Page";
import { Sidebar } from "./Sidebar";

export function BpmnEditorClassicPage() {
Expand Down Expand Up @@ -60,24 +61,28 @@ export function BpmnEditorClassicPage() {
}, []);

return (
<Page>
<div className={"webapp--page-main-div"}>
<Page
header={<PageHeader logo={<Brand src={"logo.png"} alt="Logo" />} />}
sidebar={
<Sidebar
editor={editor}
editorEnvelopeLocator={editorEnvelopeLocator}
file={file}
setFile={setFile}
fileExtension={"bpmn"}
accept={".bpmn, .bpmn2"}
fileExtension={"dmn"}
accept={".dmn"}
/>
}
>
<PageSection padding={{ default: "noPadding" }}>
<EmbeddedEditor
ref={editorRef}
file={file}
editorEnvelopeLocator={editorEnvelopeLocator}
channelType={ChannelType.EMBEDDED}
locale={"en"}
/>
</div>
</PageSection>
</Page>
);
}
106 changes: 48 additions & 58 deletions examples/bpmn-editor-classic-on-webapp/src/Sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ import { Nav, NavItem, NavList } from "@patternfly/react-core/dist/js/components
import { TextInput } from "@patternfly/react-core/dist/js/components/TextInput";
import { EmbeddedEditorRef, useDirtyState } from "@kie-tools-core/editor/dist/embedded";
import { EmbeddedEditorFile } from "@kie-tools-core/editor/dist/channel";
import { Label } from "@patternfly/react-core/dist/js/components/Label";
import { Button, ButtonVariant } from "@patternfly/react-core/dist/js/components/Button";

function extractFileExtension(fileName: string) {
return fileName.match(/[.]/)
Expand Down Expand Up @@ -134,65 +136,53 @@ export function Sidebar({ editorEnvelopeLocator, editor, setFile, file, fileExte
);

return (
<div>
<Nav className={"webapp--page-navigation"}>
<NavList>
<NavItem className={"webapp--page-kogito-editors-sidebar--navigation-nav-item"}>
<div className={"webapp--page-kogito-editors-sidebar--navigation-nav-item-div"}>
<TextInput
className={"webapp--page-kogito-editors-sidebar--navigation-nav-item-text-input"}
value={fileName}
type={"text"}
aria-label={"Edit file name"}
onChange={setFileName}
onBlur={onChangeName}
/>
</div>
</NavItem>
<NavItem className={"webapp--page-kogito-editors-sidebar--navigation-nav-item"}>
<div className={"webapp--page-kogito-editors-sidebar--navigation-nav-item-div"}>
<a className={"webapp--page-kogito-editors-sidebar--navigation-nav-item-a"} onClick={onNewFile}>
New empty file
</a>
</div>
</NavItem>
<NavItem className={"webapp--page-kogito-editors-sidebar--navigation-nav-item"}>
<div className={"webapp--page-kogito-editors-sidebar--navigation-nav-item-div"}>
<a className={"webapp--page-kogito-editors-sidebar--navigation-nav-item-a"}>
Open file
<input
accept={accept}
className={"webapp--page-kogito-editors-sidebar--navigation-nav-item-open-file pf-c-button"}
type="file"
aria-label="File selection"
onChange={onOpenFile}
ref={inputRef}
/>
</a>
</div>
</NavItem>
<NavItem className={"webapp--page-kogito-editors-sidebar--navigation-nav-item"}>
<div className={"webapp--page-kogito-editors-sidebar--navigation-nav-item-div"}>
<a className={"webapp--page-kogito-editors-sidebar--navigation-nav-item-a"} onClick={onOpenSample}>
Open Sample
</a>
</div>
</NavItem>
<NavItem className={"webapp--page-kogito-editors-sidebar--navigation-nav-item"}>
<div className={"webapp--page-kogito-editors-sidebar--navigation-nav-item-div"}>
<a className={"webapp--page-kogito-editors-sidebar--navigation-nav-item-a"} onClick={onDownload}>
Download
</a>
</div>
</NavItem>
{isDirty && (
<div style={{ display: "flex", alignItems: "center", padding: "20px" }}>
<p style={{ color: "red" }}>File edited.</p>
</div>
)}
<>
<Nav>
<NavList style={{ padding: "8px" }}>
<TextInput
value={fileName}
type={"text"}
aria-label={"Edit file name"}
onChange={setFileName}
onBlur={onChangeName}
/>
<br />
<Button variant={ButtonVariant.plain} onClick={onNewFile}>
New empty file
</Button>
<br />
<Button variant={ButtonVariant.plain} onClick={onOpenSample}>
Open file
<input
accept={accept}
style={{
position: "absolute",
left: 0,
top: 0,
opacity: 0,
cursor: "pointer",
width: "100%",
zIndex: 999,
}}
type="file"
aria-label="File selection"
onChange={onOpenFile}
ref={inputRef}
/>
</Button>
<br />
<Button variant={ButtonVariant.plain} onClick={onOpenSample}>
Open Sample
</Button>
<br />
<Button variant={ButtonVariant.plain} onClick={onDownload}>
Download
</Button>
<br />
{isDirty && <Label color={"blue"}>File edited</Label>}
</NavList>
<a ref={downloadRef} />
</Nav>
<a ref={downloadRef} />
</div>
</>
);
}
76 changes: 0 additions & 76 deletions examples/bpmn-editor-classic-on-webapp/src/index.css
View file

This file was deleted.

26 changes: 1 addition & 25 deletions examples/bpmn-editor-classic-on-webapp/src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,30 +20,6 @@
import "@patternfly/react-core/dist/styles/base.css";
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Brand } from "@patternfly/react-core/dist/js/components/Brand";
import { Nav, NavItem, NavList } from "@patternfly/react-core/dist/js/components/Nav";
import { Page, PageHeader } from "@patternfly/react-core/dist/js/components/Page";
import { BpmnEditorClassicPage } from "./BpmnEditorClassicPage";
import "./index.css";

ReactDOM.render(
<Page
header={
<PageHeader
logo={<Brand src={"logo.png"} alt="Logo" />}
topNav={
<Nav aria-label="Nav" variant="horizontal">
<NavList>
<NavItem isActive={true}>
<span>{"BPMN Editor (classic)"}</span>
</NavItem>
</NavList>
</Nav>
}
/>
}
>
<BpmnEditorClassicPage />
</Page>,
document.getElementById("app")
);
ReactDOM.render(<BpmnEditorClassicPage />, document.getElementById("app"));
15 changes: 10 additions & 5 deletions examples/dmn-editor-classic-on-webapp/src/DmnEditorClassicPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,14 @@
* under the License.
*/

import { ChannelType, EnvelopeContentType } from "@kie-tools-core/editor/dist/api";
import * as React from "react";
import { ChannelType, EnvelopeContentType } from "@kie-tools-core/editor/dist/api";
import { EditorEnvelopeLocator, EnvelopeMapping } from "@kie-tools-core/editor/dist/api";
import { useMemo, useState } from "react";
import { Page } from "@patternfly/react-core/dist/js/components/Page";
import { EmbeddedEditor, useEditorRef } from "@kie-tools-core/editor/dist/embedded";
import { EmbeddedEditorFile } from "@kie-tools-core/editor/dist/channel";
import { Brand } from "@patternfly/react-core/dist/js/components/Brand";
import { Page, PageSection, PageHeader } from "@patternfly/react-core/dist/js/components/Page";
import { Sidebar } from "./Sidebar";

export function DmnEditorClassicPage() {
Expand Down Expand Up @@ -60,8 +61,9 @@ export function DmnEditorClassicPage() {
}, []);

return (
<Page>
<div className={"webapp--page-main-div"}>
<Page
header={<PageHeader logo={<Brand src={"logo.png"} alt="Logo" />} />}
sidebar={
<Sidebar
editor={editor}
editorEnvelopeLocator={editorEnvelopeLocator}
Expand All @@ -70,14 +72,17 @@ export function DmnEditorClassicPage() {
fileExtension={"dmn"}
accept={".dmn"}
/>
}
>
<PageSection padding={{ default: "noPadding" }}>
<EmbeddedEditor
ref={editorRef}
file={file}
editorEnvelopeLocator={editorEnvelopeLocator}
channelType={ChannelType.EMBEDDED}
locale={"en"}
/>
</div>
</PageSection>
</Page>
);
}
Loading

0 comments on commit 67e2e94

Please sign in to comment.