plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
51 lines (50 loc) • 2.27 kB
JavaScript
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Tabs } from 'antd';
import classnames from 'classnames';
import Icon from '../icon/Icon';
import WorkflowInfo from './WorkflowInfo';
import WorkflowGlobalParameters from './WorkflowGlobalParameters';
import CommonButton from '../common/CommonButton';
class WorkflowConfigurations extends Component {
constructor() {
super(...arguments);
this.state = {
collapse: false,
activeKey: 'info',
};
this.handlers = {
onCollapse: () => {
this.setState({
collapse: !this.state.collapse,
});
},
onChange: (activeKey) => {
this.setState({
activeKey,
});
},
};
}
render() {
const { workflow, onChange } = this.props;
const { collapse, activeKey } = this.state;
const className = classnames('rde-editor-configurations', {
minimize: collapse,
});
return (React.createElement("div", { className: className },
React.createElement(CommonButton, { className: "rde-action-btn", shape: "circle", icon: collapse ? 'angle-double-left' : 'angle-double-right', onClick: this.handlers.onCollapse, style: { position: 'absolute', top: 16, right: 16, zIndex: 1000 } }),
React.createElement(Tabs, { tabPosition: "right", activeKey: activeKey, onChange: this.handlers.onChange, style: { height: '100%' }, tabBarStyle: { marginTop: 60 } },
React.createElement(Tabs.TabPane, { tab: React.createElement(Icon, { name: "cog" }), key: "info" },
React.createElement(WorkflowInfo, { workflow: workflow, onChange: onChange })),
React.createElement(Tabs.TabPane, { tab: React.createElement(Icon, { name: "globe" }), key: "variables" },
React.createElement(WorkflowGlobalParameters, { workflow: workflow, onChange: onChange })))));
}
}
WorkflowConfigurations.propTypes = {
canvasRef: PropTypes.any,
selectedItem: PropTypes.object,
workflow: PropTypes.object,
onChange: PropTypes.func,
};
export default WorkflowConfigurations;