Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion examples/form.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { Component } from 'react';
import Select from '@rc-component/select';
import Form, { useForm, Field } from 'rc-field-form';
import Form, { useForm, Field } from '@rc-component/form';
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🌐 Web query:

@rc-component/form package npm API Form useForm Field

💡 Result:

Short summary of the @rc-component/form (rc-field-form) API — Form, Form.useForm, Field

  • Import:
    import Form, { Field } from 'rc-field-form'. [1][2]

  • Form (props)

    • form: FormInstance (pass instance returned by Form.useForm()).
    • initialValues: object.
    • name: string (FormProvider name).
    • preserve: boolean (preserve removed field values).
    • validateMessages: templates for validator messages.
    • onValuesChange(changedValues, allValues).
    • onFieldsChange(changedFields, allFields).
    • onFinish(values) — called on successful submit.
    • onFinishFailed({ values, errorFields, outOfDate }).
    • component, fields (controlled fields list), valuePropName, etc. [1][2]
  • Form.useForm / Form instance (methods)

    • const [form] = Form.useForm(); pass to . [1][2]
    • Common instance methods: getFieldValue(name), getFieldsValue([nameList]), setFieldsValue(values), getFieldError(name), validateFields([names]), resetFields([names]), submit(), setFields([...]) — (see type defs in repo). [1][2]
  • Field (props / usage)

    • children.
    • Rules support typical validation rule options (required, pattern, type, min, max, len, enum, message, validator).
    • Field registers with Form and maps child input value via valuePropName (default "value"). [1][2]

References / docs:

  • npm package page (@rc-component/form / rc-field-form) — API table and examples. [1]
  • GitHub repository (react-component/field-form) — README and TypeScript interfaces (detailed types/methods). [2]

If you want, I can paste the most-used Form instance method signatures from the repo's TypeScript interfaces.


🌐 Web query:

@rc-component/form useForm named export import destructure

💡 Result:

Short answer: there isn’t a separate named export called useForm to destructure — call the static method on the Form default export (Form.useForm).

Examples:

  • import and call the static method:
    import Form from 'rc-field-form';
    const [form] = Form.useForm();
    return ...;. [1][2]

  • if you prefer destructuring-like syntax for methods returned from the instance:
    const [form] = Form.useForm();
    const { getFieldValue, setFieldsValue } = form;
    // use getFieldValue / setFieldsValue in your component. [1][2]

Sources: rc-field-form docs / package README. [1][2]


🏁 Script executed:

cat examples/form.tsx

Repository: react-component/tree-select

Length of output: 3905


Fix incorrect import pattern—useForm is not a named export.

The import import Form, { useForm, Field } from '@rc-component/form' will fail because useForm is a static method on Form, not a named export. Line 47 will throw a runtime error.

Change to:

import Form, { Field } from '@rc-component/form';

And update line 47 from const [form] = useForm(); to const [form] = Form.useForm();

🤖 Prompt for AI Agents
In examples/form.tsx around line 3 (and affecting line 47), the import is wrong:
useForm is not a named export from '@rc-component/form' but a static method on
Form; update the import to only bring in Form and Field (remove useForm from the
named imports) and change the form initialization on line 47 from calling
useForm() to calling Form.useForm() so the code uses the static method
correctly.

