Top
Window API - API
Window API
Props (83)
Callback Props (18)
Styling Props (8)
Methods (13)
Number
default: 5
How many decimals to use when calculating the aspect ratio - see keepAspectRatio.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import smallNumbers from './dataSource'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { aspectRatioPrecision: 5, visible: true }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <p>Aspect ratio precision value</p>
        <ComboBox
          collapseOnSelect
          changeValueOnNavigation
          value={this.state.aspectRatioPrecision}
          onChange={aspectRatioPrecision => this.setState({aspectRatioPrecision})}
          style={{width: 200}}
          dataSource={smallNumbers}
        />
      </div>

      <Window
        title="aspectRatioPrecision"
        keepAspectRatio
        defaultCentered
        aspectRatioPrecision={this.state.aspectRatioPrecision}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Bool
default: true
Whether the body adds scrollbars when content doesn't fit.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { bodyScrollable: true, visible: true }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox onChange={ bodyScrollable => this.setState({ bodyScrollable }) } checked={this.state.bodyScrollable}>
          bodyScrollable
        </CheckBox>
      </div>
      <Window
        defaultPosition={{ top: 60, left: 20 }}
        defaultSize={{ height: 200, width: 250 }}
        title="bodyScrollable"
        bodyScrollable={this.state.bodyScrollable}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        <p>Performance - a component is only useful if it does its job quickly. This will generally not be a problem with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy.</p>
        <p>Simplicity - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.</p>
        <p>Look & feel - by default, components need to look carefully crafted & pretty.</p>
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Bool
default: false
Keeps focus inside <Window /> when navigating with Tab on focusable items (e.g inputs).
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { captureTabNavigation: true, visible: true }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox onChange={ captureTabNavigation => this.setState({ captureTabNavigation }) } checked={this.state.captureTabNavigation}>
          captureTabNavigation
        </CheckBox>
      </div>
      <Window
        captureTabNavigation={this.state.captureTabNavigation}
        defaultPosition={{ top: 50, left: 30 }}
        title="Window with captureTabNavigation"
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        <p>Navigate inputs with <b>tab key</b></p>
        <input placeholder="First Name" style={{ margin: 10 }}/>
        <input placeholder="Last Name" style={{ margin: 10 }}/>
        <input placeholder="Age" style={{ margin: 10 }}/>
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}
export default () => <App />
Bool
default: undefined
Whether the window is centered. When centered=true <Window /> cannot be moved (unless you update the prop as a response to onCenteredChange).
For uncontrolled behaviour, see defaultCentered.
Also see onCenteredChange callback prop.
Note that keepCenteredOnResize is true by default, so resizing a centered <Window /> from one side will also adjust the opposite side as well. Set keepCenteredOnResize=false in order to disable the behaviour.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { centered: true, visible: true }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox onChange={ centered => this.setState({ centered }) } checked={this.state.centered}>
          centered
        </CheckBox>
      </div>
      <Window
        defaultPosition={{ top: 50, left: 30 }}
        title="centered"
        centered={this.state.centered}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Bool
default: true
A close button will be rendered when closeable=true
Clicking the close button calls the close method which triggers onClose event.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { closeable: true, visible: true }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox onChange={ closeable => this.setState({ closeable }) } checked={this.state.closeable}>
          closeable
        </CheckBox>
      </div>
      <Window
        defaultPosition={{ top: 30, left: 30 }}
        title="closeable"
        closeable={this.state.closeable}
        centered
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
React.node
default: undefined
Customize icon rendered inside close button.
Close button is rendered when closeable=true.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

const customCloseIcon = <div>
  <svg fill="#000000" height="18" viewBox="0 0 24 24" width="18">
    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
    <path d="M0 0h24v24H0z" fill="none"/>
  </svg>
</div>

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        closeable
        defaultPosition={{ top: 30, left: 30 }}
        title="close icon"
        closeIcon={customCloseIcon}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Bool
default: undefined
Whether the <Window /> is collapsed. In collapsed state only the title visible, the body will be collapsed.
For uncontrolled behaviour, see defaultCollapsed.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { collapsed: null, visible: true }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox onChange={ collapsed => this.setState({ collapsed }) } checked={this.state.collapsed}>
          collapsed
        </CheckBox>
      </div>
      <Window
        defaultPosition={{ top: 30, left: 30 }}
        title="collapsed"
        centered
        collapsed={this.state.collapsed}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
React.node
default: undefined
Customize icon rendered inside collapse/expand button when collapsed is false.
Collapse/expand button is rendered when collapsible=true.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

const customCollapseIcon = <div>
  <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24">
    <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/>
    <path d="M0 0h24v24H0z" fill="none"/>
  </svg>
</div>

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        collapsible
        defaultPosition={{ top: 30, left: 30 }}
        title="collapse icon"
        collapseIcon={customCollapseIcon}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Bool
default: undefined
Whether the <Window /> can be collapsed. If true a collapse/expand button will be rendered in the toolbar.
To customize the collapse/expand button see renderCollapseButton, collapseIcon and expandIcon
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { collapsible: null, visible: true }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox onChange={ collapsible => this.setState({ collapsible }) } checked={this.state.collapsible}>
          collapsible
        </CheckBox>
      </div>
      <Window
        defaultPosition={{ top: 30, left: 30 }}
        title="collapsible"
        centered
        collapsible={this.state.collapsible}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}
export default () => <App />
Bool
default: false
If true, on browser resize, will check if it still fits in constrainTo - if it doesn't, size and positions are adjusted.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { constrainOnWindowResize: true, visible: true }
  }

  render() {
    return [
      <div style={{ marginBottom: 20 }}>
        <CheckBox onChange={ constrainOnWindowResize => this.setState({ constrainOnWindowResize }) } checked={this.state.constrainOnWindowResize}>
          constrainOnWindowResize
        </CheckBox>
        {!this.state.visible && <Button
          onClick={() => this.setState({ visible: true })}
        >Show the Window</Button>}
      </div>,

      <div style={{ width: '100%', height: '50%', border: '1px solid red', position: 'relative' }}>
        <Window
          defaultPosition={{ top: 30, left: -10 }}
          title="constrainOnWindowResize"
          constrainOnWindowResize={this.state.constrainOnWindowResize}
          constrainTo={node => node.parentNode}
          visible={this.state.visible}
          onClose={() => this.setState({ visible: false })}
        >
          Resize the browser window to see this window constrained to the red border parent.
        </Window>
      </div>
    ]
  }
}

export default () => <App />
Number
default: "16"
constrainOnWindowResize=true adds a resize event listener on browser window. This listener is throttled by the amount specified by constrainOnWindowResizeDelay.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { constrainOnWindowResizeDelay: 16, visible: true }
  }

  render() {
    return [
      <div style={{marginBottom: 20}}>
        <ComboBox
          collapseOnSelect
          changeValueOnNavigation
          value={this.state.constrainOnWindowResizeDelay}
          onChange={constrainOnWindowResizeDelay => this.setState({constrainOnWindowResizeDelay})}
          style={{width: 200}}
          dataSource={[{id: 16, label: '16'}, {id: 500, label: '500'}, {id: 1000, label: '1000'}]}
        />
        {!this.state.visible && <Button
          onClick={() => this.setState({ visible: true })}
        >Show the Window</Button>}
      </div>,

      <div style={{ width: '100%', height: '50%', border: '1px solid red', position: 'relative' }}>
        <Window
          defaultPosition={{ top: 30, left: -10 }}
          title="constrainOnWindowResizeDelay"
          keepAspectRatio
          constrainTo={node=>node.parentNode}
          constrainOnWindowResize
          constrainOnWindowResizeDelay={this.state.constrainOnWindowResizeDelay}
          visible={this.state.visible}
          onClose={() => this.setState({ visible: false })}
        >
        Resize the browser window to see this window constrained to the red border parent.
        </Window>
      </div>
    ]
  }
}

export default () => <App />
Bool
default: false
If true, when the browser window/the documentElement is scolled, will check if it still fits in constrainTo - if it doesn't, size and positions are adjusted.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { constrainOnWindowScroll: true, visible: true }
  }

  render() {
    return [
      <div style={{ marginBottom: 20 }}>
        <CheckBox onChange={ constrainOnWindowScroll => this.setState({ constrainOnWindowScroll }) } checked={this.state.constrainOnWindowScroll}>
          constrainOnWindowScroll
        </CheckBox>

        {!this.state.visible && <Button
          onClick={() => this.setState({ visible: true })}
        >Show the Window</Button>}
      </div>,

      <div style={{ width: '100%', height: '50%', border: '1px solid red', position: 'relative' }}>
        <Window
          defaultPosition={{ top: 30, left: -20 }}
          title="constrainOnWindowScroll"
          constrainOnWindowScroll={this.state.constrainOnWindowScroll}
          constrainTo={node => node.parentNode}
          visible={this.state.visible}
          onClose={() => this.setState({ visible: false })}
        >
          Scroll the browser window to see this window constrain to the red-border parent.
        </Window>
      </div>
    ]
  }
}

