@sproutsocial/seeds-react-image 1.0.14 → 1.0.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -8,14 +8,14 @@ $ tsup --dts
8
8
  CLI Cleaning output folder
9
9
  CJS Build start
10
10
  ESM Build start
11
- CJS dist/index.js 3.89 KB
11
+ CJS dist/index.js 3.88 KB
12
12
  CJS dist/index.js.map 5.26 KB
13
- CJS ⚡️ Build success in 14ms
14
- ESM dist/esm/index.js 2.10 KB
15
- ESM dist/esm/index.js.map 5.21 KB
16
- ESM ⚡️ Build success in 16ms
13
+ CJS ⚡️ Build success in 87ms
14
+ ESM dist/esm/index.js 2.09 KB
15
+ ESM dist/esm/index.js.map 5.20 KB
16
+ ESM ⚡️ Build success in 88ms
17
17
  DTS Build start
18
- DTS ⚡️ Build success in 5144ms
18
+ DTS ⚡️ Build success in 4134ms
19
19
  DTS dist/index.d.ts 1.50 KB
20
20
  DTS dist/index.d.mts 1.50 KB
21
- Done in 6.15s.
21
+ Done in 5.09s.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,55 @@
1
1
  # @sproutsocial/seeds-react-image
2
2
 
3
+ ## 1.0.21
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [5892f44]
8
+ - @sproutsocial/seeds-react-system-props@3.1.1
9
+
10
+ ## 1.0.20
11
+
12
+ ### Patch Changes
13
+
14
+ - Updated dependencies [5114a32]
15
+ - @sproutsocial/seeds-react-theme@4.1.0
16
+
17
+ ## 1.0.19
18
+
19
+ ### Patch Changes
20
+
21
+ - Updated dependencies [132ef9d]
22
+ - Updated dependencies [132ef9d]
23
+ - @sproutsocial/seeds-react-theme@4.0.0
24
+ - @sproutsocial/seeds-react-system-props@3.1.0
25
+
26
+ ## 1.0.18
27
+
28
+ ### Patch Changes
29
+
30
+ - Updated dependencies [47c62b3]
31
+ - @sproutsocial/seeds-react-theme@3.7.1
32
+
33
+ ## 1.0.17
34
+
35
+ ### Patch Changes
36
+
37
+ - Updated dependencies [06da9c2]
38
+ - @sproutsocial/seeds-react-theme@3.7.0
39
+
40
+ ## 1.0.16
41
+
42
+ ### Patch Changes
43
+
44
+ - 3c6423a: Fix alt text screenreader handling for image failures when no default image provided
45
+
46
+ ## 1.0.15
47
+
48
+ ### Patch Changes
49
+
50
+ - Updated dependencies [4ba8720]
51
+ - @sproutsocial/seeds-react-theme@3.6.2
52
+
3
53
  ## 1.0.14
4
54
 
5
55
  ### Patch Changes
