Add autoSize property to Sender component #637
Conversation
Fixes ant-design#635 --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/ant-design/x/issues/635?shareId=XXXX-XXXX-XXXX-XXXX).
📝 WalkthroughWalkthrough此次 PR 在 Sender 组件中新增了 Changes
Sequence Diagram(s)sequenceDiagram
participant Demo as Demo组件
participant Sender as Sender组件
participant Input as InputTextArea组件
Demo->>Sender: 传入 autoSize {minRows:2, maxRows:6}
Sender->>Input: 调用 InputTextArea(autoSize)
Assessment against linked issues
Possibly related PRs
Suggested reviewers
Poem
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
|
WalkthroughThis pull request introduces an Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
| @@ -114,6 +115,7 @@ const ForwardSender = React.forwardRef<SenderRef, SenderProps>((props, ref) => { | |||
| header, | |||
| onPaste, | |||
| onPasteFile, | |||
| autoSize = { maxRows: 8 }, | |||
There was a problem hiding this comment.
Ensure that the default value for autoSize is correctly set and does not conflict with other properties or expected behaviors of the Sender component.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
components/sender/demo/basic.tsx(1 hunks)components/sender/index.en-US.md(1 hunks)components/sender/index.tsx(3 hunks)components/sender/index.zh-CN.md(1 hunks)
🧰 Additional context used
🪛 LanguageTool
components/sender/index.en-US.md
[uncategorized] ~56-~56: It appears that a hyphen is missing (if ‘auto’ is not used in the context of ‘cars’).
Context: ...) => void | - | - | | autoSize | Height auto size feature, can be set to true | false or...
(AUTO_HYPHEN)
🪛 markdownlint-cli2 (0.17.2)
components/sender/index.en-US.md
56-56: Table column count
Expected: 5; Actual: 4; Too few cells, row will be missing data
(MD056, table-column-count)
🔇 Additional comments (5)
components/sender/demo/basic.tsx (1)
41-41: 非常好！示例演示了自适应高度功能通过为
Sender组件添加autoSize属性并设置minRows和maxRows值，很好地展示了新增功能的使用方式。这使输入框可以根据内容自动调整高度，提升了用户体验。components/sender/index.zh-CN.md (1)
57-57: 属性文档完整清晰，表格结构正确
autoSize属性的文档说明非常清晰，包含了完整的类型定义和默认值，表格结构也符合规范，有助于用户理解和使用此功能。components/sender/index.tsx (3)
77-77: 接口定义正确，使用可选参数
SenderProps接口中autoSize属性的类型定义正确，使用可选参数（?）允许用户根据需求决定是否使用此功能。类型定义也与文档保持一致。
118-118: 默认值设置合理为
autoSize属性提供了默认值{ maxRows: 8 }，这与文档中描述的默认值一致，并且提供了合理的初始体验。
313-313: 属性传递实现正确正确地将
autoSize属性传递给InputTextArea组件，替换了之前硬编码的值，实现了动态调整文本区域高度的功能。
| @@ -53,6 +53,7 @@ Common props ref：[Common props](/docs/react/common-props) | |||
| | onChange | Callback when input value changes | (value: string, event?: React.FormEvent<`HTMLTextAreaElement`> \| React.ChangeEvent<`HTMLTextAreaElement`> ) => void | - | - | | |||
| | onCancel | Callback when click cancel button | () => void | - | - | | |||
| | onPasteFile | Callback when paste files | (firstFile: File, files: FileList) => void | - | - | | |||
| | autoSize | Height auto size feature, can be set to true \| false or an object { minRows: 2, maxRows: 6 } | { maxRows: 8 } | - | | |||
There was a problem hiding this comment.
表格缺少类型列，需要补充类型信息
当前 autoSize 属性的表格行缺少类型列的信息，这导致表格列数不一致，可能会影响文档渲染效果。
请将 autoSize 属性的表格行修改为以下内容：
-| autoSize | Height auto size feature, can be set to true \| false or an object { minRows: 2, maxRows: 6 } | { maxRows: 8 } | - |
+| autoSize | Height auto size feature, can be set to true \| false or an object { minRows: 2, maxRows: 6 } | boolean \| { minRows?: number; maxRows?: number } | { maxRows: 8 } | - |另外，可以考虑将 "auto size" 修改为 "auto-size" 以保持一致的拼写规范。
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| | autoSize | Height auto size feature, can be set to true \| false or an object { minRows: 2, maxRows: 6 } | { maxRows: 8 } | - | | |
| | autoSize | Height auto size feature, can be set to true \| false or an object { minRows: 2, maxRows: 6 } | boolean \| { minRows?: number; maxRows?: number } | { maxRows: 8 } | - | |
🧰 Tools
🪛 LanguageTool
[uncategorized] ~56-~56: It appears that a hyphen is missing (if ‘auto’ is not used in the context of ‘cars’).
Context: ...) => void | - | - | | autoSize | Height auto size feature, can be set to true | false or...
(AUTO_HYPHEN)
🪛 markdownlint-cli2 (0.17.2)
56-56: Table column count
Expected: 5; Actual: 4; Too few cells, row will be missing data
(MD056, table-column-count)
There was a problem hiding this comment.
@kimteayon 您说得对，表格行缺少了 Version 列。实际上是因为缺少了 Type 列，导致后面的列都错位了。下面是修正后的完整表格行，包含了所有5列（Property、Description、Type、Default 和 Version）：
| autoSize | Height auto size feature, can be set to true \| false or an object { minRows: 2, maxRows: 6 } | boolean \| { minRows?: number; maxRows?: number } | { maxRows: 8 } | - |
Fixes #635
For more details, open the Copilot Workspace session.
Summary by CodeRabbit