Top
ToolBar API - API
ToolBar API
Props (10)
Styling Props (2)
Methods (1)
Object
default: undefined
When overflowStrategy=dropdown, elements that overflow are rendered inside a <DropdownButton />. This props is used to add props to <DropdownButton />.
import React from 'react'
import ToolBar from '@zippytech/react-toolkit/ToolBar'
import '@zippytech/react-toolkit/ToolBar/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import DropDownButton from '@zippytech/react-toolkit/DropdownButton'
import '@zippytech/react-toolkit/DropdownButton/index.css'
import SplitButton from '@zippytech/react-toolkit/SplitButton'
import '@zippytech/react-toolkit/SplitButton/index.css'
import ResizableContainer from './ResizableContainer'
import Icon from './icons'

const toolbarStyle = { borderTop: 0, borderLeft: 0, borderRight: 0 }

import { settingsItems, menuItems, separator } from './toolBarChildren'

const dropdownButtonProps = {
  style: {
    background: '#e9580a'
  }
}
export default () => <div>
  <ResizableContainer width={370} style={toolbarStyle}>
    <ToolBar style={toolbarStyle} overflowStrategy="dropdown" dropdownButtonProps={dropdownButtonProps}>
      <Button style={{ minWidth: 90 }}>New item</Button>
      <Button style={{ minWidth: 30 }} icon={<Icon type="edit" />} />
      <Button style={{ minWidth: 90 }} icon={<Icon type="deleteIcon" />}>Delete</Button>
      <DropDownButton items={settingsItems} style={{ maxHeight: 32 }}>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <Icon type="setting" /> <span style={{ marginLeft: 5 }}>Settings</span>
        </div>
      </DropDownButton>
      <SplitButton items={menuItems}>Menu</SplitButton>
      <Button style={{ minWidth: 90 }} icon={<Icon type="undo" />}>Undo</Button>
      <Button style={{ minWidth: 90 }} icon={<Icon type="redo" />}>Redo</Button>
      <Button style={{ minWidth: 90 }} icon={<Icon type="mail" />}>E-mail</Button>
    </ToolBar>
  </ResizableContainer>
</div>
Number
default: 15
Time interval (in ms) in between scroll actions while scroll arrows are hovered - scrollOnMouseEnter=true.
This prop is used so there is a difference in speed when scrolling with mouse over or by clicking the scroll arrows.
import React from 'react'
import ToolBar from '@zippytech/react-toolkit/ToolBar'
import '@zippytech/react-toolkit/ToolBar/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import DropDownButton from '@zippytech/react-toolkit/DropdownButton'
import '@zippytech/react-toolkit/DropdownButton/index.css'
import SplitButton from '@zippytech/react-toolkit/SplitButton'
import '@zippytech/react-toolkit/SplitButton/index.css'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import ResizableContainer from './ResizableContainer'
import Icon from './icons'

import { settingsItems, menuItems, separator } from './toolBarChildren'

const toolbarStyle = { borderTop: 0, borderLeft: 0, borderRight: 0 }

const dataSource = [
  { label: '5ms', id: 5 },
  { label: '10ms', id: 10 },
  { label: '15ms', id: 15 },
  { label: '20ms', id: 20 },
  { label: '30ms', id: 30 },
  { label: '50ms', id: 50 },
  { label: '100ms', id: 100 }
]

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { speed: 5 }
  }
  render() {
    return <div>
      <ResizableContainer width={370}>
        <ToolBar
          mouseoverScrollSpeed={this.state.speed}
          style={toolbarStyle}
        >
          <Button style={{ minWidth: 90 }}>New item</Button>
          <Button style={{ minWidth: 30 }} icon={<Icon type="edit" />} />
          <Button style={{ minWidth: 90 }} icon={<Icon type="deleteIcon" />}>Delete</Button>
          <DropDownButton items={settingsItems} style={{ maxHeight: 32 }}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <Icon type="setting" /> <span style={{ marginLeft: 5 }}>Settings</span>
            </div>
          </DropDownButton>
          <SplitButton items={menuItems}>Menu</SplitButton>
          <Button style={{ minWidth: 90 }} icon={<Icon type="undo" />}>Undo</Button>
          <Button style={{ minWidth: 90 }} icon={<Icon type="redo" />}>Redo</Button>
          <Button style={{ minWidth: 90 }} icon={<Icon type="mail" />}>E-mail</Button>
        </ToolBar>
      </ResizableContainer>

      <div style={{ marginTop: 20 }}>
        Mouse over scroll speed:
        <ComboBox
          style={{ width: 200 }}
          collapseOnSelect
          changeValueOnNavigation
          dataSource={dataSource}
          value={this.state.speed}
          onChange={(value) => this.setState({ speed: value })}
        />
      </div>
    </div>
  }
}
export default () => <App />
scroll|dropdown
default: "scroll"
When scroll, when elements overflow two arrows are rendered. With these arrows overflowed items can be scrolled into view.
When dropdown overflowed items are rendered inside a <DropdownButton />.
import React from 'react'
import ToolBar from '@zippytech/react-toolkit/ToolBar'
import '@zippytech/react-toolkit/ToolBar/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import DropDownButton from '@zippytech/react-toolkit/DropdownButton'
import '@zippytech/react-toolkit/DropdownButton/index.css'
import SplitButton from '@zippytech/react-toolkit/SplitButton'
import '@zippytech/react-toolkit/SplitButton/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import ResizableContainer from './ResizableContainer'
import Icon from './icons'

