@prisma-cms/front-editor
Version:
504 lines • 21.1 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 });
exports.ConnectorContext = void 0;
const react_1 = __importDefault(require("react"));
// import PropTypes from 'prop-types';
const react_2 = 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 Viewer_1 = require("../Viewer");
const ListView_1 = require("./ListView");
const path_to_regexp_1 = __importDefault(require("path-to-regexp"));
exports.ConnectorContext = react_2.createContext({});
class Connector extends EditorComponent_1.default {
constructor(props) {
super(props);
this.setFilters = this.setFilters.bind(this);
this.getFilters = this.getFilters.bind(this);
this.onChangeProps = this.onChangeProps.bind(this);
}
// canBeDropped(dragItem) {
// return dragItem && dragItem instanceof ConnectorView ? true : false;
// }
prepareRootElementProps(props) {
const _a = super.prepareRootElementProps(props), {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
fetchPolicy } = _a, other = __rest(_a, ["fetchPolicy"]);
return other;
}
renderPanelView(content) {
return super.renderPanelView(content || (react_1.default.createElement("div", { className: "editor-component--panel-icon" },
react_1.default.createElement(SwapHoriz_1.default, null),
" Connector")));
}
prepareDragItemProps() {
return Object.assign(Object.assign({}, super.prepareDragItemProps()), { first: 12, filtersname: 'filters' });
}
prepareDragItemComponents() {
return super.prepareDragItemComponents().concat([
{
name: 'Grid',
component: 'Grid',
props: {
container: true,
spacing: 8,
},
components: [
{
name: 'Grid',
component: 'Grid',
props: {
item: true,
xs: 12,
},
components: [
{
name: 'Filters',
component: 'Filters',
props: {},
components: [],
},
],
},
{
name: 'Grid',
component: 'Grid',
props: {
item: true,
xs: 12,
},
components: [
{
name: 'Grid',
component: 'Grid',
props: {
container: true,
spacing: 8,
},
components: [
{
name: 'ListView',
component: 'ListView',
props: {
style: {
display: 'flex',
width: '100%',
flexWrap: 'wrap',
},
},
components: [
{
name: 'Grid',
component: 'Grid',
props: {
item: true,
xs: 12,
md: 6,
xl: 3,
},
components: [],
},
],
},
],
},
],
},
{
name: 'Grid',
component: 'Grid',
props: {
item: true,
xs: 12,
},
components: [
{
name: 'Pagination',
component: 'Pagination',
props: {},
components: [],
},
],
},
],
},
]);
}
getEditorField(props) {
const { key, name, value,
// ...other
} = props;
let { type } = 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,
// id: 'age-simple',
} }, queryNames
.filter((n) => n.endsWith && n.endsWith('Connection'))
.map((queryName) => {
return (react_1.default.createElement(MenuItem_1.default, { key: queryName, value: queryName }, queryName));
}))));
break;
// case "skip":
// case "last":
// type = "number";
// break;
default:
}
}
if (!field) {
// if (name === "skip") {
// }
if (activeItem) {
const {
// props: {
// query: fieldName,
// },
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,
// id: 'age-simple',
} }, 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,
});
// if (name === "skip") {
// }
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 }));
// break;
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;
}
getUrlFilters() {
const { filtersname,
// pagevariable,
} = this.getComponentProps(this);
const { uri } = this.context;
let {
// [pagevariable]: page,
[filtersname]: filters, } = uri.query(true);
try {
filters = (filters && JSON.parse(filters)) || null;
if (filters === '{}') {
filters = undefined;
}
}
catch (error) {
console.error(console.error(error));
}
return filters;
}
getFilters() {
const { inEditMode } = this.getEditorContext();
if (inEditMode) {
const { where: filters,
// } = this.props;
} = this.getComponentProps(this);
return filters;
}
else {
return this.getUrlFilters();
}
}
setUrlFilters(filters) {
const { uri, router: { history }, } = this.context;
const { filtersname } = this.getComponentProps(this);
let newUri = uri.clone();
try {
filters = filters ? JSON.stringify(filters) : undefined;
}
catch (error) {
console.error(error);
}
if (filters === '{}') {
filters = null;
}
if (filters) {
if (newUri.hasQuery) {
newUri = newUri.setQuery({
[filtersname]: filters,
});
}
else {
newUri = newUri.addQuery({
[filtersname]: filters,
});
}
}
else {
newUri.removeQuery(filtersname);
}
newUri.removeQuery('page');
const url = newUri.resource();
history.push(url);
}
setFilters(filters) {
const { inEditMode } = this.getEditorContext();
if (!inEditMode) {
return this.setUrlFilters(filters);
}
else {
return this.updateComponentProps({
where: filters,
});
}
}
canBeChild(child) {
let can = false;
if (super.canBeChild(child)) {
const { props: { query }, } = this.getObjectWithMutations();
let parentQuery;
const { parent } = this.props;
if (parent) {
// const {
// query,
// } = parent.props.data.object.props;
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({ ...n }, object));
where[i] = value.map((n) => this.injectWhereFromObject(n, object));
}
else if (typeof value === 'object') {
// where[i] = this.injectWhereFromObject({ ...value }, object)
where[i] = this.injectWhereFromObject(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 && this.inEditorMode()) {
return null;
}
return (react_1.default.createElement(ListView_1.ObjectContext.Consumer, { key: "object_context" }, (objectContext) => {
const { object } = objectContext;
const { inEditMode } = this.getEditorContext();
const { parent } = this.props;
const { props: componentProps, where: propsWhere,
// ...other
} = this.getComponentProps(this);
const _a = componentProps || {}, {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
orderBy, query } = _a, otherProps = __rest(_a, ["orderBy", "query"]);
/**
* Если есть родитель и у родителя имеется свойство query, то используем его
*/
let parentQuery;
if (parent) {
// const {
// query,
// } = parent.props.data.object.props;
const { props: { query }, } = parent.getObjectWithMutations();
if (query) {
parentQuery = query;
}
}
if (!query && !parentQuery) {
return inEditMode ? (react_1.default.createElement(Typography_1.default, { color: "error" }, "Query props required")) : null;
}
let filters = this.getFilters();
if (filters) {
filters = Object.assign({}, filters);
}
let where;
const AND = [];
if (propsWhere) {
AND.push(Object.assign({}, propsWhere));
}
if (filters) {
AND.push(Object.assign({}, filters));
}
if (AND.length === 1) {
where = AND[0];
}
else if (AND.length) {
where = {
AND,
};
}
return (react_1.default.createElement(Viewer_1.ObjectsView, Object.assign({ key: query, query: query, parentQuery: parentQuery, setFilters: this.setFilters, getFilters: this.getFilters, filters: filters || [] }, otherProps, this.getComponentProps(this), {
/**
Если есть объект where, пытаемся найти в нем условия для выборки
от родительского объекта
*/
where: where && object
? this.injectWhereFromObject(Object.assign({}, where), object)
: where, ConnectorContext: exports.ConnectorContext }), super.renderChildren()));
}));
}
}
Connector.Name = 'Connector';
Connector.help_url = 'https://front-editor.prisma-cms.com/topics/query.html';
Connector.defaultProps = Object.assign(Object.assign({}, EditorComponent_1.default.defaultProps), { query: '', pagevariable: 'page', filtersname: 'filters', first: 10, orderBy: undefined, hide_wrapper_in_default_mode: true,
// https://www.apollographql.com/docs/react/api/react-apollo/#optionsfetchpolicy
fetchPolicy: undefined });
exports.default = Connector;
//# sourceMappingURL=index.js.map