ffr-components/es/list-group/ListGroup.js

Fiori styled UI components

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
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 _inherits from "@babel/runtime/helpers/esm/inherits";
// Import React Framework
import React, { Component } from 'react';
import classnames from 'classnames'; // Import Utils

import { KeyCode } from '../utils';

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

  function ListGroup(props) {
    var _this;

    _classCallCheck(this, ListGroup);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(ListGroup).call(this, props));

    _this.assignRef = function (ref) {
      _this.listRef.current = ref;
      var innerRef = _this.props.innerRef;
      if (!innerRef) return;

      if (typeof innerRef === 'function') {
        innerRef(ref);
      } else {
        innerRef.current = ref;
      }
    };

    _this.loadMore = function () {
      var scrollToBottom = _this.props.scrollToBottom;
      scrollToBottom && scrollToBottom();
    };

    _this.checkShowMore = function () {
      var _this$props = _this.props,
          enableMoreBtn = _this$props.enableMoreBtn,
          totalCount = _this$props.totalCount,
          listCount = _this$props.listCount;

      if (listCount < totalCount) {
        var listDom = _this.listRef.current;
        if (!listDom || !enableMoreBtn || !totalCount) return;
        var showMore = _this.state.showMore;
        _this.moreBtnH = _this.moreBtnH || _this.moreBtnRef.current.clientHeight;
        var compareHeight = showMore ? listDom.scrollHeight - _this.moreBtnH : listDom.scrollHeight;

        if (compareHeight <= listDom.clientHeight) {
          if (!showMore) {
            _this.setState({
              showMore: true
            });
          }
        } else {
          if (showMore) {
            _this.setState({
              showMore: false
            });
          }
        }
      }
    };

    _this.handleScroll = function (e) {
      var scrollToBottom = _this.props.scrollToBottom;
      var _e$currentTarget = e.currentTarget,
          scrollTop = _e$currentTarget.scrollTop,
          scrollHeight = _e$currentTarget.scrollHeight,
          clientHeight = _e$currentTarget.clientHeight;

      if (scrollTop + clientHeight >= scrollHeight) {
        scrollToBottom && scrollToBottom();
      }
    };

    _this.handleKeyDown = function (e) {
      var code = e.keyCode;
      if ([KeyCode.UP, KeyCode.DOWN, KeyCode.ENTER].indexOf(code) === -1) return;
      e.preventDefault();
      var handleKeyDown = _this.props.handleKeyDown;
      var target = e.currentTarget;

      var childNodes = _toConsumableArray(target.children);

      if (code === KeyCode.ENTER) {
        var enterTarget = e.target;
        if (enterTarget === target) return;
        var enterIndex = childNodes.findIndex(function (node) {
          return node === enterTarget;
        });

        if (handleKeyDown) {
          handleKeyDown(e, code, enterIndex);
        }
      } else {
        var childLength = childNodes.length;
        if (!childLength) return;
        var currentPos = childNodes.findIndex(function (x) {
          return ~~x.getAttribute('tabIndex') === 0;
        });
        if (currentPos === -1) return;

        if (code === KeyCode.UP) {
          currentPos = currentPos === 0 ? 0 : currentPos - 1;
        } else if (code === KeyCode.DOWN) {
          currentPos = currentPos + 1;
          currentPos = currentPos > childLength - 1 ? childLength - 1 : currentPos;
        }

        var currentDom = childNodes[currentPos];
        currentDom.focus();
        childNodes.splice(currentPos, 1);
        currentDom.setAttribute('tabIndex', 0);
        childNodes.forEach(function (x) {
          return x.setAttribute('tabIndex', -1);
        });

        if (handleKeyDown) {
          handleKeyDown(e, code, currentPos);
        }

        if (currentPos === childLength - 1) {
          _this.loadMore();
        }
      }
    };

    _this.focusToList = function (position) {
      var childNodes = _toConsumableArray(_this.listRef.current.children);

      var target = childNodes[position];

      if (target) {
        target.focus();
        childNodes.filter(function (node) {
          return node.tabIndex === 0;
        }).forEach(function (node) {
          return node.setAttribute('tabIndex', -1);
        });
        target.setAttribute('tabIndex', 0);
      }
    };

    _this.state = {
      showMore: true
    };
    _this.moreBtnH = 0; // this.childRefs = [];

    _this.listRef = React.createRef();
    _this.moreBtnRef = React.createRef();
    return _this;
  }

  _createClass(ListGroup, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.checkShowMore();
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      this.checkShowMore();
    }
  }, {
    key: "render",
    value: function render() {
      var showMore = this.state.showMore;

      var _this$props2 = this.props,
          className = _this$props2.className,
          _this$props2$children = _this$props2.children,
          children = _this$props2$children === void 0 ? [] : _this$props2$children,
          style = _this$props2.style,
          _this$props2$enableMo = _this$props2.enableMoreBtn,
          enableMoreBtn = _this$props2$enableMo === void 0 ? false : _this$props2$enableMo,
          totalCount = _this$props2.totalCount,
          handleKeyDown = _this$props2.handleKeyDown,
          currentSelection = _this$props2.currentSelection,
          rest = _objectWithoutProperties(_this$props2, ["className", "children", "style", "enableMoreBtn", "totalCount", "handleKeyDown", "currentSelection"]);

      var listGroupClasses = classnames('fd-list-group', className);
      var listCount = children.length;
      return React.createElement("ul", _extends({
        role: "presentation",
        ref: this.assignRef,
        onKeyDown: this.handleKeyDown,
        onScroll: this.handleScroll,
        className: listGroupClasses,
        style: style
      }, rest), React.Children.map(children, function (item, inx) {
        var _ref = React.createRef();

        var tabIndex = inx === 0 ? 0 : -1;
        var _props = {
          ref: _ref,
          tabIndex: tabIndex
        };

        if (!item) {
          return null;
        }

        if (String(item.key) === String(currentSelection)) {
          _props.renderSelection = true;
        }

        return React.cloneElement(item, _props);
      }), showMore && enableMoreBtn && totalCount && listCount < totalCount ? // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
      React.createElement("li", {
        ref: this.moreBtnRef,
        className: "ac-content__loadMore",
        onClick: this.loadMore
      }, React.createElement("p", {
        className: "ac-content__more-title"
      }, "More"), React.createElement("p", {
        className: "ac-content__more-summary"
      }, "[ ".concat(listCount, " / ").concat(totalCount, " ]"))) : null);
    }
  }]);

  return ListGroup;
}(Component);

ListGroup.defaultProps = {
  enableMoreBtn: false,
  className: ''
};
export { ListGroup as default };