ffr-components/es/panel/Panel.js

Fiori styled UI components

import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/esm/inherits";
// Import React Framework
import React, { Component } from 'react';
// Import Fundamental React Components
import { Panel as FPanel } from 'fundamental-react/Panel'; // Import Customized Components

import Icon from '../icon';
import "./style.css";
import "../theme/theme.css";

var Panel =
/*#__PURE__*/
function (_Component) {
  _inherits(Panel, _Component);

  function Panel(props) {
    var _this;

    _classCallCheck(this, Panel);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(Panel).call(this, props));
    _this.state = {
      shrink: false
    };
    _this.toUpper = _this.toUpper.bind(_assertThisInitialized(_this));
    _this.toLower = _this.toLower.bind(_assertThisInitialized(_this));
    _this.handleTouch = _this.handleTouch.bind(_assertThisInitialized(_this));
    _this.handleScroll = _this.handleScroll.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(Panel, [{
    key: "toUpper",
    value: function toUpper(e) {
      var _this2 = this;

      if (e.type === 'keyup' && Panel.keyCode.indexOf(e.keyCode) === -1) return;
      var filterDom = e.currentTarget.parentNode;
      if (!filterDom) return;
      filterDom.style.width = "".concat(filterDom.offsetWidth, "px");
      filterDom.style.height = "".concat(filterDom.offsetHeight, "px");
      setTimeout(function () {
        _this2.setState({
          shrink: true
        });
      }, 50);
    }
  }, {
    key: "toLower",
    value: function toLower(e) {
      if (e.type === 'keyup' && Panel.keyCode.indexOf(e.keyCode) === -1) return;
      this.setState({
        shrink: false
      });
    } // todo : Temporarily retained

  }, {
    key: "handleTouch",
    value: function handleTouch(e) {
      var pageY = e.changedTouches[0]['clientY'];
      var coordinate = Panel.coordinate;
      var shrink = !(coordinate && pageY > coordinate);
      this.setState({
        shrink: shrink
      });
      Panel.coordinate = pageY;
    }
  }, {
    key: "handleScroll",
    value: function handleScroll(e) {
      var childNodes = _toConsumableArray(e.currentTarget.childNodes);

      var filterFunc = function filterFunc(x) {
        return x.className === 'fd-panel__filters';
      };

      var filterDom = childNodes.filter(filterFunc);
      if (!filterDom.length) return;
      filterDom = filterDom[0];
      var scrollTop = e.currentTarget.scrollTop;
      if (scrollTop === 0) return;
      var filterHeight = filterDom.offsetHeight;
      var shrink = !!(scrollTop > filterHeight);
      this.setState({
        shrink: shrink
      });
    }
  }, {
    key: "render",
    value: function render() {
      var shrink = this.state.shrink;
      var _this$props = this.props,
          className = _this$props.className,
          head = _this$props.head,
          filter = _this$props.filter,
          body = _this$props.body,
          footer = _this$props.footer,
          bodyId = _this$props.bodyId,
          id = _this$props.id;
      return React.createElement("div", {
        className: "fd-doc__margin--panel enhancedPanel ".concat(className),
        role: "main",
        id: id
      }, React.createElement(FPanel, {
        className: shrink ? 'shrink' : ''
      }, head ? React.createElement(FPanel.Header, null, head, shrink ? React.createElement(Icon, {
        "data-type": 0,
        onClick: this.toLower,
        onKeyUp: this.toLower,
        tabIndex: "0",
        className: "shrink dropDown",
        glyph: "dropdown",
        size: "xl"
      }) : null) : null, React.createElement("div", {
        className: "fd-panel__lower",
        onScroll: this.handleScroll
      }, filter ? React.createElement(FPanel.Filters, null, !shrink ? React.createElement("div", {
        className: "pullUp",
        "aria-label": "pull up",
        tabIndex: "0",
        role: "button",
        onClick: this.toUpper,
        onKeyUp: this.toUpper
      }, React.createElement(Icon, {
        glyph: "dropdown",
        size: "xl"
      })) : null, filter) : null, body ? React.createElement(FPanel.Body, {
        id: bodyId
      }, body) : null, footer ? React.createElement(FPanel.Footer, null, footer) : null)));
    }
  }]);

  return Panel;
}(Component);

Panel.defaultProps = {
  className: '',
  bodyId: 1,
  head: null,
  filter: null,
  body: null,
  footer: null
};
Panel.coordinate = null;
Panel.scrollTop = null;
Panel.keyCode = [13, 32];
export { Panel as default };