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

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

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); }
import React from 'react';
import { View } from 'react-native';
import { getConfig } from '../../../utils/grid';
import { getGridBreakpoint, GRID_BREAKPOINTS_KEYS_LIST_DESC } from '../../../utils/responsive';

/** Default gutter x size */
const DEFAULT_GX = 4;
/** converts decimal to percent string */
const _toPercent = num => `${num * 100}%`;

/**
 * Gets column style
 */
export const getColStyle = props => {
  const {
    gx = DEFAULT_GX
  } = props;
  const gridBreakpoint = getGridBreakpoint();
  const config = getConfig();

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

  // handle size
  for (let i = GRID_BREAKPOINTS_KEYS_LIST_DESC.indexOf(gridBreakpoint); i < GRID_BREAKPOINTS_KEYS_LIST_DESC.length; i += 1) {
    const element = 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 = GRID_BREAKPOINTS_KEYS_LIST_DESC.indexOf(gridBreakpoint); i < GRID_BREAKPOINTS_KEYS_LIST_DESC.length; i += 1) {
    const element = `${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 = GRID_BREAKPOINTS_KEYS_LIST_DESC.indexOf(gridBreakpoint); i < GRID_BREAKPOINTS_KEYS_LIST_DESC.length; i += 1) {
    const element = `${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) */
const Col = props => {
  const {
    style,
    Element = View,
    ...rest
  } = props;
  return /*#__PURE__*/React.createElement(Element, _extends({
    style: [getColStyle(props), style]
  }, rest));
};
export default Col;
//# sourceMappingURL=Col.js.map