diff --git a/.eslintrc.js b/.eslintrc.js deleted file mode 100644 index 6e0fa311..00000000 --- a/.eslintrc.js +++ /dev/null @@ -1,17 +0,0 @@ -const base = require('@umijs/fabric/dist/eslint'); - -module.exports = { - ...base, - rules: { - ...base.rules, - 'no-template-curly-in-string': 0, - 'prefer-promise-reject-errors': 0, - 'react/no-array-index-key': 0, - 'react/sort-comp': 0, - '@typescript-eslint/no-explicit-any': 0, - 'jsx-a11y/label-has-associated-control': 0, - 'jsx-a11y/label-has-for': 0, - 'import/no-extraneous-dependencies': 0, - 'no-shadow': 0 - }, -}; diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 3b730ef9..5e6c7faa 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -8,6 +8,10 @@ updates: time: '21:00' timezone: Asia/Shanghai open-pull-requests-limit: 10 + groups: + npm-dependencies: + patterns: + - '*' - package-ecosystem: github-actions directory: '/' @@ -17,3 +21,7 @@ updates: time: '21:00' timezone: Asia/Shanghai open-pull-requests-limit: 10 + groups: + github-actions: + patterns: + - '*' diff --git a/README.md b/README.md index bd393a23..30e6c44e 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@

@rc-component/cascader

-

Ant Design Part of the Ant Design ecosystem.

+

Ant Design Part of the Ant Design ecosystem.

🧭 React Cascader component for selecting values from hierarchical option trees, with search, multiple selection, async loading, and custom rendering.

@@ -15,7 +15,6 @@

English | 简体中文

- ## Highlights | Area | Support | diff --git a/README.zh-CN.md b/README.zh-CN.md index c94208fc..a0792e9a 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -1,6 +1,6 @@

@rc-component/cascader

-

Ant Design Ant Design 生态的一部分。

+

Ant Design Ant Design 生态的一部分。

🧭 React 级联选择组件，支持层级选项、搜索、多选、异步加载和自定义渲染。

@@ -15,15 +15,14 @@

English | 简体中文

