orc-shared 5.10.1-dev.7 → 5.10.1

package/dist/components/ToastList.js

@@ -1,15 +1,18 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = exports.ToastList = exports.Toast = void 0;
+exports.default = exports.ToastList = exports.ToastIcon = exports.ToastBox = exports.Toast = exports.CloseIcon = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
-var _reactIntl = require("react-intl");
-var _styles = require("@material-ui/core/styles");
-var _Icon = _interopRequireDefault(require("./MaterialUI/DataDisplay/Icon"));
-var _toastHelper = require("../utils/toastHelper");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledTransitionGroup = _interopRequireDefault(require("styled-transition-group"));
 var _reactTransitionGroup = require("react-transition-group");
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _polished = require("polished");
+var _utils = require("../utils");
+var _Text = _interopRequireDefault(require("./Text"));
+var _Icon = _interopRequireDefault(require("./Icon"));
 var _excluded = ["message", "type", "closeFunc"];
+var _templateObject;
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 (function () {
   var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
@@ -22,6 +25,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 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); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
 var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
   return a;
 };
@@ -34,65 +38,36 @@ if (!portal.parent) {
   portal.id = "toast";
   document.body.appendChild(portal);
 }
-var useStyles = (0, _styles.makeStyles)(function (theme) {
+var toastTransitionTime = 300;
+var ToastBox = exports.ToastBox = _styledTransitionGroup.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tdisplay: flex;\n\twidth: 390px;\n\tmargin-top: 10px;\n\tpadding: 17px;\n\tborder-radius: 5px;\n\tfont-size: 14px;\n\tcolor: white;\n\tbackground-color: ", ";\n\tz-index: 10000;\n\n\t& > * {\n\t\tmargin-top: auto;\n\t\tmargin-bottom: auto;\n\t}\n\t\n\t&:enter {\n\t\ttransform: translateX(200%);\n\t}\n\t&:enter-active {\n\t\ttransform: translateX(0);\n\t\ttransition: transform ", "ms ease-out;\n\t}\n\t&:exit {\n\t\ttransform-origin: top;\n\t\ttransform: scale(1,1);\n\t}\n\t&:exit ~ & {\n\t\ttransform: translateY(0);\n\t}\n\t&:exit-active {\n\t\ttransform: scale(1, 0.001);\n\t\ttransition: transform ", "ms ease-out;\n\t}\n\t&:exit-active ~ & {\n\t\ttransition: transform ", "ms ease-out;\n\t\ttransform: translateY(-100%);\n\t}\n"])), (0, _utils.getThemeProp)(["colors", "toasts", function (props) {
+  return props.type;
+}], "#999"), toastTransitionTime, toastTransitionTime, toastTransitionTime);
+ToastBox.defaultProps = {
+  timeout: toastTransitionTime,
+  unmountOnExit: true
+};
+var ToastIcon = exports.ToastIcon = (0, _styledComponents.default)(_Icon.default).attrs(function (props) {
+  return {
+    id: (0, _utils.getThemeProp)(["icons", "toast", function (props) {
+      return props.type;
+    }], "bubble-chat-2")(props)
+  };
+}).withConfig({
+  displayName: "ToastList__ToastIcon",
+  componentId: "sc-ux3rdy-0"
+})(["font-size:20px;margin-right:16px;stroke-width:2px;"]);
+var CloseIcon = exports.CloseIcon = (0, _styledComponents.default)(_Icon.default).attrs(function (props) {
   return {
-    toastBox: function toastBox(props) {
-      var toastColor = (0, _toastHelper.getToastColor)(theme, props.toastType);
-      return {
-        display: "flex",
-        width: "390px",
-        marginTop: "10px",
-        padding: "17px",
-        borderRadius: "5px",
-        fontSize: "14px",
-        color: "white",
-        backgroundColor: toastColor,
-        zIndex: 10000,
-        "& > *": {
-          marginTop: "auto",
-          marginBottom: "auto"
-        },
-        "&.enter": {
-          transform: "translateX(200%)"
-        },
-        "&.enter-active": {
-          transform: "translateX(0)",
-          transition: "transform 300ms ease-out"
-        },
-        "&.exit": {
-          transformOrigin: "top",
-          transform: "scale(1,1)"
-        },
-        "&.exit ~ &": {
-          transform: "translateY(0)"
-        },
-        "&.exit-active": {
-          transform: "scale(1, 0.001)",
-          transition: "transform 300ms ease-out"
-        },
-        "&.exit-active ~ &": {
-          transition: "transform 300ms ease-out",
-          transform: "translateY(-100%)"
-        }
-      };
-    },
-    listWrapper: {
-      position: "absolute",
-      top: "40px",
-      right: "16px",
-      display: "flex",
-      flexDirection: "column"
-    },
-    closeIcon: {
-      padding: "2px",
-      borderRadius: "2px",
-      strokeWidth: "2px",
-      cursor: "pointer",
-      marginLeft: "auto",
-      fontSize: "20px"
-    }
+    id: (0, _utils.getThemeProp)(["icons", "close"], "close")(props)
   };
-});
+}).withConfig({
+  displayName: "ToastList__CloseIcon",
+  componentId: "sc-ux3rdy-1"
+})(["position:absolute;top:8px;right:8px;font-size:10px;padding:2px;border-radius:2px;stroke-width:2px;&:hover{background-color:", ";}"], (0, _utils.getThemeProp)(["colors", "toasts", function (props) {
+  return props.type;
+}], "#999999", function (color) {
+  return (0, _polished.shade)(0.3, color);
+}));
 var Toast = exports.Toast = function Toast(_ref) {
   var _ref$message = _ref.message,
     message = _ref$message === void 0 ? "[No message]" : _ref$message,
@@ -100,44 +75,30 @@ var Toast = exports.Toast = function Toast(_ref) {
     type = _ref$type === void 0 ? "" : _ref$type,
     closeFunc = _ref.closeFunc,
     props = _objectWithoutProperties(_ref, _excluded);
-  var classes = useStyles({
-    toastType: type
-  });
-  return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
-    in: props.in,
-    timeout: 300,
-    unmountOnExit: true
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.toastBox
-  }, /*#__PURE__*/_react.default.createElement("span", null, typeof message === "string" ? message : /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, message)), closeFunc ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    id: "close",
-    className: classes.closeIcon,
-    onClick: closeFunc
-  }) : null));
+  return /*#__PURE__*/_react.default.createElement(ToastBox, {
+    type: type,
+    in: props.in
+  }, /*#__PURE__*/_react.default.createElement(ToastIcon, {
+    type: type
+  }), /*#__PURE__*/_react.default.createElement(_Text.default, {
+    message: message
+  }), closeFunc ? /*#__PURE__*/_react.default.createElement(CloseIcon, {
+    onClick: closeFunc,
+    type: type
+  }) : null);
 };