const toolbarStyle = { borderTop: 0, borderLeft: 0, borderRight: 0 }

import { settingsItems, menuItems, separator } from './toolBarChildren'

const dataSource = [
  { label: 'scroll', id: 'scroll' },
  { label: 'dropdown', id: 'dropdown' }
]

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      strategy: 'scroll',
      rtl: false
    }
  }
  render() {
    return <div>
      <ResizableContainer width={370}>
        <ToolBar
          overflowStrategy={this.state.strategy}
          rtl={this.state.rtl}
          style={toolbarStyle}
        >
          <Button style={{ minWidth: 90 }}>New item</Button>
          <Button style={{ minWidth: 30 }} icon={<Icon type="edit" />} />
          <Button style={{ minWidth: 90 }} icon={<Icon type="deleteIcon" />}>Delete</Button>
          <DropDownButton items={settingsItems} style={{ maxHeight: 32 }}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <Icon type="setting" /> <span style={{ marginLeft: 5 }}>Settings</span>
            </div>
          </DropDownButton>
          <SplitButton items={menuItems}>Menu</SplitButton>
          <Button style={{ minWidth: 90 }} icon={<Icon type="undo" />}>Undo</Button>
          <Button style={{ minWidth: 90 }} icon={<Icon type="redo" />}>Redo</Button>
          <Button style={{ minWidth: 90 }} icon={<Icon type="mail" />}>E-mail</Button>
        </ToolBar>
      </ResizableContainer>

      <div style={{ marginTop: 20 }}>
        <CheckBox
          checked={this.state.rtl}
          onChange={rtl => this.setState({ rtl })}
        >
          Right-to-left
        </CheckBox>
      </div>

      <div style={{ marginTop: 20 }}>
        Overflow strategy:
        <ComboBox
          style={{ width: 200 }}
          collapseOnSelect
          changeValueOnNavigation
          dataSource={dataSource}
          value={this.state.strategy}
          onChange={(value) => this.setState({ strategy: value })}
        />
      </div>
    </div>
  }
}

export default () => <App />
Fn({ domProps, items })
default: undefined
When overflowStrategy=dropdown, elements that overflow are rendered inside a <DropdownButton />. This function is used to customize <DropdownButton />.
items param represents the items that overflow and are passed as props to <DropdownButton />.
Return new React.Node or return undefined, and mutate menuProps.
If it returns undefined, the mutated domProps are applied on the default implementation.
import React from 'react'
import ToolBar from '@zippytech/react-toolkit/ToolBar'
import '@zippytech/react-toolkit/ToolBar/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import DropDownButton from '@zippytech/react-toolkit/DropdownButton'
import '@zippytech/react-toolkit/DropdownButton/index.css'
import SplitButton from '@zippytech/react-toolkit/SplitButton'
import '@zippytech/react-toolkit/SplitButton/index.css'
import ResizableContainer from './ResizableContainer'
import Icon from './icons'

import { settingsItems, menuItems, separator } from './toolBarChildren'