export default () => <App />
Bool
default: false
Whether only the title or the whole window is constrained to constrainTo,
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { constrainTitleOnly: false, visible: true }
  }

  render() {
    return <div id="constrain-region" style={{ border: '2px dotted #333', height: 400, position: 'relative' }}>
      <div style={{ marginBottom: 20 }}>
        <CheckBox onChange={ constrainTitleOnly => this.setState({ constrainTitleOnly }) } checked={this.state.constrainTitleOnly}>
          constrainTitleOnly
        </CheckBox>
      </div>
      <Window
        constrainTitleOnly={this.state.constrainTitleOnly}
        constrainTo="#constrain-region"
        title="constrainTitleOnly"
        defaultPosition={{ left: 30, top: 30}}
        defaultSize={{ width: 300, height: 150 }}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        Move the window downwards.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
HTMLElement|Function|String|{width:number, height:number, top:number, left: number}|DOM.node|Bool
default: true
Specifies the region to which size and position are constrained.
If true it will be constrained to the viewport.
This can also be a function, which will be called with the domNode of the <Window /> as the first param. The function can return a valid value - namely a CSS selector string or a reference to a HTMLElement.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { firstWin: true, secondWin: true }
  }

  render() {
    return <div id="constrain-region" style={{ border: '2px dotted rgb(51, 51, 51)', height: '50%', position: 'relative' }}>
      <Window
        constrainTo="#constrain-region"

        title="constrainTo #constrain-region"
        defaultPosition={{ left: 30, top: 70}}
        defaultSize={{ width: 300, height: 150 }}
        visible={this.state.firstWin}
        onClose={() => this.setState({ firstWin: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      <Window
        constrainTo={true}
        title="constrainTo=true"
        defaultPosition={{ left: 30, top: 300}}
        defaultSize={{ width: 300, height: 150 }}
        visible={this.state.secondWin}
        onClose={() => this.setState({ secondWin: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      <div style={{ margin: 10 }}>
        {!this.state.firstWin && <Button
          onClick={() => this.setState({ firstWin: true })}
        >Show the first Window</Button>}
        {!this.state.secondWin && <Button
          onClick={() => this.setState({ secondWin: true })}
        >Show the second Window</Button>}
      </div>
    </div>
  }
}

export default () => <App />
Bool
default: undefined
Whether the <Window /> is centered. When uncontrolled window can be moved by dragging, to bring window back to center after it was moved, call center method.
For controlled behaviour, see centered.
Also see onCenteredChange callback prop.
Note that keepCenteredOnResize is true by default, so resizing a centered <Window /> from one side will also adjust the opposite side as well. Set keepCenteredOnResize=false in order to disable the behaviour.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import '@zippytech/react-toolkit/Window/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state ={ visible: true }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <Button onClick={() => this.windowNode.center()}>trigger center</Button>
      </div>
      <Window
        ref={ref => this.windowNode = ref}
        title="defaultCentered"
        defaultCentered
        defaultPosition={{ top: 30, left: 30 }}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Bool
default: undefined
Whether the <Window /> is collapsed. In collapsed state only the title visible, the body will be collapsed.
For controlled behaviour, see collapsed.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        defaultCollapsed
        collapsible
        defaultPosition={{ top: 30, left: 30 }}
        title="defaultCollapsed"
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Bool
default: false
Whether the <Window /> is maximized.
For controlled behaviour, see maximized.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        maximizable
        defaultPosition={{ top: 30, left: 30 }}
        title="Window with defaultMaximized=true"
        defaultMaximized={true}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
{left?, right?, top?, bottom?}
default: undefined
Specifies the initial position of the <Window />.
For more details and controlled behaviour see position.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        defaultPosition={{ top: 30, left: 30 }}
        title="defaultPosition"
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Bool
default: true
If true Window will have position=fixed and if false it will have position=absolute
This prop can be toggled by clicking the pin button. To enable the pin button, enableRelativeToViewportToggle must be true.
For controlled behaviour, see relativeToViewport.
When the <Window /> component is relativeToViewport, so position: fixed is applied, it still might not be relative to viewport 0,0 coords if the window has a parent with CSS transform specified. This is because the transform creates a new stacking context with a new local coordinate system, as per W3C spec. Also see Eric Meyer's article on Un-fixing Fixed Elements with CSS Transforms.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        defaultRelativeToViewport={false}
        enableRelativeToViewportToggle
        defaultPosition={{ top: 30, left: 30 }}
        title="defaultRelativeToViewport"
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Number|{width: Number, height: number}
default: undefined
Specifies <Window /> initial width and height, if defaultSize is a number both dimensions have the same value.
For controlled behaviour, see size.
See related onResize callback prop.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        defaultPosition={{ top: 30, left: 30 }}
        title="defaultSize"
        defaultSize={{ width: 220, height: 250 }}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Bool
default: true
Whether the <Window /> is visible. If true, zippytech-toolkit-react-window--invisible className will be added.
For controlled behaviour, see visible.
Usecase for uncontrolled is when visible is changed with show and close methods.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Window/index.css'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  render() {
    return <div>
      <div>
        <div>The Window is hidden by default.</div>
        <Button onClick={() => this.windowNode.show()}>trigger show</Button>
      </div>
      <Window
        ref={ref => this.windowNode = ref}
        title="defaultVisible"
        defaultVisible={false}
        defaultPosition={{ top: 90, left: 20 }}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
    </div>
  }
}

export default () => <App />
Bool|{horizontal:Bool, vertical:Bool}
default: true
Whether the <Window /> can be moved. <Window /> can be conditioned to move only on vertical or horizontal axis.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { draggable: true, visible: true }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox onChange={ draggable => this.setState({ draggable }) } checked={this.state.draggable}>
          draggable
        </CheckBox>
      </div>
      <Window
        defaultPosition={{ top: 50, left: 30 }}
        title="draggable"
        draggable={this.state.draggable}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Enable position change using arrows.
To navigate focus <Window /> (click) and press up|down|left|right.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { enableKeyboardPositionChange: true, visible: true }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox onChange={ enableKeyboardPositionChange => this.setState({ enableKeyboardPositionChange }) } checked={this.state.enableKeyboardPositionChange}>
          enableKeyboardPositionChange
        </CheckBox>
      </div>
      <Window
        defaultPosition={{ top: 50, left: 30 }}
        title="enableKeyboardPositionChange"
        enableKeyboardPositionChange={this.state.enableKeyboardPositionChange}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Bool
default: true
Enable size change using arrows.
To change size press Ctrl|⌘ + up|down|left|right keys.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { enableKeyboardSizeChange: true, visible: true }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox onChange={ enableKeyboardSizeChange => this.setState({ enableKeyboardSizeChange }) } checked={this.state.enableKeyboardSizeChange}>
          enableKeyboardSizeChange
        </CheckBox>
      </div>
      <Window
        defaultPosition={{ top: 50, left: 20 }}
        title="enableKeyboardSizeChange"
        enableKeyboardSizeChange={this.state.enableKeyboardSizeChange}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Bool
default: true
If true, the <Window /> body will have a proxy layer displayed over the <Window /> contents when the <Window /> is being dragged. See related keepChildrenOnMove if you want to unmount children during the drag operation.
During the drag operation, the <Window /> has opacity: 0.5 in the default theme, so if enableMoveProxy is true the <Window /> body will have an additional overlay on top of <Window /> contents.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { enableMoveProxy: true, visible: true }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox onChange={ enableMoveProxy => this.setState({ enableMoveProxy }) } checked={this.state.enableMoveProxy}>
          enableMoveProxy
        </CheckBox>
      </div>
      <Window
        defaultPosition={{ top: 50, left: 20 }}
        title="enableMoveProxy"
        enableMoveProxy={this.state.enableMoveProxy}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}
export default () => <App />
If true, a pin icon will be rendered in title bar, that will toggle relativeToViewport.
When the <Window /> component is relativeToViewport, so position: fixed is applied, it still might not be relative to viewport 0,0 coords if the window has a parent with CSS transform specified. This is because the transform creates a new stacking context with a new local coordinate system, as per W3C spec. Also see Eric Meyer's article on Un-fixing Fixed Elements with CSS Transforms.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { enableRelativeToViewportToggle: true, visible: true }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox onChange={ enableRelativeToViewportToggle => this.setState({ enableRelativeToViewportToggle }) } checked={this.state.enableRelativeToViewportToggle}>
          enableRelativeToViewportToggle
        </CheckBox>
      </div>
      <Window
        defaultPosition={{ top: 50, left: 50 }}
        title="enableRelativeToViewportToggle"
        enableRelativeToViewportToggle={this.state.enableRelativeToViewportToggle}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}
export default () => <App />
Bool
default: true
Whether to use a resize proxy when <Window /> size is changed.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { enableResizeProxy: true, visible: true }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox onChange={ enableResizeProxy => this.setState({ enableResizeProxy }) } checked={this.state.enableResizeProxy}>
          enableResizeProxy
        </CheckBox>
      </div>
      <Window
        defaultPosition={{ top: 50, left: 30 }}
        title="enableResizeProxy"
        enableResizeProxy={this.state.enableResizeProxy}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}
export default () => <App />
React.node
default: undefined
Customize icon rendered inside collapse/expand button when collapsed is true.
Collapse/expand button is rendered when collapsible=true.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

const customExpandIcon = <div>
  <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24">
    <path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z"/>
    <path d="M0-.75h24v24H0z" fill="none"/>
  </svg>
</div>

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        collapsible
        defaultPosition={{ top: 30, left: 30 }}
        title="expand icon"
        defaultCollapsed={true}
        expandIcon={customExpandIcon}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Object
default: undefined
It is a configuration object for handles. At the moment it can specify which handles are rendered outside. For mobile version see mobileHandleConfig.
To specify that only the bottom handle is outside the config is:
{ t: { outside: false }, tl: { outside: false }, tr: { outside: false }, l: { outside: false }, bl: { outside: false }, b: { outside: true }, br: { outside: false }, r: { outside: false } }
This prop is useful when a handle overlaps the toolbar controls, in this case that particular handle can be configured to be rendered outside. This happens on mobile, handles are bigger and overlap the title, a default config is selected based on the titleBarPosition.
outside specified here overwrites handlesOutside
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        defaultPosition={{ top: 30, left: 30 }}
        title="handleConfig"
        handleStyle={{ border: '1px solid #e9580a'}}
        showHandlesOnOver={false}
        handleConfig={{
          t: { outside: true },
          tl: { outside: false },
          tr: { outside: false },
          l: { outside: false },
          bl: { outside: false },
          b: { outside: false },
          br: { outside: false },
          r: { outside: false }
        }}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        In this example, only the top handle is rendered outside.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Bool
default: false
Whether to render resize handles outside or inside the <Window />
See mobileHandlesOutside for mobile version.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { handlesOutside: false, visible: true }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox onChange={ handlesOutside => this.setState({ handlesOutside }) } checked={this.state.handlesOutside}>
          handlesOutside
        </CheckBox>
      </div>
      <Window
        title="handlesOutside"
        handlesOutside={this.state.handlesOutside}
        defaultPosition={{ top: 70, left: 20 }}
        showHandlesOnOver={false}
        handleStyle={{ border: '1px solid #e9580a' }}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Number
default: "5"
Specifies the handle dimension.
For mobile version see mobileHandleWidth
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        defaultPosition={{ top: 30, left: 30 }}
        title="handleWidth"
        showHandlesOnOver={false}
        handleStyle={{ border: '1px solid #e9580a' }}
        handleWidth={20}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
number
default: 300
Duration of hide transition, when visible changes to false.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import Button from '@zippytech/react-toolkit/Button'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/Window/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Button/index.css'
import '@zippytech/react-toolkit/ComboBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { hideTransitionDuration: 300 }
  }

  render() {
    return <div>
      <div>
        <Button
          style={{ marginRight: 5 }}
          onClick={() => {
            this.windowNode.show()
          }}
        >
          trigger show
        </Button>
        <Button onClick={() => {
          this.windowNode.close()
        }}>
          trigger close
        </Button>
      </div>
      <div style={{marginBottom: 20, marginTop: 10}}>
        <ComboBox
          collapseOnSelect
          changeValueOnNavigation
          value={this.state.hideTransitionDuration}
          onChange={hideTransitionDuration => this.setState({hideTransitionDuration})}
          style={{width: 200}}
          dataSource={[{id: 100, label: '100'}, {id: 300, label: '300'}, {id: 500, label: '500'}, {id: 1000, label: '1000'}]}
        />
      </div>
      <Window
        hideTransitionDuration={this.state.hideTransitionDuration}
        ref={ref => this.windowNode = ref}
        title="hideTransitionDuration=100"
        defaultPosition={{ top: 100, left: 240 }}
        defaultSize={{ width: 320 }}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
    </div>
  }
}

