orc-shared 5.8.0-dev.20 → 5.8.0-dev.22

package/dist/components/MaterialUI/DataDisplay/PredefinedElements/StepperModal.js

@@ -111,7 +111,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
   };
 });
 var StepperModal = function StepperModal(_ref) {
-  var _steps$currentStep, _steps$currentStep$fu, _steps$currentStep2, _steps$currentStep3;
+  var _steps$currentStep, _steps$currentStep$fu, _steps$currentStep2, _steps$currentStep3, _steps$currentStep4;
   var _ref$steps = _ref.steps,
     steps = _ref$steps === void 0 ? [] : _ref$steps,
     _ref$title = _ref.title,
@@ -153,8 +153,11 @@ var StepperModal = function StepperModal(_ref) {
   modalProps.set(_modalProps.default.propNames.open, open);
   modalProps.set(_modalProps.default.propNames.backdropClickCallback, backdropCallback != null ? backdropCallback : closeCallback);
   modalProps.set(_modalProps.default.propNames.type, type);
-  var nextClick = (0, _react.useCallback)(function () {
-    return changeCurrentStep(function (step) {
+  var nextClick = (0, _react.useCallback)(function (customHandler) {
+    if (customHandler) {
+      customHandler();
+    }
+    changeCurrentStep(function (step) {
       return step + 1;
     });
   }, []);
@@ -177,13 +180,24 @@ var StepperModal = function StepperModal(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     variant: "outlined",
     onClick: closeCallback
-  }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _sharedMessages.default.cancel)), currentStep < steps.length - 1 && /*#__PURE__*/_react.default.createElement(_Button.default, {
+  }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _sharedMessages.default.cancel)), currentStep < steps.length - 1 && (((_steps$currentStep4 = steps[currentStep]) == null || (_steps$currentStep4 = _steps$currentStep4.actions) == null ? void 0 : _steps$currentStep4.length) > 0 ? steps[currentStep].actions.map(function (action) {
+    return /*#__PURE__*/_react.default.createElement(_Button.default, {
+      key: action.value,
+      variant: "contained",
+      color: "primary",
+      disabled: nextDisabled,
+      onClick: function onClick() {
+        return nextClick(action.handler);
+      },
+      disableElevation: true
+    }, action.label);
+  }) : /*#__PURE__*/_react.default.createElement(_Button.default, {
     variant: "contained",
     color: "primary",
     disabled: nextDisabled,
     onClick: nextClick,
     disableElevation: true
-  }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _sharedMessages.default.next)), currentStep === steps.length - 1 && /*#__PURE__*/_react.default.createElement(_Button.default, {
+  }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _sharedMessages.default.next))), currentStep === steps.length - 1 && /*#__PURE__*/_react.default.createElement(_Button.default, {
     variant: "contained",
     color: "primary",
     disabled: nextDisabled,

package/dist/components/MaterialUI/DataDisplay/SelectionList.js

@@ -6,8 +6,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _styles = require("@material-ui/core/styles");
 var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
 var _TransferList = require("./TransferList");
-var _Divider = _interopRequireDefault(require("./Divider"));
-var _dividerProps = _interopRequireDefault(require("./dividerProps"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
 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; }
@@ -43,6 +41,12 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
         return props.height && theme.spacing(props.height);
       }
     },
+    listHeightWithBorder: {
+      height: function height(props) {
+        return props.height && theme.spacing(props.height);
+      },
+      borderRight: "1px solid ".concat(theme.palette.grey.borders)
+    },
     paper: {
       flexGrow: 1,
       height: "1px",
@@ -61,9 +65,6 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
         borderRadius: theme.spacing(1.5)
       }
     },
-    divider: {
-      margin: "auto"
-    },
     paperLeft: {
       border: "1px solid ".concat(theme.palette.grey.borders)
     },
@@ -73,7 +74,8 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     listContainer: {
       display: "flex",
       flexDirection: "column",
-      height: "100%"
+      height: "100%",
+      boxSizing: "border-box"
     }
   };
 });
@@ -136,13 +138,8 @@ var SelectionList = function SelectionList(_ref) {
     onChange && onChange(formatOnChange(listData.data, ids));
   };
   var showDivider = infoPanel && divider;
