orc-shared 1.3.0-dev.6 → 1.3.0-dev.7

package/dist/components/Routing/SubPage.js

@@ -71,7 +71,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
 });
 
 var SubPage = function SubPage(_ref) {
-  var _props$title, _props$title2, _props$title3;
+  var _props$title, _props$title2, _props$title3, _props$componentProps, _props$componentProps2;
 
   var config = _ref.config,
       match = _ref.match,
@@ -127,6 +127,29 @@ var SubPage = function SubPage(_ref) {
     onClick: closeSubPage
   }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _sharedMessages.default.close)));
 
+  if (((_props$componentProps = props.componentProps) == null ? void 0 : (_props$componentProps2 = _props$componentProps.actionPanel()) == null ? void 0 : _props$componentProps2.length) > 0) {
+    var _props$componentProps3;
+
+    actionPanel = /*#__PURE__*/_react.default.createElement("div", {
+      className: classes.actionPanel
+    }, (_props$componentProps3 = props.componentProps) == null ? void 0 : _props$componentProps3.actionPanel().map(function (action) {
+      var _action$label;
+
+      return /*#__PURE__*/_react.default.createElement(_Button.default, {
+        key: (_action$label = action.label) == null ? void 0 : _action$label.id,
+        variant: action.isPrimary ? "contained" : "outlined",
+        color: action.isPrimary ? "primary" : "default",
+        disableElevation: action.isPrimary,
+        onMouseDown: function onMouseDown(e) {
+          setTimeout(function () {
+            action.handler && action.handler(e);
+            closeSubPage();
+          }, action.timeoutDelay || 200);
+        }
+      }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, action.label));
+    }));
+  }
+
   modalProps.set(_modalProps.default.propNames.actionPanel, actionPanel);
   return /*#__PURE__*/_react.default.createElement(_Modal.default, {
     message: message,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "orc-shared",
-	"version": "1.3.0-dev.6",
+	"version": "1.3.0-dev.7",
 	"description": "Shared code for Orckestra applications",
 	"main": "./src/index.js",
 	"exports": {

package/src/components/Routing/SubPage.js

@@ -61,7 +61,7 @@ export const SubPage = ({ config, match, location, history, root, modulePrependP
 	modalProps.set(ModalProps.propNames.type, "fullwidth");
 	modalProps.set(ModalProps.propNames.backdropClickCallback, closeSubPage);
 
-	const actionPanel = (
+	let actionPanel = (
 		<div className={classes.actionPanel}>
 			<Button variant="contained" color="primary" disableElevation onClick={closeSubPage}>
 				<FormattedMessage {...sharedMessages.close} />
@@ -69,6 +69,29 @@ export const SubPage = ({ config, match, location, history, root, modulePrependP
 		</div>
 	);
 
+	if (props.componentProps?.actionPanel()?.length > 0) {
+		actionPanel = (
+			<div className={classes.actionPanel}>
+				{props.componentProps?.actionPanel().map(action => (
+					<Button
+						key={action.label?.id}
+						variant={action.isPrimary ? "contained" : "outlined"}
+						color={action.isPrimary ? "primary" : "default"}
+						disableElevation={action.isPrimary}
+						onMouseDown={e => {
+							setTimeout(() => {
+								action.handler && action.handler(e);
+								closeSubPage();
+							}, action.timeoutDelay || 200);
+						}}
+					>
+						<FormattedMessage {...action.label} />
+					</Button>
+				))}
+			</div>
+		);
+	}
+
 	modalProps.set(ModalProps.propNames.actionPanel, actionPanel);
 
 	return <Modal message={message} modalProps={modalProps} />;

package/src/components/Routing/SubPage.test.js

@@ -11,7 +11,7 @@ import Modal from "../MaterialUI/DataDisplay/Modal";
 import ModalProps from "../MaterialUI/DataDisplay/modalProps";
 import Button from "@material-ui/core/Button";
 import translations from "~/translations/en-US.json";
-
+import { act } from "unexpected-reaction";
 import { TestWrapper, createMuiTheme } from "../../utils/testUtils";
 import sharedMessages from "../../sharedMessages";
 
@@ -181,4 +181,99 @@ describe("SubPage", () => {
 		expect(history.push, "to have calls satisfying", [{ args: ["/foo"] }]);
 		expect(dispatch, "to have calls satisfying", [{ args: [mapHref("/foo", "/foo")] }]);
 	});
+
+	it("renders action panel passed from props", () => {
+		const clock = sinon.useFakeTimers();
+
+		const actions = () => [{ label: sharedMessages.cancel }, { label: sharedMessages.applyChanges }];
+
+		const component = (
+			<TestWrapper provider={{ store }} intlProvider={intlProvider} stylesProvider muiThemeProvider={{ theme }}>
+				<div>
+					<div id="outer" />
+					<Router history={history}>
+						<Route
+							path="/foo/bar"
+							render={route => (
+								<SubPage
+									config={{
+										component: InnerView,
+										set: true,
+										title: "Item Details",
+										componentProps: { actionPanel: actions },
+									}}
+									root="/foo"
+									path="/foo/bar"
+									{...route}
+								/>
+							)}
+						/>
+					</Router>
+				</div>
+			</TestWrapper>
+		);
+		const mountedComponent = mount(component);
+
+		const closeButton = mountedComponent.find("button").at(0);
+		const applyButton = mountedComponent.find("button").at(1);
+
+		closeButton.invoke("onMouseDown")();
+
+		act(() => {
+			clock.tick(500); // Wait for the setTimeout inside the onMouseDown event to execute
+		});
+
+		expect(applyButton, "not to be", null);
+		expect(history.push, "to have calls satisfying", [{ args: ["/foo"] }]);
+		expect(dispatch, "to have calls satisfying", [{ args: [mapHref("/foo", "/foo")] }]);
+	});
+
+	it("Executes handler from button received from props", () => {
+		const someEvent = sinon.spy().named("someEvent");
+		const clock = sinon.useFakeTimers();
+
+		const actions = () => [
+			{ label: sharedMessages.applyChanges, isPrimary: true, handler: someEvent, timeoutDelay: 500 },
+		];
+
+		const component = (
+			<TestWrapper provider={{ store }} intlProvider={intlProvider} stylesProvider muiThemeProvider={{ theme }}>
+				<div>
+					<div id="outer" />
+					<Router history={history}>
+						<Route
+							path="/foo/bar"
+							render={route => (
+								<SubPage
+									config={{
+										component: InnerView,
+										set: true,
+										title: "Item Details",
+										componentProps: { actionPanel: actions },
+									}}
+									root="/foo"
+									path="/foo/bar"
+									{...route}
+								/>
+							)}
+						/>
+					</Router>
+				</div>
+			</TestWrapper>
+		);
+		const mountedComponent = mount(component);
+
+		const applyButton = mountedComponent.find("button").at(0);
+
+		applyButton.invoke("onMouseDown")();
+
+		act(() => {
+			clock.tick(500); // Wait for the setTimeout inside the onMouseDown event to execute
+		});
+
+		const applyButtonClassName = applyButton.props().className;
+		expect(applyButtonClassName, "to contain", "MuiButton-contained");
+		expect(applyButtonClassName, "to contain", "MuiButton-containedPrimary");
+		expect(someEvent, "was called");
+	});
 });