export default () => <App />
Bool
default: false
Whether to keep aspect ration while resizing
Aspect ratio is calculated based on initial size or defaultSize
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { keepAspectRatio: false, visible: true }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox onChange={ keepAspectRatio => this.setState({ keepAspectRatio }) } checked={this.state.keepAspectRatio}>
          keepAspectRatio
        </CheckBox>
      </div>
      <Window
        title="keepAspectRatio"
        keepAspectRatio={this.state.keepAspectRatio}
        defaultPosition={{ top: 60, left: 20 }}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Bool
default: true
Whether, when resizing the <Window />, it should keep its centered position. If true, when a resize handle is dragged, the window will also resize in the opposite direction. When false, it will change dimension only in the direction dragged. Also, position can be change if a handle is dragged in a direction used for positioning (For e.g., if default position is { left: 200 } and left handle is dragged 10px, the size of the window changes and new position will be { left: 190 }).
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { keepCenteredOnResize: false, visible: true }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox onChange={ keepCenteredOnResize => this.setState({ keepCenteredOnResize }) } checked={this.state.keepCenteredOnResize}>
          keepCenteredOnResize
        </CheckBox>
      </div>
      <Window
        title="keepCenteredOnResize"
        keepCenteredOnResize={this.state.keepCenteredOnResize}
        defaultPosition={{ top: 50, left: 420 }}
        ref={ref => this.windowNode = ref}
        title="keepCenteredOnResize=true"
        defaultCentered
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
        <Button onClick={() => this.windowNode.center()}>trigger center</Button>
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Bool
default: true
This applies only when enableMoveProxy is true. If keepChildrenOnMove is false, the children in the <Window /> body will not be rendered while the <Window /> is being dragged and only a body proxy will be visible. Otherwise, the children will also be kept, and the body proxy will be rendered on top of them.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      keepChildrenOnMove: true,
      enableMoveProxy: true,
      visible: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.keepChildrenOnMove}
          onChange={ keepChildrenOnMove => this.setState({ keepChildrenOnMove })}
        >keepChildrenOnMove</CheckBox>
      </div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.enableMoveProxy}
          onChange={ enableMoveProxy => this.setState({ enableMoveProxy })}
        >enableMoveProxy</CheckBox>
      </div>
      <Window
        defaultPosition={{ top: 100, left: 20 }}
        title="keepChildrenOnMove"
        keepChildrenOnMove={this.state.keepChildrenOnMove}
        enableMoveProxy={this.state.enableMoveProxy}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}
export default () => <App />
Bool
default: false
Whether to keep position when it doesn't fit inside constrainTo (see constrainOnWindowResize).
If keepPositionOnConstrain=true and constrainOnWindowResize=true, when it doesn't fit in constrainTo, it won't change position, but it will change only size, if keepSizeOnConstrain=false.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { keepPositionOnConstrain: null, visible: true }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox onChange={ keepPositionOnConstrain => this.setState({ keepPositionOnConstrain }) } checked={this.state.keepPositionOnConstrain}>
          keepPositionOnConstrain
        </CheckBox>
      </div>
      <Window
        title="keepPositionOnConstrain"
        defaultPosition={{ top: 60, left: 20 }}
        keepPositionOnConstrain={this.state.keepPositionOnConstrain}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        Resize browser to see effect.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Bool
default: false
Whether to keep size when it doesn't fit inside constrainTo (see constrainOnWindowResize).
If keepSizeOnConstrain=true and constrainOnWindowResize=true, when it doesn't fit in constrainTo, it won't change size, but it will change only position, if keepPositionOnConstrain=false.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { keepSizeOnConstrain: null, visible: true }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox onChange={ keepSizeOnConstrain => this.setState({ keepSizeOnConstrain }) } checked={this.state.keepSizeOnConstrain}>
          keepSizeOnConstrain
        </CheckBox>
      </div>
      <Window
        title="keepSizeOnConstrain"
        defaultPosition={{ top: 60, left: 20 }}
        keepSizeOnConstrain={this.state.keepSizeOnConstrain}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        Resize browser to see effect until the Window's width is smaller than that of the Browser.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
number
default: "10"
Step by which position is incremented when is changed by keyboard.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { keyboardPositionChangeStep: 10, visible: true }
  }

  render() {
    return <div>
      <div style={{marginBottom: 20}}>
        <ComboBox
          collapseOnSelect
          changeValueOnNavigation
          value={this.state.keyboardPositionChangeStep}
          onChange={keyboardPositionChangeStep => this.setState({keyboardPositionChangeStep})}
          style={{width: 200}}
          dataSource={[{id: 5, label: '5'}, {id: 10, label: '10'}, {id: 30, label: '30'}, {id: 40, label: '40'},]}
        />
      </div>
      <Window
        defaultPosition={{ top: 20, left: 250 }}
        title="keyboardPositionChangeStep"
        keepAspectRatio
        keyboardPositionChangeStep={this.state.keyboardPositionChangeStep}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
number
default: "10"
Step by which size is incremented when is changed by keyboard
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { keyboardSizeChangeStep: 10, visible: true }
  }

  render() {
    return <div>
      <div style={{marginBottom: 20}}>
        <ComboBox
          collapseOnSelect
          changeValueOnNavigation
          value={this.state.keyboardSizeChangeStep}
          onChange={keyboardSizeChangeStep => this.setState({keyboardSizeChangeStep})}
          style={{width: 200}}
          dataSource={[{id: 5, label: '5'}, {id: 10, label: '10'}, {id: 30, label: '30'}, {id: 40, label: '40'},]}
        />
      </div>
      <Window
        defaultPosition={{ top: 20, left: 250 }}
        title="keyboardSizeChangeStep"
        keepAspectRatio
        keyboardSizeChangeStep={this.state.keyboardSizeChangeStep}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Bool
default: false
Whether the <Window /> can be maximized. If true, a maximize button will be rendered in toolbar and it will maximize if titlebar is double clicked.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { maximizable: null, visible: true }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox onChange={ maximizable => this.setState({ maximizable }) } checked={this.state.maximizable}>
          maximizable
        </CheckBox>
      </div>
      <Window
        defaultPosition={{ top: 30, left: 30 }}
        title="maximizable"
        centered
        maximizable={this.state.maximizable}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Bool
default: undefined
Whether the <Window /> is maximized.
For uncontrolled behaviour, see defaultMaximized.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      maximized: true,
      visible: true
    }
  }

  render() {
    return <div>
      <Window
        maximizable
        defaultPosition={{ top: 30, left: 30 }}
        title="maximized"
        maximized={this.state.maximized}
        onMaximizeChange={(maximized) => this.setState({ maximized })}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        <p>
          Maximized: <code>{JSON.stringify(this.state.maximized)}</code>.
        </p>
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
React.node
default: undefined
Customize icon rendered inside maximize button when maximized is false.
Maximize button is rendered when maximizable=true.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

const customMaximizeIcon = <div>
  <svg fill="#000000" height="18" viewBox="0 0 24 24" width="18">
    <path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/>
    <path d="M0 0h24v24H0z" fill="none"/>
  </svg>
</div>

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        maximizable
        defaultPosition={{ top: 30, left: 30 }}
        title="maximize icon"
        maximizeIcon={customMaximizeIcon}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Bool
default: true
Whether to toggle maximized when title is double clicked.
Also see relativeToViewportWhenMaximized and onMaximizeChange for maximized change notifications.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { maximizeOnDoubleClick: true, visible: true }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox onChange={ maximizeOnDoubleClick => this.setState({ maximizeOnDoubleClick }) } checked={this.state.maximizeOnDoubleClick}>
          maximizeOnDoubleClick
        </CheckBox>
      </div>
      <Window
        defaultPosition={{ top: 50, left: 30 }}
        title="maximizeOnDoubleClick"
        centered
        defaultMaximized={false}
        onMaximizeChange={(maximized) => {
          this.setState({
            maximized
          })
        }}
        maximizeOnDoubleClick={this.state.maximizeOnDoubleClick}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        <p>
          Maximized: <code>{JSON.stringify(this.state.maximized || false)}</code>.
        </p>
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
String|Number|{width:String|Number, height:String|Number}
default: 200
Used to set maxWidth and maxHegiht.
If is a Number|String, both dimensions will have the same value.
See related minSize.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        defaultPosition={{ top: 30, left: 30 }}
        title="maxSize"
        maxSize={{ width: 400, height: 320 }}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
String|Number|{width:String|Number, height:String|Number}
default: 200
Used to set minWidth and minHeight.
If is a Number|String, both dimensions will have the same value.
See related maxSize.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        defaultPosition={{ top: 30, left: 30 }}
        title="minSize"
        minSize={{ width: 150, height: 200 }}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Object
default: undefined
It is a configuration object for handles. At the moment, it can specify which handles are rendered outside. For desktop version see handleConfig.
To specify that only the bottom handle is outside the config is:
{ t: { outside: false }, tl: { outside: false }, tr: { outside: false }, l: { outside: false }, bl: { outside: false }, b: { outside: true }, br: { outside: false }, r: { outside: false } }
This prop is useful when a handle overlaps the toolbar controls. In this case, that particular handle can be configured to be rendered outside. This happens on mobile, handles are bigger and overlap the title, a default config is selected based on the titleBarPosition.
outside specified here overwrites handlesOutside
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        defaultPosition={{ top: 30, left: 30 }}
        title="mobileHandleConfig"
        handleStyle={{ border: '1px solid #e9580a'}}
        showHandlesOnOver={false}
        mobileHandleConfig={{
          t: { outside: false },
          tl: { outside: false },
          tr: { outside: false },
          l: { outside: false },
          bl: { outside: false },
          b: { outside: true },
          br: { outside: false },
          r: { outside: false }
        }}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        In this example, only the bottom handle is rendered outside.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Bool
default: false
Whether to render resize handles outside or inside the <Window /> on mobile devices.
See handlesOutside for desktop version.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { mobileHandlesOutside: false, visible: true }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.mobileHandlesOutside}
          onChange={mobileHandlesOutside => this.setState({ mobileHandlesOutside })}
        >
          mobileHandlesOutside
        </CheckBox>
      </div>
      <Window
        defaultPosition={{ top: 50, left: 30 }}
        title="mobileHandlesOutside"
        showHandlesOnOver={false}
        handleStyle={{ border: '1px solid #e9580a' }}
        mobileHandlesOutside={this.state.mobileHandlesOutside}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Number
