Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@react-md/avatar
Advanced tools
@react-md/avatar - npm Package Compare versions
Comparing version 2.1.2 to 2.2.0
@@ -6,2 +6,15 @@ # Change Log | ||
| # [2.2.0](https://github.com/mlaursen/react-md/compare/v2.1.2...v2.2.0) (2020-08-11) | ||
| ### Features | ||
| - **avatar:** Added ability to pass props to `<img>` | ||
| ([11848ee](https://github.com/mlaursen/react-md/commit/11848ee80b5aca0416ea3e0f4812746dd47d90b7)), | ||
| closes [#908](https://github.com/mlaursen/react-md/issues/908) | ||
| # Change Log | ||
| All notable changes to this project will be documented in this file. See | ||
| [Conventional Commits](https://conventionalcommits.org) for commit guidelines. | ||
| ## [2.1.2](https://github.com/mlaursen/react-md/compare/v2.1.1...v2.1.2) (2020-08-01) | ||
@@ -8,0 +21,0 @@ |
@@ -35,6 +35,6 @@ var __assign = (this && this.__assign) || function () { | ||
| var _b; | ||
| var className = _a.className, children = _a.children, src = _a.src, _c = _a.alt, alt = _c === void 0 ? "" : _c, _d = _a.color, color = _d === void 0 ? "" : _d, props = __rest(_a, ["className", "children", "src", "alt", "color"]); | ||
| var className = _a.className, children = _a.children, src = _a.src, _c = _a.alt, alt = _c === void 0 ? "" : _c, _d = _a.color, color = _d === void 0 ? "" : _d, imgProps = _a.imgProps, referrerPolicy = _a.referrerPolicy, props = __rest(_a, ["className", "children", "src", "alt", "color", "imgProps", "referrerPolicy"]); | ||
| var img; | ||
| if (src) { | ||
| img = React.createElement("img", { src: src, alt: alt, className: block("image") }); | ||
| if (src || imgProps) { | ||
| img = (React.createElement("img", __assign({ src: src, alt: alt, referrerPolicy: referrerPolicy }, imgProps, { className: cn(block("image"), imgProps === null || imgProps === void 0 ? void 0 : imgProps.className) }))); | ||
| } | ||
@@ -54,2 +54,6 @@ return (React.createElement("span", __assign({}, props, { ref: ref, className: cn(block((_b = {}, _b[color] = color, _b)), className) }), | ||
| children: PropTypes.node, | ||
| // Note: The MDN website has a lot more values, but this is what Typescript | ||
| // says is valid at the time of writing this | ||
| referrerPolicy: PropTypes.oneOf(["no-referrer", "origin", "unsafe-url"]), | ||
| imgProps: PropTypes.object, | ||
| }; | ||
@@ -56,0 +60,0 @@ } |
@@ -1,2 +0,4 @@ | ||
| import React, { HTMLAttributes } from "react"; | ||
| import React, { HTMLAttributes, ImgHTMLAttributes } from "react"; | ||
| import { PropsWithRef } from "@react-md/utils"; | ||
| declare type ImgAttributes = ImgHTMLAttributes<HTMLImageElement>; | ||
| export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> { | ||
@@ -20,2 +22,23 @@ /** | ||
| /** | ||
| * An optional `referrerPolicy` to provide to the `<img>` element if the `src` | ||
| * or `imgProps` props are provided. | ||
| * | ||
| * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-referrerpolicy | ||
| * | ||
| * @since 2.2.0 | ||
| */ | ||
| referrerPolicy?: ImgAttributes["referrerPolicy"]; | ||
| /** | ||
| * An optional object of image props and ref that can be used to create an | ||
| * image within the `Avatar`. This can be useful to add a custom `style` | ||
| * or`className` to the `<img>` element if that additional customization is | ||
| * needed. | ||
| * | ||
| * Note: The values in this object will override the `src`, `alt`, and | ||
| * `referrerPolicy` root level avatar props if they exist on this object. | ||
| * | ||
| * @since 2.2.0 | ||
| */ | ||
| imgProps?: PropsWithRef<ImgAttributes, HTMLImageElement>; | ||
| /** | ||
| * An optional color to apply to the avatar. This will apply a className of | ||
@@ -22,0 +45,0 @@ * `rmd-avatar--${color}`, so only the keys from the `$rmd-avatar-colors` Map |
@@ -59,6 +59,6 @@ "use strict"; | ||
| var _b; | ||
| var className = _a.className, children = _a.children, src = _a.src, _c = _a.alt, alt = _c === void 0 ? "" : _c, _d = _a.color, color = _d === void 0 ? "" : _d, props = __rest(_a, ["className", "children", "src", "alt", "color"]); | ||
| var className = _a.className, children = _a.children, src = _a.src, _c = _a.alt, alt = _c === void 0 ? "" : _c, _d = _a.color, color = _d === void 0 ? "" : _d, imgProps = _a.imgProps, referrerPolicy = _a.referrerPolicy, props = __rest(_a, ["className", "children", "src", "alt", "color", "imgProps", "referrerPolicy"]); | ||
| var img; | ||
| if (src) { | ||
| img = react_1.default.createElement("img", { src: src, alt: alt, className: block("image") }); | ||
| if (src || imgProps) { | ||
| img = (react_1.default.createElement("img", __assign({ src: src, alt: alt, referrerPolicy: referrerPolicy }, imgProps, { className: classnames_1.default(block("image"), imgProps === null || imgProps === void 0 ? void 0 : imgProps.className) }))); | ||
| } | ||
@@ -78,2 +78,6 @@ return (react_1.default.createElement("span", __assign({}, props, { ref: ref, className: classnames_1.default(block((_b = {}, _b[color] = color, _b)), className) }), | ||
| children: PropTypes.node, | ||
| // Note: The MDN website has a lot more values, but this is what Typescript | ||
| // says is valid at the time of writing this | ||
| referrerPolicy: PropTypes.oneOf(["no-referrer", "origin", "unsafe-url"]), | ||
| imgProps: PropTypes.object, | ||
| }; | ||
@@ -80,0 +84,0 @@ } |
| { | ||
| "name": "@react-md/avatar", | ||
| "version": "2.1.2", | ||
| "version": "2.2.0", | ||
| "description": "This package is used to avatars which are used to symbolize people or objects.", | ||
@@ -61,3 +61,3 @@ "scripts": { | ||
| }, | ||
| "gitHead": "b37e2fd0ec3413111e81e994f54cef68a113103f" | ||
| "gitHead": "0a4024848493b6ef1ed37c591ac68781360b8f45" | ||
| } |
@@ -1,2 +0,4 @@ | ||
| import React, { HTMLAttributes } from "react"; | ||
| import React, { HTMLAttributes, ImgHTMLAttributes } from "react"; | ||
| import { PropsWithRef } from "@react-md/utils"; | ||
| declare type ImgAttributes = ImgHTMLAttributes<HTMLImageElement>; | ||
| export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> { | ||
@@ -20,2 +22,23 @@ /** | ||
| /** | ||
| * An optional `referrerPolicy` to provide to the `<img>` element if the `src` | ||
| * or `imgProps` props are provided. | ||
| * | ||
| * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-referrerpolicy | ||
| * | ||
| * @since 2.2.0 | ||
| */ | ||
| referrerPolicy?: ImgAttributes["referrerPolicy"]; | ||
| /** | ||
| * An optional object of image props and ref that can be used to create an | ||
| * image within the `Avatar`. This can be useful to add a custom `style` | ||
| * or`className` to the `<img>` element if that additional customization is | ||
| * needed. | ||
| * | ||
| * Note: The values in this object will override the `src`, `alt`, and | ||
| * `referrerPolicy` root level avatar props if they exist on this object. | ||
| * | ||
| * @since 2.2.0 | ||
| */ | ||
| imgProps?: PropsWithRef<ImgAttributes, HTMLImageElement>; | ||
| /** | ||
| * An optional color to apply to the avatar. This will apply a className of | ||
@@ -22,0 +45,0 @@ * `rmd-avatar--${color}`, so only the keys from the `$rmd-avatar-colors` Map |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by11.61%
66631
- Lines of code
- increased by27.33%
629
No dependency changes