- ## 特性 -| 范围 | 支持 | -| --------- | ---------------------------------------------------------------- | -| 数据 | 嵌套选项、字段名映射和禁用节点 | -| 选择 | 单选、多选、勾选和逐级选择流程 | -| 搜索 | 受控搜索、自定义过滤、自定义排序和自定义渲染 | -| 加载 | 通过 `loadData` 异步加载选项 | +| 范围 | 支持 | +| ---- | -------------------------------------------- | +| 数据 | 嵌套选项、字段名映射和禁用节点 | +| 选择 | 单选、多选、勾选和逐级选择流程 | +| 搜索 | 受控搜索、自定义过滤、自定义排序和自定义渲染 | +| 加载 | 通过 `loadData` 异步加载选项 | | 渲染 | 自定义选项标签、下拉内容、图标和展开触发方式 | ## 安装 @@ -78,61 +77,61 @@ npm start ### Cascader -| 参数 | 类型 | 默认值 | 说明 | -| -------------------- | ------------------------------------------------------- | ---------------------------------------------------------- | ---------------------------------------------------------- | +| 参数 | 类型 | 默认值 | 说明 | +| -------------------- | ------------------------------------------------------- | ---------------------------------------------------------- | -------------------------------------------------- | | autoClearSearchValue | boolean | true | 已弃用。请改用 `showSearch.autoClearSearchValue`。 | | builtinPlacements | BuildInPlacements | - | 自定义弹层位置。 | -| changeOnSelect | boolean | false | 选择每个级别时触发 `onChange`。 | -| checkable | boolean \| ReactNode | false | 启用带复选框 UI 的多选。 | -| children | ReactElement | - | 触发元素。 | -| classNames | Semantic class name map | - | 选择器和弹层元素的语义 className。 | -| defaultValue | string[] \| number[] \| Array | - | 初始选中值。 | -| displayRender | `(label, selectedOptions) => ReactNode` | - | 渲染选定的标签。 | -| expandIcon | ReactNode | `>` | 自定义展开图标。 | -| expandTrigger | `click` \| `hover` | `click` | 触发扩展下一个选项级别的操作。 | -| fieldNames | `{ label?: string; value?: string; children?: string }` | `{ label: 'label', value: 'value', children: 'children' }` | 自定义选项字段名称。 | -| loadData | `(selectedOptions) => void` | - | 异步加载子选项。 | -| loadingIcon | ReactNode | - | 自定义加载图标。 | -| onChange | `(value, selectedOptions) => void` | - | 选择更改时调用。 | -| onPopupVisibleChange | `(open: boolean) => void` | - | 当弹层窗口可见性发生变化时调用。 | +| changeOnSelect | boolean | false | 选择每个级别时触发 `onChange`。 | +| checkable | boolean \| ReactNode | false | 启用带复选框 UI 的多选。 | +| children | ReactElement | - | 触发元素。 | +| classNames | Semantic class name map | - | 选择器和弹层元素的语义 className。 | +| defaultValue | string[] \| number[] \| Array | - | 初始选中值。 | +| displayRender | `(label, selectedOptions) => ReactNode` | - | 渲染选定的标签。 | +| expandIcon | ReactNode | `>` | 自定义展开图标。 | +| expandTrigger | `click` \| `hover` | `click` | 触发扩展下一个选项级别的操作。 | +| fieldNames | `{ label?: string; value?: string; children?: string }` | `{ label: 'label', value: 'value', children: 'children' }` | 自定义选项字段名称。 | +| loadData | `(selectedOptions) => void` | - | 异步加载子选项。 | +| loadingIcon | ReactNode | - | 自定义加载图标。 | +| onChange | `(value, selectedOptions) => void` | - | 选择更改时调用。 | +| onPopupVisibleChange | `(open: boolean) => void` | - | 当弹层窗口可见性发生变化时调用。 | | onSearch | `(value: string) => void` | - | 已弃用。请改用 `showSearch.onSearch`。 | -| open | boolean | - | 受控的弹层窗口可见性。 | -| optionRender | `(option) => ReactNode` | - | 自定义选项渲染器。 | -| options | Option[] | - | 分层选项数据。 | -| placement | Select placement | - | 弹层窗口放置。 | -| popupClassName | string | - | 弹层 className。 | -| popupMenuColumnStyle | CSSProperties | - | 每个弹出菜单列的样式。 | -| prefixCls | string | `rc-cascader` | className 前缀。 | +| open | boolean | - | 受控的弹层窗口可见性。 | +| optionRender | `(option) => ReactNode` | - | 自定义选项渲染器。 | +| options | Option[] | - | 分层选项数据。 | +| placement | Select placement | - | 弹层窗口放置。 | +| popupClassName | string | - | 弹层 className。 | +| popupMenuColumnStyle | CSSProperties | - | 每个弹出菜单列的样式。 | +| prefixCls | string | `rc-cascader` | className 前缀。 | | searchValue | string | - | 已弃用。请改用 `showSearch.searchValue`。 | -| showCheckedStrategy | `SHOW_PARENT` \| `SHOW_CHILD` | `SHOW_PARENT` | 在多种模式下渲染检查值的策略。 | -| showSearch | boolean \| SearchConfig | false | 启用并配置搜索。 | -| styles | Semantic style map | - | 选择器和弹层元素的语义样式。 | -| value | string[] \| number[] \| Array | - | 受控选中值。 | +| showCheckedStrategy | `SHOW_PARENT` \| `SHOW_CHILD` | `SHOW_PARENT` | 在多种模式下渲染检查值的策略。 | +| showSearch | boolean \| SearchConfig | false | 启用并配置搜索。 | +| styles | Semantic style map | - | 选择器和弹层元素的语义样式。 | +| value | string[] \| number[] \| Array | - | 受控选中值。 | `Cascader` 还接受来自 `@rc-component/select` `BaseSelect` 的公共属性，但私有仅选择属性除外，例如 `mode` 、 `labelInValue` 、 `showSearch` 和 `tokenSeparators`。 ### SearchConfig -| 参数 | 类型 | 默认值 | 说明 | -| -------------------- | -------------------------------------------------------- | ------- | ---------------------------------------------------------- | -| autoClearSearchValue | boolean | true | 选择项目后清除搜索文本。 | -| filter | `(inputValue, options, fieldNames) => boolean` | - | 返回 `true` 以在搜索结果中包含选项路径。 | -| limit | number \| false | 50 | 限制过滤项目的数量。 | -| matchInputWidth | boolean | true | 搜索结果宽度是否与输入宽度匹配。 | -| onSearch | `(value: string) => void` | - | 当搜索文本更改时调用。 | -| render | `(inputValue, path, prefixCls, fieldNames) => ReactNode` | - | 渲染过滤后的选项路径。 | -| searchValue | string | - | 受控搜索文本。 | -| sort | `(a, b, inputValue, fieldNames) => number` | - | 对过滤后的选项路径进行排序。 | +| 参数 | 类型 | 默认值 | 说明 | +| -------------------- | -------------------------------------------------------- | ------ | ---------------------------------------- | +| autoClearSearchValue | boolean | true | 选择项目后清除搜索文本。 | +| filter | `(inputValue, options, fieldNames) => boolean` | - | 返回 `true` 以在搜索结果中包含选项路径。 | +| limit | number \| false | 50 | 限制过滤项目的数量。 | +| matchInputWidth | boolean | true | 搜索结果宽度是否与输入宽度匹配。 | +| onSearch | `(value: string) => void` | - | 当搜索文本更改时调用。 | +| render | `(inputValue, path, prefixCls, fieldNames) => ReactNode` | - | 渲染过滤后的选项路径。 | +| searchValue | string | - | 受控搜索文本。 | +| sort | `(a, b, inputValue, fieldNames) => number` | - | 对过滤后的选项路径进行排序。 | ### 选项 -| 参数 | 类型 | 默认值 | 说明 | -| --------------- | ------------------------ | ------- | ------------------------------------------------ | -| children | Option[] | - | 子选项。 | -| disabled | boolean | false | 禁用此选项。 | -| disableCheckbox | boolean | false | 在多种模式下禁用此选项的复选框。 | -| label | ReactNode | - | 显示标签。 | -| value | string \| number \| null | - | 选项值。 | +| 参数 | 类型 | 默认值 | 说明 | +| --------------- | ------------------------ | ------ | -------------------------------- | +| children | Option[] | - | 子选项。 | +| disabled | boolean | false | 禁用此选项。 | +| disableCheckbox | boolean | false | 在多种模式下禁用此选项的复选框。 | +| label | ReactNode | - | 显示标签。 | +| value | string \| number \| null | - | 选项值。 | ## 本地开发 diff --git a/eslint.config.mjs b/eslint.config.mjs new file mode 100644 index 00000000..40f08ec9 --- /dev/null +++ b/eslint.config.mjs @@ -0,0 +1,115 @@ +import js from '@eslint/js'; +import { defineConfig } from 'eslint/config'; +import { dirname } from 'node:path'; +import { fileURLToPath } from 'node:url'; +import prettier from 'eslint-config-prettier'; +import jest from 'eslint-plugin-jest'; +import react from 'eslint-plugin-react'; +import reactHooks from 'eslint-plugin-react-hooks'; +import globals from 'globals'; +import tseslint from 'typescript-eslint'; + +const tsconfigRootDir = dirname(fileURLToPath(import.meta.url)); + +export default defineConfig([ + { + plugins: { + '@typescript-eslint': tseslint.plugin, + }, + }, + { + linterOptions: { + reportUnusedDisableDirectives: 'warn', + }, + }, + { + ignores: [ + 'node_modules/', + 'coverage/', + 'es/', + 'lib/', + 'dist/', + 'docs-dist/', + '.docs-dist/', + '.dumi/', + '.doc/', + '.vercel/', + ], + }, + { + files: ['**/*.{js,jsx,ts,tsx}'], + extends: [ + js.configs.recommended, + react.configs.flat.recommended, + react.configs.flat['jsx-runtime'], + prettier, + ], + plugins: { + 'react-hooks': reactHooks, + }, + languageOptions: { + globals: { + ...globals.browser, + ...globals.node, + }, + }, + settings: { + react: { + version: 'detect', + }, + }, + rules: { + 'no-async-promise-executor': 'off', + 'no-empty-pattern': 'off', + 'no-irregular-whitespace': 'off', + 'no-prototype-builtins': 'off', + 'no-useless-escape': 'off', + 'no-extra-boolean-cast': 'off', + 'no-undef': 'off', + 'no-unused-vars': 'off', + 'react/no-find-dom-node': 'off', + 'react/display-name': 'off', + 'react/no-unknown-property': 'off', + 'react/prop-types': 'off', + 'react-hooks/exhaustive-deps': 'warn', + 'react-hooks/rules-of-hooks': 'error', + }, + }, + { + files: ['**/*.{ts,tsx}'], + extends: [...tseslint.configs.recommended], + rules: { + '@typescript-eslint/ban-ts-comment': 'off', + '@typescript-eslint/no-empty-object-type': 'off', + '@typescript-eslint/no-explicit-any': 'off', + '@typescript-eslint/no-unsafe-function-type': 'off', + '@typescript-eslint/no-unnecessary-type-constraint': 'off', + '@typescript-eslint/no-unused-vars': 'off', + }, + }, + { + files: ['src/**/*.{ts,tsx}'], + languageOptions: { + parserOptions: { + projectService: true, + tsconfigRootDir, + }, + }, + }, + { + files: ['tests/**/*.{js,jsx,ts,tsx}', '**/*.{test,spec}.{js,jsx,ts,tsx}'], + extends: [jest.configs['flat/recommended']], + rules: { + 'jest/no-disabled-tests': 'off', + 'jest/no-done-callback': 'off', + 'jest/no-identical-title': 'off', + 'jest/expect-expect': 'off', + 'jest/no-alias-methods': 'off', + 'jest/no-conditional-expect': 'off', + 'jest/no-export': 'off', + 'jest/no-standalone-expect': 'off', + 'jest/valid-expect': 'off', + 'jest/valid-title': 'off', + }, + }, +]); diff --git a/examples/multiple.tsx b/examples/multiple.tsx index f88aaa47..60983a33 100644 --- a/examples/multiple.tsx +++ b/examples/multiple.tsx @@ -1,4 +1,3 @@ -/* eslint-disable @typescript-eslint/no-shadow */ import React, { useState } from 'react'; import '../assets/index.less'; import type { CascaderProps } from '../src'; @@ -7,7 +6,7 @@ import type { Option2 } from './utils'; const { SHOW_CHILD } = Cascader; -const optionLists = [ +const optionLists: Option2[] = [ { value: 'zhejiang', label: 'Zhejiang', @@ -56,7 +55,7 @@ const Demo = () => { // 直接选中一级选项，但是此时二级选项没有全部选中 return ( - checkable options={options} showCheckedStrategy={SHOW_CHILD} diff --git a/global.d.ts b/global.d.ts new file mode 100644 index 00000000..e0bd355c --- /dev/null +++ b/global.d.ts @@ -0,0 +1,11 @@ +/// +/// +/// +/// +/// + +declare module '*.css'; +declare module '*.less'; +declare module 'jsonp'; + +declare module 'moment/locale/zh-cn'; diff --git a/package.json b/package.json index 5b6f0ea2..06f272ca 100644 --- a/package.json +++ b/package.json @@ -50,38 +50,42 @@ "clsx": "^2.1.1" }, "devDependencies": { + "@eslint/js": "^9.39.4", "@rc-component/father-plugin": "^2.2.0", "@rc-component/form": "^1.4.0", "@rc-component/np": "^1.0.4", "@rc-component/trigger": "^3.0.0", - "@testing-library/react": "^15.0.7", - "@types/jest": "^29.5.14", + "@testing-library/dom": "^10.4.1", + "@testing-library/jest-dom": "^6.9.1", + "@testing-library/react": "^16.3.2", + "@types/jest": "^30.0.0", "@types/node": "^26.0.1", - "@types/react": "^18.3.31", - "@types/react-dom": "^18.3.7", + "@types/react": "^19.2.17", + "@types/react-dom": "^19.2.3", "@types/warning": "^3.0.4", - "@typescript-eslint/eslint-plugin": "^5.62.0", - "@typescript-eslint/parser": "^5.62.0", - "@umijs/fabric": "^4.0.1", "array-tree-filter": "^3.0.2", "cheerio": "1.0.0-rc.12", "core-js": "^3.40.0", "cross-env": "^10.1.0", - "dumi": "^2.4.35", - "eslint": "^8.57.1", - "eslint-plugin-jest": "^27.9.0", - "eslint-plugin-unicorn": "^56.0.1", - "father": "^4.6.23", + "dumi": "^2.4.38", + "eslint": "^9.39.4", + "eslint-config-prettier": "^10.1.8", + "eslint-plugin-jest": "^29.15.4", + "eslint-plugin-react": "^7.37.5", + "eslint-plugin-react-hooks": "^7.1.1", + "father": "^4.6.24", "gh-pages": "^6.3.0", "glob": "^13.0.6", + "globals": "^17.7.0", + "husky": "^9.1.7", "less": "^4.6.7", - "prettier": "^3.9.0", + "lint-staged": "^17.0.8", + "prettier": "^3.9.4", "rc-test": "^7.1.3", - "react": "^18.3.1", - "react-dom": "^18.3.1", - "typescript": "^5.9.3", - "husky": "^9.1.7", - "lint-staged": "^16.4.0" + "react": "^19.2.7", + "react-dom": "^19.2.7", + "typescript": "^6.0.3", + "typescript-eslint": "^8.62.1" }, "peerDependencies": { "react": ">=18.0.0", diff --git a/tests/__snapshots__/index.spec.tsx.snap b/tests/__snapshots__/index.spec.tsx.snap index 17ebb6e1..da0604c7 100644 --- a/tests/__snapshots__/index.spec.tsx.snap +++ b/tests/__snapshots__/index.spec.tsx.snap @@ -1,4 +1,4 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing exports[`Cascader.Basic should not show title when title is falsy 1`] = `
    diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx index ec3ee811..66508ff3 100644 --- a/tests/index.spec.tsx +++ b/tests/index.spec.tsx @@ -63,7 +63,9 @@ describe('Cascader.Basic', () => { selectOption(container, 0, 0); expect( - container.querySelector('.rc-cascader-menu-item')!.classList.contains('rc-cascader-menu-item-active') + container + .querySelector('.rc-cascader-menu-item')! + .classList.contains('rc-cascader-menu-item-active'), ).toBeTruthy(); // Menu 2 @@ -79,7 +81,7 @@ describe('Cascader.Basic', () => { container .querySelectorAll('.rc-cascader-menu')[1] .querySelector('.rc-cascader-menu-item')! - .classList.contains('rc-cascader-menu-item-active') + .classList.contains('rc-cascader-menu-item-active'), ).toBeTruthy(); // Menu 3 @@ -97,7 +99,7 @@ describe('Cascader.Basic', () => { it('should support showCheckedStrategy parent', () => { const { container } = render( - checkable changeOnSelect options={addressOptions} @@ -189,7 +191,7 @@ describe('Cascader.Basic', () => { container .querySelectorAll('.rc-cascader-menu')[0] .querySelector('.rc-cascader-menu-item')! - .classList.contains('rc-cascader-menu-item-active') + .classList.contains('rc-cascader-menu-item-active'), ).toBeTruthy(); // Menu 2 @@ -208,7 +210,7 @@ describe('Cascader.Basic', () => { container .querySelectorAll('.rc-cascader-menu')[1] .querySelector('.rc-cascader-menu-item')! - .classList.contains('rc-cascader-menu-item-active') + .classList.contains('rc-cascader-menu-item-active'), ).toBeTruthy(); // Menu 3 @@ -353,7 +355,7 @@ describe('Cascader.Basic', () => { rerender( - + , ); expect(container.querySelector('.rc-cascader-menu-item')!.textContent).toEqual('BambooLight'); }); @@ -399,7 +401,9 @@ describe('Cascader.Basic', () => { fireEvent.click(menu1Items[0]); expect( - container.querySelector('.rc-cascader-menu-item')!.classList.contains('rc-cascader-menu-item-disabled'), + container + .querySelector('.rc-cascader-menu-item')! + .classList.contains('rc-cascader-menu-item-disabled'), ).toBe(true); menus = container.querySelectorAll('.rc-cascader-menu'); expect(menus.length).toBe(1); @@ -420,12 +424,13 @@ describe('Cascader.Basic', () => { />, ); - expect(container.querySelector('.rc-cascader-selection-item-disabled')!.textContent).toEqual('福州'); + expect(container.querySelector('.rc-cascader-selection-item-disabled')!.textContent).toEqual( + '福州', + ); expect( container .querySelector('.rc-cascader-selection-item:not(.rc-cascader-selection-item-disabled)')! - .querySelector('.rc-cascader-selection-item-content')! - .textContent, + .querySelector('.rc-cascader-selection-item-content')!.textContent, ).toEqual('朝阳区'); }); }); @@ -720,8 +725,12 @@ describe('Cascader.Basic', () => { clickOption(container, 1, 0); expect(container.querySelectorAll('li.rc-cascader-menu-item-active')).toHaveLength(2); - expect(container.querySelectorAll('li.rc-cascader-menu-item-active')[0].textContent).toEqual('Bamboo'); - expect(container.querySelectorAll('li.rc-cascader-menu-item-active')[1].textContent).toEqual('Little'); + expect(container.querySelectorAll('li.rc-cascader-menu-item-active')[0].textContent).toEqual( + 'Bamboo', + ); + expect(container.querySelectorAll('li.rc-cascader-menu-item-active')[1].textContent).toEqual( + 'Little', + ); }); it('expandTrigger: hover', () => { @@ -749,7 +758,9 @@ describe('Cascader.Basic', () => { clickOption(container, 1, 0, 'mouseEnter'); expect(container.querySelectorAll('li.rc-cascader-menu-item-active')).toHaveLength(1); - expect(container.querySelectorAll('li.rc-cascader-menu-item-active')[0].textContent).toEqual('Bamboo'); + expect(container.querySelectorAll('li.rc-cascader-menu-item-active')[0].textContent).toEqual( + 'Bamboo', + ); }); describe('the defaultValue should be activated the first time it is opened', () => { @@ -837,35 +848,36 @@ describe('Cascader.Basic', () => { />, ); - expect(container.querySelector('.rc-cascader-content')!.textContent).toEqual('Normal / Child'); + expect(container.querySelector('.rc-cascader-content')!.textContent).toEqual( + 'Normal / Child', + ); }); it('multiple', () => { - const onTypeChange: ( - values: string[][], - options: { label: React.ReactNode; value: string }[][], - ) => void = jest.fn(); - - const { container } = render( - Parent, value: 'parent' }, + const onTypeChange: CascaderProps['onChange'] = jest.fn(); + const options: BaseOptionType[] = [ + { label: Parent, value: 'parent' }, + { + label: 'Normal', + value: 'normal', + children: [ { - label: 'Normal', - value: 'normal', - children: [ - { - label: Child, - value: 'child', - }, - { - label: 'Child2', - value: 'child2', - }, - ], + label: Child, + value: 'child', }, - ]} - value={[['parent'], ['normal', 'child']]} + { + label: 'Child2', + value: 'child2', + }, + ], + }, + ]; + const value: string[][] = [['parent'], ['normal', 'child']]; + + const { container } = render( + + options={options} + value={value} checkable onChange={onTypeChange} />, diff --git a/tsconfig.json b/tsconfig.json index 2b912c63..caff830c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,24 +1,17 @@ { "compilerOptions": { "target": "esnext", - "moduleResolution": "node", - "baseUrl": "./", + "moduleResolution": "bundler", "jsx": "react", "declaration": true, "skipLibCheck": true, "strict": true, "esModuleInterop": true, "paths": { - "@/*": [ - "src/*" - ], - "@@/*": [ - "src/.umi/*" - ], - "@rc-component/cascader": [ - "src/index.ts" - ] + "@/*": ["./src/*"], + "@@/*": ["./src/.umi/*"], + "@rc-component/cascader": ["./src/index.ts"] }, - "ignoreDeprecations": "5.0" + "module": "ESNext" } }