feat: new component Attachments #168

zombieJ · 2024-10-24T07:23:17Z

Summary by CodeRabbit

新功能
- 引入了多个组件以支持文件上传功能，包括 DropArea、FileList、FileListCard、SilentUploader、PlaceholderUploader 和 Progress。
- 增加了拖放上传界面，用户可以通过拖放文件进行上传。
- 添加了文件列表展示功能，用户可以查看上传的文件及其状态。
- 提供了多语言支持的文档和示例，增强了用户体验。
- 引入了 Sender 组件，允许用户在对话中插入附件。
文档
- 新增了中英文文档，介绍了附件组件的使用和功能。
- 更新了示例和说明，以帮助用户更好地理解新功能。
测试
- 为新组件和功能添加了测试用例，确保其稳定性和可靠性。

coderabbitai · 2024-10-24T07:23:25Z

📝 Walkthrough

Walkthrough

此次更改引入了一系列新的 React 组件和测试文件，主要用于实现文件上传和附件管理功能。新增的组件包括 DropArea、FileListCard、Progress、PlaceholderUploader 和 SilentUploader，它们提供了拖放上传、文件列表展示、进度指示和占位符功能。同时，更新了多个测试文件以验证这些组件的功能和交互。文档也进行了本地化更新，增加了中英文的描述，以便于用户理解和使用这些新功能。

Changes

文件路径	变更摘要
components/attachments/DropArea.tsx	添加了 `DropArea` 组件和 `DropUploaderProps` 接口。
components/attachments/FileList/FileListCard.tsx	添加了 `FileListCard` 组件和 `FileListCardProps` 接口。
components/attachments/FileList/Progress.tsx	添加了 `Progress` 组件和 `ProgressProps` 接口。
components/attachments/FileList/index.tsx	添加了 `FileList` 组件和 `FileListProps` 接口。
components/attachments/PlaceholderUploader.tsx	添加了 `Placeholder` 组件和 `PlaceholderProps` 接口。
components/attachments/SilentUploader.tsx	添加了 `SilentUploader` 组件和 `SilentUploaderProps` 接口。
components/attachments/tests/demo-extend.test.ts	新增测试文件，调用 `extendTest` 函数。
components/attachments/tests/demo.test.tsx	新增测试文件，验证 `attachments` 组件的基本功能。
components/attachments/tests/drag.test.tsx	新增测试文件，验证拖放功能的交互。
components/attachments/tests/image.test.ts	新增测试文件，专注于附件组件的图像功能。
components/attachments/tests/index.test.tsx	新增测试文件，验证文件管理和溢出行为。
components/attachments/context.tsx	添加了 `AttachmentContext` 和 `AttachmentContextProps` 接口。
components/attachments/demo/_semantic.tsx	新增 `App` 组件，支持多语言显示。
components/attachments/demo/basic.md	增加中英文使用说明。
components/attachments/demo/basic.tsx	添加了 `Demo` 组件，演示文件上传功能。
components/attachments/demo/overflow.md	增加中英文使用说明。
components/attachments/demo/overflow.tsx	添加了 `Demo` 组件，演示溢出行为。
components/attachments/demo/placeholder.md	增加中英文使用说明。
components/attachments/demo/placeholder.tsx	添加了 `Demo` 组件，演示占位符功能。
components/attachments/demo/with-sender.md	增加中英文使用说明。
components/attachments/demo/with-sender.tsx	添加了 `Demo` 组件，集成发送者功能。
components/attachments/index.en-US.md	新增英文文档，介绍附件组件。
components/attachments/index.tsx	添加了 `Attachments` 组件及其相关类型。
components/attachments/index.zh-CN.md	新增中文文档，介绍附件组件。
components/attachments/style/index.ts	添加样式逻辑和相关接口。
components/attachments/util.ts	添加了 `isImageFileType` 和 `previewImage` 函数。
components/index.ts	添加了 `Attachments` 组件及其类型的导出。
components/sender/index.tsx	重构 `Sender` 组件以支持 `ref`。
components/theme/components.ts	扩展 `ComponentTokenMap` 接口以包含 `AttachmentsToken`。
components/x-provider/context.ts	在 `XComponentsConfig` 接口中添加 `attachments` 属性。
package.json	添加了新的依赖 `"@ant-design/fast-color": "^2.0.6"`。

Poem

🐇 在这片新天地，
文件上传如风飞，
拖放轻松不费力，
附件管理真便利！
中英文文档皆齐备，
让我们一起欢庆这变化的美！ 🎉

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between cc4a184 and 1bfe966.

⛔ Files ignored due to path filters (2)

components/attachments/__tests__/__snapshots__/demo-extend.test.ts.snap is excluded by !**/*.snap
components/attachments/__tests__/__snapshots__/demo.test.tsx.snap is excluded by !**/*.snap

