@times-components/image 6.17.20 → 6.18.1
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.js +6 -35
- package/dist/styles/responsive.js +2 -5
- package/package.json +6 -6
- 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.18.1](https://github.com/newsuk/times-components/compare/@times-components/image@6.18.0...@times-components/image@6.18.1) (2024-07-08)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **TMD-529:** add background colour to image container ([#3883](https://github.com/newsuk/times-components/issues/3883)) ([034e31d](https://github.com/newsuk/times-components/commit/034e31dd00463ff6ec431ca7425179e1ad5495c6))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
# [6.18.0](https://github.com/newsuk/times-components/compare/@times-components/image@6.17.20...@times-components/image@6.18.0) (2024-07-02)
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Features
|
|
21
|
+
|
|
22
|
+
* **TMD-329:** remove placeholder for article image ([#3856](https://github.com/newsuk/times-components/issues/3856)) ([9f1d249](https://github.com/newsuk/times-components/commit/9f1d249ac23312d00cb47a995767deb856e81a71))
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
6
28
|
## [6.17.20](https://github.com/newsuk/times-components/compare/@times-components/image@6.17.19...@times-components/image@6.17.20) (2024-07-02)
|
|
7
29
|
|
|
8
30
|
**Note:** Version bump only for package @times-components/image
|
package/dist/image.js
CHANGED
|
@@ -11,8 +11,6 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
11
11
|
|
|
12
12
|
var _utils = require("@times-components/utils");
|
|
13
13
|
|
|
14
|
-
var _placeholder = _interopRequireDefault(require("./placeholder"));
|
|
15
|
-
|
|
16
14
|
var _imagePropTypes = require("./image-prop-types");
|
|
17
15
|
|
|
18
16
|
var _responsive = _interopRequireDefault(require("./styles/responsive"));
|
|
@@ -54,50 +52,23 @@ var TimesImage = /*#__PURE__*/function (_Component) {
|
|
|
54
52
|
|
|
55
53
|
var _super = _createSuper(TimesImage);
|
|
56
54
|
|
|
57
|
-
function TimesImage(
|
|
58
|
-
var _this;
|
|
59
|
-
|
|
55
|
+
function TimesImage() {
|
|
60
56
|
_classCallCheck(this, TimesImage);
|
|
61
57
|
|
|
62
|
-
|
|
63
|
-
_this.state = {
|
|
64
|
-
highResIsLoaded: false
|
|
65
|
-
};
|
|
66
|
-
_this.handleHighResOnLoad = _this.handleHighResOnLoad.bind(_assertThisInitialized(_this));
|
|
67
|
-
_this.getHighResImage = _this.getHighResImage.bind(_assertThisInitialized(_this));
|
|
68
|
-
return _this;
|
|
58
|
+
return _super.apply(this, arguments);
|
|
69
59
|
}
|
|
70
60
|
|
|
71
61
|
_createClass(TimesImage, [{
|
|
72
|
-
key: "getHighResImage",
|
|
73
|
-
value: function getHighResImage(img) {
|
|
74
|
-
if (img && img.complete) {
|
|
75
|
-
this.handleHighResOnLoad();
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
}, {
|
|
79
|
-
key: "handleHighResOnLoad",
|
|
80
|
-
value: function handleHighResOnLoad() {
|
|
81
|
-
this.setState({
|
|
82
|
-
highResIsLoaded: true
|
|
83
|
-
});
|
|
84
|
-
}
|
|
85
|
-
}, {
|
|
86
62
|
key: "highResImage",
|
|
87
63
|
value: function highResImage(_ref) {
|
|
88
64
|
var _ref$highResSize = _ref.highResSize,
|
|
89
65
|
highResSize = _ref$highResSize === void 0 ? 300 : _ref$highResSize,
|
|
90
66
|
url = _ref.url;
|
|
91
|
-
var highResIsLoaded = this.state.highResIsLoaded;
|
|
92
67
|
var accessibilityLabel = this.props.accessibilityLabel;
|
|
93
68
|
var imgUrl = (0, _utils.appendToImageURL)(url, "resize", highResSize);
|
|
94
69
|
return /*#__PURE__*/_react["default"].createElement(_responsive["default"], {
|
|
95
70
|
alt: accessibilityLabel,
|
|
96
|
-
ref: this.getHighResImage,
|
|
97
71
|
loading: "lazy",
|
|
98
|
-
isLoaded: highResIsLoaded,
|
|
99
|
-
onLoad: this.handleHighResOnLoad,
|
|
100
|
-
onTransitionEnd: this.onHighResTransitionEnd,
|
|
101
72
|
src: imgUrl,
|
|
102
73
|
zIndex: 2
|
|
103
74
|
});
|
|
@@ -107,18 +78,20 @@ var TimesImage = /*#__PURE__*/function (_Component) {
|
|
|
107
78
|
value: function render() {
|
|
108
79
|
var _this$props = this.props,
|
|
109
80
|
aspectRatio = _this$props.aspectRatio,
|
|
110
|
-
disablePlaceholder = _this$props.disablePlaceholder,
|
|
111
81
|
highResSize = _this$props.highResSize,
|
|
112
82
|
style = _this$props.style,
|
|
113
83
|
uri = _this$props.uri,
|
|
114
84
|
onLayout = _this$props.onLayout,
|
|
115
85
|
rounded = _this$props.rounded,
|
|
116
86
|
isLcpItem = _this$props.isLcpItem;
|
|
117
|
-
var highResIsLoaded = this.state.highResIsLoaded;
|
|
118
87
|
var url = (0, _utils.addMissingProtocol)(uri);
|
|
119
88
|
|
|
120
89
|
var styles = _objectSpread({}, style);
|
|
121
90
|
|
|
91
|
+
Object.assign(styles, {
|
|
92
|
+
backgroundColor: "#efefef"
|
|
93
|
+
});
|
|
94
|
+
|
|
122
95
|
if (rounded) {
|
|
123
96
|
Object.assign(styles, {
|
|
124
97
|
borderRadius: "50%",
|
|
@@ -138,8 +111,6 @@ var TimesImage = /*#__PURE__*/function (_Component) {
|
|
|
138
111
|
}, this.highResImage({
|
|
139
112
|
highResSize: highResSize,
|
|
140
113
|
url: url
|
|
141
|
-
}), disablePlaceholder || highResIsLoaded ? null : /*#__PURE__*/_react["default"].createElement(_placeholder["default"], {
|
|
142
|
-
borderRadius: rounded ? "50%" : 0
|
|
143
114
|
})));
|
|
144
115
|
}
|
|
145
116
|
}]);
|
|
@@ -12,11 +12,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
|
|
|
12
12
|
var _default = _styledComponents["default"].img.withConfig({
|
|
13
13
|
displayName: "responsive",
|
|
14
14
|
componentId: "sc-1nnon4d-0"
|
|
15
|
-
})(["display:block;
|
|
16
|
-
var
|
|
17
|
-
return isLoaded ? 1 : 0;
|
|
18
|
-
}, function (_ref2) {
|
|
19
|
-
var zIndex = _ref2.zIndex;
|
|
15
|
+
})(["display:block;position:absolute;width:100%;z-index:", ";"], function (_ref) {
|
|
16
|
+
var zIndex = _ref.zIndex;
|
|
20
17
|
return zIndex;
|
|
21
18
|
});
|
|
22
19
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@times-components/image",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.18.1",
|
|
4
4
|
"main": "dist/index",
|
|
5
5
|
"dev": "src/index",
|
|
6
6
|
"description": "Image",
|
|
@@ -35,8 +35,8 @@
|
|
|
35
35
|
"@babel/core": "7.4.4",
|
|
36
36
|
"@times-components/eslint-config-thetimes": "0.8.18",
|
|
37
37
|
"@times-components/jest-configurator-web": "0.8.2",
|
|
38
|
-
"@times-components/jest-serializer": "3.13.
|
|
39
|
-
"@times-components/storybook": "4.12.
|
|
38
|
+
"@times-components/jest-serializer": "3.13.20",
|
|
39
|
+
"@times-components/storybook": "4.12.34",
|
|
40
40
|
"@times-components/test-utils": "2.4.2",
|
|
41
41
|
"@times-components/webpack-configurator": "2.1.1",
|
|
42
42
|
"babel-jest": "24.8.0",
|
|
@@ -53,8 +53,8 @@
|
|
|
53
53
|
"webpack": "4.30.0"
|
|
54
54
|
},
|
|
55
55
|
"dependencies": {
|
|
56
|
-
"@times-components/ts-styleguide": "1.50.
|
|
57
|
-
"@times-components/utils": "6.
|
|
56
|
+
"@times-components/ts-styleguide": "1.50.34",
|
|
57
|
+
"@times-components/utils": "6.26.0",
|
|
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": "14054b4b2f567910b8f5703e311ad2b522f834b3"
|
|
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 r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=5)}([function(e,t){e.exports=require("prop-types")},function(e,t){e.exports=require("react")},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,r){"use strict";r.r(t);var n=r(1),o=r.n(n),i=r(2),c=r(0),u=r.n(c),a=(u.a.object,u.a.string,u.a.number,u.a.number,u.a.bool,u.a.bool,u.a.number,u.a.func,u.a.bool,u.a.string,u.a.bool,{aspectRatio:void 0,disablePlaceholder:!1,fadeImageIn:!1,highResSize:null,rounded:!1,uri:null,isLcpItem:!1}),l=r(4),f=r.n(l).a.img.withConfig({displayName:"responsive",componentId:"sc-1nnon4d-0"})(["display:block;position:absolute;width:100%;z-index:",";"],(function(e){return e.zIndex}));function s(e){return(s="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 p(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function b(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function y(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function d(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function m(e,t){return(m=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function g(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 r,n=h(e);if(t){var o=h(this).constructor;r=Reflect.construct(n,arguments,o)}else r=n.apply(this,arguments);return O(this,r)}}function O(e,t){return!t||"object"!==s(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function h(e){return(h=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}var v=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&&m(e,t)}(u,e);var t,r,n,c=g(u);function u(){return y(this,u),c.apply(this,arguments)}return t=u,(r=[{key:"highResImage",value:function(e){var t=e.highResSize,r=void 0===t?300:t,n=e.url,c=this.props.accessibilityLabel,u=Object(i.appendToImageURL)(n,"resize",r);return o.a.createElement(f,{alt:c,loading:"lazy",src:u,zIndex:2})}},{key:"render",value:function(){var e=this.props,t=e.aspectRatio,r=e.highResSize,n=e.style,c=e.uri,u=e.onLayout,a=e.rounded,l=e.isLcpItem,f=Object(i.addMissingProtocol)(c),s=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?p(Object(r),!0).forEach((function(t){b(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):p(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({},n);return Object.assign(s,{backgroundColor:"#efefef"}),a&&Object.assign(s,{borderRadius:"50%",overflow:"hidden"}),o.a.createElement(i.TcView,{onLayout:u,style:s,testID:"Image",className:l?"lcpItem":""},o.a.createElement("div",{style:{paddingBottom:"".concat(100/t,"%")}},this.highResImage({highResSize:r,url:f})))}}])&&d(t.prototype,r),n&&d(t,n),u}(n.Component);v.defaultProps=a;var j=v,w=j,P=r(3),L={placeholder:{alignItems:"center",backgroundColor:P.colours.functional.backgroundSecondary,bottom:0,justifyContent:"center",left:0,position:"absolute",right:0,top:0,zIndex:0}};var x=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:P.colours.functional.contrast})))};function S(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function R(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?S(Object(r),!0).forEach((function(t){I(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):S(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function I(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var E=function(e){var t=e.borderRadius,r=void 0===t?0:t,n=R(R({},L.placeholder),{},{borderRadius:r});return o.a.createElement(i.TcView,{height:"100%",style:n,width:"100%"},o.a.createElement(x,null))};r.d(t,"ModalImage",(function(){return w})),r.d(t,"Placeholder",(function(){return E}));t.default=j}]);
|