@kiwicom/orbit-components/es/Collapse/index.js

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

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import * as React from "react";
import styled, { css } from "styled-components";
import Heading from "../Heading";
import Stack from "../Stack";
import ButtonLink from "../ButtonLink";
import ChevronDown from "../icons/ChevronDown";
import Slide from "../utils/Slide";
import defaultTheme from "../defaultTheme";
import { useRandomIdSeed } from "../hooks/useRandomId";
import useBoundingRect from "../hooks/useBoundingRect";
var AnimatedIcon = styled(ChevronDown).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 && css(["transform:rotate(180deg);"]);
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

AnimatedIcon.defaultProps = {
  theme: defaultTheme
};
var StyledCollapse = styled.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.spaceSmall;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.orbit.spaceMedium;
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledCollapse.defaultProps = {
  theme: defaultTheme
};
var StyledCollapseLabel = styled.div.withConfig({
  displayName: "Collapse__StyledCollapseLabel",
  componentId: "x5d7nf-2"
})(["width:100%;display:block;cursor:pointer;"]); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledCollapseLabel.defaultProps = {
  theme: defaultTheme
};
var StyledCollapseChildren = styled.div.withConfig({
  displayName: "Collapse__StyledCollapseChildren",
  componentId: "x5d7nf-3"
})(["margin:", " 0;"], function (_ref6) {
  var theme = _ref6.theme;
  return theme.orbit.spaceSmall;
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledCollapseChildren.defaultProps = {
  theme: defaultTheme
};
var StyledActionsWrapper = styled.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 _useBoundingRect = useBoundingRect({
    height: expanded ? null : 0
  }),
      _useBoundingRect2 = _slicedToArray(_useBoundingRect, 2),
      height = _useBoundingRect2[0].height,
      node = _useBoundingRect2[1];

  var randomId = useRandomIdSeed();
  var slideID = randomId("slideID");
  var labelID = randomId("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 /*#__PURE__*/React.createElement(StyledCollapse, {
    "data-test": dataTest
  }, /*#__PURE__*/React.createElement(StyledCollapseLabel, {
    onClick: handleClick,
    role: "button",
    id: labelID
  }, /*#__PURE__*/React.createElement(Stack, {
    justify: "between",
    align: "center"
  }, /*#__PURE__*/React.createElement(Heading, {
    type: "title4"
  }, label), /*#__PURE__*/React.createElement(Stack, {
    inline: true,
    grow: false,
    align: "center",
    spacing: "small"
  }, /*#__PURE__*/React.createElement(StyledActionsWrapper, {
    onClick: function onClick(ev) {
      ev.stopPropagation();
    }
  }, actions), /*#__PURE__*/React.createElement(ButtonLink, {
    iconLeft: /*#__PURE__*/React.createElement(AnimatedIcon, {
      expanded: expanded
    }),
    size: "small",
    type: "secondary",
    ariaLabelledby: labelID,
    ariaExpanded: expanded,
    ariaControls: slideID
  })))), /*#__PURE__*/React.createElement(Slide, {
    maxHeight: height,
    expanded: expanded,
    id: slideID,
    ariaLabelledBy: labelID
  }, /*#__PURE__*/React.createElement(StyledCollapseChildren, {
    ref: node
  }, children)));
};

export default Collapse;