@kiwicom/orbit-components/lib/Collapse/index.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 _Heading = _interopRequireDefault(require("../Heading"));

var _Stack = _interopRequireDefault(require("../Stack"));

var _ButtonLink = _interopRequireDefault(require("../ButtonLink"));

var _ChevronDown = _interopRequireDefault(require("../icons/ChevronDown"));

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

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

var _randomID = _interopRequireDefault(require("../utils/randomID"));

var _useTranslate = _interopRequireDefault(require("../hooks/useTranslate"));

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 AnimatedIcon = (0, _styledComponents.default)(_ChevronDown.default).withConfig({
  displayName: "Collapse__AnimatedIcon",
  componentId: "x5d7nf-0"
})(["transition:transform ", " ease-in-out;", ";"], function (_ref) {
  var theme = _ref.theme;
  return theme.orbit.durationFast;
}, function (_ref2) {
  var expanded = _ref2.expanded;
  return expanded && (0, _styledComponents.css)(["transform:rotate(180deg);"]);
});
AnimatedIcon.defaultProps = {
  theme: _defaultTheme.default
};

var StyledCollapse = _styledComponents.default.div.withConfig({
  displayName: "Collapse__StyledCollapse",
  componentId: "x5d7nf-1"
})(["width:100%;display:block;border-bottom:1px solid ", ";padding-bottom:", ";margin-bottom:", ";:last-child,:only-child{border:0;margin:0;}"], function (_ref3) {
  var theme = _ref3.theme;
  return theme.orbit.paletteCloudNormal;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.orbit.spaceMedium;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.orbit.spaceMedium;
});

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

var StyledCollapseLabel = _styledComponents.default.div.withConfig({
  displayName: "Collapse__StyledCollapseLabel",
  componentId: "x5d7nf-2"
})(["width:100%;display:block;cursor:pointer;"]);

var StyledCollapseChildren = _styledComponents.default.div.withConfig({
  displayName: "Collapse__StyledCollapseChildren",
  componentId: "x5d7nf-3"
})(["margin-top:", ";"], function (_ref6) {
  var theme = _ref6.theme;
  return theme.orbit.spaceXSmall;
});

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

var StyledActionsWrapper = _styledComponents.default.div.withConfig({
  displayName: "Collapse__StyledActionsWrapper",
  componentId: "x5d7nf-4"
})(["display:flex;align-items:center;"]);

var Collapse = function Collapse(_ref7) {
  var _ref7$initialExpanded = _ref7.initialExpanded,
      initialExpanded = _ref7$initialExpanded === void 0 ? false : _ref7$initialExpanded,
      expandedProp = _ref7.expanded,
      label = _ref7.label,
      children = _ref7.children,
      dataTest = _ref7.dataTest,
      onClick = _ref7.onClick,
      actions = _ref7.actions;
  var isControlledComponent = React.useMemo(function () {
    return expandedProp != null;
  }, [expandedProp]);

  var _React$useState = React.useState(isControlledComponent ? expandedProp : initialExpanded),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      expandedState = _React$useState2[0],
      setExpandedState = _React$useState2[1];

  var expanded = isControlledComponent ? expandedProp : expandedState;

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

  var node = React.useRef(null);
  var translate = (0, _useTranslate.default)();
  React.useEffect(function () {
    var calculateHeight = function calculateHeight() {
      if (node && node.current) {
        var _node$current$getBoun = node.current.getBoundingClientRect(),
            height = _node$current$getBoun.height;

        setContentHeight(height);
      }
    };

    calculateHeight();
    window.addEventListener("resize", calculateHeight);
    return function () {
      window.removeEventListener("resize", calculateHeight);
    };
  }, []);
  var slideID = React.useMemo(function () {
    return (0, _randomID.default)("slideID");
  }, []);
  var labelID = React.useMemo(function () {
    return (0, _randomID.default)("labelID");
  }, []);
  var handleClick = React.useCallback(function (event) {
    if (!isControlledComponent) {
      if (onClick) {
        onClick(event, !expanded);
      }

      setExpandedState(!expanded);
    } else if (onClick) {
      onClick(event, !expanded);
    }
  }, [expanded, isControlledComponent, onClick]);
  return React.createElement(StyledCollapse, {
    "data-test": dataTest
  }, React.createElement(StyledCollapseLabel, {
    onClick: handleClick,
    role: "button",
    "aria-expanded": expanded,
    "aria-controls": slideID,
    id: labelID
  }, React.createElement(_Stack.default, {
    justify: "between",
    align: "center"
  }, React.createElement(_Heading.default, {
    type: "title4",
    element: "div"
  }, label), React.createElement(_Stack.default, {
    inline: true,
    grow: false,
    align: "center",
    spacing: "compact"
  }, React.createElement(StyledActionsWrapper, {
    onClick: function onClick(ev) {
      ev.stopPropagation();
    }
  }, actions), React.createElement(_ButtonLink.default, {
    iconLeft: React.createElement(AnimatedIcon, {
      expanded: expanded
    }),
    transparent: true,
    size: "small",
    type: "secondary",
    title: translate("drawer_hide")
  })))), React.createElement(_Slide.default, {
    maxHeight: contentHeight,
    expanded: expanded,
    id: slideID,
    ariaLabelledBy: labelID
  }, React.createElement(StyledCollapseChildren, {
    ref: node
  }, children)));
};

var _default = Collapse;
exports.default = _default;