-  var dividerProps = new _dividerProps.default();
-  dividerProps.set(_dividerProps.default.propNames.orientation, "vertical");
-  dividerProps.set(_dividerProps.default.propNames.light, true);
-  dividerProps.setStyle(_dividerProps.default.ruleNames.vertical, classes.divider);
   infoPanelXs = (_infoPanelXs = infoPanelXs) != null ? _infoPanelXs : defaultInfoPanelXs;
   infoPanel = (_infoPanel = infoPanel) != null ? _infoPanel : defaultPanel;
-  var dividerDiff = showDivider ? 1 : 0;
   var listComponent = /*#__PURE__*/_react.default.createElement("div", {
     className: classes.listContainer
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -163,19 +160,14 @@ var SelectionList = function SelectionList(_ref) {
   }), actionPanel ? /*#__PURE__*/_react.default.createElement("div", {
     className: classes.actionPanel
   }, actionPanel) : null);
-  var dividerComponent = showDivider && /*#__PURE__*/_react.default.createElement(_Grid.default, {
-    item: true
-  }, /*#__PURE__*/_react.default.createElement(_Divider.default, {
-    dividerProps: dividerProps
-  }));
   return /*#__PURE__*/_react.default.createElement(_Grid.default, {
     container: true,
     spacing: 2
   }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
     item: true,
-    xs: 12 - infoPanelXs - dividerDiff,
-    className: classes.listHeight
-  }, listComponent), dividerComponent, /*#__PURE__*/_react.default.createElement(_Grid.default, {
+    xs: 12 - infoPanelXs,
+    className: showDivider ? classes.listHeightWithBorder : classes.listHeight
+  }, listComponent), /*#__PURE__*/_react.default.createElement(_Grid.default, {
     item: true,
     xs: infoPanelXs
   }, infoPanel));

package/dist/components/MaterialUI/Inputs/Radio.js

