orc-shared 5.8.0-dev.15 → 5.8.0-dev.17

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

@@ -43,17 +43,11 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     datePickerWrapper: {
       display: "flex",
       width: "auto",
-      padding: function padding(props) {
-        return props.readOnly ? "0" : theme.spacing(0.3, 0.5);
-      },
-      border: function border(props) {
-        return props.readOnly ? "none" : "1px solid ".concat(theme.palette.grey.borders);
-      },
+      padding: theme.spacing(0.3, 0.5),
+      border: "1px solid ".concat(theme.palette.grey.borders),
       borderRadius: theme.shape.borderRadius,
       alignItems: "center",
-      backgroundColor: function backgroundColor(props) {
-        return props.readOnly ? "inherit" : theme.palette.background.default;
-      },
+      backgroundColor: theme.palette.background.default,
       "&:focus, &:focus-within": {
         borderRadius: theme.shape.borderRadius,
         borderColor: theme.palette.focus,
@@ -110,6 +104,11 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
         opacity: 0.4
       }
     },
+    datePickerWrapperReadOnly: {
+      padding: "0",
+      border: "none",
+      backgroundColor: "inherit"
+    },
     disabled: {
       border: "1px solid ".concat(theme.palette.grey.light, " !important"),
       backgroundColor: "".concat(theme.palette.grey.light, " !important")
@@ -182,7 +181,7 @@ var WrappedDatePicker = function WrappedDatePicker(_ref) {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes.container
   }, /*#__PURE__*/_react.default.createElement("label", {
-    className: (0, _classnames.default)(classes.datePickerWrapper, disabledCls, error ? classes.errorInput : null)
+    className: (0, _classnames.default)(classes.datePickerWrapper, readOnly ? classes.datePickerWrapperReadOnly : null, disabledCls, error ? classes.errorInput : null)
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: classes.datePickerContainer
   }, /*#__PURE__*/_react.default.createElement(_reactDatepicker.default, _extends({}, props, {

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

@@ -185,6 +185,7 @@ __signature__(SelectIconButton, "useStyles{classes}", function () {
 __signature__(SelectIconButton, "useStyles{classes}", function () {
   return [useStyles];
 });
+var selectEmptyValue = "~~#~~";
 var Select = function Select(_ref) {
   var _selectProps$get;
   var options = _ref.options,
@@ -222,6 +223,16 @@ var Select = function Select(_ref) {
     options.sort(function (a, b) {
       return a.sortOrder > b.sortOrder ? 1 : -1;
     });
+  } else if (sortType === _SelectProps.sortTypeEnum.alphabetical) {
+    options.sort(function (a, b) {
+      if (a.value === selectEmptyValue) {
+        return -1;
+      }
+      if (b.value === selectEmptyValue) {
+        return 1;
+      }
+      return a.label.localeCompare(b.label);
+    });
   }
   if (showAllValue && showAllLabel) {
     options.unshift({
@@ -245,7 +256,7 @@ var Select = function Select(_ref) {
   var items = options == null ? void 0 : options.map(function (option) {
     var clss = option != null && option.level ? classes["level" + option.level] : "";
     var appliedClasses = (0, _classnames.default)(classes.baseItem, clss);
-    var labelClss = (0, _classnames.default)(_defineProperty(_defineProperty({}, classes.label, true), classes.emptyLabel, option.value === "" || option.value === "~~#~~"));
+    var labelClss = (0, _classnames.default)(_defineProperty(_defineProperty({}, classes.label, true), classes.emptyLabel, option.value === "" || option.value === selectEmptyValue));
     var disabled = !!option.disabled;
     var groupHeader = !!option.isGroupHeader;
     if (groupHeader) {
@@ -332,6 +343,7 @@ var _default3 = exports.default = _default2;
   reactHotLoader.register(getIconButtonMenuProps, "getIconButtonMenuProps", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/Select.js");
   reactHotLoader.register(SelectIcon, "SelectIcon", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/Select.js");
   reactHotLoader.register(SelectIconButton, "SelectIconButton", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/Select.js");
+  reactHotLoader.register(selectEmptyValue, "selectEmptyValue", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/Select.js");
   reactHotLoader.register(Select, "Select", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/Select.js");
   reactHotLoader.register(_default, "default", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/Select.js");
 })();
@@ -351,6 +363,7 @@ var _default3 = exports.default = _default2;
   reactHotLoader.register(getIconButtonMenuProps, "getIconButtonMenuProps", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/Select.js");
   reactHotLoader.register(SelectIcon, "SelectIcon", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/Select.js");
   reactHotLoader.register(SelectIconButton, "SelectIconButton", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/Select.js");
+  reactHotLoader.register(selectEmptyValue, "selectEmptyValue", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/Select.js");
   reactHotLoader.register(Select, "Select", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/Select.js");
   reactHotLoader.register(_default2, "default", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/Select.js");
 })();

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

@@ -26,7 +26,8 @@ var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoader
 var sortTypeEnum = exports.sortTypeEnum = {
   none: 0,
   default: 1,
-  numeric: 2
+  numeric: 2,
+  alphabetical: 3
 };
 var SelectProps = /*#__PURE__*/function (_ComponentProps) {
   function SelectProps() {

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

@@ -3,6 +3,7 @@
 exports.__esModule = true;
 exports.useStyles = exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _Switch = _interopRequireDefault(require("@material-ui/core/Switch"));
 var _styles = require("@material-ui/core/styles");
 var _SwitchProps = _interopRequireWildcard(require("./SwitchProps"));
@@ -47,17 +48,19 @@ var useStyles = exports.useStyles = (0, _styles.makeStyles)(function (theme) {
     input: {
       left: "-250%",
       width: "600%",
-      cursor: function cursor(props) {
-        return props.readOnly ? "default" : "inherit";
-      }
+      cursor: "inherit"
+    },
+    inputReadOnly: {
+      cursor: "default"
     },
     thumb: {
       width: theme.spacing(1.3),
       height: theme.spacing(1.3),
       backgroundColor: theme.palette.background.default,
-      display: function display(props) {
-        return props.readOnly ? "none" : "inherit";
-      }
+      display: "inherit"
+    },
+    thumbReadOnly: {
+      display: "none"
     },
     track: {
       backgroundColor: theme.palette.grey.borders,
@@ -77,19 +80,21 @@ var useStyles = exports.useStyles = (0, _styles.makeStyles)(function (theme) {
           return "\"".concat(props.formattedOnCaption, "\"");
         },
         left: theme.spacing(0.9),
-        right: function right(props) {
-          return props.readOnly && theme.spacing(0.9);
-        },
         opacity: 0
       },
       "&:after": {
         content: function content(props) {
           return "\"".concat(props.formattedOffCaption, "\"");
         },
-        right: theme.spacing(0.9),
-        left: function left(props) {
-          return props.readOnly && theme.spacing(0.9);
-        }
+        right: theme.spacing(0.9)
+      }
+    },
+    trackReadOnly: {
+      "&:before": {
+        right: theme.spacing(0.9)
+      },
+      "&:after": {
+        left: theme.spacing(0.9)
       }
     },
     checked: {
@@ -133,10 +138,17 @@ var Switch = function Switch(_ref) {
   var formattedOffCaption = offCaption != null ? formatMessage(offCaption) : "";
   var classes = useStyles({
     formattedOnCaption: formattedOnCaption,
-    formattedOffCaption: formattedOffCaption,
-    readOnly: readOnly
+    formattedOffCaption: formattedOffCaption
   });
-  var switchClasses = _objectSpread(_objectSpread({}, classes), className);
+  var switchClasses = _objectSpread({
+    root: classes.root,
+    switchBase: classes.switchBase,
+    input: (0, _classnames.default)(classes.input, _defineProperty({}, classes.inputReadOnly, readOnly)),
+    thumb: (0, _classnames.default)(classes.thumb, _defineProperty({}, classes.thumbReadOnly, readOnly)),
+    track: (0, _classnames.default)(classes.track, _defineProperty({}, classes.trackReadOnly, readOnly)),
+    checked: classes.checked,
+    disabled: classes.disabled
+  }, className);
   return /*#__PURE__*/_react.default.createElement(_Switch.default, {
     disabled: disabled,
     classes: switchClasses,

package/package.json

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

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

@@ -21,11 +21,11 @@ const useStyles = makeStyles(theme => ({
 	datePickerWrapper: {
 		display: "flex",
 		width: "auto",
-		padding: props => (props.readOnly ? "0" : theme.spacing(0.3, 0.5)),
-		border: props => (props.readOnly ? "none" : `1px solid ${theme.palette.grey.borders}`),
+		padding: theme.spacing(0.3, 0.5),
+		border: `1px solid ${theme.palette.grey.borders}`,
 		borderRadius: theme.shape.borderRadius,
 		alignItems: "center",
-		backgroundColor: props => (props.readOnly ? "inherit" : theme.palette.background.default),
+		backgroundColor: theme.palette.background.default,
 		"&:focus, &:focus-within": {
 			borderRadius: theme.shape.borderRadius,
 			borderColor: theme.palette.focus,
@@ -82,6 +82,11 @@ const useStyles = makeStyles(theme => ({
 			opacity: 0.4,
 		},
 	},
+	datePickerWrapperReadOnly: {
+		padding: "0",
+		border: "none",
+		backgroundColor: "inherit",
+	},
 	disabled: {
 		border: `1px solid ${theme.palette.grey.light} !important`,
 		backgroundColor: `${theme.palette.grey.light} !important`,
@@ -157,7 +162,14 @@ const WrappedDatePicker = ({
 
 	return (
 		<div className={classes.container}>
-			<label className={classNames(classes.datePickerWrapper, disabledCls, error ? classes.errorInput : null)}>
+			<label
+				className={classNames(
+					classes.datePickerWrapper,
+					readOnly ? classes.datePickerWrapperReadOnly : null,
+					disabledCls,
+					error ? classes.errorInput : null,
+				)}
+			>
 				<div className={classes.datePickerContainer}>
 					<DatePicker
 						{...props}

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

@@ -3,8 +3,10 @@ import DatePicker, { createFormat } from "./DatePicker";
 import { mount } from "enzyme";
 import sinon from "sinon";
 import Icon from "../DataDisplay/Icon";
-import { TestWrapper, createMuiTheme } from "./../../../utils/testUtils";
+import { TestWrapper, createMuiTheme, generateClassName } from "./../../../utils/testUtils";
 import Immutable from "immutable";
+import { StylesProvider } from "@material-ui/core/styles";
+import { MuiThemeProvider } from "@material-ui/core";
 
 describe("DatePicker", () => {
 	let updater, state, store;
@@ -426,6 +428,38 @@ describe("DatePicker", () => {
 		input.at(0).simulate("change", event);
 	});
 
+	it("should have readonly styles when readonly", () => {
+		const date = new Date("2020-06-30T00:00:00");
+
+		const component = (
+			<TestWrapper provider={{ store }} intlProvider>
+				<StylesProvider generateClassName={generateClassName}>
+					<MuiThemeProvider theme={createMuiTheme()}>
+						<DatePicker useTime={true} readOnly={true} onChange={updater} value={date} />
+					</MuiThemeProvider>
+				</StylesProvider>
+			</TestWrapper>
+		);
+		const mountedComponent = mount(component);
+		expect(mountedComponent.exists(".makeStyles-datePickerWrapperReadOnly"), "to be true");
+	});
+
+	it("should have updatable styles when updatable", () => {
+		const date = new Date("2020-06-30T00:00:00");
+
+		const component = (
+			<TestWrapper provider={{ store }} intlProvider>
+				<StylesProvider generateClassName={generateClassName}>
+					<MuiThemeProvider theme={createMuiTheme()}>
+						<DatePicker useTime={true} readOnly={false} onChange={updater} value={date} />
+					</MuiThemeProvider>
+				</StylesProvider>
+			</TestWrapper>
+		);
+		const mountedComponent = mount(component);
+		expect(mountedComponent.exists(".makeStyles-datePickerWrapperReadOnly"), "to be false");
+	});
+
 	it("should call onChange prop with useTimeZone", () => {
 		const onChangeMock = jest.fn();
 		const date = new Date("2020-06-30T00:00:00");

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

@@ -145,6 +145,8 @@ export const SelectIconButton = props => {
 	);
 };
 
+const selectEmptyValue = "~~#~~";
+
 const Select = ({ options, selectProps, children }) => {
 	if (isSelectProps(selectProps) === false) {
 		throw new TypeError("selectProps property is not of type SelectProps");
@@ -177,6 +179,16 @@ const Select = ({ options, selectProps, children }) => {
 		);
 	} else if (sortType === sortTypeEnum.default) {
 		options.sort((a, b) => (a.sortOrder > b.sortOrder ? 1 : -1));
+	} else if (sortType === sortTypeEnum.alphabetical) {
+		options.sort((a, b) => {
+			if (a.value === selectEmptyValue) {
+				return -1;
+			}
+			if (b.value === selectEmptyValue) {
+				return 1;
+			}
+			return a.label.localeCompare(b.label);
+		});
 	}
 
 	if (showAllValue && showAllLabel) {
@@ -207,7 +219,7 @@ const Select = ({ options, selectProps, children }) => {
 		const appliedClasses = classNames(classes.baseItem, clss);
 		const labelClss = classNames({
 			[classes.label]: true,
-			[classes.emptyLabel]: option.value === "" || option.value === "~~#~~",
+			[classes.emptyLabel]: option.value === "" || option.value === selectEmptyValue,
 		});
 
 		const disabled = !!option.disabled;

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

@@ -496,6 +496,43 @@ describe("Select Component", () => {
 		expect(optionsKeys, "to equal", ["#All#", "a", "b", "c"]);
 	});
 
+	it("Sorts select options correctly with alphabetical sorting", () => {
+		const emptyValue = "~~#~~";
+
+		const options = [
+			{ value: "c", label: "c" },
+			{ value: "a", label: "a" },
+			{ value: "b", label: "b" },
+			{ value: "f", label: "f" },
+			{ value: emptyValue, label: "empty" },
+			{ value: "h", label: "h" },
+			{ value: "g", label: "g" },
+			{ value: "e", label: "e" },
+			{ value: "d", label: "[d]" },
+		];
+
+		const selectProps = new SelectProps();
+
+		selectProps.set(SelectProps.propNames.sortType, sortTypeEnum.alphabetical);
+		selectProps.set(SelectProps.propNames.value, "b");
+
+		const component = (
+			<TestWrapper stylesProvider muiThemeProvider={{ theme }}>
+				<Select options={options} selectProps={selectProps} />
+			</TestWrapper>
+		);
+
+		const mountedComponent = mount(component);
+
+		const test = mountedComponent.find(SelectMUI);
+
+		const mountedOptions = test.props().children;
+
+		const optionsKeys = mountedOptions.map(option => option.key);
+
+		expect(optionsKeys, "to equal", [emptyValue, "d", "a", "b", "c", "e", "f", "g", "h"]);
+	});
+
 	it("Sorts select options correctly with numeric sorting", () => {
 		const options = [
 			{ value: "BRC-409 - BRC-PROMENADES", label: "BRC-409 - BRC-PROMENADES", sortOrder: "BRC-409 - BRC-PROMENADES" },

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

@@ -4,6 +4,7 @@ export const sortTypeEnum = {
 	none: 0,
 	default: 1,
 	numeric: 2,
+	alphabetical: 3,
 };
 
 class SelectProps extends ComponentProps {

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

@@ -1,4 +1,5 @@
 import React from "react";
+import classNames from "classnames";
 import SwitchMui from "@material-ui/core/Switch";
 import { makeStyles } from "@material-ui/core/styles";
 import SwitchProps, { isSwitchProps } from "./SwitchProps";
@@ -21,13 +22,19 @@ export const useStyles = makeStyles(theme => ({
 	input: {
 		left: "-250%",
 		width: "600%",
-		cursor: props => (props.readOnly ? "default" : "inherit"),
+		cursor: "inherit",
+	},
+	inputReadOnly: {
+		cursor: "default",
 	},
 	thumb: {
 		width: theme.spacing(1.3),
 		height: theme.spacing(1.3),
 		backgroundColor: theme.palette.background.default,
-		display: props => (props.readOnly ? "none" : "inherit"),
+		display: "inherit",
+	},
+	thumbReadOnly: {
+		display: "none",
 	},
 	track: {
 		backgroundColor: theme.palette.grey.borders,
@@ -45,13 +52,19 @@ export const useStyles = makeStyles(theme => ({
 		"&:before": {
 			content: props => `"${props.formattedOnCaption}"`,
 			left: theme.spacing(0.9),
-			right: props => props.readOnly && theme.spacing(0.9),
 			opacity: 0,
 		},
 		"&:after": {
 			content: props => `"${props.formattedOffCaption}"`,
 			right: theme.spacing(0.9),
-			left: props => props.readOnly && theme.spacing(0.9),
+		},
+	},
+	trackReadOnly: {
+		"&:before": {
+			right: theme.spacing(0.9),
+		},
+		"&:after": {
+			left: theme.spacing(0.9),
 		},
 	},
 	checked: {
@@ -95,8 +108,17 @@ const Switch = ({ switchProps }) => {
 	const formattedOnCaption = onCaption != null ? formatMessage(onCaption) : "";
 	const formattedOffCaption = offCaption != null ? formatMessage(offCaption) : "";
 
-	const classes = useStyles({ formattedOnCaption, formattedOffCaption, readOnly });
-	const switchClasses = { ...classes, ...className };
+	const classes = useStyles({ formattedOnCaption, formattedOffCaption });
+	const switchClasses = {
+		root: classes.root,
+		switchBase: classes.switchBase,
+		input: classNames(classes.input, { [classes.inputReadOnly]: readOnly }),
+		thumb: classNames(classes.thumb, { [classes.thumbReadOnly]: readOnly }),
+		track: classNames(classes.track, { [classes.trackReadOnly]: readOnly }),
+		checked: classes.checked,
+		disabled: classes.disabled,
+		...className,
+	};
 
 	return (
 		<SwitchMui

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

@@ -6,6 +6,9 @@ import { ignoreConsoleError } from "../../../utils/testUtils";
 import SwitchProps from "./SwitchProps";
 import Switch from "./Switch";
 import { IntlProvider } from "react-intl";
+import { StylesProvider } from "@material-ui/core/styles";
+import { MuiThemeProvider } from "@material-ui/core";
+import { generateClassName, createMuiTheme } from "~/utils/testUtils";
 
 const messages = {
 	captionOn: "is On",
@@ -77,6 +80,42 @@ describe("Switch Component", () => {
 		expect(update, "to have calls satisfying", [{ args: [true, {}] }]);
 	});
 
+	it("Renders readonly switch with readonly styles", () => {
+		const switchProps = new SwitchProps();
+		switchProps.set(SwitchProps.propNames.readOnly, true);
+		const component = (
+			<IntlProvider locale="en-US">
+				<StylesProvider generateClassName={generateClassName}>
+					<MuiThemeProvider theme={createMuiTheme()}>
+						<Switch switchProps={switchProps} />
+					</MuiThemeProvider>
+				</StylesProvider>
+			</IntlProvider>
+		);
+		const mountedComponent = mount(component);
+		expect(mountedComponent.exists(".makeStyles-inputReadOnly"), "to be true");
+		expect(mountedComponent.exists(".makeStyles-thumbReadOnly"), "to be true");
+		expect(mountedComponent.exists(".makeStyles-trackReadOnly"), "to be true");
+	});
+
+	it("Renders updatable switch with updatable styles", () => {
+		const switchProps = new SwitchProps();
+		switchProps.set(SwitchProps.propNames.readOnly, false);
+		const component = (
+			<IntlProvider locale="en-US">
+				<StylesProvider generateClassName={generateClassName}>
+					<MuiThemeProvider theme={createMuiTheme()}>
+						<Switch switchProps={switchProps} />
+					</MuiThemeProvider>
+				</StylesProvider>
+			</IntlProvider>
+		);
+		const mountedComponent = mount(component);
+		expect(mountedComponent.exists(".makeStyles-inputReadOnly"), "to be false");
+		expect(mountedComponent.exists(".makeStyles-thumbReadOnly"), "to be false");
+		expect(mountedComponent.exists(".makeStyles-trackReadOnly"), "to be false");
+	});
+
 	it("Checkbox component handles uncheck", () => {
 		const switchProps = new SwitchProps();