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

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/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.16",
 	"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/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();