@pisell/layout/es/col.js

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

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