diff --git a/.gitignore b/.gitignore index 0a00254..2cb52c4 100644 --- a/.gitignore +++ b/.gitignore @@ -28,6 +28,7 @@ es coverage yarn.lock package-lock.json +.vscode # dumi .dumi/tmp diff --git a/docs/examples/arrow.jsx b/docs/examples/arrow.jsx index 0920cc0..224fc06 100644 --- a/docs/examples/arrow.jsx +++ b/docs/examples/arrow.jsx @@ -1,7 +1,7 @@ -import Menu, { Item as MenuItem, Divider } from 'rc-menu'; -import '../../assets/index.less'; +import Dropdown from '@rc-component/dropdown'; +import Menu, { Divider, Item as MenuItem } from '@rc-component/menu'; import React from 'react'; -import Dropdown from 'rc-dropdown'; +import '../../assets/index.less'; function onSelect({ key }) { console.log(`${key} selected`); diff --git a/docs/examples/context-menu.jsx b/docs/examples/context-menu.jsx index 9f3897c..cd55516 100644 --- a/docs/examples/context-menu.jsx +++ b/docs/examples/context-menu.jsx @@ -1,7 +1,7 @@ -import Menu, { Item as MenuItem } from 'rc-menu' -import '../../assets/index.less' -import React from 'react' -import Dropdown from 'rc-dropdown' +import Dropdown from '@rc-component/dropdown'; +import Menu, { Item as MenuItem } from '@rc-component/menu'; +import React from 'react'; +import '../../assets/index.less'; function ContextMenu() { const menu = ( @@ -9,7 +9,7 @@ function ContextMenu() { one two - ) + ); return ( - ) + ); } -export default ContextMenu +export default ContextMenu; diff --git a/docs/examples/dropdown-menu-width.jsx b/docs/examples/dropdown-menu-width.jsx index 0a1bf94..bbb830b 100644 --- a/docs/examples/dropdown-menu-width.jsx +++ b/docs/examples/dropdown-menu-width.jsx @@ -1,29 +1,29 @@ -import Menu, { Item as MenuItem } from 'rc-menu' -import '../../assets/index.less' -import React, { PureComponent } from 'react' -import Dropdown from 'rc-dropdown' +import Dropdown from '@rc-component/dropdown'; +import Menu, { Item as MenuItem } from '@rc-component/menu'; +import React, { PureComponent } from 'react'; +import '../../assets/index.less'; class Example extends PureComponent { - state = { longList: false } + state = { longList: false }; short = () => { - this.setState({ longList: false }) - } + this.setState({ longList: false }); + }; long = () => { - this.setState({ longList: true }) - } + this.setState({ longList: true }); + }; render() { const menuItems = [ 1st item, 2nd item, - ] + ]; if (this.state.longList) { - menuItems.push(3rd LONG SUPER LONG item) + menuItems.push(3rd LONG SUPER LONG item); } - const menu = {menuItems} + const menu = {menuItems}; return (
@@ -32,8 +32,8 @@ class Example extends PureComponent {
- ) + ); } } -export default Example +export default Example; diff --git a/docs/examples/multiple.jsx b/docs/examples/multiple.jsx index 4b25d99..34f33df 100644 --- a/docs/examples/multiple.jsx +++ b/docs/examples/multiple.jsx @@ -1,32 +1,32 @@ -import Menu, { Item as MenuItem, Divider } from 'rc-menu' -import '../../assets/index.less' -import React, { Component } from 'react' -import Dropdown from 'rc-dropdown' +import Dropdown from '@rc-component/dropdown'; +import Menu, { Divider, Item as MenuItem } from '@rc-component/menu'; +import React, { Component } from 'react'; +import '../../assets/index.less'; class Test extends Component { state = { visible: false, - } + }; - onVisibleChange = visible => { - console.log('visible', visible) + onVisibleChange = (visible) => { + console.log('visible', visible); this.setState({ visible, - }) - } + }); + }; - selected = [] + selected = []; saveSelected = ({ selectedKeys }) => { - this.selected = selectedKeys - } + this.selected = selectedKeys; + }; confirm = () => { - console.log(this.selected) + console.log(this.selected); this.setState({ visible: false, - }) - } + }); + }; render() { const menu = ( @@ -52,7 +52,7 @@ class Test extends Component { - ) + ); return ( - ) + ); } } -export default Test +export default Test; diff --git a/docs/examples/overlay-callback.jsx b/docs/examples/overlay-callback.jsx index 052e54a..a402aaf 100644 --- a/docs/examples/overlay-callback.jsx +++ b/docs/examples/overlay-callback.jsx @@ -1,14 +1,14 @@ -import Menu, { Item as MenuItem, Divider } from 'rc-menu' -import '../../assets/index.less' -import React from 'react' -import Dropdown from 'rc-dropdown' +import Dropdown from '@rc-component/dropdown'; +import Menu, { Divider, Item as MenuItem } from '@rc-component/menu'; +import React from 'react'; +import '../../assets/index.less'; function onSelect({ key }) { - console.log(`${key} selected`) + console.log(`${key} selected`); } function onVisibleChange(visible) { - console.log(visible) + console.log(visible); } const menuCallback = () => ( @@ -18,7 +18,7 @@ const menuCallback = () => ( two -) +); export default function OverlayCallback() { return ( @@ -35,5 +35,5 @@ export default function OverlayCallback() { - ) + ); } diff --git a/docs/examples/simple.jsx b/docs/examples/simple.jsx index 075893e..f2f0fec 100644 --- a/docs/examples/simple.jsx +++ b/docs/examples/simple.jsx @@ -1,15 +1,15 @@ /* eslint-disable no-console,react/button-has-type */ -import Menu, { Item as MenuItem, Divider } from 'rc-menu' -import '../../assets/index.less' -import React from 'react' -import Dropdown from 'rc-dropdown' +import Dropdown from '@rc-component/dropdown'; +import Menu, { Divider, Item as MenuItem } from '@rc-component/menu'; +import React from 'react'; +import '../../assets/index.less'; function onSelect({ key }) { - console.log(`${key} selected`) + console.log(`${key} selected`); } function onVisibleChange(visible) { - console.log(visible) + console.log(visible); } const menu = ( @@ -19,7 +19,7 @@ const menu = ( two -) +); export default function Simple() { return ( @@ -37,5 +37,5 @@ export default function Simple() { - ) + ); } diff --git a/package.json b/package.json index 91f30fa..421107e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "rc-dropdown", - "version": "4.2.1", + "name": "@rc-component/dropdown", + "version": "1.0.0", "description": "dropdown ui component for react", "keywords": [ "react", @@ -33,7 +33,7 @@ "lint": "eslint src/ docs/examples/ --ext .tsx,.ts,.jsx,.js", "now-build": "npm run build", "prepare": "husky install && dumi setup", - "prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish", + "prepublishOnly": "npm run compile && rc-np", "start": "dumi dev", "test": "rc-test" }, @@ -44,13 +44,14 @@ ] }, "dependencies": { - "@babel/runtime": "^7.18.3", - "@rc-component/trigger": "^2.0.0", - "classnames": "^2.2.6", - "rc-util": "^5.44.1" + "@rc-component/trigger": "^3.0.0", + "@rc-component/util": "^1.2.1", + "classnames": "^2.2.6" }, "devDependencies": { - "@rc-component/father-plugin": "^1.0.0", + "@rc-component/father-plugin": "^2.0.2", + "@rc-component/np": "^1.0.3", + "@rc-component/resize-observer": "^1.0.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^14.0.0", "@types/classnames": "^2.2.6", @@ -69,10 +70,8 @@ "jquery": "^3.3.1", "less": "^4.1.1", "lint-staged": "^13.2.1", - "np": "^6.0.0", "prettier": "^2.8.7", - "rc-menu": "^9.5.2", - "rc-resize-observer": "^1.4.0", + "@rc-component/menu": "^1.0.0", "rc-test": "^7.0.14", "react": "^18.0.0", "react-dom": "^18.0.0", diff --git a/src/Dropdown.tsx b/src/Dropdown.tsx index 920e443..55b6871 100644 --- a/src/Dropdown.tsx +++ b/src/Dropdown.tsx @@ -6,8 +6,8 @@ import type { AnimationType, BuildInPlacements, } from '@rc-component/trigger/lib/interface'; +import { composeRef, getNodeRef, supportRef } from '@rc-component/util/lib/ref'; import classNames from 'classnames'; -import { composeRef, getNodeRef, supportRef } from 'rc-util/lib/ref'; import React from 'react'; import useAccessibility from './hooks/useAccessibility'; import Overlay from './Overlay'; @@ -71,6 +71,9 @@ function Dropdown(props: DropdownProps, ref) { const [triggerVisible, setTriggerVisible] = React.useState(); const mergedVisible = 'visible' in props ? visible : triggerVisible; + const mergedMotionName = animation + ? `${prefixCls}-${animation}` + : transitionName; const triggerRef = React.useRef(null); const overlayRef = React.useRef(null); @@ -162,8 +165,7 @@ function Dropdown(props: DropdownProps, ref) { hideAction={triggerHideAction} popupPlacement={placement} popupAlign={align} - popupTransitionName={transitionName} - popupAnimation={animation} + popupMotion={{ motionName: mergedMotionName }} popupVisible={mergedVisible} stretch={getMinOverlayWidthMatchTrigger() ? 'minWidth' : ''} popup={getMenuElementOrLambda()} diff --git a/src/Overlay.tsx b/src/Overlay.tsx index 6b05dfe..936caa1 100644 --- a/src/Overlay.tsx +++ b/src/Overlay.tsx @@ -1,4 +1,4 @@ -import { composeRef, getNodeRef, supportRef } from 'rc-util/lib/ref'; +import { composeRef, getNodeRef, supportRef } from '@rc-component/util/lib/ref'; import React, { forwardRef, useMemo } from 'react'; import type { DropdownProps } from './Dropdown'; diff --git a/src/hooks/useAccessibility.ts b/src/hooks/useAccessibility.ts index 8d2850d..68bda3e 100644 --- a/src/hooks/useAccessibility.ts +++ b/src/hooks/useAccessibility.ts @@ -1,6 +1,6 @@ -import KeyCode from "rc-util/lib/KeyCode"; -import raf from "rc-util/lib/raf"; -import * as React from "react"; +import KeyCode from '@rc-component/util/lib/KeyCode'; +import raf from '@rc-component/util/lib/raf'; +import * as React from 'react'; const { ESC, TAB } = KeyCode; @@ -60,13 +60,13 @@ export default function useAccessibility({ React.useEffect(() => { if (visible) { - window.addEventListener("keydown", handleKeyDown); + window.addEventListener('keydown', handleKeyDown); if (autoFocus) { // FIXME: hack with raf raf(focusMenu, 3); } return () => { - window.removeEventListener("keydown", handleKeyDown); + window.removeEventListener('keydown', handleKeyDown); focusMenuRef.current = false; }; } diff --git a/tests/basic.test.tsx b/tests/basic.test.tsx index 2949961..a9e53ce 100644 --- a/tests/basic.test.tsx +++ b/tests/basic.test.tsx @@ -1,18 +1,15 @@ /* eslint-disable react/button-has-type,react/no-find-dom-node,react/no-render-return-value,object-shorthand,func-names,max-len */ +import type { MenuRef } from '@rc-component/menu'; +import Menu, { Divider, Item as MenuItem } from '@rc-component/menu'; +import { _rs } from '@rc-component/resize-observer'; +import { spyElementPrototypes } from '@rc-component/util/lib/test/domHook'; import { act, fireEvent } from '@testing-library/react'; -import type { MenuRef } from 'rc-menu'; -import Menu, { Divider, Item as MenuItem } from 'rc-menu'; -import { _rs } from 'rc-resize-observer'; -import { spyElementPrototypes } from 'rc-util/lib/test/domHook'; import type { HTMLAttributes } from 'react'; import * as React from 'react'; import { createRef, forwardRef, useImperativeHandle } from 'react'; import Dropdown from '../src'; import { render, sleep } from './utils'; -// Fix prettier rm this -console.log(!!React); - async function waitForTime() { for (let i = 0; i < 10; i += 1) { await act(async () => { @@ -518,15 +515,18 @@ describe('dropdown', () => { expect(menuRef.current).toBeTruthy(); }); - it('should support trigger which not support focus', async () => { + it('should support trigger when child provide nativeElement', async () => { jest.useFakeTimers(); const Button = forwardRef>( (props, ref) => { + const btnRef = createRef(); useImperativeHandle(ref, () => ({ foo: () => {}, + nativeElement: btnRef.current, })); return (