-__signature__(Toast, "useStyles{classes}", function () {
-  return [useStyles];
-});
-__signature__(Toast, "useStyles{classes}", function () {
-  return [useStyles];
-});
+var ListWrapper = (0, _styledComponents.default)(_reactTransitionGroup.TransitionGroup).withConfig({
+  displayName: "ToastList__ListWrapper",
+  componentId: "sc-ux3rdy-2"
+})(["position:absolute;top:40px;right:16px;display:flex;flex-direction:column;"]);
 var ToastList = exports.ToastList = function ToastList(_ref2) {
   var toasts = _ref2.toasts;
-  var classes = useStyles();
-  return _reactDom.default.createPortal(/*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, {
-    className: classes.listWrapper
-  }, toasts.map(function (props, idx) {
+  return _reactDom.default.createPortal(/*#__PURE__*/_react.default.createElement(ListWrapper, null, toasts.map(function (props, idx) {
     return /*#__PURE__*/_react.default.createElement(Toast, _extends({
       key: "toast" + idx
     }, props));
   })), portal);
 };
-__signature__(ToastList, "useStyles{classes}", function () {
-  return [useStyles];
-});
-__signature__(ToastList, "useStyles{classes}", function () {
-  return [useStyles];
-});
 var _default = ToastList;
 var _default2 = _default;
 var _default3 = exports.default = _default2;