package/dist/esm/index.js CHANGED
@@ -10,7 +10,7 @@ var ImageContainer = styled.img.attrs({
10
10
  display: block;
11
11
 
12
12
  ${(props) => props.isLoading && css`
13
- visibility: hidden;
13
+ opacity: 0;
14
14
  `}
15
15
 
16
16
  ${COMMON}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Image.tsx","../../src/styles.ts","../../src/ImageTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport ImageContainer from \"./styles\";\nimport type { TypeImageProps } from \"./ImageTypes\";\n\ntype TypeState = {\n didError: boolean;\n didLoad: boolean;\n imageUrl: string;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = () => {};\n\nexport default class Image extends React.Component<TypeImageProps, TypeState> {\n static defaultProps = {\n title: \"\",\n onError: noop,\n onClick: noop,\n onLoad: noop,\n };\n\n override state = {\n didError: false,\n didLoad: false,\n imageUrl: this.props.src,\n };\n\n imageRef?: HTMLImageElement | null;\n\n override componentDidMount() {\n // eslint-disable-next-line react/no-did-mount-set-state\n if (this.imageRef) {\n this.setState({\n didLoad: this.imageRef.complete,\n });\n }\n }\n\n override componentDidUpdate(prevProps: TypeImageProps) {\n if (this.props.src !== prevProps.src) {\n this.setState({\n didError: false,\n didLoad: false,\n imageUrl: this.props.src,\n });\n }\n }\n\n onError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {\n if (!this.state.didError && this.props.defaultImage) {\n this.setState({\n didError: true,\n imageUrl: this.props.defaultImage,\n });\n }\n\n this.props.onError(e);\n };\n\n onLoad = () => {\n this.setState({\n didLoad: true,\n });\n this.props.onLoad();\n };\n\n onClick = () => {\n this.props.onClick();\n };\n\n override render() {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { alt, title, onClick, onError, onLoad, src, qa, ...rest } =\n this.props;\n return (\n <ImageContainer\n isLoading={!this.state.didLoad}\n ref={(img) => (this.imageRef = img)}\n onClick={this.onClick}\n src={this.state.imageUrl}\n onError={(e: React.SyntheticEvent<HTMLImageElement, Event>) =>\n this.onError(e)\n }\n onLoad={this.onLoad}\n alt={alt}\n title={title}\n data-qa-image={title ? title : alt ? alt : \"\"}\n data-qa-image-src={src || \"\"}\n {...(qa as any)}\n {...rest}\n />\n );\n }\n}\n","import styled, { css } from \"styled-components\";\nimport { COMMON, LAYOUT } from \"@sproutsocial/seeds-react-system-props\";\n\ninterface ImageContainerProps {\n isLoading?: boolean;\n}\nconst ImageContainer = styled.img.attrs({\n className: \"Image\",\n})<ImageContainerProps>`\n display: block;\n\n ${(props) =>\n props.isLoading &&\n css`\n visibility: hidden;\n `}\n\n ${COMMON}\n ${LAYOUT}\n`;\n\nexport default ImageContainer;\n","import * as React from \"react\";\nimport type {\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeImageProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n Omit<React.ComponentPropsWithoutRef<\"img\">, \"color\" | \"height\" | \"width\"> {\n src: string;\n\n /** Alt text is required for non-decorative images */\n alt: string;\n title: string;\n onError: (e: React.SyntheticEvent<HTMLImageElement, Event>) => void;\n onClick: () => void;\n\n /** A URL for a default image to load if the source image is not available */\n defaultImage?: string;\n onLoad: () => void;\n qa?: object;\n}\n","import Image from \"./Image\";\n\nexport default Image;\nexport { Image };\nexport * from \"./ImageTypes\";\n"],"mappings":";AAAA,YAAY,WAAW;;;ACAvB,OAAO,UAAU,WAAW;AAC5B,SAAS,QAAQ,cAAc;AAK/B,IAAM,iBAAiB,OAAO,IAAI,MAAM;AAAA,EACtC,WAAW;AACb,CAAC;AAAA;AAAA;AAAA,IAGG,CAAC,UACD,MAAM,aACN;AAAA;AAAA,KAEC;AAAA;AAAA,IAED,MAAM;AAAA,IACN,MAAM;AAAA;AAGV,IAAO,iBAAQ;;;ADsDT;AAhEN,IAAM,OAAO,MAAM;AAAC;AAEpB,IAAqB,QAArB,cAAyC,gBAAqC;AAAA,EAC5E,OAAO,eAAe;AAAA,IACpB,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EAES,QAAQ;AAAA,IACf,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU,KAAK,MAAM;AAAA,EACvB;AAAA,EAEA;AAAA,EAES,oBAAoB;AAE3B,QAAI,KAAK,UAAU;AACjB,WAAK,SAAS;AAAA,QACZ,SAAS,KAAK,SAAS;AAAA,MACzB,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAES,mBAAmB,WAA2B;AACrD,QAAI,KAAK,MAAM,QAAQ,UAAU,KAAK;AACpC,WAAK,SAAS;AAAA,QACZ,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU,KAAK,MAAM;AAAA,MACvB,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEA,UAAU,CAAC,MAAqD;AAC9D,QAAI,CAAC,KAAK,MAAM,YAAY,KAAK,MAAM,cAAc;AACnD,WAAK,SAAS;AAAA,QACZ,UAAU;AAAA,QACV,UAAU,KAAK,MAAM;AAAA,MACvB,CAAC;AAAA,IACH;AAEA,SAAK,MAAM,QAAQ,CAAC;AAAA,EACtB;AAAA,EAEA,SAAS,MAAM;AACb,SAAK,SAAS;AAAA,MACZ,SAAS;AAAA,IACX,CAAC;AACD,SAAK,MAAM,OAAO;AAAA,EACpB;AAAA,EAEA,UAAU,MAAM;AACd,SAAK,MAAM,QAAQ;AAAA,EACrB;AAAA,EAES,SAAS;AAEhB,UAAM,EAAE,KAAK,OAAO,SAAS,SAAS,QAAQ,KAAK,IAAI,GAAG,KAAK,IAC7D,KAAK;AACP,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,CAAC,KAAK,MAAM;AAAA,QACvB,KAAK,CAAC,QAAS,KAAK,WAAW;AAAA,QAC/B,SAAS,KAAK;AAAA,QACd,KAAK,KAAK,MAAM;AAAA,QAChB,SAAS,CAAC,MACR,KAAK,QAAQ,CAAC;AAAA,QAEhB,QAAQ,KAAK;AAAA,QACb;AAAA,QACA;AAAA,QACA,iBAAe,QAAQ,QAAQ,MAAM,MAAM;AAAA,QAC3C,qBAAmB,OAAO;AAAA,QACzB,GAAI;AAAA,QACJ,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;;;AE7FA,OAAuB;;;ACEvB,IAAO,gBAAQ;","names":[]}