📒 Files selected for processing (1)

components/attachments/demo/with-sender.tsx (1 hunks)

Note

🎁 Summarized by CodeRabbit Free

Your organization is on the Free plan. CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please upgrade your subscription to CodeRabbit Pro by visiting https://app.coderabbit.ai/login.

🪧 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.

github-actions · 2024-10-24T07:23:30Z

socket-security · 2024-10-24T07:26:39Z

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@ant-design/[email protected]	None	`0`	43.9 kB	zombiej
npm/@types/[email protected]	None	`0`	6.51 kB	types
npm/@types/[email protected]	None	`0`	4.36 kB	types
npm/@types/[email protected]	None	`0`	0 B
npm/@types/[email protected]	None	`0`	5.75 kB	types
npm/@types/[email protected]	None	`0`	7.36 kB	types
npm/@types/[email protected]	None	`+1`	1.68 MB	types
npm/@types/[email protected]	None	`0`	23.3 kB	types
npm/@types/[email protected]	None	`0`	8.22 kB	types
npm/@types/[email protected]	None	`0`	30.8 kB	types
npm/@types/[email protected]	None	`0`	6.48 kB	types
npm/@types/[email protected]	None	`0`	2.71 kB	types
npm/@umijs/[email protected]	environment, filesystem Transitive: unsafe	`+7`	12.3 MB	chenshuai2144
npm/[email protected]	filesystem	`0`	121 kB	cthackers
npm/[email protected]	filesystem	`0`	2.73 MB	fengmk2
npm/[email protected]	environment	`0`	191 kB	arvinxx
npm/[email protected]	None	`0`	1.22 MB	madccc
npm/[email protected]	None	`0`	7.78 kB	marcofugaro
npm/[email protected]	None	`0`	64.2 kB	ai
npm/[email protected]	None	`+2`	59.1 kB	sindresorhus
npm/[email protected]	None	`0`	1.25 MB	feedic
npm/[email protected]	None	`0`	10.5 kB	theron
npm/[email protected]	None	`0`	62.2 kB	andidittrich
npm/[email protected]	environment	`0`	29.1 kB	kentcdodds
npm/[email protected]	network	`0`	88.1 kB	lquixada
npm/[email protected]	None	`0`	778 B	ehsalazar
npm/[email protected]	None	`0`	670 kB	iamkun
npm/[email protected]	filesystem	`+1`	12.9 kB	benjycui
npm/[email protected]	None	`0`	38.7 kB	wxh16144
npm/[email protected]	environment, eval, filesystem	`+5`	6.71 MB	yifankakaxi
npm/[email protected]	None	`0`	32.5 kB	hirokiosame
npm/[email protected]	Transitive: filesystem	`+2`	290 kB	yifankakaxi
npm/[email protected]	None	`0`	12.4 kB	camsong
npm/[email protected]	Transitive: environment, filesystem	`+2`	104 kB	ryanzim
npm/[email protected]	filesystem, shell	`+6`	845 kB	tschaub
npm/[email protected]	None	`0`	475 kB	isaacs
npm/[email protected]	network, shell, unsafe	`0`	9.34 MB	davidortner
npm/[email protected]	network	`0`	1.87 MB	arvinxx
npm/[email protected]	environment, filesystem, network	`0`	124 kB	thornjad
npm/[email protected]	environment, filesystem, shell	`0`	4.03 kB	typicode
npm/[email protected]	None	`0`	8.38 kB	keyanzhang
npm/[email protected]	environment	`0`	627 kB	mweststrate
npm/[email protected]	None	`0`	75.3 kB	sboudrias
npm/[email protected]	None	`0`	3.81 kB	sibiraj-s
npm/[email protected]	Transitive: network	`+1`	169 kB	mattandrews
npm/[email protected]	None	`0`	21 kB	nickcolley
npm/[email protected]	None	`0`	112 kB	atool
npm/[email protected]	unsafe	`0`	9.37 kB	simenb
npm/[email protected]	environment, filesystem, shell	`+2`	106 kB	amexopensource
npm/[email protected]	None	`0`	3.72 kB	neoziro
npm/[email protected]	None	`0`	5.01 kB	simenb
npm/[email protected]	None	`0`	1.25 MB	timmywil
npm/[email protected]	None	`0`	3.11 MB	domenic, joris-van-der-wel, sebmaster, ...3 more
npm/[email protected]	None	`0`	21.2 kB	benjycui
npm/[email protected]	None	`0`	28.3 kB	benjycui
npm/[email protected]	Transitive: filesystem, shell	`+1`	236 kB	okonet
npm/[email protected]	None	`0`	1.34 MB	6tail
npm/[email protected]	None	`0`	176 kB	pieroxy
npm/[email protected]	Transitive: environment, filesystem	`+1`	939 kB	vitaly
npm/[email protected]	None	`0`	54.5 kB	ljharb
npm/[email protected]	None	`0`	13.8 kB	boblauer
npm/[email protected]	network	`0`	107 kB	node-fetch-bot
npm/[email protected]	environment, filesystem, network, shell	`+1`	5.69 MB	mikaelb
npm/[email protected]	None	`0`	31.8 kB	rstacruz
npm/[email protected]	environment	`0`	55.2 kB	sindresorhus
npm/[email protected]	environment	`+1`	70.8 kB	sindresorhus
npm/[email protected]	None	`0`	16 kB	mourner
npm/[email protected]	None	`0`	650 kB	lukeapage
npm/[email protected]	None	`0`	229 kB	hosseinmdeveloper
npm/[email protected]	environment, filesystem, unsafe	`0`	7.7 MB	prettier-bot
npm/[email protected]	None	`0`	60.7 kB	simenb
npm/[email protected]	None	`0`	2.05 MB	rundevelopment
npm/[email protected]	environment	`0`	341 kB	google-wombot
npm/[email protected]	None	`0`	25.1 kB	afc163
npm/[email protected]	environment	`0`	36.5 kB	zombiej
npm/[email protected]	environment	`0`	137 kB	zombiej
npm/[email protected]	None	`0`	40.6 kB	nkbt
npm/[email protected]	None	`0`	33.5 kB	mapkeji
npm/[email protected]	environment	`0`	1.6 MB	sergei-startsev
npm/[email protected]	None	`0`	177 kB	ankeetmaini
npm/[email protected]	None	`0`	129 kB	thebuilder
npm/[email protected]	None	`0`	116 kB	strml
npm/[email protected]	None	`0`	895 kB	chancestrickland, mjackson, timdorr
npm/[email protected]	None	`0`	17.8 kB	danielberndt
npm/[email protected]	None	`0`	27.9 kB	benjamn
npm/[email protected]	None	`+1`	85.7 kB	wooorm
npm/[email protected]	None	`0`	18.5 kB	wooorm
npm/[email protected]	None	`+4`	259 kB	wooorm
npm/[email protected]	None	`0`	29.4 kB	wooorm
npm/[email protected]	None	`+1`	74.5 kB	wooorm
npm/[email protected]	None	`+1`	77.4 kB	wooorm
npm/[email protected]	None	`+1`	109 kB	wooorm
npm/[email protected]	None	`+4`	254 kB	wooorm
npm/[email protected]	environment	`0`	503 kB	lovell
npm/[email protected]	shell	`0`	955 kB	steveukx
npm/[email protected]	None	`0`	35.7 kB	ai
npm/[email protected]	environment	`0`	40.8 kB	jcarpanelli
npm/[email protected]	None	`0`	245 kB	constverum
npm/[email protected]	None	`0`	8.89 kB	ybiquitous
npm/[email protected]	None	`0`	21.2 kB	bpscott
npm/[email protected]	environment Transitive: filesystem	`+6`	2.25 MB	ybiquitous
npm/[email protected]	filesystem Transitive: environment	`+4`	1.28 MB	chenshuai2144
npm/[email protected]	filesystem	`0`	16.9 kB	mafintosh
npm/[email protected]	environment, filesystem	`+1`	1.26 MB	isaacs
npm/[email protected]	None	`0`	2.2 MB	fabiosantoscode
npm/[email protected]	None	`0`	426 kB	hirokiosame
npm/[email protected]	None	`0`	1.77 MB	typedoc-bot
npm/[email protected]	eval	`+1`	9.45 MB	josdejong
npm/[email protected]	None	`0`	165 kB	micku7zu
npm/[email protected]	None	`0`	441 kB	mattiasbuelens
npm/[email protected]	environment, filesystem, network Transitive: shell	`+1`	1.38 MB	valscion
npm/[email protected]	Transitive: environment, filesystem	`+3`	5.21 MB	evilebottnawi, jhnns, sokra, ...1 more

