MacOS Tabs

Installation

npm install --save macos-tabs

or

yarn add macos-tabs

Usage

API

MacOSTabs

type Props = {
	// onClick event when the user clicks on the AddTabButton on a tab header
	onAddTabButtonClick: (e: Event) => void,

	// onClick event when the user clicks on the CloseTabButton on a tab header
	onCloseTabButtonClick: (e: Event, index: number) => void,

	// Event when the user stops dragging a header
	// The updated tabs contain the new ordering, you can directly update your state with
	// these returned tabs
	// The updated index of the active tab is also provided
	onDragStop: (e: Event, index: number, tabs: Tabs) => void,

	// Event when the user clicks on a tab header
	// The index of the clicked header is passed back
	onTabClick: (e: Event, index: number) => void,

	// Event when the user's mouse enters a tab header
	onTabMouseEnter: (e: Event, index: number) => void,

	// Even when the user's mouse leaves a tab header
	onTabMouseLeave: (e: Event, index: number) => void,

	// Event when the activeTabIndex is updated internally
	// This allows you to keep track of the activeTabIndex even
	// if you are letting MacOSTabs handle the state
	onSetActiveTab: (index: number) => void,

	// Specify the position of addTabButton
	addTabPosition: 'none' | 'start' | 'end',

	// Declare whether or not you want to manage the activeTabIndex
	autoActiveTab: boolean,

	// Can be used to set initial active tab index
	// If autoActiveTab is false, then you should have methods
	// to manage the activeTabIndex state
	activeTabIndex: number,

	// Tab content should be wrapped in a TabBody component with the correct props
	// Tabs order can be modified programmatically by manually changing the order
	// of the array
	tabs: Tabs,

	// Declare a div or react component to render when there are no tabs open
	defaultContent: Object,

	// Flag to show or hide tab headers
	showHeader: boolean,

	// Declare the header height in px (note: styles have not been tested with
	// anything besides the default of 24px, this is a WIP)
	headerHeight: number | string,

	// Declare a custom element that the body should be rendered into
	// instead of directly below the tab headers
	// i.e. <div id="tabBody" />
	customBodyElementId: string,

	// Set tab scroll behavior
	scrollX: 'normal' | 'reversed' | 'disabled',

	// Set tab scroll behavior
	scrollY: 'normal' | 'reversed' | 'disabled',

	// Apply custom styles to specified component(s)
	styles: {
		addTabButton?: Object,
		closeTabButton?: Object,
		tab?: Object,
		tabActive?: Object,
		outerTabContainer?: Object,
		innerTabContainer?: Object
	},

	// Apply custom classnames to specified component(s)
	classNames: {
		addTabButton?: string,
		closeTabButton?: string,
		tab?: string,
		tabActive?: string,
		outerTabContainer?: string,
		innerTabContainer?: string
	},

	// Override icons on buttons
	icons: {
		addTabButton?: Object | string,
		closeTabButton?: Object | string
	},

	// Experimental/Not Completed
	onDragOut: (e: Event, outTabIndex: number) => void,
	dragOutDistance: number
}

static defaultProps = {
	tabs: [],
	activeTabIndex: 0,
	scrollX: 'normal',
	scrollY: 'disabled',
	addTabPosition: 'end',
	showHeader: true,
	headerHeight: 24,
	dragOutDistance: 40,
	autoActiveTab: true,
	styles: {},
	classNames: {},
	icons: {}
}

TabBody

type Props = {
	// Label that will be displayed on the tab header
	label: string | number,

	// Children components to render
	children?: HTMLElement | Component<*, *, *>,

	// Unique tabId
	tabId: string | number,

	// Optional styles/classnames

	// Set additional TabBody styles
	// Note: In most cases, setting styles on the child component is sufficient
	style?: Object,

	// Set TabBody classname
	className?: string
}

static defaultProps = {
	label: ''
}

Minimal Example

import React, { Component } from 'react'
import MacOSTabs, { TabBody } from 'macos-tabs'

const defaultStyles = {
	height: '100%'
}

