@prisma-cms/front-editor
Version:
356 lines • 16.5 kB
JavaScript
"use strict";
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const SwapHoriz_1 = __importDefault(require("material-ui-icons/SwapHoriz"));
const Select_1 = __importDefault(require("material-ui/Select"));
const FormControl_1 = __importDefault(require("material-ui/Form/FormControl"));
const InputLabel_1 = __importDefault(require("material-ui/Input/InputLabel"));
const MenuItem_1 = __importDefault(require("material-ui/Menu/MenuItem"));
const Typography_1 = __importDefault(require("material-ui/Typography"));
const EditorComponent_1 = __importDefault(require("../../../EditorComponent"));
const Connector_1 = require("../Connector");
const Viewer_1 = require("../Viewer");
const ListView_1 = require("../Connector/ListView");
const path_to_regexp_1 = __importDefault(require("path-to-regexp"));
// export const ConnectorContext = createContext({});
class ObjectConnector extends EditorComponent_1.default {
constructor(props) {
super(props);
this.getFilters = this.getFilters.bind(this);
this.setFilters = this.setFilters.bind(this);
}
renderPanelView(content) {
return super.renderPanelView(content || (react_1.default.createElement("div", { className: "editor-component--panel-icon" },
react_1.default.createElement(SwapHoriz_1.default, null),
" Object Connector")));
}
prepareRootElementProps(props) {
const _a = super.prepareRootElementProps(props), {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
fetchPolicy } = _a, other = __rest(_a, ["fetchPolicy"]);
return other;
}
prepareDragItemProps() {
return Object.assign(Object.assign({}, super.prepareDragItemProps()), { filtersname: 'filters', where: {} });
}
prepareDragItemComponents() {
return super.prepareDragItemComponents().concat([
{
name: 'Filters',
component: 'Filters',
props: {},
components: [],
},
{
name: 'ObjectView',
component: 'ObjectView',
props: {},
components: [],
},
]);
}
getEditorField(props) {
let { type } = props;
const { key, name, value } = props;
const { query } = this.context;
const activeItem = this.getActiveItem();
const queryNames = Object.keys(query);
let field;
if (!field) {
switch (name) {
case 'query':
field = (react_1.default.createElement(FormControl_1.default, { key: key, fullWidth: true },
react_1.default.createElement(InputLabel_1.default, null, "Query name"),
react_1.default.createElement(Select_1.default, { value: value, onChange: this.onChangeProps, inputProps: {
name,
} }, queryNames
.filter((n) => n.endsWith && !n.endsWith('Connection'))
.map((queryName) => {
return (react_1.default.createElement(MenuItem_1.default, { key: queryName, value: queryName }, queryName));
}))));
break;
default:
}
}
if (!field) {
if (activeItem) {
const { props: { query: fieldName }, } = activeItem.getObjectWithMutations();
if (fieldName) {
const Field = this.getSchemaField(fieldName);
if (Field) {
const { args } = Field;
const arg = args ? args.find((n) => n.name === name) : null;
if (arg) {
const { type: { kind: typeKind, name: typeName }, } = arg;
switch (typeKind) {
case 'ENUM':
{
const Type = this.getSchemaType((n) => n.name === typeName && n.kind === typeKind);
if (Type) {
const { enumValues } = Type;
field = (react_1.default.createElement(FormControl_1.default, { key: key, fullWidth: true },
react_1.default.createElement(InputLabel_1.default, null, name),
react_1.default.createElement(Select_1.default, { value: value || '', onChange: this.onChangeProps, inputProps: {
name,
} }, enumValues.map((n) => {
const { name: fieldName } = n;
return (react_1.default.createElement(MenuItem_1.default, { key: fieldName, value: fieldName }, fieldName));
}))));
}
}
break;
case 'SCALAR':
switch (typeName) {
case 'Int':
case 'Float':
type = 'number';
break;
default:
}
break;
default:
}
}
}
}
}
}
Object.assign(props, {
type,
name,
value,
});
return field !== undefined ? field : super.getEditorField(props);
}
updateComponentProperty(name, value) {
const newProps = {};
const { props } = this.getObjectWithMutations();
switch (name) {
case 'query':
{
const Field = this.getSchemaField(value);
if (Field) {
const { args } = Field;
args.map((n) => {
const { name: argName, defaultValue, type: { kind: typeKind, name: typeName,
// ofType,
}, } = n;
let propName;
let propValue;
switch (typeKind) {
case 'SCALAR':
switch (typeName) {
case 'Int':
case 'Float':
propName = argName;
propValue =
props[argName] !== undefined
? props[argName]
: defaultValue
? parseFloat(defaultValue)
: defaultValue;
break;
case 'String':
break;
default:
}
break;
case 'ENUM':
propName = argName;
propValue = defaultValue;
break;
default:
}
if (propName) {
Object.assign(newProps, {
[propName]: propValue,
});
}
return null;
});
}
else {
return false;
}
}
return this.updateComponentProps(Object.assign(Object.assign({}, newProps), { [name]: value }));
default:
}
return super.updateComponentProperty(name, value);
}
getSchemaField(fieldName) {
const { schema } = this.context;
const { queryType: { name: queryTypeName },
// types,
} = schema;
const query = schema.types.find((n) => n.kind === 'OBJECT' && n.name === queryTypeName);
const Field = query.fields.find((n) => n.name === fieldName);
return Field;
}
getSchemaType(filter) {
const { schema } = this.context;
const { types } = schema;
const Field = types.find(filter);
return Field;
}
getFilters() {
const { where: filters } = this.getComponentProps(this);
return filters;
}
setFilters(filters) {
return this.updateComponentProps({
where: filters,
});
}
canBeChild(child) {
let can = false;
if (super.canBeChild(child)) {
const { props: componentProps } = this.getComponentProps(this);
const { query } = componentProps || {};
let parentQuery;
const { parent } = this.props;
if (parent) {
const { props: { query }, } = parent.getObjectWithMutations();
if (query) {
parentQuery = query;
}
}
if (query || parentQuery) {
can = true;
}
}
return can;
}
/**
* Заменяем плейсхолдеры в условиях запроса
*/
injectWhereFromObject(where, object) {
for (const i in where) {
const value = where[i];
if (value) {
if (Array.isArray(value)) {
where[i] = value.map((n) => this.injectWhereFromObject(Object.assign({}, n), object));
}
else if (typeof value === 'object') {
where[i] = this.injectWhereFromObject(Object.assign({}, value), object);
}
else if (typeof value === 'string' && value.startsWith(':')) {
const toPath = path_to_regexp_1.default.compile(value);
try {
const newValue = toPath(object, { noValidate: true });
if (newValue) {
where[i] = newValue;
}
}
catch (error) {
console.error(error);
}
}
}
}
return where;
}
renderChildren() {
const { schema } = this.context;
/**
* schema required for viewer
*/
if (!schema) {
return null;
}
return (react_1.default.createElement(ListView_1.ObjectContext.Consumer, { key: "object_context" }, (objectContext) => {
const { object } = objectContext;
const { inEditMode } = this.getEditorContext();
const { parent: offsetParent } = this.props;
const _a = this.getRenderProps(), _b = _a.props, {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
orderBy, query } = _b, otherProps = __rest(_b, ["orderBy", "query"]), { parent } = _a;
/**
* Если есть родитель и у родителя имеется свойство query, то используем его
*/
let parentQuery;
if (offsetParent) {
// const {
// query,
// } = offsetParent.props.data.object.props;
const { props: { query }, } = offsetParent.getObjectWithMutations();
if (query) {
parentQuery = query;
}
}
if (!query && !parentQuery) {
return inEditMode ? (react_1.default.createElement(Typography_1.default, { color: "error" }, "Query props required")) : null;
}
// const {
// } = this.getComponentProps(this);
const filters = this.getFilters();
let where = filters ? Object.assign({}, filters) : null;
if (!where || !Object.keys(where).length) {
/**
* Если элемент находится в роутере, пытаемся получить параметры из УРЛ.
* Так как у нас добавился еще объект Query, который может возникнуть между
* коннектором и роутером. то роутинг смотрим и в прародителе
*/
// let matchParams;
if (parent) {
const { match, parent: grandParent } = parent.props;
const { params } = match || {};
if (params) {
where = Object.assign({}, params);
}
else if (grandParent) {
const { match } = grandParent.props;
const { params } = match || {};
if (params) {
where = {};
/**
* Получаем только те значения, у которых ключ - строка.
*/
Object.keys(params).map((key) => {
if (key &&
typeof key === 'string' &&
isNaN(parseInt(key))) {
where[key] = params[key];
}
return null;
});
}
}
}
}
return (react_1.default.createElement(Viewer_1.ObjectView, Object.assign({}, otherProps, this.getComponentProps(this), { key: query, query: query, parentQuery: parentQuery, setFilters: this.setFilters, getFilters: this.getFilters, filters: filters || [],
/**
Если есть объект where, пытаемся найти в нем условия для выборки
от родительского объекта
*/
where: where && object
? this.injectWhereFromObject(Object.assign({}, where), object)
: where, ConnectorContext: Connector_1.ConnectorContext }), super.renderChildren()));
}));
}
}
ObjectConnector.Name = 'ObjectConnector';
ObjectConnector.help_url = 'https://front-editor.prisma-cms.com/topics/query.html';
ObjectConnector.defaultProps = Object.assign(Object.assign({}, EditorComponent_1.default.defaultProps), { query: '',
// pagevariable: "page",
filtersname: 'filters',
// first: 10,
hide_wrapper_in_default_mode: true,
// https://www.apollographql.com/docs/react/api/react-apollo/#optionsfetchpolicy
fetchPolicy: undefined });
exports.default = ObjectConnector;
//# sourceMappingURL=index.js.map