@jouwomgeving/ui-avatar - npm Package Compare versions

Comparing version 0.0.1-alpha.33f54b45 to 0.0.1-alpha.3c2eaec8

dist/bundle.js

@@ -1,1 +0,1 @@
-module.exports=function(e){function t(n){if(r[n])return r[n].exports;var u=r[n]={i:n,l:!1,exports:{}};return e[n].call(u.exports,u,u.exports,t),u.l=!0,u.exports}var r={};return t.m=e,t.c=r,t.i=function(e){return e},t.d=function(e,t,r){Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=1727)}({0:function(e,t){e.exports=require("react")},1514:function(e,t,r){var n,u;!function(){"use strict";function r(){for(var e=[],t=0;t<arguments.length;t++){var n=arguments[t];if(n){var u=typeof n;if("string"===u||"number"===u)e.push(this&&this[n]||n);else if(Array.isArray(n))e.push(r.apply(this,n));else if("object"===u)for(var a in n)o.call(n,a)&&n[a]&&e.push(this&&this[a]||a)}}return e.join(" ")}var o={}.hasOwnProperty;"undefined"!=typeof e&&e.exports?e.exports=r:(n=[],u=function(){return r}.apply(t,n),!(void 0!==u&&(e.exports=u)))}()},1515:function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}t.__esModule=!0;var u=r(1520),o=n(u),a=r(1518),l=n(a),s=function(e){var t=(0,l.default)(e);return function(r,n){return(0,o.default)(!1,t,e,r,n)}};t.default=s},1516:function(e,t,r){"use strict";t.__esModule=!0;var n=function(e,t){arguments.length<=2||void 0===arguments[2]||arguments[2],!(arguments.length<=3||void 0===arguments[3])&&arguments[3];return e};t.default=n},1517:function(e,t){"use strict";t.__esModule=!0;var r=function(e){return Boolean(e&&e.prototype&&"object"==typeof e.prototype.isReactComponent)};t.default=r},1518:function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}t.__esModule=!0;var u=r(1517),o=n(u),a=function(e){return Boolean(!("function"!=typeof e||(0,o.default)(e)||e.defaultProps||e.contextTypes||e.propTypes))};t.default=a},1519:function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}t.__esModule=!0;var u=r(1516),o=n(u),a=r(1515),l=n(a),s=function(e){return function(t){var r=(0,l.default)(t);return function(t){return r(e(t))}}};t.default=(0,o.default)(s,"mapProps")},1520:function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}t.__esModule=!0;var u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},o=r(0),a=n(o),l=function(e,t,r,n,o){if(!e&&t)return r(o?u({},n,{children:o}):n);var l=r;return o?a.default.createElement(l,n,o):a.default.createElement(l,n)};t.default=l},1727:function(e,t,r){e.exports=r(323)},269:function(e,t){e.exports={Avatar:"styles---Avatar---3-CgN8dxiV",small:"styles---small---38I1_0QTlX",large:"styles---large---pePI3of3lo",Group:"styles---Group---34R8I3V5zI"}},323:function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}var u=r(333),o=n(u),a=r(334),l=n(a);e.exports={"default":o.default,Avatar:o.default,Group:l.default}},333:function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function u(e){return a.default.createElement("div",{className:d("Avatar",e.size)},e.src?a.default.createElement("img",{src:e.src,alt:e.name}):a.default.createElement(i.FontAwesome.FaUser,{size:p[e.size]}))}Object.defineProperty(t,"__esModule",{value:!0});var o=r(0),a=n(o),l=r(1514),s=n(l),i=r(!function(){var e=new Error('Cannot find module "ui-icon"');throw e.code="MODULE_NOT_FOUND",e}()),f=r(269),c=n(f),d=s.default.bind(c.default),p={small:14,medium:18,large:24};u.propTypes={size:o.PropTypes.oneOf(["small","medium","large"]),src:o.PropTypes.string,name:o.PropTypes.string},u.defaultProps={size:"medium",name:"Avatar"},t.default=u},334:function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var u=r(0),o=n(u),a=r(1519),l=n(a),s=r(269),i=n(s),f=(0,l.default)(function(e){var t=e.children,r=e.showMax,n=u.Children.toArray(t);return{show:n.slice(0,r-1),hide:n.slice(r-1)}}),c=f(function(e){var t=e.show,r=e.hide;return o.default.createElement("div",{className:i.default.Group},t,r.length>0&&o.default.createElement("div",null,r))});c.propTypes={children:u.PropTypes.any,showMax:u.PropTypes.number},c.defaultProps={showMax:3},c.displayName="Group",t.default=c}});
+module.exports=function(e){function t(n){if(r[n])return r[n].exports;var u=r[n]={i:n,l:!1,exports:{}};return e[n].call(u.exports,u,u.exports,t),u.l=!0,u.exports}var r={};return t.m=e,t.c=r,t.i=function(e){return e},t.d=function(e,t,r){Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=1973)}({0:function(e,t){e.exports=require("react")},1620:function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}t.__esModule=!0;var u=r(1624),o=n(u),a=r(1622),l=n(a),i=function(e){var t=(0,l.default)(e);return function(r,n){return(0,o.default)(!1,t,e,r,n)}};t.default=i},1621:function(e,t){"use strict";t.__esModule=!0;var r=function(e){return Boolean(e&&e.prototype&&"object"==typeof e.prototype.isReactComponent)};t.default=r},1622:function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}t.__esModule=!0;var u=r(1621),o=n(u),a=function(e){return Boolean(!("function"!=typeof e||(0,o.default)(e)||e.defaultProps||e.contextTypes||e.propTypes))};t.default=a},1623:function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}t.__esModule=!0;var u=r(321),o=n(u),a=r(1620),l=n(a),i=function(e){return function(t){var r=(0,l.default)(t);return function(t){return r(e(t))}}};t.default=(0,o.default)(i,"mapProps")},1624:function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}t.__esModule=!0;var u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},o=r(0),a=n(o),l=function(e,t,r,n,o){if(!e&&t)return r(o?u({},n,{children:o}):n);var l=r;return o?a.default.createElement(l,n,o):a.default.createElement(l,n)};t.default=l},1625:function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}t.__esModule=!0;var u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},o=r(321),a=n(o),l=r(1623),i=n(l),s=function(e){return(0,i.default)(function(t){return u({},t,"function"==typeof e?e(t):e)})};t.default=(0,a.default)(s,"withProps")},1973:function(e,t,r){e.exports=r(409)},309:function(e,t){e.exports=require("@jouwomgeving/ui-list")},310:function(e,t){e.exports=require("@jouwomgeving/ui-popover")},314:function(e,t){e.exports={Avatar:"styles---Avatar---3-CgN8dxiV",small:"styles---small---38I1_0QTlX",large:"styles---large---pePI3of3lo",Group:"styles---Group---34R8I3V5zI",overlap:"styles---overlap---3i7vyhlSEk",ShowMore:"styles---ShowMore---2SIfj-XRhq styles---Avatar---3-CgN8dxiV"}},32:function(e,t){e.exports=require("@jouwomgeving/ui-typography")},320:function(e,t,r){var n,u;!function(){"use strict";function r(){for(var e=[],t=0;t<arguments.length;t++){var n=arguments[t];if(n){var u=typeof n;if("string"===u||"number"===u)e.push(this&&this[n]||n);else if(Array.isArray(n))e.push(r.apply(this,n));else if("object"===u)for(var a in n)o.call(n,a)&&n[a]&&e.push(this&&this[a]||a)}}return e.join(" ")}var o={}.hasOwnProperty;"undefined"!=typeof e&&e.exports?e.exports=r:(n=[],u=function(){return r}.apply(t,n),!(void 0!==u&&(e.exports=u)))}()},321:function(e,t,r){"use strict";t.__esModule=!0;var n=function(e,t){arguments.length<=2||void 0===arguments[2]||arguments[2],!(arguments.length<=3||void 0===arguments[3])&&arguments[3];return e};t.default=n},409:function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}var u=r(424),o=n(u),a=r(425),l=n(a);e.exports={"default":o.default,Avatar:o.default,Group:l.default}},424:function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function u(e){return a.default.createElement("div",{className:p("Avatar",e.size)},e.src?a.default.createElement("img",{src:e.src,alt:e.name}):a.default.createElement(s.FontAwesome.FaUser,{size:d[e.size]}))}Object.defineProperty(t,"__esModule",{value:!0});var o=r(0),a=n(o),l=r(320),i=n(l),s=r(61),f=r(314),c=n(f),p=i.default.bind(c.default),d={small:14,medium:18,large:24};u.propTypes={size:o.PropTypes.oneOf(["small","medium","large"]),src:o.PropTypes.string,name:o.PropTypes.string},u.defaultProps={size:"medium",name:"Avatar"},t.default=u},425:function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var u=r(0),o=n(u),a=r(1625),l=n(a),i=r(320),s=n(i),f=r(310),c=r(32),p=r(309),d=n(p),v=r(314),m=n(v),y=s.default.bind(m.default),h=(0,l.default)(function(e){var t=e.children,r=e.showMax,n=u.Children.toArray(t);return{show:n.slice(0,r),hide:n.slice(r)}}),_=h(function(e){var t=e.show,r=e.hide,n=e.overlap;return o.default.createElement("div",{className:y("Group",{overlap:n})},t,r.length>0&&o.default.createElement(f.PopOverContainer,{content:o.default.createElement(d.default.Container,null,r.map(function(e){return o.default.createElement(d.default.Row,{spacing:"thin"},o.default.createElement(d.default.Cell,{vertical:"center",size:"2rem"},(0,u.cloneElement)(e,{size:"small"})),o.default.createElement(d.default.Cell,{vertical:"center"},o.default.createElement(c.Text,null,e.props.name)))}))},o.default.createElement("div",{className:y("ShowMore",t[t.length-1].props.size)},o.default.createElement(c.Text,{size:"small",color:"link"},"+",r.length))))});_.propTypes={children:u.PropTypes.any,showMax:u.PropTypes.number,overlap:u.PropTypes.bool},_.defaultProps={showMax:3,overlap:!0},_.displayName="Group",t.default=_},61:function(e,t){e.exports=require("@jouwomgeving/ui-icon")}});

package.json

 {
   "name": "@jouwomgeving/ui-avatar",
-  "version": "0.0.1-alpha.33f54b45",
+  "version": "0.0.1-alpha.3c2eaec8",
   "description": "",
-  "main": "index.js",
+  "main": "dist/bundle.js",
   "scripts": {
@@ -17,4 +17,8 @@ "test": "echo \"Error: no test specified\" && exit 1"
     "react": "^15.2.0",
-    "react-dom": "^15.2.0"
+    "react-dom": "^15.2.0",
+    "@jouwomgeving/ui-icon": "^0.0.1-alpha.3c2eaec8",
+    "@jouwomgeving/ui-popover": "^0.0.1-alpha.3c2eaec8",
+    "@jouwomgeving/ui-list": "^0.0.1-alpha.3c2eaec8",
+    "@jouwomgeving/ui-typography": "^0.0.1-alpha.3c2eaec8"
   }
 }

src/Avatar/index.js

 import React, { PropTypes } from 'react';
 import classnames from 'classnames/bind';
-
-import { FontAwesome } from 'ui-icon';
-
+import { FontAwesome } from '@jouwomgeving/ui-icon';
 import styles from './../styles.css';
@@ -24,3 +22,5 @@
         /> :
-        <FontAwesome.FaUser size={faSizeMap[props.size]} />
+        <FontAwesome.FaUser
+          size={faSizeMap[props.size]}
+        />
       }
