@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 _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

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 _useBoundingRect3 = _interopRequireDefault(require("../hooks/useBoundingRect"));

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);"]);
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

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.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.default
};

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

var StyledCollapseChildren = _styledComponents.default.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.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 = (0, _slicedToArray2.default)(_React$useState, 2),
      expandedState = _React$useState2[0],
      setExpandedState = _React$useState2[1];

  var expanded = isControlledComponent ? expandedProp : expandedState;

  var _useBoundingRect = (0, _useBoundingRect3.default)({
    height: expanded ? null : 0
  }),
      _useBoundingRect2 = (0, _slicedToArray2.default)(_useBoundingRect, 2),
      height = _useBoundingRect2[0].height,
      node = _useBoundingRect2[1];

  var randomId = (0, _useRandomId.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.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: function onClick(ev) {
      ev.stopPropagation();
    }
  }, actions), /*#__PURE__*/React.createElement(_ButtonLink.default, {
    iconLeft: /*#__PURE__*/React.createElement(AnimatedIcon, {
      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;