const toolbarStyle = { borderTop: 0, borderLeft: 0, borderRight: 0 }

function renderDropdownButton({ domProps }) {
  domProps.style = { background: '#1976D2' }
}

export default () => <div>
  <ResizableContainer width={370}>
    <ToolBar
      overflowStrategy="dropdown"
      renderDropdownButton={renderDropdownButton}
      style={toolbarStyle}
    >
      <Button style={{ minWidth: 90 }}>New item</Button>
      <Button style={{ minWidth: 30 }} icon={<Icon type="edit" />} />
      <Button style={{ minWidth: 90 }} icon={<Icon type="deleteIcon" />}>Delete</Button>
      <DropDownButton items={settingsItems} style={{ maxHeight: 32 }}>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <Icon type="setting" /> <span style={{ marginLeft: 5 }}>Settings</span>
        </div>
      </DropDownButton>
      <SplitButton items={menuItems}>Menu</SplitButton>
      <Button style={{ minWidth: 90 }} icon={<Icon type="undo" />}>Undo</Button>
      <Button style={{ minWidth: 90 }} icon={<Icon type="redo" />}>Redo</Button>
      <Button style={{ minWidth: 90 }} icon={<Icon type="mail" />}>E-mail</Button>
    </ToolBar>
  </ResizableContainer>
</div>
Fn({domProps, direction})
default: true
Custom render function for scroll arrows. direction is 1 or -1.
Return new React.Node or return undefined, and mutate domProps.
If it returns undefined, the mutated domProps are applied on the default implementation.
import React from 'react'
import ToolBar from '@zippytech/react-toolkit/ToolBar'
import '@zippytech/react-toolkit/ToolBar/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import DropDownButton from '@zippytech/react-toolkit/DropdownButton'
import '@zippytech/react-toolkit/DropdownButton/index.css'
import SplitButton from '@zippytech/react-toolkit/SplitButton'
import '@zippytech/react-toolkit/SplitButton/index.css'
import ResizableContainer from './ResizableContainer'
import Icon from './icons'

import { settingsItems, menuItems, separator } from './toolBarChildren'

const toolbarStyle = { borderTop: 0, borderLeft: 0, borderRight: 0 }

function renderScroller({ domProps, direction }) {
  const arrowStyle = Object.assign({}, domProps.style, {
    background: '#8ACB88'
  })

  return direction === 1 ?
    <div {...domProps} style={arrowStyle}>
      <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24">
        <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/>
        <path d="M0-.25h24v24H0z" fill="none"/>
      </svg>
    </div> :
    <div {...domProps} style={arrowStyle}>
      <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24">
        <path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"/>
        <path d="M0-.5h24v24H0z" fill="none"/>
      </svg>
    </div>
}

export default () => <div>
  <ResizableContainer width={370}>
    <ToolBar renderScroller={renderScroller} style={toolbarStyle}>
      <Button style={{ minWidth: 90 }}>New item</Button>
      <Button style={{ minWidth: 30 }} icon={<Icon type="edit" />} />
      <Button style={{ minWidth: 90 }} icon={<Icon type="deleteIcon" />}>Delete</Button>
      <DropDownButton items={settingsItems} style={{ maxHeight: 32 }}>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <Icon type="setting" /> <span style={{ marginLeft: 5 }}>Settings</span>
        </div>
      </DropDownButton>
      <SplitButton items={menuItems}>Menu</SplitButton>
      <Button style={{ minWidth: 90 }} icon={<Icon type="undo" />}>Undo</Button>
      <Button style={{ minWidth: 90 }} icon={<Icon type="redo" />}>Redo</Button>
      <Button style={{ minWidth: 90 }} icon={<Icon type="mail" />}>E-mail</Button>
    </ToolBar>
  </ResizableContainer>
</div>
Bool
default: false
Whether to use direction: rtl.
import React from 'react'
import ToolBar from '@zippytech/react-toolkit/ToolBar'
import '@zippytech/react-toolkit/ToolBar/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import DropDownButton from '@zippytech/react-toolkit/DropdownButton'
import '@zippytech/react-toolkit/DropdownButton/index.css'
import SplitButton from '@zippytech/react-toolkit/SplitButton'
import '@zippytech/react-toolkit/SplitButton/index.css'
import ResizableContainer from './ResizableContainer'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Icon from './icons'

