@times-components/image 6.15.34-alpha.6 → 6.17.0
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/CHANGELOG.md +22 -0
- package/dist/image-prop-types.js +0 -3
- package/dist/image.js +17 -88
- package/package.json +10 -10
- package/rnw.js +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,28 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [6.17.0](https://github.com/newsuk/times-components/compare/@times-components/image@6.16.0...@times-components/image@6.17.0) (2024-04-18)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **TMD-177:** remove low res and set a small default ([#3826](https://github.com/newsuk/times-components/issues/3826)) ([28cc54a](https://github.com/newsuk/times-components/commit/28cc54aea7a61efd71a51585b359b1547dc6b8a7))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
# [6.16.0](https://github.com/newsuk/times-components/compare/@times-components/image@6.15.33...@times-components/image@6.16.0) (2024-04-12)
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Features
|
|
21
|
+
|
|
22
|
+
* **TMD-177:** removed low res article images ([#3810](https://github.com/newsuk/times-components/issues/3810)) ([2b821e0](https://github.com/newsuk/times-components/commit/2b821e060140457d300ea9ecf8e876eb4e30b944))
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
6
28
|
## [6.15.33](https://github.com/newsuk/times-components/compare/@times-components/image@6.15.32...@times-components/image@6.15.33) (2024-03-25)
|
|
7
29
|
|
|
8
30
|
**Note:** Version bump only for package @times-components/image
|
package/dist/image-prop-types.js
CHANGED
|
@@ -17,8 +17,6 @@ var propTypes = {
|
|
|
17
17
|
disablePlaceholder: _propTypes["default"].bool,
|
|
18
18
|
fadeImageIn: _propTypes["default"].bool,
|
|
19
19
|
highResSize: _propTypes["default"].number,
|
|
20
|
-
lowResQuality: _propTypes["default"].number,
|
|
21
|
-
lowResSize: _propTypes["default"].number,
|
|
22
20
|
onLayout: _propTypes["default"].func,
|
|
23
21
|
rounded: _propTypes["default"].bool,
|
|
24
22
|
uri: _propTypes["default"].string,
|
|
@@ -30,7 +28,6 @@ var defaultProps = {
|
|
|
30
28
|
disablePlaceholder: false,
|
|
31
29
|
fadeImageIn: false,
|
|
32
30
|
highResSize: null,
|
|
33
|
-
lowResSize: null,
|
|
34
31
|
rounded: false,
|
|
35
32
|
uri: null,
|
|
36
33
|
isLcpItem: false
|
package/dist/image.js
CHANGED
|
@@ -61,110 +61,46 @@ var TimesImage = /*#__PURE__*/function (_Component) {
|
|
|
61
61
|
|
|
62
62
|
_this = _super.call(this, props);
|
|
63
63
|
_this.state = {
|
|
64
|
-
highResIsLoaded: false
|
|
65
|
-
highResIsVisible: false,
|
|
66
|
-
imageIsLoaded: false,
|
|
67
|
-
lowResIsLoaded: !props.fadeImageIn
|
|
64
|
+
highResIsLoaded: false
|
|
68
65
|
};
|
|
69
66
|
_this.handleHighResOnLoad = _this.handleHighResOnLoad.bind(_assertThisInitialized(_this));
|
|
70
|
-
_this.handleLowResOnLoad = _this.handleLowResOnLoad.bind(_assertThisInitialized(_this));
|
|
71
|
-
_this.onHighResTransitionEnd = _this.onHighResTransitionEnd.bind(_assertThisInitialized(_this));
|
|
72
|
-
_this.getLowResImage = _this.getLowResImage.bind(_assertThisInitialized(_this));
|
|
73
67
|
_this.getHighResImage = _this.getHighResImage.bind(_assertThisInitialized(_this));
|
|
74
68
|
return _this;
|
|
75
69
|
}
|
|
76
70
|
|
|
77
71
|
_createClass(TimesImage, [{
|
|
78
|
-
key: "onHighResTransitionEnd",
|
|
79
|
-
value: function onHighResTransitionEnd() {
|
|
80
|
-
this.setState({
|
|
81
|
-
highResIsVisible: true
|
|
82
|
-
});
|
|
83
|
-
}
|
|
84
|
-
}, {
|
|
85
72
|
key: "getHighResImage",
|
|
86
73
|
value: function getHighResImage(img) {
|
|
87
74
|
if (img && img.complete) {
|
|
88
75
|
this.handleHighResOnLoad();
|
|
89
76
|
}
|
|
90
77
|
}
|
|
91
|
-
}, {
|
|
92
|
-
key: "getLowResImage",
|
|
93
|
-
value: function getLowResImage(img) {
|
|
94
|
-
if (img && img.complete) {
|
|
95
|
-
this.handleLowResOnLoad();
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
}, {
|
|
99
|
-
key: "handleLowResOnLoad",
|
|
100
|
-
value: function handleLowResOnLoad() {
|
|
101
|
-
this.setState({
|
|
102
|
-
imageIsLoaded: true,
|
|
103
|
-
lowResIsLoaded: true
|
|
104
|
-
});
|
|
105
|
-
}
|
|
106
78
|
}, {
|
|
107
79
|
key: "handleHighResOnLoad",
|
|
108
80
|
value: function handleHighResOnLoad() {
|
|
109
81
|
this.setState({
|
|
110
|
-
highResIsLoaded: true
|
|
111
|
-
imageIsLoaded: true
|
|
82
|
+
highResIsLoaded: true
|
|
112
83
|
});
|
|
113
84
|
}
|
|
114
85
|
}, {
|
|
115
86
|
key: "highResImage",
|
|
116
87
|
value: function highResImage(_ref) {
|
|
117
|
-
var highResSize = _ref.highResSize,
|
|
118
|
-
|
|
88
|
+
var _ref$highResSize = _ref.highResSize,
|
|
89
|
+
highResSize = _ref$highResSize === void 0 ? 300 : _ref$highResSize,
|
|
119
90
|
url = _ref.url;
|
|
120
91
|
var highResIsLoaded = this.state.highResIsLoaded;
|
|
121
92
|
var accessibilityLabel = this.props.accessibilityLabel;
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
});
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
return null;
|
|
137
|
-
}
|
|
138
|
-
}, {
|
|
139
|
-
key: "lowResImage",
|
|
140
|
-
value: function lowResImage(_ref2) {
|
|
141
|
-
var lowResQuality = _ref2.lowResQuality,
|
|
142
|
-
lowResSize = _ref2.lowResSize,
|
|
143
|
-
url = _ref2.url;
|
|
144
|
-
var _this$state = this.state,
|
|
145
|
-
highResIsVisible = _this$state.highResIsVisible,
|
|
146
|
-
lowResIsLoaded = _this$state.lowResIsLoaded;
|
|
147
|
-
var accessibilityLabel = this.props.accessibilityLabel;
|
|
148
|
-
|
|
149
|
-
if (lowResSize && !highResIsVisible) {
|
|
150
|
-
var imageSource = (0, _utils.appendToImageURL)(url, "resize", lowResSize);
|
|
151
|
-
|
|
152
|
-
if (lowResQuality) {
|
|
153
|
-
imageSource = (0, _utils.appendToImageURL)(imageSource, "quality", lowResQuality);
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
return /*#__PURE__*/_react["default"].createElement(_responsive["default"], {
|
|
157
|
-
alt: accessibilityLabel,
|
|
158
|
-
loading: "lazy",
|
|
159
|
-
ref: this.getLowResImage,
|
|
160
|
-
isLoaded: lowResIsLoaded,
|
|
161
|
-
onLoad: this.handleLowResOnLoad,
|
|
162
|
-
src: imageSource,
|
|
163
|
-
zIndex: 1
|
|
164
|
-
});
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
return null;
|
|
93
|
+
var imgUrl = (0, _utils.appendToImageURL)(url, "resize", highResSize);
|
|
94
|
+
return /*#__PURE__*/_react["default"].createElement(_responsive["default"], {
|
|
95
|
+
alt: accessibilityLabel,
|
|
96
|
+
ref: this.getHighResImage,
|
|
97
|
+
loading: "lazy",
|
|
98
|
+
isLoaded: highResIsLoaded,
|
|
99
|
+
onLoad: this.handleHighResOnLoad,
|
|
100
|
+
onTransitionEnd: this.onHighResTransitionEnd,
|
|
101
|
+
src: imgUrl,
|
|
102
|
+
zIndex: 2
|
|
103
|
+
});
|
|
168
104
|
}
|
|
169
105
|
}, {
|
|
170
106
|
key: "render",
|
|
@@ -173,14 +109,12 @@ var TimesImage = /*#__PURE__*/function (_Component) {
|
|
|
173
109
|
aspectRatio = _this$props.aspectRatio,
|
|
174
110
|
disablePlaceholder = _this$props.disablePlaceholder,
|
|
175
111
|
highResSize = _this$props.highResSize,
|
|
176
|
-
lowResQuality = _this$props.lowResQuality,
|
|
177
|
-
lowResSize = _this$props.lowResSize,
|
|
178
112
|
style = _this$props.style,
|
|
179
113
|
uri = _this$props.uri,
|
|
180
114
|
onLayout = _this$props.onLayout,
|
|
181
115
|
rounded = _this$props.rounded,
|
|
182
116
|
isLcpItem = _this$props.isLcpItem;
|
|
183
|
-
var
|
|
117
|
+
var highResIsLoaded = this.state.highResIsLoaded;
|
|
184
118
|
var url = (0, _utils.addMissingProtocol)(uri);
|
|
185
119
|
|
|
186
120
|
var styles = _objectSpread({}, style);
|
|
@@ -203,13 +137,8 @@ var TimesImage = /*#__PURE__*/function (_Component) {
|
|
|
203
137
|
}
|
|
204
138
|
}, this.highResImage({
|
|
205
139
|
highResSize: highResSize,
|
|
206
|
-
lowResSize: lowResSize,
|
|
207
|
-
url: url
|
|
208
|
-
}), this.lowResImage({
|
|
209
|
-
lowResQuality: lowResQuality,
|
|
210
|
-
lowResSize: lowResSize,
|
|
211
140
|
url: url
|
|
212
|
-
}), disablePlaceholder ||
|
|
141
|
+
}), disablePlaceholder || highResIsLoaded ? null : /*#__PURE__*/_react["default"].createElement(_placeholder["default"], {
|
|
213
142
|
borderRadius: rounded ? "50%" : 0
|
|
214
143
|
})));
|
|
215
144
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@times-components/image",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.17.0",
|
|
4
4
|
"main": "dist/index",
|
|
5
5
|
"dev": "src/index",
|
|
6
6
|
"description": "Image",
|
|
@@ -33,12 +33,12 @@
|
|
|
33
33
|
"homepage": "https://github.com/newsuk/times-components#readme",
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@babel/core": "7.4.4",
|
|
36
|
-
"@times-components/eslint-config-thetimes": "
|
|
37
|
-
"@times-components/jest-configurator-web": "
|
|
38
|
-
"@times-components/jest-serializer": "
|
|
39
|
-
"@times-components/storybook": "
|
|
40
|
-
"@times-components/test-utils": "
|
|
41
|
-
"@times-components/webpack-configurator": "
|
|
36
|
+
"@times-components/eslint-config-thetimes": "0.8.18",
|
|
37
|
+
"@times-components/jest-configurator-web": "0.8.1",
|
|
38
|
+
"@times-components/jest-serializer": "3.13.8",
|
|
39
|
+
"@times-components/storybook": "4.12.13",
|
|
40
|
+
"@times-components/test-utils": "2.4.1",
|
|
41
|
+
"@times-components/webpack-configurator": "2.1.0",
|
|
42
42
|
"babel-jest": "24.8.0",
|
|
43
43
|
"babel-loader": "8.0.5",
|
|
44
44
|
"depcheck": "0.6.9",
|
|
@@ -53,8 +53,8 @@
|
|
|
53
53
|
"webpack": "4.30.0"
|
|
54
54
|
},
|
|
55
55
|
"dependencies": {
|
|
56
|
-
"@times-components/ts-styleguide": "
|
|
57
|
-
"@times-components/utils": "
|
|
56
|
+
"@times-components/ts-styleguide": "1.50.13",
|
|
57
|
+
"@times-components/utils": "6.20.1",
|
|
58
58
|
"prop-types": "15.7.2",
|
|
59
59
|
"styled-components": "4.3.2"
|
|
60
60
|
},
|
|
@@ -69,5 +69,5 @@
|
|
|
69
69
|
"publishConfig": {
|
|
70
70
|
"access": "public"
|
|
71
71
|
},
|
|
72
|
-
"gitHead": "
|
|
72
|
+
"gitHead": "4b8cc582fab11927e1fe84d1f0c6c14bf996250e"
|
|
73
73
|
}
|
package/rnw.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
module.exports=function(e){var t={};function n(
|
|
1
|
+
module.exports=function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=5)}([function(e,t){e.exports=require("react")},function(e,t){e.exports=require("prop-types")},function(e,t){e.exports=require("@times-components/utils/rnw")},function(e,t){e.exports=require("@times-components/ts-styleguide/rnw")},function(e,t){e.exports=require("styled-components")},function(e,t,n){"use strict";n.r(t);var r=n(0),o=n.n(r),i=n(2),a=n(1),c=n.n(a),u=n(3),s={placeholder:{alignItems:"center",backgroundColor:u.colours.functional.backgroundSecondary,bottom:0,justifyContent:"center",left:0,position:"absolute",right:0,top:0,zIndex:0}};var l=function(){return o.a.createElement("svg",{height:"auto",version:"1.1",viewBox:"145 50 108 120",width:"100%",style:{maxWidth:"25%",maxHeight:"50%"}},o.a.createElement("g",{fill:"none",fillRule:"evenodd",stroke:"none",strokeWidth:"1"},o.a.createElement("path",{d:"M211.26076,54 L211.231367,54 L147.67512,54 L145,85.7081465 L146.922096,86.4489102 C146.922096,86.4489102 164.867589,68.1355181 168.301115,65.0001546 C171.728017,61.8689133 174.237132,61.0885763 176.436179,60.3527593 C180.998206,59.169681 185.977937,59.2150255 185.977937,59.2150255 L186.109581,59.2150255 L186.109581,156.560932 L169.259886,164.473953 L169.259886,166 L228.735147,166 L228.735147,164.473953 L211.889177,156.560932 L211.889177,59.2150255 L212.01751,59.2150255 C212.01751,59.2150255 216.992272,59.169681 221.558854,60.3527593 C223.757072,61.0885763 226.266601,61.8689133 229.691848,65.0001546 C233.130341,68.1355181 251.071695,86.4489102 251.071695,86.4489102 L253,85.7081465 L250.317842,54 L211.270695,54 L211.242545,54",fill:u.colours.functional.contrast})))};function f(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function p(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?f(Object(n),!0).forEach((function(t){d(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):f(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function d(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var b=function(e){var t=e.borderRadius,n=void 0===t?0:t,r=p(p({},s.placeholder),{},{borderRadius:n});return o.a.createElement(i.TcView,{height:"100%",style:r,width:"100%"},o.a.createElement(l,null))},y=(c.a.object,c.a.string,c.a.number,c.a.number,c.a.bool,c.a.bool,c.a.number,c.a.func,c.a.bool,c.a.string,c.a.bool,{aspectRatio:void 0,disablePlaceholder:!1,fadeImageIn:!1,highResSize:null,rounded:!1,uri:null,isLcpItem:!1}),h=n(4),g=n.n(h).a.img.withConfig({displayName:"responsive",componentId:"sc-1nnon4d-0"})(["display:block;opacity:",";position:absolute;transition:opacity 0.3s ease-in-out;width:100%;z-index:",";"],(function(e){return e.isLoaded?1:0}),(function(e){return e.zIndex}));function m(e){return(m="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function O(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function v(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function j(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function L(e,t){return(L=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function P(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=I(e);if(t){var o=I(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return R(this,n)}}function R(e,t){return!t||"object"!==m(t)&&"function"!=typeof t?w(e):t}function w(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function I(e){return(I=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}var S=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&L(e,t)}(c,e);var t,n,r,a=P(c);function c(e){var t;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,c),(t=a.call(this,e)).state={highResIsLoaded:!1},t.handleHighResOnLoad=t.handleHighResOnLoad.bind(w(t)),t.getHighResImage=t.getHighResImage.bind(w(t)),t}return t=c,(n=[{key:"getHighResImage",value:function(e){e&&e.complete&&this.handleHighResOnLoad()}},{key:"handleHighResOnLoad",value:function(){this.setState({highResIsLoaded:!0})}},{key:"highResImage",value:function(e){var t=e.highResSize,n=void 0===t?300:t,r=e.url,a=this.state.highResIsLoaded,c=this.props.accessibilityLabel,u=Object(i.appendToImageURL)(r,"resize",n);return o.a.createElement(g,{alt:c,ref:this.getHighResImage,loading:"lazy",isLoaded:a,onLoad:this.handleHighResOnLoad,onTransitionEnd:this.onHighResTransitionEnd,src:u,zIndex:2})}},{key:"render",value:function(){var e=this.props,t=e.aspectRatio,n=e.disablePlaceholder,r=e.highResSize,a=e.style,c=e.uri,u=e.onLayout,s=e.rounded,l=e.isLcpItem,f=this.state.highResIsLoaded,p=Object(i.addMissingProtocol)(c),d=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?O(Object(n),!0).forEach((function(t){v(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):O(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}({},a);return s&&Object.assign(d,{borderRadius:"50%",overflow:"hidden"}),o.a.createElement(i.TcView,{onLayout:u,style:d,testID:"Image",className:l?"lcpItem":""},o.a.createElement("div",{style:{paddingBottom:"".concat(100/t,"%")}},this.highResImage({highResSize:r,url:p}),n||f?null:o.a.createElement(b,{borderRadius:s?"50%":0})))}}])&&j(t.prototype,n),r&&j(t,r),c}(r.Component);S.defaultProps=y;var x=S,E=x;n.d(t,"ModalImage",(function(){return E})),n.d(t,"Placeholder",(function(){return b}));t.default=x}]);
|