orc-shared 5.10.0-dev.18 → 5.10.0-dev.19

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.
Files changed (28) hide show
  1. package/dist/components/AppFrame/About.js +134 -100
  2. package/dist/components/AppFrame/Anchor.js +45 -21
  3. package/dist/components/AppFrame/AppFrame.js +53 -31
  4. package/dist/components/AppFrame/Help.js +35 -15
  5. package/dist/components/AppFrame/MenuItem.js +148 -114
  6. package/dist/components/AppFrame/Preferences.js +95 -57
  7. package/dist/components/AppFrame/Sidebar.js +51 -28
  8. package/dist/components/AppFrame/Topbar.js +61 -36
  9. package/package.json +1 -1
  10. package/src/components/AppFrame/About.js +91 -113
  11. package/src/components/AppFrame/About.test.js +127 -89
  12. package/src/components/AppFrame/Anchor.js +34 -36
  13. package/src/components/AppFrame/Anchor.test.js +5 -68
  14. package/src/components/AppFrame/AppFrame.js +31 -40
  15. package/src/components/AppFrame/AppFrame.test.js +424 -432
  16. package/src/components/AppFrame/Help.js +23 -20
  17. package/src/components/AppFrame/Help.test.js +3 -3
  18. package/src/components/AppFrame/MenuItem.js +106 -126
  19. package/src/components/AppFrame/MenuItem.test.js +78 -169
  20. package/src/components/AppFrame/Preferences.js +83 -72
  21. package/src/components/AppFrame/Preferences.test.js +24 -30
  22. package/src/components/AppFrame/Sidebar.js +39 -41
  23. package/src/components/AppFrame/Sidebar.test.js +88 -168
  24. package/src/components/AppFrame/Topbar.js +59 -52
  25. package/src/components/AppFrame/Topbar.test.js +28 -29
  26. package/dist/components/AppFrame/ApplicationSelector/Header.js +0 -82
  27. package/src/components/AppFrame/ApplicationSelector/Header.js +0 -34
  28. package/src/components/AppFrame/ApplicationSelector/Header.test.js +0 -23
package/dist/components/AppFrame/About.js CHANGED
@@ -1,14 +1,12 @@
1
1
  "use strict";
2
2
 
3
3
  exports.__esModule = true;
4
- exports.getClickOutsideHandler = exports.default = exports.CloseButton = exports.AboutParagraph = exports.AboutLink = exports.AboutBox = exports.About = exports.ABOUT_NAME = void 0;
4
+ exports.getClickOutsideHandler = exports.default = exports.AboutBox = exports.About = exports.ABOUT_NAME = void 0;
5
5
  var _react = _interopRequireDefault(require("react"));
6
6
  var _reactDom = _interopRequireDefault(require("react-dom"));
7
7
  var _reactRedux = require("react-redux");
8
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
9
- var _styledTransitionGroup = _interopRequireDefault(require("styled-transition-group"));
10
- var _utils = require("../../utils");
11
- var _Text = _interopRequireDefault(require("../Text"));
8
+ var _reactIntl = require("react-intl");
9
+ var _styles = require("@material-ui/core/styles");
12
10
  var _withClickOutside = _interopRequireDefault(require("../../hocs/withClickOutside"));
13
11
  var _useViewState3 = _interopRequireDefault(require("../../hooks/useViewState"));
14
12
  var _aboutBackground = _interopRequireDefault(require("../../content/aboutBackground.png"));
@@ -18,9 +16,6 @@ var _versionInfo = require("../../selectors/versionInfo");
18
16
  var _locale = require("../../selectors/locale");
19
17
  var _sharedMessages = _interopRequireDefault(require("./../../sharedMessages"));
20
18
  var _lodash = require("lodash");
21
- var _templateObject;
22
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
23
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
24
19
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
25
20
  (function () {
26
21
  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
@@ -30,18 +25,13 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
30
25
  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
31
26
  enterModule && enterModule(module);
32
27
  })();
33
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
34
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
35
- function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
36
- function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
37
- function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
28
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
38
29
  function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
39
30
  function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
40
31
  function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
41
32
  function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
42
33
  function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
43
34
  function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
44
- function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
45
35
  var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
46
36
  return a;
47
37
  };
@@ -52,34 +42,89 @@ var ABOUT_NAME = exports.ABOUT_NAME = "__aboutBox";
52
42
  var getModalRoot = function getModalRoot() {
53
43
  return document.getElementById("modal");
54
44
  };