@@ -148,8 +109,12 @@ var _default3 = exports.default = _default2;
     return;
   }
   reactHotLoader.register(portal, "portal", "/home/vsts/work/1/s/src/components/ToastList.js");
-  reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/ToastList.js");
+  reactHotLoader.register(toastTransitionTime, "toastTransitionTime", "/home/vsts/work/1/s/src/components/ToastList.js");
+  reactHotLoader.register(ToastBox, "ToastBox", "/home/vsts/work/1/s/src/components/ToastList.js");
+  reactHotLoader.register(ToastIcon, "ToastIcon", "/home/vsts/work/1/s/src/components/ToastList.js");
+  reactHotLoader.register(CloseIcon, "CloseIcon", "/home/vsts/work/1/s/src/components/ToastList.js");
   reactHotLoader.register(Toast, "Toast", "/home/vsts/work/1/s/src/components/ToastList.js");
+  reactHotLoader.register(ListWrapper, "ListWrapper", "/home/vsts/work/1/s/src/components/ToastList.js");
   reactHotLoader.register(ToastList, "ToastList", "/home/vsts/work/1/s/src/components/ToastList.js");
   reactHotLoader.register(_default, "default", "/home/vsts/work/1/s/src/components/ToastList.js");
 })();
@@ -165,8 +130,12 @@ var _default3 = exports.default = _default2;
     return;
   }
   reactHotLoader.register(portal, "portal", "/home/vsts/work/1/s/src/components/ToastList.js");
-  reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/ToastList.js");
+  reactHotLoader.register(toastTransitionTime, "toastTransitionTime", "/home/vsts/work/1/s/src/components/ToastList.js");
+  reactHotLoader.register(ToastBox, "ToastBox", "/home/vsts/work/1/s/src/components/ToastList.js");
+  reactHotLoader.register(ToastIcon, "ToastIcon", "/home/vsts/work/1/s/src/components/ToastList.js");
+  reactHotLoader.register(CloseIcon, "CloseIcon", "/home/vsts/work/1/s/src/components/ToastList.js");
   reactHotLoader.register(Toast, "Toast", "/home/vsts/work/1/s/src/components/ToastList.js");
+  reactHotLoader.register(ListWrapper, "ListWrapper", "/home/vsts/work/1/s/src/components/ToastList.js");
   reactHotLoader.register(ToastList, "ToastList", "/home/vsts/work/1/s/src/components/ToastList.js");
   reactHotLoader.register(_default2, "default", "/home/vsts/work/1/s/src/components/ToastList.js");
 })();

package/dist/getTheme.js

@@ -72,6 +72,11 @@ var baseTheme = {
       Sale: "sales-scope",
       Dependant: "dependent-scope"
     },
+    // toast: {
+    // 	confirm: "checkmark-circle",
+    // 	warn: "warning",
+    // 	error: "cross-circle",
+    // },
     prev: "arrow-small-left",
     next: "arrow-small-right",
     menu: "app-list",

package/package.json

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

package/src/components/AppFrame/MenuItem.js

@@ -3,7 +3,15 @@ import { makeStyles } from "@material-ui/core/styles";
 import { Link } from "react-router-dom";
 import { FormattedMessage } from "react-intl";
 import Icon from "../MaterialUI/DataDisplay/Icon";
