From d73193730f61d24b7013ec0ce26760f20bead1ea Mon Sep 17 00:00:00 2001 From: Nathanael Ruf Date: Thu, 14 May 2020 11:36:14 +0200 Subject: [PATCH 1/3] Add option to set custom component for tabset min/max buttons --- src/view/Layout.tsx | 4 ++++ src/view/TabSet.tsx | 31 +++++++++++++++++++++++++++---- 2 files changed, 31 insertions(+), 4 deletions(-) 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..8b5eab65 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,31 @@ 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}> From 18e21a8c0e0e15b8f57e97798855731432558111 Mon Sep 17 00:00:00 2001 From: Nathanael Ruf Date: Thu, 14 May 2020 15:25:58 +0200 Subject: [PATCH 2/3] Fix unique key error. Code alignment. --- src/view/TabSet.tsx | 28 +++++++++++----------------- 1 file changed, 11 insertions(+), 17 deletions(-) diff --git a/src/view/TabSet.tsx b/src/view/TabSet.tsx index 8b5eab65..bf439c56 100755 --- a/src/view/TabSet.tsx +++ b/src/view/TabSet.tsx @@ -136,28 +136,22 @@ export class TabSet extends React.Component { if (this.props.node.isEnableMaximize()) { if (node.isMaximized()) { buttons.push(this.props.minimizeIcon ? -
+
{this.props.minimizeIcon}
- : ) + : ) } else { buttons.push(this.props.maximizeIcon ? -
+
{this.props.maximizeIcon}
- : ) + : ) } } toolbar =
this.toolbarRef = (ref === null) ? undefined : ref} className={cm("flexlayout__tab_toolbar")} @@ -255,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(); } From e201151f62938c05f24b05e804c69731003b8fc4 Mon Sep 17 00:00:00 2001 From: Nathanael Ruf Date: Thu, 14 May 2020 13:43:36 +0200 Subject: [PATCH 3/3] Update README --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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 |