orc-shared 5.9.0-dev.13 → 5.9.0-dev.15

package/dist/components/MaterialUI/MenuButtons.js

@@ -0,0 +1,182 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styles = require("@material-ui/core/styles");
+var _Menu = _interopRequireDefault(require("@material-ui/core/Menu"));
+var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
+var _Divider = _interopRequireDefault(require("./DataDisplay/Divider"));
+var _dividerProps = _interopRequireDefault(require("./DataDisplay/dividerProps"));
+var _Icon = _interopRequireDefault(require("./DataDisplay/Icon"));
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+(function () {
+  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
+  enterModule && enterModule(module);
+})();
+(function () {
+  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
+  enterModule && enterModule(module);
+})();
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+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."); }
+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; } }
+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; }
+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; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+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); }
+var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
+  return a;
+};
+var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
+  return a;
+};
+var useMenuStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    menuItem: {
+      fontFamily: theme.typography.fontFamily,
+      textTransform: "none",
+      color: theme.palette.text.primary,
+      borderRadius: 0,
+      "&:hover": {
+        borderRadius: 0,
+        boxShadow: "none",
+        backgroundColor: theme.palette.primary.light
+      },
+      "&:focus, &:active, &.Mui-focusVisible": {
+        borderRadius: 0,
+        boxShadow: "none",
+        outline: "none"
+      }
+    },
+    menu: {
+      border: "".concat(theme.spacing(0.1), " solid ").concat(theme.palette.primary.main)
+    },
+    arrowIcon: {
+      width: theme.spacing(1),
+      height: theme.spacing(1)
+    }
+  };
+});
+var StyledMenu = function StyledMenu(props) {
+  var classes = useMenuStyles();
+  return /*#__PURE__*/_react.default.createElement(_Menu.default, _extends({
+    elevation: 0,
+    getContentAnchorEl: null,
+    anchorOrigin: {
+      vertical: "bottom",
+      horizontal: "left"
+    },
+    transformOrigin: {
+      vertical: "top",
+      horizontal: "left"
+    },
+    classes: {
+      paper: classes.menu
+    }
+  }, props));
+};
+__signature__(StyledMenu, "useMenuStyles{classes}", function () {
+  return [useMenuStyles];
+});
+__signature__(StyledMenu, "useMenuStyles{classes}", function () {
+  return [useMenuStyles];
+});
+var MenuButton = function MenuButton(_ref) {
+  var _options$every;
+  var options = _ref.options,
+    label = _ref.label;
+  var _React$useState = _react.default.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    anchorEl = _React$useState2[0],
+    setAnchorEl = _React$useState2[1];
+  var classes = useMenuStyles();
+  var handleClick = function handleClick(event) {
+    setAnchorEl(event.currentTarget);
+  };
+  var handleClose = function handleClose() {
+    setAnchorEl(null);
+  };
+  var dividerProps = new _dividerProps.default();
+  dividerProps.set(_dividerProps.default.propNames.light, true);
+  dividerProps.set(_dividerProps.default.propNames.variant, "middle");
+  var allDisabled = (_options$every = options == null ? void 0 : options.every(function (o) {
+    return o.disabled;
+  })) != null ? _options$every : true;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    "aria-haspopup": "true",
+    variant: "outlined",
+    color: "primary",
+    disabled: allDisabled,
+    onClick: handleClick,
+    endIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      id: "chevron-down",
+      className: classes.arrowIcon
+    })
+  }, label), /*#__PURE__*/_react.default.createElement(StyledMenu, {
+    anchorEl: anchorEl,
+    open: Boolean(anchorEl),
+    onClose: handleClose
+  }, options == null ? void 0 : options.map(function (_ref2, index) {
+    var key = _ref2.key,
+      component = _ref2.component,
+      disabled = _ref2.disabled,
+      action = _ref2.action;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: key
+    }, /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+      onClick: function onClick() {
+        handleClose();
+        action == null || action();
+      },
+      disabled: disabled,
+      classes: {
+        root: classes.menuItem
+      }
+    }, component), index < options.length - 1 && /*#__PURE__*/_react.default.createElement(_Divider.default, {
+      dividerProps: dividerProps
+    }));
+  })));
+};
+__signature__(MenuButton, "useState{[anchorEl, setAnchorEl](null)}\nuseMenuStyles{classes}", function () {
+  return [useMenuStyles];
+});
+__signature__(MenuButton, "useState{[anchorEl, setAnchorEl](null)}\nuseMenuStyles{classes}", function () {
+  return [useMenuStyles];
+});
+var _default = MenuButton;
+var _default2 = _default;
+var _default3 = exports.default = _default2;
+;
+(function () {
+  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
+  if (!reactHotLoader) {
+    return;
+  }
+  reactHotLoader.register(useMenuStyles, "useMenuStyles", "/home/vsts/work/1/s/src/components/MaterialUI/MenuButtons.js");
+  reactHotLoader.register(StyledMenu, "StyledMenu", "/home/vsts/work/1/s/src/components/MaterialUI/MenuButtons.js");
+  reactHotLoader.register(MenuButton, "MenuButton", "/home/vsts/work/1/s/src/components/MaterialUI/MenuButtons.js");
+  reactHotLoader.register(_default, "default", "/home/vsts/work/1/s/src/components/MaterialUI/MenuButtons.js");
+})();
+;
+(function () {
+  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
+  leaveModule && leaveModule(module);
+})();
+;
+(function () {
+  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
+  if (!reactHotLoader) {
+    return;
+  }
+  reactHotLoader.register(useMenuStyles, "useMenuStyles", "/home/vsts/work/1/s/src/components/MaterialUI/MenuButtons.js");
+  reactHotLoader.register(StyledMenu, "StyledMenu", "/home/vsts/work/1/s/src/components/MaterialUI/MenuButtons.js");
+  reactHotLoader.register(MenuButton, "MenuButton", "/home/vsts/work/1/s/src/components/MaterialUI/MenuButtons.js");
+  reactHotLoader.register(_default2, "default", "/home/vsts/work/1/s/src/components/MaterialUI/MenuButtons.js");
+})();
+;
+(function () {
+  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
+  leaveModule && leaveModule(module);
+})();

