plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
24 lines (23 loc) • 1.51 kB
JavaScript
import React, { Component } from 'react';
import { Flex } from '../flex';
import PropTypes from 'prop-types'; // Import PropTypes
class WorkflowTitle extends Component {
render() {
const { title, content, action, children } = this.props;
return (children || (React.createElement(Flex, { className: "rde-content-layout-title", alignItems: "center", flexWrap: "wrap" },
React.createElement(Flex.Item, { flex: "0 1 auto" },
React.createElement(Flex, { className: "rde-content-layout-title-title", justifyContent: "flex-start", alignItems: "center" }, title instanceof String ? React.createElement("h3", null, title) : title)),
React.createElement(Flex.Item, { flex: "auto" },
React.createElement(Flex, { className: "rde-content-layout-title-content", alignItems: "center" }, content)),
React.createElement(Flex.Item, { flex: "auto" },
React.createElement(Flex, { className: "rde-content-layout-title-action", justifyContent: "flex-end", alignItems: "center" }, action)))));
}
}
// Add prop types validation
WorkflowTitle.propTypes = {
title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), // Allow string or React Node
content: PropTypes.node, // content could be a React node (element, string, etc.)
action: PropTypes.node, // action could be a React node (element, string, etc.)
children: PropTypes.node, // children can be any React nodes
};
export default WorkflowTitle;