orc-shared 5.10.2 → 5.99.0-dev.10

package/dist/utils/styledPropFuncs.js

@@ -1,88 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.switchEnum = exports.ifFlag = exports.getThemeProp = void 0;
-var _safeGet = _interopRequireDefault(require("./safeGet"));
-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);
-})();
-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 feedPropFunc = function feedPropFunc(props) {
-  return function (value) {
-    return typeof value === "function" ? value(props) : value;
-  };
-};
-
-/* Safely gets a (potentially nested) theme property, can run a function on the resulting value */
-var getThemeProp = exports.getThemeProp = function getThemeProp(path, defaultValue, func) {
-  if (func === void 0) {
-    func = function func(x) {
-      return x;
-    };
-  }
-  return function (props) {
-    return func(_safeGet.default.apply(void 0, [props, "theme"].concat(path.map(feedPropFunc(props)))) || feedPropFunc(props)(defaultValue));
-  };
-};
-
-/* Use in styled components to check if a prop has a truthy value and
-   return values based on that. */
-var ifFlag = exports.ifFlag = function ifFlag(name, thenVal, elseVal) {
-  if (elseVal === void 0) {
-    elseVal = "";
-  }
-  return function (props) {
-    return props[name] ? feedPropFunc(props)(thenVal) : feedPropFunc(props)(elseVal);
-  };
-};
-
-/* Creates a prop function that checks a field against a list of cases,
-	 	 and gives back a found case, or a default */
-var switchEnum = exports.switchEnum = function switchEnum(enumField, cases) {
-  return function (props) {
-    return cases[props[enumField]] || cases["default"];
-  };
-};
-;
-(function () {
-  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
-  if (!reactHotLoader) {
-    return;
-  }
-  reactHotLoader.register(feedPropFunc, "feedPropFunc", "/home/vsts/work/1/s/src/utils/styledPropFuncs.js");
-  reactHotLoader.register(getThemeProp, "getThemeProp", "/home/vsts/work/1/s/src/utils/styledPropFuncs.js");
-  reactHotLoader.register(ifFlag, "ifFlag", "/home/vsts/work/1/s/src/utils/styledPropFuncs.js");
-  reactHotLoader.register(switchEnum, "switchEnum", "/home/vsts/work/1/s/src/utils/styledPropFuncs.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(feedPropFunc, "feedPropFunc", "/home/vsts/work/1/s/src/utils/styledPropFuncs.js");
-  reactHotLoader.register(getThemeProp, "getThemeProp", "/home/vsts/work/1/s/src/utils/styledPropFuncs.js");
-  reactHotLoader.register(ifFlag, "ifFlag", "/home/vsts/work/1/s/src/utils/styledPropFuncs.js");
-  reactHotLoader.register(switchEnum, "switchEnum", "/home/vsts/work/1/s/src/utils/styledPropFuncs.js");
-})();
-;
-(function () {
-  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
-  leaveModule && leaveModule(module);
-})();

package/src/components/Button.js

@@ -1,90 +0,0 @@
-import styled, { css } from "styled-components";
-import { getThemeProp, ifFlag } from "../utils";
-import { tint } from "polished";
-
-const borderColor = base => ifFlag("primary", getThemeProp(["colors", "application", "base"], base), base);
-
-const background = ifFlag(
-	"primary",
-	ifFlag(
-		"active",
-		css`
-			color: #fff;
-			background-image: linear-gradient(
-				${getThemeProp(["colors", "application", "base"], "#333", color => tint(0.05, color))},
-				${getThemeProp(["colors", "application", "base"], "#333")}
-			);
-			&:enabled:active {
-				background-image: none;
-				background-color: #fff;
-				color: ${getThemeProp(["colors", "application", "base"], "#333")};
-			}
-		`,
-		css`
-			color: ${getThemeProp(["colors", "application", "base"], "#333")};
-			background-image: none;
-			background-color: #fff;
-			&:enabled:active {
-				color: #fff;
-				background-image: linear-gradient(
-					${getThemeProp(["colors", "application", "base"], "#333", color => tint(0.05, color))},
-					${getThemeProp(["colors", "application", "base"], "#333")}
-				);
-			}
-		`,
-	),
-	ifFlag(
-		"active",
-		css`
-			background-image: none;
-			background-color: ${getThemeProp(["colors", "bgLight"], "#efefef")};
-			&:enabled:active {
-				background-color: #f7f7f7;
-			}
-		`,
-		css`
-			background-image: none;
-			background-color: #f7f7f7;
-			&:enabled:active {
-				background-color: ${getThemeProp(["colors", "bgLight"], "#efefef")};
-			}
-		`,
-	),
-);
-
-const Button = styled.button`
-	display: inline-block;
-	margin: 0;
-	font-weight: 400;
-	text-align: center;
-	vertical-align: middle;
-	cursor: pointer;
-	white-space: nowrap;
-	padding: 6px 10px;
-	font-size: 13px;
-	line-height: 1.42857;
-	border-radius: 4px;
-	user-select: none;
-	height: 30px;
-	border: 1px solid ${borderColor(getThemeProp(["colors", "borderLight"], "#cccccc"))};
-	outline: none;
-	font-family: ${getThemeProp(["fonts", "header"], "sans-serif")};
-	text-transform: uppercase;
-	min-width: 50px;
-	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
-	${background};
-
-	&:enabled:active,
-	&:enabled:focus,
-	&:enabled:hover {
-		border-color: ${borderColor("#4fa1f0")};
-		box-shadow: 0 0 4px #4fa1f0;
-		outline: none;
-	}
-	&:disabled {
-		opacity: 0.6;
-		cursor: default;
-	}
-`;
-
-export default Button;

package/src/components/Button.test.js

@@ -1,49 +0,0 @@
-import React from "react";
-import Button from "./Button";
-
-describe("Button", () => {
-	let onClick;
-	beforeEach(() => {
-		onClick = () => {};
-	});
-
-	it("renders a button", () =>
-		expect(
-			<Button onClick={onClick}>Label</Button>,
-			"when mounted",
-			"to satisfy",
-			<button onClick={onClick}>Label</button>,
-		));
-
-	it("sets an inactive background-color", () =>
-		expect(<Button />, "when mounted", "to have style rules satisfying", "to contain", "background-color: #f7f7f7;"));
-
-	it("sets an active background-color", () =>
-		expect(
-			<Button active />,
-			"when mounted",
-			"to have style rules satisfying",
-			"to contain",
-			"background-color: #efefef;",
-		));
-
-	describe("primary", () => {
-		it("sets an inactive background gradient", () =>
-			expect(
-				<Button primary />,
-				"when mounted",
-				"to have style rules satisfying",
-				"to contain",
-				"background-color: #fff;",
-			));
-
-		it("sets an active background-color", () =>
-			expect(
-				<Button primary active />,
-				"when mounted",
-				"to have style rules satisfying",
-				"to contain",
-				"background-image: linear-gradient( #3d3d3d,#333 )",
-			));
-	});
-});

package/src/components/CategoryList.js

@@ -1,140 +0,0 @@
-/*
-	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;