fix: Form.Item noStyle support validation status
#44576
Conversation
|
|
|
|
size-limit report 📦
|
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
| {/* should follow parent status */} | ||
| <Form.Item validateStatus="error"> | ||
| <Form.Item noStyle> | ||
| <Select className="custom-select-b" /> | ||
| </Form.Item> | ||
| </Form.Item> |
There was a problem hiding this comment.
这里其实逻辑有点矛盾了。
从上一个用例可以看出 noStyle 的作用是不影响 status 样式，那么这个用例应该有同样的作用，这个 Item 的无状态 应该保留，而不是继承了上一个 Item 的 Error 样式。
这样看应该新增一个区别于 noStyle 的属性用来消除自身的 status 状态，而 noStyle 本身不应该对 status 有影响
There was a problem hiding this comment.
这个用例的行为应该是对齐了 4.18.x，也就是没有做 FormInput 改造的版本，如果希望不 break 用户的话可能应该保证这个用例不变。
There was a problem hiding this comment.
实验了一下，这个设计应该就是为了让上面的状态传下去。默认情况下，上面的字段是不绑定 name 的，所以也不会有状态。
下面又加了一个 test case，特意测了一下下传上的情况。也是符合预期的。
Codecov ReportPatch coverage:
Additional details and impacted files@@ Coverage Diff @@
## master #44576 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 665 666 +1
Lines 11280 11294 +14
Branches 3049 3053 +4
=========================================
+ Hits 11280 11294 +14
☔ View full report in Codecov by Sentry. |
|
测试掉了 |
| @@ -133,7 +133,7 @@ const validateMessages = { | |||
| | messageVariables | 默认验证字段的信息 | Record<string, string> | - | 4.7.0 | | |||
| | name | 字段名，支持数组 | [NamePath](#namepath) | - | | | |||
| | normalize | 组件获取值后进行转换，再放入 Form 中。不支持异步 | (value, prevValue, prevValues) => any | - | | | |||
| | noStyle | 为 `true` 时不带样式，作为纯字段控件使用 | boolean | false | | | |||
| | noStyle | 为 `true` 时不带样式，作为纯字段控件使用。当自身没有 `validateStatus` 而父元素存在有 `validateStatus` 的 Form.Item 会继承父元素的 `validateStatus` | boolean | false | | | |||
There was a problem hiding this comment.
| | noStyle | 为 `true` 时不带样式，作为纯字段控件使用。当自身没有 `validateStatus` 而父元素存在有 `validateStatus` 的 Form.Item 会继承父元素的 `validateStatus` | boolean | false | | | |
| | noStyle | 为 `true` 时不带样式，作为纯字段控件使用。会继承父组件 `validateStatus`：[例子](codesandbox link) | boolean | false | | |
[中文版模板 / Chinese template]
🤔 This is a ...
🔗 Related issue link
resolve #42603
💡 Background and solution
📝 Changelog
noStylenot consumeuseStatus.noStyle时，被绑定的元素无法消费useStatus的问题。☑️ Self-Check before Merge
🚀 Summary
🤖 Generated by Copilot at fd00e75
Added a new feature to support noStyle Form.Item status inheritance from the parent Form.Item. Refactored the validation logic and feedback icon generation for form items by using helper functions and a new
StatusProvidercomponent. Improved the code readability and clarity by reordering imports, adding comments and displayNames. Updated the documentation and tests accordingly.🔍 Walkthrough
🤖 Generated by Copilot at fd00e75
getStatusfunction from./components/form/util.ts(link, link)StatusProvidercomponent in./components/form/FormItem/StatusProvider.tsxto create the feedback icon and the status context based on the props and the meta (link, link, link)StatusProvidercomponent and theFormItemInputContext(link, link, link, link)FormItemInputContextin./components/form/context.tsxto improve the debugging experience (link)Reactimport to./components/form/FormItem/index.tsx(link)./components/form/__tests__/index.test.tsxto use thetoHaveClassmatcher and check for the new class names that indicate the status and the form item input state of the select components (link)./components/form/__tests__/index.test.tsxto explain the expected behavior of the noStyle Form.Items with different status configurations (link, link, link)./components/form/FormItem/ItemHolder.tsx,./components/form/FormItem/index.tsx,./components/form/context.tsxand./components/form/__tests__/index.test.tsxto group React-related imports together and separate them from other imports (link, link, link, link)