teamleader-ui - npm Package Compare versions

Comparing version 0.0.8-alpha to 0.0.9-alpha

components/button/Button.js

@@ -121,3 +121,3 @@ import React, { Component, PropTypes } from 'react';
       icon && !processing ? <FontIcon className={theme.icon} value={icon} /> : null,
-      processing ? <FontIcon className={theme.icon} value="spinner8" /> : null,
+      processing ? <FontIcon className={theme.icon} value="spinner" /> : null,
       label,
@@ -124,0 +124,0 @@ children

components/hoc/ActivableRenderer.js

@@ -7,3 +7,3 @@ import React, { Component, PropTypes } from 'react';
       active: PropTypes.bool.isRequired,
-      children: PropTypes.any,
+      children: PropTypes.node,
       delay: PropTypes.number,
@@ -14,3 +14,3 @@ };
       delay: options.delay,
-    };
+    }
 
@@ -17,0 +17,0 @@ state = {

components/hoc/Portal.js

@@ -6,10 +6,10 @@ import React, { Component, PropTypes } from 'react';
   static propTypes = {
-    children: PropTypes.any,
-    container: PropTypes.any,
-    lockBody: PropTypes.bool,
-  };
+    children: PropTypes.node,
+    className: PropTypes.string,
+    container: PropTypes.node,
+  }
 
   static defaultProps = {
-    lockBody: true,
-  };
+    className: '',
+  }
 
