hrw-certificate-editor
Version:
Design Editor Tools with React.js + ant.design + fabric.js
194 lines • 9.68 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const antd_1 = require("antd");
const classnames_1 = __importDefault(require("classnames"));
const i18next_1 = __importDefault(require("i18next"));
const PropTypes = __importStar(require("prop-types"));
const React = __importStar(require("react"));
const uuidv4_1 = require("uuidv4");
const common_1 = require("../../components/common");
const flex_1 = require("../../components/flex");
const Icon_1 = __importDefault(require("../../components/icon/Icon"));
const NodeConfiguration_1 = require("./configuration/NodeConfiguration");
const constants_1 = require("./constant/constants");
class WorkflowItems extends React.Component {
constructor() {
super(...arguments);
this.state = {
activeKey: [],
collapse: false,
textSearch: '',
descriptors: [],
filteredDescriptors: [],
};
this.handlers = {
onAddItem: (item, centered) => {
const { canvasRef } = this.props;
const id = uuidv4_1.uuid();
const option = Object.assign({}, item, {
id,
subType: item.type,
type: NodeConfiguration_1.getNode(item.nodeClazz),
configuration: item.defaultConfiguration,
description: '',
});
canvasRef.handler.add(option, centered);
},
onChangeActiveKey: activeKey => {
this.setState({
activeKey,
});
},
onCollapse: () => {
this.setState({
collapse: !this.state.collapse,
});
},
};
this.events = {
onDragStart: (e, item) => {
this.item = item;
const { target } = e;
target.classList.add('dragging');
},
onDragOver: e => {
if (e.preventDefault) {
e.preventDefault();
}
e.dataTransfer.dropEffect = 'copy';
return false;
},
onDragEnter: e => {
const { target } = e;
target.classList.add('over');
},
onDragLeave: e => {
const { target } = e;
target.classList.remove('over');
},
onDrop: e => {
e = e || window.event;
if (e.preventDefault) {
e.preventDefault();
}
if (e.stopPropagation) {
e.stopPropagation();
}
const { layerX, layerY } = e;
const option = Object.assign({}, this.item, { left: layerX, top: layerY });
this.handlers.onAddItem(option, false);
return false;
},
onDragEnd: (e, item) => {
this.item = null;
e.target.classList.remove('dragging');
},
};
this.waitForCanvasRender = canvas => {
setTimeout(() => {
if (canvas) {
this.attachEventListener(canvas);
return;
}
const { canvasRef } = this.props;
this.waitForCanvasRender(canvasRef);
}, 5);
};
this.attachEventListener = canvasRef => {
canvasRef.canvas.wrapperEl.addEventListener('dragenter', this.events.onDragEnter, false);
canvasRef.canvas.wrapperEl.addEventListener('dragover', this.events.onDragOver, false);
canvasRef.canvas.wrapperEl.addEventListener('dragleave', this.events.onDragLeave, false);
canvasRef.canvas.wrapperEl.addEventListener('drop', this.events.onDrop, false);
};
this.detachEventListener = canvasRef => {
canvasRef.canvas.wrapperEl.removeEventListener('dragenter', this.events.onDragEnter);
canvasRef.canvas.wrapperEl.removeEventListener('dragover', this.events.onDragOver);
canvasRef.canvas.wrapperEl.removeEventListener('dragleave', this.events.onDragLeave);
canvasRef.canvas.wrapperEl.removeEventListener('drop', this.events.onDrop);
};
this.renderItems = items => (React.createElement(flex_1.Flex, { flexWrap: "wrap", flexDirection: "column", style: { width: '100%' } }, items.map(item => (React.createElement("div", { key: item.name, draggable: true, onClick: e => this.handlers.onAddItem(item), onDragStart: e => this.events.onDragStart(e, item), onDragEnd: e => this.events.onDragEnd(e, item), className: "rde-editor-items-item", style: { justifyContent: this.state.collapse ? 'center' : '' } },
React.createElement("span", { className: "rde-editor-items-item-icon" },
React.createElement(Icon_1.default, { name: item.icon && item.icon.length ? item.icon : 'image', color: constants_1.NODE_COLORS[item.type].fill })),
this.state.collapse ? null : React.createElement("span", { className: "rde-editor-items-item-text" }, item.name))))));
}
componentDidMount() {
const { canvasRef } = this.props;
this.waitForCanvasRender(canvasRef);
}
UNSAFE_componentWillReceiveProps(nextProps) {
if (JSON.stringify(this.props.descriptors) !== JSON.stringify(nextProps.descriptors)) {
const descriptors = Object.keys(nextProps.descriptors).reduce((prev, key) => {
return prev.concat(nextProps.descriptors[key]);
}, []);
this.setState({
descriptors,
});
}
}
shouldComponentUpdate(nextProps, nextState) {
if (JSON.stringify(this.props.descriptors) !== JSON.stringify(nextProps.descriptors)) {
return true;
}
else if (JSON.stringify(this.state.filteredDescriptors) !== JSON.stringify(nextState.filteredDescriptors)) {
return true;
}
else if (this.state.textSearch !== nextState.textSearch) {
return true;
}
else if (JSON.stringify(this.state.activeKey) !== JSON.stringify(nextState.activeKey)) {
return true;
}
else if (this.state.collapse !== nextState.collapse) {
return true;
}
return false;
}
componentWillUnmount() {
const { canvasRef } = this.props;
this.detachEventListener(canvasRef);
}
render() {
const { descriptors } = this.props;
const { activeKey, filteredDescriptors, collapse, textSearch } = this.state;
const className = classnames_1.default('rde-editor-items', {
minimize: collapse,
});
return (React.createElement("div", { className: className },
React.createElement(flex_1.Flex, { flex: "1", flexDirection: "column", style: { height: '100%' } },
React.createElement(flex_1.Flex, { justifyContent: "center", alignItems: "center", style: { height: 40 } },
React.createElement(common_1.CommonButton, { icon: collapse ? 'angle-double-right' : 'angle-double-left', shape: "circle", className: "rde-action-btn", style: { margin: '0 4px' }, onClick: this.handlers.onCollapse }),
collapse ? null : (React.createElement(antd_1.Input, { style: { margin: '8px' }, placeholder: i18next_1.default.t('action.search-list'),
// onChange={this.handlers.onSearchNode}
value: textSearch, allowClear: true }))),
React.createElement(common_1.Scrollbar, null,
React.createElement(flex_1.Flex, { flex: "1", style: { overflowY: 'hidden' } }, textSearch.length ? (this.renderItems(filteredDescriptors)) : (React.createElement(antd_1.Collapse, { style: { width: '100%' }, activeKey: activeKey.length ? activeKey : Object.keys(descriptors), onChange: this.handlers.onChangeActiveKey }, Object.keys(descriptors).map(key => (React.createElement(antd_1.Collapse.Panel, { style: { background: constants_1.NODE_COLORS[key].fill }, key: key, header: collapse ? '' : key, showArrow: !collapse }, this.renderItems(descriptors[key])))))))))));
}
}
WorkflowItems.propTypes = {
canvasRef: PropTypes.any,
descriptors: PropTypes.object,
};
exports.default = WorkflowItems;
//# sourceMappingURL=WorkflowItems.js.map