@rmwc/avatar - npm Package Compare versions

Comparing version 5.0.27-rc.0 to 5.0.28-rc.0

dist/index.d.ts

@@ -13,2 +13,4 @@ import * as React from 'react';
     square?: boolean;
+    /** Make the avatar interactive. */
+    interactive?: boolean;
 }
@@ -23,3 +25,3 @@ export interface AvatarGroupProps {
 export declare const Avatar: {
-    ({ src, size, name, ...rest }: AvatarProps & RMWC.ComponentProps): JSX.Element;
+    ({ src, size, name, interactive, ...rest }: AvatarProps & RMWC.ComponentProps): JSX.Element;
     displayName: string;
@@ -36,7 +38,9 @@ };
     square?: boolean;
+    /** Make the avatar interactive. */
+    interactive?: boolean;
 }
 /** An Avatar count for displaying list overflow. */
 export declare const AvatarCount: {
-    ({ value, overflow, size, ...rest }: AvatarCountProps & RMWC.ComponentProps): JSX.Element;
+    ({ value, overflow, size, interactive, ...rest }: AvatarCountProps & RMWC.ComponentProps): JSX.Element;
     displayName: string;
 };

dist/index.js

@@ -33,2 +33,3 @@ "use strict";
 var icon_1 = require("@rmwc/icon");
+var ripple_1 = require("@rmwc/ripple");
 var getInitialsForName = function (name) {
@@ -49,3 +50,3 @@ if (name === void 0) { name = ''; }
 };