const toolbarStyle = { borderTop: 0, borderLeft: 0, borderRight: 0 }

import { settingsItems, menuItems, separator } from './toolBarChildren'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { rtl: false }
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.rtl}
          onChange={(rtl) => this.setState({ rtl })}
        >
          right-to-left
        </CheckBox>
      </div>
      <ResizableContainer>
        <ToolBar rtl={this.state.rtl} style={toolbarStyle}>
          <Button style={{ minWidth: 90 }}>New item</Button>
          <Button style={{ minWidth: 30 }} icon={<Icon type="edit" />} />
          <Button style={{ minWidth: 90 }} icon={<Icon type="deleteIcon" />}>Delete</Button>
          <DropDownButton items={settingsItems} style={{ maxHeight: 32 }}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <Icon type="setting" /> <span style={{ marginLeft: 5 }}>Settings</span>
            </div>
          </DropDownButton>
          <SplitButton items={menuItems}>Menu</SplitButton>
          <Button style={{ minWidth: 90 }} icon={<Icon type="undo" />}>Undo</Button>
          <Button style={{ minWidth: 90 }} icon={<Icon type="redo" />}>Redo</Button>
          <Button style={{ minWidth: 90 }} icon={<Icon type="mail" />}>E-mail</Button>
        </ToolBar>
      </ResizableContainer>
    </div>
  }
}

export default () => <App />
Bool
default: true
Specifies if the overflowed <Toolbar /> is scrolled on click. If false, the <Toolbar /> is scrolled on mousedown. Also see related scrollOnMouseEnter.
import React from 'react'
import ToolBar from '@zippytech/react-toolkit/ToolBar'
import '@zippytech/react-toolkit/ToolBar/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import DropDownButton from '@zippytech/react-toolkit/DropdownButton'
import '@zippytech/react-toolkit/DropdownButton/index.css'
import SplitButton from '@zippytech/react-toolkit/SplitButton'
import '@zippytech/react-toolkit/SplitButton/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import ResizableContainer from './ResizableContainer'
import Icon from './icons'

import { settingsItems, menuItems, separator } from './toolBarChildren'

const toolbarStyle = { borderTop: 0, borderLeft: 0, borderRight: 0 }

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { scrollOnClick: false }
  }
  render() {
    return <div>
      <ResizableContainer width={370}>
        <ToolBar
          scrollOnClick={this.state.scrollOnClick}
          scrollOnMouseEnter={false}
          style={toolbarStyle}
        >
          <Button style={{ minWidth: 90 }}>New item</Button>
          <Button style={{ minWidth: 30 }} icon={<Icon type="edit" />} />
          <Button style={{ minWidth: 90 }} icon={<Icon type="deleteIcon" />}>Delete</Button>
          <DropDownButton items={settingsItems} style={{ maxHeight: 32 }}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <Icon type="setting" /> <span style={{ marginLeft: 5 }}>Settings</span>
            </div>
          </DropDownButton>
          <SplitButton items={menuItems}>Menu</SplitButton>
          <Button style={{ minWidth: 90 }} icon={<Icon type="undo" />}>Undo</Button>
          <Button style={{ minWidth: 90 }} icon={<Icon type="redo" />}>Redo</Button>
          <Button style={{ minWidth: 90 }} icon={<Icon type="mail" />}>E-mail</Button>
        </ToolBar>
      </ResizableContainer>

      <div style={{ marginTop: 20 }}>
        <CheckBox
          checked={this.state.scrollOnClick}
          onChange={(scrollOnClick) => this.setState({ scrollOnClick })}
        >
          scrollOnClick
        </CheckBox>
      </div>
    </div>
  }
}

export default () => <App />
Bool
default: true
Specifies if the overflowed <Toolbar /> is scrolled on mouseenter. If false, the <Toolbar /> is scrolled on mousedown. The overflowed <Toolbar /> can also be scrolled on click - see scrollOnClick.
import React from 'react'
import ToolBar from '@zippytech/react-toolkit/ToolBar'
import '@zippytech/react-toolkit/ToolBar/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import DropDownButton from '@zippytech/react-toolkit/DropdownButton'
import '@zippytech/react-toolkit/DropdownButton/index.css'
import SplitButton from '@zippytech/react-toolkit/SplitButton'
import '@zippytech/react-toolkit/SplitButton/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import ResizableContainer from './ResizableContainer'
import Icon from './icons'