default: "30"
Specifies the handle dimension for mobile devices.
See handleWidth for desktop version.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        defaultPosition={{ top: 30, left: 30 }}
        title="mobileHandleWidth"
        showHandlesOnOver={false}
        handleStyle={{ border: '1px solid #e9580a' }}
        mobileHandleWidth={35}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Bool
default: false
If true, <Window /> will be rendered inside a wrapper that occupies the entire available space and has a semitransparent background.
If relativeToViewport=true it will occupy the entire viewport, if relativeToViewport=false it will cover the element to which it is relative.
If <Window /> has relativeToViewport=true and is rendered inside an element that has a CSS transform applied, it will be relative to this element. This is the case in this example.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { modal: false, visible: true }
  }

  render() {
    return <div>
      <Window
        defaultPosition={{ top: 50, left: 30 }}
        title="modal"
        centered
        modal={this.state.modal}
        relativeToViewport={false}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        <div style={{ marginBottom: 20 }}>
          <CheckBox onChange={ modal => this.setState({ modal }) } checked={this.state.modal}>
            modal
          </CheckBox>
        </div>
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
React.node
default: undefined
Customize icon that is rendered inside the pin button when relativeToViewport=false
See pinUpIcon to customize icon when relativeToViewport=true.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

const customPinDownIcon = <div>
  <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24">
    <path d="M7 10l5 5 5-5z"/>
    <path d="M0 0h24v24H0z" fill="none"/>
  </svg>
</div>

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        enableRelativeToViewportToggle
        defaultPosition={{ top: 30, left: 30 }}
        title="pinDownIcon"
        pinDownIcon={customPinDownIcon}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />

React.node
default: undefined
Customize icon that is rendered inside pin button when relativeToViewport=true
See pinDownIcon to customize icon when relativeToViewport=false.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

const customPinUpIcon = <div>
  <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24">
    <path d="M7 14l5-5 5 5z"/>
    <path d="M0 0h24v24H0z" fill="none"/>
  </svg>
</div>

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        enableRelativeToViewportToggle
        defaultPosition={{ top: 30, left: 30 }}
        title="pinUpIcon"
        pinUpIcon={customPinUpIcon}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
{left?, right?, top?, bottom?}
default: undefined
Specifies the position of the <Window />. If not specified, when position change, starts computed style will be used as initial position.
<Window /> can be positioned with any of the four sides (top, left, right, bottom). Only positions set in position/defaultPositionwill be used to position the <Window />. If positions for one direction are not set they will default to left and right.
For uncontrolled behaviour, see defaultPosition.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      position: { top: '50px', left: '50px' },
      visible: true
    }
  }

  render() {
    return <div>
      <Window
        title="position"
        defaultSize={{ width: 400, height: 300 }}
        position={this.state.position}
        onPositionChange={(position) => this.setState({ position })}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        <div style={{ marginBottom: 20 }}>
          The position is: <code>{JSON.stringify(this.state.position)}</code>.
        </div>
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Bool
default: undefined
If true, <Window /> will have position=fixed and if false, it will have position=absolute.
For uncontrolled behaviour, see defaultRelativeToViewport. Also see related relativeToViewportWhenMaximized
When the <Window /> component is relativeToViewport, so position: fixed is applied, it still might not be relative to viewport 0,0 coords if the window has a parent with CSS transform specified. This is because the transform creates a new stacking context with a new local coordinate system, as per W3C spec. Also see Eric Meyer's article on Un-fixing Fixed Elements with CSS Transforms.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { relativeToViewport: null, visible: true }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.relativeToViewport}
          onChange={ relativeToViewport => this.setState({ relativeToViewport })}
        >
          relativeToViewport
        </CheckBox>
      </div>
      <Window
        defaultPosition={{ top: 50, left: 20 }}
        title="relativeToViewport"
        relativeToViewport={this.state.relativeToViewport}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}
export default () => <App />
If true <Window /> will be relativeToViewport when maximized.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: true,
      relativeToViewportWhenMaximized: true,
      relativeToViewport: false
    }
  }

  render() {
    return <div style={{ position: 'relative', width: '100%', minHeight: 400, border: '1px dashed blue' }}>
      <Window
        relativeToViewportWhenMaximized={this.state.relativeToViewportWhenMaximized}
        relativeToViewport={this.state.relativeToViewport}
        visible={this.state.visible}

        defaultPosition={{ top: 100, left: 30 }}
        title="Window - relativeToViewportWhenMaximized example"
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}

      <div style={{ marginBottom: 20}}>
        <CheckBox
          checked={this.state.relativeToViewportWhenMaximized}
          onChange={(relativeToViewportWhenMaximized) => {
            this.setState({ relativeToViewportWhenMaximized })
          }}
        >
          Relative to viewport when maximized
        </CheckBox>
      </div>

      <div style={{ marginBottom: 20}}>
        <CheckBox
          checked={this.state.relativeToViewport}
          onChange={(relativeToViewport) => {
            this.setState({ relativeToViewport })
          }}
        >
          Relative to viewport
        </CheckBox>
      </div>
    </div>
  }
}

export default () => <App />
Fn(props): React.node
default: undefined
Can be used to render different icons/JSX in the title bar, after the title.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        defaultPosition={{ top: 30, left: 30 }}
        title="renderAfterTitle"
        renderAfterTitle={() => <strong key="after_title" style={{ display: 'flex', paddingLeft: 5, alignItems: 'center' }}>- Info </strong>}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Fn(props): React.node
default: undefined
Can be used to render different icons/JSX in the title bar, before the title.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        defaultPosition={{ top: 30, left: 30 }}
        title="renderBeforeTitle"
        renderBeforeTitle={() => <strong key="before_title" style={{ display: 'flex', paddingLeft: 5, alignItems: 'center' }}>Info: </strong>}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Fn(domProps, props): React.Node
default: undefined
Customize titleBar. If false, titleBar is not rendered.
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 Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div style={{ position: 'relative' }}>
      <Window
        title="renderBody"
        defaultPosition={{ top: 30, left: 30 }}
        renderBody={(domProps, props) => {
          return <div
            {...domProps}
            style={
              Object.assign(
              domProps.style,
              {
                background: 'red',
                color: '#fff'
              })
            }
          >
            <strong style={{ display: 'block', width: 30, padding: 10 }}>Alert:</strong>
            {domProps.children}
          </div>
        }}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Fn({domProps:Object, close:Fn, props:Object}): React.Node
default: undefined
Used to customize close button.
To enable close button, closeable must be true.
To customize close icon see closeIcon.
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 Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

const customCloseButton = <div>
  <svg fill="#000000" height="18" viewBox="0 0 24 24" width="18">
    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
    <path d="M0 0h24v24H0z" fill="none"/>
  </svg>
</div>

function renderCloseButtonMutatesDomProps({domProps, close, props}) {
  domProps.children = customCloseButton
  domProps.style = { width: 48 }
  domProps.onClick = () => {
    console.log('close')
    close()
  }
}

function renderCloseButtonReturnsNode({domProps, close, props}) {
  return <span {...domProps} style={{ width: 60 }}>
    close {domProps.children}
  </span>
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { firstWin: true, secondWin: true }
  }

  render() {
    return <div style={{ position: 'relative' }}>
      <Window
        closeable
        defaultPosition={{ top: 50, left: 20 }}
        defaultSize={{ width: 340 }}
        title="render close button"
        renderCloseButton={renderCloseButtonMutatesDomProps}
        visible={this.state.firstWin}
        onClose={() => this.setState({ firstWin: false })}
      >
        In this example, the close button is customized by modifying the
        default implementation by mutating domProps.
      </Window>
      <Window
        closeable
        defaultPosition={{ top: 270, left: 20 }}
        defaultSize={{ width: 380 }}
        title="render close button"
        renderCloseButton={renderCloseButtonReturnsNode}
        visible={this.state.secondWin}
        onClose={() => this.setState({ secondWin: false })}
      >
        In this example, the close button is customized by returning JSX.
      </Window>
      {!this.state.firstWin && <Button
        onClick={() => this.setState({ firstWin: true })}
      >Show the first Window</Button>}
      {!this.state.secondWin && <Button
        onClick={() => this.setState({ secondWin: true })}
      >Show the second Window</Button>}
    </div>
  }
}

export default () => <App />
Fn({domProps:Object, collapsed:Bool, props:Object, collapse:Fn, expand: Fn}): React.Node
default: undefined
Used to customize collapse button.
To enable collapse button, collapsible must be true.
To customize collapse/expand icons see collapseIcon and expandIcon.
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 Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

function renderCollapseButtonWithMutation({ domProps, collapsed, expand, collapse }) {
  domProps.children = collapsed ? 'ex' : 'col'
  domProps.style = { width: 48 }
  domProps.onClick = () => {
    console.log('collapsed will be ', !collapsed)
    if (collapsed) {
      expand()
    } else {
      collapse()
    }
  }
}

function renderCollapseButtonReturnsNode({  domProps, collapsed, expand, collapse }) {
  return <span {...domProps} style={{ width: 60, color: collapsed ? 'red' : 'blue' }}>
    {collapsed ? 'ex' : 'col'} {domProps.children}
  </span>
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { firstWin: true, secondWin: true }
  }

  render() {
    return <div>
      <Window
        collapsible
        defaultPosition={{ top: 70, left: 20 }}
        title="render collapse button"
        renderCollapseButton={renderCollapseButtonWithMutation}
        visible={this.state.firstWin}
        onClose={() => this.setState({ firstWin: false })}
      >
        In this example, the collapse button is customized by modifying the
        default implementation by mutating domProps.
      </Window>
      <Window
        collapsible
        defaultPosition={{ top: 290, left: 20 }}
        title="render collapse button"
        renderCollapseButton={renderCollapseButtonReturnsNode}
        visible={this.state.secondWin}
        onClose={() => this.setState({ secondWin: false })}
      >
        In this example, the collapse button is customized by returning JSX.
      </Window>
      {!this.state.firstWin && <Button
        onClick={() => this.setState({ firstWin: true })}
      >Show the first Window</Button>}
      {!this.state.secondWin && <Button
        onClick={() => this.setState({ secondWin: true })}
      >Show the second Window</Button>}
    </div>
  }
}

export default () => <App />
Fn(props): React.node
default: undefined
Render content after body.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        defaultPosition={{ top: 30, left: 30 }}
        title="renderFooter"
        renderFooter={() => <div style={{
          display: 'flex',
          padding: 10,
          alignItems: 'flex-end',
          borderTop: '2px solid rgb(21, 101, 192)'
        }}>
          <Button>save</Button>
        </div>}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Fn({domProps:Object, maximized:Bool, props:Object, toggleMaximized: Fn, restore:Fn, maximize: Fn}): React.Node
