@vtex/styleguide/lib/EXPERIMENTAL_Table/Sections/Cell.js

> VTEX Styleguide React components ([Docs](https://vtex.github.io/styleguide))

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CellTag = undefined;

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _classnames = require("classnames");

var _classnames2 = _interopRequireDefault(_classnames);

var _omit = require("lodash/omit");

var _omit2 = _interopRequireDefault(_omit);

var _index = require("../../icon/CaretDown/index.js");

var _index2 = _interopRequireDefault(_index);

var _index3 = require("../../icon/CaretUp/index.js");

var _index4 = _interopRequireDefault(_index3);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var HoverContext = (0, _react.createContext)(false);
var CellTag = exports.CellTag = undefined;

(function (CellTag) {
  CellTag["Td"] = "td";
  CellTag["Th"] = "th";
})(CellTag || (exports.CellTag = CellTag = {}));

var HoverableCell = (0, _react.forwardRef)(function (_ref, ref) {
  var children = _ref.children,
      Tag = _ref.tag,
      props = _objectWithoutPropertiesLoose(_ref, ["children", "tag"]);

  var _useHover = useHover(),
      hover = _useHover.hover,
      events = _objectWithoutPropertiesLoose(_useHover, ["hover"]);

  return _react2.default.createElement(Tag, _extends({}, events, props, {
    ref: ref
  }), _react2.default.createElement(HoverProvider, {
    value: hover
  }, children));
});
HoverableCell.displayName = 'HoverableCell';
var DefaultCell = (0, _react.forwardRef)(function (_ref2, ref) {
  var children = _ref2.children,
      Tag = _ref2.tag,
      props = _objectWithoutPropertiesLoose(_ref2, ["children", "tag"]);

  return _react2.default.createElement(Tag, _extends({
    ref: ref
  }, props), children);
});
DefaultCell.displayName = 'DefaultCell';

function Cell(_ref3, ref) {
  var children = _ref3.children,
      onClick = _ref3.onClick,
      classNameProp = _ref3.className,
      _ref3$width = _ref3.width,
      width = _ref3$width === void 0 ? 0 : _ref3$width,
      _ref3$height = _ref3.height,
      height = _ref3$height === void 0 ? 0 : _ref3$height,
      _ref3$sorting = _ref3.sorting,
      sorting = _ref3$sorting === void 0 ? false : _ref3$sorting,
      _ref3$sortable = _ref3.sortable,
      sortable = _ref3$sortable === void 0 ? false : _ref3$sortable,
      _ref3$sticky = _ref3.sticky,
      sticky = _ref3$sticky === void 0 ? false : _ref3$sticky,
      _ref3$header = _ref3.header,
      header = _ref3$header === void 0 ? false : _ref3$header,
      _ref3$style = _ref3.style,
      style = _ref3$style === void 0 ? {} : _ref3$style,
      props = _objectWithoutPropertiesLoose(_ref3, ["children", "onClick", "className", "width", "height", "sorting", "sortable", "sticky", "header", "style"]);

  var Container = sortable ? HoverableCell : DefaultCell;

  var containerProps = _extends({
    onClick: onClick,
    tag: header ? CellTag.Th : CellTag.Td,
    className: (0, _classnames2.default)('v-mid pv0 tl bb b--muted-4', classNameProp, {
      ph3: width !== '0%',
      pointer: onClick,
      'c-on-base': sorting,
      'bg-base bt': header,
      'top-0 z3': sticky && header,
      z1: !sticky
    }),
    style: _extends({
      position: sticky ? 'sticky' : 'static',
      width: width,
      height: height,
      transition: 'width 500ms'
    }, style)
  }, (0, _omit2.default)(props, ['ref']));

  return _react2.default.createElement(Container, _extends({
    ref: ref
  }, containerProps), children);
}

function HoverProvider(_ref4) {
  var children = _ref4.children,
      value = _ref4.value;
  return _react2.default.createElement(HoverContext.Provider, {
    value: value
  }, children);
}

function useHover(init) {
  if (init === void 0) {
    init = false;
  }

  var _useState = (0, _react.useState)(init),
      hover = _useState[0],
      setHover = _useState[1];

  var onMouseEnter = function onMouseEnter() {
    return setHover(true);
  };

  var onMouseLeave = function onMouseLeave() {
    return setHover(false);
  };

  return {
    hover: hover,
    onMouseEnter: onMouseEnter,
    onMouseLeave: onMouseLeave
  };
}

function Eyesight(_ref5) {
  var children = _ref5.children,
      visible = _ref5.visible;
  var SUFIX_GAP = 0.5;
  var className = (0, _classnames2.default)({
    'o-0': !visible
  }, 'inline');
  return _react2.default.createElement("span", {
    className: className,
    style: {
      marginLeft: SUFIX_GAP + "rem"
    }
  }, children);
}

function Suffix(_ref6) {
  var sorting = _ref6.sorting,
      ascending = _ref6.ascending;
  var Caret = ascending ? _index2.default : _index4.default;
  var hover = (0, _react.useContext)(HoverContext);
  return _react2.default.createElement(Eyesight, {
    visible: sorting || hover
  }, _react2.default.createElement(Caret, {
    className: "ml2",
    size: 10
  }));
}

var ForwardedCell = (0, _react.forwardRef)(Cell);
ForwardedCell.Suffix = Suffix;
exports.default = ForwardedCell;