From 154b4eee76135d0283933c7bcc7bbdbea9993733 Mon Sep 17 00:00:00 2001 From: benmneb <62878664+benmneb@users.noreply.github.com> Date: Sat, 20 Nov 2021 17:03:47 +0800 Subject: [PATCH] add default `className`'s to img, wrapper and iconWrapper and update `className` props to includes the word 'Name' --- README.md | 52 +++++++++++++++++++++++++++------------------------- src/Image.js | 33 +++++++++++++++++++++------------ 2 files changed, 48 insertions(+), 37 deletions(-) diff --git a/README.md b/README.md index 465ed67..79c9333 100644 --- a/README.md +++ b/README.md @@ -23,11 +23,13 @@ ### 1. Install ``` -> npm i mui-image +npm i mui-image +``` or -> yarn add mui-image +``` +yarn add mui-image ``` ### 2. Use @@ -102,34 +104,34 @@ And of course, you can style `mui-image` like you would a regular image... but w ``` -If you want to get fancy 💃 you can also add inline styles and classNames to the root wrapper `div` and loading/error icon wrapper `div`. This allows for complete customisation of every aspect of the component. +If you want to get fancy 💃 you can also add inline styles and additional `className`'s to the root wrapper `div` and loading/error icon wrapper `div`, or just target their default `className`'s. This allows for complete customisation of every aspect of the component. Like and subscribe below for more. ⏬ ## Props -| Name | Type | Default | Description | -| ---------------- | ---------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------- | -| alt | string | "" | image `alt` tag value | -| bgColor | string | "inherit" | the color the image transitions in from | -| className | string | | CSS `class` for the image | -| distance | string / number | 100 | any valid [CSS `length` value](https://developer.mozilla.org/en-US/docs/Web/CSS/length#units) (for the shift) | -| duration | number | 3000 | sets the CSS [`transition-duration`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration) in milliseconds | -| easing | string | cubic-bezier(0.7, 0, 0.6, 1) | sets the CSS [`transition-timing-function`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function) | -| errorIcon | boolean / node | true | display default error icon, or your own | -| fit | string | "contain" | any valid [CSS `object-fit` value](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit#syntax) | -| height | number / string | "100%" | any valid [CSS `height` value](https://developer.mozilla.org/en-US/docs/Web/CSS/height) | -| iconWrapperClass | string | | CSS `class` for the icon wrapper `div` | -| iconWrapperStyle | object | | inline styles for the icon wrapper `div` | -| position | string | "relative" | any valid [CSS `position` value](https://developer.mozilla.org/en-US/docs/Web/CSS/position) | -| shift | boolean / string | false | either "left", "right", "top", "bottom", `null`, or `false` | -| shiftDuration | number | duration \* 0.3 | duration of shift in milliseconds | -| showLoading | boolean / node | false | display default loading spinner, or your own | -| **_src_** \* | string | | image `src` tag... _required_ | -| style | object | | inline styles for the image | -| width | number / string | "100%" | any valid [CSS `width` value](https://developer.mozilla.org/en-US/docs/Web/CSS/width) | -| wrapperClass | string | | CSS `class` for the root wrapper `div` | -| wrapperStyle | object | | inline styles for the root wrapper `div` | +| Name | Type | Default | Description | +| -------------------- | ---------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------- | +| alt | string | "" | image `alt` tag value | +| bgColor | string | "inherit" | the color the image transitions in from | +| className | string | "mui-image-img" | CSS `class` for the image | +| distance | string / number | 100 | any valid [CSS `length` value](https://developer.mozilla.org/en-US/docs/Web/CSS/length#units) (for the shift) | +| duration | number | 3000 | sets the CSS [`transition-duration`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration) in milliseconds | +| easing | string | cubic-bezier(0.7, 0, 0.6, 1) | sets the CSS [`transition-timing-function`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function) | +| errorIcon | boolean / node | true | display default error icon, or your own | +| fit | string | "contain" | any valid [CSS `object-fit` value](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit#syntax) | +| height | number / string | "100%" | any valid [CSS `height` value](https://developer.mozilla.org/en-US/docs/Web/CSS/height) | +| iconWrapperClassName | string | "mui-image-iconWrapper" | CSS `class` for the icon wrapper `div` | +| iconWrapperStyle | object | | inline styles for the icon wrapper `div` | +| position | string | "relative" | any valid [CSS `position` value](https://developer.mozilla.org/en-US/docs/Web/CSS/position) | +| shift | boolean / string | false | either "left", "right", "top", "bottom", `null`, or `false` | +| shiftDuration | number | duration \* 0.3 | duration of shift in milliseconds | +| showLoading | boolean / node | false | display default loading spinner, or your own | +| **_src_** \* | string | | image `src` tag... _required_ | +| style | object | | inline styles for the image | +| width | number / string | "100%" | any valid [CSS `width` value](https://developer.mozilla.org/en-US/docs/Web/CSS/width) | +| wrapperClassName | string | "mui-image-wrapper" | CSS `class` for the root wrapper `div` | +| wrapperStyle | object | | inline styles for the root wrapper `div` | \* required prop diff --git a/src/Image.js b/src/Image.js index bf65b19..c847b63 100644 --- a/src/Image.js +++ b/src/Image.js @@ -43,8 +43,8 @@ export default function Image(props) { bgColor, wrapperStyle, iconWrapperStyle, - wrapperClass, - iconWrapperClass, + wrapperClassName, + iconWrapperClassName, duration, easing, onLoad: onLoadProp, @@ -73,8 +73,8 @@ export default function Image(props) { const styles = { root: { - width: width, - height: height, + width, + height, display: 'flex', justifyContent: 'center', alignItems: 'center', @@ -82,13 +82,13 @@ export default function Image(props) { ...wrapperStyle, }, image: { - position: position, + position, width: '100%', height: '100%', objectFit: fit, - transitionProperty: `${Boolean(shift) ? shift + ', ' : ''}opacity`, + transitionProperty: `${Boolean(shift) ? `${shift}, ` : ''}opacity`, transitionDuration: `${ - Boolean(shift) ? (shiftDuration || duration * 0.3) + 'ms, ' : '' + Boolean(shift) ? `${shiftDuration || duration * 0.3}ms, ` : '' }${duration / 2}ms`, transitionTimingFunction: easing, opacity: loaded ? 1 : 0, @@ -115,18 +115,24 @@ export default function Image(props) { showLoading) || ; return ( -
+
{alt} {(Boolean(showLoading) || Boolean(errorIcon)) && ( -
+
{Boolean(errorIcon) && error && showErrorIcon} {Boolean(showLoading) && !error && !loaded && loadingIndicator}
@@ -149,6 +155,9 @@ Image.defaultProps = { bgColor: 'inherit', duration: 3000, easing: 'cubic-bezier(0.7, 0, 0.6, 1)', // "heavy move" from https://sprawledoctopus.com/easing/ + className: '', + wrapperClassName: '', + iconWrapperClassName: '', }; Image.propTypes = { @@ -166,8 +175,8 @@ Image.propTypes = { bgColor: PropTypes.string, wrapperStyle: PropTypes.object, iconWrapperStyle: PropTypes.object, - wrapperClass: PropTypes.string, - iconWrapperClass: PropTypes.string, + wrapperClassName: PropTypes.string, + iconWrapperClassName: PropTypes.string, duration: PropTypes.number, easing: PropTypes.string, onLoad: PropTypes.func,