@@ -37,27 +37,34 @@ componentDidMount () {
 
-  _mountOverlayTarget () {
-    if (!this._overlayTarget) {
-      this._overlayTarget = document.createElement('div');
-      this._portalContainerNode = getContainer(this.props.container);
-      this._portalContainerNode.appendChild(this._overlayTarget);
+  getMountNode () {
+    return this._overlayTarget;
+  }
+
+  getOverlayDOMNode () {
+    if (!this.isMounted()) { // eslint-disable-line
+      throw new Error('getOverlayDOMNode(): A component must be mounted to have a DOM node.');
     }
+
+    if (this._overlayInstance) {
+      if (this._overlayInstance.getWrappedDOMNode) {
+        return this._overlayInstance.getWrappedDOMNode();
+      }
+      return ReactDOM.findDOMNode(this._overlayInstance);
+    }
+
+    return null;
   }
 
-  _unmountOverlayTarget () {
-    if (this._overlayTarget) {
-      this._portalContainerNode.removeChild(this._overlayTarget);
-      this._overlayTarget = null;
+  _getOverlay () {
+    if (!this.props.children) {
+      return null;
     }
-    this._portalContainerNode = null;
+    return <div className={this.props.className}>{this.props.children}</div>;
   }
 
   _renderOverlay () {
-    const overlay = !this.props.children
-      ? null
-      : React.Children.only(this.props.children);
-
+    const overlay = this._getOverlay();
     if (overlay !== null) {
       this._mountOverlayTarget();
       this._overlayInstance = ReactDOM.unstable_renderSubtreeIntoContainer(
-        this, overlay, this._overlayTarget
+        this, overlay, this._overlayTarget,
       );
@@ -77,20 +84,16 @@ } else {
 
-  getMountNode () {
-    return this._overlayTarget;
+  _mountOverlayTarget () {
+    if (!this._overlayTarget) {
+      this._overlayTarget = document.createElement('div');
+      this._portalContainerNode = getContainer(this.props.container);
+      this._portalContainerNode.appendChild(this._overlayTarget);
+    }
   }
 
-  getOverlayDOMNode () {
-    if (!this.isMounted()) {
-      throw new Error('getOverlayDOMNode(): A component must be mounted to have a DOM node.');
+  _unmountOverlayTarget () {
+    if (this._overlayTarget) {
+      this._portalContainerNode.removeChild(this._overlayTarget);
+      this._overlayTarget = null;
     }
-
-    if (this._overlayInstance) {
-      if (this._overlayInstance.getWrappedDOMNode) {
-        return this._overlayInstance.getWrappedDOMNode();
-      } else {
-        return ReactDOM.findDOMNode(this._overlayInstance);
-      }
-    }
-
-    return null;
+    this._portalContainerNode = null;
   }
@@ -101,2 +104,3 @@
   }
+
 }
@@ -103,0 +107,0 @@

components/identifiers.js

 export const BUTTON = 'TLButton';
+export const DIALOG = 'TLDialog';
+export const LOADING_MOLECULE = 'TLLoadingMolecule';
 export const MENU = 'TLMenu';
-export const LOADING_MOLECULE = 'TLLoadingMolecule';
+export const OVERLAY = 'TLOverlay';
+export const POPOVER_VERTICAL = 'TLPopoverVertical';
+export const POPOVER_HORIZONTAL = 'TLPopoverHorizontal';

components/utils/events.js

@@ -33,2 +33,14 @@ export default {
 
+  addEventsToWindow (eventMap) {
+    for (const key in eventMap) {
+      window.addEventListener(key, eventMap[key], false);
+    }
+  },
+
+  removeEventsFromWindow (eventMap) {
+    for (const key in eventMap) {
+      window.removeEventListener(key, eventMap[key], false);
+    }
+  },
+
   targetIsDescendant (event, parent) {
@@ -35,0 +47,0 @@ let node = event.target;

lib/button/Button.js

@@ -174,3 +174,3 @@ 'use strict';
         }
-      }) : null, processing ? _react2.default.createElement(_font_icon2.default, { className: theme.icon, value: 'spinner8', __source: {
+      }) : null, processing ? _react2.default.createElement(_font_icon2.default, { className: theme.icon, value: 'spinner', __source: {
           fileName: _jsxFileName,
@@ -177,0 +177,0 @@ lineNumber: 121

lib/hoc/ActivableRenderer.js

@@ -131,3 +131,3 @@ 'use strict';
       active: _react.PropTypes.bool.isRequired,
-      children: _react.PropTypes.any,
+      children: _react.PropTypes.node,
       delay: _react.PropTypes.number
@@ -134,0 +134,0 @@ }, _class.defaultProps = {

lib/hoc/Portal.js

@@ -27,2 +27,4 @@ 'use strict';
 
+var _jsxFileName = '/Users/dries/Sites/teamleader-ui/components/hoc/Portal.js';
+
 var _react = require('react');
@@ -72,18 +74,38 @@
   }, {
-    key: '_mountOverlayTarget',
-    value: function _mountOverlayTarget() {
-      if (!this._overlayTarget) {
-        this._overlayTarget = document.createElement('div');
-        this._portalContainerNode = getContainer(this.props.container);
-        this._portalContainerNode.appendChild(this._overlayTarget);
+    key: 'getMountNode',
+    value: function getMountNode() {
+      return this._overlayTarget;
+    }
+  }, {
+    key: 'getOverlayDOMNode',
+    value: function getOverlayDOMNode() {
+      if (!this.isMounted()) {
+        // eslint-disable-line
+        throw new Error('getOverlayDOMNode(): A component must be mounted to have a DOM node.');
       }
+
+      if (this._overlayInstance) {
+        if (this._overlayInstance.getWrappedDOMNode) {
+          return this._overlayInstance.getWrappedDOMNode();
+        }
+        return _reactDom2.default.findDOMNode(this._overlayInstance);
+      }
+
+      return null;
     }
   }, {
-    key: '_unmountOverlayTarget',
-    value: function _unmountOverlayTarget() {
-      if (this._overlayTarget) {
-        this._portalContainerNode.removeChild(this._overlayTarget);
-        this._overlayTarget = null;
+    key: '_getOverlay',
+    value: function _getOverlay() {
+      if (!this.props.children) {
+        return null;
       }
-      this._portalContainerNode = null;
+      return _react2.default.createElement(
+        'div',
+        { className: this.props.className, __source: {
+            fileName: _jsxFileName,
+            lineNumber: 59
+          }
+        },
+        this.props.children
+      );
     }
@@ -93,4 +115,3 @@ }, {
     value: function _renderOverlay() {
-      var overlay = !this.props.children ? null : _react2.default.Children.only(this.props.children);
-
+      var overlay = this._getOverlay();
       if (overlay !== null) {
@@ -113,22 +134,18 @@ this._mountOverlayTarget();
   }, {
-    key: 'getMountNode',
-    value: function getMountNode() {
-      return this._overlayTarget;
+    key: '_mountOverlayTarget',
+    value: function _mountOverlayTarget() {
+      if (!this._overlayTarget) {
+        this._overlayTarget = document.createElement('div');
+        this._portalContainerNode = getContainer(this.props.container);
+        this._portalContainerNode.appendChild(this._overlayTarget);
+      }
     }
   }, {
-    key: 'getOverlayDOMNode',
-    value: function getOverlayDOMNode() {
-      if (!this.isMounted()) {
-        throw new Error('getOverlayDOMNode(): A component must be mounted to have a DOM node.');
+    key: '_unmountOverlayTarget',
+    value: function _unmountOverlayTarget() {
+      if (this._overlayTarget) {
+        this._portalContainerNode.removeChild(this._overlayTarget);
+        this._overlayTarget = null;
       }
-
-      if (this._overlayInstance) {
-        if (this._overlayInstance.getWrappedDOMNode) {
-          return this._overlayInstance.getWrappedDOMNode();
-        } else {
-          return _reactDom2.default.findDOMNode(this._overlayInstance);
-        }
-      }
-
-      return null;
+      this._portalContainerNode = null;
     }
@@ -145,8 +162,8 @@ }, {
 Portal.propTypes = {
-  children: _react.PropTypes.any,
-  container: _react.PropTypes.any,
-  lockBody: _react.PropTypes.bool
+  children: _react.PropTypes.node,
+  className: _react.PropTypes.string,
+  container: _react.PropTypes.node
 };
 Portal.defaultProps = {
-  lockBody: true
+  className: ''
 };
@@ -153,0 +170,0 @@

lib/identifiers.js

@@ -7,4 +7,8 @@ 'use strict';
 var BUTTON = exports.BUTTON = 'TLButton';
+var DIALOG = exports.DIALOG = 'TLDialog';
+var LOADING_MOLECULE = exports.LOADING_MOLECULE = 'TLLoadingMolecule';
 var MENU = exports.MENU = 'TLMenu';
-var LOADING_MOLECULE = exports.LOADING_MOLECULE = 'TLLoadingMolecule';
+var OVERLAY = exports.OVERLAY = 'TLOverlay';
+var POPOVER_VERTICAL = exports.POPOVER_VERTICAL = 'TLPopoverVertical';
+var POPOVER_HORIZONTAL = exports.POPOVER_HORIZONTAL = 'TLPopoverHorizontal';
 ;
@@ -19,7 +23,15 @@
 
+  __REACT_HOT_LOADER__.register(DIALOG, 'DIALOG', '/Users/dries/Sites/teamleader-ui/components/identifiers.js');
+
+  __REACT_HOT_LOADER__.register(LOADING_MOLECULE, 'LOADING_MOLECULE', '/Users/dries/Sites/teamleader-ui/components/identifiers.js');
+
   __REACT_HOT_LOADER__.register(MENU, 'MENU', '/Users/dries/Sites/teamleader-ui/components/identifiers.js');
 
-  __REACT_HOT_LOADER__.register(LOADING_MOLECULE, 'LOADING_MOLECULE', '/Users/dries/Sites/teamleader-ui/components/identifiers.js');
+  __REACT_HOT_LOADER__.register(OVERLAY, 'OVERLAY', '/Users/dries/Sites/teamleader-ui/components/identifiers.js');
+
+  __REACT_HOT_LOADER__.register(POPOVER_VERTICAL, 'POPOVER_VERTICAL', '/Users/dries/Sites/teamleader-ui/components/identifiers.js');
+
+  __REACT_HOT_LOADER__.register(POPOVER_HORIZONTAL, 'POPOVER_HORIZONTAL', '/Users/dries/Sites/teamleader-ui/components/identifiers.js');
 }();
 
 ;

lib/utils/events.js

@@ -33,2 +33,12 @@ 'use strict';
   },
+  addEventsToWindow: function addEventsToWindow(eventMap) {
+    for (var key in eventMap) {
+      window.addEventListener(key, eventMap[key], false);
+    }
+  },
+  removeEventsFromWindow: function removeEventsFromWindow(eventMap) {
+    for (var key in eventMap) {
+      window.removeEventListener(key, eventMap[key], false);
+    }
+  },
   targetIsDescendant: function targetIsDescendant(event, parent) {
@@ -35,0 +45,0 @@ var node = event.target;

package.json

 {
   "name": "teamleader-ui",
   "description": "Teamleader UI library",
-  "version": "0.0.8-alpha",
+  "version": "0.0.9-alpha",
   "author": "Teamleader <[e-mail]>",
@@ -115,2 +115,3 @@ "contributors": [
     "karma-webpack-with-fast-source-maps": "^1.9.2",
+    "lodash.throttle": "4.1.1",
     "mocha": "^3.0.1",
@@ -117,0 +118,0 @@ "phantomjs-prebuilt": "^2.1.12",

spec/components/button.js

@@ -14,8 +14,8 @@ import React from 'react';
       <Button primary onMouseUp={handleItemClick}>Primary flat</Button>&nbsp;
-      <Button primary icon="notifications">Primary flat with icon</Button>&nbsp;
-      <Button primary icon="notifications" />
+      <Button primary icon="search">Primary flat with icon</Button>&nbsp;
+      <Button primary icon="search" />
     </p>
     <p>
       <Button primary processing>Primary flat processing</Button>&nbsp;
-      <Button primary processing icon="notifications">Primary flat processing with icon</Button>&nbsp;
+      <Button primary processing icon="search">Primary flat processing with icon</Button>&nbsp;
       <Button primary processing />
@@ -25,4 +25,4 @@ </p>
       <Button primary disabled>Primary flat disabled</Button>&nbsp;
-      <Button primary disabled icon="notifications">Primary disabled with icon</Button>&nbsp;
-      <Button primary disabled icon="notifications" />
+      <Button primary disabled icon="search">Primary disabled with icon</Button>&nbsp;
+      <Button primary disabled icon="search" />
     </p>
@@ -34,4 +34,4 @@
       <Button>Neutral flat</Button>&nbsp;
-      <Button icon="notifications">Neutral flat with icon</Button>&nbsp;
-      <Button icon="notifications" />
+      <Button icon="search">Neutral flat with icon</Button>&nbsp;
+      <Button icon="search" />
     </p>
@@ -41,3 +41,3 @@
       <Button processing>Neutral flat processing</Button>&nbsp;
-      <Button processing icon="notifications">Neutral flat processing with icon</Button>&nbsp;
+      <Button processing icon="search">Neutral flat processing with icon</Button>&nbsp;
       <Button processing />
@@ -48,6 +48,7 @@ </p>
       <Button disabled>Neutral flat disabled</Button>&nbsp;
-      <Button disabled icon="notifications">Neutral disabled with icon</Button>&nbsp;
-      <Button disabled icon="notifications" />
+      <Button disabled icon="search">Neutral disabled with icon</Button>&nbsp;
+      <Button disabled icon="search" />
     </p>
 
+    <hr />
   </section>
@@ -54,0 +55,0 @@ );

spec/components/menu.js

@@ -27,5 +27,5 @@ import React from 'react';
           <MenuDivider />
-          <MenuItem caption="Caption & Icon" icon="notifications" />
-          <MenuItem caption="Caption, Icon & Shortcut" icon="notifications" shortcut="Ctrl + P" />
-          <MenuItem caption="Disabled ..." icon="plus" shortcut="Ctrl + P" disabled />
+          <MenuItem caption="Caption & Icon" icon="check" />
+          <MenuItem caption="Caption, Icon & Shortcut" icon="list_bulleted" shortcut="Ctrl + P" />
+          <MenuItem caption="Disabled ..." icon="flag" shortcut="Ctrl + P" disabled />
         </Menu>
@@ -35,6 +35,6 @@
 
-        <IconMenu icon="more_vert" position="topLeft">
-          <MenuItem value="download" icon="plus" caption="Download" />
+        <IconMenu icon="dots_vert" position="topLeft">
+          <MenuItem value="download" icon="user_two" caption="Download" />
           <MenuDivider />
-          <MenuItem caption="Disabled ..." icon="plus" shortcut="Ctrl + P" disabled />
+          <MenuItem caption="Disabled ..." icon="close" shortcut="Ctrl + P" disabled />
         </IconMenu>
@@ -41,0 +41,0 @@ </section>

spec/Root.js

 import React from 'react';
 import Button from './components/button';
 import Menu from './components/menu';
+import Dialog from './components/dialog';
+import PopoverVertical from './components/popoverVertical';
+import PopoverHorizontal from './components/popoverHorizontal';
 import LoadingMolecule from './components/loadingMolecule';
@@ -11,3 +14,6 @@
     <Button />
+    <PopoverVertical />
+    <PopoverHorizontal />
     <Menu />
+    <Dialog />
     <LoadingMolecule />
@@ -14,0 +20,0 @@ </div>

No alert changes

Improved metrics

Number of package files

119

increased by35.23%

Lines of code

7915

increased by51.66%

Worsened metrics

Total package byte prevSize

320559

decreased by-11.88%

Dev dependency count

73

increased by1.39%

No dependency changes