react-native-flex-grid/lib/commonjs/components/Layout/Col/Col.js

🎨 A react-native flexbox grid similar to bootstap's web grid.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getColStyle = exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _grid = require("../../../utils/grid");
var _responsive = require("../../../utils/responsive");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
/** Default gutter x size */
const DEFAULT_GX = 4;
/** converts decimal to percent string */
const _toPercent = num => `${num * 100}%`;

/**
 * Gets column style
 */
const getColStyle = props => {
  const {
    gx = DEFAULT_GX
  } = props;
  const gridBreakpoint = (0, _responsive.getGridBreakpoint)();
  const config = (0, _grid.getConfig)();

  /** style object */
  let style = {
    paddingHorizontal: gx ? config.gutters[gx] / 2 : undefined
  };

  // handle size
  for (let i = _responsive.GRID_BREAKPOINTS_KEYS_LIST_DESC.indexOf(gridBreakpoint); i < _responsive.GRID_BREAKPOINTS_KEYS_LIST_DESC.length; i += 1) {
    const element = _responsive.GRID_BREAKPOINTS_KEYS_LIST_DESC[i];
    if (props[element] === 'auto') {
      style = {
        ...style,
        flex: 1
      };
      break;
    }
    if (typeof props[element] === 'number' || typeof props[element] === 'string') {
      style = {
        ...style,
        width: _toPercent(Number(props[element]) / config.colCount)
      };
      break;
    }
  }

  // if no width was assigned -> handle as `auto`
  if (style.width === undefined) {
    style = {
      ...style,
      flex: 1
    };
  }

  // handle offset
  for (let i = _responsive.GRID_BREAKPOINTS_KEYS_LIST_DESC.indexOf(gridBreakpoint); i < _responsive.GRID_BREAKPOINTS_KEYS_LIST_DESC.length; i += 1) {
    const element = `${_responsive.GRID_BREAKPOINTS_KEYS_LIST_DESC[i]}Offset`;
    if (typeof props[element] === 'number' || typeof props[element] === 'string') {
      style = {
        ...style,
        [props.dir === 'rtl' ? 'marginRight' : 'marginLeft']: _toPercent(Number(props[element]) / config.colCount)
      };
      break;
    }
  }

  // handle order
  for (let i = _responsive.GRID_BREAKPOINTS_KEYS_LIST_DESC.indexOf(gridBreakpoint); i < _responsive.GRID_BREAKPOINTS_KEYS_LIST_DESC.length; i += 1) {
    const element = `${_responsive.GRID_BREAKPOINTS_KEYS_LIST_DESC[i]}Order`;
    if (typeof props[element] === 'number' || typeof props[element] === 'string') {
      style = {
        ...style,
        order: Number(props[element])
      };
      break;
    }
  }
  return style;
};

/** Column [Bootstrap Docs](https://getbootstrap.com/docs/5.0/layout/columns) */
exports.getColStyle = getColStyle;
const Col = props => {
  const {
    style,
    Element = _reactNative.View,
    ...rest
  } = props;
  return /*#__PURE__*/_react.default.createElement(Element, _extends({
    style: [getColStyle(props), style]
  }, rest));
};
var _default = Col;
exports.default = _default;
//# sourceMappingURL=Col.js.map