Commit 21a8fb83 authored by Laurent Wouters's avatar Laurent Wouters
Browse files

Do not depend on React for abstract views

parent f7d0312d0959
......@@ -22,9 +22,7 @@
"license": "LGPL-3.0",
"dependencies": {
"@types/rdflib": "file:../rdflib-types",
"@types/react": "^16.4.6",
"rdflib": "^0.17.0",
"react": "^16.2.0"
"rdflib": "^0.17.0"
},
"devDependencies": {
"copy-webpack-plugin": "^4.5.2",
......
......@@ -19,7 +19,6 @@
******************************************************************************/
import { RdfStore } from "rdflib";
import { ReactNode } from "react";
/**
* A renderer for an application
......@@ -31,7 +30,7 @@ export interface ViewRenderer {
* @param root The root resource
* @param target The target resource for this view
*/
render(store: RdfStore, root: string, target: string): ReactNode;
render(store: RdfStore, root: string, target: string): HTMLElement;
}
/**
......
......@@ -19,7 +19,6 @@
******************************************************************************/
import { RdfStore } from "rdflib";
import { ReactNode } from "react";
import { ViewRenderer, Application } from "./application";
import {
ViewDescriptor,
......@@ -55,7 +54,7 @@ export interface ViewImplementation {
store: RdfStore,
root: string,
target: string
): ReactNode;
): HTMLElement;
}
/**
......@@ -259,7 +258,7 @@ class ViewRendererImpl implements ViewRenderer {
* @param root The root resource
* @param target The target resource for this view
*/
render(store: RdfStore, root: string, target: string = root): ReactNode {
render(store: RdfStore, root: string, target: string = root): HTMLElement {
let view = resolveViewFor(this.implementations, store, target);
if (view == null) return null;
return view.render(this, store, root, target);
......
......@@ -19,10 +19,12 @@
******************************************************************************/
import { definition, application, implementation } from "@logilab/libview";
import * as React from "react";
import { RdfStore, Term, RDF } from "rdflib";
import { RdfStore, RDF } from "rdflib/build/lib";
let _rdf = require("rdflib");
const $rdf: RDF = _rdf;
import React = require("react");
import ReactDOM = require("react-dom");
import { ViewRoot } from "./dbpedia_person_impl";
/**
* The descritptor for the default Dbpedia person view
......@@ -37,21 +39,6 @@ const DESCRIPTOR_PERSON: definition.ViewDescriptor = {
}
};
/**
* Gets the value for the propert of a resource
* @param store The RDF store containing the data
* @param resource The resource
* @param property The property
*/
function getValueOf(store: RdfStore, resource: string, property: string): Term {
return store.any(
$rdf.sym(resource),
$rdf.sym(property),
undefined,
undefined
);
}
/**
* Determines whether the RDF store with the specified primary topic matches a trait:
* Has a primary topic
......@@ -96,34 +83,15 @@ class DBPediaPersonRendering implements implementation.ViewImplementation {
store: RdfStore,
root: string,
target: string
): React.ReactNode {
let name = getValueOf(store, root, "http://xmlns.com/foaf/0.1/name").value;
return (
<div
style={{
width: "90%",
marginLeft: "5%",
marginTop: "5vh",
marginBottom: "5vh"
}}
>
<div
style={{
width: "75%",
marginLeft: "12.5%",
marginTop: "2vh",
marginBottom: "2vh"
}}
>
<div className="alert alert-info" role="alert">
"DBPedia Person"
</div>
</div>
<div>
<span>Name: {name}</span>
</div>
</div>
);
): HTMLElement {
let result = document.createElement("div");
let viewRoot = <ViewRoot />;
viewRoot.props.setState({
store: store,
root: root
});
ReactDOM.render(viewRoot, result);
return result;
}
}
......
/*******************************************************************************
* Copyright 2003-2018 LOGILAB S.A. (Paris, FRANCE), all rights reserved.
* contact http://www.logilab.fr/ -- mailto:contact@logilab.fr
*
* This file is part of CubicWeb.
*
* CubicWeb is free software: you can redistribute it and/or modify it under the
* terms of the GNU Lesser General Public License as published by the Free
* Software Foundation, either version 2.1 of the License, or (at your option)
* any later version.
*
* CubicWeb is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
* FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
* details.
*
* You should have received a copy of the GNU Lesser General Public License along
* with CubicWeb. If not, see <http://www.gnu.org/licenses/>.
******************************************************************************/
import * as React from "react";
import { RdfStore, Term, RDF } from "rdflib/build/lib";
let _rdf = require("rdflib");
const $rdf: RDF = _rdf;
/**
* Gets the value for the propert of a resource
* @param store The RDF store containing the data
* @param resource The resource
* @param property The property
*/
function getValueOf(store: RdfStore, resource: string, property: string): Term {
return store.any(
$rdf.sym(resource),
$rdf.sym(property),
undefined,
undefined
);
}
/**
* State for this component
*/
export interface State {
store: RdfStore;
root: string;
}
/**
* The root component for the view
*/
export class ViewRoot extends React.Component<{}, State> {
state: State;
constructor(props: any) {
super(props);
this.state = null;
}
render() {
if (this.state == null) {
return <div />;
}
let name = getValueOf(
this.state.store,
this.state.root,
"http://xmlns.com/foaf/0.1/name"
).value;
return (
<div
style={{
width: "90%",
marginLeft: "5%",
marginTop: "5vh",
marginBottom: "5vh"
}}
>
<div
style={{
width: "75%",
marginLeft: "12.5%",
marginTop: "2vh",
marginBottom: "2vh"
}}
>
<div className="alert alert-info" role="alert">
"DBPedia Person"
</div>
</div>
<div>
<span>Name: {name}</span>
</div>
</div>
);
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment