react-avatar-stack
Version:
ReactJS component that will stack the child that you pass to it and add `+n` placeholder to it.
1 lines • 3.46 kB
JavaScript
!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require("prop-types"),require("react"),require("styled-components")):"function"==typeof define&&define.amd?define("react-avatar-stack",["prop-types","react","styled-components"],n):"object"==typeof exports?exports["react-avatar-stack"]=n(require("prop-types"),require("react"),require("styled-components")):e["react-avatar-stack"]=n(e["prop-types"],e.react,e["styled-components"])}(this,function(e,n,t){return function(e){function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var t={};return n.m=e,n.c=t,n.i=function(e){return e},n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p="",n(n.s=4)}([function(e,n,t){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,n){return Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}Object.defineProperty(n,"__esModule",{value:!0});var u=o(["\n display: flex;\n flex-shrink: 0;\n\n div:not(:first-of-type) {\n margin-left: -","px;\n }\n\n div:hover {\n margin-left: 0px;\n margin-right: ","px;\n }\n"],["\n display: flex;\n flex-shrink: 0;\n\n div:not(:first-of-type) {\n margin-left: -","px;\n }\n\n div:hover {\n margin-left: 0px;\n margin-right: ","px;\n }\n"]),i=o(["\n cursor: pointer;\n z-index: ",";\n"],["\n cursor: pointer;\n z-index: ",";\n"]),a=o(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ",";\n color: ",";\n width: ","px;\n height: ","px;\n border-radius: 50%;\n user-select: none;\n"],["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ",";\n color: ",";\n width: ","px;\n height: ","px;\n border-radius: 50%;\n user-select: none;\n"]),c=t(2),f=r(c),l=t(3),d=r(l),s=t(1),p=r(s),x=d.default.div(u,function(e){return e.avatarSize/2},function(e){return e.avatarSize/2}),v=d.default.div(i,function(e){return e.index}),m=d.default.div(a,function(e){return e.numberLeftBackgroundColor},function(e){return e.numberLeftColor},function(e){return e.size},function(e){return e.size}),y=function(e){var n=e.children,t=void 0===n?[]:n,r=e.nextOverlapPrevious,o=void 0===r||r,u=e.avatarSize,i=void 0===u?32:u,a=e.maxAvatarNumber,c=void 0===a?9:a,l=e.numberLeftBackgroundColor,d=e.numberLeftColor,s=e.onNumberLeftClick,p=void 0===s?function(){}:s;return f.default.createElement(x,{avatarSize:i},Array.isArray(t)?t.slice(0,c+1).map(function(e,n){return f.default.createElement(v,{index:o?n:-n,key:n},e)}):f.default.createElement(v,null,t),t.length>c&&f.default.createElement(v,{index:o?c+2:-(c+2)},f.default.createElement(m,{onClick:p,size:i,numberLeftBackgroundColor:l,numberLeftColor:d},"+"+(t.length-c))))};y.propTypes={children:p.default.node,nextOverlapPrevious:p.default.bool,avatarSize:p.default.number,maxAvatarNumber:p.default.number},n.default=y,e.exports=n.default},function(n,t){n.exports=e},function(e,t){e.exports=n},function(e,n){e.exports=t},function(e,n,t){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var o=t(0),u=r(o);n.default=u.default,e.exports=n.default}])});