View full report↗︎

cloudflare-workers-and-pages · 2024-10-24T07:50:49Z

Deploying ant-design-x with Cloudflare Pages

Latest commit:	`1bfe966`
Status:	✅ Deploy successful!
Preview URL:	https://c90ec400.ant-design-x.pages.dev
Branch Preview URL:	https://attachment.ant-design-x.pages.dev

View logs

afc163 · 2024-10-25T02:23:49Z

这是 bug？光标位置好奇怪。

YumoImer

+1

afc163 · 2024-10-25T02:25:18Z

需要支持图片和文件的剪切板粘贴到输入框，具体交互可参考 ChatGPT。

afc163 · 2024-10-25T02:26:10Z

Demo 都加上 Sender 看配合效果吧，单独演示比较奇怪。

components/attachments/FileList/index.tsx

afc163 · 2024-10-25T02:33:02Z

上传一个文件后再收起来，这里是否要加上文件数量做标识？

zombieJ · 2024-10-25T02:33:35Z

需要支持图片和文件的剪切板粘贴到输入框，具体交互可参考 ChatGPT。

👌 我开个新的 PR 搞一下~

Demo 都加上 Sender 看配合效果吧，单独演示比较奇怪。

我调整一下，不过 Attachments 不是和 Sender 强绑定的。一些能力展示的就不加 Sender 了，方便拷贝。

