@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 * 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";
const AnimatedIcon = styled(ChevronDown).withConfig({
  displayName: "Collapse__AnimatedIcon",
  componentId: "sc-1h9d3np-0"
})(["", ""], ({
  theme
}) => css(["transition:transform ", " ease-in-out;", ";"], theme.orbit.durationFast, ({
  expanded
}) => expanded && css(["transform:rotate(180deg);"]))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

AnimatedIcon.defaultProps = {
  theme: defaultTheme
};
const StyledCollapse = styled.div.withConfig({
  displayName: "Collapse__StyledCollapse",
  componentId: "sc-1h9d3np-1"
})(["", ""], ({
  theme
}) => css(["width:100%;display:block;border-bottom:1px solid ", ";padding-bottom:", ";margin-bottom:", ";:last-child,:only-child{border:0;margin:0;}"], theme.orbit.paletteCloudNormal, theme.orbit.spaceSmall, theme.orbit.spaceMedium)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

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

StyledCollapseLabel.defaultProps = {
  theme: defaultTheme
};
const StyledCollapseChildren = styled.div.withConfig({
  displayName: "Collapse__StyledCollapseChildren",
  componentId: "sc-1h9d3np-3"
})(["", ""], ({
  theme
}) => css(["margin:", " 0;"], theme.orbit.spaceSmall)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledCollapseChildren.defaultProps = {
  theme: defaultTheme
};
const StyledActionsWrapper = styled.div.withConfig({
  displayName: "Collapse__StyledActionsWrapper",
  componentId: "sc-1h9d3np-4"
})(["display:flex;align-items:center;"]);

const Collapse = ({
  initialExpanded = false,
  customLabel,
  expanded: expandedProp,
  label,
  children,
  dataTest,
  onClick,
  actions
}) => {
  const isControlledComponent = React.useMemo(() => expandedProp != null, [expandedProp]);
  const [expandedState, setExpandedState] = React.useState(isControlledComponent ? expandedProp : initialExpanded);
  const expanded = isControlledComponent ? expandedProp : expandedState;
  const [{
    height
  }, node] = useBoundingRect({
    height: expanded ? null : 0
  });
  const randomId = useRandomIdSeed();
  const slideID = randomId("slideID");
  const labelID = randomId("labelID");
  const handleClick = React.useCallback(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"
  }, label && !customLabel && /*#__PURE__*/React.createElement(Heading, {
    type: "title4"
  }, label), customLabel, /*#__PURE__*/React.createElement(Stack, {
    inline: true,
    grow: false,
    align: "center",
    spacing: "small"
  }, /*#__PURE__*/React.createElement(StyledActionsWrapper, {
    onClick: ev => {
      ev.stopPropagation();
    }
  }, actions), /*#__PURE__*/React.createElement(ButtonLink, {
    iconLeft: /*#__PURE__*/React.createElement(AnimatedIcon, {
      color: "secondary",
      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;