default: undefined
Used to customize maximize button.
To enable maximize button maximizable must be true.
To customize maximize/restore icons see maximizeIcon and restoreIcon.
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 Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

function renderMaximizeButtonWithMutation({domProps, maximized, toggleMaximized, restore, maximize}) {
  domProps.children = maximized ? 'res' : 'max'
  domProps.style = { width: 48 }
  domProps.onClick = () => {
    toggleMaximized()
  }
}

function renderMaximizeButtonReturnsNode({domProps, maximized, toggleMaximized, restore, maximize}) {
  return <span {...domProps} style={{ width: 60, color: maximized ? 'red' : 'blue' }}>
    {maximized ? 'res' : 'max'} {domProps.children}
  </span>
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { firstWin: true, secondWin: true }
  }

  render() {
    return <div>
      <Window
        maximizable
        defaultPosition={{ top: 70, left: 20 }}
        title="render maximize button"
        renderMaximizeButton={renderMaximizeButtonWithMutation}
        visible={this.state.firstWin}
        onClose={() => this.setState({ firstWin: false })}
      >
        In this example, the maximize button is customized by modifying the
        default implementation by mutating domProps.
      </Window>
      <Window
        maximizable
        defaultPosition={{ top: 290, left: 20 }}
        title="render maximize button"
        renderMaximizeButton={renderMaximizeButtonReturnsNode}
        visible={this.state.secondWin}
        onClose={() => this.setState({ secondWin: false })}
      >
        In this example, the maximize button is customized by returning JSX.
      </Window>
      {!this.state.firstWin && <Button
        onClick={() => this.setState({ firstWin: true })}
      >Show the first Window</Button>}
      {!this.state.secondWin && <Button
        onClick={() => this.setState({ secondWin: true })}
      >Show the second Window</Button>}
    </div>
  }
}

export default () => <App />
Bool
default: false
When renderNullWhenInvisible=true and visible is false, the component will return null from render.
Fn({domProps:Object, relativeToViewport:Bool, toggleRelativeToViewport:Fn, props:Object}): React.Node
default: undefined
Used to customize pin button, the button that toggles the value of relativeToViewport.
Pin button to be rendered enableRelativeToViewportToggle must be true.
To customize pin icon see pinUpIcon and pinDownIcon.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

function renderPinButtonMutatesDomProps({domProps, relativeToViewport, toggleRelativeToViewport}) {
  domProps.children = relativeToViewport ? 'up' : 'down'
  domProps.style = { width: 48 }
  domProps.onClick = () => {
    console.log('relativeToViewport will be', !relativeToViewport)
    toggleRelativeToViewport()
  }
}

function renderPinButtonReturnsNode({domProps, relativeToViewport, onClick}) {
  return <span {...domProps} style={{ width: 40 }}>
    {relativeToViewport ? 'd' : 'u'} - {domProps.children}
  </span>
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { firstWin: true, secondWin: true }
  }

  render() {
    return <div style={{ position: 'relative' }}>
      <Window
        enableRelativeToViewportToggle
        defaultPosition={{ top: 70, left: 20 }}
        defaultSize={{ width: 350 }}
        title="render custom pin button"
        renderPinButton={renderPinButtonMutatesDomProps}
        visible={this.state.firstWin}
        onClose={() => this.setState({ firstWin: false })}
      >
        In this example, the pin button is customized by modifying the
        default implementation by mutating domProps.
      </Window>
      <Window
        enableRelativeToViewportToggle
        defaultPosition={{ top: 290, left: 20 }}
        title="render custom pin button"
        renderPinButton={renderPinButtonReturnsNode}
        visible={this.state.secondWin}
        onClose={() => this.setState({ secondWin: false })}
      >
        In this example, the pin button is customized by returning JSX.
      </Window>
      {!this.state.firstWin && <Button
        onClick={() => this.setState({ firstWin: true })}
      >Show the first Window</Button>}
      {!this.state.secondWin && <Button
        onClick={() => this.setState({ secondWin: true })}
      >Show the second Window</Button>}
    </div>
  }
}

export default () => <App />
Fn({domProps:Object, handle:String, props:Object}): React.Node|null|undefined
default: undefined
Custom render for resize handles.
handle param is the name of the handle, possible names are:
  • l - left
  • r - right
  • t - top
  • b - bottom
  • bl - bottom-left
  • br - bottom-right
  • tl - top-left
  • tr - top-right
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 Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

function renderHandleWithMutation({domProps, handle, props}) {
  if (handle === 'l') {
    domProps.style = Object.assign({}, domProps.style, { border: '1px solid red' })
  }
}

function renderHandleReturnsNode({domProps, handle, props}) {
  if (handle === 'b') {
    const style = Object.assign({}, domProps.style, { border: '1px solid red' })
    return <span {...domProps} style={style} />
  }
  if (handle === 'l') {
    return null
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { firstWin: true, secondWin: true }
  }

  render() {
    return <div style={{ position: 'relative' }}>
      <Window
        handleStyle={{ border: '1px solid green' }}
        defaultPosition={{ top: 70, left: 20 }}
        title="render resize handle"
        renderResizeHandle={renderHandleWithMutation}
        showHandlesOnOver={false}
        visible={this.state.firstWin}
        onClose={() => this.setState({ firstWin: false })}
      >
        In this example, the the left handle has a red border.
      </Window>
      <Window
        handleStyle={{ border: '1px solid green' }}
        defaultPosition={{ top: 290, left: 20 }}
        title="render resize handle"
        renderResizeHandle={renderHandleReturnsNode}
        showHandlesOnOver={false}
        visible={this.state.secondWin}
        onClose={() => this.setState({ secondWin: false })}
      >
        In this example, the bottom handle has a red border and the left handle is not rendered.
      </Window>
      {!this.state.firstWin && <Button
        onClick={() => this.setState({ firstWin: true })}
      >Show the first Window</Button>}
      {!this.state.secondWin && <Button
        onClick={() => this.setState({ secondWin: true })}
      >Show the second Window</Button>}
    </div>
  }
}

export default () => <App />
(domProps, props): React.Node|Bool
default: undefined
Customize titleBar. If false, titleBar is not rendered.
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 Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div style={{ position: 'relative' }}>
      <Window
        title="renderTitleBar"
        defaultPosition={{ top: 30, left: 30 }}
        renderTitleBar={(domProps, props) => {
          return <div
            {...domProps}
            style={
              Object.assign(
              domProps.style,
              {
                background: 'red'
              })
            }
          >
            <strong style={{ width: 45, padding: 10 }}>Alert:</strong>
            {domProps.children}
          </div>
        }}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Fn(domProps, props)
default: undefined
Customize toolBar. If false, toolBar is not rendered.
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 Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        title="renderToolBar"
        size={{width: 500}}
        defaultPosition={{ top: 50, left: 30 }}
        renderToolBar={(domProps, props) => {
          return <div
            {...domProps}
            style={
              Object.assign(
              {},
              domProps.style,
              {
                borderLeft: '1px solid #333',
              })
            }
          >
            <strong style={{ width: 63, padding: 10 }}>Toolbar:</strong>
            {domProps.children}
          </div>
        }}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Bool|{width: Bool, height: Bool}
default: true
Controls which resize handlers are rendered. If true, all handlers are rendered. If false, none are rendered.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { resizable: true, visible: true }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox onChange={ resizable => this.setState({ resizable }) } checked={this.state.resizable}>
          resizable
        </CheckBox>
      </div>
      <Window
        defaultPosition={{ top: 50, left: 20 }}
        title="resizable"
        resizable={this.state.resizable}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Using an object it can be specified which dimensions are allowed to be changed.
resizable and resizeHandles interact with each other to determine what handlers are rendered. Both their rules must be true for a handle to be rendered.
E.g. resizable={ height: true } and resizeHandles={['r', 't']}, only `top` resize handler will be rendered, because only top is valid for both props.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { firstWin: true, secondWin: true }
  }

  render() {
    return <div>
      <Window
        showHandlesOnOver={false}
        defaultPosition={{ top: 70, left: 20 }}
        title="resizable - { height: true }"
        resizable={{ height: true }}
        handleStyle={{ border: '1px solid blue' }}
        visible={this.state.firstWin}
        onClose={() => this.setState({ firstWin: false })}
      >
        In this example, a border is added on resize handles to be visible.
        Also showHandlesOnOver is set to false so they are always rendered, and not only on mouseover.
      </Window>
      <Window
        showHandlesOnOver={false}
        defaultSize={{ width: 340 }}
        defaultPosition={{ top: 290, left: 20 }}
        title="resize handlers - right, top"
        resizeHandles={['r', 't']}
        handleStyle={{ border: '1px solid blue' }}
        visible={this.state.secondWin}
        onClose={() => this.setState({ secondWin: false })}
      >
        This is the example specified in the note, resizable={"{ height: true }"} and resizeHandles={"['r', 't']"}, only top handle is rendered.
      </Window>
      {!this.state.firstWin && <Button
        onClick={() => this.setState({ firstWin: true })}
      >Show the first Window</Button>}
      {!this.state.secondWin && <Button
        onClick={() => this.setState({ secondWin: true })}
      >Show the second Window</Button>}
    </div>
  }
}

export default () => <App />
Bool/String[]
default: true
Controls which resize handlers are rendered. If true, all handlers are rendered. If false, none are rendered.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { resizeHandles: true, visible: true }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox onChange={ resizeHandles => this.setState({ resizeHandles }) } checked={this.state.resizeHandles}>
          resizeHandles
        </CheckBox>
      </div>
      <Window
        defaultPosition={{ top: 30, left: 30 }}
        title="resizeHandles"
        centered
        resizeHandles={this.state.resizeHandles}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
To render specific handlers use an array with their names. Possible handle names are:
  • l - left
  • r - right
  • t - top
  • b - bottom
  • bl - bottom-left
  • br - bottom-right
  • tl - top-left
  • tr - top-right
resizable and resizeHandles interact with each other to determine what handlers are rendered. Both their rules must be true for a handle to be rendered.
E.g. resizable={ height: true } and resizeHandles={['r', 't']}, only `top` resize handler will be rendered, because only top is valid for both props.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { firstWin: true, secondWin: true }
  }

  render() {
    return <div>
      <Window
        showHandlesOnOver={false}
        defaultPosition={{ top: 70, left: 20 }}
        title="resize handlers - right, top-left and bottom"
        resizeHandles={['r', 'tl', 'b']}
        handleStyle={{ border: '1px solid blue' }}
        visible={this.state.firstWin}
        onClose={() => this.setState({ firstWin: false })}
      >
        In this example, a border is added on resize handles to be visible.
        Also showHandlesOnOver is set to false so they are always rendered, and not only on mouseover.
      </Window>
      <Window
        showHandlesOnOver={false}
        defaultPosition={{ top: 290, left: 20 }}
        defaultSize={{ width: 340 }}
        title="resize handlers - right, top"
        resizeHandles={['r', 't']}
        handleStyle={{ border: '1px solid blue' }}
        visible={this.state.secondWin}
        onClose={() => this.setState({ secondWin: false })}
      >
        This is the example specified in the note, resizable={"{ height: true }"} and resizeHandles={"['r', 't']"}, only top handle is rendered.
      </Window>
      {!this.state.firstWin && <Button
        onClick={() => this.setState({ firstWin: true })}
      >Show the first Window</Button>}
      {!this.state.secondWin && <Button
        onClick={() => this.setState({ secondWin: true })}
      >Show the second Window</Button>}
    </div>
  }
}

