@pisell/layout/es/cell.js

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

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["className", "children", "verAlign", "width", "height", "block", "direction", "align", "style", "autoFit", "gap"];
import React, { forwardRef, useContext, useMemo } from 'react';
import classNames from 'classnames';
import Context from "./common/context";
import { VER_ALIGN_ALIAS_MAP } from "./common/constant";
import { isValidGap, wrapUnit } from "./utils";
import useFlexClassNames from "./hooks/use-flex-class-names";
/**
 * 单元格容器(默认垂直方向的 flex 布局容器)
 */
var Cell = function Cell(props, ref) {
  var _classNames;
  var className = props.className,
    children = props.children,
    verAlign = props.verAlign,
    width = props.width,
    height = props.height,
    block = props.block,
    direction = props.direction,
    align = props.align,
    style = props.style,
    autoFit = props.autoFit,
    gap = props.gap,
    others = _objectWithoutPropertiesLoose(props, _excluded);
  var _useContext = useContext(Context),
    prefix = _useContext.prefix;
  var clsPrefix = prefix + "cell";
  var validWidth = width || (style === null || style === void 0 ? void 0 : style.width);
  var newStyle = useMemo(function () {
    return _extends({}, !block ? {
      display: 'flex',
      flexDirection: direction === 'ver' ? 'column' : 'row'
    } : null, verAlign ? {
      // @ts-ignore
      justifyContent: VER_ALIGN_ALIAS_MAP[verAlign] || verAlign
    } : null, width ? {
      width: wrapUnit(width)
    } : null, height ? {
      height: wrapUnit(height)
    } : null, isValidGap(gap) ? {
      gap: wrapUnit(gap)
    } : null, validWidth ? {
      flexBasis: wrapUnit(validWidth)
    } : null, style);
  }, [block, direction, verAlign, width, height, gap, style, validWidth]);
  var flexClassNames = useFlexClassNames(props);
  return /*#__PURE__*/React.createElement("div", _extends({}, others, {
    ref: ref,
    className: classNames(clsPrefix, className, flexClassNames, (_classNames = {}, _classNames[clsPrefix + "-align--" + align] = align, _classNames)),
    style: newStyle
  }), children);
};
var RefCell = /*#__PURE__*/forwardRef(Cell);
RefCell.displayName = 'Cell';
RefCell.defaultProps = {
  block: false,
  direction: 'ver'
};
RefCell.typeMark = 'Cell';
export default RefCell;