export default class Home extends Component {
	constructor(props) {
		super(props)

		this.id = 0

		this.state = {
			tabs: [
				this.makeTab(this.id++),
				this.makeTab(this.id++),
				this.makeTab(this.id++)
			]
		}
	}

	makeTab(id) {
		return (
			<TabBody label={ `Test Tab ${ id }` } tabId={ id } key={ id }>
				<div
					style={{
						height: '100%',
						border: '1px solid red',
						textAlign: 'center',
						boxSizing: 'border-box',
						paddingTop: '20%'
					}}
				>
					Hello { id }!
				</div>
			</TabBody>
		)
	}

	onDragStop(e, activeTabIndex, tabs) {
		this.setState({
			tabs
		})
	}

	onAddTabButtonClick(e) {
		const newTabs = this.state.tabs.slice(0)

		newTabs.push(this.makeTab(this.id++))

		this.setState({
			tabs: newTabs
		})
	}

	onCloseTabButtonClick(e, closedTabIndex) {
		const newTabs = this.state.tabs.slice(0)

		newTabs.splice(closedTabIndex, 1)

		this.setState({
			tabs: newTabs
		})
	}

	render() {
		return (
			<div style={ defaultStyles }>
				<MacOSTabs
					tabs={ this.state.tabs }
					onDragStop={ this.onDragStop.bind(this) }
					onAddTabButtonClick={ this.onAddTabButtonClick.bind(this) }
					onCloseTabButtonClick={ this.onCloseTabButtonClick.bind(this) }
				/>
			</div>
		)
	}
}

Controlled Active Tab & CustomBodyElementID Example

import React, { Component } from 'react'
import MacOSTabs, { TabBody } from 'macos-tabs'

const defaultStyles = {
	height: '100%'
}

export default class Home extends Component {
	constructor(props) {
		super(props)

		this.id = 0

		this.state = {
			tabs: [
				this.makeTab(this.id++),
				this.makeTab(this.id++),
				this.makeTab(this.id++)
			],
			activeTabIndex: 0
		}
	}

	makeTab(id) {
		return (
			<TabBody label={ `Test Tab ${ id }` } tabId={ id } key={ id }>
				<div
					style={{
						height: '100%',
						border: '1px solid red',
						textAlign: 'center',
						boxSizing: 'border-box',
						paddingTop: '20%'
					}}
				>
					<form>
						<label>
							Name { id }:
							<input type="text" name="name" />
						</label>
						<input type="submit" value="Submit" />
					</form>
				</div>
			</TabBody>
		)
	}

	onDragStop(e, activeTabIndex, tabs) {
		this.setState({
			tabs,
			activeTabIndex
		})
	}

	onAddTabButtonClick(e) {
		const newTabs = this.state.tabs.slice(0)

		newTabs.push(this.makeTab(this.id++))

		this.setState({
			tabs: newTabs,
			activeTabIndex: newTabs.length - 1
		})
	}

	onCloseTabButtonClick(e, closedTabIndex) {
		const newTabs = this.state.tabs.slice(0)

		newTabs.splice(closedTabIndex, 1)

		if (closedTabIndex <= this.state.activeTabIndex) {
			this.setState({
				tabs: newTabs,
				activeTabIndex: (this.state.activeTabIndex === 0) ? 0 : this.state.activeTabIndex - 1
			})
		} else {
			this.setState({
				tabs: newTabs
			})
		}
	}

	onSetActiveTab(index) {
		this.setState({
			activeTabIndex: index
		})
	}

	render() {
		return (
			<div style={ defaultStyles }>
				<MacOSTabs
					tabs={ this.state.tabs }
					onDragStop={ this.onDragStop.bind(this) }
					onAddTabButtonClick={ this.onAddTabButtonClick.bind(this) }
					onCloseTabButtonClick={ this.onCloseTabButtonClick.bind(this) }
					onSetActiveTab={ this.onSetActiveTab.bind(this) }
					activeTabIndex={ this.state.activeTabIndex }
					defaultContent={ <div>Add a tab to get started!</div> }
					customBodyElementId='custom1'
				/>
				<div id='custom1' style={{ height: 'calc(100% - 24px)' }} />
			</div>
		)
	}
}