react-drilldown/dist/module.js

A flexible drilldown for react

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { isEqual, isEmpty } from 'lodash';

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

function _defineProperties(target, props) {
  for (var i = 0; i < props.length; i++) {
    var descriptor = props[i];
    descriptor.enumerable = descriptor.enumerable || false;
    descriptor.configurable = true;
    if ("value" in descriptor) descriptor.writable = true;
    Object.defineProperty(target, descriptor.key, descriptor);
  }
}

function _createClass(Constructor, protoProps, staticProps) {
  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
  if (staticProps) _defineProperties(Constructor, staticProps);
  return Constructor;
}

function _extends() {
  _extends = Object.assign || function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };

  return _extends.apply(this, arguments);
}

function _inherits(subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function");
  }

  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      writable: true,
      configurable: true
    }
  });
  if (superClass) _setPrototypeOf(subClass, superClass);
}

function _getPrototypeOf(o) {
  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
    return o.__proto__ || Object.getPrototypeOf(o);
  };
  return _getPrototypeOf(o);
}

function _setPrototypeOf(o, p) {
  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
    o.__proto__ = p;
    return o;
  };

  return _setPrototypeOf(o, p);
}

function _isNativeReflectConstruct() {
  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
  if (Reflect.construct.sham) return false;
  if (typeof Proxy === "function") return true;

  try {
    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
    return true;
  } catch (e) {
    return false;
  }
}

function _assertThisInitialized(self) {
  if (self === void 0) {
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  }

  return self;
}

function _possibleConstructorReturn(self, call) {
  if (call && (typeof call === "object" || typeof call === "function")) {
    return call;
  }

  return _assertThisInitialized(self);
}

