plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
27 lines (26 loc) • 1.45 kB
JavaScript
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Icon from '../icon/Icon';
import { Flex } from '../flex';
class RuleChainSiderContainer extends Component {
render() {
const { children, title, content, icon, extra, titleStyle, contentStyle } = this.props;
return (React.createElement(Flex, { flexDirection: "column", style: { height: '100%' } },
React.createElement(Flex, { style: Object.assign({}, { background: '#f5f4f3', height: '40px' }, titleStyle) },
React.createElement(Flex, { flex: "1", justifyContent: "flex-start", alignItems: "center", style: { marginLeft: '8px', color: '#4d5360' } },
React.createElement(Icon, { name: icon, style: { marginRight: 8 } }),
React.createElement("h4", { style: { marginBottom: 0 } }, title)),
extra ? (React.createElement(Flex, { justifyContent: "flex-end", alignItems: "center" }, extra)) : null),
React.createElement(Flex, { flexDirection: "column", style: Object.assign({}, { height: '100%', margin: '8px 16px' }, contentStyle) }, children || content)));
}
}
RuleChainSiderContainer.propTypes = {
children: PropTypes.any,
title: PropTypes.string,
icon: PropTypes.string,
content: PropTypes.any,
extra: PropTypes.any,
titleStyle: PropTypes.object,
contentStyle: PropTypes.object,
};
export default RuleChainSiderContainer;