feat(form): 多端适配
由于 RN 和 鸿蒙的选择器只能支持 类选择、多类选择器和伪元素选择器,所以无法实现通过 form 控制 input textarea 等的样式,需要从视觉层面来进行一些组件样式的修复。这样可以确保放到 form 中样式表现良好。
Summary by CodeRabbit
-
新特性
- 添加了
async-validator依赖,提升了应用的验证功能。 - 在
Demo1组件中,输入字段的最大字符限制从 5 增加到 7。 - 增强了表单组件的适配性,支持不同平台的条件渲染。
- 更新了表单组件的样式,改善了视觉层次和可用性,特别是对 RTL 语言的支持。
- 添加了
-
Bug 修复
- 修复了表单项的错误状态样式,确保更好的用户体验。
-
文档
- 更新了组件的上下文访问方式,增强了灵活性和可维护性。
[!IMPORTANT]
Review skipped
Draft detected.
Please check the settings in the CodeRabbit UI or the
.coderabbit.yamlfile in this repository. To trigger a single review, invoke the@coderabbitai reviewcommand.You can disable this status message by setting the
reviews.review_statustofalsein the CodeRabbit configuration file.
Walkthrough
本次变更主要涉及多个文件的更新,增强了表单组件的功能和样式。copy-file.js 脚本新增了对 formitem 组件的处理,config.json 文件中更新了多个组件的版本和属性。表单相关的组件(如 Form 和 FormItem)进行了接口和渲染逻辑的改进,添加了新的属性如 disabled 和 validateTrigger,并引入了新的实用函数 merge 和 toArray 来优化状态管理。样式文件也进行了大幅修改,以改善表单项的布局和视觉表现。
Changes
| 文件路径 | 变更摘要 |
|---|---|
scripts/rn/copy-file.js |
新增字符串 'formitem' 到 childAdaptedArray,更新 copyFile 函数以处理 formitem 组件。 |
src/config.json |
多个组件版本从 2.0.0 更新到 3.0.0,新增 Input、InputNumber、Range、Switch、TextArea 组件。 |
src/packages/form/demos/taro/demo1.tsx |
移除 InputNumber 组件,更新 username 字段的验证规则,修改 TextArea 组件的样式。 |
src/packages/formitem/formitem.taro.tsx |
中心化上下文方法访问,新增 getClassNameWithDirection 方法,更新 align 属性为必填。 |
src/packages/form/form.taro.tsx |
新增 disabled 和 validateTrigger 属性,更新渲染逻辑使用 <TForm> 组件。 |
src/packages/form/form.tsx |
新增 disabled 和 validateTrigger 属性,更新上下文值。 |
src/packages/form/useform.taro.ts |
新增 updateStore 方法,更新 setInitialValues 和 setFieldsValue 方法以合并值。 |
src/packages/form/useform.ts |
新增 updateStore 方法,更新 setInitialValues 和 setFieldsValue 方法以合并值。 |
src/packages/formitem/formitem.scss |
新增多个样式类以改善表单项的布局和视觉效果。 |
src/packages/formitem/formitem.tsx |
更新上下文访问逻辑,新增 getClassNameWithDirection 方法,更新 align 属性为必填。 |
src/utils/merge.ts |
新增 merge 函数以合并多个对象。 |
src/utils/to-array.ts |
新增 toArray 函数以确保返回数组。 |
src/packages/form/doc.en-US.md |
更新文档以包含 validateTrigger 属性和 setFieldValue 方法。 |
src/packages/form/doc.md |
更新文档以包含 validateTrigger 属性和 setFieldValue 方法。 |
src/packages/form/doc.taro.md |
更新文档以包含 validateTrigger 属性和 setFieldValue 方法。 |
src/packages/form/doc.zh-TW.md |
更新文档以包含 validateTrigger 属性和 setFieldValue 方法。 |
src/packages/form/types.ts |
更新接口以添加 regex 属性和 setFieldValue 方法。 |
Suggested labels
size/L
Suggested reviewers
- irisSong
🐰 在草地上跳跃,代码更新如春风,
表单组件新生,功能更强更灵动。
样式焕然一新,布局更显美观,
让我们一起欢庆,代码的每一次变换! 🌼✨
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?
🪧 Tips
Chat
There are 3 ways to chat with CodeRabbit:
- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
I pushed a fix in commit <commit_id>, please review it.Generate unit testing code for this file.Open a follow-up GitHub issue for this discussion.
- Files and specific lines of code (under the "Files changed" tab): Tag
@coderabbitaiin a new review comment at the desired location with your query. Examples:@coderabbitai generate unit testing code for this file.@coderabbitai modularize this function.
- PR comments: Tag
@coderabbitaiin a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.@coderabbitai read src/utils.ts and generate unit testing code.@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.@coderabbitai help me debug CodeRabbit configuration file.
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.
CodeRabbit Commands (Invoked using PR comments)
@coderabbitai pauseto pause the reviews on a PR.@coderabbitai resumeto resume the paused reviews.@coderabbitai reviewto trigger an incremental review. This is useful when automatic reviews are disabled for the repository.@coderabbitai full reviewto do a full review from scratch and review all the files again.@coderabbitai summaryto regenerate the summary of the PR.@coderabbitai resolveresolve all the CodeRabbit review comments.@coderabbitai configurationto show the current CodeRabbit configuration for the repository.@coderabbitai helpto get help.
Other keywords and placeholders
- Add
@coderabbitai ignoreanywhere in the PR description to prevent this PR from being reviewed. - Add
@coderabbitai summaryto generate the high-level summary at a specific location in the PR description. - Add
@coderabbitaianywhere in the PR title to generate the title automatically.
CodeRabbit Configuration File (.coderabbit.yaml)
- You can programmatically configure CodeRabbit by adding a
.coderabbit.yamlfile to the root of your repository. - Please see the configuration documentation for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation:
# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json
Documentation and Community
- Visit our Documentation for detailed information on how to use CodeRabbit.
- Join our Discord Community to get help, request features, and share feedback.
- Follow us on X/Twitter for updates and announcements.
Codecov Report
Attention: Patch coverage is 98.07692% with 2 lines in your changes missing coverage. Please review.
Project coverage is 83.95%. Comparing base (
6341c78) to head (a2c1d07). Report is 1 commits behind head on V3.0.
| Files with missing lines | Patch % | Lines |
|---|---|---|
| src/packages/formitem/formitem.tsx | 95.55% | 2 Missing :warning: |
Additional details and impacted files
@@ Coverage Diff @@
## V3.0 #2595 +/- ##
=======================================
Coverage 83.95% 83.95%
=======================================
Files 221 221
Lines 17849 17849
Branches 2679 2679
=======================================
Hits 14986 14986
Misses 2858 2858
Partials 5 5
:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.
harmony下面,表单验证 label和 input错位
harmony下面, label字体太小了
输入字段,点击enter会有校验错误,不应该有这种展示
taro input 获取 value 的逻辑变了,需要先修复 input
字段b 输入任意字符,闪退
taro input 获取 value 的逻辑变了,需要先修复 input
升级鸿蒙又不行了,暂时转到 draft 状态
输入字段,点击enter会有校验错误,不应该有这种展示
字段b 输入任意字符,闪退