function _createSuper(Derived) {
  var hasNativeReflectConstruct = _isNativeReflectConstruct();

  return function _createSuperInternal() {
    var Super = _getPrototypeOf(Derived),
        result;

    if (hasNativeReflectConstruct) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

Header.propTypes = {
  content: PropTypes.node,
  onBackClick: PropTypes.func
};
function Header(_ref) {
  var content = _ref.content,
      onBackClick = _ref.onBackClick;
  return /*#__PURE__*/React.createElement("header", {
    className: "Rdd-Header-container"
  }, onBackClick && /*#__PURE__*/React.createElement("button", {
    className: "Rdd-Header-backButton",
    onClick: onBackClick
  }, "Back"), content);
}

var propTypes = {
  items: PropTypes.arrayOf(PropTypes.func).isRequired
};
var defaultProps = {
  items: [],
  staggeredAnimation: false,
  direction: 'left'
};
var DEFAULT_STAGGER_TIME = 100; // todo: we need to get the item height, not rely on this hardcoded value

var DEFAULT_ITEM_HEIGHT = 40;

var getContainerHeight = function getContainerHeight() {
  var itemHeight = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_ITEM_HEIGHT;
  var numberItems = arguments.length > 1 ? arguments[1] : undefined;
  return "".concat(itemHeight * numberItems, "px");
};

var DrilldownButton = function DrilldownButton(props) {
  return /*#__PURE__*/React.createElement("button", _extends({}, props, {
    className: classNames('RddItem-item', 'RddItem-button')
  }));
};
var DrilldownLink = function DrilldownLink(props) {
  return /*#__PURE__*/React.createElement("a", _extends({}, props, {
    className: "RddItem-item"
  }));
};

var DrilldownItems = /*#__PURE__*/function (_React$Component) {
  _inherits(DrilldownItems, _React$Component);

  var _super = _createSuper(DrilldownItems);

  function DrilldownItems() {
    var _this;

    _classCallCheck(this, DrilldownItems);

    _this = _super.call(this);
    _this.state = {
      oldProps: {},
      hasChanged: false
    };
    return _this;
  }

  _createClass(DrilldownItems, [{
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      if (isEqual(this.props.items, nextProps.items)) {
        return this.setState({
          hasChanged: false
        });
      }

      return this.setState({
        oldProps: this.props,
        hasChanged: true
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          items = _this$props.items,
          staggeredAnimation = _this$props.staggeredAnimation,
          direction = _this$props.direction,
          itemHeight = _this$props.itemHeight;
      var _this$state = this.state,
          oldProps = _this$state.oldProps,
          hasChanged = _this$state.hasChanged;
      /* todo: this should be extracted, but why is it breaking when i do? */

      var ItemsList = function ItemsList(_ref) {
        var className = _ref.className,
            itemsList = _ref.itemsList;
        return /*#__PURE__*/React.createElement("ul", {
          className: className
        }, itemsList.map(function (ItemContent, index) {
          return /*#__PURE__*/React.createElement("li", {
            style: {
              animationDelay: staggeredAnimation && "".concat(index * DEFAULT_STAGGER_TIME, "ms")
            },
            key: index
          }, /*#__PURE__*/React.createElement(ItemContent, null));
        }));
      };

      return /*#__PURE__*/React.createElement("section", {
        className: "RddItem-container",
        style: {
          height: getContainerHeight(itemHeight, items.length)
        }
      }, /*#__PURE__*/React.createElement(ItemsList, {
        itemsList: items,
        className: classNames('RddItem-itemsList', {
          'RddItem-animateInFromRight': hasChanged && direction === 'left',
          'RddItem-animateInFromLeft': hasChanged && direction === 'right'
        })
      }), !isEmpty(oldProps) && hasChanged && /*#__PURE__*/React.createElement(ItemsList, {
        itemsList: oldProps.items,
        className: classNames('RddItem-itemsList', {
          'RddItem-animateOutToLeft': hasChanged && direction === 'left',
          'RddItem-animateOutToRight': hasChanged && direction === 'right'
        })
      }));
    }
  }]);

  return DrilldownItems;
}(React.Component);
DrilldownItems.defaultProps = defaultProps;
DrilldownItems.propTypes = propTypes;

function Footer(_ref) {
  var content = _ref.content;
  return /*#__PURE__*/React.createElement("footer", {
    className: "Rdd-Header-container"
  }, content);
}

var propTypes$1 = {
  header: PropTypes.node,
  items: PropTypes.array.isRequired,
  footer: PropTypes.node,
  staggeredAnimation: PropTypes.bool,
  direction: PropTypes.string,
  itemHeight: PropTypes.number
};
var defaultProps$1 = {
  staggeredAnimation: false
};

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

  var _super = _createSuper(Drilldown);

  function Drilldown() {
    _classCallCheck(this, Drilldown);

    return _super.apply(this, arguments);
  }

  _createClass(Drilldown, [{
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      /*
          Here we immediately reset the direction
          in order to ensure that the next transition will
          be forward again. This is a bit hacky, but the
          only way to prevent needing to know about the
          animation duration
      */
      this.tempDirection = 'left';
    }
  }, {
    key: "onBackButtonClick",
    value: function onBackButtonClick() {
      this.props.onBackClick();
      this.tempDirection = 'right';
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          header = _this$props.header,
          footer = _this$props.footer,
          className = _this$props.className,
          items = _this$props.items,
          staggeredAnimation = _this$props.staggeredAnimation,
          onBackClick = _this$props.onBackClick,
          direction = _this$props.direction,
          itemHeight = _this$props.itemHeight;
      return /*#__PURE__*/React.createElement("div", {
        className: className
      }, /*#__PURE__*/React.createElement(Header, {
        content: header,
        onBackClick: onBackClick ? this.onBackButtonClick.bind(this) : null
      }), /*#__PURE__*/React.createElement(DrilldownItems, {
        items: items,
        itemHeight: itemHeight,
        staggeredAnimation: staggeredAnimation,
        direction: direction || this.tempDirection
      }), /*#__PURE__*/React.createElement(Footer, {
        content: footer
      }));
    }
  }]);

  return Drilldown;
}(Component);
Drilldown.propTypes = propTypes$1;
Drilldown.defaultProps = defaultProps$1;

export { Drilldown, DrilldownButton, DrilldownLink };