-import { getToastColor } from "../../utils/toastHelper";
+
+const getToastColor = (theme, alertType) => {
+	const toastBorderColors = {
+		error: theme.palette.error.main,
+		warn: theme.palette.warning.main,
+		confirm: theme.palette.success.main,
+	};
+	return toastBorderColors[alertType] || "red";
+};
 
 const useStyles = makeStyles(theme => ({
 	block: props => ({

package/src/components/CategoryList.js

@@ -0,0 +1,140 @@
+/*
+	Multiple lists with a single header, aligned with each other
+	No virtualization or page loading
+	Categories can be folded up to hide content
+	Sortable, within categories
+*/
+import React from "react";
+import styled, { css } from "styled-components";
+import { compose, setDisplayName } from "recompose";
+import { safeGet, ifFlag, getThemeProp } from "../utils";
+import withScrollBox from "../hocs/withScrollBox";
+import useViewState from "../hooks/useViewState";
+import Icon from "./Icon";
+import Row from "./List/Row";
+import HeadRow from "./List/HeadRow";
+import { useListState, Table, Placeholder, HEADER_HEIGHT } from "./List/List";
+
+const arrayToggle = (array, item) => (array.includes(item) ? array.filter(x => x !== item) : array.concat(item));
+
+export const CategoryRow = styled.tr``;
+
+export const CategoryHeader = styled.td`
+	border: 0 solid ${getThemeProp(["colors", "borderLight"], "#cccccc")};
+	border-top-width: 1px;
+	tr:first-child & {
+		border-top-width: 0;
+	}
+	tr:last-child & {
+		border-bottom-width: 1px;
+	}
+
+	position: relative;
+	padding: 11px 45px;
+	background-color: #f1eae0;
+	${ifFlag(
+		"closed",
+		css`
+			border-bottom: 1px solid ${getThemeProp(["colors", "borderLight"], "#cccccc")};
+		`,
+	)}
+	cursor: pointer;
+`;
+
+export const CategoryIndicator = styled(Icon).attrs(props => ({
+	id: ifFlag(
+		"closed",
+		getThemeProp(["icons", "indicators", "right"], "chevron-right"),
+		getThemeProp(["icons", "indicators", "down"], "chevron-down"),
+	)(props),
+}))`
+	font-size: 12px;
+	position: absolute;
+	left: 22px;
+	top: 15px;
+`;
+
+export const CategoryList = ({
+	name,
+	columnDefs = [],
+	rows = [],
+	rowOnClick,
+	placeholder,
+	keyField = ["id"],
+	categoryField = ["category"],
+	openAll = false,
+	height,
+	rowBackgroundGetter = () => {},
+}) => {
+	const [enhancedColumnDefs, selection] = useListState(name, columnDefs);
+	const [{ closedCategories = [] }, updateViewState] = useViewState(name);
+	if (columnDefs.length === 0) return null;
+	const rowIds = [],
+		rowCategories = {};
+	rows.forEach((row, index) => {
+		const id = safeGet(row, ...keyField) + ""; // Ensure rowId is string
+		const category = safeGet(row, ...categoryField) || "";
+		rowIds.push(id);
+		if (!rowCategories[category]) {
+			rowCategories[category] = [];
+		}
+		rowCategories[category].push(
+			<Row
+				columnDefs={enhancedColumnDefs}
+				key={id}
+				rowId={id}
+				row={row}
+				rowOnClick={rowOnClick}
+				selected={selection.indexOf(id) !== -1}
+				bgColor={rowBackgroundGetter(row, index)}
+			/>,
+		);
+	});
+	const rowElements = [];
+	if (Object.keys(rowCategories).length === 0) {
+		if (placeholder) {
+			rowElements.push(
+				<Placeholder key="placeholder" width={columnDefs.length} height={height - HEADER_HEIGHT}>
+					{placeholder}
+				</Placeholder>,
+			);
+		}
+	} else {
+		Object.entries(rowCategories).forEach(([key, rows]) => {
+			const clickHandler = () => updateViewState("closedCategories", arrayToggle(closedCategories, key));
+			const closed = !openAll && closedCategories.includes(key);
+			rowElements.push(
+				<CategoryRow key={"category_" + key}>
+					<CategoryHeader
+						data-test-id={"category_" + key}
+						closed={closed}
+						colSpan={columnDefs.length}
+						onClick={clickHandler}
+					>
+						<CategoryIndicator closed={closed} />
+						{key}
+					</CategoryHeader>
+				</CategoryRow>,
+			);
+			if (!closed) {
+				rowElements.push(...rows);
+			}
+		});
+	}
+	return (
+		<Table>
+			<thead>
+				<HeadRow
+					columnDefs={enhancedColumnDefs}
+					rowIds={rowIds}
+					allSelected={rows.length === selection.length && rows.length !== 0}
+				/>
+			</thead>
+			<tbody>{rowElements}</tbody>
+		</Table>
+	);
+};
+
+const StatefulCategoryList = compose(setDisplayName("CategoryList"), withScrollBox)(CategoryList);
+
+export default StatefulCategoryList;