@6thquake/react-material/Bubble/Bubble.js

React components that implement Google's Material Design.

"use strict";

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

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

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

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

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

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

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

var _react = _interopRequireDefault(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _withStyles = _interopRequireDefault(require("../styles/withStyles"));

var styles = function styles(theme) {
  return {
    /*
     * Part of bubble rectangle & triangle style which will remain unchangeable.
     */
    recStyle: {
      //position: 'relative',
      minWidth: 30,
      minHeight: 30,
      maxWidth: 200,
      padding: 10
    },
    triStyle: {
      width: 0,
      height: 0,
      display: 'inline-block'
    },

    /*
     * Default left & right pointed bubble style which can be changed in real applications.
     */
    customization: {
      fontSize: 15,
      fontFamily: 'calgary',
      borderRadius: 5,
      width: 'auto',
      height: 'auto'
    }
  };
};

var Bubble =
/*#__PURE__*/
function (_React$Component) {
  (0, _inherits2.default)(Bubble, _React$Component);

  function Bubble() {
    (0, _classCallCheck2.default)(this, Bubble);
    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Bubble).apply(this, arguments));
  }

  (0, _createClass2.default)(Bubble, [{
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps, prevStates) {
      // floated style
      if (document.getElementById('self') !== null) {
        if (prevProps.direction === 'right' && prevProps.floated === 'true') {
          // 悬浮+左边
          var dis = Number(document.getElementById('self').getBoundingClientRect().height) / 2 + prevProps.parent.height / 2;
          var transDis = typeof prevProps.triSize === 'undefined' ? 22 : Number(prevProps.triSize) + 10;
          var lFXDis = typeof prevProps.parent === 'undefined' ? 0 : prevProps.parent.width + transDis;
          document.getElementById('self').setAttribute('style', 'transform: translate(' + lFXDis + 'px,' + -dis + 'px)');
        } else if (prevProps.direction === 'left' && prevProps.floated === 'true') {
          // 悬浮+右边
          var _dis = Number(document.getElementById('self').getBoundingClientRect().height) / 2 + prevProps.parent.height / 2;

          document.getElementById('self').setAttribute('style', 'transform: translate(-100%,' + -_dis + 'px)');
        } else if (prevProps.direction === 'top' && prevProps.floated === 'true') {
          // 悬浮+上边
          var _dis2 = document.getElementById('self').getBoundingClientRect().height + prevProps.parent.height + (typeof prevProps.triSize === 'undefined' ? 22 : Number(prevProps.triSize) + 10);

          document.getElementById('self').setAttribute('style', 'transform: translate(' + -(prevProps.parent.width / 2) + 'px,' + -_dis2 + 'px)');
        } else if (prevProps.direction === 'bottom' && prevProps.floated === 'true') {
          // 悬浮+下边
          var _dis3 = typeof prevProps.triSize === 'undefined' ? 22 : Number(prevProps.triSize) + 10;

          document.getElementById('self').setAttribute('style', 'transform: translate(' + -(prevProps.parent.width / 2) + 'px,' + _dis3 + 'px)');
        }
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          direction = _this$props.direction,
          floated = _this$props.floated,
          index = _this$props.index,
          triSize = _this$props.triSize,
          bgColor = _this$props.bgColor,
          classes = _this$props.classes;
      var halfSize = typeof triSize === 'undefined' ? 6 : Number(triSize) / 2;
      var recClassNames = (0, _classnames.default)(classes.recStyle, classes.customization);
      var triClassNames = (0, _classnames.default)(classes.triStyle);
      var triResult;
      /*
       * Floated bubble
       */

      if (floated === 'true') {
        /*
         * Left sided arrow
         */
        if (direction === 'right') {
          triResult = _react.default.createElement("div", {
            className: triClassNames,
            style: {
              borderRightWidth: (typeof triSize === 'undefined' ? '12' : triSize) + 'px',
              borderRightStyle: 'solid',
              borderRightColor: typeof bgColor === 'undefined' ? 'white' : bgColor,
              borderTopWidth: halfSize + 'px',
              borderTopStyle: 'solid',
              borderTopColor: 'transparent',
              borderBottomWidth: halfSize + 'px',
              borderBottomStyle: 'solid',
              borderBottomColor: 'transparent',
              left: -(typeof triSize === 'undefined' ? '12' : triSize) + 'px',
              position: 'absolute',
              top: '50%',
              transform: 'translate(0, -50%)'
            }
          });
          return _react.default.createElement("div", {
            className: recClassNames,
            style: {
              backgroundColor: typeof bgColor === 'undefined' ? 'white' : bgColor,
              position: 'relative'
            }
          }, triResult, this.props.children);
        } else if (direction === 'left') {
          /*
           * Right sided arrow
           */
          triResult = _react.default.createElement("div", {
            className: triClassNames,
            style: {
              borderLeftWidth: (typeof triSize === 'undefined' ? '12' : triSize) + 'px',
              borderLeftStyle: 'solid',
              borderLeftColor: typeof bgColor === 'undefined' ? 'green' : bgColor,
              borderTopWidth: halfSize + 'px',
              borderTopStyle: 'solid',
              borderTopColor: 'transparent',
              borderBottomWidth: halfSize + 'px',
              borderBottomStyle: 'solid',
              borderBottomColor: 'transparent',
              right: -(typeof triSize === 'undefined' ? '12' : triSize) + 'px',
              position: 'absolute',
              top: '50%',
              transform: 'translate(0, -50%)'
            }
          });
          return _react.default.createElement("div", {
            className: recClassNames,
            style: {
              backgroundColor: typeof bgColor === 'undefined' ? 'green' : bgColor,
              position: 'relative'
            }
          }, triResult, this.props.children);
        } else if (direction === 'top') {
          /*
           * Bottom sided arrow
           */
          triResult = _react.default.createElement("div", {
            className: triClassNames,
            style: {
              borderTopWidth: (typeof triSize === 'undefined' ? '12' : triSize) + 'px',
              borderTopStyle: 'solid',
              borderTopColor: typeof bgColor === 'undefined' ? 'cyan' : bgColor,
              borderLeftWidth: halfSize + 'px',
              borderLeftStyle: 'solid',
              borderLeftColor: 'transparent',
              borderRightWidth: halfSize + 'px',
              borderRightStyle: 'solid',
              borderRightColor: 'transparent',
              bottom: -(typeof triSize === 'undefined' ? '12' : triSize) + 'px',
              position: 'absolute',
              left: '50%',
              transform: 'translate(-50%, 0)'
            }
          });
          return _react.default.createElement("div", {
            id: "self",
            className: recClassNames,
            style: {
              backgroundColor: typeof bgColor === 'undefined' ? 'cyan' : bgColor,
              position: 'relative'
            }
          }, triResult, this.props.children);
        } else if (direction === 'bottom') {
          /*
           * Top sided arrow
           */
          triResult = _react.default.createElement("div", {
            className: triClassNames,
            style: {
              borderBottomWidth: (typeof triSize === 'undefined' ? '12' : triSize) + 'px',
              borderBottomStyle: 'solid',
              borderBottomColor: typeof bgColor === 'undefined' ? 'blue' : bgColor,
              borderLeftWidth: halfSize + 'px',
              borderLeftStyle: 'solid',
              borderLeftColor: 'transparent',
              borderRightWidth: halfSize + 'px',
              borderRightStyle: 'solid',
              borderRightColor: 'transparent',
              top: -(typeof triSize === 'undefined' ? '12' : triSize) + 'px',
              position: 'absolute',
              left: '50%',
              transform: 'translate(-50%, 0)'
            }
          });
          return _react.default.createElement("div", {
            className: recClassNames,
            style: {
              backgroundColor: typeof bgColor === 'undefined' ? 'blue' : bgColor,
              position: 'relative'
            }
          }, triResult, this.props.children);
        }
      } else {
        /*
         * Non-floated bubble
         */

        /*
         * Left sided arrow
         */
        if (direction === 'right') {
          triResult = _react.default.createElement("div", {
            className: triClassNames,
            style: {
              borderRightWidth: (typeof triSize === 'undefined' ? '12' : triSize) + 'px',
              borderRightStyle: 'solid',
              borderRightColor: typeof bgColor === 'undefined' ? 'white' : bgColor,
              borderTopWidth: halfSize + 'px',
              borderTopStyle: 'solid',
              borderTopColor: 'transparent',
              borderBottomWidth: halfSize + 'px',
              borderBottomStyle: 'solid',
              borderBottomColor: 'transparent'
            }
          });
          return _react.default.createElement("div", {
            style: {
              display: 'flex',
              justifyContent: 'flex-start',
              alignItems: 'center'
            }
          }, triResult, _react.default.createElement("div", {
            className: recClassNames,
            style: {
              backgroundColor: typeof bgColor === 'undefined' ? 'white' : bgColor
            }
          }, this.props.children));
        } else if (direction === 'left') {
          /*
           * Right sided arrow
           */
          triResult = _react.default.createElement("div", {
            className: triClassNames,
            style: {
              borderLeftWidth: (typeof triSize === 'undefined' ? '12' : triSize) + 'px',
              borderLeftStyle: 'solid',
              borderLeftColor: typeof bgColor === 'undefined' ? 'green' : bgColor,
              borderTopWidth: halfSize + 'px',
              borderTopStyle: 'solid',
              borderTopColor: 'transparent',
              borderBottomWidth: halfSize + 'px',
              borderBottomStyle: 'solid',
              borderBottomColor: 'transparent'
            }
          });
          return _react.default.createElement("div", {
            style: {
              display: 'flex',
              justifyContent: 'flex-start',
              alignItems: 'center'
            }
          }, _react.default.createElement("div", {
            className: recClassNames,
            style: {
              backgroundColor: typeof bgColor === 'undefined' ? 'green' : bgColor
            }
          }, this.props.children), triResult);
        } else if (direction === 'top') {
          /*
           * Bottom sided arrow
           */
          triResult = _react.default.createElement("div", {
            className: triClassNames,
            style: {
              borderTopWidth: (typeof triSize === 'undefined' ? '12' : triSize) + 'px',
              borderTopStyle: 'solid',
              borderTopColor: typeof bgColor === 'undefined' ? 'cyan' : bgColor,
              borderLeftWidth: halfSize + 'px',
              borderLeftStyle: 'solid',
              borderLeftColor: 'transparent',
              borderRightWidth: halfSize + 'px',
              borderRightStyle: 'solid',
              borderRightColor: 'transparent'
            }
          });
          return _react.default.createElement("div", {
            id: "transform"
          }, _react.default.createElement("div", {
            style: {
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'flex-start',
              alignItems: 'center'
            }
          }, _react.default.createElement("div", {
            className: recClassNames,
            style: {
              backgroundColor: typeof bgColor === 'undefined' ? 'cyan' : bgColor
            }
          }, this.props.children), triResult));
        } else if (direction === 'bottom') {
          /*
           * Top sided arrow
           */
          triResult = _react.default.createElement("div", {
            className: triClassNames,
            style: {
              borderBottomWidth: (typeof triSize === 'undefined' ? '12' : triSize) + 'px',
              borderBottomStyle: 'solid',
              borderBottomColor: typeof bgColor === 'undefined' ? 'blue' : bgColor,
              borderLeftWidth: halfSize + 'px',
              borderLeftStyle: 'solid',
              borderLeftColor: 'transparent',
              borderRightWidth: halfSize + 'px',
              borderRightStyle: 'solid',
              borderRightColor: 'transparent'
            }
          });
          return _react.default.createElement("div", {
            style: {
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'center',
              alignItems: 'center'
            }
          }, triResult, _react.default.createElement("div", {
            className: recClassNames,
            style: {
              backgroundColor: typeof bgColor === 'undefined' ? 'blue' : bgColor
            }
          }, this.props.children));
        }
      }
    }
  }], [{
    key: "getDerivedStateFromProps",
    value: function getDerivedStateFromProps(nextProps, prevState) {
      var self = nextProps.self;
      var index = nextProps.index;
      var ancestor = nextProps.ancestor;
      var floated = nextProps.floated;
      var direction = nextProps.direction;

      if (typeof ancestor !== 'string') {
        if (typeof index !== 'undefined') {
          // 有多个ancestor，应该改变ancestor与元素下标对应的
          if (floated === 'false') {
            //非悬浮，不需要设置self样式
            if (typeof self !== 'undefined' && self.getAttribute('style') !== null) {
              self.removeAttribute('style');
            }

            if (direction === 'right') {
              //左边
              ancestor[index].setAttribute('style', 'display: flex; justify-content: flex-start; align-items: center; flex-direction: row');
            } else if (direction === 'left') {
              //右边
              ancestor[index].setAttribute('style', 'display: flex; justify-content: flex-start; align-items: center; flex-direction: row-reverse');
            } else if (direction === 'top') {
              //上边
              ancestor[index].setAttribute('style', 'display: flex; justify-content: flex-start; align-items: center; flex-direction: column-reverse');
            } else if (direction === 'bottom') {
              //下边
              ancestor[index].setAttribute('style', 'display: flex; justify-content: flex-start; align-items: center; flex-direction: column');
            }
          } else {
            // 悬浮，不需要设置ancestor样式
            if (typeof self !== 'undefined' && typeof self !== 'string') {
              if (ancestor[index].getAttribute('style') !== null) {
                ancestor[index].removeAttribute('style');
              }

              if (direction === 'right') {
                // 左边
                if (typeof self !== 'undefined' && self.getAttribute('style') !== null) {
                  self.removeAttribute('style');
                }
              } else if (direction === 'left') {
                // 右边
                if (typeof self !== 'undefined' && self.getAttribute('style') !== null) {
                  self.removeAttribute('style');
                }
              } else if (direction === 'top') {
                // 上边
                if (typeof self !== 'undefined' && self.getAttribute('style') !== null) {
                  self.removeAttribute('style');
                }
              } else if (direction === 'bottom') {
                // 下边
                if (typeof self !== 'undefined' && self.getAttribute('style') !== null) {
                  self.removeAttribute('style');
                }
              }
            }
          }
        } else {
          // 只有一个ancestor，不存在改变flex-direction的情况
          if (floated === 'false') {
            // 非悬浮，不需要设置self样式
            if (typeof self !== 'undefined' && self.getAttribute('style') !== null) {
              self.removeAttribute('style');
            }

            if (direction === 'right') {
              // 左边
              ancestor[0].setAttribute('style', 'display: flex; justify-content: flex-start; align-items: center; flex-direction: row');
            } else if (direction === 'left') {
              // 右边
              ancestor[0].setAttribute('style', 'display: flex; justify-content: flex-start; align-items: center; flex-direction: row-reverse');
            } else if (direction === 'top') {
              // 上边
              ancestor[0].setAttribute('style', 'display: flex; justify-content: flex-start; align-items: center; flex-direction: column-reverse');
            } else if (direction === 'bottom') {
              // 下边
              ancestor[0].setAttribute('style', 'display: flex; justify-content: flex-start; align-items: center; flex-direction: column');
            }
          } else {
            // 悬浮，不需要设置ancestor样式
            if (typeof self !== 'undefined' && typeof self !== 'string') {
              if (ancestor[0].getAttribute('style') !== null) {
                ancestor[0].removeAttribute('style');
              }

              if (direction === 'right') {
                // 左边
                if (typeof self !== 'undefined' && self.getAttribute('style') !== null) {
                  self.removeAttribute('style');
                }
              } else if (direction === 'left') {
                // 右边
                if (typeof self !== 'undefined' && self.getAttribute('style') !== null) {
                  self.removeAttribute('style');
                }
              } else if (direction === 'top') {
                // 上边
                if (typeof self !== 'undefined' && self.getAttribute('style') !== null) {
                  self.removeAttribute('style');
                }
              } else if (direction === 'bottom') {
                // 下边
                if (typeof self !== 'undefined' && self.getAttribute('style') !== null) {
                  self.removeAttribute('style');
                }
              }
            }
          }
        }
      }

      return null;
    }
  }]);
  return Bubble;
}(_react.default.Component);

Bubble.propTypes = {
  /**
   * the background color of bubble
   */
  bgColor: _propTypes.default.string,

  /**
   * the direction of bubble
   */
  direction: _propTypes.default.oneOf(['left', 'right', 'top', 'bottom']).isRequired,

  /**
   *
   */
  floated: _propTypes.default.bool.isRequired,

  /**
   *
   */
  triSize: _propTypes.default.number
};

var _default = (0, _withStyles.default)(styles, {
  name: 'RMBubble'
})(Bubble);

exports.default = _default;