fix: 自由容器 flex 布局

alibaba-fusion · Mar 23, 2023 · 9a4e642 · 9a4e642
1 parent 50c6535
commit 9a4e642
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/src/fixed-container.tsx b/src/fixed-container.tsx
@@ -1,13 +1,24 @@
-import React, { forwardRef, Children, ForwardRefRenderFunction } from 'react';
+import React, { forwardRef, Children, ForwardRefRenderFunction, useContext } from 'react';
+import classNames from 'classnames';
+import useFlexClassNames from '@/hooks/use-flex-class-names';
+import Context from '@/common/context';
+import { LayoutContextProps } from './types';
 
 /**
  * 自由容器
  */
 const FixedContainer: ForwardRefRenderFunction<HTMLDivElement, any> = (props: any, ref) => {
   const { children = [], style, items = [] } = props;
+  const { prefix } = useContext<LayoutContextProps>(Context);
+  const clsPrefix = `${prefix}fixed-container`;
+  const flexClassNames = useFlexClassNames(props);
 
   return (
-    <div ref={ref} style={{ position: 'relative', width: '100%', ...style }}>
+    <div
+      ref={ref}
+      style={{ position: 'relative', width: '100%', ...style }}
+      className={classNames(clsPrefix, flexClassNames)}
+    >
       {Children.map(children, (child, idx) => {
         return <div style={{ position: 'absolute', zIndex: idx, ...items[idx] }}>{child}</div>;
       })}

diff --git a/src/scss/row-col-cell.scss b/src/scss/row-col-cell.scss
@@ -45,6 +45,10 @@
     > #{$biz-css-prefix}flex-item-valid-width {
       flex: 0 0;
     }
+
+    > #{$biz-css-prefix}fixed-container#{$biz-css-prefix}flex-item-valid-height {
+      flex: 1 1 0;
+    }
   }
 
   &col-flex {
@@ -63,7 +67,7 @@
   &col-flex {
     > #{$biz-css-prefix}flex-item {
       &-default {
-        flex: 1 1 0;
+        flex: 1 1 0 !important;
       }
       &-auto-fit {
         flex: 0 0 auto;