@sproutsocial/seeds-react-image 1.0.0 → 1.0.2
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.
- package/.turbo/turbo-build.log +19 -19
- package/CHANGELOG.md +16 -0
- package/dist/esm/index.js +2 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/index.js +5 -5
- package/dist/index.js.map +1 -1
- package/package.json +4 -4
- package/tsconfig.json +7 -1
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
yarn run v1.22.22
|
|
2
2
|
$ tsup --dts
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
Done in
|
|
3
|
+
[34mCLI[39m Building entry: src/index.ts
|
|
4
|
+
[34mCLI[39m Using tsconfig: tsconfig.json
|
|
5
|
+
[34mCLI[39m tsup v8.5.0
|
|
6
|
+
[34mCLI[39m Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-image/tsup.config.ts
|
|
7
|
+
[34mCLI[39m Target: es2022
|
|
8
|
+
[34mCLI[39m Cleaning output folder
|
|
9
|
+
[34mCJS[39m Build start
|
|
10
|
+
[34mESM[39m Build start
|
|
11
|
+
[32mCJS[39m [1mdist/index.js [22m[32m3.89 KB[39m
|
|
12
|
+
[32mCJS[39m [1mdist/index.js.map [22m[32m5.26 KB[39m
|
|
13
|
+
[32mCJS[39m ⚡️ Build success in 130ms
|
|
14
|
+
[32mESM[39m [1mdist/esm/index.js [22m[32m2.10 KB[39m
|
|
15
|
+
[32mESM[39m [1mdist/esm/index.js.map [22m[32m5.21 KB[39m
|
|
16
|
+
[32mESM[39m ⚡️ Build success in 138ms
|
|
17
|
+
[34mDTS[39m Build start
|
|
18
|
+
[32mDTS[39m ⚡️ Build success in 47097ms
|
|
19
|
+
[32mDTS[39m [1mdist/index.d.ts [22m[32m1.50 KB[39m
|
|
20
|
+
[32mDTS[39m [1mdist/index.d.mts [22m[32m1.50 KB[39m
|
|
21
|
+
Done in 51.60s.
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @sproutsocial/seeds-react-image
|
|
2
2
|
|
|
3
|
+
## 1.0.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [22e1111]
|
|
8
|
+
- @sproutsocial/seeds-react-theme@3.0.1
|
|
9
|
+
|
|
10
|
+
## 1.0.1
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- 9fd8bac: Update dependencies to use semantic package version instead of wildcards
|
|
15
|
+
- Updated dependencies [9fd8bac]
|
|
16
|
+
- @sproutsocial/seeds-react-system-props@3.0.2
|
|
17
|
+
- @sproutsocial/seeds-react-theme@2.2.1
|
|
18
|
+
|
|
3
19
|
## 1.0.0
|
|
4
20
|
|
|
5
21
|
### Major Changes
|
package/dist/esm/index.js
CHANGED
|
@@ -95,9 +95,9 @@ var Image = class extends React.Component {
|
|
|
95
95
|
import "react";
|
|
96
96
|
|
|
97
97
|
// src/index.ts
|
|
98
|
-
var
|
|
98
|
+
var index_default = Image;
|
|
99
99
|
export {
|
|
100
100
|
Image,
|
|
101
|
-
|
|
101
|
+
index_default as default
|
|
102
102
|
};
|
|
103
103
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -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,
|
|
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":[]}
|
package/dist/index.js
CHANGED
|
@@ -28,12 +28,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
29
|
|
|
30
30
|
// src/index.ts
|
|
31
|
-
var
|
|
32
|
-
__export(
|
|
31
|
+
var index_exports = {};
|
|
32
|
+
__export(index_exports, {
|
|
33
33
|
Image: () => Image,
|
|
34
|
-
default: () =>
|
|
34
|
+
default: () => index_default
|
|
35
35
|
});
|
|
36
|
-
module.exports = __toCommonJS(
|
|
36
|
+
module.exports = __toCommonJS(index_exports);
|
|
37
37
|
|
|
38
38
|
// src/Image.tsx
|
|
39
39
|
var React = __toESM(require("react"));
|
|
@@ -132,7 +132,7 @@ var Image = class extends React.Component {
|
|
|
132
132
|
var React2 = require("react");
|
|
133
133
|
|
|
134
134
|
// src/index.ts
|
|
135
|
-
var
|
|
135
|
+
var index_default = Image;
|
|
136
136
|
// Annotate the CommonJS export names for ESM import in node:
|
|
137
137
|
0 && (module.exports = {
|
|
138
138
|
Image
|
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,
|
|
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"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sproutsocial/seeds-react-image",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
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": "
|
|
22
|
-
"@sproutsocial/seeds-react-system-props": "
|
|
21
|
+
"@sproutsocial/seeds-react-theme": "^3.0.1",
|
|
22
|
+
"@sproutsocial/seeds-react-system-props": "^3.0.1"
|
|
23
23
|
},
|
|
24
24
|
"devDependencies": {
|
|
25
25
|
"@types/react": "^18.0.0",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"@sproutsocial/eslint-config-seeds": "*",
|
|
28
28
|
"react": "^18.0.0",
|
|
29
29
|
"styled-components": "^5.2.3",
|
|
30
|
-
"tsup": "^8.
|
|
30
|
+
"tsup": "^8.3.4",
|
|
31
31
|
"typescript": "^5.6.2",
|
|
32
32
|
"@sproutsocial/seeds-tsconfig": "*",
|
|
33
33
|
"@sproutsocial/seeds-testing": "*",
|