fix(form): collpsed in form-item-gi does not work (#1166)

* fix(n-form): collapse does not work in FormItemGi * fix(n-form): add commit log Co-authored-by: unknown <[email protected]>
tusen-ai · Sep 15, 2021 · c11edb2 · c11edb2
1 parent 657d8c9
commit c11edb2
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 7 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -41,6 +41,7 @@
 - Fix `n-dynamic-tags` add button is not disabled when it is disabled.
 - Fix `n-select` closes menu when enter key is pressed in filterable mode without options data.
 - Fix `n-auto-complete`'s `children` prop can't use `AutoCompleteOption` type.
+- Fix `n-gi`'s `collapsed` does not work in `n-form-item-gi`, closes [#1160](https://github.com/TuSimple/naive-ui/issues/1160).
 
 ## 2.18.1 (2021-09-08)
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -41,6 +41,7 @@
 - 修复 `n-dynamic-tags` 禁用时 add 按钮未被禁用
 - 修复 `n-select` 在 filterable 并且菜单无数据是按下 enter 导致菜单关闭
 - 修复 `n-auto-complete` 的 `children` 属性不允许使用 `AutoCompleteOption` 类型
+- 修复 `n-gi` 的 `collapsed` 在 `n-form-item-gi` 中切换无法生效问题，关闭 [#1160](https://github.com/TuSimple/naive-ui/issues/1160)
 
 ## 2.18.1 (2021-09-08)
 

diff --git a/src/form/src/FormItemGridItem.ts b/src/form/src/FormItemGridItem.ts
@@ -1,7 +1,7 @@
-import { h, ref, defineComponent } from 'vue'
+import { h, ref, defineComponent, getCurrentInstance } from 'vue'
 import NGridItem, {
   gridItemProps,
-  gridItemPropKeys
+  GridItemVNodeProps
 } from '../../grid/src/GridItem'
 import { keep, keysOf } from '../../_utils'
 import type { ExtractPublicPropTypes } from '../../_utils'
@@ -42,7 +42,10 @@ export default defineComponent({
     }
   },
   render () {
-    return h(NGridItem, keep(this.$props, gridItemPropKeys), {
+    const self = getCurrentInstance()
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const gridItemProps = self!.vnode.props as GridItemVNodeProps
+    return h(NGridItem, gridItemProps, {
       default: () => {
         const itemProps = keep(this.$props, formItemPropKeys)
         return h(

diff --git a/src/grid/src/GridItem.tsx b/src/grid/src/GridItem.tsx
@@ -14,7 +14,7 @@ import type { ExtractPublicPropTypes } from '../../_utils'
 
 export const defaultSpan = 1
 
-interface GridItemVNodeProps {
+export interface GridItemVNodeProps {
   privateOffset?: number
   privateSpan?: number
   privateColStart?: number
@@ -87,9 +87,7 @@ export default defineComponent({
   render () {
     return (
       <div
-        style={
-          ([this.itemStyle, this.deriveStyle()] as unknown) as CSSProperties
-        }
+        style={[this.itemStyle, this.deriveStyle()] as unknown as CSSProperties}
       >
         {renderSlot(this.$slots, 'default', { overflow: this.overflow })}
       </div>