@fruits-chain/react-native-xiaoshu/lib/module/space/index.js

🌈 React Native UI library

function _extends() { _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; }; return _extends.apply(this, arguments); }

import React, { memo, Children } from 'react';
import { View } from 'react-native';
import { varCreator as varCreatorBlank } from '../blank/style';
import { getDefaultValue } from '../helpers';
import Theme from '../theme';
const NO_GAP = 0;

const getMarginGap = (d, gap) => d ? typeof d === 'number' ? d : gap : 0;
/**
 * Space 间距
 */


const Space = _ref => {
  let {
    direction = 'vertical',
    wrap = false,
    gap = 's',
    gapVertical,
    gapHorizontal,
    head,
    tail,
    justify,
    align,
    style,
    children,
    ...restProps
  } = _ref;
  const TOKENS = Theme.useThemeTokens();
  const CV_BLANK = Theme.createVar(TOKENS, varCreatorBlank);
  const defaultGap = typeof gap === 'string' ? CV_BLANK[`blank_size_${gap}`] : gap;
  const isVertical = direction === 'vertical';

  const _gapVertical = getDefaultValue(gapVertical, defaultGap);

  const _gapHorizontal = getDefaultValue(gapHorizontal, defaultGap);

  const wrapperStyle = {
    flexDirection: isVertical ? 'column' : 'row',
    flexWrap: wrap ? 'wrap' : 'nowrap',
    justifyContent: justify,
    alignItems: align,
    ...(isVertical ? {
      paddingTop: getMarginGap(head, _gapVertical),
      paddingBottom: getMarginGap(tail, _gapVertical)
    } : {
      paddingLeft: getMarginGap(head, _gapHorizontal),
      paddingRight: getMarginGap(tail, _gapHorizontal)
    })
  };
  const itemStyle = {
    marginBottom: _gapVertical,
    marginRight: isVertical ? 0 : _gapHorizontal
  };
  const childArray = Children.toArray(children);
  const count = childArray.length;
  return /*#__PURE__*/React.createElement(View, _extends({}, restProps, {
    style: [wrapperStyle, style]
  }), childArray.map((child, index) => {
    return /*#__PURE__*/React.createElement(View, {
      key: index,
      style: [itemStyle, index + 1 === count ? isVertical ? {
        marginBottom: NO_GAP
      } : {
        marginRight: NO_GAP
      } : null]
    }, child);
  }));
};

export default /*#__PURE__*/memo(Space);
//# sourceMappingURL=index.js.map