import { settingsItems, menuItems, separator } from './toolBarChildren'

const toolbarStyle = { borderTop: 0, borderLeft: 0, borderRight: 0 }

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { scrollOnMouseEnter: true }
  }
  render() {
    return <div>
      <ResizableContainer width={370}>
        <ToolBar scrollOnMouseEnter={this.state.scrollOnMouseEnter} style={toolbarStyle}>
          <Button style={{ minWidth: 90 }}>New item</Button>
          <Button style={{ minWidth: 30 }} icon={<Icon type="edit" />} />
          <Button style={{ minWidth: 90 }} icon={<Icon type="deleteIcon" />}>Delete</Button>
          <DropDownButton items={settingsItems} style={{ maxHeight: 32 }}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <Icon type="setting" /> <span style={{ marginLeft: 5 }}>Settings</span>
            </div>
          </DropDownButton>
          <SplitButton items={menuItems}>Menu</SplitButton>
          <Button style={{ minWidth: 90 }} icon={<Icon type="undo" />}>Undo</Button>
          <Button style={{ minWidth: 90 }} icon={<Icon type="redo" />}>Redo</Button>
          <Button style={{ minWidth: 90 }} icon={<Icon type="mail" />}>E-mail</Button>
        </ToolBar>
      </ResizableContainer>
      <div style={{ marginTop: 20 }}>
        <CheckBox
          checked={this.state.scrollOnMouseEnter}
          onChange={(scrollOnMouseEnter) => this.setState({ scrollOnMouseEnter })}
        >
          scrollOnMouseEnter
        </CheckBox>
      </div>
    </div>
  }
}

export default () => <App />
Number
default: 15
Time interval (in ms) in between scroll actions when the <Toolbar /> is configured to scroll on mousedown - scrollOnMouseEnter=false. .
This prop is used so there is a difference in speed when scrolling with mouse over or by clicking the scroll arrows.
import React from 'react'
import ToolBar from '@zippytech/react-toolkit/ToolBar'
import '@zippytech/react-toolkit/ToolBar/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import DropDownButton from '@zippytech/react-toolkit/DropdownButton'
import '@zippytech/react-toolkit/DropdownButton/index.css'
import SplitButton from '@zippytech/react-toolkit/SplitButton'
import '@zippytech/react-toolkit/SplitButton/index.css'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import ResizableContainer from './ResizableContainer'
import Icon from './icons'

import { settingsItems, menuItems, separator } from './toolBarChildren'

const toolbarStyle = { borderTop: 0, borderLeft: 0, borderRight: 0 }

const dataSource = [
  { label: '5ms', id: 5 },
  { label: '10ms', id: 10 },
  { label: '15ms', id: 15 },
  { label: '20ms', id: 20 },
  { label: '30ms', id: 30 },
  { label: '50ms', id: 50 },
  { label: '100ms', id: 100 }
]

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { speed: 5 }
  }
  render() {
    return <div>
      <ResizableContainer width={370}>
        <ToolBar
          scrollSpeed={this.state.speed}
          scrollOnMouseEnter={false}
          style={toolbarStyle}
        >
          <Button style={{ minWidth: 90 }}>New item</Button>
          <Button style={{ minWidth: 30 }} icon={<Icon type="edit" />} />
          <Button style={{ minWidth: 90 }} icon={<Icon type="deleteIcon" />}>Delete</Button>
          <DropDownButton items={settingsItems} style={{ maxHeight: 32 }}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <Icon type="setting" /> <span style={{ marginLeft: 5 }}>Settings</span>
            </div>
          </DropDownButton>
          <SplitButton items={menuItems}>Menu</SplitButton>
          <Button style={{ minWidth: 90 }} icon={<Icon type="undo" />}>Undo</Button>
          <Button style={{ minWidth: 90 }} icon={<Icon type="redo" />}>Redo</Button>
          <Button style={{ minWidth: 90 }} icon={<Icon type="mail" />}>E-mail</Button>
        </ToolBar>
      </ResizableContainer>

      <div style={{ marginTop: 20 }}>
        Scroll speed:
        <ComboBox
          style={{ width: 200 }}
          collapseOnSelect
          changeValueOnNavigation
          dataSource={dataSource}
          value={this.state.speed}
          onChange={(value) => this.setState({ speed: value })}
        />
      </div>
    </div>
  }
}
export default () => <App />
Number
default: 15
Number of pixels to scroll on one step. A step is a time interval in which elements are scrolled by scrollStep amount.
import React from 'react'
import ToolBar from '@zippytech/react-toolkit/ToolBar'
import '@zippytech/react-toolkit/ToolBar/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import DropDownButton from '@zippytech/react-toolkit/DropdownButton'
import '@zippytech/react-toolkit/DropdownButton/index.css'
import SplitButton from '@zippytech/react-toolkit/SplitButton'
import '@zippytech/react-toolkit/SplitButton/index.css'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import ResizableContainer from './ResizableContainer'
import Icon from './icons'