import TreeSelect from '../src';
import '@rc-component/select/assets/index.less';
import '../assets/index.less';
Expand Down
10 changes: 5 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -43,16 +43,18 @@
"*": "prettier --write --ignore-unknown"
},
"dependencies": {
"@rc-component/select": "~1.2.0",
"@rc-component/tree": "~1.0.1",
"@rc-component/util": "^1.3.0",
"@rc-component/select": "~1.3.0",
"@rc-component/tree": "~1.1.0",
"@rc-component/util": "^1.4.0",
Comment on lines +46 to +48

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

There's an inconsistency in the version range specifiers used for dependencies. @rc-component/select and @rc-component/tree use ~ (tilde), which restricts updates to patch releases, while @rc-component/util uses ^ (caret), allowing minor version updates.

For consistency and to fully benefit from semantic versioning, it's recommended to use ^ for all dependencies. This ensures that you receive non-breaking feature updates and bug fixes automatically.

If pinning to specific minor versions for certain packages is intentional due to stability concerns, consider adding a comment to package.json to document the reason.

Suggested change
"@rc-component/select": "~1.3.0",
"@rc-component/tree": "~1.1.0",
"@rc-component/util": "^1.4.0",
"@rc-component/select": "^1.3.0",
"@rc-component/tree": "^1.1.0",
"@rc-component/util": "^1.4.0",

"clsx": "^2.1.1"
},
"devDependencies": {
"@rc-component/dialog": "^1.2.0",
"@rc-component/father-plugin": "^2.0.2",
"@rc-component/form": "^1.4.0",
"@rc-component/np": "^1.0.3",
"@rc-component/trigger": "^3.0.0",
"@rc-component/virtual-list": "^1.0.1",
"@testing-library/react": "^12.1.5",
"@types/jest": "^29.5.13",
"@types/node": "^22.7.5",
Expand All @@ -74,9 +76,7 @@
"husky": "^9.1.6",
"lint-staged": "^15.2.10",
"prettier": "^3.3.3",
"rc-field-form": "^2.4.0",
"rc-test": "^7.1.1",
"rc-virtual-list": "^3.14.8",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"typescript": "^5.6.3"
Expand Down
6 changes: 3 additions & 3 deletions tests/Select.spec.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { render, fireEvent, act } from '@testing-library/react';
import { render, fireEvent } from '@testing-library/react';
import { mount } from 'enzyme';
import KeyCode from '@rc-component/util/lib/KeyCode';
import React from 'react';
Expand All @@ -9,8 +9,8 @@ import type { BaseSelectRef } from '@rc-component/select';

const mockScrollTo = jest.fn();

// Mock `useScrollTo` from `rc-virtual-list/lib/hooks/useScrollTo`
jest.mock('rc-virtual-list/lib/hooks/useScrollTo', () => {
// Mock `useScrollTo` from `@rc-component/virtual-list/lib/hooks/useScrollTo`
jest.mock('@rc-component/virtual-list/lib/hooks/useScrollTo', () => {
return () => mockScrollTo;
});

Expand Down
3 changes: 3 additions & 0 deletions tests/__mocks__/@rc-component/virtual-list.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import List from '@rc-component/virtual-list/lib/mock';

export default List;
Comment on lines +1 to +3
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

cd /tmp && find . -name "package.json" -type f | head -5 && cat package.json 2>/dev/null | grep -A5 -B5 "@rc-component/virtual-list" || echo "Searching from repo root..."

Repository: react-component/tree-select

Length of output: 120


🏁 Script executed:

git ls-files | grep -E "package\.json$"

Repository: react-component/tree-select

Length of output: 83


🏁 Script executed:

cat package.json | grep -A 2 -B 2 "@rc-component/virtual-list"

Repository: react-component/tree-select

Length of output: 259


🏁 Script executed:

# Search for usage of the mock in test files
rg "from.*virtual-list" tests/ --type js --type jsx --type ts --type tsx

Repository: react-component/tree-select

Length of output: 98


🏁 Script executed:

rg "virtual-list" tests/ --type js --type ts

Repository: react-component/tree-select

Length of output: 364


🏁 Script executed:

# Search for mock usage more broadly
rg "/@rc-component/virtual-list" . --type js --type ts

Repository: react-component/tree-select

Length of output: 53


🏁 Script executed:

# Check if there are any jest config references to this mock
cat jest.config.js 2>/dev/null || cat jest.config.ts 2>/dev/null || echo "No jest config found"

Repository: react-component/tree-select

Length of output: 199


🏁 Script executed:

# Search for moduleNameMapper or mock-related config
rg "moduleNameMapper|virtual-list" . --type js --type json

Repository: react-component/tree-select

Length of output: 233


🌐 Web query:

@rc-component/virtual-list lib/mock export npm package

💡 Result:

Do you mean whether the path "@rc-component/virtual-list/lib/mock" is published/officially exported by the rc-virtual-list npm package?

Short answer: No—rc-virtual-list publishes its built files under lib/ (the package entry points are the package's main/exports), but there is no documented or supported public export named "lib/mock" in the package. Confirmed by the package repository and npm listing (see package repo and npm page). [1][2]

If you need a mock helper from that repo, either:

  • look for test/mock code in the GitHub repo and copy/port it into your project, or
  • open an issue/PR on the repo asking the maintainers to export a supported mock helper.

Sources:

  1. GitHub repository file listing for react-component/virtual-list. [1]
  2. rc-virtual-list package on npm. [2]

🌐 Web query:

@rc-component/virtual-list 1.0.1 package structure exports

💡 Result:

I couldn't find a package published as "@rc-component/virtual-list" at version 1.0.1. The project is published on npm as rc-virtual-list (unscoped); its package.json on npm/GitHub shows main/module entries (e.g. main: "./lib/index", module: "./es/index") and the repository is react-component/virtual-list. See npm and GitHub for the published package.json and repo: [1][2].

If you specifically need the exports/structure for a particular published tarball (e.g. a 1.0.1 release), tell me where that version is published (npm package name or a tarball/commit link) and I’ll fetch the package.json/files and list the exports precisely.

Sources:
[1] rc-virtual-list on npm — package page and versions.
[2] react-component/virtual-list repository on GitHub.


The mock import path is incorrect and will cause runtime failures.

@rc-component/virtual-list/lib/mock is not a documented or supported export from the @rc-component/virtual-list package. The package only publishes main/module entries (lib/index, es/index) without a mock export. Either:

  • Check the package repository for test/mock utilities to port into this project, or
  • Open an issue with @rc-component/virtual-list maintainers to export a mock helper
🤖 Prompt for AI Agents
In tests/__mocks__/@rc-component/virtual-list.js lines 1-3, the file imports
from a non-exported path '@rc-component/virtual-list/lib/mock' which will fail
at runtime; replace this with a supported approach by either (A) creating a
local mock implementation that exports the same API your tests expect (copy/port
the upstream mock utilities into this repo under tests/__mocks__ and export them
here), or (B) import from the package's published entrypoint and wrap/spy the
real module where possible (e.g., require('@rc-component/virtual-list') and
re-export only the functions/components you need). If you cannot port a mock,
open an issue with the upstream maintainers requesting a published mock export.
Ensure the new mock matches the public API used in tests and update any tests
that depend on internal implementation details.

3 changes: 0 additions & 3 deletions tests/__mocks__/rc-virtual-list.js

This file was deleted.