fix: 修复 legend maxWidth 计算错误问题 (#1314)

antvis · Dec 16, 2021 · 8921949 · 8921949
1 parent 735e1e7
commit 8921949
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 19 deletions.
diff --git a/packages/f2/src/components/legend/withLegend.tsx b/packages/f2/src/components/legend/withLegend.tsx
@@ -71,6 +71,25 @@ export default (View) => {
       };
     }
 
+    willMount() {
+      this._initItems();
+      const { props } = this;
+      const shape = renderShape(this, this.render(), false);
+      const { height, width } = shape.get('attrs');
+
+      const { position = 'top', chart } = props;
+      const isVertical = position === 'left' || position === 'right';
+      if (!isVertical) {
+        chart.layoutCoord(position, { width, height });
+        shape.remove();
+        return;
+      }
+      const maxItemWidth = this.getMaxItemWidth(shape);
+      shape.remove();
+      this.maxItemWidth = maxItemWidth;
+      chart.layoutCoord(position, { width: maxItemWidth, height });
+    }
+
     didMount() {
       this._initEvent();
     }
@@ -103,7 +122,8 @@ export default (View) => {
     }
 
     getItems() {
-      return this.state.items;
+      const { items } = this.state;
+      return items?.length ? items : (this.getOriginItems() || []);
     }
 
     setItems(items) {
@@ -128,24 +148,6 @@ export default (View) => {
       return maxItemWidth;
     }
 
-    willMount() {
-      this._initItems();
-      const { props } = this;
-      const shape = renderShape(this, this.render(), false);
-      const { height, width } = shape.get('attrs');
-
-      const { position = 'top', chart } = props;
-      const isVertical = position === 'left' || position === 'right';
-      if (!isVertical) {
-        chart.layoutCoord(position, { width, height });
-        return;
-      }
-      const maxItemWidth = this.getMaxItemWidth(shape);
-      this.maxItemWidth = maxItemWidth;
-      shape.remove();
-      chart.layoutCoord(position, { width: maxItemWidth, height });
-    }
-
     render() {
       const { props, maxItemWidth, context } = this;
       const { width } = context;

diff --git a/packages/f2/test/components/legend/legend.test.tsx b/packages/f2/test/components/legend/legend.test.tsx
@@ -32,6 +32,7 @@ describe('图例', () => {
               <Tooltip showCrosshairs snap />
               <Legend
                 position="bottom"
+                // position="left"
                 marker="square"
                 // 自定义图例样式
                 style={{