@prisma-cms/front-editor
Version:
78 lines • 3.34 kB
JavaScript
;
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 EditorComponent_1 = __importDefault(require("../../../EditorComponent"));
const SwapHoriz_1 = __importDefault(require("material-ui-icons/SwapHoriz"));
const Close_1 = __importDefault(require("material-ui-icons/Close"));
const query_builder_1 = __importDefault(require("@prisma-cms/query-builder"));
const Drawer_1 = __importDefault(require("material-ui/Drawer"));
const Button_1 = __importDefault(require("material-ui/Button"));
class Query extends EditorComponent_1.default {
constructor(props) {
super(props);
this.onEditQuery = (query) => {
this.updateComponentProperty('query', query);
};
this.close = (event) => {
event.preventDefault();
event.stopPropagation();
// const {
// setActiveItem,
// } = this.getEditorContext();
// setActiveItem(null);
this.setState({
expanded: false,
});
};
this.state = Object.assign(Object.assign({}, this.state), { expanded: false });
}
renderPanelView(content) {
return super.renderPanelView(content || (react_1.default.createElement("div", { className: "editor-component--panel-icon" },
react_1.default.createElement(SwapHoriz_1.default, null),
" Query")));
}
onClick(event) {
if (event.target === event.currentTarget) {
const { active, expanded } = this.state;
if (active && !expanded) {
this.setState({
expanded: true,
});
}
}
return super.onClick(event);
}
renderChildren() {
const { activeItem } = this.getEditorContext();
let output = null;
const { query } = this.getComponentProps(this);
const { expanded } = this.state;
if (activeItem && activeItem === this && expanded) {
output = (react_1.default.createElement(Drawer_1.default, { key: "drawer", anchor: "top", open: true, onClose: this.close, style: {
zIndex: 3000,
}, PaperProps: {
style: {
height: '100%',
},
} },
react_1.default.createElement("div", { style: {
textAlign: 'right',
} },
react_1.default.createElement(Button_1.default, { onClick: this.close },
react_1.default.createElement(Close_1.default, null))),
react_1.default.createElement(query_builder_1.default, { query: query || '', onEditQuery: this.onEditQuery })));
}
else {
output = super.renderChildren();
}
return output;
}
}
Query.defaultProps = Object.assign(Object.assign({}, EditorComponent_1.default.defaultProps), { hide_wrapper_in_default_mode: true });
Query.Name = 'Query';
Query.help_url = 'https://front-editor.prisma-cms.com/topics/query.html';
exports.default = Query;
//# sourceMappingURL=index.js.map