@@ -154,6 +154,7 @@ var Radio = function Radio(_ref) {
     value: value,
     onChange: handleChange
   }, radios.map(function (radio) {
+    var _radio$disabled;
     var handleClick = radio.clickEvent ? function (event) {
       return radio.clickEvent(event.target.value);
     } : null;
@@ -161,7 +162,7 @@ var Radio = function Radio(_ref) {
       key: "radiobutton_".concat(radio.value),
       value: radio.value,
       label: radio.label,
-      disabled: disabled,
+      disabled: disabled ? true : (_radio$disabled = radio.disabled) != null ? _radio$disabled : false,
       control: /*#__PURE__*/_react.default.createElement(_Radio.default, {
         color: "primary",
         checkedIcon: /*#__PURE__*/_react.default.createElement("span", {

package/package.json

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

package/src/components/MaterialUI/DataDisplay/PredefinedElements/StepperModal.js

@@ -142,7 +142,12 @@ const StepperModal = ({
 	modalProps.set(ModalProps.propNames.backdropClickCallback, backdropCallback ?? closeCallback);
 	modalProps.set(ModalProps.propNames.type, type);
 
-	const nextClick = useCallback(() => changeCurrentStep(step => step + 1), []);
+	const nextClick = useCallback(customHandler => {
+		if (customHandler) {
+			customHandler();
+		}
+		changeCurrentStep(step => step + 1);
+	}, []);
 	const backClick = useCallback(() => changeCurrentStep(step => step - 1), []);
 
 	const actionPanel = (
@@ -159,11 +164,27 @@ const StepperModal = ({
 					<Button variant="outlined" onClick={closeCallback}>
 						<FormattedMessage {...sharedMessages.cancel} />
 					</Button>
-					{currentStep < steps.length - 1 && (
-						<Button variant="contained" color="primary" disabled={nextDisabled} onClick={nextClick} disableElevation>
-							<FormattedMessage {...sharedMessages.next} />
-						</Button>
-					)}
+
+					{currentStep < steps.length - 1 &&
+						(steps[currentStep]?.actions?.length > 0 ? (
+							steps[currentStep].actions.map(action => (
+								<Button
+									key={action.value}
+									variant="contained"
+									color="primary"
+									disabled={nextDisabled}
+									onClick={() => nextClick(action.handler)}
+									disableElevation
+								>
+									{action.label}
+								</Button>
+							))
+						) : (
+							<Button variant="contained" color="primary" disabled={nextDisabled} onClick={nextClick} disableElevation>
+								<FormattedMessage {...sharedMessages.next} />
+							</Button>
+						))}
+
 					{currentStep === steps.length - 1 && (
 						<Button
 							variant="contained"

package/src/components/MaterialUI/DataDisplay/PredefinedElements/StepperModal.test.js

@@ -133,6 +133,208 @@ describe("StepperModal", () => {
 		expect(component, "when mounted", "to satisfy", expected);
 	});
 
+	it("Renders StepperModal correctly with custom actions", () => {
+		const open = true;
+		const title = "title";
+		const backdropClickCallback = jest.fn();
+		const okCallback = jest.fn();
+		const cancelCallback = jest.fn();
+		const modalProps = new ModalProps();
+		const actions = [
+			{
+				value: "first value",
+				label: "first action",
+				Handler: () => {},
+			},
+			{
+				value: "second value",
+				label: "second action",
+				Handler: () => {},
+			},
+		];
+		const steps = [{ title: "step1", content: <div>content</div>, actions }, { title: "step2" }];
+
+		const titleComponent = (
+			<div>
+				<div>{title}</div>
+				<div>step1</div>
+				<div>step2</div>
+			</div>
+		);
+		const messageComponent = <div>{steps[0].content}</div>;
+
+		modalProps.set(ModalProps.propNames.title, titleComponent);
+		modalProps.set(ModalProps.propNames.open, open);
+		modalProps.set(ModalProps.propNames.backdropClickCallback, backdropClickCallback);
+		modalProps.set(ModalProps.propNames.type, "wide");
+
+		const actionPanel = (
+			<div>
+				<div></div>
+				<div>
+					<Button variant="outlined" disabled={false} onClick={() => cancelCallback()}>
+						{sharedMessages.cancel.defaultMessage}
+					</Button>
+					<Button variant="contained" color="primary" disabled={false} onClick={() => {}} disableElevation>
+						first action
+					</Button>
+					<Button variant="contained" color="primary" disabled={false} onClick={() => {}} disableElevation>
+						second action
+					</Button>
+				</div>
+			</div>
+		);
+
+		modalProps.set(ModalProps.propNames.actionPanel, actionPanel);
+
+		const component = (
+			<IntlProvider locale="en-US" messages={messages}>
+				<StepperModal
+					steps={steps}
+					title={title}
+					open={open}
+					confirmCallback={okCallback}
+					closeCallback={cancelCallback}
+				/>
+			</IntlProvider>
+		);
+
+		const expected = (
+			<IntlProvider locale="en-US" messages={messages}>
+				<Modal message={messageComponent} modalProps={modalProps} />
+			</IntlProvider>
+		);
+
+		expect(component, "when mounted", "to satisfy", expected);
+	});
+
+	it("Renders StepperModal correctly with disabled custom actions", () => {
+		const open = true;
+		const title = "title";
+		const backdropClickCallback = jest.fn();
+		const okCallback = jest.fn();
+		const cancelCallback = jest.fn();
+		const modalProps = new ModalProps();
+		const actions = [
+			{
+				value: "first value",
+				label: "first action",
+				Handler: () => {},
+			},
+			{
+				value: "second value",
+				label: "second action",
+				Handler: () => {},
+			},
+		];
+		const steps = [
+			{ title: "step1", nextDisabled: () => true, content: <div>content</div>, actions },
+			{ title: "step2" },
+		];
+
+		const titleComponent = (
+			<div>
+				<div>{title}</div>
+				<div>step1</div>
+				<div>step2</div>
+			</div>
+		);
+		const messageComponent = <div>{steps[0].content}</div>;
+
+		modalProps.set(ModalProps.propNames.title, titleComponent);
+		modalProps.set(ModalProps.propNames.open, open);
+		modalProps.set(ModalProps.propNames.backdropClickCallback, backdropClickCallback);
+		modalProps.set(ModalProps.propNames.type, "wide");
+
+		const actionPanel = (
+			<div>
+				<div></div>
+				<div>
+					<Button variant="outlined" disabled={false} onClick={() => cancelCallback()}>
+						{sharedMessages.cancel.defaultMessage}
+					</Button>
+					<Button variant="contained" color="primary" disabled={true} onClick={() => {}} disableElevation>
+						first action
+					</Button>
+					<Button variant="contained" color="primary" disabled={true} onClick={() => {}} disableElevation>
+						second action
+					</Button>
+				</div>
+			</div>
+		);
+
+		modalProps.set(ModalProps.propNames.actionPanel, actionPanel);
+
+		const component = (
+			<IntlProvider locale="en-US" messages={messages}>
+				<StepperModal
+					steps={steps}
+					title={title}
+					open={open}
+					confirmCallback={okCallback}
+					closeCallback={cancelCallback}
+				/>
+			</IntlProvider>
+		);
+
+		const expected = (
+			<IntlProvider locale="en-US" messages={messages}>
+				<Modal message={messageComponent} modalProps={modalProps} />
+			</IntlProvider>
+		);
+
+		expect(component, "when mounted", "to satisfy", expected);
+	});
+
+	it("Renders StepperModal correctly when custom action is clicked", () => {
+		const open = true;
+		const actions = [
+			{
+				value: "first value",
+				label: "first action",
+				handler: jest.fn(),
+			},
+			{
+				value: "second value",
+				label: "second action",
+				handler: jest.fn(),
+			},
+		];
+
+		const okCallback = sinon.spy();
+		const cancelCallback = sinon.spy();
+		const steps = [
+			{ title: "step1", content: "content", actions },
+			{ title: "step2", content: "content2" },
+		];
+
+		const component = (
+			<IntlProvider locale="en-US" messages={messages}>
+				<StepperModal open={open} steps={steps} closeCallback={cancelCallback} confirmCallback={okCallback} />
+			</IntlProvider>
+		);
+
+		const mountedComponent = mount(component);
+
+		const firstAction = mountedComponent.find(Button).at(1);
+		firstAction.invoke("onClick")();
+
+		expect(mountedComponent.containsMatchingElement(steps[1].content), "to be truthy");
+
+		const back = mountedComponent.find(Button).at(0);
+		back.invoke("onClick")();
+
+		expect(mountedComponent.containsMatchingElement(steps[0].content), "to be truthy");
+
+		const secondAction = mountedComponent.find(Button).at(2);
+		secondAction.invoke("onClick")();
+
+		const okButton = mountedComponent.find(Button).at(2);
+		okButton.invoke("onClick")();
+
+		expect(okCallback, "was called");
+	});
+
 	it("Render closed modal", () => {
 		const open = false;
 

package/src/components/MaterialUI/DataDisplay/SelectionList.js

@@ -2,8 +2,6 @@ import React, { useState, useEffect } from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import Grid from "@material-ui/core/Grid";
 import { ScrollableCustomList } from "./TransferList";
-import Divider from "./Divider";
-import DividerProps from "./dividerProps";
 
 const useStyles = makeStyles(theme => ({
 	title: {
@@ -14,6 +12,10 @@ const useStyles = makeStyles(theme => ({
 	listHeight: {
 		height: props => props.height && theme.spacing(props.height),
 	},
+	listHeightWithBorder: {
+		height: props => props.height && theme.spacing(props.height),
+		borderRight: `1px solid ${theme.palette.grey.borders}`,
+	},
 	paper: {
 		flexGrow: 1,
 		height: "1px", // forces the container to takes 100%
@@ -32,9 +34,6 @@ const useStyles = makeStyles(theme => ({
 			borderRadius: theme.spacing(1.5),
 		},
 	},
-	divider: {
-		margin: "auto",
-	},
 	paperLeft: {
 		border: `1px solid ${theme.palette.grey.borders}`,
 	},
@@ -45,6 +44,7 @@ const useStyles = makeStyles(theme => ({
 		display: "flex",
 		flexDirection: "column",
 		height: "100%",
+		boxSizing: "border-box",
 	},
 }));
 
@@ -98,16 +98,10 @@ const SelectionList = ({
 	};
 
 	const showDivider = infoPanel && divider;
-	const dividerProps = new DividerProps();
-	dividerProps.set(DividerProps.propNames.orientation, "vertical");
-	dividerProps.set(DividerProps.propNames.light, true);
-	dividerProps.setStyle(DividerProps.ruleNames.vertical, classes.divider);
 
 	infoPanelXs = infoPanelXs ?? defaultInfoPanelXs;
 	infoPanel = infoPanel ?? defaultPanel;
 
-	const dividerDiff = showDivider ? 1 : 0;
-
 	const listComponent = (
 		<div className={classes.listContainer}>
 			<div className={classes.title}>{listData.title}</div>
@@ -129,23 +123,15 @@ const SelectionList = ({
 		</div>
 	);
 
-	const dividerComponent = showDivider && (
-		<Grid item>
-			<Divider dividerProps={dividerProps} />
-		</Grid>
-	);
-
 	return (
 		<Grid container spacing={2}>
-			<Grid item xs={12 - infoPanelXs - dividerDiff} className={classes.listHeight}>
+			<Grid item xs={12 - infoPanelXs} className={showDivider ? classes.listHeightWithBorder : classes.listHeight}>
 				{listComponent}
 			</Grid>
-			{dividerComponent}
 			<Grid item xs={infoPanelXs}>
 				{infoPanel}
 			</Grid>
 		</Grid>
 	);
 };
-
 export default SelectionList;

package/src/components/MaterialUI/DataDisplay/SelectionList.test.js

@@ -95,9 +95,6 @@ describe("SelectionList", () => {
 						<ScrollableCustomList checked={[]} items={list} classes={{}} />
 					</div>
 				</Grid>
-				<Grid>
-					<hr />
-				</Grid>
 				<Grid>
 					<div>Test</div>
 				</Grid>
@@ -129,9 +126,6 @@ describe("SelectionList", () => {
 						<div>{actionPanel}</div>
 					</div>
 				</Grid>
-				<Grid>
-					<hr />
-				</Grid>
 				<Grid>{infoPanel}</Grid>
 			</Grid>
 		);

package/src/components/MaterialUI/Inputs/Radio.js

@@ -119,7 +119,7 @@ const Radio = ({ radioProps }) => {
 							key={`radiobutton_${radio.value}`}
 							value={radio.value}
 							label={radio.label}
-							disabled={disabled}
+							disabled={disabled ? true : radio.disabled ?? false}
 							control={
 								<RadioMui
 									color="primary"

package/src/components/MaterialUI/Inputs/Radio.test.js

@@ -49,6 +49,7 @@ const ExpectComponentToBeRenderedProperly = radioProps => {
 	expect(radioElements.length, "to equal", radios.length);
 
 	radios.forEach(radio => {
+		const disabledOption = disabled ? true : radio.disabled ?? false;
 		let option =
 			radioElements.find(
 				x =>
@@ -57,7 +58,7 @@ const ExpectComponentToBeRenderedProperly = radioProps => {
 					x.props.control.type.options.name === "MuiRadio" &&
 					x.props.value === radio.value &&
 					x.props.label === radio.label &&
-					x.props.disabled === disabled,
+					x.props.disabled === disabledOption,
 			) || null;
 		expect(option, "not to be", null);
 	});
@@ -226,4 +227,37 @@ describe("Radio Component", () => {
 
 		ExpectEventToBeFiredWithOptionValue(radioProps, clickEvent, "option2");
 	});
+
+	it("Renders Radio component properly with options all disbaled", () => {
+		radios.forEach(radio => {
+			radio.disabled = true;
+		});
+
+		radioProps.set(RadioProps.propNames.label, "aRadioLabel");
+		radioProps.set(RadioProps.propNames.defaultVal, "option1");
+		radioProps.set(RadioProps.propNames.value, "option1");
+		radioProps.set(RadioProps.propNames.radios, radios);
+		radioProps.set(RadioProps.propNames.row, true);
+		radioProps.set(RadioProps.propNames.disabled, false);
+		radioProps.set(RadioProps.propNames.error, null);
+		radioProps.set(RadioProps.propNames.allowSingleRadio, true);
+
+		ExpectComponentToBeRenderedProperly(radioProps);
+	});
+
+	it("Renders Radio component properly with half options disbaled", () => {
+		radios[0].disabled = true;
+		radios[1].disabled = true;
+
+		radioProps.set(RadioProps.propNames.label, "aRadioLabel");
+		radioProps.set(RadioProps.propNames.defaultVal, "option1");
+		radioProps.set(RadioProps.propNames.value, "option1");
+		radioProps.set(RadioProps.propNames.radios, radios);
+		radioProps.set(RadioProps.propNames.row, true);
+		radioProps.set(RadioProps.propNames.disabled, false);
+		radioProps.set(RadioProps.propNames.error, null);
+		radioProps.set(RadioProps.propNames.allowSingleRadio, true);
+
+		ExpectComponentToBeRenderedProperly(radioProps);
+	});
 });