@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";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

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 _useRandomId = require("../hooks/useRandomId");

var _useBoundingRect = _interopRequireDefault(require("../hooks/useBoundingRect"));

const AnimatedIcon = (0, _styledComponents.default)(_ChevronDown.default).withConfig({
  displayName: "Collapse__AnimatedIcon",
  componentId: "sc-1h9d3np-0"
})(["", ""], ({
  theme
}) => (0, _styledComponents.css)(["transition:transform ", " ease-in-out;", ";"], theme.orbit.durationFast, ({
  expanded
}) => expanded && (0, _styledComponents.css)(["transform:rotate(180deg);"]))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

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

const StyledCollapse = _styledComponents.default.div.withConfig({
  displayName: "Collapse__StyledCollapse",
  componentId: "sc-1h9d3np-1"
})(["", ""], ({
  theme
}) => (0, _styledComponents.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.default
};

const StyledCollapseLabel = _styledComponents.default.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.default
};

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


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

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

const Collapse = ({
  initialExpanded = false,
  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] = (0, _useBoundingRect.default)({
    height: expanded ? null : 0
  });
  const randomId = (0, _useRandomId.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.default, {
    justify: "between",
    align: "center"
  }, /*#__PURE__*/React.createElement(_Heading.default, {
    type: "title4"
  }, label), /*#__PURE__*/React.createElement(_Stack.default, {
    inline: true,
    grow: false,
    align: "center",
    spacing: "small"
  }, /*#__PURE__*/React.createElement(StyledActionsWrapper, {
    onClick: ev => {
      ev.stopPropagation();
    }
  }, actions), /*#__PURE__*/React.createElement(_ButtonLink.default, {
    iconLeft: /*#__PURE__*/React.createElement(AnimatedIcon, {
      color: "secondary",
      expanded: expanded
    }),
    size: "small",
    type: "secondary",
    ariaLabelledby: labelID,
    ariaExpanded: expanded,
    ariaControls: slideID
  })))), /*#__PURE__*/React.createElement(_Slide.default, {
    maxHeight: height,
    expanded: expanded,
    id: slideID,
    ariaLabelledBy: labelID
  }, /*#__PURE__*/React.createElement(StyledCollapseChildren, {
    ref: node
  }, children)));
};

var _default = Collapse;
exports.default = _default;