import { settingsItems, menuItems, separator } from './toolBarChildren'

const toolbarStyle = { borderTop: 0, borderLeft: 0, borderRight: 0 }

const dataSource = [
  { label: '5ms', id: 5 },
  { label: '10ms', id: 10 },
  { label: '15ms', id: 15 },
  { label: '20ms', id: 20 },
  { label: '30ms', id: 30 },
  { label: '50ms', id: 50 },
  { label: '100ms', id: 100 }
]

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { step: 5 }
  }
  render() {
    return <div>
      <ResizableContainer width={370}>
        <ToolBar scrollStep={this.state.step} style={toolbarStyle}>
          <Button style={{ minWidth: 90 }}>New item</Button>
          <Button style={{ minWidth: 30 }} icon={<Icon type="edit" />} />
          <Button style={{ minWidth: 90 }} icon={<Icon type="deleteIcon" />}>Delete</Button>
          <DropDownButton items={settingsItems} style={{ maxHeight: 32 }}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <Icon type="setting" /> <span style={{ marginLeft: 5 }}>Settings</span>
            </div>
          </DropDownButton>
          <SplitButton items={menuItems}>Menu</SplitButton>
          <Button style={{ minWidth: 90 }} icon={<Icon type="undo" />}>Undo</Button>
          <Button style={{ minWidth: 90 }} icon={<Icon type="redo" />}>Redo</Button>
          <Button style={{ minWidth: 90 }} icon={<Icon type="mail" />}>E-mail</Button>
        </ToolBar>
      </ResizableContainer>

      <div style={{ marginTop: 20 }}>
        Scroll step:
        <ComboBox
          style={{ width: 200 }}
          collapseOnSelect
          changeValueOnNavigation
          dataSource={dataSource}
          value={this.state.step}
          onChange={(value) => this.setState({ step: value })}
        />
      </div>
    </div>
  }
}
export default () => <App />
<ToolBar /> is a wrapper that handles items overflow in two different ways.
String
default: undefined
Specify a className for <ToolBar />.
This will not override the default <ToolBar /> class of zippy-react-toolkit-tool-bar, but rather will be appended to the classes that the component already has.
import React from 'react'
import ToolBar from '@zippytech/react-toolkit/ToolBar'
import '@zippytech/react-toolkit/ToolBar/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import DropDownButton from '@zippytech/react-toolkit/DropdownButton'
import '@zippytech/react-toolkit/DropdownButton/index.css'
import SplitButton from '@zippytech/react-toolkit/SplitButton'
import '@zippytech/react-toolkit/SplitButton/index.css'
import ResizableContainer from './ResizableContainer'
import Icon from './icons'

import { settingsItems, menuItems, separator } from './toolBarChildren'

export default () => <div>
  <ResizableContainer>
    <ToolBar
      className="toolbar-border"
    >
      <Button style={{ minWidth: 90 }}>New item</Button>
      <Button style={{ minWidth: 30 }} icon={<Icon type="edit" />} />
      <Button style={{ minWidth: 90 }} icon={<Icon type="deleteIcon" />}>Delete</Button>
      <DropDownButton items={settingsItems} style={{ maxHeight: 32 }}>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <Icon type="setting" /> <span style={{ marginLeft: 5 }}>Settings</span>
        </div>
      </DropDownButton>
      <SplitButton items={menuItems}>Menu</SplitButton>
      <Button style={{ minWidth: 90 }} icon={<Icon type="undo" />}>Undo</Button>
      <Button style={{ minWidth: 90 }} icon={<Icon type="redo" />}>Redo</Button>
      <Button style={{ minWidth: 90 }} icon={<Icon type="mail" />}>E-mail</Button>
    </ToolBar>
  </ResizableContainer>
