ffr-components/es/card/Card.js

Fiori styled UI components

import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import classnames from 'classnames';
import React, { useState, useRef } from 'react';
import Button from '../button';
import "./style.css";
import "../theme/theme.css";

var Card = function Card(_ref) {
  var toggleExpand = _ref.toggleExpand,
      renderTitle = _ref.renderTitle,
      renderBody = _ref.renderBody,
      expandable = _ref.expandable,
      className = _ref.className,
      _ref$titleClass = _ref.titleClass,
      titleClass = _ref$titleClass === void 0 ? '' : _ref$titleClass,
      _ref$bodyClass = _ref.bodyClass,
      bodyClass = _ref$bodyClass === void 0 ? '' : _ref$bodyClass,
      rest = _objectWithoutProperties(_ref, ["toggleExpand", "renderTitle", "renderBody", "expandable", "className", "titleClass", "bodyClass"]);

  var _useState = useState(true),
      _useState2 = _slicedToArray(_useState, 2),
      expand = _useState2[0],
      setExpand = _useState2[1];

  var _useState3 = useState(-1),
      _useState4 = _slicedToArray(_useState3, 2),
      bodyHeight = _useState4[0],
      setBodyHeight = _useState4[1];

  var bodyRef = useRef();
  var originBodyHeight = useRef();

  var handleExpand = function handleExpand(e) {
    var height = 0;

    if (expand) {
      var current = bodyRef.current;
      originBodyHeight.current = Math.max(current.clientHeight, current.scrollHeight);
      setBodyHeight(originBodyHeight.current);
    } else {
      height = originBodyHeight.current;
    }

    var shouldExpand = !expand;
    setTimeout(function () {
      setBodyHeight(height);
      setExpand(shouldExpand);

      if (toggleExpand) {
        toggleExpand(shouldExpand);
      }
    }, 100);
  };

  var animationEnd = useRef(function () {
    var current = bodyRef.current;
    var currentHeight = current.clientHeight;
    var styleHeight = current.style.height;

    if (currentHeight !== 0 && styleHeight && styleHeight.length > 0) {
      setBodyHeight('auto');
    }
  });
  var classes = classnames('ffr-card', className, {
    'ffr-card-expand': expand
  });
  var titleClasses = classnames('ffr-card-title', titleClass);
  var bodyClasses = classnames('ffr-card-body', bodyClass);
  var bodyStyle = bodyHeight >= 0 ? {
    height: bodyHeight
  } : {};
  return React.createElement("div", _extends({
    className: classes
  }, rest), React.createElement("div", {
    className: titleClasses
  }, expandable && React.createElement("div", {
    className: "ffr-card-toggle-wrap"
  }, React.createElement(Button, {
    glyph: "navigation-right-arrow",
    option: "light",
    onClick: handleExpand,
    className: "ffr-card-toggle"
  })), renderTitle()), React.createElement("div", {
    className: bodyClasses,
    ref: bodyRef,
    style: bodyStyle,
    onTransitionEnd: animationEnd.current
  }, renderBody()));
};

Card.defaultProps = {
  expandable: false,
  renderTitle: function renderTitle() {},
  renderBody: function renderBody() {}
};
Card.displayName = 'Card';
export default Card;