export default () => <App />
React.node
default: undefined
Customize icon rendered inside maximize button when maximized is true. .
Maximize button is rendered when maximizable=true.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

const customRestoreIcon = <div>
  <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24">
    <path d="M0 0h24v24H0V0z" fill="none"/>
    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z"/>
  </svg>
</div>

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        maximizable
        defaultPosition={{ top: 30, left: 30 }}
        title="restore icon"
        restoreIcon={customRestoreIcon}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Bool
default: false
Whether to use direction: rtl.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { rtl: false, visible: true }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox onChange={ rtl => this.setState({ rtl }) } checked={this.state.rtl}>
          rtl
        </CheckBox>
      </div>
      <Window
        defaultPosition={{ top: 50, left: 30 }}
        title="rtl"
        rtl={this.state.rtl}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}
export default () => <App />
Bool
default: undefined
If false, resize handles are rendered all the time, if true, they are rendered only when mouse is over<Window />.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { showHandlesOnOver: false, visible: true }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox onChange={ showHandlesOnOver => this.setState({ showHandlesOnOver }) } checked={this.state.showHandlesOnOver}>
          showHandlesOnOver
        </CheckBox>
      </div>
      <Window
        defaultPosition={{ top: 50, left: 30 }}
        title="showHandlesOnOver"
        showHandlesOnOver={this.state.showHandlesOnOver}
        handleStyle={{ border: '1px solid blue '}}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
number
default: 300
Duration of show transition, when visible changes to true.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import Button from '@zippytech/react-toolkit/Button'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/Window/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Button/index.css'
import '@zippytech/react-toolkit/ComboBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { showTransitionDuration: 300 }
  }

  render() {
    return <div>
      <div>
        <Button
          style={{ marginRight: 5 }}
          onClick={() => {
            this.windowNode.show()
          }}
        >
          trigger show
        </Button>
        <Button onClick={() => {
          this.windowNode.close()
        }}>
          trigger close
        </Button>
      </div>
      <div style={{marginBottom: 20, marginTop: 10}}>
        <ComboBox
          collapseOnSelect
          changeValueOnNavigation
          value={this.state.showTransitionDuration}
          onChange={showTransitionDuration => this.setState({showTransitionDuration})}
          style={{width: 200}}
          dataSource={[{id: 100, label: '100'}, {id: 300, label: '300'}, {id: 500, label: '500'}, {id: 1000, label: '1000'}]}
        />
      </div>
      <Window
        showTransitionDuration={this.state.showTransitionDuration}
        ref={ref => this.windowNode = ref}
        title="showTransitionDuration"
        defaultPosition={{ top: 60, left: 240 }}
        defaultSize={{ width: 320 }}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
    </div>
  }
}

export default () => <App />
Number|{width: Number, height: number}
default: undefined
Specifies Window width and height. If it is a number, both dimensions have the same value.
For uncontrolled behaviour, see defaultSize.
See related onResize callback prop.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      size: { width: 300, height: 100 },
      visible: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        The Window has width: {this.state.size.width} and height: {this.state.size.height}.
      </div>
      <Window
        defaultPosition={{ top: 60, left: 20 }}
        title="size"
        size={this.state.size}
        onResize={(size) => this.setState({ size })}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
React.node
default: undefined
Specifies the contents of the title.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        defaultPosition={{ top: 30, left: 30 }}
        title={<strong style={{ color: '#f52220 '}}>Custom Title</strong>}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
start|center|end
default: "start"
Specifies text-align on title.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { titleAlign: 'start', visible: true }
  }

  render() {
    return <div>
      <div style={{marginBottom: 20}}>
        <ComboBox
          collapseOnSelect
          changeValueOnNavigation
          value={this.state.titleAlign}
          onChange={titleAlign => this.setState({titleAlign})}
          style={{width: 200}}
          dataSource={[{id: 'start', label: 'start'}, {id: 'center', label: 'center'}, {id: 'end', label: 'end'}]}
        />
      </div>
      <Window
        title="titleAlign"
        centered
        titleAlign={this.state.titleAlign}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
top|left|right|bottom
default: "top"
Specifies position of the titlebar.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { titleBarPosition: 'top', visible: true }
  }

  render() {
    return <div>
      <div style={{marginBottom: 20}}>
        <ComboBox
          collapseOnSelect
          changeValueOnNavigation
          value={this.state.titleBarPosition}
          onChange={titleBarPosition => this.setState({titleBarPosition})}
          style={{width: 200}}
          dataSource={[{id: 'top', label: 'top'}, {id: 'left', label: 'left'}, {id: 'bottom', label: 'bottom'}, {id: 'right', label: 'right'}]}
        />
      </div>
      <Window
        title="titleBarPosition"
        centered
        titleBarPosition={this.state.titleBarPosition}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
start|end
default: "start"
Specifies the position of the title. This is influenced by rtl.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { titlePosition: 'start', visible: true }
  }

  render() {
    return <div>
      <div style={{marginBottom: 20}}>
        <ComboBox
          collapseOnSelect
          changeValueOnNavigation
          value={this.state.titlePosition}
          onChange={titlePosition => this.setState({titlePosition})}
          style={{width: 200}}
          dataSource={[{id: 'start', label: 'start'}, {id: 'end', label: 'end'}]}
        />
      </div>
      <Window
        title="titlePosition"
        centered
        titlePosition={this.state.titlePosition}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
90|-90
default: "90"
Titlebar rotation when titleBarPosition=left|right.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { titleRotate: 90, visible: true }
  }

  render() {
    return <div>
      <div style={{marginBottom: 20}}>
        <ComboBox
          collapseOnSelect
          changeValueOnNavigation
          value={this.state.titleRotate}
          onChange={titleRotate => this.setState({titleRotate})}
          style={{width: 200}}
          dataSource={[{id: 90, label: '90'}, {id: -90, label: '-90'}]}
        />
      </div>
      <Window
        title="titleRotate"
        titleBarPosition="left"
        centered
        titleRotate={this.state.titleRotate}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
React.Node
default: undefined
Introduce new buttons into toolbar.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import Button from '@zippytech/react-toolkit/Button'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Window/index.css'
import '@zippytech/react-toolkit/Button/index.css'
import '@zippytech/react-toolkit/Notification/index.css'
import Icon from './icons'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        title="toolbar buttons"
        defaultPosition={{ top: 30, left: 30 }}
        toolbarButtons={[
          <Button onClick={() => zippy.notification.first.addNotification({
            content: 'toolbar button click',
            style: { marginTop: 56 }
          })}>
            <Icon size={18} type="save" />
          </Button>
        ]}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      <NotificationBoard id="first" />
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Bool
default: true
Whether to animate opacity when <Window /> changes visible.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/Window/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { transition: true }
  }

  render() {
    return <div>
      <div>
        <CheckBox
          checked={this.state.visible} style={{ margin: 5 }}
          onChange={(checked) => this.setState({ visible: checked })}>
          visible
        </CheckBox>
      </div>
      <div>
        <CheckBox
          checked={this.state.transition} style={{ margin: 5 }}
          onChange={(checked) => this.setState({ transition: checked })}>
          transition
        </CheckBox>
      </div>
      <Window
        title="visible"
        hideTransitionDuration={1000}
        defaultPosition={{ top: 100, left: 20 }}
        transition={this.state.transition}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
    </div>
  }
}

export default () => <App />
String
default: undefined
If specified it will load the url inside an iframe.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        url="https://zippytech.io"
        defaultPosition={{ top: '5%', left: '5%' }}
        defaultSize={{ width: '90%', height: '90%' }}
        title="Zippytech.io website"
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      />
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
When true, <Window /> size and position will be changed by direct DOM manipulation. This is done to increase performance, it triggers only one state change per transition. When size/position stop dragging, onPositionChange/onResize will be called, and if uncontrolled, it will trigger a state change.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { useDirectDomPositionSizeChange: true, visible: true }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox onChange={ useDirectDomPositionSizeChange => this.setState({ useDirectDomPositionSizeChange }) } checked={this.state.useDirectDomPositionSizeChange}>
          useDirectDomPositionSizeChange
        </CheckBox>
      </div>
      <Window
        defaultPosition={{ top: 50, left: 20 }}
        title="useDirectDomPositionSizeChange"
        useDirectDomPositionSizeChange={this.state.useDirectDomPositionSizeChange}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Bool
default: "undefined"
Whether the <Window /> is visible. If true, zippytech-toolkit-react-window--invisible className will be added.
For uncontrolled behaviour, see defaultVisible.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/Window/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true, visible: true }
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.visible} style={{ margin: 5 }}
          onChange={(checked) => this.setState({ visible: checked })}>
          visible
        </CheckBox>
      </div>
      <Window
        title="visible"
        defaultPosition={{ top: 70, left: 20 }}
        visible={this.state.visible}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
    </div>
  }
}

export default () => <App />
Fn()
default: undefined
Called when <Window /> loses focus.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        defaultPosition={{ top: 30, left: 30 }}
        title="onBlur"
        onBlur={() => zippy.notification.first.addNotification({
          content: 'onBlur called',
          style: { marginTop: 56 }
        })}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        Click Window to focus and then click outside to lose <code>focus</code> and trigger <code>onBlur</code>
      </Window>
      <NotificationBoard id="first" />
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Fn(centered: bool)
default: undefined
Called when centered changes. centered changes when center method is called or when it is centered and size/position changes.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Window/index.css'
import '@zippytech/react-toolkit/Button/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { visible: true }
  }

  render() {
    return <div>
      <div>
        <Button onClick={() => this.windowNode.center()}>trigger center</Button>
        {!this.state.visible && <Button
          onClick={() => this.setState({ visible: true })}
        >Show the Window</Button>}
      </div>
      <Window
        ref={ref => this.windowNode = ref}
        title="onCenteredChange"
        defaultCentered
        defaultPosition={{ top: 30, left: 30 }}
          onCenteredChange={(centered) => zippy.notification.first.addNotification({
            content: 'centered is: ' + centered,
            style: { marginTop: 56 }
          })
        }
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      <NotificationBoard id="first" />
    </div>
  }
}

