feat: Row/Col/Cell 支持height

alibaba-fusion · Oct 11, 2022 · f55273a · f55273a
1 parent 6484ee8
commit f55273a
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 11 deletions.
diff --git a/src/cell.tsx b/src/cell.tsx
@@ -23,6 +23,7 @@ const Cell: ForwardRefRenderFunction<HTMLDivElement, CellProps> = (props, ref) =
     children,
     verAlign,
     width,
+    height,
     block,
     direction,
     align,
@@ -47,10 +48,11 @@ const Cell: ForwardRefRenderFunction<HTMLDivElement, CellProps> = (props, ref) =
           }
         : null),
       ...(width ? { width: wrapUnit(width) } : null),
+      ...(height ? { height: wrapUnit(height) } : null),
       ...(isValidGap(gap) ? { gap: wrapUnit(gap) } : null),
       ...style,
     }),
-    [block, direction, verAlign, width, gap, style],
+    [block, direction, verAlign, width, height, gap, style],
   );
 
   return (

diff --git a/src/col.tsx b/src/col.tsx
@@ -13,43 +13,65 @@ import { ALIGN_ALIAS_MAP } from '@/common/constant';
 import Context from '@/common/context';
 import { wrapUnit, getGapVal } from '@/utils';
 import { ColProps, LayoutContextProps, TypeMark } from '@/types';
+import { isNumber, isString } from 'lodash-es';
 
 type ICol = ForwardRefExoticComponent<ColProps> & TypeMark;
 
 /**
  * 列拆分布局（子元素如果不是 Row、Col 或 Cell, 则默认用 Cell 包裹）
  */
-const Col: ForwardRefRenderFunction<HTMLDivElement, ColProps> = (props, ref) => {
-  const { children, width, className, align, gap: gapProp, autoFit, style, ...others } = props;
+const Col: ForwardRefRenderFunction<HTMLDivElement, ColProps> = (props: ColProps, ref) => {
+  const {
+    children,
+    width,
+    height,
+    className,
+    align,
+    gap: gapProp,
+    autoFit,
+    style,
+    ...others
+  } = props;
   const { prefix, gridGap } = useContext<LayoutContextProps>(Context);
   const clsPrefix = `${prefix}col-flex`;
   const gap = getGapVal(gridGap, gapProp);
 
   const memorizedChildren = useMemo(() => {
     return Children.map(children, (child) => {
       if (isValidElement(child)) {
-        const { style: childStyle, autoFit: childAutoFit, ...otherChildProps } = child?.props;
+        const {
+          style: childStyle,
+          height: childHeight,
+          autoFit: childAutoFit,
+          ...otherChildProps
+        } = child?.props;
         const { minHeight: childStyleMinHeight, ...otherChildStyle } = childStyle || {};
 
         let flex;
+        // 有效的固定高度
+        let validHeight;
         // 有效的最小高度
         let validMinHeight;
 
-        if (childStyleMinHeight && childStyleMinHeight !== '') {
+        if (isNumber(childHeight) || (isString(childHeight) && childHeight !== '')) {
+          validHeight = childHeight;
+        } else if (childStyleMinHeight && childStyleMinHeight !== '') {
           validMinHeight = childStyleMinHeight;
         }
 
-        // 如果设置了最小高, 那么 flex 属性就启动清除掉了
-        if (childAutoFit || validMinHeight) {
+        // 如果设置了最小高, 那么 flex 伸缩能力就禁用了
+        if (childAutoFit || validMinHeight || validHeight) {
           flex = `0 0 auto`;
         } else {
           flex = '1 1 0';
         }
+
         return cloneElement(child, {
           ...otherChildProps,
           style: {
             flex,
             ...(validMinHeight ? { minHeight: validMinHeight } : null),
+            ...(validHeight ? { height: validHeight } : null),
             ...otherChildStyle,
           },
         });
@@ -65,10 +87,11 @@ const Col: ForwardRefRenderFunction<HTMLDivElement, ColProps> = (props, ref) =>
       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),
       ...style,
     }),
-    [align, width, gap, style],
+    [align, width, height, gap, style],
   );
 
   return (

diff --git a/src/row.tsx b/src/row.tsx
@@ -19,8 +19,18 @@ type IRow = ForwardRefExoticComponent<RowProps> & TypeMark;
 /**
  * 行拆分布局 （子元素如果不是 Row、Col 或 Cell, 则默认用 Cell 包裹）
  */
-const Row: ForwardRefRenderFunction<HTMLDivElement, RowProps> = (props, ref) => {
-  const { width, children, className, verAlign, style, autoFit, gap: gapProp, ...others } = props;
+const Row: ForwardRefRenderFunction<HTMLDivElement, RowProps> = (props: RowProps, ref) => {
+  const {
+    width,
+    height,
+    children,
+    className,
+    verAlign,
+    style,
+    autoFit,
+    gap: gapProp,
+    ...others
+  } = props;
   const { prefix, gridGap } = useContext<LayoutContextProps>(Context);
   const clsPrefix = `${prefix}row-flex`;
   const gap = getGapVal(gridGap, gapProp);
@@ -68,10 +78,11 @@ const Row: ForwardRefRenderFunction<HTMLDivElement, RowProps> = (props, ref) =>
       // @ts-ignore
       alignItems: VER_ALIGN_ALIAS_MAP[verAlign] || verAlign,
       ...(width ? { width: wrapUnit(width) } : null),
+      ...(height ? { height: wrapUnit(height) } : null),
       ...(gap ? { gap: wrapUnit(gap) } : null),
       ...style,
     }),
-    [verAlign, width, gap, style],
+    [verAlign, width, height, gap, style],
   );
 
   return (

diff --git a/src/types.ts b/src/types.ts
@@ -132,6 +132,10 @@ export interface CellProps extends BaseProps {
    * 在行模式下，未设置 autoFit 时, 自定义单个 cell 的宽度，
    */
   width?: number | string;
+  /**
+   * 指定高度
+   */
+  height?: number | string;
   /**
    * 是否宽度（行模式下）/ 高度（列模式下）自适应内容
    */
@@ -279,6 +283,10 @@ interface BaseRowColPropBases extends BaseProps {
    * 固定宽度
    */
   width?: number | string;
+  /**
+   *固定高度
+   */
+  height?: number | string;
   /**
    * 自定义样式
    */