Merge pull request #10 from ahennr/add-toolbar-container

Adds toolbar container, its tests and examples

src/Toolbar/Toolbar.example.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { render } from 'react-dom';
+import { Button } from 'antd';
+import Toolbar from './Toolbar.jsx'; //@react-geo@
+
+render(
+  <div>
+    <Toolbar>
+      <Button type="primary" shape="circle" icon="search" />
+      <Button type="primary" shape="circle" icon="search" />
+      <Button type="primary" shape="circle" icon="search" />
+    </Toolbar>
+    <hr style="margin: 1em"/>
+    <Toolbar alignment="vertical" style={{
+      position: 'unset'
+    }}>
+      <Button type="primary" shape="circle" icon="info" />
+      <Button type="primary" shape="circle" icon="info" />
+      <Button type="primary" shape="circle" icon="info" />
+    </Toolbar>
+  </div>,
+  document.getElementById('exampleContainer')
+);

src/Toolbar/Toolbar.example.md

@@ -0,0 +1,8 @@
+---
+layout: basic.html
+title: Toolbar example
+description: This is a example using a toolbar having vertically and horizontally aligned child elements.
+collection: Examples
+---
+
+This is a example using a toolbar having vertically and horizontally aligned child elements (buttons in this example).

src/Toolbar/Toolbar.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Toolbar.less';
+
+/**
+ * A base class representating a toolbar having n children
+ * The child components of this toolbar can be aligned in vertical and
+ * horizontal (default) way
+ *
+ * @class The Toolbar
+ * @extends React.Component
+ */
+class Toolbar extends React.Component {
+
+  /**
+   * The properties.
+   * @type {Object}
+   */
+  static propTypes = {
+    /**
+     * The children.
+     * @type {Array}
+     */
+    children: PropTypes.node,
+
+    /**
+     * The alignment of the sub components.
+     * @type {String}
+     */
+    alignment: PropTypes.oneOf(['horizontal', 'vertical']),
+
+    /**
+     * An object containing style informations. Applied to Toolbar.
+     * @type {Boolean}
+     */
+    style: PropTypes.object
+  }
+
+  /**
+   * The default properties.
+   * @type {Object}
+   */
+  static defaultProps = {
+    children: [],
+    alignment: 'horizontal'
+  }
+
+  /**
+   * The render function
+   */
+  render() {
+    const {style} = this.props;
+    return (
+      <div className={this.props.alignment + '-toolbar'} style={style}>
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+export default Toolbar;

src/Toolbar/Toolbar.less

@@ -0,0 +1,23 @@
+.vertical-toolbar {
+  position: absolute;
+  right: 5px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  button {
+    margin-top: 5px;
+  }
+}
+
+.horizontal-toolbar {
+  line-height: 30px;
+  pointer-events: all;
+  transition: all .3s;
+
+  button {
+    margin-right: 5px;
+    top: 5px;
+  }
+}

src/Toolbar/Toolbar.spec.jsx

@@ -0,0 +1,90 @@
+/*eslint-env mocha*/
+import React from 'react';
+import expect from 'expect.js';
+import Toolbar from './Toolbar.jsx';
+import TestUtils from '../Util/TestUtils';
+
+const testChildren = [
+  <div key="testdiv1" id="testdiv1" />,
+  <div key="testdiv2" id="testdiv2" />,
+  <div key="testdiv3" id="testdiv3" />
+];
+
+describe('<Toolbar />', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = TestUtils.mountComponent(Toolbar);
+  });
+
+  it('is defined', () => {
+    expect(Toolbar).not.to.be(undefined);
+  });
+
+  it('can be rendered', () => {
+    expect(wrapper).not.to.be(undefined);
+  });
+
+  it('contains div having class "horizontal-toolbar" by default', () => {
+    let rootDiv = wrapper.find('div.horizontal-toolbar');
+    expect(rootDiv).not.to.be(undefined);
+    expect(rootDiv.length).to.be(1);
+  });
+
+});
+
+describe('<Toolbar /> - CSS-class "vertical-toolbar"', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = TestUtils.mountComponent(Toolbar, {
+      alignment: 'vertical',
+      children: testChildren
+    });
+  });
+
+  it('can be rendered', () => {
+    expect(wrapper).not.to.be(undefined);
+  });
+
+  it('contains div having class "vertical-toolbar"', () => {
+    let rootDiv = wrapper.find('div.vertical-toolbar');
+    expect(rootDiv).not.to.be(undefined);
+    expect(rootDiv.length).to.be(1);
+  });
+
+  it('contains three child elements', () => {
+    let rootDivChildren = wrapper.find('div.vertical-toolbar').children();
+    expect(rootDivChildren).to.be.ok();
+    expect(rootDivChildren.nodes).to.be.an(Array);
+    expect(rootDivChildren.nodes).to.have.length(3);
+  });
+});
+
+describe('<Toolbar /> - CSS-class "horizontal-toolbar"', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = TestUtils.mountComponent(Toolbar, {
+      alignment: 'horizontal',
+      children: testChildren
+    });
+  });
+
+  it('can be rendered', () => {
+    expect(wrapper).not.to.be(undefined);
+  });
+
+  it('contains div having class "horizontal-toolbar"', () => {
+    let rootDiv = wrapper.find('div.horizontal-toolbar');
+    expect(rootDiv).not.to.be(undefined);
+    expect(rootDiv.length).to.be(1);
+  });
+
+  it('contains three child elements', () => {
+    let rootDivChildren = wrapper.find('div.horizontal-toolbar').children();
+    expect(rootDivChildren).to.be.ok();
+    expect(rootDivChildren.nodes).to.be.an(Array);
+    expect(rootDivChildren.nodes).to.have.length(3);
+  });
+});

src/index.js

@@ -1,3 +1,7 @@
 import {UserChip} from './UserChip/UserChip.jsx';
+import {Toolbar} from './Toolbar/Toolbar.jsx';
 
-export {UserChip};
+export {
+  UserChip,
+  Toolbar
+};

webpack.examples.config.js

@@ -1,6 +1,7 @@
 const commonConfig = require('./webpack.common.config.js');
 
 commonConfig.entry = {
+  Toolbar: './src/Toolbar/Toolbar.example.jsx',
   UserChip: './src/UserChip/UserChip.example.jsx'
 };