diff --git a/.dumirc.ts b/.dumirc.ts index ad57b55..ff146e8 100644 --- a/.dumirc.ts +++ b/.dumirc.ts @@ -1,13 +1,18 @@ // more config: https://d.umijs.org/config import { defineConfig } from 'dumi'; +const basePath = process.env.GH_PAGES ? '/dropdown/' : '/'; +const publicPath = basePath; + export default defineConfig({ favicons: ['https://avatars0.githubusercontent.com/u/9441414?s=200&v=4'], themeConfig: { name: 'rc-dropdown', logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4', }, - outputPath: '.docs', + outputPath: 'docs-dist', + base: basePath, + publicPath, exportStatic: {}, styles: [ ` diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 0000000..758659a --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1,2 @@ +github: ant-design +open_collective: ant-design diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 5990d9c..3b730ef 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -1,11 +1,19 @@ -# To get started with Dependabot version updates, you'll need to specify which -# package ecosystems to update and where the package manifests are located. -# Please see the documentation for all configuration options: -# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file - version: 2 updates: - - package-ecosystem: "" # See documentation for possible values - directory: "/" # Location of package manifests + - package-ecosystem: npm + directory: '/' + schedule: + interval: weekly + day: monday + time: '21:00' + timezone: Asia/Shanghai + open-pull-requests-limit: 10 + + - package-ecosystem: github-actions + directory: '/' schedule: - interval: "weekly" + interval: weekly + day: monday + time: '21:00' + timezone: Asia/Shanghai + open-pull-requests-limit: 10 diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index b50874b..a685269 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -2,7 +2,10 @@ name: CI on: ['push', 'pull_request'] +permissions: + contents: read jobs: CI: - uses: react-component/rc-test/.github/workflows/test.yml@main - secrets: inherit + uses: react-component/rc-test/.github/workflows/test-utoo.yml@main + secrets: + CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }} diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml index ca134dd..0446c60 100644 --- a/.github/workflows/codeql.yml +++ b/.github/workflows/codeql.yml @@ -1,12 +1,12 @@ -name: "CodeQL" +name: 'CodeQL' on: push: - branches: [ "master" ] + branches: ['master'] pull_request: - branches: [ "master" ] + branches: ['master'] schedule: - - cron: "38 3 * * 6" + - cron: '38 3 * * 6' jobs: analyze: @@ -20,22 +20,24 @@ jobs: strategy: fail-fast: false matrix: - language: [ javascript ] + language: [javascript] steps: - name: Checkout - uses: actions/checkout@v3 + uses: actions/checkout@v7 + with: + persist-credentials: false - name: Initialize CodeQL - uses: github/codeql-action/init@v2 + uses: github/codeql-action/init@8aad20d150bbac5944a9f9d289da16a4b0d87c1e with: languages: ${{ matrix.language }} queries: +security-and-quality - name: Autobuild - uses: github/codeql-action/autobuild@v2 + uses: github/codeql-action/autobuild@8aad20d150bbac5944a9f9d289da16a4b0d87c1e - name: Perform CodeQL Analysis - uses: github/codeql-action/analyze@v2 + uses: github/codeql-action/analyze@8aad20d150bbac5944a9f9d289da16a4b0d87c1e with: - category: "/language:${{ matrix.language }}" + category: '/language:${{ matrix.language }}' diff --git a/.github/workflows/react-doctor.yml b/.github/workflows/react-doctor.yml new file mode 100644 index 0000000..097eb88 --- /dev/null +++ b/.github/workflows/react-doctor.yml @@ -0,0 +1,27 @@ +name: React Doctor + +on: + pull_request: + types: [opened, synchronize, reopened, ready_for_review] + push: + branches: [master] + +permissions: + contents: read + pull-requests: write + issues: write + statuses: write + +concurrency: + group: react-doctor-${{ github.event.pull_request.number || github.ref }} + cancel-in-progress: true + +jobs: + react-doctor: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v7 + with: + fetch-depth: 0 + persist-credentials: false + - uses: millionco/react-doctor@0b4f4f4bd248a154e64eb508a48347f71154b3f3 diff --git a/.github/workflows/surge-preview.yml b/.github/workflows/surge-preview.yml new file mode 100644 index 0000000..4c2f17e --- /dev/null +++ b/.github/workflows/surge-preview.yml @@ -0,0 +1,54 @@ +name: Surge Preview + +on: + pull_request: + +concurrency: + group: ${{ github.workflow }}-${{ github.event.pull_request.number }} + cancel-in-progress: true + +permissions: + contents: read + pull-requests: write + checks: write + +jobs: + preview: + runs-on: ubuntu-latest + concurrency: + group: surge-preview-${{ github.event.pull_request.number }} + cancel-in-progress: true + env: + PREVIEW: true + steps: + - uses: actions/checkout@v7 + with: + persist-credentials: false + - name: Check Surge token + id: surge-token + env: + SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }} + run: | + if [ -n "$SURGE_TOKEN" ]; then + echo "enabled=true" >> "$GITHUB_OUTPUT" + else + echo "enabled=false" >> "$GITHUB_OUTPUT" + fi + - name: Build preview + if: ${{ steps.surge-token.outputs.enabled == 'true' }} + run: | + npm install + npm run build + - uses: afc163/surge-preview@bf90a5a86111f6311ca42f0a5a0f80fb0fb03cec + if: ${{ steps.surge-token.outputs.enabled == 'true' }} + env: + SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }} + with: + surge_token: ${{ env.SURGE_TOKEN }} + github_token: ${{ secrets.GITHUB_TOKEN }} + dist: docs-dist + failOnError: false + setCommitStatus: false + - name: Skip Surge preview + if: ${{ steps.surge-token.outputs.enabled != 'true' }} + run: echo "SURGE_TOKEN is not configured; skip Surge preview." diff --git a/.gitignore b/.gitignore index b0774d5..26de349 100644 --- a/.gitignore +++ b/.gitignore @@ -36,3 +36,4 @@ pnpm-lock.yaml .dumi/tmp-test .dumi/tmp-production .docs +docs-dist diff --git a/.husky/pre-commit b/.husky/pre-commit index d24fdfc..2312dc5 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,4 +1 @@ -#!/usr/bin/env sh -. "$(dirname -- "$0")/_/husky.sh" - npx lint-staged diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..c466d87 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,14 @@ +node_modules +coverage +docs-dist +dist +es +lib +.dumi/tmp +.dumi/tmp-production +.vercel +package-lock.json +pnpm-lock.yaml +yarn.lock +bun.lockb +*.log diff --git a/README.md b/README.md index 2239225..75ac90b 100644 --- a/README.md +++ b/README.md @@ -1,143 +1,81 @@ -# @rc-component/dropdown +
+

