@makeen.io/material-ui-kit/distr/molecules/Table/Components/Header.js

Makeen UI components kit. Based on material-ui.

import _extends from "@babel/runtime/helpers/extends";import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject3() {var data = _taggedTemplateLiteral(["\n  color: ", ";\n  cursor: ", ";\n  & svg {\n    height: 14px;\n    width: auto;\n    margin-left: 2px;\n    margin-top: 2px;\n    margin-bottom: -2px;\n  }\n"]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = _taggedTemplateLiteral(["\n      ", "\n    "]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  flex: 1;\n  height: 48px;\n\n  .explorer-table.table-header {\n    flex: 1;\n    font-weight: normal;\n    color: ", ";\n    text-align: ", ";\n    font-size: 12px;\n  }\n\n  ", "\n"]);_templateObject = function _templateObject() {return data;};return data;}import React from "react";
import TableCell from "@material-ui/core/TableCell";
import ArrowDownwardIcon from "@material-ui/icons/ArrowDownward";
import ArrowUpwardIcon from "@material-ui/icons/ArrowUpward";
import styled, { css } from "styled-components";
var TableHeaderWrapper = styled(function (_ref) {var customStyle = _ref.customStyle,props = _objectWithoutProperties(_ref, ["customStyle"]);return /*#__PURE__*/React.createElement(TableCell, _extends({}, props));})(_templateObject(),









function (props) {return props.theme.palette.text.secondary;},
function (props) {return props.alignment || "center";},



function (props) {
  var customStyle = props.customStyle || "";
  return css(_templateObject2(),
  customStyle);

});

var SortedHeader = styled.div(_templateObject3(),
function (props) {return props.sortMarker ?
  props.theme.palette.infoLight.contrastText :
  props.theme.palette.text.secondary;},
function (props) {return props.sortable ? "pointer" : "auto";});








export default (function (props) {var
    label = props.label,Header = props.Header,_props$component = props.component,component = _props$component === void 0 ? "div" : _props$component,_props$variant = props.variant,variant = _props$variant === void 0 ? "head" : _props$variant,theme = props.theme,customStyle = props.customStyle,alignment = props.alignment,rest = _objectWithoutProperties(props, ["label", "Header", "component", "variant", "theme", "customStyle", "alignment"]);var
    dataKey = rest.dataKey,sortable = rest.sortable,sortBy = rest.sortBy,sortDirection = rest.sortDirection;
  var sortMarker = sortBy === dataKey ? sortDirection === "desc" ? /*#__PURE__*/React.createElement(ArrowDownwardIcon, null) : /*#__PURE__*/React.createElement(ArrowUpwardIcon, null) : null;
  return /*#__PURE__*/React.createElement(TableHeaderWrapper, { theme: theme, variant: variant, component: component, alignment: alignment, customStyle: customStyle }, /*#__PURE__*/
  React.createElement("div", { className: "explorer-table table-header" }, Header ? /*#__PURE__*/React.createElement(Header, _extends({}, props)) : /*#__PURE__*/React.createElement(SortedHeader, { alignment: alignment, sortable: sortable, sortMarker: sortMarker },
  label,
  " ",
  sortMarker)));
});
//# sourceMappingURL=Header.js.map