orc-shared 5.10.1-dev.6 → 5.10.1-dev.8

package/src/components/List/DataCell.js

@@ -1,77 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import { FormattedNumber, FormattedDate, FormattedTime } from "react-intl";
-import { safeGet, getThemeProp } from "../../utils";
-import Switch from "../Switch";
-import Checkbox from "../Checkbox";
-import Text from "../Text";
-
-const arrify = thing => (Array.isArray(thing) ? thing : [thing]);
-
-const renderByType = (value, def, rowId, selected, row) => {
-	const transformedValue = def.transform ? def.transform(value) : value;
-	switch (def.type) {
-		case "custom": {
-			const Comp = def.component;
-			return <Comp {...row} {...def.funcs} />;
-		}
-		case "currency": {
-			let currency = def.currency;
-			if (Array.isArray(currency)) {
-				currency = safeGet(row, ...currency);
-			}
-			return (
-				<FormattedNumber
-					style="currency" // eslint-disable-line react/style-prop-object
-					currency={currency}
-					value={transformedValue || "0"}
-				/>
-			);
-		}
-		case "date":
-			return <FormattedDate value={transformedValue} />;
-		case "datetime":
-			return (
-				<React.Fragment>
-					<FormattedDate value={transformedValue} /> <FormattedTime value={transformedValue} />
-				</React.Fragment>
-			);
-		case "select":
-			return <Checkbox id={"select_" + rowId} value={selected} data-row-id={rowId} onChange={def.onChange} />;
-		case "switch":
-			return <Switch value={!!transformedValue} {...def.switch} data-row-id={rowId} onChange={def.onChange} />;
-		default:
-			return transformedValue ? <Text message={transformedValue} /> : null;
-	}
-};
-
-export const TableData = 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;
-	}
-
-	height: 20px;
-	padding: 15px 20px;
-	white-space: nowrap;
-	overflow-x: hidden;
-	text-overflow: ellipsis;
-`;
-
-const DataCell = ({ columnDef, row, rowId, selected }) => (
-	<TableData>
-		{renderByType(
-			safeGet(row, ...arrify(columnDef.fieldName)) || columnDef.defaultValue,
-			columnDef,
-			rowId,
-			selected,
-			row,
-		)}
-	</TableData>
-);
-
-export default DataCell;

package/src/components/List/DataCell.test.js

@@ -1,357 +0,0 @@
-import React from "react";
-import { Provider } from "react-redux";
-import { IntlProvider } from "react-intl";
-import DataCell, { TableData } from "./DataCell";
-import Switch from "../Switch";
-import Checkbox from "../Checkbox";
-
-const TestComp = () => <div />;
-
-describe("DataCell", () => {
-	it("renders a cell as defined by column and row", () => {
-		const columnDef = { fieldName: "test" };
-		const row = { test: "A text", extraneous: "Don't show" };
-		return expect(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<table>
-					<tbody>
-						<tr>
-							<DataCell columnDef={columnDef} row={row} />
-						</tr>
-					</tbody>
-				</table>
-			</Provider>,
-			"when mounted",
-			"to satisfy",
-			<table>
-				<tbody>
-					<tr>
-						<TableData>A text</TableData>
-					</tr>
-				</tbody>
-			</table>,
-		);
-	});
-
-	it("renders an empty cell", () => {
-		const columnDef = { fieldName: "test" };
-		const row = { extraneous: "Don't show" };
-		return expect(
-			<table>
-				<tbody>
-					<tr>
-						<DataCell columnDef={columnDef} row={row} />
-					</tr>
-				</tbody>
-			</table>,
-			"when mounted",
-			"to satisfy",
-			<table>
-				<tbody>
-					<tr>
-						<TableData />
-					</tr>
-				</tbody>
-			</table>,
-		);
-	});
-
-	it("renders a cell with a default value", () => {
-		const columnDef = { fieldName: ["test", "deep"], defaultValue: "empty" };
-		const row = { extraneous: "Don't show" };
-		return expect(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<table>
-					<tbody>
-						<tr>
-							<DataCell columnDef={columnDef} row={row} />
-						</tr>
-					</tbody>
-				</table>
-			</Provider>,
-			"when mounted",
-			"to satisfy",
-			<table>
-				<tbody>
-					<tr>
-						<TableData>empty</TableData>
-					</tr>
-				</tbody>
-			</table>,
-		);
-	});
-
-	it("renders a cell with type currency", () => {
-		const columnDef = { fieldName: "test", type: "currency", currency: "USD" };
-		const row = { test: 1200, extraneous: "Don't show" };
-		return expect(
-			<IntlProvider locale="en">
-				<table>
-					<tbody>
-						<tr>
-							<DataCell columnDef={columnDef} row={row} />
-						</tr>
-					</tbody>
-				</table>
-			</IntlProvider>,
-			"when mounted",
-			"to satisfy",
-			<table>
-				<tbody>
-					<tr>
-						<TableData>$1,200.00</TableData>
-					</tr>
-				</tbody>
-			</table>,
-		);
-	});
-
-	it("renders a cell with type currency for 0", () => {
-		const columnDef = { fieldName: "test", type: "currency", currency: "USD" };
-		const row = { test: 0, extraneous: "Don't show" };
-		return expect(
-			<IntlProvider locale="en">
-				<table>
-					<tbody>
-						<tr>
-							<DataCell columnDef={columnDef} row={row} />
-						</tr>
-					</tbody>
-				</table>
-			</IntlProvider>,
-			"when mounted",
-			"to satisfy",
-			<table>
-				<tbody>
-					<tr>
-						<TableData>$0.00</TableData>
-					</tr>
-				</tbody>
-			</table>,
-		);
-	});
-
-	it("renders a cell with type currency and row-based currency code", () => {
-		const columnDef = {
-			fieldName: "test",
-			type: "currency",
-			currency: ["currency"],
-		};
-		const row = { test: 1200, extraneous: "Don't show", currency: "EUR" };
-		return expect(
-			<IntlProvider locale="en">
-				<table>
-					<tbody>
-						<tr>
-							<DataCell columnDef={columnDef} row={row} />
-						</tr>
-					</tbody>
-				</table>
-			</IntlProvider>,
-			"when mounted",
-			"to satisfy",
-			<table>
-				<tbody>
-					<tr>
-						<TableData>€1,200.00</TableData>
-					</tr>
-				</tbody>
-			</table>,
-		);
-	});
-
-	it("renders a cell with type date", () => {
-		const columnDef = { fieldName: "test", type: "date" };
-		const row = {
-			test: "2018-01-23T08:28:46.0000000Z",
-			extraneous: "Don't show",
-		};
-		return expect(
-			<IntlProvider locale="en">
-				<table>
-					<tbody>
-						<tr>
-							<DataCell columnDef={columnDef} row={row} />
-						</tr>
-					</tbody>
-				</table>
-			</IntlProvider>,
-			"when mounted",
-			"to satisfy",
-			<table>
-				<tbody>
-					<tr>
-						<TableData>1/23/2018</TableData>
-					</tr>
-				</tbody>
-			</table>,
-		);
-	});
-
-	it("renders a cell with type datetime", () => {
-		const columnDef = { fieldName: "test", type: "datetime" };
-		const row = {
-			test: "2018-01-23 09:28:46",
-			extraneous: "Don't show",
-		};
-		return expect(
-			<IntlProvider locale="en">
-				<table>
-					<tbody>
-						<tr>
-							<DataCell columnDef={columnDef} row={row} />
-						</tr>
-					</tbody>
-				</table>
-			</IntlProvider>,
-			"when mounted",
-			"to satisfy",
-			<table>
-				<tbody>
-					<tr>
-						<TableData>
-							<>1/23/2018</> <>9:28 AM</>
-						</TableData>
-					</tr>
-				</tbody>
-			</table>,
-		);
-	});
-
-	it("renders a cell with type select", () => {
-		const onChange = () => {};
-		const columnDef = { type: "select", onChange };
-		const row = {
-			test: false,
-			extraneous: "Don't show",
-		};
-		return expect(
-			<table>
-				<tbody>
-					<tr>
-						<DataCell columnDef={columnDef} row={row} rowId="rowIdent" selected />
-					</tr>
-				</tbody>
-			</table>,
-			"when mounted",
-			"to satisfy",
-			<table>
-				<tbody>
-					<tr>
-						<TableData>
-							<Checkbox id="select_rowIdent" value={true} data-row-id="rowIdent" onChange={onChange} />
-						</TableData>
-					</tr>
-				</tbody>
-			</table>,
-		);
-	});
-
-	it("renders a cell with type switch", () => {
-		const onChange = () => {};
-		const columnDef = {
-			fieldName: "test",
-			type: "switch",
-			switch: { onColor: "#ff00ff" },
-			onChange,
-		};
-		const row = {
-			test: false,
-			extraneous: "Don't show",
-		};
-		return expect(
-			<table>
-				<tbody>
-					<tr>
-						<DataCell columnDef={columnDef} row={row} rowId="rowIdent" />
-					</tr>
-				</tbody>
-			</table>,
-			"when mounted",
-			"to satisfy",
-			<table>
-				<tbody>
-					<tr>
-						<TableData>
-							<Switch id="switch0" value={false} data-row-id="rowIdent" onColor="#ff00ff" onChange={onChange} />
-						</TableData>
-					</tr>
-				</tbody>
-			</table>,
-		);
-	});
-
-	it("renders a cell with a value transformer", () => {
-		const columnDef = {
-			fieldName: "test",
-			transform: val => val.toUpperCase(),
-		};
-		const row = { test: "text", extraneous: "Don't show" };
-		return expect(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<table>
-					<tbody>
-						<tr>
-							<DataCell columnDef={columnDef} row={row} />
-						</tr>
-					</tbody>
-				</table>
-			</Provider>,
-			"when mounted",
-			"to satisfy",
-			<table>
-				<tbody>
-					<tr>
-						<TableData>TEXT</TableData>
-					</tr>
-				</tbody>
-			</table>,
-		);
-	});
-
-	it("renders a cell with type custom", () => {
-		const columnDef = {
-			type: "custom",
-			component: TestComp,
-		};
-		const row = { test: "A text", extraneous: "Don't show" };
-		return expect(
-			<table>
-				<tbody>
-					<tr>
-						<DataCell columnDef={columnDef} row={row} />
-					</tr>
-				</tbody>
-			</table>,
-			"when mounted",
-			"to satisfy",
-			<table>
-				<tbody>
-					<tr>
-						<TableData>
-							<TestComp test="A text" extraneous="Don't show" />
-						</TableData>
-					</tr>
-				</tbody>
-			</table>,
-		);
-	});
-});

package/src/components/List/HeadCell.js

@@ -1,105 +0,0 @@
-import React from "react";
-import styled, { css } from "styled-components";
-import Text from "../Text";
-import Checkbox from "../Checkbox";
-import { ifFlag, getThemeProp } from "../../utils";
-
-export const UpMark = styled.div`
-	display: inline-block;
-	margin: 0.05em;
-	margin-left: 0.5em;
-	height: 0;
-	border: 0.25em solid transparent;
-	border-top-width: 0;
-	border-bottom-color: ${getThemeProp(["colors", "border"], "#999999")};
-`;
-
-export const DownMark = styled.div`
-	display: inline-block;
-	margin: 0.05em;
-	margin-left: 0.5em;
-	height: 0;
-	border: 0.25em solid transparent;
-	border-bottom-width: 0;
-	border-top-color: ${getThemeProp(["colors", "border"], "#999999")};
-`;
-
-export const MarkBox = styled.div`
-	display: flex;
-	flex-direction: column;
-	justify-content: space-around;
-`;
-
-export const SortMark = ({ direction }) => {
-	switch (direction) {
-		case "desc":
-			return <DownMark />;
-		case "asc":
-			return <UpMark />;
-		default:
-			return (
-				<MarkBox>
-					<UpMark />
-					<DownMark />
-				</MarkBox>
-			);
-	}
-};
-
-export const TableHeader = styled.th`
-	background-color: #f7f7f7;
-	position: sticky;
-	top: 0;
-	z-index: 10;
-	padding: 0;
-
-	${ifFlag(
-		"select",
-		css`
-			width: 56px;
-		`,
-	)};
-
-	${ifFlag(
-		"width",
-		css`
-			width: ${props => props.width + ""};
-		`,
-	)};
-`;
-
-export const HeadBox = styled.div`
-	display: flex;
-	align-items: center;
-	height: 20px;
-	width: calc(100% - 40px);
-	padding: 10px 20px;
-	border-bottom: 1px solid ${getThemeProp(["colors", "borderLight"], "#cccccc")};
-
-	& > span {
-		overflow-x: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-	}
-`;
-
-const HeadCell = ({ columnDef, rowIds = [], allSelected }) => (
-	<TableHeader onClick={columnDef.sort} select={columnDef.type === "select"} width={columnDef.width}>
-		<HeadBox>
-			{columnDef.type === "select" ? (
-				<Checkbox
-					id="select_headRow"
-					value={!!allSelected}
-					onChange={() => columnDef.onChange(allSelected ? [] : rowIds)}
-				/>
-			) : columnDef.label ? (
-				[
-					<Text key="msg" message={columnDef.label} />,
-					columnDef.sort ? <SortMark key="sort" direction={columnDef.sortDirection} /> : null,
-				]
-			) : null}
-		</HeadBox>
-	</TableHeader>
-);
-
-export default HeadCell;