1
+ {"version":3,"sources":["../../src/Image.tsx","../../src/styles.ts","../../src/ImageTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport ImageContainer from \"./styles\";\nimport type { TypeImageProps } from \"./ImageTypes\";\n\ntype TypeState = {\n didError: boolean;\n didLoad: boolean;\n imageUrl: string;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = () => {};\n\nexport default class Image extends React.Component<TypeImageProps, TypeState> {\n static defaultProps = {\n title: \"\",\n onError: noop,\n onClick: noop,\n onLoad: noop,\n };\n\n override state = {\n didError: false,\n didLoad: false,\n imageUrl: this.props.src,\n };\n\n imageRef?: HTMLImageElement | null;\n\n override componentDidMount() {\n // eslint-disable-next-line react/no-did-mount-set-state\n if (this.imageRef) {\n this.setState({\n didLoad: this.imageRef.complete,\n });\n }\n }\n\n override componentDidUpdate(prevProps: TypeImageProps) {\n if (this.props.src !== prevProps.src) {\n this.setState({\n didError: false,\n didLoad: false,\n imageUrl: this.props.src,\n });\n }\n }\n\n onError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {\n if (!this.state.didError && this.props.defaultImage) {\n this.setState({\n didError: true,\n imageUrl: this.props.defaultImage,\n });\n }\n\n this.props.onError(e);\n };\n\n onLoad = () => {\n this.setState({\n didLoad: true,\n });\n this.props.onLoad();\n };\n\n onClick = () => {\n this.props.onClick();\n };\n\n override render() {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { alt, title, onClick, onError, onLoad, src, qa, ...rest } =\n this.props;\n return (\n <ImageContainer\n isLoading={!this.state.didLoad}\n ref={(img) => (this.imageRef = img)}\n onClick={this.onClick}\n src={this.state.imageUrl}\n onError={(e: React.SyntheticEvent<HTMLImageElement, Event>) =>\n this.onError(e)\n }\n onLoad={this.onLoad}\n alt={alt}\n title={title}\n data-qa-image={title ? title : alt ? alt : \"\"}\n data-qa-image-src={src || \"\"}\n {...(qa as any)}\n {...rest}\n />\n );\n }\n}\n","import styled, { css } from \"styled-components\";\nimport { COMMON, LAYOUT } from \"@sproutsocial/seeds-react-system-props\";\n\ninterface ImageContainerProps {\n isLoading?: boolean;\n}\nconst ImageContainer = styled.img.attrs({\n className: \"Image\",\n})<ImageContainerProps>`\n display: block;\n\n ${(props) =>\n props.isLoading &&\n css`\n opacity: 0;\n `}\n\n ${COMMON}\n ${LAYOUT}\n`;\n\nexport default ImageContainer;\n","import * as React from \"react\";\nimport type {\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeImageProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n Omit<React.ComponentPropsWithoutRef<\"img\">, \"color\" | \"height\" | \"width\"> {\n src: string;\n\n /** Alt text is required for non-decorative images */\n alt: string;\n title: string;\n onError: (e: React.SyntheticEvent<HTMLImageElement, Event>) => void;\n onClick: () => void;\n\n /** A URL for a default image to load if the source image is not available */\n defaultImage?: string;\n onLoad: () => void;\n qa?: object;\n}\n","import Image from \"./Image\";\n\nexport default Image;\nexport { Image };\nexport * from \"./ImageTypes\";\n"],"mappings":";AAAA,YAAY,WAAW;;;ACAvB,OAAO,UAAU,WAAW;AAC5B,SAAS,QAAQ,cAAc;AAK/B,IAAM,iBAAiB,OAAO,IAAI,MAAM;AAAA,EACtC,WAAW;AACb,CAAC;AAAA;AAAA;AAAA,IAGG,CAAC,UACD,MAAM,aACN;AAAA;AAAA,KAEC;AAAA;AAAA,IAED,MAAM;AAAA,IACN,MAAM;AAAA;AAGV,IAAO,iBAAQ;;;ADsDT;AAhEN,IAAM,OAAO,MAAM;AAAC;AAEpB,IAAqB,QAArB,cAAyC,gBAAqC;AAAA,EAC5E,OAAO,eAAe;AAAA,IACpB,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EAES,QAAQ;AAAA,IACf,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU,KAAK,MAAM;AAAA,EACvB;AAAA,EAEA;AAAA,EAES,oBAAoB;AAE3B,QAAI,KAAK,UAAU;AACjB,WAAK,SAAS;AAAA,QACZ,SAAS,KAAK,SAAS;AAAA,MACzB,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAES,mBAAmB,WAA2B;AACrD,QAAI,KAAK,MAAM,QAAQ,UAAU,KAAK;AACpC,WAAK,SAAS;AAAA,QACZ,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU,KAAK,MAAM;AAAA,MACvB,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEA,UAAU,CAAC,MAAqD;AAC9D,QAAI,CAAC,KAAK,MAAM,YAAY,KAAK,MAAM,cAAc;AACnD,WAAK,SAAS;AAAA,QACZ,UAAU;AAAA,QACV,UAAU,KAAK,MAAM;AAAA,MACvB,CAAC;AAAA,IACH;AAEA,SAAK,MAAM,QAAQ,CAAC;AAAA,EACtB;AAAA,EAEA,SAAS,MAAM;AACb,SAAK,SAAS;AAAA,MACZ,SAAS;AAAA,IACX,CAAC;AACD,SAAK,MAAM,OAAO;AAAA,EACpB;AAAA,EAEA,UAAU,MAAM;AACd,SAAK,MAAM,QAAQ;AAAA,EACrB;AAAA,EAES,SAAS;AAEhB,UAAM,EAAE,KAAK,OAAO,SAAS,SAAS,QAAQ,KAAK,IAAI,GAAG,KAAK,IAC7D,KAAK;AACP,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,CAAC,KAAK,MAAM;AAAA,QACvB,KAAK,CAAC,QAAS,KAAK,WAAW;AAAA,QAC/B,SAAS,KAAK;AAAA,QACd,KAAK,KAAK,MAAM;AAAA,QAChB,SAAS,CAAC,MACR,KAAK,QAAQ,CAAC;AAAA,QAEhB,QAAQ,KAAK;AAAA,QACb;AAAA,QACA;AAAA,QACA,iBAAe,QAAQ,QAAQ,MAAM,MAAM;AAAA,QAC3C,qBAAmB,OAAO;AAAA,QACzB,GAAI;AAAA,QACJ,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;;;AE7FA,OAAuB;;;ACEvB,IAAO,gBAAQ;","names":[]}
package/dist/index.js CHANGED
@@ -47,7 +47,7 @@ var ImageContainer = import_styled_components.default.img.attrs({
47
47
  display: block;
48
48
 
49
49
  ${(props) => props.isLoading && import_styled_components.css`
50
- visibility: hidden;
50
+ opacity: 0;
51
51
  `}
52
52
 
53
53
  ${import_seeds_react_system_props.COMMON}
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/Image.tsx","../src/styles.ts","../src/ImageTypes.ts"],"sourcesContent":["import Image from \"./Image\";\n\nexport default Image;\nexport { Image };\nexport * from \"./ImageTypes\";\n","import * as React from \"react\";\nimport ImageContainer from \"./styles\";\nimport type { TypeImageProps } from \"./ImageTypes\";\n\ntype TypeState = {\n didError: boolean;\n didLoad: boolean;\n imageUrl: string;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = () => {};\n\nexport default class Image extends React.Component<TypeImageProps, TypeState> {\n static defaultProps = {\n title: \"\",\n onError: noop,\n onClick: noop,\n onLoad: noop,\n };\n\n override state = {\n didError: false,\n didLoad: false,\n imageUrl: this.props.src,\n };\n\n imageRef?: HTMLImageElement | null;\n\n override componentDidMount() {\n // eslint-disable-next-line react/no-did-mount-set-state\n if (this.imageRef) {\n this.setState({\n didLoad: this.imageRef.complete,\n });\n }\n }\n\n override componentDidUpdate(prevProps: TypeImageProps) {\n if (this.props.src !== prevProps.src) {\n this.setState({\n didError: false,\n didLoad: false,\n imageUrl: this.props.src,\n });\n }\n }\n\n onError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {\n if (!this.state.didError && this.props.defaultImage) {\n this.setState({\n didError: true,\n imageUrl: this.props.defaultImage,\n });\n }\n\n this.props.onError(e);\n };\n\n onLoad = () => {\n this.setState({\n didLoad: true,\n });\n this.props.onLoad();\n };\n\n onClick = () => {\n this.props.onClick();\n };\n\n override render() {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { alt, title, onClick, onError, onLoad, src, qa, ...rest } =\n this.props;\n return (\n <ImageContainer\n isLoading={!this.state.didLoad}\n ref={(img) => (this.imageRef = img)}\n onClick={this.onClick}\n src={this.state.imageUrl}\n onError={(e: React.SyntheticEvent<HTMLImageElement, Event>) =>\n this.onError(e)\n }\n onLoad={this.onLoad}\n alt={alt}\n title={title}\n data-qa-image={title ? title : alt ? alt : \"\"}\n data-qa-image-src={src || \"\"}\n {...(qa as any)}\n {...rest}\n />\n );\n }\n}\n","import styled, { css } from \"styled-components\";\nimport { COMMON, LAYOUT } from \"@sproutsocial/seeds-react-system-props\";\n\ninterface ImageContainerProps {\n isLoading?: boolean;\n}\nconst ImageContainer = styled.img.attrs({\n className: \"Image\",\n})<ImageContainerProps>`\n display: block;\n\n ${(props) =>\n props.isLoading &&\n css`\n visibility: hidden;\n `}\n\n ${COMMON}\n ${LAYOUT}\n`;\n\nexport default ImageContainer;\n","import * as React from \"react\";\nimport type {\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeImageProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n Omit<React.ComponentPropsWithoutRef<\"img\">, \"color\" | \"height\" | \"width\"> {\n src: string;\n\n /** Alt text is required for non-decorative images */\n alt: string;\n title: string;\n onError: (e: React.SyntheticEvent<HTMLImageElement, Event>) => void;\n onClick: () => void;\n\n /** A URL for a default image to load if the source image is not available */\n defaultImage?: string;\n onLoad: () => void;\n qa?: object;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;;;ACAvB,+BAA4B;AAC5B,sCAA+B;AAK/B,IAAM,iBAAiB,yBAAAA,QAAO,IAAI,MAAM;AAAA,EACtC,WAAW;AACb,CAAC;AAAA;AAAA;AAAA,IAGG,CAAC,UACD,MAAM,aACN;AAAA;AAAA,KAEC;AAAA;AAAA,IAED,sCAAM;AAAA,IACN,sCAAM;AAAA;AAGV,IAAO,iBAAQ;;;ADsDT;AAhEN,IAAM,OAAO,MAAM;AAAC;AAEpB,IAAqB,QAArB,cAAyC,gBAAqC;AAAA,EAC5E,OAAO,eAAe;AAAA,IACpB,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EAES,QAAQ;AAAA,IACf,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU,KAAK,MAAM;AAAA,EACvB;AAAA,EAEA;AAAA,EAES,oBAAoB;AAE3B,QAAI,KAAK,UAAU;AACjB,WAAK,SAAS;AAAA,QACZ,SAAS,KAAK,SAAS;AAAA,MACzB,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAES,mBAAmB,WAA2B;AACrD,QAAI,KAAK,MAAM,QAAQ,UAAU,KAAK;AACpC,WAAK,SAAS;AAAA,QACZ,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU,KAAK,MAAM;AAAA,MACvB,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEA,UAAU,CAAC,MAAqD;AAC9D,QAAI,CAAC,KAAK,MAAM,YAAY,KAAK,MAAM,cAAc;AACnD,WAAK,SAAS;AAAA,QACZ,UAAU;AAAA,QACV,UAAU,KAAK,MAAM;AAAA,MACvB,CAAC;AAAA,IACH;AAEA,SAAK,MAAM,QAAQ,CAAC;AAAA,EACtB;AAAA,EAEA,SAAS,MAAM;AACb,SAAK,SAAS;AAAA,MACZ,SAAS;AAAA,IACX,CAAC;AACD,SAAK,MAAM,OAAO;AAAA,EACpB;AAAA,EAEA,UAAU,MAAM;AACd,SAAK,MAAM,QAAQ;AAAA,EACrB;AAAA,EAES,SAAS;AAEhB,UAAM,EAAE,KAAK,OAAO,SAAS,SAAS,QAAQ,KAAK,IAAI,GAAG,KAAK,IAC7D,KAAK;AACP,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,CAAC,KAAK,MAAM;AAAA,QACvB,KAAK,CAAC,QAAS,KAAK,WAAW;AAAA,QAC/B,SAAS,KAAK;AAAA,QACd,KAAK,KAAK,MAAM;AAAA,QAChB,SAAS,CAAC,MACR,KAAK,QAAQ,CAAC;AAAA,QAEhB,QAAQ,KAAK;AAAA,QACb;AAAA,QACA;AAAA,QACA,iBAAe,QAAQ,QAAQ,MAAM,MAAM;AAAA,QAC3C,qBAAmB,OAAO;AAAA,QACzB,GAAI;AAAA,QACJ,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;;;AE7FA,IAAAC,SAAuB;;;AHEvB,IAAO,gBAAQ;","names":["styled","React"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/Image.tsx","../src/styles.ts","../src/ImageTypes.ts"],"sourcesContent":["import Image from \"./Image\";\n\nexport default Image;\nexport { Image };\nexport * from \"./ImageTypes\";\n","import * as React from \"react\";\nimport ImageContainer from \"./styles\";\nimport type { TypeImageProps } from \"./ImageTypes\";\n\ntype TypeState = {\n didError: boolean;\n didLoad: boolean;\n imageUrl: string;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = () => {};\n\nexport default class Image extends React.Component<TypeImageProps, TypeState> {\n static defaultProps = {\n title: \"\",\n onError: noop,\n onClick: noop,\n onLoad: noop,\n };\n\n override state = {\n didError: false,\n didLoad: false,\n imageUrl: this.props.src,\n };\n\n imageRef?: HTMLImageElement | null;\n\n override componentDidMount() {\n // eslint-disable-next-line react/no-did-mount-set-state\n if (this.imageRef) {\n this.setState({\n didLoad: this.imageRef.complete,\n });\n }\n }\n\n override componentDidUpdate(prevProps: TypeImageProps) {\n if (this.props.src !== prevProps.src) {\n this.setState({\n didError: false,\n didLoad: false,\n imageUrl: this.props.src,\n });\n }\n }\n\n onError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {\n if (!this.state.didError && this.props.defaultImage) {\n this.setState({\n didError: true,\n imageUrl: this.props.defaultImage,\n });\n }\n\n this.props.onError(e);\n };\n\n onLoad = () => {\n this.setState({\n didLoad: true,\n });\n this.props.onLoad();\n };\n\n onClick = () => {\n this.props.onClick();\n };\n\n override render() {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { alt, title, onClick, onError, onLoad, src, qa, ...rest } =\n this.props;\n return (\n <ImageContainer\n isLoading={!this.state.didLoad}\n ref={(img) => (this.imageRef = img)}\n onClick={this.onClick}\n src={this.state.imageUrl}\n onError={(e: React.SyntheticEvent<HTMLImageElement, Event>) =>\n this.onError(e)\n }\n onLoad={this.onLoad}\n alt={alt}\n title={title}\n data-qa-image={title ? title : alt ? alt : \"\"}\n data-qa-image-src={src || \"\"}\n {...(qa as any)}\n {...rest}\n />\n );\n }\n}\n","import styled, { css } from \"styled-components\";\nimport { COMMON, LAYOUT } from \"@sproutsocial/seeds-react-system-props\";\n\ninterface ImageContainerProps {\n isLoading?: boolean;\n}\nconst ImageContainer = styled.img.attrs({\n className: \"Image\",\n})<ImageContainerProps>`\n display: block;\n\n ${(props) =>\n props.isLoading &&\n css`\n opacity: 0;\n `}\n\n ${COMMON}\n ${LAYOUT}\n`;\n\nexport default ImageContainer;\n","import * as React from \"react\";\nimport type {\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeImageProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n Omit<React.ComponentPropsWithoutRef<\"img\">, \"color\" | \"height\" | \"width\"> {\n src: string;\n\n /** Alt text is required for non-decorative images */\n alt: string;\n title: string;\n onError: (e: React.SyntheticEvent<HTMLImageElement, Event>) => void;\n onClick: () => void;\n\n /** A URL for a default image to load if the source image is not available */\n defaultImage?: string;\n onLoad: () => void;\n qa?: object;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;;;ACAvB,+BAA4B;AAC5B,sCAA+B;AAK/B,IAAM,iBAAiB,yBAAAA,QAAO,IAAI,MAAM;AAAA,EACtC,WAAW;AACb,CAAC;AAAA;AAAA;AAAA,IAGG,CAAC,UACD,MAAM,aACN;AAAA;AAAA,KAEC;AAAA;AAAA,IAED,sCAAM;AAAA,IACN,sCAAM;AAAA;AAGV,IAAO,iBAAQ;;;ADsDT;AAhEN,IAAM,OAAO,MAAM;AAAC;AAEpB,IAAqB,QAArB,cAAyC,gBAAqC;AAAA,EAC5E,OAAO,eAAe;AAAA,IACpB,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EAES,QAAQ;AAAA,IACf,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU,KAAK,MAAM;AAAA,EACvB;AAAA,EAEA;AAAA,EAES,oBAAoB;AAE3B,QAAI,KAAK,UAAU;AACjB,WAAK,SAAS;AAAA,QACZ,SAAS,KAAK,SAAS;AAAA,MACzB,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAES,mBAAmB,WAA2B;AACrD,QAAI,KAAK,MAAM,QAAQ,UAAU,KAAK;AACpC,WAAK,SAAS;AAAA,QACZ,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU,KAAK,MAAM;AAAA,MACvB,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEA,UAAU,CAAC,MAAqD;AAC9D,QAAI,CAAC,KAAK,MAAM,YAAY,KAAK,MAAM,cAAc;AACnD,WAAK,SAAS;AAAA,QACZ,UAAU;AAAA,QACV,UAAU,KAAK,MAAM;AAAA,MACvB,CAAC;AAAA,IACH;AAEA,SAAK,MAAM,QAAQ,CAAC;AAAA,EACtB;AAAA,EAEA,SAAS,MAAM;AACb,SAAK,SAAS;AAAA,MACZ,SAAS;AAAA,IACX,CAAC;AACD,SAAK,MAAM,OAAO;AAAA,EACpB;AAAA,EAEA,UAAU,MAAM;AACd,SAAK,MAAM,QAAQ;AAAA,EACrB;AAAA,EAES,SAAS;AAEhB,UAAM,EAAE,KAAK,OAAO,SAAS,SAAS,QAAQ,KAAK,IAAI,GAAG,KAAK,IAC7D,KAAK;AACP,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,CAAC,KAAK,MAAM;AAAA,QACvB,KAAK,CAAC,QAAS,KAAK,WAAW;AAAA,QAC/B,SAAS,KAAK;AAAA,QACd,KAAK,KAAK,MAAM;AAAA,QAChB,SAAS,CAAC,MACR,KAAK,QAAQ,CAAC;AAAA,QAEhB,QAAQ,KAAK;AAAA,QACb;AAAA,QACA;AAAA,QACA,iBAAe,QAAQ,QAAQ,MAAM,MAAM;AAAA,QAC3C,qBAAmB,OAAO;AAAA,QACzB,GAAI;AAAA,QACJ,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;;;AE7FA,IAAAC,SAAuB;;;AHEvB,IAAO,gBAAQ;","names":["styled","React"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sproutsocial/seeds-react-image",
3
- "version": "1.0.14",
3
+ "version": "1.0.21",
4
4
  "description": "Seeds React Image",
5
5
  "author": "Sprout Social, Inc.",
6
6
  "license": "MIT",
@@ -18,8 +18,8 @@
18
18
  "test:watch": "jest --watch --coverage=false"
19
19
  },
20
20
  "dependencies": {
21
- "@sproutsocial/seeds-react-theme": "^3.6.1",
22
- "@sproutsocial/seeds-react-system-props": "^3.0.1"
21
+ "@sproutsocial/seeds-react-theme": "^4.1.0",
22
+ "@sproutsocial/seeds-react-system-props": "^3.1.1"
23
23
  },
24
24
  "devDependencies": {
25
25
  "@types/react": "^18.0.0",
package/src/styles.ts CHANGED
@@ -12,7 +12,7 @@ const ImageContainer = styled.img.attrs({
12
12
  ${(props) =>
13
13
  props.isLoading &&
14
14
  css`
15
- visibility: hidden;
15
+ opacity: 0;
16
16
  `}
17
17
 
18
18
  ${COMMON}