FatahChan 6562c20134 demo: add List drag sorting examples (#55077)
* docs: List drag sorting examples

* refactor: standardize React imports and use consistent import patterns

* fix: add null checks and remove optional chaining in drag sorting handlers

* Update components/list/demo/grid-drag-sorting.md

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Signed-off-by: FatahChan <ahmadfathallah89@gmail.com>

* Update components/list/demo/grid-drag-sorting-handler.md

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Signed-off-by: FatahChan <ahmadfathallah89@gmail.com>

* chore: add React import to list demo components

* fix: tests

* refactor: improve drag sorting accessibility by wrapping list items in semantic containers

* Update components/list/demo/drag-sorting-handler.tsx

Co-authored-by: lijianan <574980606@qq.com>
Signed-off-by: FatahChan <ahmadfathallah89@gmail.com>

* Update components/list/demo/grid-drag-sorting.tsx

Co-authored-by: lijianan <574980606@qq.com>
Signed-off-by: FatahChan <ahmadfathallah89@gmail.com>

* Update components/list/demo/drag-sorting.tsx

Co-authored-by: lijianan <574980606@qq.com>
Signed-off-by: FatahChan <ahmadfathallah89@gmail.com>

* Update components/list/demo/grid-drag-sorting-handler.tsx

Co-authored-by: lijianan <574980606@qq.com>
Signed-off-by: FatahChan <ahmadfathallah89@gmail.com>

* fix: remove itemkey prop from list items in drag-sorting demos

* test: skip drag sorting demos in list component tests

* fix: update drag-sorting aria-describedby IDs to be more semantic and consistent

* test: update DndLiveRegion IDs in list component snapshots

* test: skip drag sorting demos in list component tests

dnd ids produce difference ids in react 17 vs react 19, and fails the demo-extend as the snap is different

* refactor: update list drag sorting to use object items with unique keys

* update code style

* update code style

---------

Signed-off-by: FatahChan <ahmadfathallah89@gmail.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: lijianan <574980606@qq.com>
2025-09-19 05:55:38 +08:00
2025-09-02 17:54:04 +08:00
2018-11-12 14:18:16 +08:00
2025-09-02 17:54:04 +08:00
2019-02-08 10:01:01 +08:00
2025-01-09 19:37:04 +08:00
2022-11-09 12:28:04 +08:00
2022-11-18 15:04:45 +08:00
2024-08-29 16:42:29 +08:00
2018-11-28 12:16:59 +08:00
2025-09-19 02:15:52 +08:00

Ant Design

An enterprise-class UI design language and React UI library.

CI status codecov NPM version NPM downloads LFX Health Score

FOSSA Status DeepWiki

Follow Twitter Renovate status dumi Issues need help

Changelog · Report Bug · Request Feature · English · 中文

❤️ Sponsors

Features

  • 🌈 Enterprise-class UI designed for web applications.
  • 📦 A set of high-quality React components out of the box.
  • 🛡 Written in TypeScript with predictable static types.
  • ⚙️ Whole package of design resources and development tools.
  • 🌍 Internationalization support for dozens of languages.
  • 🎨 Powerful theme customization based on CSS-in-JS.

🖥 Environment Support

  • Modern browsers
  • Server-side Rendering
  • Electron
Edge
Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Electron
Electron
Edge last 2 versions last 2 versions last 2 versions last 2 versions

📦 Install

npm install antd
yarn add antd
pnpm add antd
bun add antd

🔨 Usage

import { Button, DatePicker } from 'antd';

export default () => (
  <>
    <Button type="primary">PRESS ME</Button>
    <DatePicker placeholder="select date" />
  </>
);

⌨️ Development

Use opensumi.run, a free online pure front-end dev environment.

opensumi.run

Or clone locally:

$ git clone git@github.com:ant-design/ant-design.git
$ cd ant-design
$ npm install
$ npm start

Open your browser and visit http://127.0.0.1:8001, see more at Development.

🤝 Contributing PRs Welcome

Top Contributors of ant-design/ant-design - Last 28 days Performance Stats of ant-design/ant-design - Last 28 days
New participants of ant-design - past 28 days
Contribution Leaderboard

Let's build a better antd together.

We warmly invite contributions from everyone. Before you get started, please take a moment to review our Contribution Guide. Feel free to share your ideas through Pull Requests or GitHub Issues. If you're interested in enhancing our codebase, explore the Development Instructions and enjoy your coding journey! :)

For collaborators, adhere to our Pull Request Principle and utilize our Pull Request Template when creating a Pull Request.

Issue funding

We use Issuehunt to up-vote and promote specific features that you would like to see and implement. Check our backlog and help us:

Let's fund issues in this repository

❤️ Backers

Languages
TypeScript 99.5%
JavaScript 0.3%