@razorpay/blade
Version:
The Design System that powers Razorpay
117 lines (113 loc) • 4.85 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default from 'react';
import { StyledAvatarGroup } from './StyledAvatarGroup.js';
import { StyledAvatar } from './StyledAvatar.js';
import { AvatarGroupProvider } from './AvatarGroupContext.js';
import { AvatarButton } from './AvatarButton.js';
import '../Box/styledProps/index.js';
import '../../utils/metaAttribute/index.js';
import '../../utils/assignWithoutSideEffects/index.js';
import '../../utils/logger/index.js';
import '../../utils/isValidAllowedChildren/index.js';
import '../../utils/makeAnalyticsAttribute/index.js';
import { jsx } from 'react/jsx-runtime';
import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
import { isValidAllowedChildren } from '../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
import { throwBladeError } from '../../utils/logger/logger.js';
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
var _excluded = ["children", "size", "maxCount", "testID"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var _AvatarGroup = function _AvatarGroup(_ref) {
var children = _ref.children,
_ref$size = _ref.size,
size = _ref$size === void 0 ? 'medium' : _ref$size,
maxCount = _ref.maxCount,
testID = _ref.testID,
rest = _objectWithoutProperties(_ref, _excluded);
var contextValue = {
size: size
};
var childrenCount = React__default.Children.count(children);
return /*#__PURE__*/jsx(AvatarGroupProvider, {
value: contextValue,
children: /*#__PURE__*/jsx(StyledAvatarGroup, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, metaAttribute({
name: MetaConstants.AvatarGroup,
testID: testID
})), getStyledProps(rest)), makeAnalyticsAttribute(rest)), {}, {
role: "group",
size: size,
children: React__default.Children.map(children, function (child, index) {
if (false) {
// throw error if child is not an Avatar
if (!isValidAllowedChildren(child, 'Avatar')) {
throwBladeError({
moduleName: 'AvatarGroup',
message: "Only \"Avatar\" component is allowed as a children."
});
}
}
if (maxCount && maxCount <= childrenCount) {
if (index === maxCount) {
return /*#__PURE__*/jsx(StyledAvatar, _objectSpread(_objectSpread({}, metaAttribute({
name: MetaConstants.Avatar,
testID: testID
})), {}, {
backgroundColor: "surface.background.gray.intense",
size: size,
variant: "circle",
children: /*#__PURE__*/jsx(AvatarButton, {
variant: "circle",
color: "neutral",
size: size,
children: "+".concat(String(childrenCount - maxCount))
})
}));
}
if (index > maxCount) {
return null;
}
}
return child;
})
}))
});
};
/**
* ### AvatarGroup Component
*
* The AvatarGroup component is used to group Avatars together.
*
* ---
*
* #### Usage
*
* ```jsx
const App = () => {
return (
<AvatarGroup>
<Avatar name="Kamlesh Chandnani" />
<Avatar name="Rama Krushna Behera" />
<Avatar name="Chaitanya Vikas Deorukhkar" />
<Avatar name="Anurag Hazra" />
<Avatar name="Nitin Kumar" />
</AvatarGroup>
);
}
* ```
*
* ---
*
* Checkout {@link https://blade.razorpay.com/?path=/docs/components-avatar-avatargroup AvatarGroup Documentation}
*
*/
var AvatarGroup = /*#__PURE__*/assignWithoutSideEffects(_AvatarGroup, {
displayName: 'AvatarGroup',
componentId: 'AvatarGroup'
});
export { AvatarGroup };
//# sourceMappingURL=AvatarGroup.web.js.map