package/dist/utils/propertyBagHelper.js

@@ -30,7 +30,8 @@ var customDataType = exports.customDataType = {
   carrierProviderSelector: "CarrierProviderSelector",
   routingProviderSelector: "RoutingProviderSelector",
   multipleCarrierProvidersSelector: "MultipleCarrierProvidersSelector",
-  serviceLevelSelector: "ServiceLevelSelector"
+  serviceLevelSelector: "ServiceLevelSelector",
+  percentageDecimal: "PercentageDecimal"
 };
 var tieredAttributeTypes = [customDataType.priceTieredRateTable, customDataType.quantityTieredRateTable];
 var isTieredAttribute = exports.isTieredAttribute = function isTieredAttribute(attribute) {
@@ -78,6 +79,7 @@ var toJsonCargo = exports.toJsonCargo = function toJsonCargo(attribute, value) {
         case customDataType.money:
           return createJsonCargo(_constants.jsonCargoType.double, Number(formatNumber(value, 2)));
         case customDataType.moneyDecimal:
+        case customDataType.percentageDecimal:
           return createJsonCargo(_constants.jsonCargoType.decimal, Number(formatNumber(value, 2)));
         case customDataType.priceTieredRateTable:
         case customDataType.quantityTieredRateTable:

package/package.json

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

package/src/components/MaterialUI/MenuButtons.js

@@ -0,0 +1,106 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Menu from "@material-ui/core/Menu";
+import MenuItem from "@material-ui/core/MenuItem";
+import Divider from "./DataDisplay/Divider";
+import DividerProps from "./DataDisplay/dividerProps";
+import Icon from "./DataDisplay/Icon";
+import Button from "@material-ui/core/Button";
+
+const useMenuStyles = makeStyles(theme => ({
+	menuItem: {
+		fontFamily: theme.typography.fontFamily,
+		textTransform: "none",
+		color: theme.palette.text.primary,
+		borderRadius: 0,
+		"&:hover": {
+			borderRadius: 0,
+			boxShadow: "none",
+			backgroundColor: theme.palette.primary.light,
+		},
+		"&:focus, &:active, &.Mui-focusVisible": {
+			borderRadius: 0,
+			boxShadow: "none",
+			outline: "none",
+		},
+	},
+	menu: {
+		border: `${theme.spacing(0.1)} solid ${theme.palette.primary.main}`,
+	},
+	arrowIcon: {
+		width: theme.spacing(1),
+		height: theme.spacing(1),
+	},
+}));
+
+const StyledMenu = props => {
+	const classes = useMenuStyles();
+
+	return (
+		<Menu
+			elevation={0}
+			getContentAnchorEl={null}
+			anchorOrigin={{
+				vertical: "bottom",
+				horizontal: "left",
+			}}
+			transformOrigin={{
+				vertical: "top",
+				horizontal: "left",
+			}}
+			classes={{ paper: classes.menu }}
+			{...props}
+		/>
+	);
+};
+
+const MenuButton = ({ options, label }) => {
+	const [anchorEl, setAnchorEl] = React.useState(null);
+	const classes = useMenuStyles();
+
+	const handleClick = event => {
+		setAnchorEl(event.currentTarget);
+	};
+
+	const handleClose = () => {
+		setAnchorEl(null);
+	};
+
+	const dividerProps = new DividerProps();
+	dividerProps.set(DividerProps.propNames.light, true);
+	dividerProps.set(DividerProps.propNames.variant, "middle");
+	const allDisabled = options?.every(o => o.disabled) ?? true;
+	return (
+		<>
+			<Button
+				aria-haspopup="true"
+				variant="outlined"
+				color="primary"
+				disabled={allDisabled}
+				onClick={handleClick}
+				endIcon={<Icon id="chevron-down" className={classes.arrowIcon} />}
+			>
+				{label}
+			</Button>
+			<StyledMenu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
+				{options?.map(({ key, component, disabled, action }, index) => (
+					<div key={key}>
+						<MenuItem
+							onClick={() => {
+								handleClose();
+								action?.();
+							}}
+							disabled={disabled}
+							classes={{ root: classes.menuItem }}
+						>
+							{component}
+						</MenuItem>
+						{index < options.length - 1 && <Divider dividerProps={dividerProps} />}
+					</div>
+				))}
+			</StyledMenu>
+		</>
+	);
+};
+
+export default MenuButton;

package/src/components/MaterialUI/MenuButtons.test.js

@@ -0,0 +1,74 @@
+import React from "react";
+import MenuButton from "./MenuButtons";
+import Button from "@material-ui/core/Button";
+import Menu from "@material-ui/core/Menu";
+import Icon from "./DataDisplay/Icon";
+import sinon from "sinon";
+import ReactDOM from "react-dom";
+
+describe("MenuButton", () => {
+	it("Renders MenuButton with no options", () => {
+		const menuItems = [
+			{
+				disabled: true,
+			},
+			{
+				disabled: true,
+			},
+		];
+
+		const component = <MenuButton label={<p>Label</p>} options={menuItems} />;
+
+		const expected = (
+			<>
+				<Button disabled={true} variant="outlined" color="primary" endIcon={<Icon id="chevron-down" />}>
+					<p>Label</p>
+				</Button>
+				<Menu open={false}></Menu>
+			</>
+		);
+
+		expect(component, "when mounted", "to satisfy", expected);
+	});
+
+	it("Renders MenuButton with all options disabled", () => {
+		const component = <MenuButton label={<p>Label</p>} />;
+
+		const expected = (
+			<>
+				<Button disabled={true} variant="outlined" color="primary" endIcon={<Icon id="chevron-down" />}>
+					<p>Label</p>
+				</Button>
+				<Menu open={false}></Menu>
+			</>
+		);
+
+		expect(component, "when mounted", "to satisfy", expected);
+	});
+
+	it("Call option set in menu item", () => {
+		const menuItems = [
+			{
+				action: sinon.spy().named("action"),
+			},
+		];
+
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		ReactDOM.render(<MenuButton options={menuItems} />, container);
+
+		const clickEvent = new MouseEvent("click", {
+			bubbles: true,
+			cancelable: false,
+		});
+
+		const button = container.querySelector("button");
+		button.dispatchEvent(clickEvent);
+
+		const items = document.querySelectorAll(".MuiListItem-root");
+		expect(items, "to have length", 1);
+
+		items[0].dispatchEvent(clickEvent);
+		expect(menuItems[0].action, "was called");
+	});
+});

package/src/utils/propertyBagHelper.js

@@ -19,6 +19,7 @@ export const customDataType = {
 	routingProviderSelector: "RoutingProviderSelector",
 	multipleCarrierProvidersSelector: "MultipleCarrierProvidersSelector",
 	serviceLevelSelector: "ServiceLevelSelector",
+	percentageDecimal: "PercentageDecimal",
 };
 
 const tieredAttributeTypes = [customDataType.priceTieredRateTable, customDataType.quantityTieredRateTable];
@@ -73,6 +74,7 @@ export const toJsonCargo = (attribute, value) => {
 				case customDataType.money:
 					return createJsonCargo(jsonCargoType.double, Number(formatNumber(value, 2)));
 				case customDataType.moneyDecimal:
+				case customDataType.percentageDecimal:
 					return createJsonCargo(jsonCargoType.decimal, Number(formatNumber(value, 2)));
 				case customDataType.priceTieredRateTable:
 				case customDataType.quantityTieredRateTable: