zent/pop/lib/position.js

一套前端设计语言和基于React的实现

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _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; };

exports['default'] = getPosition;

var _zentPopover = require('zent-popover');

var _zentPopover2 = _interopRequireDefault(_zentPopover);

var _capitalize = require('zent-utils/lodash/capitalize');

var _capitalize2 = _interopRequireDefault(_capitalize);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var Position = _zentPopover2['default'].Position;

// FIXME: this value couples with CSS style

var ARROW_OFFSET = 17;

var createPosition = function createPosition(x, y, side) {
  return {
    getCSSStyle: function getCSSStyle() {
      return {
        position: 'absolute',
        left: Math.round(x) + 'px',
        top: Math.round(y) + 'px'
      };
    },


    name: 'position-' + side
  };
};

var CenterArrowPosition = _extends({}, function () {
  var make = function make(getX, side) {
    return Position.create(function (anchorBoundingBox, containerBoundingBox, contentDimension, options) {
      var right = anchorBoundingBox.right,
          left = anchorBoundingBox.left,
          top = anchorBoundingBox.top;

      var middle = (left + right) / 2;
      var x = getX(middle, contentDimension);
      var y = top - contentDimension.height - options.cushion;

      return createPosition(x, y, 'top-' + side);
    });
  };

  return {
    TopLeft: make(function (middle) {
      return middle - ARROW_OFFSET;
    }, 'left'),
    TopRight: make(function (middle, contentDimension) {
      return middle - (contentDimension.width - ARROW_OFFSET);
    }, 'right')
  };
}(), function () {
  var make = function make(getX, side) {
    return Position.create(function (anchorBoundingBox, containerBoundingBox, contentDimension, options) {
      var left = anchorBoundingBox.left,
          right = anchorBoundingBox.right,
          bottom = anchorBoundingBox.bottom;

      var middle = (left + right) / 2;
      var x = getX(middle, contentDimension);
      var y = bottom + options.cushion;

      return createPosition(x, y, 'bottom-' + side);
    });
  };

  return {
    BottomLeft: make(function (middle) {
      return middle - ARROW_OFFSET;
    }, 'left'),
    BottomRight: make(function (middle, contentDimension) {
      return middle - (contentDimension.width - ARROW_OFFSET);
    }, 'right')
  };
}(), function () {
  var make = function make(getY, side) {
    return Position.create(function (anchorBoundingBox, containerBoundingBox, contentDimension, options) {
      var x = anchorBoundingBox.left - contentDimension.width - options.cushion;
      var middle = (anchorBoundingBox.top + anchorBoundingBox.bottom) / 2;
      var y = getY(middle, contentDimension);

      return createPosition(x, y, 'left-' + side);
    });
  };

  return {
    LeftTop: make(function (middle) {
      return middle - ARROW_OFFSET;
    }, 'top'),
    LeftBottom: make(function (middle, contentDimension) {
      return middle - (contentDimension.height - ARROW_OFFSET);
    }, 'bottom')
  };
}(), function () {
  var make = function make(getY, side) {
    return Position.create(function (anchorBoundingBox, containerBoundingBox, contentDimension, options) {
      var right = anchorBoundingBox.right,
          top = anchorBoundingBox.top,
          bottom = anchorBoundingBox.bottom;

      var x = right + options.cushion;
      var middle = (top + bottom) / 2;
      var y = getY(middle, contentDimension);

      return createPosition(x, y, 'right-' + side);
    });
  };

  return {
    RightTop: make(function (middle) {
      return middle - ARROW_OFFSET;
    }, 'top'),
    RightBottom: make(function (middle, contentDimension) {
      return middle - (contentDimension.height - ARROW_OFFSET);
    }, 'bottom')
  };
}());

function getPosition(position, centerArrow) {
  var positionName = position.split('-').map(function (s) {
    return (0, _capitalize2['default'])(s);
  }).join('');
  var pos = Position[positionName];

  // Choose a fallback in case position is invalid
  if (!pos) {
    pos = Position.TopCenter;
    positionName = 'TopCenter';
  }

  // *-center postions are not affected by centerArrow parameter
  if (!centerArrow || /^.+Center$/.test(positionName)) {
    return pos;
  }

  return CenterArrowPosition[positionName];
}
module.exports = exports['default'];