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

fix(Icon): 适配 rn 和 鸿蒙

Open xiaoyatong opened this issue 1 year ago • 1 comments

Summary by CodeRabbit

  • 新功能

    • 为 HarmonyOS 添加了签名配置。
  • 改进

    • 更新了 Icon 组件的版本,从 2.0.0 升级到 3.0.0。
    • 在 Taro Demo 中增加了 icon 组件的导出。
  • 重构

    • 重新导出 Icon 页面中的 Demo 组件。
    • 在多个 Icon 的 Demo 示例中,将根片段替换为 Cell 组件,优化了界面布局和结构。

xiaoyatong avatar Jun 26 '24 01:06 xiaoyatong

Walkthrough

此次更新涉及多个文件的更改,主要包括为 HarmonyOS 添加签名配置、在 Taru Demo 项目中增加 icon 组件导出、更改图标组件的版本以及多个 demo 示例组件的结构和导入调整。这些改动旨在提升项目的兼容性和模块化结构。

Changes

文件路径 更改摘要
packages/nutui-harmony/build-profile.json5 新增 HarmonyOS 签名配置。
...scripts/taro/adapted.js 增加 icon 组件导出。
.../icon/index.tsx 导出不同的组件 (Demo from demo.taro) 替代原先的按钮组件。
src/config.json 更新 Icon 实体的版本从 2.0.0 升级到 3.0.0
.../icon/demo.taro.tsx 移除 Cell 组件及相关导入,调整结构并直接渲染 Demo 1-5 组件。
.../demos/taro/demo1.tsx 导入 Cell 组件,并将 JSX 元素包裹在 Cell 组件内。
.../demos/taro/demo2.tsx 使用 Cell 组件替代根部的 <> 片段。
.../demos/taro/demo3.tsx 导入 Cell 组件,并将 IconFont 组件包裹在 Cell 组件内。
.../demos/taro/demo4.tsx 使用 Cell 组件替代根部的 <> 片段。
.../demos/taro/demo5.tsx 使用 Cell 组件替代片段,并包裹多个不同样式的 IconFont 元素。

Poem

代码变更如微风,
签名配置新融融。
Icon 组件亦重生,
版本更新舞东风。
Taro 示例更改荣,
Cell 包裹显真功。
代码美如画,AI 助力皆成功。 🐰


Recent review details

Configuration used: CodeRabbit UI Review profile: CHILL

Commits

Files that changed from the base of the PR and between 5057098cb08654849b3be2c2989ee8f29839798c and f290e913a06dc0e07b5c7e01ce57749cde2a10d3.

Files selected for processing (10)
  • packages/nutui-harmony/build-profile.json5 (1 hunks)
  • packages/nutui-taro-demo-rn/scripts/taro/adapted.js (1 hunks)
  • packages/nutui-taro-demo-rn/src/base/pages/icon/index.tsx (1 hunks)
  • src/config.json (1 hunks)
  • src/packages/icon/demo.taro.tsx (2 hunks)
  • src/packages/icon/demos/taro/demo1.tsx (1 hunks)
  • src/packages/icon/demos/taro/demo2.tsx (1 hunks)
  • src/packages/icon/demos/taro/demo3.tsx (1 hunks)
  • src/packages/icon/demos/taro/demo4.tsx (2 hunks)
  • src/packages/icon/demos/taro/demo5.tsx (1 hunks)
Files skipped from review due to trivial changes (1)
  • src/config.json
Additional context used
Biome
packages/nutui-taro-demo-rn/scripts/taro/adapted.js

[error] 1-1: A global variable should not be reassigned. (lint/suspicious/noGlobalAssign)

Assigning to a global variable can override essential functionality.

Additional comments not posted (9)
packages/nutui-taro-demo-rn/src/base/pages/icon/index.tsx (1)

1-2: 代码整洁且简洁。

这个改动直接使用了demo.taro作为默认导出,简化了组件的引用结构,符合单一职责原则。

src/packages/icon/demos/taro/demo1.tsx (1)

2-11: 组件封装使用良好。

通过Cell组件封装,增加了组件的整体样式和结构的一致性。这种做法有助于保持UI组件之间的一致性和可维护性。

src/packages/icon/demos/taro/demo2.tsx (1)

2-11: 组件封装使用良好。

demo1.tsx相似,这里通过使用Cell组件来封装IconFont组件,同样提高了样式的一致性和代码的可维护性。

src/packages/icon/demos/taro/demo3.tsx (1)

2-12: 组件封装使用良好。

Cell组件的使用为IconFont组件提供了统一的视觉和结构框架,这是一种很好的实践,尤其是在维护样式一致性方面。

src/packages/icon/demos/taro/demo5.tsx (1)

2-11: 组件封装使用良好。

这里通过Cell组件封装多个IconFont组件,并且通过不同的大小设置展示了组件的灵活性。这种封装方式既保证了样式的统一,也展示了组件的可配置性。

packages/nutui-taro-demo-rn/scripts/taro/adapted.js (1)

36-36: 添加'icon'组件到导出列表

这个改动是为了支持 React Native 版本的图标组件。请确保所有依赖此导出的文件都已更新,以避免任何断裂的依赖。

src/packages/icon/demos/taro/demo4.tsx (1)

Line range hint 2-19: 优化 JSX 结构

通过将 IconFont 组件包裹在 Cell 组件中,可以更好地管理样式和布局。这种改动有助于保持组件的一致性和可维护性。

packages/nutui-harmony/build-profile.json5 (1)

3-16: 添加 HarmonyOS 签名配置

此更改为 HarmonyOS 应用程序部署添加了签名配置。请确保敏感信息(如密码和密钥)安全存储和管理,避免泄露。

src/packages/icon/demo.taro.tsx (1)

Line range hint 4-84: 简化组件结构

通过移除不必要的 Cell, ScrollView, 和 View 组件导入,并直接渲染 Demo 组件,简化了代码结构。这有助于提高代码的可读性和维护性。


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:

:bangbang: IMPORTANT Auto-reply has been disabled for this repository in the CodeRabbit settings. The CodeRabbit bot will not respond to your replies unless it is explicitly tagged.

  • 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 generate interesting stats about this repository and render them as a table.
    • @coderabbitai show all the console.log statements in this repository.
    • @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 as 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.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration 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 Jun 26 '24 01:06 coderabbitai[bot]