nutui-react icon indicating copy to clipboard operation
nutui-react copied to clipboard

feat(form): 多端适配

Open oasis-cloud opened this issue 1 year ago • 1 comments

由于 RN 和 鸿蒙的选择器只能支持 类选择、多类选择器和伪元素选择器,所以无法实现通过 form 控制 input textarea 等的样式,需要从视觉层面来进行一些组件样式的修复。这样可以确保放到 form 中样式表现良好。

Summary by CodeRabbit

  • 新特性

    • 添加了 async-validator 依赖,提升了应用的验证功能。
    • Demo1 组件中,输入字段的最大字符限制从 5 增加到 7。
    • 增强了表单组件的适配性,支持不同平台的条件渲染。
    • 更新了表单组件的样式,改善了视觉层次和可用性,特别是对 RTL 语言的支持。
  • Bug 修复

    • 修复了表单项的错误状态样式,确保更好的用户体验。
  • 文档

    • 更新了组件的上下文访问方式,增强了灵活性和可维护性。

oasis-cloud avatar Sep 13 '24 07:09 oasis-cloud

[!IMPORTANT]

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

本次变更主要涉及多个文件的更新,增强了表单组件的功能和样式。copy-file.js 脚本新增了对 formitem 组件的处理,config.json 文件中更新了多个组件的版本和属性。表单相关的组件(如 FormFormItem)进行了接口和渲染逻辑的改进,添加了新的属性如 disabledvalidateTrigger,并引入了新的实用函数 mergetoArray 来优化状态管理。样式文件也进行了大幅修改,以改善表单项的布局和视觉表现。

Changes

文件路径 变更摘要
scripts/rn/copy-file.js 新增字符串 'formitem'childAdaptedArray,更新 copyFile 函数以处理 formitem 组件。
src/config.json 多个组件版本从 2.0.0 更新到 3.0.0,新增 InputInputNumberRangeSwitchTextArea 组件。
src/packages/form/demos/taro/demo1.tsx 移除 InputNumber 组件,更新 username 字段的验证规则,修改 TextArea 组件的样式。
src/packages/formitem/formitem.taro.tsx 中心化上下文方法访问,新增 getClassNameWithDirection 方法,更新 align 属性为必填。
src/packages/form/form.taro.tsx 新增 disabledvalidateTrigger 属性,更新渲染逻辑使用 <TForm> 组件。
src/packages/form/form.tsx 新增 disabledvalidateTrigger 属性,更新上下文值。
src/packages/form/useform.taro.ts 新增 updateStore 方法,更新 setInitialValuessetFieldsValue 方法以合并值。
src/packages/form/useform.ts 新增 updateStore 方法,更新 setInitialValuessetFieldsValue 方法以合并值。
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?

❤️ Share
🪧 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 @coderabbitai in 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 @coderabbitai in 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 pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file 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.

coderabbitai[bot] avatar Sep 13 '24 07:09 coderabbitai[bot]

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.

codecov[bot] avatar Nov 05 '24 06:11 codecov[bot]

harmony下面,表单验证 label和 input错位 image

irisSong avatar Nov 07 '24 05:11 irisSong

harmony下面, label字体太小了 image

irisSong avatar Nov 07 '24 05:11 irisSong

image 字段b 输入任意字符,闪退

irisSong avatar Nov 07 '24 05:11 irisSong

image 输入字段,点击enter会有校验错误,不应该有这种展示

irisSong avatar Nov 07 '24 05:11 irisSong

image 输入字段,点击enter会有校验错误,不应该有这种展示

taro input 获取 value 的逻辑变了,需要先修复 input

oasis-cloud avatar Nov 08 '24 06:11 oasis-cloud

image 字段b 输入任意字符,闪退

taro input 获取 value 的逻辑变了,需要先修复 input

oasis-cloud avatar Nov 08 '24 06:11 oasis-cloud

升级鸿蒙又不行了,暂时转到 draft 状态

oasis-cloud avatar Dec 03 '24 07:12 oasis-cloud