55
- var AboutBox = exports.AboutBox = (0, _withClickOutside.default)(_styledTransitionGroup.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tbox-sizing: border-box;\n\tz-index: 9999;\n\tposition: absolute;\n\ttop: calc(50% - 210px);\n\tleft: calc(50% - 210px);\n\theight: 420px;\n\twidth: 420px;\n\tpadding: 15px 20px;\n\tcolor: #ffffff;\n\tfont-size: 13px;\n\tline-height: 16px;\n\tbackground: #0a0a07 url(", ");\n\ttransition: opacity ", "ms ease-out;\n\n\t&:enter {\n\t\topacity: 0;\n\t}\n\t&:enter-active {\n\t\topacity: 1;\n\t}\n\t&:exit {\n\t\topacity: 1;\n\t}\n\t&:exit-active {\n\t\topacity: 0;\n\t}\n"])), _aboutBackground.default, function (props) {
56
- return props.timeout;
57
- }));
58
- AboutBox.defaultProps = {
59
- timeout: 800,
60
- unmountOnExit: true
61
- };
62
- var CloseButton = exports.CloseButton = _styledComponents.default.p.withConfig({
63
- displayName: "About__CloseButton",
64
- componentId: "sc-1y9zgcc-0"
65
- })(["z-index:9999;position:absolute;color:#ffffff;top:15px;right:20px;margin:0;cursor:pointer;opacity:1;&:hover{opacity:0.75;}"]);
66
- var AboutParagraph = exports.AboutParagraph = _styledComponents.default.p.withConfig({
67
- displayName: "About__AboutParagraph",
68
- componentId: "sc-1y9zgcc-1"
69
- })(["margin-top:20px;", ""], (0, _utils.ifFlag)("long", (0, _styledComponents.css)(["html[lang^=\"fr\"] &{font-size:10px;}"])));
70
- var AboutLink = exports.AboutLink = _styledComponents.default.a.withConfig({
71
- displayName: "About__AboutLink",
72
- componentId: "sc-1y9zgcc-2"
73
- })(["color:#337ab7;text-decoration:none;"]);
74
- var getClickOutsideHandler = exports.getClickOutsideHandler = function getClickOutsideHandler(_ref, updateViewState) {
75
- var show = _ref.show;
45
+ var useStyles = (0, _styles.makeStyles)(function () {
46
+ return {
47
+ aboutBox: function aboutBox(props) {
48
+ return {
49
+ boxSizing: "border-box",
50
+ zIndex: 9999,
51
+ position: "absolute",
52
+ top: "calc(50% - 210px)",
53
+ left: "calc(50% - 210px)",
54
+ height: "420px",
55
+ width: "420px",
56
+ padding: "15px 20px",
57
+ color: "#ffffff",
58
+ fontSize: "13px",
59
+ lineHeight: "16px",
60
+ background: "#0a0a07 url(".concat(props.bgImage, ")"),
61
+ "&.enter-active": {
62
+ opacity: 1,
63
+ transition: "none"
64
+ },
65
+ "&.exit-active": {
66
+ opacity: 0,
67
+ transition: "opacity 800ms ease-out"
68
+ }
69
+ };
70
+ },
71
+ closeButton: {
72
+ zIndex: 9999,
73
+ position: "absolute",
74
+ color: "#ffffff",
75
+ top: "15px",
76
+ right: "20px",
77
+ margin: "0",
78
+ cursor: "pointer",
79
+ opacity: "1",
80
+ "&:hover": {
81
+ opacity: 0.75
82
+ }
83
+ },
84
+ aboutLink: {
85
+ color: "#337ab7",
86
+ textDecoration: "none"
87
+ },
88
+ aboutParagraph: {
89
+ marginTop: "20px"
90
+ },
91
+ longAboutParagraph: function longAboutParagraph(props) {
92
+ var _props$lang;
93
+ return {
94
+ marginTop: "20px",
95
+ fontSize: (_props$lang = props.lang) != null && _props$lang.toLowerCase().startsWith("fr") ? "10px" : undefined
96
+ };
97
+ }
98
+ };
99
+ });
100
+ var AboutBox = exports.AboutBox = (0, _withClickOutside.default)(_react.default.forwardRef(__signature__(__signature__(function (_ref, ref) {
101
+ var children = _ref.children,
102
+ className = _ref.className;
103
+ var classes = useStyles({
104
+ bgImage: _aboutBackground.default
105
+ });
106
+ return /*#__PURE__*/_react.default.createElement("div", {
107
+ ref: ref,
108
+ className: "".concat(classes.aboutBox, " ").concat(className ? className : "")
109
+ }, children);
110
+ }, "useStyles{classes}", function () {
111
+ return [useStyles];
112
+ }), "useStyles{classes}", function () {
113
+ return [useStyles];
114
+ })));
115
+ var getClickOutsideHandler = exports.getClickOutsideHandler = function getClickOutsideHandler(_ref2, updateViewState) {
116
+ var show = _ref2.show;
76
117
  return show ? function (event) {
77
118
  event.stopPropagation();
78
119
  updateViewState("show", false);
79
120
  } : function () {};
80
121
  };
81
- var About = exports.About = function About(_ref2) {
82
- var currentApplication = _ref2.currentApplication;
122
+ var About = exports.About = function About(_ref3) {
123
+ var currentApplication = _ref3.currentApplication;
124
+ var lang = document.documentElement.lang;
125
+ var classes = useStyles({
126
+ lang: lang
127
+ });
83
128
  var _useViewState = (0, _useViewState3.default)(ABOUT_NAME),
84
129
  _useViewState2 = _slicedToArray(_useViewState, 2),
85
130
  viewState = _useViewState2[0],
@@ -89,9 +134,10 @@ var About = exports.About = function About(_ref2) {
89
134
  var closeAboutBox = getClickOutsideHandler(viewState, updateViewState);
90
135
  var aboutLinkUrl = "https://www.orckestra.com".concat(locale.substr(0, 2).toLowerCase() === "fr" ? "/fr" : "");
91
136
  return /*#__PURE__*/_react.default.createElement(AboutBox, {
92
- in: viewState.show,
137
+ className: "".concat(viewState.show ? "enter-active" : "exit-active"),
93
138
  onClickOutside: closeAboutBox
94
- }, /*#__PURE__*/_react.default.createElement(CloseButton, {
139
+ }, /*#__PURE__*/_react.default.createElement("p", {
140
+ className: classes.closeButton,
95
141
  onClick: closeAboutBox
96
142
  }, /*#__PURE__*/_react.default.createElement("img", {
97
143
  src: _close.default,
@@ -100,68 +146,60 @@ var About = exports.About = function About(_ref2) {
100
146
  src: _orckestraLogoWhite.default,
101
147
  width: "250",
102
148
  alt: "Orckestra"
103
- }), /*#__PURE__*/_react.default.createElement(AboutParagraph, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
104
- message: _objectSpread(_objectSpread({}, _sharedMessages.default.ccVersion), {}, {
105
- values: {
106
- version: version
107
- }
108
- })
109
- }), currentApplication && currentApplication.displayName ? [/*#__PURE__*/_react.default.createElement("br", {
149
+ }), /*#__PURE__*/_react.default.createElement("p", {
150
+ className: classes.aboutParagraph
151
+ }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _extends({}, _sharedMessages.default.ccVersion, {
152
+ values: {
153
+ version: version
154
+ }
155
+ })), currentApplication && currentApplication.displayName ? [/*#__PURE__*/_react.default.createElement("br", {
110
156
  key: "application-br"
111
- }), /*#__PURE__*/_react.default.createElement(_Text.default, {
112
- key: "application-version",
113
- message: currentApplication.displayName.concat(" ", window.BUILD_NUMBER)
114
- })] : null, DEPENDENCIES && DEPENDENCIES["orc-shared"] ? [/*#__PURE__*/_react.default.createElement("br", {
157
+ }), currentApplication.displayName.concat(" ", window.BUILD_NUMBER)] : null, DEPENDENCIES && DEPENDENCIES["orc-shared"] ? [/*#__PURE__*/_react.default.createElement("br", {
115
158
  key: "orc-shared-br"
116
- }), /*#__PURE__*/_react.default.createElement(_Text.default, {
117
- key: "orc-shared-version",
118
- message: _objectSpread(_objectSpread({}, _sharedMessages.default.orcSharedVersion), {}, {
119
- values: {
120
- version: (0, _lodash.trimStart)(DEPENDENCIES["orc-shared"], "^")
121
- }
122
- })
123
- })] : null, DEPENDENCIES && DEPENDENCIES["orc-scripts"] ? [/*#__PURE__*/_react.default.createElement("br", {
159
+ }), /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _extends({
160
+ key: "orc-shared-version"
161
+ }, _sharedMessages.default.orcSharedVersion, {
162
+ values: {
163
+ version: (0, _lodash.trimStart)(DEPENDENCIES["orc-shared"], "^")
164
+ }
165
+ }))] : null, DEPENDENCIES && DEPENDENCIES["orc-scripts"] ? [/*#__PURE__*/_react.default.createElement("br", {
124
166
  key: "orc-scripts-br"
125
- }), /*#__PURE__*/_react.default.createElement(_Text.default, {
126
- key: "orc-scripts-version",
127
- message: _objectSpread(_objectSpread({}, _sharedMessages.default.orcScriptsVersion), {}, {
128
- values: {
129
- version: (0, _lodash.trimStart)(DEPENDENCIES["orc-scripts"], "^")
130
- }
131
- })
132
- })] : null, DEPENDENCIES && DEPENDENCIES["orc-secret"] ? [/*#__PURE__*/_react.default.createElement("br", {
167
+ }), /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _extends({
168
+ key: "orc-scripts-version"
169
+ }, _sharedMessages.default.orcScriptsVersion, {
170
+ values: {
171
+ version: (0, _lodash.trimStart)(DEPENDENCIES["orc-scripts"], "^")
172
+ }
173
+ }))] : null, DEPENDENCIES && DEPENDENCIES["orc-secret"] ? [/*#__PURE__*/_react.default.createElement("br", {
133
174
  key: "orc-secret-br"
134
- }), /*#__PURE__*/_react.default.createElement(_Text.default, {
135
- key: "orc-secret-version",
136
- message: _objectSpread(_objectSpread({}, _sharedMessages.default.orcSecretVersion), {}, {
137
- values: {
138
- version: (0, _lodash.trimStart)(DEPENDENCIES["orc-secret"], "^")
139
- }
140
- })
141
- })] : null), /*#__PURE__*/_react.default.createElement(AboutParagraph, {
142
- long: true
143
- }, /*#__PURE__*/_react.default.createElement(_Text.default, {
144
- message: _sharedMessages.default.copyrightTermsNotice
145
- })), /*#__PURE__*/_react.default.createElement(AboutParagraph, null, /*#__PURE__*/_react.default.createElement(AboutLink, {
175
+ }), /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _extends({
176
+ key: "orc-secret-version"
177
+ }, _sharedMessages.default.orcSecretVersion, {
178
+ values: {
179
+ version: (0, _lodash.trimStart)(DEPENDENCIES["orc-secret"], "^")
180
+ }
181
+ }))] : null), /*#__PURE__*/_react.default.createElement("p", {
182
+ className: classes.longAboutParagraph
183
+ }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _sharedMessages.default.copyrightTermsNotice)), /*#__PURE__*/_react.default.createElement("p", {
184
+ className: classes.aboutParagraph
185
+ }, /*#__PURE__*/_react.default.createElement("a", {
186
+ className: classes.aboutLink,
146
187
  href: aboutLinkUrl,
147
- target: "_blank"
148
- }, /*#__PURE__*/_react.default.createElement(_Text.default, {
149
- message: _sharedMessages.default.ccName
150
- }))), /*#__PURE__*/_react.default.createElement(AboutParagraph, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
151
- message: _objectSpread(_objectSpread({}, _sharedMessages.default.copyright), {}, {
152
- values: {
153
- year: new Date().getFullYear()
154
- }
155
- })
156
- }), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Text.default, {
157
- message: _sharedMessages.default.allRightsReserved
158
- })));
188
+ target: "_blank",
189
+ rel: "noreferrer"
190
+ }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _sharedMessages.default.ccName))), /*#__PURE__*/_react.default.createElement("p", {
191
+ className: classes.aboutParagraph
192
+ }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _extends({}, _sharedMessages.default.copyright, {
193
+ values: {
194
+ year: new Date().getFullYear()
195
+ }
196
+ })), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _sharedMessages.default.allRightsReserved)));
159
197
  };
