@kiwicom/orbit-components/lib/Card/CardSection/components/SectionContent.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var React = _interopRequireWildcard(require("react"));

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _defaultTheme = _interopRequireDefault(require("../../../defaultTheme"));

var _Slide = _interopRequireDefault(require("../../../utils/Slide"));

var _mediaQuery = _interopRequireDefault(require("../../../utils/mediaQuery"));

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

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

var StyledCardSectionContent = _styledComponents.default.div.withConfig({
  displayName: "SectionContent__StyledCardSectionContent",
  componentId: "gtsta3-0"
})(["font-family:", ";font-size:", ";line-height:", ";color:", ";width:100%;border-top:", ";padding-top:", ";transition:padding ", " linear,border-top ", " linear;", ""], function (_ref) {
  var theme = _ref.theme;
  return theme.orbit.fontFamily;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.orbit.fontSizeTextNormal;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.orbit.lineHeightTextNormal;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.orbit.colorTextPrimary;
}, function (_ref5) {
  var theme = _ref5.theme,
      expanded = _ref5.expanded,
      noSeparator = _ref5.noSeparator;
  return expanded && !noSeparator ? "1px solid ".concat(theme.orbit.paletteCloudNormal) : "0px solid ".concat(theme.orbit.paletteCloudNormal);
}, function (_ref6) {
  var hasPaddingTop = _ref6.hasPaddingTop,
      theme = _ref6.theme;
  return hasPaddingTop && theme.orbit.spaceMedium;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.orbit.durationFast;
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.orbit.durationFast;
}, _mediaQuery.default.tablet((0, _styledComponents.css)(["padding-top:", ";"], function (_ref9) {
  var theme = _ref9.theme,
      hasPaddingTop = _ref9.hasPaddingTop;
  return hasPaddingTop && theme.orbit.spaceLarge;
})));

StyledCardSectionContent.defaultProps = {
  theme: _defaultTheme.default
};

var SectionContent = function SectionContent(_ref10) {
  var expandable = _ref10.expandable,
      expanded = _ref10.expanded,
      children = _ref10.children,
      noSeparator = _ref10.noSeparator,
      hasPaddingTop = _ref10.hasPaddingTop,
      slideID = _ref10.slideID,
      labelID = _ref10.labelID;
  var ref = React.useRef(null);

  var _React$useState = React.useState(expanded ? null : 0),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      contentHeight = _React$useState2[0],
      setContentHeight = _React$useState2[1];

  React.useEffect(function () {
    var calculateHeight = function calculateHeight() {
      if (ref && ref.current) {
        var _ref$current$getBound = ref.current.getBoundingClientRect(),
            height = _ref$current$getBound.height;

        setContentHeight(height);
      }
    };

    calculateHeight();
    window.addEventListener("resize", calculateHeight);
    return function () {
      window.removeEventListener("resize", calculateHeight);
    };
  }, []);
  return React.createElement(React.Fragment, null, expandable ? React.createElement(_Slide.default, {
    maxHeight: contentHeight,
    expanded: expanded,
    id: slideID,
    ariaLabelledBy: labelID
  }, React.createElement(StyledCardSectionContent, {
    noSeparator: noSeparator,
    ref: ref,
    expanded: expanded,
    hasPaddingTop: hasPaddingTop,
    expandable: expandable
  }, children)) : React.createElement(StyledCardSectionContent, {
    ref: ref,
    hasPaddingTop: hasPaddingTop
  }, children));
};

var _default = SectionContent;
exports.default = _default;