diff --git a/README.md b/README.md index 2085681d..1d45d0ec 100755 --- a/README.md +++ b/README.md @@ -71,7 +71,9 @@ The `` component renders the tabsets and splitters, it takes the followi | factory | required | a factory function for creating React components | | iconFactory | optional | a factory function for creating icon components for tab bar buttons | | titleFactory | optional | a factory function for creating title components for tab bar buttons | -| closeIcon | optional | a icon to use in place of the default close icon | +| closeIcon | optional | a component to use in place of the default close icon | +| minimizeIcon | optional | a component to use in place of the default tabset minimize button | +| maximizeIcon | optional | a component to use in place of the default tabset maximize button | | onAction | optional | function called whenever the layout generates an action to update the model (allows for intercepting actions before they are dispatched to the model, for example, asking the user to confirm a tab close.) Returning `undefined` from the function will halt the action, otherwise return the action to continue | | onRenderTab | optional | function called when rendering a tab, allows leading (icon) and content sections to be customized | | onRenderTabSet | optional | function called when rendering a tabset, allows header and buttons to be customized | diff --git a/src/view/Layout.tsx b/src/view/Layout.tsx index 98c39080..e050fc43 100755 --- a/src/view/Layout.tsx +++ b/src/view/Layout.tsx @@ -27,6 +27,8 @@ export interface ILayoutProps { iconFactory?: (node: TabNode) => React.ReactNode | undefined; titleFactory?: (node: TabNode) => React.ReactNode | undefined; closeIcon?: React.ReactNode; + minimizeIcon?: React.ReactNode; + maximizeIcon?: React.ReactNode; onAction?: (action: Action) => Action | undefined; onRenderTab?: ( node: TabNode, @@ -297,6 +299,8 @@ export class Layout extends React.Component { iconFactory={this.props.iconFactory} titleFactory={this.props.titleFactory} closeIcon={this.props.closeIcon} + minimizeIcon={this.props.minimizeIcon} + maximizeIcon={this.props.maximizeIcon} /> ); this.renderChildren( diff --git a/src/view/TabSet.tsx b/src/view/TabSet.tsx index 50cc9f7b..bf439c56 100755 --- a/src/view/TabSet.tsx +++ b/src/view/TabSet.tsx @@ -14,6 +14,8 @@ export interface ITabSetProps { iconFactory?: (node: TabNode) => React.ReactNode | undefined; titleFactory?: (node: TabNode) => React.ReactNode | undefined; closeIcon?: React.ReactNode; + minimizeIcon?: React.ReactNode; + maximizeIcon?: React.ReactNode; } /** @hidden @internal */ @@ -132,10 +134,25 @@ export class TabSet extends React.Component { let toolbar; if (this.showToolbar === true) { if (this.props.node.isEnableMaximize()) { - buttons.push() + } else { + buttons.push(this.props.maximizeIcon ? +
+ {this.props.maximizeIcon} +
+ : ) + } } toolbar =
this.toolbarRef = (ref === null) ? undefined : ref} className={cm("flexlayout__tab_toolbar")} onMouseDown={this.onInterceptMouseDown}> @@ -232,7 +249,7 @@ export class TabSet extends React.Component { const message = this.props.layout.i18nName(I18nLabel.Move_Tabset, name); this.props.layout.dragStart(event, message, this.props.node, this.props.node.isEnableDrag(), (event2: Event) => undefined, this.onDoubleClick); } - + onInterceptMouseDown = (event: React.MouseEvent | React.MouseEvent | React.TouchEvent) => { event.stopPropagation(); }