@times-components/save-star-web 0.8.10 → 0.9.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 +11 -0
- package/babel.config.js +13 -2
- package/dist/save-api.js +129 -1
- package/dist/save-star-web.js +52 -1
- package/dist/save-star-with-tracking.js +111 -1
- package/dist/styles/index.js +61 -1
- package/dist/tracking/with-track-events.js +26 -1
- package/package.json +17 -18
- package/rnw.js +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
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
|
+
# [0.9.0](https://github.com/newsuk/times-components/compare/@times-components/save-star-web@0.8.10...@times-components/save-star-web@0.9.0) (2022-08-18)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **TDP-1712:** remove react-native foreverrrrr ([#3064](https://github.com/newsuk/times-components/issues/3064)) ([2a20cb5](https://github.com/newsuk/times-components/commit/2a20cb5abc10a4e7ca2d62487967f8fcf4eccb62)), closes [#3037](https://github.com/newsuk/times-components/issues/3037) [#3045](https://github.com/newsuk/times-components/issues/3045) [#3050](https://github.com/newsuk/times-components/issues/3050) [#3056](https://github.com/newsuk/times-components/issues/3056) [#3057](https://github.com/newsuk/times-components/issues/3057) [#3066](https://github.com/newsuk/times-components/issues/3066) [#3065](https://github.com/newsuk/times-components/issues/3065) [#3037](https://github.com/newsuk/times-components/issues/3037) [#3045](https://github.com/newsuk/times-components/issues/3045) [#3045](https://github.com/newsuk/times-components/issues/3045) [#3056](https://github.com/newsuk/times-components/issues/3056) [#3066](https://github.com/newsuk/times-components/issues/3066) [#3069](https://github.com/newsuk/times-components/issues/3069) [#3068](https://github.com/newsuk/times-components/issues/3068) [#3070](https://github.com/newsuk/times-components/issues/3070) [#3072](https://github.com/newsuk/times-components/issues/3072) [#3073](https://github.com/newsuk/times-components/issues/3073) [#3071](https://github.com/newsuk/times-components/issues/3071) [#3074](https://github.com/newsuk/times-components/issues/3074) [#3076](https://github.com/newsuk/times-components/issues/3076) [#3079](https://github.com/newsuk/times-components/issues/3079) [#3078](https://github.com/newsuk/times-components/issues/3078) [#3083](https://github.com/newsuk/times-components/issues/3083) [#3087](https://github.com/newsuk/times-components/issues/3087) [#3091](https://github.com/newsuk/times-components/issues/3091) [#3096](https://github.com/newsuk/times-components/issues/3096) [#3102](https://github.com/newsuk/times-components/issues/3102) [#3105](https://github.com/newsuk/times-components/issues/3105) [#3108](https://github.com/newsuk/times-components/issues/3108) [#3111](https://github.com/newsuk/times-components/issues/3111) [#3112](https://github.com/newsuk/times-components/issues/3112) [#3113](https://github.com/newsuk/times-components/issues/3113) [#3114](https://github.com/newsuk/times-components/issues/3114) [#3120](https://github.com/newsuk/times-components/issues/3120) [#3119](https://github.com/newsuk/times-components/issues/3119) [#3112](https://github.com/newsuk/times-components/issues/3112) [#3126](https://github.com/newsuk/times-components/issues/3126) [#3112](https://github.com/newsuk/times-components/issues/3112) [#3126](https://github.com/newsuk/times-components/issues/3126) [#3127](https://github.com/newsuk/times-components/issues/3127) [#3116](https://github.com/newsuk/times-components/issues/3116) [#3128](https://github.com/newsuk/times-components/issues/3128) [#3132](https://github.com/newsuk/times-components/issues/3132) [#3133](https://github.com/newsuk/times-components/issues/3133)
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## [0.8.10](https://github.com/newsuk/times-components/compare/@times-components/save-star-web@0.8.9...@times-components/save-star-web@0.8.10) (2022-08-08)
|
|
7
18
|
|
|
8
19
|
**Note:** Version bump only for package @times-components/save-star-web
|
package/babel.config.js
CHANGED
|
@@ -3,8 +3,19 @@ module.exports = api => {
|
|
|
3
3
|
return {
|
|
4
4
|
plugins: [
|
|
5
5
|
"babel-plugin-styled-components",
|
|
6
|
-
"@babel/plugin-
|
|
6
|
+
"@babel/plugin-proposal-export-default-from"
|
|
7
7
|
],
|
|
8
|
-
presets: [
|
|
8
|
+
presets: [
|
|
9
|
+
[
|
|
10
|
+
"@babel/preset-env",
|
|
11
|
+
{
|
|
12
|
+
targets: {
|
|
13
|
+
esmodules: true
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
],
|
|
17
|
+
"@babel/preset-react",
|
|
18
|
+
"@babel/preset-typescript"
|
|
19
|
+
]
|
|
9
20
|
};
|
|
10
21
|
};
|
package/dist/save-api.js
CHANGED
|
@@ -1 +1,129 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
|
|
12
|
+
var _reactApollo = require("react-apollo");
|
|
13
|
+
|
|
14
|
+
var _provider = require("@times-components/provider");
|
|
15
|
+
|
|
16
|
+
var _providerQueries = require("@times-components/provider-queries");
|
|
17
|
+
|
|
18
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
+
|
|
20
|
+
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
|
|
21
|
+
|
|
22
|
+
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
|
|
23
|
+
|
|
24
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
25
|
+
|
|
26
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
27
|
+
|
|
28
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
29
|
+
|
|
30
|
+
function updateCache(cache, _ref) {
|
|
31
|
+
let id = _ref.id,
|
|
32
|
+
isBookmarked = _ref.isBookmarked;
|
|
33
|
+
const cached = cache.readQuery({
|
|
34
|
+
query: _providerQueries.articleBookmarked,
|
|
35
|
+
variables: {
|
|
36
|
+
id
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
cache.writeQuery({
|
|
40
|
+
query: _providerQueries.articleBookmarked,
|
|
41
|
+
variables: {
|
|
42
|
+
id
|
|
43
|
+
},
|
|
44
|
+
data: _objectSpread(_objectSpread({}, cached), {}, {
|
|
45
|
+
article: _objectSpread(_objectSpread({}, cached.article), {}, {
|
|
46
|
+
isBookmarked
|
|
47
|
+
})
|
|
48
|
+
})
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
function addBookmark(cache, id) {
|
|
53
|
+
updateCache(cache, {
|
|
54
|
+
id,
|
|
55
|
+
isBookmarked: true
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
function removeBookmark(cache, id) {
|
|
60
|
+
updateCache(cache, {
|
|
61
|
+
id,
|
|
62
|
+
isBookmarked: false
|
|
63
|
+
});
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
function onSaveMutationUpdate(cache, _ref2) {
|
|
67
|
+
let _ref2$data$saveBookma = _ref2.data.saveBookmarks,
|
|
68
|
+
bookmarks = _ref2$data$saveBookma === void 0 ? [] : _ref2$data$saveBookma;
|
|
69
|
+
bookmarks.forEach(bookmark => addBookmark(cache, bookmark.id));
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
function onUnsaveMutationUpdate(cache, _ref3) {
|
|
73
|
+
let _ref3$data$unsaveBook = _ref3.data.unsaveBookmarks,
|
|
74
|
+
ids = _ref3$data$unsaveBook === void 0 ? [] : _ref3$data$unsaveBook;
|
|
75
|
+
ids.forEach(articleId => removeBookmark(cache, articleId));
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
function SaveAPI(_ref4) {
|
|
79
|
+
let articleId = _ref4.articleId,
|
|
80
|
+
children = _ref4.children;
|
|
81
|
+
return /*#__PURE__*/_react.default.createElement(_provider.ArticleBookmarked, {
|
|
82
|
+
id: articleId,
|
|
83
|
+
debounceTimeMs: 0
|
|
84
|
+
}, _ref5 => {
|
|
85
|
+
let isLoading = _ref5.isLoading,
|
|
86
|
+
article = _ref5.article;
|
|
87
|
+
const isSaved = article && Boolean(article.isBookmarked);
|
|
88
|
+
return /*#__PURE__*/_react.default.createElement(_reactApollo.Mutation, {
|
|
89
|
+
mutation: _providerQueries.saveBookmarks,
|
|
90
|
+
update: onSaveMutationUpdate
|
|
91
|
+
}, (save, _ref6) => {
|
|
92
|
+
let saveMutationLoading = _ref6.loading;
|
|
93
|
+
return /*#__PURE__*/_react.default.createElement(_reactApollo.Mutation, {
|
|
94
|
+
mutation: _providerQueries.unsaveBookmarks,
|
|
95
|
+
update: onUnsaveMutationUpdate
|
|
96
|
+
}, (unsave, _ref7) => {
|
|
97
|
+
let unsaveMutationLoading = _ref7.loading;
|
|
98
|
+
return children({
|
|
99
|
+
savedStatus: isSaved,
|
|
100
|
+
|
|
101
|
+
toggleSaved() {
|
|
102
|
+
return _asyncToGenerator(function* () {
|
|
103
|
+
const args = {
|
|
104
|
+
variables: {
|
|
105
|
+
id: articleId
|
|
106
|
+
}
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
if (isSaved) {
|
|
110
|
+
yield unsave(args);
|
|
111
|
+
} else {
|
|
112
|
+
yield save(args);
|
|
113
|
+
}
|
|
114
|
+
})();
|
|
115
|
+
},
|
|
116
|
+
|
|
117
|
+
isLoading: isLoading || saveMutationLoading || unsaveMutationLoading
|
|
118
|
+
});
|
|
119
|
+
});
|
|
120
|
+
});
|
|
121
|
+
});
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
SaveAPI.propTypes = {
|
|
125
|
+
children: _propTypes.default.func.isRequired,
|
|
126
|
+
articleId: _propTypes.default.string.isRequired
|
|
127
|
+
};
|
|
128
|
+
var _default = SaveAPI;
|
|
129
|
+
exports.default = _default;
|
package/dist/save-star-web.js
CHANGED
|
@@ -1 +1,52 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
|
|
12
|
+
var _styles = _interopRequireDefault(require("./styles"));
|
|
13
|
+
|
|
14
|
+
var _saveStarWithTracking = _interopRequireDefault(require("./save-star-with-tracking"));
|
|
15
|
+
|
|
16
|
+
var _saveApi = _interopRequireDefault(require("./save-api"));
|
|
17
|
+
|
|
18
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
+
|
|
20
|
+
/* eslint-env browser */
|
|
21
|
+
function SaveStarWeb(_ref) {
|
|
22
|
+
let colour = _ref.colour,
|
|
23
|
+
hoverColour = _ref.hoverColour,
|
|
24
|
+
articleId = _ref.articleId;
|
|
25
|
+
return /*#__PURE__*/_react.default.createElement(_saveApi.default, {
|
|
26
|
+
articleId: articleId
|
|
27
|
+
}, _ref2 => {
|
|
28
|
+
let isLoading = _ref2.isLoading,
|
|
29
|
+
toggleSaved = _ref2.toggleSaved,
|
|
30
|
+
savedStatus = _ref2.savedStatus;
|
|
31
|
+
return /*#__PURE__*/_react.default.createElement(_saveStarWithTracking.default, {
|
|
32
|
+
colour: colour,
|
|
33
|
+
hoverColour: hoverColour,
|
|
34
|
+
articleId: articleId,
|
|
35
|
+
savedStatus: savedStatus,
|
|
36
|
+
onSave: toggleSaved,
|
|
37
|
+
isLoading: isLoading
|
|
38
|
+
});
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
SaveStarWeb.propTypes = {
|
|
43
|
+
articleId: _propTypes.default.string.isRequired,
|
|
44
|
+
colour: _propTypes.default.string,
|
|
45
|
+
hoverColour: _propTypes.default.string
|
|
46
|
+
};
|
|
47
|
+
SaveStarWeb.defaultProps = {
|
|
48
|
+
colour: _styles.default.svgIcon.fillColour,
|
|
49
|
+
hoverColour: _styles.default.svgIcon.hoverFillColour
|
|
50
|
+
};
|
|
51
|
+
var _default = SaveStarWeb;
|
|
52
|
+
exports.default = _default;
|
|
@@ -1 +1,111 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
|
|
10
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
11
|
+
|
|
12
|
+
var _link = _interopRequireDefault(require("@times-components/link"));
|
|
13
|
+
|
|
14
|
+
var _utils = require("@times-components/utils");
|
|
15
|
+
|
|
16
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
17
|
+
|
|
18
|
+
var _icons = require("@times-components/icons");
|
|
19
|
+
|
|
20
|
+
var _styles = _interopRequireWildcard(require("./styles"));
|
|
21
|
+
|
|
22
|
+
var _withTrackEvents = _interopRequireDefault(require("./tracking/with-track-events"));
|
|
23
|
+
|
|
24
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
25
|
+
|
|
26
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
27
|
+
|
|
28
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
29
|
+
|
|
30
|
+
/* eslint-env browser */
|
|
31
|
+
const IconContainer = (0, _styledComponents.default)(_utils.HoverIcon).withConfig({
|
|
32
|
+
displayName: "save-star-with-tracking__IconContainer",
|
|
33
|
+
componentId: "sc-1swm7v2-0"
|
|
34
|
+
})(["width:auto;height:100%;display:flex;align-items:center;justify-content:center;"]);
|
|
35
|
+
|
|
36
|
+
function SaveStar(_ref) {
|
|
37
|
+
let onSave = _ref.onSave,
|
|
38
|
+
articleId = _ref.articleId,
|
|
39
|
+
savedStatus = _ref.savedStatus,
|
|
40
|
+
colour = _ref.colour,
|
|
41
|
+
hoverColour = _ref.hoverColour,
|
|
42
|
+
isLoading = _ref.isLoading;
|
|
43
|
+
|
|
44
|
+
function onSaveButtonPress(e) {
|
|
45
|
+
e.preventDefault();
|
|
46
|
+
onSave({
|
|
47
|
+
articleId,
|
|
48
|
+
savedStatus
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
function renderSaveButton() {
|
|
53
|
+
const _getStyles = (0, _styles.getStyles)({
|
|
54
|
+
saveStatus: savedStatus
|
|
55
|
+
}),
|
|
56
|
+
fillColour = _getStyles.fillColour,
|
|
57
|
+
strokeColour = _getStyles.strokeColour;
|
|
58
|
+
|
|
59
|
+
return (
|
|
60
|
+
/*#__PURE__*/
|
|
61
|
+
// eslint-disable-next-line jsx-a11y/anchor-is-valid
|
|
62
|
+
_react.default.createElement(_link.default, {
|
|
63
|
+
onPress: onSaveButtonPress,
|
|
64
|
+
responsiveLinkStyles: _styles.default.link,
|
|
65
|
+
url: ""
|
|
66
|
+
}, /*#__PURE__*/_react.default.createElement(IconContainer, {
|
|
67
|
+
colour: colour,
|
|
68
|
+
hoverColour: hoverColour
|
|
69
|
+
}, /*#__PURE__*/_react.default.createElement(_icons.IconStar, {
|
|
70
|
+
fillColour: fillColour,
|
|
71
|
+
strokeColour: strokeColour,
|
|
72
|
+
title: savedStatus ? "Remove from My Articles" : "Save to My Articles",
|
|
73
|
+
height: 18
|
|
74
|
+
})))
|
|
75
|
+
);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
function renderActivity() {
|
|
79
|
+
if (isLoading) {
|
|
80
|
+
return /*#__PURE__*/_react.default.createElement(IconContainer, {
|
|
81
|
+
colour: colour,
|
|
82
|
+
hoverColour: hoverColour
|
|
83
|
+
}, /*#__PURE__*/_react.default.createElement(_icons.IconActivityIndicator, {
|
|
84
|
+
style: _styles.default.activityLoader
|
|
85
|
+
}));
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
return renderSaveButton();
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_utils.TcText, {
|
|
92
|
+
style: (0, _utils.checkStylesForUnits)(_styles.default.label)
|
|
93
|
+
}, savedStatus ? "Saved" : "Save"), renderActivity());
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
SaveStar.propTypes = {
|
|
97
|
+
articleId: _propTypes.default.string.isRequired,
|
|
98
|
+
colour: _propTypes.default.string,
|
|
99
|
+
hoverColour: _propTypes.default.string,
|
|
100
|
+
savedStatus: _propTypes.default.bool.isRequired,
|
|
101
|
+
onSave: _propTypes.default.func.isRequired,
|
|
102
|
+
isLoading: _propTypes.default.bool.isRequired
|
|
103
|
+
};
|
|
104
|
+
SaveStar.defaultProps = {
|
|
105
|
+
colour: _styles.default.svgIcon.fillColour,
|
|
106
|
+
hoverColour: _styles.default.svgIcon.hoverFillColour
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
var _default = (0, _withTrackEvents.default)(SaveStar);
|
|
110
|
+
|
|
111
|
+
exports.default = _default;
|
package/dist/styles/index.js
CHANGED
|
@@ -1 +1,61 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = exports.getStyles = void 0;
|
|
7
|
+
|
|
8
|
+
var _tsStyleguide = require("@times-components/ts-styleguide");
|
|
9
|
+
|
|
10
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
11
|
+
|
|
12
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
13
|
+
|
|
14
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
15
|
+
|
|
16
|
+
const ICON_SIZE = 40;
|
|
17
|
+
const styles = {
|
|
18
|
+
activityLoader: {
|
|
19
|
+
backgroundColor: _tsStyleguide.colours.functional.whiteGrey,
|
|
20
|
+
borderRadius: 9999,
|
|
21
|
+
height: 40,
|
|
22
|
+
marginLeft: (0, _tsStyleguide.spacing)(1),
|
|
23
|
+
overflow: "hidden",
|
|
24
|
+
width: 40
|
|
25
|
+
},
|
|
26
|
+
label: _objectSpread(_objectSpread({}, (0, _tsStyleguide.fontFactory)({
|
|
27
|
+
font: "supporting",
|
|
28
|
+
fontSize: "meta"
|
|
29
|
+
})), {}, {
|
|
30
|
+
color: _tsStyleguide.colours.functional.secondary,
|
|
31
|
+
marginRight: (0, _tsStyleguide.spacing)(2),
|
|
32
|
+
transform: [{
|
|
33
|
+
translateY: "9%"
|
|
34
|
+
}],
|
|
35
|
+
textAlign: "right"
|
|
36
|
+
}),
|
|
37
|
+
link: {
|
|
38
|
+
base: "\n margin-left: ".concat((0, _tsStyleguide.spacing)(1), ";\n cursor: pointer;\n \n &, > * {\n display: flex;\n align-items: center;\n justify-content: center;\n height: ").concat(ICON_SIZE, "px;\n width: ").concat(ICON_SIZE, "px;\n border-radius: ").concat(ICON_SIZE, "px;\n }\n \n > * {\n display: flex;\n width: 100%;\n height: 100%;\n align-items: center;\n justify-content: center;\n }\n\n &:hover {\n background-color: ").concat(_tsStyleguide.colours.functional.whiteGrey, ";\n }\n &:active {\n background-color: ").concat(_tsStyleguide.colours.functional.keyline, ";\n }\n ")
|
|
39
|
+
},
|
|
40
|
+
save: {
|
|
41
|
+
fillColour: _tsStyleguide.colours.functional.action,
|
|
42
|
+
strokeColour: _tsStyleguide.colours.functional.secondary
|
|
43
|
+
},
|
|
44
|
+
svgIcon: {
|
|
45
|
+
fillColour: _tsStyleguide.colours.functional.secondary,
|
|
46
|
+
hoverFillColour: _tsStyleguide.colours.functional.brandColour
|
|
47
|
+
},
|
|
48
|
+
unsave: {
|
|
49
|
+
fillColour: _tsStyleguide.colours.functional.white,
|
|
50
|
+
strokeColour: _tsStyleguide.colours.functional.secondary
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
const getStyles = _ref => {
|
|
55
|
+
let saveStatus = _ref.saveStatus;
|
|
56
|
+
return saveStatus ? styles.save : styles.unsave;
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
exports.getStyles = getStyles;
|
|
60
|
+
var _default = styles;
|
|
61
|
+
exports.default = _default;
|
|
@@ -1 +1,26 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _tracking = require("@times-components/tracking");
|
|
9
|
+
|
|
10
|
+
var _default = Component => (0, _tracking.withTrackEvents)(Component, {
|
|
11
|
+
analyticsEvents: [{
|
|
12
|
+
actionName: "Pressed",
|
|
13
|
+
eventName: "onSave",
|
|
14
|
+
getAttrs: _ref => {
|
|
15
|
+
let articleId = _ref.articleId,
|
|
16
|
+
savedStatus = _ref.savedStatus;
|
|
17
|
+
return {
|
|
18
|
+
articleId,
|
|
19
|
+
savedStatus: !savedStatus
|
|
20
|
+
};
|
|
21
|
+
},
|
|
22
|
+
trackingName: "ArticleSaveToMyArticles"
|
|
23
|
+
}]
|
|
24
|
+
});
|
|
25
|
+
|
|
26
|
+
exports.default = _default;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@times-components/save-star-web",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.9.0",
|
|
4
4
|
"description": "Save Star for Web",
|
|
5
5
|
"main": "dist/save-star-web",
|
|
6
6
|
"dev": "src/save-star-web",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"fmt": "prettier --write '**/*.*'",
|
|
10
10
|
"prettier:diff": "prettier --list-different '**/*.*'",
|
|
11
11
|
"lint": "eslint . && yarn prettier:diff && yarn depcheck",
|
|
12
|
-
"test:web": "jest --config='./__tests__/
|
|
12
|
+
"test:web": "jest --config='./__tests__/jest.config.js'",
|
|
13
13
|
"prepublishOnly": "yarn transpile && yarn bundle",
|
|
14
14
|
"cleanup-dist": "rm -rf dist",
|
|
15
15
|
"transpile": "yarn cleanup-dist && babel src -d dist",
|
|
@@ -31,13 +31,13 @@
|
|
|
31
31
|
},
|
|
32
32
|
"homepage": "https://github.com/newsuk/times-components#readme",
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@times-components/icons": "2.
|
|
35
|
-
"@times-components/link": "3.
|
|
36
|
-
"@times-components/provider": "1.
|
|
37
|
-
"@times-components/provider-queries": "2.
|
|
38
|
-
"@times-components/tracking": "2.
|
|
39
|
-
"@times-components/ts-styleguide": "1.
|
|
40
|
-
"@times-components/utils": "6.
|
|
34
|
+
"@times-components/icons": "2.19.0",
|
|
35
|
+
"@times-components/link": "3.11.0",
|
|
36
|
+
"@times-components/provider": "1.33.0",
|
|
37
|
+
"@times-components/provider-queries": "2.18.0",
|
|
38
|
+
"@times-components/tracking": "2.12.0",
|
|
39
|
+
"@times-components/ts-styleguide": "1.37.0",
|
|
40
|
+
"@times-components/utils": "6.15.0",
|
|
41
41
|
"prop-types": "15.7.2",
|
|
42
42
|
"react-apollo": "2.5.5",
|
|
43
43
|
"styled-components": "4.3.2"
|
|
@@ -45,12 +45,12 @@
|
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@babel/core": "7.4.4",
|
|
47
47
|
"@times-components/eslint-config-thetimes": "0.8.18",
|
|
48
|
-
"@times-components/jest-configurator": "
|
|
49
|
-
"@times-components/jest-serializer": "3.
|
|
50
|
-
"@times-components/provider-test-tools": "1.
|
|
51
|
-
"@times-components/storybook": "4.
|
|
52
|
-
"@times-components/test-utils": "2.
|
|
53
|
-
"@times-components/webpack-configurator": "2.0
|
|
48
|
+
"@times-components/jest-configurator-web": "0.8.0",
|
|
49
|
+
"@times-components/jest-serializer": "3.4.0",
|
|
50
|
+
"@times-components/provider-test-tools": "1.27.0",
|
|
51
|
+
"@times-components/storybook": "4.5.0",
|
|
52
|
+
"@times-components/test-utils": "2.4.0",
|
|
53
|
+
"@times-components/webpack-configurator": "2.1.0",
|
|
54
54
|
"babel-jest": "24.8.0",
|
|
55
55
|
"babel-loader": "8.0.5",
|
|
56
56
|
"eslint": "5.9.0",
|
|
@@ -59,8 +59,7 @@
|
|
|
59
59
|
"react": "16.9.0",
|
|
60
60
|
"react-dom": "16.9.0",
|
|
61
61
|
"react-test-renderer": "16.9.0",
|
|
62
|
-
"webpack": "4.30.0"
|
|
63
|
-
"webpack-cli": "3.3.1"
|
|
62
|
+
"webpack": "4.30.0"
|
|
64
63
|
},
|
|
65
64
|
"resolutions": {
|
|
66
65
|
"react": "16.9.0",
|
|
@@ -73,5 +72,5 @@
|
|
|
73
72
|
"publishConfig": {
|
|
74
73
|
"access": "public"
|
|
75
74
|
},
|
|
76
|
-
"gitHead": "
|
|
75
|
+
"gitHead": "fe2f12b7448a88662c53f840772282cd97756c5c"
|
|
77
76
|
}
|
package/rnw.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
module.exports=function(e){var t={};function r(
|
|
1
|
+
module.exports=function(e){var t={};function r(o){if(t[o])return t[o].exports;var n=t[o]={i:o,l:!1,exports:{}};return e[o].call(n.exports,n,n.exports,r),n.l=!0,n.exports}return r.m=e,r.c=t,r.d=function(e,t,o){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},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 o=Object.create(null);if(r.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)r.d(o,n,function(t){return e[t]}.bind(null,n));return o},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=11)}([function(e,t){e.exports=require("react")},function(e,t){e.exports=require("@times-components/ts-styleguide/rnw")},function(e,t){e.exports=require("@times-components/provider-queries/rnw")},function(e,t){e.exports=require("@times-components/utils/rnw")},function(e,t){e.exports=require("prop-types")},function(e,t){e.exports=require("@times-components/icons/rnw")},function(e,t){e.exports=require("react-apollo")},function(e,t){e.exports=require("styled-components")},function(e,t){e.exports=require("@times-components/link/rnw")},function(e,t){e.exports=require("@times-components/tracking/rnw")},function(e,t){e.exports=require("@times-components/provider/rnw")},function(e,t,r){"use strict";r.r(t);var o=r(0),n=r.n(o),i=(r(4),r(1));function c(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,o)}return r}function a(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?c(Object(r),!0).forEach((function(t){l(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function l(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const u={activityLoader:{backgroundColor:i.colours.functional.whiteGrey,borderRadius:9999,height:40,marginLeft:Object(i.spacing)(1),overflow:"hidden",width:40},label:a(a({},Object(i.fontFactory)({font:"supporting",fontSize:"meta"})),{},{color:i.colours.functional.secondary,marginRight:Object(i.spacing)(2),transform:[{translateY:"9%"}],textAlign:"right"}),link:{base:"\n margin-left: ".concat(Object(i.spacing)(1),";\n cursor: pointer;\n \n &, > * {\n display: flex;\n align-items: center;\n justify-content: center;\n height: ").concat(40,"px;\n width: ").concat(40,"px;\n border-radius: ").concat(40,"px;\n }\n \n > * {\n display: flex;\n width: 100%;\n height: 100%;\n align-items: center;\n justify-content: center;\n }\n\n &:hover {\n background-color: ").concat(i.colours.functional.whiteGrey,";\n }\n &:active {\n background-color: ").concat(i.colours.functional.keyline,";\n }\n ")},save:{fillColour:i.colours.functional.action,strokeColour:i.colours.functional.secondary},svgIcon:{fillColour:i.colours.functional.secondary,hoverFillColour:i.colours.functional.brandColour},unsave:{fillColour:i.colours.functional.white,strokeColour:i.colours.functional.secondary}};var s=u,f=r(7),d=r.n(f),p=r(8),v=r.n(p),m=r(3),y=r(5),b=r(9);const g=d()(m.HoverIcon).withConfig({displayName:"save-star-with-tracking__IconContainer",componentId:"sc-1swm7v2-0"})(["width:auto;height:100%;display:flex;align-items:center;justify-content:center;"]);function h(e){let t=e.onSave,r=e.articleId,i=e.savedStatus,c=e.colour,a=e.hoverColour,l=e.isLoading;function f(e){e.preventDefault(),t({articleId:r,savedStatus:i})}function d(){const e=(e=>e.saveStatus?u.save:u.unsave)({saveStatus:i}),t=e.fillColour,r=e.strokeColour;return n.a.createElement(v.a,{onPress:f,responsiveLinkStyles:s.link,url:""},n.a.createElement(g,{colour:c,hoverColour:a},n.a.createElement(y.IconStar,{fillColour:t,strokeColour:r,title:i?"Remove from My Articles":"Save to My Articles",height:18})))}return n.a.createElement(o.Fragment,null,n.a.createElement(m.TcText,{style:Object(m.checkStylesForUnits)(s.label)},i?"Saved":"Save"),l?n.a.createElement(g,{colour:c,hoverColour:a},n.a.createElement(y.IconActivityIndicator,{style:s.activityLoader})):d())}h.defaultProps={colour:s.svgIcon.fillColour,hoverColour:s.svgIcon.hoverFillColour};var O,k=(O=h,Object(b.withTrackEvents)(O,{analyticsEvents:[{actionName:"Pressed",eventName:"onSave",getAttrs:e=>({articleId:e.articleId,savedStatus:!e.savedStatus}),trackingName:"ArticleSaveToMyArticles"}]})),j=r(6),w=r(10),S=r(2);function P(e,t,r,o,n,i,c){try{var a=e[i](c),l=a.value}catch(e){return void r(e)}a.done?t(l):Promise.resolve(l).then(o,n)}function x(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,o)}return r}function C(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?x(Object(r),!0).forEach((function(t){E(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):x(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function E(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function I(e,t){let r=t.id,o=t.isBookmarked;const n=e.readQuery({query:S.articleBookmarked,variables:{id:r}});e.writeQuery({query:S.articleBookmarked,variables:{id:r},data:C(C({},n),{},{article:C(C({},n.article),{},{isBookmarked:o})})})}function q(e,t){let r=t.data.saveBookmarks;(void 0===r?[]:r).forEach(t=>function(e,t){I(e,{id:t,isBookmarked:!0})}(e,t.id))}function B(e,t){let r=t.data.unsaveBookmarks;(void 0===r?[]:r).forEach(t=>function(e,t){I(e,{id:t,isBookmarked:!1})}(e,t))}var M=function(e){let t=e.articleId,r=e.children;return n.a.createElement(w.ArticleBookmarked,{id:t,debounceTimeMs:0},e=>{let o=e.isLoading,i=e.article;const c=i&&Boolean(i.isBookmarked);return n.a.createElement(j.Mutation,{mutation:S.saveBookmarks,update:q},(e,i)=>{let a=i.loading;return n.a.createElement(j.Mutation,{mutation:S.unsaveBookmarks,update:B},(n,i)=>{let l=i.loading;return r({savedStatus:c,toggleSaved(){return(r=function*(){const r={variables:{id:t}};c?yield n(r):yield e(r)},function(){var e=this,t=arguments;return new Promise((function(o,n){var i=r.apply(e,t);function c(e){P(i,o,n,c,a,"next",e)}function a(e){P(i,o,n,c,a,"throw",e)}c(void 0)}))})();var r},isLoading:o||a||l})})})})};function D(e){let t=e.colour,r=e.hoverColour,o=e.articleId;return n.a.createElement(M,{articleId:o},e=>{let i=e.isLoading,c=e.toggleSaved,a=e.savedStatus;return n.a.createElement(k,{colour:t,hoverColour:r,articleId:o,savedStatus:a,onSave:c,isLoading:i})})}D.defaultProps={colour:s.svgIcon.fillColour,hoverColour:s.svgIcon.hoverFillColour};t.default=D}]);
|