zombieJ · 2024-10-25T06:46:16Z

上传一个文件后再收起来，这里是否要加上文件数量做标识？

好主意。数字展示会比较大，加个 dot（另外把 Button type 改了一下，text 时会觉得 Badge 太过遥远）

zombieJ added 17 commits October 17, 2024 14:24

chore: init

4832896

docs: drap upload

abb18c8

chore: support placeholder

4416ac7

feat: placeholder drag

e031bd0

docs: update doc

507b11c

feat: file list

9613407

chore: filelist attachment

34d7f82

chore: img style

d863cd9

feat: img scale

0abb823

chore: type of it

c441055

chore: droparea support container

f36a319

chore: good for drop

5743d3a

docs: update demo

ef11a34

Merge remote-tracking branch 'origin/main' into attachment

2612293

docs: demo

f88654c

test: basic test case

91209e6

test: coverage

aa259dd

zombieJ added 6 commits October 24, 2024 16:18

docs: semantic block

dee7f77

docs: update demo

07eb40c

chore: fix lint

e8d79eb

test: update snapshot

e37266a

test: update snapshot

59708bc

chore: update lock file

b918d7b

zombieJ changed the title ~~[WIP] feat: new component Attachments~~ feat: new component Attachments Oct 24, 2024

test: update snapshot

ee15fca

YumoImer approved these changes Oct 25, 2024

View reviewed changes

afc163 reviewed Oct 25, 2024

View reviewed changes

components/attachments/FileList/index.tsx Outdated Show resolved Hide resolved

zombieJ added 5 commits October 25, 2024 10:35

chore: merge main

96bb07c

docs: update demo

70222c8

chore: update lock file

df87bb9

chore: adjust code

cc4a184

docs: update demo

9e51079

test: update snapshot

1bfe966

zombieJ merged commit 6bb917f into main Oct 25, 2024
10 checks passed

zombieJ deleted the attachment branch October 25, 2024 07:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: new component Attachments #168

feat: new component Attachments #168

zombieJ commented Oct 24, 2024 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Oct 24, 2024 •

edited

Loading

Walkthrough

Changes

Poem

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

github-actions bot commented Oct 24, 2024 •

edited

Loading

socket-security bot commented Oct 24, 2024 •

edited

Loading

cloudflare-workers-and-pages bot commented Oct 24, 2024 •

edited

Loading

afc163 commented Oct 25, 2024 •

edited

Loading

YumoImer left a comment

afc163 commented Oct 25, 2024

afc163 commented Oct 25, 2024

afc163 commented Oct 25, 2024

zombieJ commented Oct 25, 2024

zombieJ commented Oct 25, 2024 •

edited

Loading

feat: new component Attachments #168

feat: new component Attachments #168

Conversation

zombieJ commented Oct 24, 2024 • edited by coderabbitai bot Loading

Summary by CodeRabbit

coderabbitai bot commented Oct 24, 2024 • edited Loading

Walkthrough

Changes

Poem

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

github-actions bot commented Oct 24, 2024 • edited Loading

socket-security bot commented Oct 24, 2024 • edited Loading

cloudflare-workers-and-pages bot commented Oct 24, 2024 • edited Loading

Deploying ant-design-x with Cloudflare Pages

afc163 commented Oct 25, 2024 • edited Loading

YumoImer left a comment

Choose a reason for hiding this comment

afc163 commented Oct 25, 2024

afc163 commented Oct 25, 2024

afc163 commented Oct 25, 2024

zombieJ commented Oct 25, 2024

zombieJ commented Oct 25, 2024 • edited Loading

zombieJ commented Oct 24, 2024 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Oct 24, 2024 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

github-actions bot commented Oct 24, 2024 •

edited

Loading

socket-security bot commented Oct 24, 2024 •

edited

Loading

cloudflare-workers-and-pages bot commented Oct 24, 2024 •

edited

Loading

afc163 commented Oct 25, 2024 •

edited

Loading

zombieJ commented Oct 25, 2024 •

edited

Loading