lincd
Version:
LINCD is a JavaScript library for building user interfaces with linked data (also known as 'structured data', or RDF)
64 lines • 2.76 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.LinkedComponentClass = void 0;
const react_1 = __importDefault(require("react"));
const models_1 = require("../models");
/**
* Extend this class when you want to create a linked component using a classes (instead of a Functional Component).
* This class extends React.Component.
* Besides the usual react functionality, it provides extra properties like 'sourceShape' and also automatically rerenders when properties of the source node are changed in the graph.
*
* Note that this class needs to be used together with the decorator [@linkedComponentClass](/docs/lincd.js/interfaces/utils_Module.LinkedPackageObject#linkedcomponentclass)
*
* It receives 3 type parameters, first the ShapeClass (required) and then the usual props and state types of react.
* As ShapeClass you will need to provide the same class as you used in the `@linkedComponentClass`.
*
* @example
* Linked component class example:
* ```tsx
* import {React} from "react";
* import {linkedComponentClass} from "../package";
* impoprt {LinkedComponentClass} from "lincd/lib/utils/ComponentClass";
* @linkedComponentClass(Person)
* export class PersonView extends LinkedComponentClass<Person> {
* render() {
* //typescript knows that person is of type Person
* let person = this.props.sourceShape;
*
* //get the name of the person from the graph
* return <h1>Hello {person.name}!</h1>;
* }
* }
* ```
*/
class LinkedComponentClass extends react_1.default.Component {
componentDidUpdate(prevProps, prevState, snapshot) {
if (prevProps.source !== this.props.source && this.props.source instanceof models_1.NamedNode) {
this.props.source.onChangeAny((changes, property) => {
console.log('Properties of source ' + this._shape.toString() + ' changed. Updating.');
this.forceUpdate();
});
}
}
get sourceShape() {
if (typeof this._shape === 'undefined') {
//not providing a source is allowed
if (!this.props.source) {
this._shape = null;
}
else {
let shapeClass = this.constructor['shape'];
if (!shapeClass) {
throw new Error(`${this.constructor.name} is not linked to a shape`);
}
this._shape = new shapeClass(this.props.source);
}
}
return this._shape;
}
}
exports.LinkedComponentClass = LinkedComponentClass;
//# sourceMappingURL=LinkedComponentClass.js.map