@rc-component/dropdown

+

Ant Design Part of the Ant Design ecosystem.

+

🔽 A trigger-driven dropdown component for React.

-react dropdown component. +

+ NPM version + npm downloads + build status + Codecov + bundle size + dumi +

+
-[![NPM version][npm-image]][npm-url] [![npm download][download-image]][download-url] [![build status][github-actions-image]][github-actions-url] [![Codecov][codecov-image]][codecov-url] [![bundle size][bundlephobia-image]][bundlephobia-url] [![dumi][dumi-image]][dumi-url] +

English | 简体中文

-[npm-image]: https://img.shields.io/npm/v/@rc-component/dropdown.svg?style=flat-square -[npm-url]: https://npmjs.org/package/@rc-component/dropdown -[travis-image]: https://img.shields.io/travis/react-component/dropdown/master?style=flat-square -[travis-url]: https://travis-ci.com/react-component/dropdown -[github-actions-image]: https://github.com/react-component/dropdown/actions/workflows/ci.yml/badge.svg -[github-actions-url]: https://github.com/react-component/dropdown/actions/workflows/ci.yml -[codecov-image]: https://img.shields.io/codecov/c/github/react-component/dropdown/master.svg?style=flat-square -[codecov-url]: https://app.codecov.io/gh/react-component/dropdown -[david-url]: https://david-dm.org/react-component/dropdown -[david-image]: https://david-dm.org/react-component/dropdown/status.svg?style=flat-square -[david-dev-url]: https://david-dm.org/react-component/dropdown?type=dev -[david-dev-image]: https://david-dm.org/react-component/dropdown/dev-status.svg?style=flat-square -[download-image]: https://img.shields.io/npm/dm/@rc-component/dropdown.svg?style=flat-square -[download-url]: https://npmjs.org/package/@rc-component/dropdown -[bundlephobia-url]: https://bundlephobia.com/package/@rc-component/dropdown -[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@rc-component/dropdown -[dumi-url]: https://github.com/umijs/dumi -[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square +## Highlights -## Screenshot +- Built on `@rc-component/trigger`. +- Supports hover, click, context menu, and custom trigger actions. +- Accepts a React element or render function as dropdown overlay. +- Supports align point behavior and trigger-width matching. -![](https://t.alipayobjects.com/images/rmsweb/T1bWpgXgBaXXXXXXXX.png) +## Install -## Example +```bash +npm install @rc-component/dropdown +``` -online example: http://react-component.github.io/dropdown/examples/ +## Usage -## install +```tsx | pure +import Dropdown from '@rc-component/dropdown'; +import '@rc-component/dropdown/assets/index.css'; + +export default function App() { + return ( + Dropdown content} trigger={['click']}> + + + ); +} +``` -[![@rc-component/dropdown](https://nodei.co/npm/@rc-component/dropdown.png)](https://npmjs.org/package/@rc-component/dropdown) +## Examples -## Usage +Run the local dumi site: -```js -var Dropdown = require('@rc-component/dropdown'); -// use dropdown +```bash +npm install +npm start ``` +Then open `http://localhost:8000`. + ## API -### props - - - - - - - - - - - - - - - - - - - - -           -           - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -           -           - - - - - - - - -
nametypedefaultdescription
overlayClassNameStringadditional css class of root dom node
openClassNameString`${prefixCls}-open`className of trigger when dropdown is opened
prefixClsStringrc-dropdownprefix class name
transitionNameStringdropdown menu's animation css class name
animationStringpart of dropdown menu's animation css class name
placementStringbottomLeftPosition of menu item. There are: top, topCenter, topRight, bottomLeft, bottom, bottomRight
onVisibleChangeFunctioncall when visible is changed
visiblebooleanwhether tooltip is visible
defaultVisiblebooleanwhether tooltip is visible initially
overlayrc-menurc-menu element
onOverlayClickfunction(e)call when overlay is clicked
minOverlayWidthMatchTriggerbooleantrue (false when set alignPoint)whether overlay's width must not be less than trigger's
getPopupContainerFunction(menuDOMNode): HTMLElement() => document.bodyWhere to render the DOM node of dropdown
- -Note: Additional props are passed into the underlying [rc-trigger](https://github.com/react-component/trigger) component. This can be useful for example, to display the dropdown in a separate [portal](https://reactjs.org/docs/portals.html)-driven window via the `getDocument()` rc-trigger prop. +Additional props are passed to the underlying [`@rc-component/trigger`](https://github.com/react-component/trigger) component. + +| Property | Description | Type | Default | +| --- | --- | --- | --- | +| alignPoint | Align popup to the click point | boolean | false | +| animation | Popup animation name | string | - | +| arrow | Whether to show dropdown arrow | boolean | false | +| getPopupContainer | Container where dropdown is rendered | `(node: HTMLElement) => HTMLElement` | `() => document.body` | +| minOverlayWidthMatchTrigger | Whether overlay width should be at least trigger width | boolean | `true` unless `alignPoint` is set | +| openClassName | Class name added to trigger when dropdown is open | string | `${prefixCls}-open` | +| overlay | Dropdown overlay | `React.ReactElement \| (() => React.ReactElement)` | - | +| overlayClassName | Additional overlay class name | string | - | +| overlayStyle | Overlay style | `React.CSSProperties` | - | +| placement | Dropdown placement | string | `bottomLeft` | +| prefixCls | Component class name prefix | string | `rc-dropdown` | +| transitionName | Popup transition class name | string | - | +| trigger | Trigger action | `ActionType \| ActionType[]` | `['hover']` | +| visible | Controlled visible state | boolean | - | +| onOverlayClick | Callback when overlay is clicked | `(event: Event) => void` | - | +| onVisibleChange | Callback when visibility changes | `(visible: boolean) => void` | - | ## Development @@ -146,21 +84,24 @@ npm install npm start ``` -## Test Case +The dumi site runs at `http://localhost:8000` by default. ```bash npm test -npm run chrome-test +npm run tsc +npm run lint +npm run compile +npm run build ``` -## Coverage +## Release ```bash -npm run coverage +npm run prepublishOnly ``` -open coverage/ dir +The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build. ## License -@rc-component/dropdown is released under the MIT license. +@rc-component/dropdown is released under the [MIT](./LICENSE) license. diff --git a/README.zh-CN.md b/README.zh-CN.md new file mode 100644 index 0000000..d81c375 --- /dev/null +++ b/README.zh-CN.md @@ -0,0 +1,107 @@ +
+

@rc-component/dropdown

+

Ant Design Ant Design 生态的一部分。

+

🔽 ⬇️ React 下拉菜单基础组件，基于 trigger 和 menu 能力构建。

+ +

+ NPM version + npm downloads + build status + Codecov + bundle size + dumi +

+
+ +

English | 简体中文

+ +## 特性 + +- 基于 `@rc-component/trigger` 构建。 +- 支持悬停、单击、上下文菜单和自定义触发操作。 +- 接受 React 元素或渲染函数作为下拉覆盖。 +- 支持对齐点行为和触发宽度匹配。 + +## 安装 + +```bash +npm install @rc-component/dropdown +``` + +## 使用 + +```tsx | pure +import Dropdown from '@rc-component/dropdown'; +import '@rc-component/dropdown/assets/index.css'; + +export default function App() { + return ( + Dropdown content} trigger={['click']}> + + + ); +} +``` + +## 示例 + +运行本地 dumi 站点： + +```bash +npm install +npm start +``` + +然后打开 `http://localhost:8000`。 + +## API + +额外属性会透传给底层 [`@rc-component/trigger`](https://github.com/react-component/trigger) 组件。 + +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| alignPoint | 将弹层窗口与点击点对齐 | boolean | false | +| animation | 弹层动画名称 | string | - | +| arrow | 是否显示下拉箭头 | boolean | false | +| getPopupContainer | 呈现下拉列表的容器 | `(node: HTMLElement) => HTMLElement` | `() => document.body` | +| minOverlayWidthMatchTrigger | 覆盖宽度是否至少应为触发宽度 | boolean | `true` 除非设置了 `alignPoint` | +| openClassName | 打开下拉菜单时添加到触发器的类名 | string | `${prefixCls}-open` | +| overlay | 下拉菜单内容 | `React.ReactElement \| (() => React.ReactElement)` | - | +| overlayClassName | 附加弹层类名 | string | - | +| overlayStyle | 叠加样式 | `React.CSSProperties` | - | +| placement | 下拉菜单位置 | string | `bottomLeft` | +| prefixCls | 组件类名前缀 | string | `rc-dropdown` | +| transitionName | 弹层过渡类名 | string | - | +| trigger | 触发动作 | `ActionType \| ActionType[]` | `['hover']` | +| visible | 受控可见状态 | boolean | - | +| onOverlayClick | 点击下拉菜单内容时的回调 | `(event: Event) => void` | - | +| onVisibleChange | 可见性变化时的回调 | `(visible: boolean) => void` | - | + +## 本地开发 + +```bash +npm install +npm start +``` + +dumi 站点默认运行在 `http://localhost:8000`。 + +```bash +npm test +npm run tsc +npm run lint +npm run compile +npm run build +``` + +## 发布 + +```bash +npm run prepublishOnly +``` + +包构建完成后，发布流程由 `@rc-component/np` 通过 `rc-np` 命令处理。 + +## 许可证 + +@rc-component/dropdown 基于 [MIT](./LICENSE) 许可证发布。 diff --git a/now.json b/now.json deleted file mode 100644 index 745d0e5..0000000 --- a/now.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "version": 2, - "name": "rc-dropdown", - "builds": [ - { - "src": "package.json", - "use": "@now/static-build", - "config": { "distDir": ".docs" } - } - ] -} diff --git a/package.json b/package.json index e2b3164..3dc9d06 100644 --- a/package.json +++ b/package.json @@ -6,13 +6,13 @@ "react", "react-dropdown" ], - "homepage": "http://github.com/react-component/dropdown", + "homepage": "https://react-component.github.io/dropdown", "bugs": { - "url": "http://github.com/react-component/dropdown/issues" + "url": "https://github.com/react-component/dropdown/issues" }, "repository": { "type": "git", - "url": "git@github.com:react-component/dropdown.git" + "url": "https://github.com/react-component/dropdown.git" }, "license": "MIT", "maintainers": [ @@ -31,17 +31,15 @@ "compile": "father build && lessc assets/index.less assets/index.css", "coverage": "rc-test --coverage", "lint": "eslint src/ docs/examples/ --ext .tsx,.ts,.jsx,.js", - "now-build": "npm run build", - "prepare": "husky install && dumi setup", + "prepare": "husky && dumi setup", "prepublishOnly": "npm run compile && rc-np", + "prettier": "prettier --write --ignore-unknown .", "start": "dumi dev", - "test": "rc-test" + "test": "rc-test", + "tsc": "tsc --noEmit" }, "lint-staged": { - "**/*.{js,jsx,tsx,ts,md,json}": [ - "prettier --write", - "git add" - ] + "*": "prettier --write --ignore-unknown" }, "dependencies": { "@rc-component/trigger": "^3.0.0", @@ -51,32 +49,36 @@ "devDependencies": { "@rc-component/father-plugin": "^2.2.0", "@rc-component/menu": "^1.0.0", - "@rc-component/np": "^1.0.3", + "@rc-component/np": "^1.0.4", "@rc-component/resize-observer": "^1.0.0", - "@testing-library/jest-dom": "^5.16.5", - "@testing-library/react": "^14.0.0", - "@types/jest": "^29.0.0", - "@types/node": "^24.5.2", - "@types/react": "^18.0.0", - "@types/react-dom": "^18.0.0", - "@types/warning": "^3.0.0", - "@umijs/fabric": "^3.0.0", - "dumi": "^2.0.0", - "eslint": "^7.18.0", - "father": "^4.0.0", - "glob": "^10.0.0", - "husky": "^8.0.3", - "jest-environment-jsdom": "^29.5.0", - "less": "^4.1.1", - "lint-staged": "^13.2.1", - "prettier": "^2.8.7", - "rc-test": "^7.0.14", - "react": "^18.0.0", - "react-dom": "^18.0.0", - "typescript": "^5.0.0" + "@testing-library/jest-dom": "^6.9.1", + "@testing-library/react": "^15.0.7", + "@types/jest": "^29.5.14", + "@types/node": "^26.0.1", + "@types/react": "^18.3.31", + "@types/react-dom": "^18.3.7", + "@types/warning": "^3.0.4", + "@umijs/fabric": "^4.0.1", + "dumi": "^2.4.35", + "eslint": "^8.57.1", + "father": "^4.6.23", + "glob": "^13.0.6", + "husky": "^9.1.7", + "jest-environment-jsdom": "^29.7.0", + "less": "^4.6.7", + "lint-staged": "^16.4.0", + "prettier": "^3.9.0", + "rc-test": "^7.1.3", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "typescript": "^5.9.3" }, "peerDependencies": { "react": ">=16.11.0", "react-dom": ">=16.11.0" - } + }, + "publishConfig": { + "access": "public" + }, + "types": "./es/index.d.ts" } diff --git a/src/Dropdown.tsx b/src/Dropdown.tsx index 7707f26..ecbba77 100644 --- a/src/Dropdown.tsx +++ b/src/Dropdown.tsx @@ -1,7 +1,6 @@ import Trigger, { type ActionType, type AlignType, - type AnimationType, type BuildInPlacements, type TriggerProps, type TriggerRef, @@ -32,7 +31,7 @@ export interface DropdownProps transitionName?: string; overlayClassName?: string; openClassName?: string; - animation?: AnimationType; + animation?: string; align?: AlignType; overlayStyle?: React.CSSProperties; placement?: keyof typeof Placements; @@ -135,15 +134,34 @@ const Dropdown = React.forwardRef((props, ref) => { return `${prefixCls}-open`; }; - const childrenNode = React.cloneElement(children as React.ReactElement, { - className: clsx( - (children as React.ReactElement).props?.className, - mergedVisible && getOpenClassName(), - ), - ref: supportRef(children) - ? composeRef(childRef, getNodeRef(children as React.ReactElement)) - : undefined, - }); + const elementChild = children as React.ReactElement< + React.HTMLAttributes + >; + const childClassName = clsx( + elementChild.props?.className, + mergedVisible && getOpenClassName(), + ); + const triggerChildProps: React.HTMLAttributes & + React.RefAttributes = { + className: childClassName, + ref: composeRef(childRef, getNodeRef(elementChild)), + }; + + const childrenNode = + supportRef(elementChild) ? ( + React.cloneElement( + elementChild as React.ReactElement< + React.HTMLAttributes & React.RefAttributes + >, + triggerChildProps, + ) + ) : ( + + {React.cloneElement(elementChild, { + className: childClassName, + })} + + ); let triggerHideAction = hideAction; if (!triggerHideAction && trigger.indexOf('contextMenu') !== -1) { diff --git a/tests/basic.test.tsx b/tests/basic.test.tsx index 3956370..bc62fb8 100644 --- a/tests/basic.test.tsx +++ b/tests/basic.test.tsx @@ -286,6 +286,19 @@ describe('dropdown', () => { ).toBeFalsy(); }); + it('should pass openClassName to child without ref support', () => { + const LegacyButton = (props: HTMLAttributes) => ( + + ); + const { container } = render( + Test} visible> + + , + ); + + expect(container.querySelector('.my-button')).toHaveClass('rc-dropdown-open'); + }); + it('overlay callback', async () => { const overlay =
Test
; const { container, baseElement } = render( diff --git a/tsconfig.json b/tsconfig.json index 468fa20..00303f7 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -9,10 +9,18 @@ "jsx": "react", "skipLibCheck": true, "paths": { - "@@/*": [".dumi/tmp/*"] - } + "@@/*": [ + ".dumi/tmp/*" + ] + }, + "ignoreDeprecations": "5.0" }, - "include": ["./src", "./tests", "./typings/"], + "include": [ + ".fatherrc.ts", + "./src", + "./tests", + "./typings/" + ], "typings": "./typings/index.d.ts", "exclude": [ "node_modules", diff --git a/vercel.json b/vercel.json new file mode 100644 index 0000000..5f9139e --- /dev/null +++ b/vercel.json @@ -0,0 +1,6 @@ +{ + "framework": "umijs", + "installCommand": "npm install", + "buildCommand": "npm run build", + "outputDirectory": "docs-dist" +}