-var AvatarRoot = base_1.componentFactory({
+var AvatarRoot = ripple_1.withRipple()(base_1.componentFactory({
     displayName: 'AvatarRoot',
@@ -59,2 +60,3 @@ classNames: function (props) {
                 _a['rmwc-avatar--count'] = props.isCount,
+                _a['rmwc-avatar--interactive'] = props.interactive,
                 _a['rmwc-avatar--count-overflow'] = props.overflow,
@@ -67,9 +69,10 @@ _a['rmwc-avatar--smaller-text'] = props.smallerText,
     tag: icon_1.Icon,
-    consumeProps: ['isCount', 'overflow', 'smallerText', 'square']
-});
-var AvatarIcon = base_1.componentFactory({
-    displayName: 'AvatarIcon',
-    classNames: ['rmwc-avatar__icon'],
-    tag: icon_1.Icon
-});
+    consumeProps: [
+        'isCount',
+        'overflow',
+        'smallerText',
+        'square',
+        'interactive'
+    ]
+}));
 /** A container for groups of Avatars */
@@ -88,5 +91,5 @@ exports.AvatarGroup = base_1.componentFactory({
 exports.Avatar = function (_a) {
-    var src = _a.src, size = _a.size, _b = _a.name, name = _b === void 0 ? '' : _b, rest = __rest(_a, ["src", "size", "name"]);
+    var src = _a.src, size = _a.size, _b = _a.name, name = _b === void 0 ? '' : _b, _c = _a.interactive, interactive = _c === void 0 ? false : _c, rest = __rest(_a, ["src", "size", "name", "interactive"]);
     var initials = getInitialsForName(name);
-    return (React.createElement(AvatarRoot, __assign({ size: size, title: name, tag: 'span' }, rest, { icon: {
+    return (React.createElement(AvatarRoot, __assign({ ripple: interactive, interactive: interactive, size: size, title: name, tag: 'span' }, rest, { icon: {
             icon: (React.createElement(React.Fragment, null,
@@ -103,5 +106,5 @@ React.createElement("div", { className: "rmwc-avatar__icon", style: {
 exports.AvatarCount = function (_a) {
-    var value = _a.value, overflow = _a.overflow, size = _a.size, rest = __rest(_a, ["value", "overflow", "size"]);
+    var value = _a.value, overflow = _a.overflow, size = _a.size, _b = _a.interactive, interactive = _b === void 0 ? false : _b, rest = __rest(_a, ["value", "overflow", "size", "interactive"]);
     var smallerText = String(value).length > 2;
-    return (React.createElement(AvatarRoot, __assign({}, rest, { isCount: true, size: size, overflow: overflow, smallerText: smallerText, tag: 'span' }, rest, { icon: {
+    return (React.createElement(AvatarRoot, __assign({}, rest, { ripple: interactive, interactive: interactive, isCount: true, size: size, overflow: overflow, smallerText: smallerText, tag: 'span' }, rest, { icon: {
             icon: (React.createElement(React.Fragment, null,
@@ -108,0 +111,0 @@ React.createElement("div", { className: "rmwc-avatar__text" },

next/index.d.ts

@@ -13,2 +13,4 @@ import * as React from 'react';
     square?: boolean;
+    /** Make the avatar interactive. */
+    interactive?: boolean;
 }
@@ -23,3 +25,3 @@ export interface AvatarGroupProps {
 export declare const Avatar: {
-    ({ src, size, name, ...rest }: AvatarProps & RMWC.ComponentProps): JSX.Element;
+    ({ src, size, name, interactive, ...rest }: AvatarProps & RMWC.ComponentProps): JSX.Element;
     displayName: string;
@@ -36,7 +38,9 @@ };
     square?: boolean;
+    /** Make the avatar interactive. */
+    interactive?: boolean;
 }
 /** An Avatar count for displaying list overflow. */
 export declare const AvatarCount: {
-    ({ value, overflow, size, ...rest }: AvatarCountProps & RMWC.ComponentProps): JSX.Element;
+    ({ value, overflow, size, interactive, ...rest }: AvatarCountProps & RMWC.ComponentProps): JSX.Element;
     displayName: string;
 };

next/index.js

@@ -24,2 +24,3 @@ var __assign = (this && this.__assign) || function () {
 import { Icon } from '@rmwc/icon';
+import { withRipple } from '@rmwc/ripple';
 var getInitialsForName = function (name) {
@@ -40,3 +41,3 @@ if (name === void 0) { name = ''; }
 };
-var AvatarRoot = componentFactory({
+var AvatarRoot = withRipple()(componentFactory({
     displayName: 'AvatarRoot',
@@ -50,2 +51,3 @@ classNames: function (props) {
                 _a['rmwc-avatar--count'] = props.isCount,
+                _a['rmwc-avatar--interactive'] = props.interactive,
                 _a['rmwc-avatar--count-overflow'] = props.overflow,
@@ -58,9 +60,10 @@ _a['rmwc-avatar--smaller-text'] = props.smallerText,
     tag: Icon,
-    consumeProps: ['isCount', 'overflow', 'smallerText', 'square']
-});
-var AvatarIcon = componentFactory({
-    displayName: 'AvatarIcon',
-    classNames: ['rmwc-avatar__icon'],
-    tag: Icon
-});
+    consumeProps: [
+        'isCount',
+        'overflow',
+        'smallerText',
+        'square',
+        'interactive'
+    ]
+}));
 /** A container for groups of Avatars */
@@ -79,5 +82,5 @@ export var AvatarGroup = componentFactory({
 export var Avatar = function (_a) {
-    var src = _a.src, size = _a.size, _b = _a.name, name = _b === void 0 ? '' : _b, rest = __rest(_a, ["src", "size", "name"]);
+    var src = _a.src, size = _a.size, _b = _a.name, name = _b === void 0 ? '' : _b, _c = _a.interactive, interactive = _c === void 0 ? false : _c, rest = __rest(_a, ["src", "size", "name", "interactive"]);
     var initials = getInitialsForName(name);
-    return (React.createElement(AvatarRoot, __assign({ size: size, title: name, tag: 'span' }, rest, { icon: {
+    return (React.createElement(AvatarRoot, __assign({ ripple: interactive, interactive: interactive, size: size, title: name, tag: 'span' }, rest, { icon: {
             icon: (React.createElement(React.Fragment, null,
@@ -94,5 +97,5 @@ React.createElement("div", { className: "rmwc-avatar__icon", style: {
 export var AvatarCount = function (_a) {
-    var value = _a.value, overflow = _a.overflow, size = _a.size, rest = __rest(_a, ["value", "overflow", "size"]);
+    var value = _a.value, overflow = _a.overflow, size = _a.size, _b = _a.interactive, interactive = _b === void 0 ? false : _b, rest = __rest(_a, ["value", "overflow", "size", "interactive"]);
     var smallerText = String(value).length > 2;
-    return (React.createElement(AvatarRoot, __assign({}, rest, { isCount: true, size: size, overflow: overflow, smallerText: smallerText, tag: 'span' }, rest, { icon: {
+    return (React.createElement(AvatarRoot, __assign({}, rest, { ripple: interactive, interactive: interactive, isCount: true, size: size, overflow: overflow, smallerText: smallerText, tag: 'span' }, rest, { icon: {
             icon: (React.createElement(React.Fragment, null,
@@ -99,0 +102,0 @@ React.createElement("div", { className: "rmwc-avatar__text" },

package.json

 {
   "name": "@rmwc/avatar",
-  "version": "5.0.27-rc.0",
+  "version": "5.0.28-rc.0",
   "description": "RMWC avatar component",
@@ -34,5 +34,5 @@ "main": "dist/index.js",
   "dependencies": {
-    "@rmwc/base": "^5.0.27-rc.0"
+    "@rmwc/base": "^5.0.28-rc.0"
   },
-  "gitHead": "cfb1ca54e7862c96bb7b3db217ac17090bac78a6"
+  "gitHead": "8ffea0c707eebcfe1da303ff09c1c51881af6c60"
 }

README.md

@@ -66,2 +66,3 @@ # Avatars `RMWC Addon`
     size="large"
+    interactive
   />
@@ -72,2 +73,3 @@ <Avatar
     size="large"
+    interactive
   />
@@ -77,2 +79,3 @@ <AvatarCount
     value={12}
+    interactive
   />
@@ -86,2 +89,3 @@ </AvatarGroup>
     size="large"
+    interactive
   />
@@ -92,2 +96,3 @@ <Avatar
     size="large"
+    interactive
   />
@@ -98,2 +103,3 @@ <AvatarCount
     value={4}
+    interactive
   />
@@ -100,0 +106,0 @@ </AvatarGroup>

No alert changes

Improved metrics

Total package byte prevSize

1311381

increased by0.11%

Lines of code

57523

increased by0.06%

Number of lines in readme file

154

increased by4.05%

Dependency changes

• Updated@rmwc/base@^5.0.28-rc.0