export default () => <App />
Fn()
default: undefined
Called when close is called.
onClose is called when close button is clicked, Escape key is pressed and <Window /> has focus or when close method is called.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        defaultPosition={{ top: 70, left: 20 }}
        title="onClose"
        onClose={() => {zippy.notification.first.addNotification({
          content: 'onClose called',
          style: { marginTop: 56 }
          })
          this.setState({ visible: false })
        }}
        visible={this.state.visible}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      <NotificationBoard id="first" />
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Fn()
default: undefined
Called when collapsed changes from false to true.
See related onCollapseChange and onExpand.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        collapsible
        defaultPosition={{ top: 30, left: 30 }}
        title="onCollapse"
        onCollapse={() => zippy.notification.first.addNotification({ content: 'onCollapse called', style: { marginTop: 56 } })}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      <NotificationBoard id="first" />
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Fn(collapsed)
default: undefined
Called when collapsed changes.
See related onCollapse and onExpand.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        collapsible
        defaultPosition={{ top: 30, left: 30 }}
        title="onCollapseChange"
        onCollapseChange={(collapsed) => zippy.notification.first.addNotification({
          content: 'collapsed is ' + (collapsed ? 'true' : 'false'),
          style: { marginTop: 56 }
        })}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      <NotificationBoard id="first" />
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Fn()
default: undefined
Called when collapsed changes from true to false.
See related onCollapse and onCollapseChange.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        collapsible
        defaultPosition={{ top: 30, left: 30 }}
        title="onExpand"
        onExpand={() => zippy.notification.first.addNotification({ content: 'onExpand called', style: { marginTop: 56 } })}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      <NotificationBoard id="first" />
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Fn()
default: undefined
Called when <Window /> receives focus.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        defaultPosition={{ top: 30, left: 30 }}
        title="onFocus"
        onFocus={() => zippy.notification.first.addNotification({
          content: 'onFocus called',
          style: { marginTop: 56 }
        })}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        Click Window to focus and trigger <code>onFocus</code>
      </Window>
      <NotificationBoard id="first" />
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Fn()
default: undefined
Called when maximized changes from false to true.
When maximized changes from true to false, onRestore is called.
See related onMaximizeChange and onRestore.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        maximizable
        defaultPosition={{ top: 30, left: 30 }}
        title="onMaximize"
        onMaximize={() => zippy.notification.first.addNotification({
          content: 'onMaximize called',
          style: { marginTop: 56 }
        })}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      <NotificationBoard id="first" />
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Fn(maximized: Bool)
default: undefined
Called when maximized changed.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

const maximizeStyle = {
  fontWeight: 'bold',
  color: 'red'
}

