@pisell/layout/es/row.js

基于 Fusion 设计系统的自然布局体系

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["width", "height", "children", "className", "verAlign", "style", "autoFit", "gap"];
import React, { useContext, forwardRef, useMemo } from 'react';
import classNames from 'classnames';
import { VER_ALIGN_ALIAS_MAP } from "./common/constant";
import Context from "./common/context";
import { getGapVal, wrapUnit } from "./utils";
import useFlexClassNames from "./hooks/use-flex-class-names";
/**
 * 行拆分布局 （子元素如果不是 Row、Col 或 Cell, 则默认用 Cell 包裹）
 */
var Row = function Row(props, ref) {
  var width = props.width,
    height = props.height,
    children = props.children,
    className = props.className,
    verAlign = props.verAlign,
    style = props.style,
    autoFit = props.autoFit,
    gapProp = props.gap,
    others = _objectWithoutPropertiesLoose(props, _excluded);
  var _useContext = useContext(Context),
    prefix = _useContext.prefix,
    gridGap = _useContext.gridGap;
  var clsPrefix = prefix + "row-flex";
  var gap = getGapVal(gridGap, gapProp);
  var validWidth = width || (style === null || style === void 0 ? void 0 : style.width);
  var newStyle = useMemo(function () {
    return _extends({
      // @ts-ignore
      alignItems: VER_ALIGN_ALIAS_MAP[verAlign] || verAlign
    }, width ? {
      width: wrapUnit(width)
    } : null, height ? {
      height: wrapUnit(height)
    } : null, gap ? {
      gap: wrapUnit(gap)
    } : null, validWidth ? {
      flexBasis: wrapUnit(validWidth)
    } : null, style);
  }, [verAlign, width, height, gap, style, validWidth]);
  var flexClassNames = useFlexClassNames(props);
  return /*#__PURE__*/React.createElement("div", _extends({}, others, {
    className: classNames(className, clsPrefix, flexClassNames),
    style: newStyle,
    ref: ref
  }), children);
};
var RefRow = /*#__PURE__*/forwardRef(Row);
RefRow.displayName = 'Row';
RefRow.typeMark = 'Row';
export default RefRow;