codogo-react-widgets/lib/components/simpleTable.js

Provides a unified way to access the styling of commonly used widgets across different apps

import _extends from "babel-runtime/helpers/extends";
import _taggedTemplateLiteral from "babel-runtime/helpers/taggedTemplateLiteral";

var _templateObject = _taggedTemplateLiteral(["\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: stretch;\n"], ["\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: stretch;\n"]),
    _templateObject2 = _taggedTemplateLiteral(["\n\tdisplay: flex;\n\tflex-direction: row;\n\tflex-shrink: 0;\n\t", ";\n"], ["\n\tdisplay: flex;\n\tflex-direction: row;\n\tflex-shrink: 0;\n\t", ";\n"]),
    _templateObject3 = _taggedTemplateLiteral(["\n\tborder-bottom: 1px solid ", ";\n\t&:hover {\n\t\tbackground: ", ";\n\t}\n"], ["\n\tborder-bottom: 1px solid ", ";\n\t&:hover {\n\t\tbackground: ", ";\n\t}\n"]),
    _templateObject4 = _taggedTemplateLiteral(["\n\tborder-bottom: 1px solid ", ";\n\tfont-weight: bold;\n"], ["\n\tborder-bottom: 1px solid ", ";\n\tfont-weight: bold;\n"]),
    _templateObject5 = _taggedTemplateLiteral(["\n\theight: 3em;\n\tflex-direction: row;\n\tjustify-content: flex-start;\n\tflex: 1;\n\talign-items: center;\n\tpadding: 0 1em;\n\n\twhite-space: nowrap;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\tmin-width: 0;\n"], ["\n\theight: 3em;\n\tflex-direction: row;\n\tjustify-content: flex-start;\n\tflex: 1;\n\talign-items: center;\n\tpadding: 0 1em;\n\n\twhite-space: nowrap;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\tmin-width: 0;\n"]),
    _templateObject6 = _taggedTemplateLiteral(["\n\tmargin-right: 0.5em;\n"], ["\n\tmargin-right: 0.5em;\n"]);

import React from "react";
import * as R from "ramda";
import styled from "styled-components";
import CloudinaryImage from "./cloudinaryImage";

// --------------------------------------------------

var Table = styled.div(_templateObject);

var Row = styled.div(_templateObject2, function (props) {
	return props.onClick ? "cursor: pointer;" : "";
});

var ContentRow = styled(Row)(_templateObject3, R.path(["theme", "colors", "borders"]), R.path(["theme", "colors", "lightergray"]));

var HeaderRow = styled(Row)(_templateObject4, R.path(["theme", "colors", "black"]));

var Cell = styled.div(_templateObject5);

var RowImageWrapper = styled.div(_templateObject6);

var RowImage = function RowImage(image) {
	return React.createElement(
		RowImageWrapper,
		null,
		React.createElement(CloudinaryImage, _extends({}, image, { height: 32, width: 32 }))
	);
};

var RowCell = function RowCell(props) {
	return React.createElement(
		ContentRow,
		props,
		React.createElement(
			Cell,
			null,
			props.children
		)
	);
};

Table._Row = Row;
Table.Row = ContentRow;
Table.HeaderRow = HeaderRow;
Table.Cell = Cell;
Table.Avatar = RowImage;
Table.RowCell = RowCell;

export default Table;