graft-react
Version:
react admin and helper components for graft-db
108 lines (107 loc) • 6.71 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var React = require("react");
var Toolbars_1 = require("react-md/lib/Toolbars");
var Button_1 = require("react-md/lib/Buttons/Button");
var PublishButton_1 = require("./PublishButton");
var WithQuery_1 = require("./WithQuery");
var TextProperty_1 = require("./TextProperty");
var RichTextProperty_1 = require("./RichTextProperty");
var LabelProperty_1 = require("./LabelProperty");
var BooleanProperty_1 = require("./BooleanProperty");
var EdgeProperty_1 = require("./EdgeProperty");
var LocationProperty_1 = require("./LocationProperty");
var EnumProperty_1 = require("./EnumProperty");
var ImageProperty_1 = require("./ImageProperty");
var IntProperty_1 = require("./IntProperty");
var graft_db_1 = require("graft-db");
var Router_1 = require("./Router");
var utils_1 = require("../utils");
var fragments = require("../fragments");
var ObjectEdit = (function (_super) {
__extends(ObjectEdit, _super);
function ObjectEdit() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.showSidebar = function () {
var navigator = _this.context.navigator;
navigator.update({ sidebar: true });
};
return _this;
}
ObjectEdit.prototype.render = function () {
var _a = this.props, object = _a.object, objects = _a.objects, types = _a.types;
if (!object) {
return React.createElement("p", null, "NO_OBJECT");
}
var objectsWithName = (objects || []).map(function (o) {
if (!o.name) {
o.name = o.id;
}
return o;
});
var fields = object.type.properties.map(function (p) {
var key = object.id + "_" + p.id;
if (p.list) {
var vs = object.values.filter(function (v) { return v.property.id === p.id; });
switch (graft_db_1.PropertyType[p.type]) {
case graft_db_1.PropertyType.Edge:
return React.createElement(EdgeProperty_1.EdgeProperty, { key: key, object: object, property: p, values: vs, objects: objectsWithName, types: types || [] });
case graft_db_1.PropertyType.Image:
return React.createElement(ImageProperty_1.ImageProperty, { key: key, object: object, property: p, values: vs });
default:
return React.createElement("div", { key: key },
"no property component for List of ",
p.type,
" values");
}
}
else {
var v = utils_1.find(object.values, function (v) { return v.property.id === p.id; });
switch (graft_db_1.PropertyType[p.type]) {
case graft_db_1.PropertyType.Label:
return React.createElement(LabelProperty_1.LabelProperty, { key: key, object: object, property: p, value: v });
case graft_db_1.PropertyType.ShortText:
case graft_db_1.PropertyType.LongText:
return React.createElement(TextProperty_1.TextProperty, { key: key, object: object, property: p, value: v });
case graft_db_1.PropertyType.RichText:
return React.createElement(RichTextProperty_1.RichTextProperty, { key: key, object: object, property: p, value: v, objects: objects || [], types: types || [] });
case graft_db_1.PropertyType.Int:
return React.createElement(IntProperty_1.IntProperty, { key: key, object: object, property: p, value: v });
case graft_db_1.PropertyType.Boolean:
return React.createElement(BooleanProperty_1.BooleanProperty, { key: key, object: object, property: p, value: v });
case graft_db_1.PropertyType.Enum:
return React.createElement(EnumProperty_1.EnumProperty, { key: key, object: object, property: p, value: v });
case graft_db_1.PropertyType.Location:
return React.createElement(LocationProperty_1.LocationProperty, { key: key, object: object, property: p, value: v });
default:
return React.createElement("div", { key: key },
"Missing ",
p.type,
"Property component");
}
}
});
var title = "Edit " + object.type.name;
var navigator = this.context.navigator;
var sidebar = navigator.data().sidebar;
return (React.createElement("div", null,
React.createElement(Toolbars_1.default, { colored: true, nav: sidebar ? React.createElement(Button_1.default, { key: 'nav', icon: true, onClick: function () { return window.history.go(-1); } }, "arrow_back") : React.createElement(Button_1.default, { key: "nav", icon: true, onClick: this.showSidebar }, "menu"), title: title, actions: [React.createElement(PublishButton_1.PublishButton, { key: 'publish' }), React.createElement(Button_1.default, { key: 'preview', icon: true, onClick: navigator.togglePreview }, "visibility")] }),
React.createElement("div", { className: 'md-grid properties .md-grid--no-spacing', style: { padding: 0 } }, fields)));
};
return ObjectEdit;
}(React.Component));
ObjectEdit.contextTypes = Router_1.navigatorContextTypes;
ObjectEdit = __decorate([
WithQuery_1.WithQuery("\n\tquery args($id: ID!) {\n\t\tobject:node(id: $id) {\n\t\t\t...on ObjectInterface {\n\t\t\t\t" + fragments.object + "\n\t\t\t}\n\t\t}\n\t\tobjects {\n\t\t\tid:_id\n\t\t\tname\n\t\t\ttype {\n\t\t\t\tid:_id\n\t\t\t}\n\t\t}\n\t\ttypes {\n\t\t\tid:_id\n\t\t\tname\n\t\t}\n\t}\n")
], ObjectEdit);
exports.ObjectEdit = ObjectEdit;