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

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

import _extends from "babel-runtime/helpers/extends";
import _classCallCheck from "babel-runtime/helpers/classCallCheck";
import _createClass from "babel-runtime/helpers/createClass";
import _possibleConstructorReturn from "babel-runtime/helpers/possibleConstructorReturn";
import _inherits from "babel-runtime/helpers/inherits";
import _taggedTemplateLiteral from "babel-runtime/helpers/taggedTemplateLiteral";

var _templateObject = _taggedTemplateLiteral(["\n\tborder-collapse: seperate;\n\tborder: 1px solid ", ";\n\tbackground: ", ";\n\tborder-radius: 3px;\n\tborder-spacing: 0;\n"], ["\n\tborder-collapse: seperate;\n\tborder: 1px solid ", ";\n\tbackground: ", ";\n\tborder-radius: 3px;\n\tborder-spacing: 0;\n"]),
    _templateObject2 = _taggedTemplateLiteral(["\n\topacity: ", ";\n\tfont-weight: ", ";\n\n\t&:first-child {\n\t\tth,\n\t\ttd {\n\t\t\t&:first-child {\n\t\t\t\tborder-top-left-radius: 3px;\n\t\t\t}\n\n\t\t\t&:last-child {\n\t\t\t\tborder-top-right-radius: 3px;\n\t\t\t}\n\t\t}\n\t}\n\n\t&:last-child {\n\t\tth,\n\t\ttd {\n\t\t\t&:first-child {\n\t\t\t\tborder-bottom-left-radius: 3px;\n\t\t\t}\n\n\t\t\t&:last-child {\n\t\t\t\tborder-bottom-right-radius: 3px;\n\t\t\t}\n\t\t}\n\t}\n\n\t&:nth-child(2n + 1) {\n\t\tbackground: ", ";\n\t}\n"], ["\n\topacity: ", ";\n\tfont-weight: ", ";\n\n\t&:first-child {\n\t\tth,\n\t\ttd {\n\t\t\t&:first-child {\n\t\t\t\tborder-top-left-radius: 3px;\n\t\t\t}\n\n\t\t\t&:last-child {\n\t\t\t\tborder-top-right-radius: 3px;\n\t\t\t}\n\t\t}\n\t}\n\n\t&:last-child {\n\t\tth,\n\t\ttd {\n\t\t\t&:first-child {\n\t\t\t\tborder-bottom-left-radius: 3px;\n\t\t\t}\n\n\t\t\t&:last-child {\n\t\t\t\tborder-bottom-right-radius: 3px;\n\t\t\t}\n\t\t}\n\t}\n\n\t&:nth-child(2n + 1) {\n\t\tbackground: ", ";\n\t}\n"]),
    _templateObject3 = _taggedTemplateLiteral(["\n\tpadding: ", "em ", "em;\n\n\t&:hover {\n\t\tbackground: ", ";\n\t}\n"], ["\n\tpadding: ", "em ", "em;\n\n\t&:hover {\n\t\tbackground: ", ";\n\t}\n"]),
    _templateObject4 = _taggedTemplateLiteral(["\n\tfont-weight: bold;\n\ttext-align: left;\n\tbackground: ", ";\n\n\t&:hover {\n\t\tbackground: ", ";\n\t}\t\n"], ["\n\tfont-weight: bold;\n\ttext-align: left;\n\tbackground: ", ";\n\n\t&:hover {\n\t\tbackground: ", ";\n\t}\t\n"]);

import React from "react";
import * as R from "ramda";
import styled from "styled-components";

import { getPaddingVertical, getPaddingHorizontal } from "../getters";

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

var getHalfPaddingVertical = R.pipe(getPaddingVertical, R.multiply(0.5));
var getHalfPaddingHorizontal = R.pipe(getPaddingHorizontal, R.multiply(0.5));

var getGray = R.path(["theme", "colors", "gray"]);
var getDarkGray = R.path(["theme", "colors", "darkgray"]);
var getMidGray = R.path(["theme", "colors", "midgray"]);

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

var TableBody = styled.table(_templateObject, R.path(["theme", "colors", "gray"]), R.path(["theme", "colors", "lightgray"]));

var TableRow = styled.tr(_templateObject2, function (props) {
	return props.visible === false ? 0.5 : 1;
}, function (props) {
	return props.bold ? "bold" : "normal";
}, getMidGray);

var TableCell = styled.td(_templateObject3, getHalfPaddingVertical, getHalfPaddingHorizontal, getGray);

var TableHeaderCell = TableCell.withComponent("th").extend(_templateObject4, getGray, getDarkGray);

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

var Table = function (_React$Component) {
	_inherits(Table, _React$Component);

	function Table() {
		_classCallCheck(this, Table);

		return _possibleConstructorReturn(this, (Table.__proto__ || Object.getPrototypeOf(Table)).apply(this, arguments));
	}

	_createClass(Table, [{
		key: "render",
		value: function render() {
			return React.createElement(
				TableBody,
				null,
				React.createElement(
					"tbody",
					null,
					this.props.children
				)
			);
		}
	}]);

	return Table;
}(React.Component);

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

Table.HeaderRow = function (props) {
	return React.createElement(
		TableRow,
		_extends({ bold: true }, props),
		React.Children.map(props.children, function (child) {
			return React.cloneElement(child, {
				inHeader: true
			});
		})
	);
};

Table.Row = function (props) {
	return React.createElement(TableRow, props);
};

Table.Cell = function (props) {
	return props.inHeader ? React.createElement(TableHeaderCell, props) : React.createElement(TableCell, props);
};

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

export default Table;