</div>
Object
default: undefined
Inline style applied on <ToolBar />.
import React from 'react'
import ToolBar from '@zippytech/react-toolkit/ToolBar'
import '@zippytech/react-toolkit/ToolBar/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import DropDownButton from '@zippytech/react-toolkit/DropdownButton'
import '@zippytech/react-toolkit/DropdownButton/index.css'
import SplitButton from '@zippytech/react-toolkit/SplitButton'
import '@zippytech/react-toolkit/SplitButton/index.css'
import ResizableContainer from './ResizableContainer'
import Icon from './icons'

import { settingsItems, menuItems, separator } from './toolBarChildren'

export default () => <div>
  <ResizableContainer>
    <ToolBar
      style={{  border: '1px solid #e9580a', background: 'lightgreen' }}
    >
      <Button style={{ minWidth: 90 }}>New item</Button>
      <Button style={{ minWidth: 30 }} icon={<Icon type="edit" />} />
      <Button style={{ minWidth: 90 }} icon={<Icon type="deleteIcon" />}>Delete</Button>
      <DropDownButton items={settingsItems} style={{ maxHeight: 32 }}>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <Icon type="setting" /> <span style={{ marginLeft: 5 }}>Settings</span>
        </div>
      </DropDownButton>
      <SplitButton items={menuItems}>Menu</SplitButton>
      <Button style={{ minWidth: 90 }} icon={<Icon type="undo" />}>Undo</Button>
      <Button style={{ minWidth: 90 }} icon={<Icon type="redo" />}>Redo</Button>
      <Button style={{ minWidth: 90 }} icon={<Icon type="mail" />}>E-mail</Button>
    </ToolBar>
  </ResizableContainer>
</div>
Fn(DOMNode)
undefined
Scroll to specified DOM node.
import React from 'react'
import ToolBar from '@zippytech/react-toolkit/ToolBar'
import '@zippytech/react-toolkit/ToolBar/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import DropDownButton from '@zippytech/react-toolkit/DropdownButton'
import '@zippytech/react-toolkit/DropdownButton/index.css'
import SplitButton from '@zippytech/react-toolkit/SplitButton'
import '@zippytech/react-toolkit/SplitButton/index.css'
import ResizableContainer from './ResizableContainer'
import Icon from './icons'

import { settingsItems, menuItems, separator } from './toolBarChildren'

const toolbarStyle = { borderTop: 0, borderLeft: 0, borderRight: 0 }

class App extends React.Component {
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <Button
          style={{ background: '#d2dff0', color: '#495e85' }}
          onClick={() => this.toolbar.scrollIntoView(this.button)}
        >
          Scroll to the "Save as" button
        </Button>
      </div>
      <ResizableContainer width={370}>
        <ToolBar ref={ref => this.toolbar = ref} style={toolbarStyle}>
          <Button style={{ minWidth: 90 }}>New item</Button>
          <Button style={{ minWidth: 30 }} icon={<Icon type="edit" />} />
          <Button style={{ minWidth: 90 }} icon={<Icon type="deleteIcon" />}>Delete</Button>
          <DropDownButton items={settingsItems} style={{ maxHeight: 32 }}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <Icon type="setting" /> <span style={{ marginLeft: 5 }}>Settings</span>
            </div>
            </DropDownButton>
          <SplitButton items={menuItems}>Menu</SplitButton>
          <Button style={{ minWidth: 90 }} icon={<Icon type="undo" />}>Undo</Button>
          <button
            ref={ref => (this.button = ref)}
            style={{
              width: 90,
              background: '#795663',
              border: '1px solid blue',
              color: 'white'
            }}
          >
            Save as
          </button>
          <Button style={{ minWidth: 90 }} icon={<Icon type="redo" />}>Redo</Button>
          <Button style={{ minWidth: 90 }} icon={<Icon type="mail" />}>E-mail</Button>
        </ToolBar>
      </ResizableContainer>
    </div>
  }
}

export default () => <App />