@times-components/message-bar 0.6.5 → 0.7.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 +19 -0
- package/babel.config.js +13 -5
- package/dist/index.js +31 -1
- package/dist/message-bar.js +107 -1
- package/dist/message-context.js +17 -1
- package/dist/message-manager.js +115 -1
- package/dist/styles/index.js +48 -1
- package/dist/styles/shared.js +112 -1
- package/package.json +13 -16
- package/rnw.js +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,25 @@
|
|
|
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.7.1](https://github.com/newsuk/times-components/compare/@times-components/message-bar@0.7.0...@times-components/message-bar@0.7.1) (2022-10-13)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @times-components/message-bar
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
# [0.7.0](https://github.com/newsuk/times-components/compare/@times-components/message-bar@0.6.5...@times-components/message-bar@0.7.0) (2022-08-18)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Features
|
|
18
|
+
|
|
19
|
+
* **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)
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
6
25
|
## [0.6.5](https://github.com/newsuk/times-components/compare/@times-components/message-bar@0.6.4...@times-components/message-bar@0.6.5) (2022-08-05)
|
|
7
26
|
|
|
8
27
|
**Note:** Version bump only for package @times-components/message-bar
|
package/babel.config.js
CHANGED
|
@@ -1,10 +1,18 @@
|
|
|
1
1
|
module.exports = api => {
|
|
2
2
|
api.cache(true);
|
|
3
3
|
return {
|
|
4
|
-
plugins: [
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
4
|
+
plugins: ["babel-plugin-styled-components"],
|
|
5
|
+
presets: [
|
|
6
|
+
[
|
|
7
|
+
"@babel/preset-env",
|
|
8
|
+
{
|
|
9
|
+
targets: {
|
|
10
|
+
esmodules: true
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
],
|
|
14
|
+
"@babel/preset-react",
|
|
15
|
+
"@babel/preset-typescript"
|
|
16
|
+
]
|
|
9
17
|
};
|
|
10
18
|
};
|
package/dist/index.js
CHANGED
|
@@ -1 +1,31 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "MessageManager", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function get() {
|
|
9
|
+
return _messageManager.default;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
Object.defineProperty(exports, "MessageBar", {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function get() {
|
|
15
|
+
return _messageBar.default;
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
Object.defineProperty(exports, "MessageContext", {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: function get() {
|
|
21
|
+
return _messageContext.default;
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
var _messageManager = _interopRequireDefault(require("./message-manager"));
|
|
26
|
+
|
|
27
|
+
var _messageBar = _interopRequireDefault(require("./message-bar"));
|
|
28
|
+
|
|
29
|
+
var _messageContext = _interopRequireDefault(require("./message-context"));
|
|
30
|
+
|
|
31
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
package/dist/message-bar.js
CHANGED
|
@@ -1 +1,107 @@
|
|
|
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 _utils = require("@times-components/utils");
|
|
11
|
+
|
|
12
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
|
+
|
|
14
|
+
var _icons = require("@times-components/icons");
|
|
15
|
+
|
|
16
|
+
var _styles = _interopRequireWildcard(require("./styles"));
|
|
17
|
+
|
|
18
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
+
|
|
20
|
+
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); }
|
|
21
|
+
|
|
22
|
+
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; }
|
|
23
|
+
|
|
24
|
+
class MessageBar extends _react.Component {
|
|
25
|
+
constructor(props) {
|
|
26
|
+
super(props);
|
|
27
|
+
this.closeMessage = this.closeMessage.bind(this);
|
|
28
|
+
this.state = {
|
|
29
|
+
closeActive: false
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
componentDidMount() {
|
|
34
|
+
const delay = this.props.delay;
|
|
35
|
+
this.timeout = setTimeout(() => {
|
|
36
|
+
this.closeMessage();
|
|
37
|
+
}, delay);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
componentDidUpdate(prevProps) {
|
|
41
|
+
const newMessage = this.props.message;
|
|
42
|
+
const message = prevProps.message,
|
|
43
|
+
delay = prevProps.delay;
|
|
44
|
+
|
|
45
|
+
if (message === newMessage) {
|
|
46
|
+
clearTimeout(this.timeout);
|
|
47
|
+
this.timeout = setTimeout(() => {
|
|
48
|
+
this.closeMessage();
|
|
49
|
+
}, delay);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
componentWillUnmount() {
|
|
54
|
+
if (this.timeout) {
|
|
55
|
+
clearTimeout(this.timeout);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
closeMessage() {
|
|
60
|
+
const close = this.props.close;
|
|
61
|
+
this.setState({
|
|
62
|
+
closeActive: true
|
|
63
|
+
});
|
|
64
|
+
this.timeout = setTimeout(() => {
|
|
65
|
+
close();
|
|
66
|
+
}, 250);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
render() {
|
|
70
|
+
const _this$props = this.props,
|
|
71
|
+
message = _this$props.message,
|
|
72
|
+
scale = _this$props.scale,
|
|
73
|
+
breakpoint = _this$props.breakpoint;
|
|
74
|
+
const styles = (0, _styles.default)(scale, breakpoint);
|
|
75
|
+
const closeActive = this.state.closeActive;
|
|
76
|
+
return /*#__PURE__*/_react.default.createElement(_styles.StyledAnimation, {
|
|
77
|
+
"data-testid": "Styled Animation",
|
|
78
|
+
className: closeActive ? " close" : ""
|
|
79
|
+
}, /*#__PURE__*/_react.default.createElement(_utils.TcView, {
|
|
80
|
+
"data-testid": "message-bar",
|
|
81
|
+
style: styles.messageBarBodyContainer
|
|
82
|
+
}, /*#__PURE__*/_react.default.createElement(_utils.TcView, {
|
|
83
|
+
style: styles.messageBarBody
|
|
84
|
+
}, /*#__PURE__*/_react.default.createElement(_utils.TcText, {
|
|
85
|
+
style: styles.messageBarText
|
|
86
|
+
}, message), /*#__PURE__*/_react.default.createElement(_styles.CloseButton, {
|
|
87
|
+
style: styles.messageBarCloseButton,
|
|
88
|
+
className: closeActive ? " active" : "",
|
|
89
|
+
onClick: this.closeMessage
|
|
90
|
+
}, /*#__PURE__*/_react.default.createElement(_icons.CloseIcon, {
|
|
91
|
+
width: 28,
|
|
92
|
+
height: 28,
|
|
93
|
+
onClick: this.closeMessage
|
|
94
|
+
})))));
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
MessageBar.propTypes = {
|
|
100
|
+
breakpoint: _propTypes.default.string.isRequired,
|
|
101
|
+
close: _propTypes.default.func.isRequired,
|
|
102
|
+
delay: _propTypes.default.number.isRequired,
|
|
103
|
+
message: _propTypes.default.string.isRequired,
|
|
104
|
+
scale: _propTypes.default.string.isRequired
|
|
105
|
+
};
|
|
106
|
+
var _default = MessageBar;
|
|
107
|
+
exports.default = _default;
|
package/dist/message-context.js
CHANGED
|
@@ -1 +1,17 @@
|
|
|
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
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
+
|
|
12
|
+
var _default = _react.default.createContext({
|
|
13
|
+
message: null,
|
|
14
|
+
showMessage: () => {}
|
|
15
|
+
});
|
|
16
|
+
|
|
17
|
+
exports.default = _default;
|
package/dist/message-manager.js
CHANGED
|
@@ -1 +1,115 @@
|
|
|
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 _utils = require("@times-components/utils");
|
|
11
|
+
|
|
12
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
|
+
|
|
14
|
+
var _responsive = require("@times-components/responsive");
|
|
15
|
+
|
|
16
|
+
var _styles = _interopRequireDefault(require("./styles"));
|
|
17
|
+
|
|
18
|
+
var _messageBar = _interopRequireDefault(require("./message-bar"));
|
|
19
|
+
|
|
20
|
+
var _messageContext = _interopRequireDefault(require("./message-context"));
|
|
21
|
+
|
|
22
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
|
+
|
|
24
|
+
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); }
|
|
25
|
+
|
|
26
|
+
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; }
|
|
27
|
+
|
|
28
|
+
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; }
|
|
29
|
+
|
|
30
|
+
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; }
|
|
31
|
+
|
|
32
|
+
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; }
|
|
33
|
+
|
|
34
|
+
// MessageManager implements the pattern found here:
|
|
35
|
+
// https://reactjs.org/docs/context.html#updating-context-from-a-nested-component
|
|
36
|
+
class MessageManager extends _react.Component {
|
|
37
|
+
constructor(props) {
|
|
38
|
+
super(props);
|
|
39
|
+
this.state = {
|
|
40
|
+
message: null,
|
|
41
|
+
showMessage: message => this.addMessage(message),
|
|
42
|
+
offsetTop: 0
|
|
43
|
+
};
|
|
44
|
+
this.addMessage = this.addMessage.bind(this);
|
|
45
|
+
this.removeMessage = this.removeMessage.bind(this);
|
|
46
|
+
this.onLayout = this.onLayout.bind(this);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
onLayout(e) {
|
|
50
|
+
const y = e.nativeEvent.layout.y;
|
|
51
|
+
this.setState({
|
|
52
|
+
offsetTop: y
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
removeMessage() {
|
|
57
|
+
this.setState({
|
|
58
|
+
message: null
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
addMessage(message) {
|
|
63
|
+
this.setState({
|
|
64
|
+
message
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
render() {
|
|
69
|
+
const _this$props = this.props,
|
|
70
|
+
scale = _this$props.scale,
|
|
71
|
+
children = _this$props.children,
|
|
72
|
+
delay = _this$props.delay;
|
|
73
|
+
const _this$state = this.state,
|
|
74
|
+
message = _this$state.message,
|
|
75
|
+
offsetTop = _this$state.offsetTop;
|
|
76
|
+
const styles = (0, _styles.default)(scale);
|
|
77
|
+
const offsetStyle = offsetTop ? {
|
|
78
|
+
position: "fixed",
|
|
79
|
+
top: offsetTop,
|
|
80
|
+
height: message ? 50 : 0
|
|
81
|
+
} : {};
|
|
82
|
+
return /*#__PURE__*/_react.default.createElement(_utils.TcView, null, /*#__PURE__*/_react.default.createElement(_utils.TcView, {
|
|
83
|
+
style: _objectSpread(_objectSpread({}, styles.messageManager), {}, {
|
|
84
|
+
offsetStyle
|
|
85
|
+
})
|
|
86
|
+
}, message && /*#__PURE__*/_react.default.createElement(_responsive.ResponsiveContext.Consumer, null, _ref => {
|
|
87
|
+
let editionBreakpoint = _ref.editionBreakpoint;
|
|
88
|
+
return /*#__PURE__*/_react.default.createElement(_messageBar.default, {
|
|
89
|
+
close: this.removeMessage,
|
|
90
|
+
delay: delay,
|
|
91
|
+
message: message,
|
|
92
|
+
scale: scale,
|
|
93
|
+
breakpoint: editionBreakpoint
|
|
94
|
+
});
|
|
95
|
+
})), /*#__PURE__*/_react.default.createElement(_utils.TcView, {
|
|
96
|
+
onLayout: this.onLayout
|
|
97
|
+
}, /*#__PURE__*/_react.default.createElement(_messageContext.default.Provider, {
|
|
98
|
+
value: this.state
|
|
99
|
+
}, children)));
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
{
|
|
105
|
+
const string = _propTypes.default.string,
|
|
106
|
+
node = _propTypes.default.node,
|
|
107
|
+
number = _propTypes.default.number;
|
|
108
|
+
MessageManager.propTypes = {
|
|
109
|
+
children: node.isRequired,
|
|
110
|
+
delay: number.isRequired,
|
|
111
|
+
scale: string.isRequired
|
|
112
|
+
};
|
|
113
|
+
}
|
|
114
|
+
var _default = MessageManager;
|
|
115
|
+
exports.default = _default;
|
package/dist/styles/index.js
CHANGED
|
@@ -1 +1,48 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = exports.CloseButton = exports.StyledAnimation = void 0;
|
|
7
|
+
|
|
8
|
+
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
9
|
+
|
|
10
|
+
var _utils = require("@times-components/utils");
|
|
11
|
+
|
|
12
|
+
var _shared = _interopRequireDefault(require("./shared"));
|
|
13
|
+
|
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
+
|
|
16
|
+
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); }
|
|
17
|
+
|
|
18
|
+
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; }
|
|
19
|
+
|
|
20
|
+
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; }
|
|
21
|
+
|
|
22
|
+
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; }
|
|
23
|
+
|
|
24
|
+
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; }
|
|
25
|
+
|
|
26
|
+
const styles = (scale, breakpoint) => _objectSpread(_objectSpread({}, (0, _shared.default)(scale, breakpoint)), {}, {
|
|
27
|
+
messageManager: _objectSpread(_objectSpread({}, (0, _shared.default)(scale, breakpoint).messageManager), {}, {
|
|
28
|
+
position: "fixed",
|
|
29
|
+
left: 0
|
|
30
|
+
})
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
const AnimationIn = (0, _styledComponents.keyframes)(["0%{transform:translateY(-51px)}90%{transform:translateY(5px)}100%{transform:translateY(0px)}"]);
|
|
34
|
+
const AnimationOut = (0, _styledComponents.keyframes)(["0%{transform:translateY(0px)}100%{transform:translateY(-51px)}"]);
|
|
35
|
+
const StyledAnimation = (0, _styledComponents.default)(_utils.TcView).withConfig({
|
|
36
|
+
displayName: "styles__StyledAnimation",
|
|
37
|
+
componentId: "sc-1oz68ne-0"
|
|
38
|
+
})(["animation-name:", ";animation-duration:0.25s;animation-timing-function:ease-in-out;&.close{transform:translateY(-51px);animation-name:", ";animation-duration:0.25s;}"], AnimationIn, AnimationOut);
|
|
39
|
+
exports.StyledAnimation = StyledAnimation;
|
|
40
|
+
|
|
41
|
+
const CloseButton = _styledComponents.default.button.withConfig({
|
|
42
|
+
displayName: "styles__CloseButton",
|
|
43
|
+
componentId: "sc-1oz68ne-1"
|
|
44
|
+
})(["cursor:pointer;&.active{opacity:0.5;}:active{opacity:0.5;}"]);
|
|
45
|
+
|
|
46
|
+
exports.CloseButton = CloseButton;
|
|
47
|
+
var _default = styles;
|
|
48
|
+
exports.default = _default;
|
package/dist/styles/shared.js
CHANGED
|
@@ -1 +1,112 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = exports.sharedStyle = 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 height = 50;
|
|
17
|
+
const messageBarBody = {
|
|
18
|
+
maxWidth: 1182,
|
|
19
|
+
width: "100%",
|
|
20
|
+
flexDirection: "row",
|
|
21
|
+
alignItems: "center",
|
|
22
|
+
height,
|
|
23
|
+
flexGrow: 1,
|
|
24
|
+
flexShrink: 0,
|
|
25
|
+
marginHorizontal: "auto"
|
|
26
|
+
};
|
|
27
|
+
const messageBarCloseButton = {
|
|
28
|
+
alignItems: "center",
|
|
29
|
+
backgroundColor: _tsStyleguide.colours.functional.transparentWhite,
|
|
30
|
+
borderRadius: 14,
|
|
31
|
+
height: 28,
|
|
32
|
+
justifyContent: "center",
|
|
33
|
+
marginLeft: "auto",
|
|
34
|
+
marginRight: 20,
|
|
35
|
+
width: 28,
|
|
36
|
+
padding: 0,
|
|
37
|
+
display: "inherit",
|
|
38
|
+
border: "0px"
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
const messageBarText = scale => _objectSpread(_objectSpread({
|
|
42
|
+
color: _tsStyleguide.colours.functional.white
|
|
43
|
+
}, (0, _tsStyleguide.fontFactory)({
|
|
44
|
+
font: "headline",
|
|
45
|
+
fontSize: "secondary",
|
|
46
|
+
scale
|
|
47
|
+
})), {}, {
|
|
48
|
+
marginLeft: 20
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
const sharedStyle = scale => ({
|
|
52
|
+
messageBarBodyContainer: {
|
|
53
|
+
backgroundColor: _tsStyleguide.colours.functional.articleFlagUpdated,
|
|
54
|
+
shadowColor: "rgba(0, 0, 0, 0.2)",
|
|
55
|
+
shadowOffset: {
|
|
56
|
+
height: 2,
|
|
57
|
+
width: 0
|
|
58
|
+
},
|
|
59
|
+
shadowRadius: 5,
|
|
60
|
+
zIndex: 10
|
|
61
|
+
},
|
|
62
|
+
messageBarBody,
|
|
63
|
+
messageBarCloseButton,
|
|
64
|
+
messageBarText: _objectSpread({}, messageBarText(scale)),
|
|
65
|
+
messageManager: {
|
|
66
|
+
flex: 1,
|
|
67
|
+
width: "100%",
|
|
68
|
+
zIndex: 10
|
|
69
|
+
}
|
|
70
|
+
});
|
|
71
|
+
|
|
72
|
+
exports.sharedStyle = sharedStyle;
|
|
73
|
+
|
|
74
|
+
const smallBreakpointStyles = scale => _objectSpread(_objectSpread({}, sharedStyle(scale)), {}, {
|
|
75
|
+
messageBarCloseButton: _objectSpread(_objectSpread({}, messageBarCloseButton), {}, {
|
|
76
|
+
marginRight: 10
|
|
77
|
+
}),
|
|
78
|
+
messageBarText: _objectSpread(_objectSpread({}, messageBarText(scale)), {}, {
|
|
79
|
+
marginLeft: 10
|
|
80
|
+
})
|
|
81
|
+
});
|
|
82
|
+
|
|
83
|
+
const mediumBreakpointStyles = scale => _objectSpread(_objectSpread({}, sharedStyle(scale)), {}, {
|
|
84
|
+
messageBarCloseButton: _objectSpread(_objectSpread({}, messageBarCloseButton), {}, {
|
|
85
|
+
marginRight: 10
|
|
86
|
+
}),
|
|
87
|
+
messageBarText: _objectSpread(_objectSpread({}, messageBarText(scale)), {}, {
|
|
88
|
+
marginLeft: 60
|
|
89
|
+
})
|
|
90
|
+
});
|
|
91
|
+
|
|
92
|
+
const wideBreakpointStyles = scale => _objectSpread(_objectSpread({}, sharedStyle(scale)), {}, {
|
|
93
|
+
messageBarBody: _objectSpread(_objectSpread({}, messageBarBody), {}, {
|
|
94
|
+
maxWidth: 1024
|
|
95
|
+
})
|
|
96
|
+
});
|
|
97
|
+
|
|
98
|
+
const hugeBreakpointStyles = scale => _objectSpread({}, sharedStyle(scale));
|
|
99
|
+
|
|
100
|
+
const stylesResolver = {
|
|
101
|
+
small: smallBreakpointStyles,
|
|
102
|
+
medium: mediumBreakpointStyles,
|
|
103
|
+
wide: wideBreakpointStyles,
|
|
104
|
+
huge: hugeBreakpointStyles
|
|
105
|
+
};
|
|
106
|
+
|
|
107
|
+
var _default = function _default(scale) {
|
|
108
|
+
let breakpoint = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "huge";
|
|
109
|
+
return stylesResolver[breakpoint](scale);
|
|
110
|
+
};
|
|
111
|
+
|
|
112
|
+
exports.default = _default;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@times-components/message-bar",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.1",
|
|
4
4
|
"description": "A component for showing user notifications",
|
|
5
5
|
"main": "dist/index",
|
|
6
6
|
"dev": "src/index",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"fmt": "eslint . --fix && prettier --write '**/*.{js,json}'",
|
|
10
10
|
"prettier:diff": "prettier --list-different '**/*.{js,json}'",
|
|
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
|
"watch": "watch 'yarn bundle' ./src --ignoreDotFiles --ignoreUnreadable",
|
|
15
15
|
"cleanup-dist": "rm -rf dist",
|
|
@@ -32,14 +32,12 @@
|
|
|
32
32
|
},
|
|
33
33
|
"homepage": "https://github.com/newsuk/times-components#readme",
|
|
34
34
|
"devDependencies": {
|
|
35
|
-
"@babel/core": "7.4.4",
|
|
36
|
-
"@thetimes/jest-lint": "*",
|
|
37
35
|
"@times-components/eslint-config-thetimes": "0.8.18",
|
|
38
|
-
"@times-components/jest-configurator": "
|
|
39
|
-
"@times-components/jest-serializer": "3.
|
|
40
|
-
"@times-components/storybook": "4.
|
|
41
|
-
"@times-components/test-utils": "2.
|
|
42
|
-
"@times-components/webpack-configurator": "2.0
|
|
36
|
+
"@times-components/jest-configurator-web": "0.8.0",
|
|
37
|
+
"@times-components/jest-serializer": "3.4.1",
|
|
38
|
+
"@times-components/storybook": "4.5.1",
|
|
39
|
+
"@times-components/test-utils": "2.4.0",
|
|
40
|
+
"@times-components/webpack-configurator": "2.1.0",
|
|
43
41
|
"enzyme": "3.9.0",
|
|
44
42
|
"eslint": "5.9.0",
|
|
45
43
|
"jest": "24.8.0",
|
|
@@ -47,8 +45,7 @@
|
|
|
47
45
|
"react": "16.9.0",
|
|
48
46
|
"react-dom": "16.9.0",
|
|
49
47
|
"react-test-renderer": "16.9.0",
|
|
50
|
-
"webpack": "4.30.0"
|
|
51
|
-
"webpack-cli": "3.3.1"
|
|
48
|
+
"webpack": "4.30.0"
|
|
52
49
|
},
|
|
53
50
|
"resolutions": {
|
|
54
51
|
"react": "16.9.0",
|
|
@@ -59,15 +56,15 @@
|
|
|
59
56
|
"react-dom": ">=16.9"
|
|
60
57
|
},
|
|
61
58
|
"dependencies": {
|
|
62
|
-
"@times-components/icons": "2.
|
|
63
|
-
"@times-components/responsive": "0.
|
|
64
|
-
"@times-components/ts-styleguide": "1.
|
|
65
|
-
"@times-components/utils": "6.
|
|
59
|
+
"@times-components/icons": "2.19.1",
|
|
60
|
+
"@times-components/responsive": "0.14.1",
|
|
61
|
+
"@times-components/ts-styleguide": "1.37.1",
|
|
62
|
+
"@times-components/utils": "6.15.1",
|
|
66
63
|
"prop-types": "15.7.2",
|
|
67
64
|
"styled-components": "4.3.2"
|
|
68
65
|
},
|
|
69
66
|
"publishConfig": {
|
|
70
67
|
"access": "public"
|
|
71
68
|
},
|
|
72
|
-
"gitHead": "
|
|
69
|
+
"gitHead": "d33c3115e165e09794ffdfd7931e217620f7ce07"
|
|
73
70
|
}
|
package/rnw.js
CHANGED
|
@@ -1 +1 @@
|
|
|
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=14)}([function(e,t){e.exports=require("@babel/runtime/helpers/interopRequireDefault")},function(e,t){e.exports=require("@babel/runtime/helpers/defineProperty")},function(e,t){e.exports=require("react")},function(e,t){e.exports=require("@times-components/utils/rnw")},function(e,t){e.exports=require("@babel/runtime/helpers/classCallCheck")},function(e,t){e.exports=require("@babel/runtime/helpers/createClass")},function(e,t){e.exports=require("@babel/runtime/helpers/assertThisInitialized")},function(e,t){e.exports=require("@babel/runtime/helpers/inherits")},function(e,t){e.exports=require("@babel/runtime/helpers/possibleConstructorReturn")},function(e,t){e.exports=require("@babel/runtime/helpers/getPrototypeOf")},function(e,t){e.exports=require("prop-types")},function(e,t,r){var n=r(0);Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.CloseButton=t.StyledAnimation=void 0;var o=n(r(1)),a=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var r=s(t);if(r&&r.has(e))return r.get(e);var n={},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&Object.prototype.hasOwnProperty.call(e,a)){var i=o?Object.getOwnPropertyDescriptor(e,a):null;i&&(i.get||i.set)?Object.defineProperty(n,a,i):n[a]=e[a]}n.default=e,r&&r.set(e,n);return n}(r(17)),i=r(3),u=n(r(18));function s(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,r=new WeakMap;return(s=function(e){return e?r:t})(e)}function l(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 c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?l(Object(r),!0).forEach((function(t){(0,o.default)(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):l(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var f=(0,a.keyframes)(["0%{transform:translateY(-51px)}90%{transform:translateY(5px)}100%{transform:translateY(0px)}"]),p=(0,a.keyframes)(["0%{transform:translateY(0px)}100%{transform:translateY(-51px)}"]),d=(0,a.default)(i.TcView).withConfig({displayName:"styles__StyledAnimation",componentId:"sc-1oz68ne-0"})(["animation-name:",";animation-duration:0.25s;animation-timing-function:ease-in-out;&.close{transform:translateY(-51px);animation-name:",";animation-duration:0.25s;}"],f,p);t.StyledAnimation=d;var y=a.default.button.withConfig({displayName:"styles__CloseButton",componentId:"sc-1oz68ne-1"})(["cursor:pointer;&.active{opacity:0.5;}:active{opacity:0.5;}"]);t.CloseButton=y;var m=function(e,t){return c(c({},(0,u.default)(e,t)),{},{messageManager:c(c({},(0,u.default)(e,t).messageManager),{},{position:"fixed",left:0})})};t.default=m},function(e,t,r){var n=r(0);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var o=n(r(4)),a=n(r(5)),i=n(r(6)),u=n(r(7)),s=n(r(8)),l=n(r(9)),c=m(r(2)),f=r(3),p=(n(r(10)),r(20)),d=m(r(11));function y(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,r=new WeakMap;return(y=function(e){return e?r:t})(e)}function m(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var r=y(t);if(r&&r.has(e))return r.get(e);var n={},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&Object.prototype.hasOwnProperty.call(e,a)){var i=o?Object.getOwnPropertyDescriptor(e,a):null;i&&(i.get||i.set)?Object.defineProperty(n,a,i):n[a]=e[a]}return n.default=e,r&&r.set(e,n),n}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=(0,l.default)(e);if(t){var o=(0,l.default)(this).constructor;r=Reflect.construct(n,arguments,o)}else r=n.apply(this,arguments);return(0,s.default)(this,r)}}var b=function(e){(0,u.default)(r,e);var t=g(r);function r(e){var n;return(0,o.default)(this,r),(n=t.call(this,e)).closeMessage=n.closeMessage.bind((0,i.default)(n)),n.state={closeActive:!1},n}return(0,a.default)(r,[{key:"componentDidMount",value:function(){var e=this,t=this.props.delay;this.timeout=setTimeout((function(){e.closeMessage()}),t)}},{key:"componentDidUpdate",value:function(e){var t=this,r=this.props.message,n=e.message,o=e.delay;n===r&&(clearTimeout(this.timeout),this.timeout=setTimeout((function(){t.closeMessage()}),o))}},{key:"componentWillUnmount",value:function(){this.timeout&&clearTimeout(this.timeout)}},{key:"closeMessage",value:function(){var e=this.props.close;this.setState({closeActive:!0}),this.timeout=setTimeout((function(){e()}),250)}},{key:"render",value:function(){var e=this.props,t=e.message,r=e.scale,n=e.breakpoint,o=(0,d.default)(r,n),a=this.state.closeActive;return c.default.createElement(d.StyledAnimation,{"data-testid":"Styled Animation",className:a?" close":""},c.default.createElement(f.TcView,{"data-testid":"message-bar",style:o.messageBarBodyContainer},c.default.createElement(f.TcView,{style:o.messageBarBody},c.default.createElement(f.TcText,{style:o.messageBarText},t),c.default.createElement(d.CloseButton,{style:o.messageBarCloseButton,className:a?" active":"",onClick:this.closeMessage},c.default.createElement(p.CloseIcon,{width:28,height:28,onClick:this.closeMessage})))))}}]),r}(c.Component);t.default=b},function(e,t,r){var n=r(0);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var o=n(r(2)).default.createContext({message:null,showMessage:function(){}});t.default=o},function(e,t,r){var n=r(0);Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"MessageManager",{enumerable:!0,get:function(){return o.default}}),Object.defineProperty(t,"MessageBar",{enumerable:!0,get:function(){return a.default}}),Object.defineProperty(t,"MessageContext",{enumerable:!0,get:function(){return i.default}});var o=n(r(15)),a=n(r(12)),i=n(r(13))},function(e,t,r){var n=r(0);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var o=n(r(1)),a=n(r(4)),i=n(r(5)),u=n(r(6)),s=n(r(7)),l=n(r(8)),c=n(r(9)),f=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var r=v(t);if(r&&r.has(e))return r.get(e);var n={},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&Object.prototype.hasOwnProperty.call(e,a)){var i=o?Object.getOwnPropertyDescriptor(e,a):null;i&&(i.get||i.set)?Object.defineProperty(n,a,i):n[a]=e[a]}n.default=e,r&&r.set(e,n);return n}(r(2)),p=r(3),d=n(r(10)),y=r(16),m=n(r(11)),g=n(r(12)),b=n(r(13));function v(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,r=new WeakMap;return(v=function(e){return e?r:t})(e)}function h(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 O(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?h(Object(r),!0).forEach((function(t){(0,o.default)(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):h(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function j(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=(0,c.default)(e);if(t){var o=(0,c.default)(this).constructor;r=Reflect.construct(n,arguments,o)}else r=n.apply(this,arguments);return(0,l.default)(this,r)}}var w=function(e){(0,s.default)(r,e);var t=j(r);function r(e){var n;return(0,a.default)(this,r),(n=t.call(this,e)).state={message:null,showMessage:function(e){return n.addMessage(e)},offsetTop:0},n.addMessage=n.addMessage.bind((0,u.default)(n)),n.removeMessage=n.removeMessage.bind((0,u.default)(n)),n.onLayout=n.onLayout.bind((0,u.default)(n)),n}return(0,i.default)(r,[{key:"onLayout",value:function(e){var t=e.nativeEvent.layout.y;this.setState({offsetTop:t})}},{key:"removeMessage",value:function(){this.setState({message:null})}},{key:"addMessage",value:function(e){this.setState({message:e})}},{key:"render",value:function(){var e=this,t=this.props,r=t.scale,n=t.children,o=t.delay,a=this.state,i=a.message,u=a.offsetTop,s=(0,m.default)(r),l=u?{position:"fixed",top:u,height:i?50:0}:{};return f.default.createElement(p.TcView,null,f.default.createElement(p.TcView,{style:O(O({},s.messageManager),{},{offsetStyle:l})},i&&f.default.createElement(y.ResponsiveContext.Consumer,null,(function(t){var n=t.editionBreakpoint;return f.default.createElement(g.default,{close:e.removeMessage,delay:o,message:i,scale:r,breakpoint:n})}))),f.default.createElement(p.TcView,{onLayout:this.onLayout},f.default.createElement(b.default.Provider,{value:this.state},n)))}}]),r}(f.Component),P=(d.default.string,d.default.node,d.default.number,w);t.default=P},function(e,t){e.exports=require("@times-components/responsive/rnw")},function(e,t){e.exports=require("styled-components")},function(e,t,r){var n=r(0);Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.sharedStyle=void 0;var o=n(r(1)),a=r(19);function i(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 u(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){(0,o.default)(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var s={maxWidth:1182,width:"100%",flexDirection:"row",alignItems:"center",height:50,flexGrow:1,flexShrink:0,marginHorizontal:"auto"},l={alignItems:"center",backgroundColor:a.colours.functional.transparentWhite,borderRadius:14,height:28,justifyContent:"center",marginLeft:"auto",marginRight:20,width:28,padding:0,display:"inherit",border:"0px"},c=function(e){return u(u({color:a.colours.functional.white},(0,a.fontFactory)({font:"headline",fontSize:"secondary",scale:e})),{},{marginLeft:20})},f=function(e){return{messageBarBodyContainer:{backgroundColor:a.colours.functional.articleFlagUpdated,shadowColor:"rgba(0, 0, 0, 0.2)",shadowOffset:{height:2,width:0},shadowRadius:5,zIndex:10},messageBarBody:s,messageBarCloseButton:l,messageBarText:u({},c(e)),messageManager:{flex:1,width:"100%",zIndex:10}}};t.sharedStyle=f;var p={small:function(e){return u(u({},f(e)),{},{messageBarCloseButton:u(u({},l),{},{marginRight:10}),messageBarText:u(u({},c(e)),{},{marginLeft:10})})},medium:function(e){return u(u({},f(e)),{},{messageBarCloseButton:u(u({},l),{},{marginRight:10}),messageBarText:u(u({},c(e)),{},{marginLeft:60})})},wide:function(e){return u(u({},f(e)),{},{messageBarBody:u(u({},s),{},{maxWidth:1024})})},huge:function(e){return u({},f(e))}};t.default=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"huge";return p[t](e)}},function(e,t){e.exports=require("@times-components/ts-styleguide/rnw")},function(e,t){e.exports=require("@times-components/icons/rnw")}]);
|
|
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=7)}([function(e,t){e.exports=require("react")},function(e,t){e.exports=require("@times-components/utils/rnw")},function(e,t){e.exports=require("prop-types")},function(e,t){e.exports=require("styled-components")},function(e,t){e.exports=require("@times-components/ts-styleguide/rnw")},function(e,t){e.exports=require("@times-components/responsive/rnw")},function(e,t){e.exports=require("@times-components/icons/rnw")},function(e,t,r){"use strict";r.r(t);var n=r(0),o=r.n(n),s=r(1),a=r(2),i=r.n(a),c=r(5),l=r(3),u=r.n(l),m=r(4);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 f(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){g(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}function g(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const d={maxWidth:1182,width:"100%",flexDirection:"row",alignItems:"center",height:50,flexGrow:1,flexShrink:0,marginHorizontal:"auto"},h={alignItems:"center",backgroundColor:m.colours.functional.transparentWhite,borderRadius:14,height:28,justifyContent:"center",marginLeft:"auto",marginRight:20,width:28,padding:0,display:"inherit",border:"0px"},y=e=>f(f({color:m.colours.functional.white},Object(m.fontFactory)({font:"headline",fontSize:"secondary",scale:e})),{},{marginLeft:20}),b=e=>({messageBarBodyContainer:{backgroundColor:m.colours.functional.articleFlagUpdated,shadowColor:"rgba(0, 0, 0, 0.2)",shadowOffset:{height:2,width:0},shadowRadius:5,zIndex:10},messageBarBody:d,messageBarCloseButton:h,messageBarText:f({},y(e)),messageManager:{flex:1,width:"100%",zIndex:10}}),O={small:e=>f(f({},b(e)),{},{messageBarCloseButton:f(f({},h),{},{marginRight:10}),messageBarText:f(f({},y(e)),{},{marginLeft:10})}),medium:e=>f(f({},b(e)),{},{messageBarCloseButton:f(f({},h),{},{marginRight:10}),messageBarText:f(f({},y(e)),{},{marginLeft:60})}),wide:e=>f(f({},b(e)),{},{messageBarBody:f(f({},d),{},{maxWidth:1024})}),huge:e=>f({},b(e))};var w=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"huge";return O[t](e)};function j(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 v(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?j(Object(r),!0).forEach((function(t){x(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):j(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function x(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const P=Object(l.keyframes)(["0%{transform:translateY(-51px)}90%{transform:translateY(5px)}100%{transform:translateY(0px)}"]),M=Object(l.keyframes)(["0%{transform:translateY(0px)}100%{transform:translateY(-51px)}"]),B=u()(s.TcView).withConfig({displayName:"styles__StyledAnimation",componentId:"sc-1oz68ne-0"})(["animation-name:",";animation-duration:0.25s;animation-timing-function:ease-in-out;&.close{transform:translateY(-51px);animation-name:",";animation-duration:0.25s;}"],P,M),C=u.a.button.withConfig({displayName:"styles__CloseButton",componentId:"sc-1oz68ne-1"})(["cursor:pointer;&.active{opacity:0.5;}:active{opacity:0.5;}"]);var T=(e,t)=>v(v({},w(e,t)),{},{messageManager:v(v({},w(e,t).messageManager),{},{position:"fixed",left:0})}),S=r(6);class E extends n.Component{constructor(e){super(e),this.closeMessage=this.closeMessage.bind(this),this.state={closeActive:!1}}componentDidMount(){const e=this.props.delay;this.timeout=setTimeout(()=>{this.closeMessage()},e)}componentDidUpdate(e){const t=this.props.message,r=e.message,n=e.delay;r===t&&(clearTimeout(this.timeout),this.timeout=setTimeout(()=>{this.closeMessage()},n))}componentWillUnmount(){this.timeout&&clearTimeout(this.timeout)}closeMessage(){const e=this.props.close;this.setState({closeActive:!0}),this.timeout=setTimeout(()=>{e()},250)}render(){const e=this.props,t=e.message,r=e.scale,n=e.breakpoint,a=T(r,n),i=this.state.closeActive;return o.a.createElement(B,{"data-testid":"Styled Animation",className:i?" close":""},o.a.createElement(s.TcView,{"data-testid":"message-bar",style:a.messageBarBodyContainer},o.a.createElement(s.TcView,{style:a.messageBarBody},o.a.createElement(s.TcText,{style:a.messageBarText},t),o.a.createElement(C,{style:a.messageBarCloseButton,className:i?" active":"",onClick:this.closeMessage},o.a.createElement(S.CloseIcon,{width:28,height:28,onClick:this.closeMessage})))))}}var D=E,k=o.a.createContext({message:null,showMessage:()=>{}});function _(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 L(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?_(Object(r),!0).forEach((function(t){q(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):_(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function q(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}class I extends n.Component{constructor(e){super(e),this.state={message:null,showMessage:e=>this.addMessage(e),offsetTop:0},this.addMessage=this.addMessage.bind(this),this.removeMessage=this.removeMessage.bind(this),this.onLayout=this.onLayout.bind(this)}onLayout(e){const t=e.nativeEvent.layout.y;this.setState({offsetTop:t})}removeMessage(){this.setState({message:null})}addMessage(e){this.setState({message:e})}render(){const e=this.props,t=e.scale,r=e.children,n=e.delay,a=this.state,i=a.message,l=a.offsetTop,u=T(t),m=l?{position:"fixed",top:l,height:i?50:0}:{};return o.a.createElement(s.TcView,null,o.a.createElement(s.TcView,{style:L(L({},u.messageManager),{},{offsetStyle:m})},i&&o.a.createElement(c.ResponsiveContext.Consumer,null,e=>{let r=e.editionBreakpoint;return o.a.createElement(D,{close:this.removeMessage,delay:n,message:i,scale:t,breakpoint:r})})),o.a.createElement(s.TcView,{onLayout:this.onLayout},o.a.createElement(k.Provider,{value:this.state},r)))}}i.a.string,i.a.node,i.a.number;var z=I;r.d(t,"MessageManager",(function(){return z})),r.d(t,"MessageBar",(function(){return D})),r.d(t,"MessageContext",(function(){return k}))}]);
|