Skip to content

Commit

Permalink
add default className's to img, wrapper and iconWrapper and update …
Browse files Browse the repository at this point in the history 
…`className` props to includes the word 'Name'
  • Loading branch information
@benmneb
benmneb committed Nov 20, 2021
1 parent 4bb237e commit 154b4ee
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 37 deletions.
52 changes: 27 additions & 25 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -102,34 +104,34 @@ And of course, you can style `mui-image` like you would a regular image... but w
<Image src="my-exgf.tiff" sx={{ display: { sm: 'none', lg: 'inline' }}} />
```

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

Expand Down
33 changes: 21 additions & 12 deletions src/Image.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,8 @@ export default function Image(props) {
bgColor,
wrapperStyle,
iconWrapperStyle,
wrapperClass,
iconWrapperClass,
wrapperClassName,
iconWrapperClassName,
duration,
easing,
onLoad: onLoadProp,
Expand Down Expand Up @@ -73,22 +73,22 @@ export default function Image(props) {

const styles = {
root: {
width: width,
height: height,
width,
height,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: bgColor,
...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,
Expand All @@ -115,18 +115,24 @@ export default function Image(props) {
showLoading) || <CircularProgress size={56} thickness={6} />;

return (
<div style={styles.root} className={wrapperClass}>
<div
style={styles.root}
className={`mui-image-wrapper ${wrapperClassName}`}
>
<Img
src={src}
alt={alt}
style={styles.image}
className={className}
className={`mui-image-img ${className}`}
onLoad={handleLoad}
onError={handleError}
{...rest}
/>
{(Boolean(showLoading) || Boolean(errorIcon)) && (
<div style={styles.icons} className={iconWrapperClass}>
<div
style={styles.icons}
className={`mui-image-iconWrapper ${iconWrapperClassName}`}
>
{Boolean(errorIcon) && error && showErrorIcon}
{Boolean(showLoading) && !error && !loaded && loadingIndicator}
</div>
Expand All @@ -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 = {
Expand All @@ -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,
Expand Down

0 comments on commit 154b4ee

Please sign in to comment.