Create an advanced masthead

This guide will provide in depth information about possible options to expand the masthead from the Basic guides or the masthead included by following the Getting started guide using version 3.0.0 or higher of the Fonto Development Tools.

The masthead component

The masthead component defined in RecipeMasthead.jsx.js file should use React's top-level memo helper.
In this example, a <FXEditorMasthead @ fontoxml-fx/src/FXEditorMasthead.jsx /> component will be returned by the masthead's render function.
The FXEditorMasthead component is just a convenient wrapper around a number of FDS masthead components. This means that you can alternatively create your own masthead component when needed.

Configure different props

Prop: tabs

The tabs prop defines which tabs should be shown in the masthead and the tabs prop is the only required prop of this component. The tabs prop expects an array of objects describing the tabs to be shown. Refer to the Toolbar component section in this guide for more information on creating a toolbar component like the <StartToolbar /> and the <StructureToolbar /> shown below.

import React, { memo } from 'react';

import StartToolbar from './StartToolbar.jsx';
import StructureToolbar from './StructureToolbar.jsx';

const tabs = [
	{
		id: 'start',
		label: 'Start',
		content: <StartToolbar />
	},
	{
		id: 'structure',
		label: 'Structure',
		content: <StructureToolbar />
	}
];

let YourAppMasthead = () => (
	<FxEditorMasthead tabs={tabs} />;
);

YourAppMasthead = memo(YourAppMasthead);

export default YourAppMasthead;
In the examples below, the tabs prop is always using an empty array to keep the examples as short as possible. You should use the tabs prop as explained above.

The clientLogo prop can be used to show a client logo in the upper right corner of the masthead. This prop expects an element to be used as the logo.

Prop: mastheadAlignRightContent

The mastheadAlignRightContent prop can be used to align a component on the right in every toolbar. This area is typically used for the <FindAndReplaceDropButton @ fontoxml-find-and-replace/src/FindAndReplaceDropButton.jsx /> component.

import React, { memo } from 'react';

import FindAndReplaceDropButton from 'fontoxml-find-and-replace/src/FindAndReplaceDropButton.jsx';
import FxEditorMasthead from 'fontoxml-fx/src/FxEditorMasthead.jsx';

let YourAppMasthead = () => (
	<FxEditorMasthead mastheadAlignRightContent={<FindAndReplaceDropButton />} tabs={[]} />
);

YourAppMasthead = memo(YourAppMasthead);

export default YourAppMasthead;

The showFontoLogo prop can be used to disable the FontoXML logo in the masthead. Set this prop to either true or false.

import React, { memo } from 'react';

import FxEditorMasthead from 'fontoxml-fx/src/FxEditorMasthead.jsx';

let YourAppMasthead = () => (
	<FxEditorMasthead showFontoLogo={true} tabs={[]} />
);

YourAppMasthead = memo(YourAppMasthead);

export default YourAppMasthead;

We recommend setting showFontoLogo to false when using the "neutral" as the value for the theme-name configuration option.


For a full list of options to customize the masthead we recommend to go to the Masthead API page.

Masthead toolbar button options

Multi-operation button

The FxMultiOperationButton component allows to switch between operations, based on their state. This button accepts a list of operations which may be executed. The operation to be executed is determined by the first operation to be enabled in the given operations list.

<MastheadToolbar>
	<MastheadToolbarButtons>
		<FxMultiOperationButton operations={[{ operationName: "first-operation" }, { operationName: "second-operation" }]} />
	</MastheadToolbarButtons>
</MastheadToolbar>

Button with drop

The <ButtonWithDrop /> component renders a button with a drop menu. This button does not execute an operation when it is clicked, it only shows the drop menu.

<MastheadToolbar>
	<MastheadToolbarButtons>
		<ButtonWithDrop renderDrop={() => (
			<Drop>
				<Menu>
					<MenuGroup>
						<FxOperationMenuItem operationName="some-operation" />
					</MenuGroup>
					<MenuGroup>
						<FxOperationMenuItem operationName="some-other-operation" />
						<FxOperationMenuItem operationName="some-completely-different-operation" />
						<MenuItemWithDrop label="Simple table" renderDrop={() => (
							<Drop>
								<Menu>
									<MenuGroup>
										<FxOperationMenuItem operationName="some-operation" />
									</MenuGroup>
								</Menu>
							</Drop>
						)} />
					</MenuGroup>
				</Menu>
			</Drop>
		)} />
	</MastheadToolbarButtons>
</MastheadToolbar>

The components used to create a drop menu:

Split button with drop

The <FxOperationsSplitButtonWithDropMenu /> component renders a split drop button. This button consists of an area that acts as a normal button and an arrow which opens a drop when clicked. The operation for the normal button part is always the first operation given

<MastheadToolbar>
	<MastheadToolbarButtons>
		<FxOperationsSplitButtonWithDropMenu
			operations={[
				{ operationName: 'some-operation' },
				{ operationName: 'some-other-operation' }
			]}
		/>
	</MastheadToolbarButtons>
</MastheadToolbar>

Extract the component to be rendered as a drop to a variable or even an external file when it gets too big.

Special components

Insert table menu

The <FxOperationInsertTableMenu /> component is used to, as its name implies, insert a table. It shows a grid on which the user can select the desired table size. This grid scales to a certain limit.

<MastheadToolbar>
	<MastheadToolbarButtons>
		<ButtonWithDrop renderDrop={() => (
			<Drop>
				<FxOperationInsertTableMenu operationName="cals-table-insert" />
			</Drop>
		)} />
	</MastheadToolbarButtons>
</MastheadToolbar>

Conditional button(groups)

The <FxBooleanXPathQueryByNameFromSelection /> component can be used to conditionally show buttons or button groups, based on the current selected element. This component returns an object in which the XPath queries result's are stored by name in a parameter object given to its children. This can be used to make buttons or button groups to render or not, based on the result of the XPath query.

<MastheadToolbar>
	<MastheadToolbarButtons>
		<FxOperationButton operationName="some-operation" />
	</MastheadToolbarButtons>
	<FxBooleanXPathQueryByNameFromSelection xpathQueryByName={{ table: 'self::table' }}>
		{({ xpathQueryResultByName }) => (
			<MastheadToolbarButtons>
				<FxOperationButton operationName="some-other-operation" />
				{xpathQueryResultByName.table && (
					<FxOperationButton operationName="some-table-related-operation" />
				)}
		</MastheadToolbarButtons>
	</FxBooleanXPathQueryByNameFromSelection>
</MastheadToolbar>

This style of React API is usually called 'children as a function'. It's effect is much easier explained with a very simple example implementation than trying to describe it:

function ComponentWithChildrenAsAFunction({ children }) {
	// The children prop is being called as a function, and it is passed an object literal, see usage below.
	return children({ someParameter: 'someValue' });
}

// Usage
<ComponentWithChildrenAsAFunction>
	{({ someParameter }) => (
		<span>{someParameter}</span>
	)}
</ComponentWithChildrenAsAFunction>
Was this page helpful?