const minimizeStyle = {
  fontWight: 'bold',
  color: 'green'
}

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      maximized: false,
      visible: true
    }
  }

  render() {
    return <div>
      <Window
        maximizable
        defaultPosition={{ top: 30, left: 30 }}
        title="onMaximizeChange"
        maximized={this.state.maximized}
        onMaximizeChange={(maximized) => this.setState({ maximized })}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        <p>
          The window is {this.state.maximized ?
            <span style={maximizeStyle}>maximized</span> :
            <span style={minimizeStyle}>unmaximized</span>
          }.
        </p>
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Fn(Fn({top?, left?, bottom?, right?}))
default: undefined
Called when <Window /> starts moving.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        defaultPosition={{ top: 50, left: 30 }}
        title="onMoveStart"
          onMoveStart={(position) => zippy.notification.first.addNotification({
            content: 'window started moving',
            style: { marginTop: 56 }
          })
        }
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      <NotificationBoard id="first" />
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Fn(Fn({top?, left?, bottom?, right?}))
default: undefined
Called when <Window /> ends moving.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        defaultPosition={{ top: 50, left: 30 }}
        title="onMoveStop"
        onMoveStop={(position) => zippy.notification.first.addNotification({
            content: <span>
              Window stoped moving. New position: <code>{JSON.stringify(position)}</code>
            </span>,
            style: { marginTop: 56 }
          })
        }
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      <NotificationBoard id="first" />
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Fn({top?, left?, bottom?, right?})
default: undefined
Called when <Window /> is moved whether by dragging, moving with arrows or by resizing.
If useDirectDomPositionSizeChange="true", onPositionChange will be called only when dragging stops.
position might change during resize , if it is resized in the direction in which it is positioned. E.g. if <Window /> is positioned top-left and it is resized by dragging the top handle up, the position will decrease so it will keep its relative position.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        defaultPosition={{ top: 30, left: 30 }}
        title="onPositionChange"
          onPositionChange={(position) => zippy.notification.first.addNotification({
            content: <span>new position: <code>{JSON.stringify(position)}</code></span>,
            style: { marginTop: 56 }
          })
        }
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      <NotificationBoard id="first" />
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Fn(relativeToViewport:Bool)
default: undefined
Called when relativeToViewport changes by clicking on pin button.
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 Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        enableRelativeToViewportToggle
        defaultPosition={{ top: 30, left: 30 }}
        title="onRelativeToViewportChange"
          onRelativeToViewportChange={() => zippy.notification.first.addNotification({
            content: 'onRelativeToViewportChange called',
            style: { marginTop: 56 }
          })
        }
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        Click the pin button to change relative to vieport.
      </Window>
      <NotificationBoard id="first" />
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Fn(size: {width, height})
default: undefined
Called when <Window /> changes size.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      size: { width: 300, height: 100 },
      visible: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        The Window size is: {JSON.stringify(this.state.size)}
      </div>
      <Window
        defaultPosition={{ top: 60, left: 20 }}
        title="onResize"
        size={this.state.size}
        onResize={(size) => this.setState({ size })}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Fn(size: {width, height})
default: undefined
Called when <Window /> starts to change size, when a handle starts to be dragged.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        defaultPosition={{ top: 50, left: 30 }}
        title="onResizeStart"
          onResizeStart={(size) => zippy.notification.first.addNotification({
            content: 'onResizeStart called',
            style: { marginTop: 56 }
          })
        }
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      <NotificationBoard id="first" />
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Fn(size: {width, height})
default: undefined
Called when resize stops.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        defaultPosition={{ top: 50, left: 30 }}
        title="onResizeStop"
        onResizeStop={(size) => zippy.notification.first.addNotification({
          content: 'onResizeStop called',
          style: { marginTop: 56 }
        })}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      <NotificationBoard id="first" />
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Fn()
default: undefined
Called when maximized changes from true to false.
When maximized changes from false to true, onMaximize is called.
See related onMaximize and onMaximizeChange.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        maximizable
        defaultPosition={{ top: 30, left: 30 }}
        title="onRestore"
        onRestore={() => zippy.notification.first.addNotification({ content: 'onRestore called', style: { marginTop: 56 } })}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      <NotificationBoard id="first" />
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Fn()
default: undefined
Called when show is called.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'

class App extends React.Component {
  render() {
    return <div>
      <div>
        <Button onClick={() => this.windowNode.show()}>trigger show</Button>
        <Button onClick={() => this.windowNode.close()}>trigger close</Button>
      </div>
      <Window
        ref={ref => this.windowNode = ref}
        title="show method"
        defaultPosition={{ top: 70, left: 20 }}
        onShow={() => zippy.notification.first.addNotification({
          content: 'onShow called',
          style: { marginTop: 56 }
        })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      <NotificationBoard id="first" />
    </div>
  }
}

export default () => <App />
String
default: undefined
Border added on body.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        defaultPosition={{ top: 30, left: 30 }}
        title="bodyBorder"
        bodyBorder={'1px solid red'}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
String
default: undefined
ClassName applied on body.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        defaultPosition={{ top: 30, left: 30 }}
        title="bodyClassName"
        bodyClassName="window-color-red"
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Object
default: undefined
Padding added on body.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        defaultPosition={{ top: 30, left: 30 }}
        title="bodyPadding=30"
        bodyPadding={30}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Object
default: undefined
Style applied on body.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        defaultPosition={{ top: 30, left: 30 }}
        title="bodyStyle"
        bodyStyle={{
          border: '1px solid rgb(183, 183, 183)',
          backgroundColor: '#7ebbff',
          color: '#fff',
          paddingTop: '30px',
        }}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Number
default: undefined
The border-radius to apply to the <Window />.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        defaultPosition={{ top: 30, left: 30 }}
        title="custom border radius"
        borderRadius={5}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
String
default: undefined
A CSS className to be appended to the <Window /> component.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        defaultPosition={{ top: 30, left: 30 }}
        title="custom class name"
        className="window-color-red"
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Object
default: undefined
A style object applied to the <Window /> component.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        defaultPosition={{ top: 30, left: 20 }}
        title="custom style"
        style={{
          backgroundColor: '#2196f3',
          boxShadow: '4px 4px 2px rgba(167, 160, 253, 0.93)',
          color: '#fff',
        }}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Object
default: undefined
Style applied on title.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        defaultPosition={{ top: 30, left: 30 }}
        title="titleStyle"
        titleStyle={{
          backgroundColor: '#7ebbff',
          marginLeft: 2,
          color: '#fff',
          padding: '5px 10px',
        }}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Fn()
undefined
Brings <Window /> one level up.
This is opposite of sendBackwards and similar to bringToFront.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Window/index.css'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { first: true, second: true, third: true }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <Button style={{ marginRight: 10 }} onClick={() => this.windowNode.bringForwards()}>send window 1 one level up</Button>
        <Button style={{ marginRight: 10 }} onClick={() => this.windowNode2.bringForwards()}>send window 2 one level up</Button>
        <Button onClick={() => this.windowNode3.bringForwards()}>send window 3 one level up</Button>
      </div>
      <Window
        ref={ref => this.windowNode = ref}
        title="window 1"
        defaultPosition={{ top: 130, left: 30 }}
        visible={this.state.first}
        onClose={() => this.setState({ first: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      <Window
        ref={ref => this.windowNode2 = ref}
        title="window 2"
        defaultPosition={{ top: 170, left: 70 }}
        visible={this.state.second}
        onClose={() => this.setState({ second: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      <Window
        ref={ref => this.windowNode3 = ref}
        title="window 3"
        defaultPosition={{ top: 210, left: 110 }}
        visible={this.state.third}
        onClose={() => this.setState({ third: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.first && <Button
        onClick={() => this.setState({ first: true })}
      >Show the first Window</Button>}
      {!this.state.second && <Button
        onClick={() => this.setState({ second: true })}
      >Show the second Window</Button>}
      {!this.state.third && <Button
        onClick={() => this.setState({ third: true })}
      >Show the third Window</Button>}
    </div>
  }
}

export default () => <App />
Fn()
undefined
Bring <Window /> in front, on top of all other <Window /> components.
This method is called when a <Window /> is clicked.
This is opposite of sendToBack, and similar to bringForwards.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Window/index.css'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { first: true, second: true, third: true }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <Button style={{ marginRight: 10 }} onClick={() => this.windowNode.bringToFront()}>bring window 1 in front</Button>
        <Button style={{ marginRight: 10 }} onClick={() => this.windowNode2.bringToFront()}>bring window 2 in front</Button>
        <Button onClick={() => this.windowNode3.bringToFront()}>bring window 3 in front</Button>
      </div>
      <Window
        ref={ref => this.windowNode = ref}
        title="window 1"
        defaultPosition={{ top: 110, left: 20 }}
        visible={this.state.first}
        onClose={() => this.setState({ first: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      <Window
        ref={ref => this.windowNode2 = ref}
        title="window 2"
        defaultPosition={{ top: 150, left: 60 }}
        visible={this.state.second}
        onClose={() => this.setState({ second: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      <Window
        ref={ref => this.windowNode3 = ref}
        title="window 2"
        defaultPosition={{ top: 190, left: 100 }}
        visible={this.state.third}
        onClose={() => this.setState({ third: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.first && <Button
        onClick={() => this.setState({ first: true })}
      >Show the first Window</Button>}
      {!this.state.second && <Button
        onClick={() => this.setState({ second: true })}
      >Show the second Window</Button>}
      {!this.state.third && <Button
        onClick={() => this.setState({ third: true })}
      >Show the third Window</Button>}
    </div>
  }
}

export default () => <App />
Fn()
undefined
Makes <Window /> centered.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Window/index.css'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <div>
        <Button style={{ marginRight: 5}} onClick={() => this.windowNode.center()}>trigger center</Button>
        {!this.state.visible && <Button
          onClick={() => this.setState({ visible: true })}
        >Show the Window</Button>}
      </div>
      <Window
        ref={ref => this.windowNode = ref}
        title="center method"
        defaultPosition={{ top: 70, left: 20 }}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
    </div>
  }
}

export default () => <App />
Fn()
undefined
Closes the <Window />, triggers onClose and changes visible to false, if uncontrolled.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Window/index.css'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  render() {
    return <div>
      <div>
        <Button onClick={() => this.windowNode.show()}>trigger show</Button>
        <Button onClick={() => this.windowNode.close()}>trigger close</Button>
      </div>
      <Window
        ref={ref => this.windowNode = ref}
        title="close method"
        defaultPosition={{ top: 70, left: 20 }}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
    </div>
  }
}

export default () => <App />
Fn()
undefined
Makes <Window /> collapsed, triggers onCollapse and changes collapsed to true, if uncontrolled.
Opposite of expand.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Window/index.css'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <div>
        <Button style={{ marginRight: 5}} onClick={() => this.windowNode.collapse()}>trigger collapse</Button>
        {!this.state.visible && <Button
          onClick={() => this.setState({ visible: true })}
        >Show the Window</Button>}
      </div>
      <Window
        ref={ref => this.windowNode = ref}
        title="collapse method"
        defaultPosition={{ top: 70, left: 20 }}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
    </div>
  }
}

export default () => <App />
Fn()
undefined
Makes <Window /> expanded, triggers onExpand and changes collapsed to false, if uncontrolled.
Opposite of collapse.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import '@zippytech/react-toolkit/Window/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <div>
        <Button style={{ marginRight: 5}} onClick={() => this.windowNode.collapse()}>trigger collapse</Button>
        <Button style={{ marginRight: 5}} onClick={() => this.windowNode.expand()}>trigger expand</Button>
        {!this.state.visible && <Button
          onClick={() => this.setState({ visible: true })}
        >Show the Window</Button>}
      </div>
      <Window
        ref={ref => this.windowNode = ref}
        title="expand method"
        defaultPosition={{ top: 70, left: 20 }}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
    </div>
  }
}

export default () => <App />
Fn()
undefined
Makes <Window /> maximized, triggers onMaximize and changes maximized to true, if uncontrolled.
Opposite of restore.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Window/index.css'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <div>
        <Button style={{ marginRight: 5}} onClick={() => this.windowNode.maximize()}>trigger maximize</Button>
        {!this.state.visible && <Button
          onClick={() => this.setState({ visible: true })}
        >Show the Window</Button>}
      </div>
      <Window
        ref={ref => this.windowNode = ref}
        title="maximize method"
        defaultPosition={{ top: 70, left: 20 }}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
    </div>
  }
}

export default () => <App />
Fn()
undefined
Restores <Window /> from maximized to initial size, triggers onRestore and changes maximized to false, if uncontrolled.
Opposite of maximize.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Window/index.css'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <Window
        ref={ref => this.windowNode = ref}
        title="restore method"
        defaultPosition={{ top: 70, left: 20 }}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        <Button style={{ marginRight: 5}} onClick={() => this.windowNode.restore()}>trigger restore</Button>
        <br /><br />
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Fn()
undefined
Bring <Window /> one level down.
This is opposite of bringForwards and similar to sendToBack.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Window/index.css'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { first: true, second: true, third: true }
  }

  render() {
    return <div style={{ position: 'relative' }}>
      <div style={{ marginBottom: 20 }}>
        <Button style={{ marginRight: 10 }} onClick={() => this.windowNode.sendBackwards()}>send window 1 one level down</Button>
        <Button style={{ marginRight: 10 }} onClick={() => this.windowNode2.sendBackwards()}>send window 2 one level down</Button>
        <Button onClick={() => this.windowNode3.sendBackwards()}>send window 3 one level down</Button>
      </div>
      <Window
        ref={ref => this.windowNode = ref}
        title="window 1"
        defaultPosition={{ top: 130, left: 30 }}
        visible={this.state.first}
        onClose={() => this.setState({ first: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      <Window
        ref={ref => this.windowNode2 = ref}
        title="window 2"
        defaultPosition={{ top: 170, left: 70 }}
        visible={this.state.second}
        onClose={() => this.setState({ second: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      <Window
        ref={ref => this.windowNode3 = ref}
        title="window 3"
        defaultPosition={{ top: 210, left: 110 }}
        visible={this.state.third}
        onClose={() => this.setState({ third: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.first && <Button
        onClick={() => this.setState({ first: true })}
      >Show the first Window</Button>}
      {!this.state.second && <Button
        onClick={() => this.setState({ second: true })}
      >Show the second Window</Button>}
      {!this.state.third && <Button
        onClick={() => this.setState({ third: true })}
      >Show the third Window</Button>}
    </div>
  }
}

export default () => <App />
Fn()
undefined
Send <Window /> back, under all other <Window /> components.
This is opposite of bringToFront and similar to sendBackwards.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Window/index.css'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { first: true, second: true, third: true }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <Button style={{ marginRight: 10 }} onClick={() => this.windowNode.sendToBack()}>send window 1 to back</Button>
        <Button style={{ marginRight: 10 }} onClick={() => this.windowNode2.sendToBack()}>send window 2 to back</Button>
        <Button onClick={() => this.windowNode3.sendToBack()}>send window 3 to back</Button>
      </div>
      <Window
        ref={ref => this.windowNode = ref}
        title="window 1"
        defaultPosition={{ top: 130, left: 20 }}
        visible={this.state.first}
        onClose={() => this.setState({ first: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      <Window
        ref={ref => this.windowNode2 = ref}
        title="window 2"
        defaultPosition={{ top: 170, left: 60 }}
        visible={this.state.second}
        onClose={() => this.setState({ second: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      <Window
        ref={ref => this.windowNode3 = ref}
        title="window 3"
        defaultPosition={{ top: 210, left: 100 }}
        visible={this.state.third}
        onClose={() => this.setState({ third: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.first && <Button
        onClick={() => this.setState({ first: true })}
      >Show the first Window</Button>}
      {!this.state.second && <Button
        onClick={() => this.setState({ second: true })}
      >Show the second Window</Button>}
      {!this.state.third && <Button
        onClick={() => this.setState({ third: true })}
      >Show the third Window</Button>}
    </div>
  }
}

export default () => <App />
Fn(position)
undefined
Changes <Window /> position if uncontrolled, triggers onPositionChange.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import Button from '@zippytech/react-toolkit/Button'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'
import '@zippytech/react-toolkit/Window/index.css'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      top: 110,
      left: 90,
      visible: true
    }
  }

  render() {
    return <div>
      <div>
        <div style={{ marginBottom: 20 }}>
          top: <NumericInput
            style={{ width: 90, marginRight: 5 }}
            value={this.state.top}
            onChange={(top) => this.setState({ top })}
          />
          left: <NumericInput
            style={{ width: 90, marginRight: 5 }}
            value={this.state.left}
            onChange={(left) => this.setState({ left })}
          />
          <Button
            onClick={() => this.windowNode.setPosition({ top: this.state.top, left: this.state.left })}
          >trigger setPositon</Button>
        </div>
      </div>
      <Window
        ref={ref => this.windowNode = ref}
        title="setPosition method"
        defaultPosition={{ top: 110, left: 90 }}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Fn(size)
undefined
Changes <Window /> size if uncontrolled, triggers onResize.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Window/index.css'
import '@zippytech/react-toolkit/Button/index.css'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      width: 300,
      height: 200,
      visible: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        Width{' '}: <NumericInput
          style={{ width: 90, marginRight: 5}}
          value={this.state.width}
          onChange={(width) => this.setState({ width })}
        />
        Height: <NumericInput
          style={{ width: 90, marginRight: 5}}
          value={this.state.height}
          onChange={(height) => this.setState({ height })}
          />
        <Button
          onClick={() => this.windowNode.setSize({ width: this.state.width, height: this.state.height })}
        >trigger setSize</Button>
      </div>
      <Window
        ref={ref => this.windowNode = ref}
        title="setSize method"
        defaultPosition={{ top: 150, left: 90 }}
        defaultSize={{ width: 300, height: 200 }}
        visible={this.state.visible}
        onClose={() => this.setState({ visible: false })}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
      {!this.state.visible && <Button
        onClick={() => this.setState({ visible: true })}
      >Show the Window</Button>}
    </div>
  }
}

export default () => <App />
Fn()
undefined
Makes <Window /> visible, triggers onShow and changes visible to true, if uncontrolled.
import React from 'react'
import Window from '@zippytech/react-toolkit/Window'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Window/index.css'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  render() {
    return <div>
      <div>
        <Button onClick={() => this.windowNode.show()}>trigger show</Button>
        <Button onClick={() => this.windowNode.close()}>trigger close</Button>
      </div>
      <Window
        ref={ref => this.windowNode = ref}
        title="show method"
        defaultPosition={{ top: 120, left: 30 }}
      >
        We love React. We use it daily for our customers & for our own projects.
      </Window>
    </div>
  }
}

export default () => <App />