reflay/lib/helpers/Layout/align.js

React Flexbox Layout.

'use strict';

exports.__esModule = true;
var LAYOUT_ALIGN_START = exports.LAYOUT_ALIGN_START = 'start';
var LAYOUT_ALIGN_CENTER = exports.LAYOUT_ALIGN_CENTER = 'center';
var LAYOUT_ALIGN_END = exports.LAYOUT_ALIGN_END = 'end';
var LAYOUT_ALIGN_SPACE_AROUND = exports.LAYOUT_ALIGN_SPACE_AROUND = 'space-around';
var LAYOUT_ALIGN_SPACE_BETWEEN = exports.LAYOUT_ALIGN_SPACE_BETWEEN = 'space-between';
var LAYOUT_ALIGN_STRETCH = exports.LAYOUT_ALIGN_STRETCH = 'stretch';

/**
 * Available layout alignments in the direction of layout.
 * @type {Array}
 */
var LayoutAlignmentsInDirection = [LAYOUT_ALIGN_START, // default
LAYOUT_ALIGN_CENTER, LAYOUT_ALIGN_END, LAYOUT_ALIGN_SPACE_AROUND, LAYOUT_ALIGN_SPACE_BETWEEN];

/**
 * Available layout alignments in the perpendicular direction.
 * @type {Array}
 */
var LayoutAlignmentsPerpendicular = [LAYOUT_ALIGN_START, LAYOUT_ALIGN_CENTER, LAYOUT_ALIGN_END, LAYOUT_ALIGN_STRETCH // default
];

/**
 * Get available layout alignment combinations.
 * @returns {Array}
 */
var getLayoutAligns = exports.getLayoutAligns = function getLayoutAligns() {
  var layoutAlignments = [];

  LayoutAlignmentsInDirection.map(function (inDirection) {
    layoutAlignments.push('' + inDirection);

    LayoutAlignmentsPerpendicular.map(function (perpendicular) {
      layoutAlignments.push(inDirection + ' ' + perpendicular);
    });
  });

  return layoutAlignments;
};

/**
 * Get layout alignment in the layout direction.
 * Return default one if specified does not match.
 * @param align
 * @returns {string}
 */
var getLayoutAlignInDirection = function getLayoutAlignInDirection(align) {
  return LayoutAlignmentsInDirection.find(function (v) {
    return v === align;
  }) ? align : LAYOUT_ALIGN_START;
};

/**
 * Get layout alignment in the perpendicular direction.
 * Return default one if specified does not match.
 * @param align
 * @returns {string}
 */
var getLayoutAlignPerpendicular = function getLayoutAlignPerpendicular(align) {
  return LayoutAlignmentsPerpendicular.find(function (v) {
    return v === align;
  }) ? align : LAYOUT_ALIGN_STRETCH;
};

/**
 * Get layout alignment combination in the form of CSS class suffix.
 * @param align
 * @returns {string}
 */
var getLayoutAlignClassNameSuffix = function getLayoutAlignClassNameSuffix(align) {
  var layout = void 0;
  var perpendicular = '';

  var alignArr = ('' + align).split(' ');
  layout = alignArr[0];

  if (alignArr.length === 2) {
    perpendicular = alignArr[1];
  }
  return getLayoutAlignInDirection(layout) + '-' + getLayoutAlignPerpendicular(perpendicular);
};

/**
 * Get the complete layout alignment CSS class name.
 * @param props
 * @param breakpoint
 * @returns {string}
 */
var getLayoutAlignClassName = exports.getLayoutAlignClassName = function getLayoutAlignClassName(props) {
  var breakpoint = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';

  if (breakpoint === '') {
    return typeof props !== 'undefined' && typeof props['align'] !== 'undefined' ? 'layout-align-' + getLayoutAlignClassNameSuffix(props['align']) : '';
  } else {
    return typeof props !== 'undefined' && typeof props['align-' + breakpoint] !== 'undefined' ? 'layout-align-' + breakpoint + '-' + getLayoutAlignClassNameSuffix(props['align-' + breakpoint]) : '';
  }
};