@@ -27,0 +27,0 @@ </div>

src/Avatar/stories/Avatar.stories.js

 import React from 'react';
 import { storiesOf } from '@kadira/storybook';
+import Avatar from 'ui-avatar/index';
+import 'ui-icon/dist/bundle.css';
 
-import Avatar from 'ui-avatar';
-
 const settings = {
@@ -7,0 +7,0 @@ source: true,

src/Group/index.js

@@ -1,21 +0,55 @@
-import React, { PropTypes, Children } from 'react';
-import mapProps from 'recompose/mapProps';
+import React, { PropTypes, Children, cloneElement } from 'react';
+import withProps from 'recompose/withProps';
+import classNames from 'classnames/bind';
 
+import { PopOverContainer } from '@jouwomgeving/ui-popover';
+import { Text } from '@jouwomgeving/ui-typography';
+import List from '@jouwomgeving/ui-list';
+
 import styles from './../styles.css';
 
-const enhance = mapProps(({ children, showMax }) => {
+const cx = classNames.bind(styles);
+
+const enhance = withProps(({ children, showMax }) => {
   const childrenArray = Children.toArray(children);
   return {
-    show: childrenArray.slice(0, showMax - 1),
-    hide: childrenArray.slice(showMax - 1),
+    show: childrenArray.slice(0, showMax),
+    hide: childrenArray.slice(showMax),
   };
 });
 
-const Group = enhance(({ show, hide }) => (
-  <div className={styles.Group}>
+const Group = enhance(({ show, hide, overlap }) => (
+  <div className={cx('Group', { overlap })}>
     {show}
     {hide.length > 0 &&
-      <div>
-        {hide}
-      </div>
+      <PopOverContainer
+        content={(
+          <List.Container>
+            {hide.map(avatar => (
+              <List.Row spacing="thin">
+                <List.Cell
+                  vertical="center"
+                  size="2rem"
+                >
+                  {cloneElement(avatar, { size: 'small' })}
+                </List.Cell>
+                <List.Cell vertical="center">
+                  <Text>
+                    {avatar.props.name}
+                  </Text>
+                </List.Cell>
+              </List.Row>
+            ))}
+          </List.Container>
+        )}
+      >
+        <div className={cx('ShowMore', show[show.length - 1].props.size)}>
+          <Text
+            size="small"
+            color="link"
+          >
+            +{hide.length}
+          </Text>
+        </div>
+      </PopOverContainer>
     }
@@ -28,2 +62,3 @@ </div>
   showMax: PropTypes.number,
+  overlap: PropTypes.bool,
 };
@@ -33,2 +68,3 @@
   showMax: 3,
+  overlap: true,
 };
@@ -35,0 +71,0 @@

src/Group/stories/Group.stories.js

 import React from 'react';
 import { storiesOf } from '@kadira/storybook';
+import Faker from 'faker';
+import times from 'lodash/times';
 
-import Avatar from 'ui-avatar';
+import Avatar from 'ui-avatar/index';
 
@@ -13,15 +15,11 @@ const settings = {
 
-const avatars = [
-  'https://placekitten.com/g/55/55',
-  'https://placekitten.com/g/56/56',
-  'https://placekitten.com/g/57/57',
-];
+function generate() {
+  return {
+    name: Faker.name.findName(),
+    src: Faker.image.avatar(),
+  };
+}
 
-const avatarsShowMax = avatars.concat([
-  'https://placekitten.com/g/55/55',
-  'https://placekitten.com/g/56/56',
-  'https://placekitten.com/g/57/57',
-  'https://placekitten.com/g/58/58',
-  'https://placekitten.com/g/59/59',
-]);
+const avatars = times(3, generate);
+const avatarsShowMax = times(8, generate);
 
@@ -36,3 +34,3 @@ storiesOf('<Avatar.Group />', module)
             size="small"
-            src={avatar}
+            {...avatar}
           />
@@ -43,3 +41,3 @@ ))}
   )
-  .addWithInfo('showMax', '',
+  .addWithInfo('Show 3 max', '',
     () => (
@@ -51,3 +49,3 @@ <Avatar.Group showMax={3}>
             size="small"
-            src={avatar}
+            {...avatar}
           />
@@ -57,2 +55,18 @@ ))}
     ), settings
+  )
+  .addWithInfo('Don\'t overlap', '',
+    () => (
+      <Avatar.Group
+        showMax={3}
+        overlap={false}
+      >
+        {avatarsShowMax.map((avatar, index) => (
+          <Avatar.default
+            key={index}
+            size="small"
+            {...avatar}
+          />
+        ))}
+      </Avatar.Group>
+    ), settings
   );

No alert changes

Improved metrics

Total package byte prevSize

14761

increased by30.93%

Lines of code

355

increased by25.89%

Worsened metrics

Dependency count

8

increased by100%

No dependency changes