160
- __signature__(About, "useViewState{[viewState, updateViewState]}\nuseSelector{version}\nuseSelector{locale}", function () {
161
- return [_useViewState3.default, _reactRedux.useSelector, _reactRedux.useSelector];
198
+ __signature__(About, "useStyles{classes}\nuseViewState{[viewState, updateViewState]}\nuseSelector{version}\nuseSelector{locale}", function () {
199
+ return [useStyles, _useViewState3.default, _reactRedux.useSelector, _reactRedux.useSelector];
162
200
  });
163
- __signature__(About, "useViewState{[viewState, updateViewState]}\nuseSelector{version}\nuseSelector{locale}", function () {
164
- return [_useViewState3.default, _reactRedux.useSelector, _reactRedux.useSelector];
201
+ __signature__(About, "useStyles{classes}\nuseViewState{[viewState, updateViewState]}\nuseSelector{version}\nuseSelector{locale}", function () {
202
+ return [useStyles, _useViewState3.default, _reactRedux.useSelector, _reactRedux.useSelector];
165
203
  });
166
204
  var WiredAbout = About;
167
205
  var _default = function _default(props) {
@@ -177,10 +215,8 @@ var _default3 = exports.default = _default2;
177
215
  }
178
216
  reactHotLoader.register(ABOUT_NAME, "ABOUT_NAME", "/home/vsts/work/1/s/src/components/AppFrame/About.js");
179
217
  reactHotLoader.register(getModalRoot, "getModalRoot", "/home/vsts/work/1/s/src/components/AppFrame/About.js");
218
+ reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/AppFrame/About.js");
180
219
  reactHotLoader.register(AboutBox, "AboutBox", "/home/vsts/work/1/s/src/components/AppFrame/About.js");
181
- reactHotLoader.register(CloseButton, "CloseButton", "/home/vsts/work/1/s/src/components/AppFrame/About.js");
182
- reactHotLoader.register(AboutParagraph, "AboutParagraph", "/home/vsts/work/1/s/src/components/AppFrame/About.js");
183
- reactHotLoader.register(AboutLink, "AboutLink", "/home/vsts/work/1/s/src/components/AppFrame/About.js");
184
220
  reactHotLoader.register(getClickOutsideHandler, "getClickOutsideHandler", "/home/vsts/work/1/s/src/components/AppFrame/About.js");
185
221
  reactHotLoader.register(About, "About", "/home/vsts/work/1/s/src/components/AppFrame/About.js");
186
222
  reactHotLoader.register(WiredAbout, "WiredAbout", "/home/vsts/work/1/s/src/components/AppFrame/About.js");
@@ -199,10 +235,8 @@ var _default3 = exports.default = _default2;
199
235
  }
200
236
  reactHotLoader.register(ABOUT_NAME, "ABOUT_NAME", "/home/vsts/work/1/s/src/components/AppFrame/About.js");
201
237
  reactHotLoader.register(getModalRoot, "getModalRoot", "/home/vsts/work/1/s/src/components/AppFrame/About.js");
238
+ reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/AppFrame/About.js");
202
239
  reactHotLoader.register(AboutBox, "AboutBox", "/home/vsts/work/1/s/src/components/AppFrame/About.js");
203
- reactHotLoader.register(CloseButton, "CloseButton", "/home/vsts/work/1/s/src/components/AppFrame/About.js");
204
- reactHotLoader.register(AboutParagraph, "AboutParagraph", "/home/vsts/work/1/s/src/components/AppFrame/About.js");
205
- reactHotLoader.register(AboutLink, "AboutLink", "/home/vsts/work/1/s/src/components/AppFrame/About.js");
206
240
  reactHotLoader.register(getClickOutsideHandler, "getClickOutsideHandler", "/home/vsts/work/1/s/src/components/AppFrame/About.js");
207
241
  reactHotLoader.register(About, "About", "/home/vsts/work/1/s/src/components/AppFrame/About.js");
208
242
  reactHotLoader.register(WiredAbout, "WiredAbout", "/home/vsts/work/1/s/src/components/AppFrame/About.js");
package/dist/components/AppFrame/Anchor.js CHANGED
@@ -1,11 +1,10 @@
1
1
  "use strict";
2
2
 
3
3
  exports.__esModule = true;
4
- exports.default = exports.Indicator = exports.Header = void 0;
4
+ exports.default = void 0;
5
5
  var _react = _interopRequireDefault(require("react"));
6
- var _styledComponents = _interopRequireDefault(require("styled-components"));
7
- var _utils = require("../../utils");
8
- var _Icon = _interopRequireDefault(require("../Icon"));
6
+ var _styles = require("@material-ui/core/styles");
7
+ var _Icon = _interopRequireDefault(require("../MaterialUI/DataDisplay/Icon"));
9
8
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
10
9
  (function () {
11
10
  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
@@ -21,27 +20,54 @@ var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoader
21
20
  var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
22
21
  return a;
23
22
  };
24
- var Header = exports.Header = _styledComponents.default.div.withConfig({
25
- displayName: "Anchor__Header",
26
- componentId: "sc-9jv4s9-0"
27
- })(["display:flex;cursor:pointer;box-sizing:border-box;font-family:", ";font-size:12px;text-transform:uppercase;height:40px;min-width:180px;padding-top:14px;padding-right:14px;color:", ";&:hover{color:", ";}"], (0, _utils.getThemeProp)(["fonts", "header"], "sans-serif"), (0, _utils.ifFlag)("open", (0, _utils.getThemeProp)(["colors", "application", "primary"], "#ccc"), "#ccc"), (0, _utils.getThemeProp)(["colors", "application", "primary"], "#ccc"));
28
- var Indicator = exports.Indicator = (0, _styledComponents.default)(_Icon.default).attrs(function (props) {
23
+ var useStyles = (0, _styles.makeStyles)(function (theme) {
29
24
  return {
30
- id: (0, _utils.ifFlag)("open", (0, _utils.getThemeProp)(["icons", "indicators", "up"], "chevron-up"), (0, _utils.getThemeProp)(["icons", "indicators", "down"], "chevron-down"))(props)
25
+ header: function header(props) {
26
+ return {
27
+ display: "flex",
28
+ cursor: "pointer",
29
+ boxSizing: "border-box",
30
+ fontFamily: theme.typography.button.fontFamily,
31
+ fontSize: "12px",
32
+ textTransform: "uppercase",
33
+ height: "40px",
34
+ minWidth: "180px",
35
+ paddingTop: "14px",
36
+ paddingRight: "14px",
37
+ color: props.open ? theme.palette.primary.light : theme.palette.text.disabled,
38
+ "&:hover": {
39
+ color: theme.palette.primary.light
40
+ }
41
+ };
42
+ },
43
+ indicator: function indicator(props) {
44
+ return {
45
+ fontSize: "12px",
46
+ padding: "0 11px",
47
+ color: props.open ? theme.palette.text.disabled : theme.palette.primary.light
48
+ };
49
+ }
31
50
  };
32
- }).withConfig({
33
- displayName: "Anchor__Indicator",
34
- componentId: "sc-9jv4s9-1"
35
- })(["font-size:12px;padding:0 11px;color:", ";"], (0, _utils.ifFlag)("open", "#ccc", (0, _utils.getThemeProp)(["colors", "application", "primary"], "#ccc")));
51
+ });
36
52
  var Anchor = function Anchor(_ref) {
37
53
  var menuLabel = _ref.menuLabel,
38
54
  open = _ref.open;
39
- return /*#__PURE__*/_react.default.createElement(Header, {
40
- open: open
41
- }, menuLabel, /*#__PURE__*/_react.default.createElement(Indicator, {
55
+ var classes = useStyles({
42
56
  open: open
57
+ });
58
+ return /*#__PURE__*/_react.default.createElement("div", {
59
+ className: classes.header
60
+ }, menuLabel, /*#__PURE__*/_react.default.createElement(_Icon.default, {
61
+ id: open ? "chevron-up" : "dropdown-chevron-down",
62
+ className: classes.indicator
43
63
  }));
44
64
  };
65
+ __signature__(Anchor, "useStyles{classes}", function () {
66
+ return [useStyles];
67
+ });
68
+ __signature__(Anchor, "useStyles{classes}", function () {
69
+ return [useStyles];
70
+ });
45
71
  var _default = Anchor;
46
72
  var _default2 = _default;
47
73
  var _default3 = exports.default = _default2;
@@ -51,8 +77,7 @@ var _default3 = exports.default = _default2;
51
77
  if (!reactHotLoader) {
52
78
  return;
53
79
  }
54
- reactHotLoader.register(Header, "Header", "/home/vsts/work/1/s/src/components/AppFrame/Anchor.js");
55
- reactHotLoader.register(Indicator, "Indicator", "/home/vsts/work/1/s/src/components/AppFrame/Anchor.js");
80
+ reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/AppFrame/Anchor.js");
56
81
  reactHotLoader.register(Anchor, "Anchor", "/home/vsts/work/1/s/src/components/AppFrame/Anchor.js");
57
82
  reactHotLoader.register(_default, "default", "/home/vsts/work/1/s/src/components/AppFrame/Anchor.js");
58
83
  })();
@@ -67,8 +92,7 @@ var _default3 = exports.default = _default2;
67
92
  if (!reactHotLoader) {
68
93
  return;
69
94
  }
70
- reactHotLoader.register(Header, "Header", "/home/vsts/work/1/s/src/components/AppFrame/Anchor.js");
71
- reactHotLoader.register(Indicator, "Indicator", "/home/vsts/work/1/s/src/components/AppFrame/Anchor.js");
95
+ reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/AppFrame/Anchor.js");
72
96
  reactHotLoader.register(Anchor, "Anchor", "/home/vsts/work/1/s/src/components/AppFrame/Anchor.js");
73
97
  reactHotLoader.register(_default2, "default", "/home/vsts/work/1/s/src/components/AppFrame/Anchor.js");
74
98
  })();
package/dist/components/AppFrame/AppFrame.js CHANGED
@@ -1,12 +1,12 @@
1
1
  "use strict";
2
2
 
3
3
  exports.__esModule = true;
4
- exports.default = exports.ViewPort = exports.Base = void 0;
4
+ exports.default = void 0;
5
5
  var _react = _interopRequireWildcard(require("react"));
6
6
  var _reactIntl = require("react-intl");
7
7
  var _propTypes = _interopRequireDefault(require("prop-types"));
8
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
9
8
  var _reactRedux = require("react-redux");
9
+ var _styles = require("@material-ui/core/styles");
10
10
  var _utils = require("../../utils");
11
11
  var _applications = require("../../actions/applications");
12
12
  var _useToggle3 = _interopRequireDefault(require("../../hooks/useToggle"));
@@ -51,14 +51,33 @@ var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoader
51
51
  var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
52
52
  return a;
53
53
  };
54
- var Base = exports.Base = _styledComponents.default.div.withConfig({
55
- displayName: "AppFrame__Base",
56
- componentId: "sc-1no0pw0-0"
57
- })(["background-color:", ";height:100%;overflow:hidden;", ";"], (0, _utils.getThemeProp)(["colors", "bgDark"], "#333333"), (0, _utils.ifFlag)("preferencesOpen", (0, _styledComponents.css)(["pointer-events:none;"])));
58
- var ViewPort = exports.ViewPort = _styledComponents.default.div.withConfig({
59
- displayName: "AppFrame__ViewPort",
60
- componentId: "sc-1no0pw0-1"
61
- })(["overflow:hidden;background-color:white;border-top-left-radius:10px;height:calc(100% - 40px);width:calc(100% - 50px);position:absolute;bottom:0;right:0;display:flex;flex-direction:column;transition:width 0.3s ease-out;", ";"], (0, _utils.ifFlag)("open", (0, _styledComponents.css)(["width:calc(100% - 200px);"])));
54
+ var useStyles = (0, _styles.makeStyles)(function (theme) {
55
+ return {
56
+ base: function base(props) {
57
+ return {
58
+ backgroundColor: theme.palette.grey.dark,
59
+ height: "100%",
60
+ overflow: "hidden",
61
+ pointerEvents: props.preferencesOpen ? "none" : undefined
62
+ };
63
+ },
64
+ viewPort: function viewPort(props) {
65
+ return {
66
+ overflow: "hidden",
67
+ backgroundColor: "white",
68
+ borderTopLeftRadius: "10px",
69
+ height: "calc(100% - 40px)",
70
+ position: "absolute",
71
+ bottom: 0,
72
+ right: 0,
73
+ display: "flex",
74
+ flexDirection: "column",
75
+ transition: "width 0.3s ease-out",
76
+ width: props.toggleOpen ? "calc(100% - 200px)" : "calc(100% - 50px)"
77
+ };
78
+ }
79
+ };
80
+ });
62
81
  var getApp = function getApp(apps, id) {
63
82
  return apps.filter(function (app) {
64
83
  return app.name === id;
@@ -75,6 +94,18 @@ var AppFrame = function AppFrame(_ref) {
75
94
  forceShowScope = _ref$forceShowScope === void 0 ? [] : _ref$forceShowScope;
76
95
  var _useIntl = (0, _reactIntl.useIntl)(),
77
96
  formatMessage = _useIntl.formatMessage;
97
+ var _useViewState = (0, _useViewState3.default)(_Preferences.PREFS_NAME),
98
+ _useViewState2 = _slicedToArray(_useViewState, 1),
99
+ prefViewState = _useViewState2[0];
100
+ var _useToggle = (0, _useToggle3.default)(initOpen),
101
+ _useToggle2 = _slicedToArray(_useToggle, 3),
102
+ open = _useToggle2[0],
103
+ toggle = _useToggle2[1],
104
+ reset = _useToggle2[2];
105
+ var classes = useStyles({
106
+ preferencesOpen: prefViewState.show,
107
+ toggleOpen: open
108
+ });
78
109
  var locale = (0, _reactRedux.useSelector)(_locale.currentLocale);
79
110
  var needLogin = (0, _reactRedux.useSelector)(_requests.logoutSelector);
80
111
  var applications = (0, _utils.unwrapImmutable)((0, _reactRedux.useSelector)(_applications2.localizedAppSelector));
@@ -85,11 +116,6 @@ var AppFrame = function AppFrame(_ref) {
85
116
  (0, _useLoader.default)((0, _applications.getApplications)(), function (state) {
86
117
  return (0, _applications2.localizedAppSelector)(state).size;
87
118
  });
88
- var _useToggle = (0, _useToggle3.default)(initOpen),
89
- _useToggle2 = _slicedToArray(_useToggle, 3),
90
- open = _useToggle2[0],
91
- toggle = _useToggle2[1],
92
- reset = _useToggle2[2];
93
119
  var currentApplication = getApp(applications, applicationId);
94
120
  (0, _useLoader.default)((0, _versionInfo.getVersionInfo)(locale), function () {
95
121
  return locale === null || helpUrl !== null;
@@ -121,11 +147,8 @@ var AppFrame = function AppFrame(_ref) {
121
147
  };
122
148
  });
123
149
  }, [modules]);
124
- var _useViewState = (0, _useViewState3.default)(_Preferences.PREFS_NAME),
125
- _useViewState2 = _slicedToArray(_useViewState, 1),
126
- prefViewState = _useViewState2[0];
127
- return /*#__PURE__*/_react.default.createElement(Base, {
128
- preferencesOpen: prefViewState.show
150
+ return /*#__PURE__*/_react.default.createElement("div", {
151
+ className: classes.base
129
152
  }, /*#__PURE__*/_react.default.createElement(_ConnectedToastList.default, null), /*#__PURE__*/_react.default.createElement(_ActionModal.default, {
130
153
  title: formatMessage(_sharedMessages.default.error),
131
154
  message: formatMessage(_sharedMessages.default.needToRefresh),
@@ -146,18 +169,19 @@ var AppFrame = function AppFrame(_ref) {
146
169
  toggle: toggle,
147
170
  modules: menuItemFromModules,
148
171
  activeModules: activeModules
149
- }), /*#__PURE__*/_react.default.createElement(ViewPort, {
150
- open: open,
151
- onClick: reset
172
+ }), /*#__PURE__*/_react.default.createElement("div", {
173
+ onClick: reset,
174
+ className: classes.viewPort,
175
+ "data-test-id": "viewport"
152
176
  }, noScope && !forceShowScope.includes(moduleName) ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Scope.Bar, null), children) : /*#__PURE__*/_react.default.createElement(_Scope.default, null, children)), /*#__PURE__*/_react.default.createElement(_About.default, {
153
177
  currentApplication: currentApplication
154
178
  }), /*#__PURE__*/_react.default.createElement(_loadingScreen.default, null), /*#__PURE__*/_react.default.createElement(_Preferences.default, null));
155
179
  };
156
- __signature__(AppFrame, "useIntl{{ formatMessage }}\nuseSelector{locale}\nuseSelector{needLogin}\nuseSelector{}\nuseSelector{moduleName}\nuseApplicationHelpUrl{[helpUrl]}\nuseLoader{}\nuseToggle{[open, toggle, reset]}\nuseLoader{}\nuseState{[doesApplicationNeedRefresh, setDoesApplicationNeedRefresh](false)}\nuseEffect{}\nuseEffect{}\nuseMemo{menuItemFromModules}\nuseViewState{[prefViewState]}", function () {
157
- return [_reactIntl.useIntl, _reactRedux.useSelector, _reactRedux.useSelector, _reactRedux.useSelector, _reactRedux.useSelector, _useApplicationHelpUrl.default, _useLoader.default, _useToggle3.default, _useLoader.default, _useViewState3.default];
180
+ __signature__(AppFrame, "useIntl{{ formatMessage }}\nuseViewState{[prefViewState]}\nuseToggle{[open, toggle, reset]}\nuseStyles{classes}\nuseSelector{locale}\nuseSelector{needLogin}\nuseSelector{}\nuseSelector{moduleName}\nuseApplicationHelpUrl{[helpUrl]}\nuseLoader{}\nuseLoader{}\nuseState{[doesApplicationNeedRefresh, setDoesApplicationNeedRefresh](false)}\nuseEffect{}\nuseEffect{}\nuseMemo{menuItemFromModules}", function () {
181
+ return [_reactIntl.useIntl, _useViewState3.default, _useToggle3.default, useStyles, _reactRedux.useSelector, _reactRedux.useSelector, _reactRedux.useSelector, _reactRedux.useSelector, _useApplicationHelpUrl.default, _useLoader.default, _useLoader.default];
158
182
  });
159
- __signature__(AppFrame, "useIntl{{ formatMessage }}\nuseSelector{locale}\nuseSelector{needLogin}\nuseSelector{}\nuseSelector{moduleName}\nuseApplicationHelpUrl{[helpUrl]}\nuseLoader{}\nuseToggle{[open, toggle, reset]}\nuseLoader{}\nuseState{[doesApplicationNeedRefresh, setDoesApplicationNeedRefresh](false)}\nuseEffect{}\nuseEffect{}\nuseMemo{menuItemFromModules}\nuseViewState{[prefViewState]}", function () {
160
- return [_reactIntl.useIntl, _reactRedux.useSelector, _reactRedux.useSelector, _reactRedux.useSelector, _reactRedux.useSelector, _useApplicationHelpUrl.default, _useLoader.default, _useToggle3.default, _useLoader.default, _useViewState3.default];
183
+ __signature__(AppFrame, "useIntl{{ formatMessage }}\nuseViewState{[prefViewState]}\nuseToggle{[open, toggle, reset]}\nuseStyles{classes}\nuseSelector{locale}\nuseSelector{needLogin}\nuseSelector{}\nuseSelector{moduleName}\nuseApplicationHelpUrl{[helpUrl]}\nuseLoader{}\nuseLoader{}\nuseState{[doesApplicationNeedRefresh, setDoesApplicationNeedRefresh](false)}\nuseEffect{}\nuseEffect{}\nuseMemo{menuItemFromModules}", function () {
184
+ return [_reactIntl.useIntl, _useViewState3.default, _useToggle3.default, useStyles, _reactRedux.useSelector, _reactRedux.useSelector, _reactRedux.useSelector, _reactRedux.useSelector, _useApplicationHelpUrl.default, _useLoader.default, _useLoader.default];
161
185
  });
162
186
  AppFrame.displayName = "AppFrame";
163
187
  AppFrame.propTypes = {
@@ -178,8 +202,7 @@ var _default3 = exports.default = _default2;
178
202
  if (!reactHotLoader) {
179
203
  return;
180
204
  }
181
- reactHotLoader.register(Base, "Base", "/home/vsts/work/1/s/src/components/AppFrame/AppFrame.js");
182
- reactHotLoader.register(ViewPort, "ViewPort", "/home/vsts/work/1/s/src/components/AppFrame/AppFrame.js");
205
+ reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/AppFrame/AppFrame.js");
183
206
  reactHotLoader.register(getApp, "getApp", "/home/vsts/work/1/s/src/components/AppFrame/AppFrame.js");
184
207
  reactHotLoader.register(AppFrame, "AppFrame", "/home/vsts/work/1/s/src/components/AppFrame/AppFrame.js");
185
208
  reactHotLoader.register(_default, "default", "/home/vsts/work/1/s/src/components/AppFrame/AppFrame.js");
@@ -195,8 +218,7 @@ var _default3 = exports.default = _default2;
195
218
  if (!reactHotLoader) {
196
219
  return;
197
220
  }
198
- reactHotLoader.register(Base, "Base", "/home/vsts/work/1/s/src/components/AppFrame/AppFrame.js");
199
- reactHotLoader.register(ViewPort, "ViewPort", "/home/vsts/work/1/s/src/components/AppFrame/AppFrame.js");
221
+ reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/AppFrame/AppFrame.js");
200
222
  reactHotLoader.register(getApp, "getApp", "/home/vsts/work/1/s/src/components/AppFrame/AppFrame.js");
201
223
  reactHotLoader.register(AppFrame, "AppFrame", "/home/vsts/work/1/s/src/components/AppFrame/AppFrame.js");
202
224
  reactHotLoader.register(_default2, "default", "/home/vsts/work/1/s/src/components/AppFrame/AppFrame.js");