chore(Dropdown): ts & docs &test #4684

woshilaoge · 2023-12-27T07:51:27Z

No description provided.

github-actions

这是您为 Fusion/Next 提的第一个 pr，感谢您为 Fusion 做出的贡献，我们会尽快进行处理。

YSMJ1994 · 2023-12-27T07:59:28Z

components/dropdown/__docs__/demo/controlled/index.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable  */


We can not do this...

YSMJ1994 · 2023-12-27T08:03:47Z

components/dropdown/__tests__/a11y-spec.tsx

+
+describe('Dropdown A11y', () => {
+    it('should not have any violations', async () => {
+        portalContainer = createContainer(portalContainerId);


应使用locally variable定义

YSMJ1994 · 2023-12-27T08:04:44Z

components/dropdown/__tests__/a11y-spec.tsx

+            </Dropdown>
+        );
+        // eslint-disable-next-line
+        // @ts-ignore


Can't do this

YSMJ1994 · 2023-12-27T08:05:38Z

components/dropdown/__tests__/a11y-spec.tsx

+    it('should not have any violations', async () => {
+        portalContainer = createContainer(portalContainerId);
+        await testReact(
+            // eslint-disable-next-line jsx-a11y/anchor-is-valid


我来禁用测试用例文件的 jsx-a11y/anchor-is-valid ，你这里可以移除

YSMJ1994 · 2023-12-27T08:08:16Z

components/dropdown/__tests__/index-spec.tsx

@@ -182,8 +154,14 @@ describe('Dropdown', () => {
        const mountNode = document.createElement('div');
        document.body.appendChild(mountNode);

+        // eslint-disable-next-line react/no-deprecated


应该使用cypress 书写用例

cy.document().then(document => {
// 创建新的 div 元素
const mountNode = document.createElement('div');
// 添加该 div 到 body 中
document.body.appendChild(mountNode);

YSMJ1994 · 2023-12-27T08:09:31Z

components/dropdown/dropdown.tsx

@@ -10,7 +13,10 @@ const Popup = Overlay.Popup;
 * Dropdown
 * @description 继承 Popup 的 API，除非特别说明


Use @remarks instead of @description

YSMJ1994 · 2023-12-27T08:10:57Z

components/dropdown/dropdown.tsx

+        const child = Children.only(this.props.children) as React.ReactPortal;
+        let content = child as React.ReactChild;
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
        if (typeof child.type === 'function' && child.type.isNextMenu) {


Use "as" instead of ignore comment

child.type as unknown as ReactElementNextMenuType).isNextMenu

YSMJ1994 · 2023-12-27T08:12:36Z

components/dropdown/types.ts

@@ -1,198 +1,249 @@
-/// <reference types="react" />
-
+/* eslint-disable tsdoc/syntax */


Same problem

YSMJ1994 · 2023-12-27T08:21:23Z

components/dropdown/types.ts

@@ -1,198 +1,249 @@
-/// <reference types="react" />
-
+/* eslint-disable tsdoc/syntax */
 import * as React from 'react';


api类型定义中有大量未知的类型，需要根据代码补全相关类型

YSMJ1994 · 2023-12-27T08:21:48Z

components/dropdown/types.ts

     */
    followTrigger?: boolean;
 }

-export default class Dropdown extends React.Component<DropdownProps, any> {}
+export default class Dropdown extends React.Component<DropdownProps, unknown> {}


这个组件类型导出可以移除了

YSMJ1994 · 2024-01-03T03:30:00Z

components/dropdown/dropdown.tsx

@@ -98,7 +108,7 @@ export default class Dropdown extends Component {
        onPosition: noop,
    };

-    constructor(props) {
+    constructor(props: DropdownProps | Readonly<DropdownProps>) {


只需要 DropdownProps 就可以了

YSMJ1994 · 2024-01-03T03:31:05Z

components/dropdown/dropdown.tsx

@@ -109,8 +119,8 @@ export default class Dropdown extends Component {
        bindCtx(this, ['onTriggerKeyDown', 'onMenuClick', 'onVisibleChange']);
    }

-    static getDerivedStateFromProps(nextProps) {
-        const state = {};
+    static getDerivedStateFromProps(nextProps: { visible: unknown }) {


这里类型沿用 DropdownProps 和 DropdownState

YSMJ1994 · 2024-01-03T03:31:43Z

components/dropdown/dropdown.tsx

-export default class Dropdown extends Component {
+export default class Dropdown extends Component<
+    DropdownProps,
+    { visible: unknown; autoFocus: boolean | undefined }


这个State类型下面会有复用，可以在 types.ts 里定义 DropdownState 类型。

visible类型应该为 boolean | undefined

YSMJ1994 · 2024-01-03T03:35:54Z

components/dropdown/dropdown.tsx

    }

    onTriggerKeyDown() {
        let autoFocus = true;

        if ('autoFocus' in this.props) {
-            autoFocus = this.props.autoFocus;
+            autoFocus = !!this.props.autoFocus;


这里应该是给props.autoFocus添加存在断言，而不是修改实现行， autoFocus = this.props.autoFocus!

用户可能传递了 autoFocus，但传递了一个 undefined，原来的行为会设置 state.autoFocus = undefined ，并向Popup 组件传递 autoFocus = undefined ，这样就会应用 Popup 的默认 autoFocus 处理，你这里直接转成 boolean 值，改变了原有的行为

YSMJ1994 · 2024-01-03T03:40:12Z

components/dropdown/dropdown.tsx

-        let content = child;
-        if (typeof child.type === 'function' && child.type.isNextMenu) {
+        const { rtl, autoClose } = this.props;
+        const trigger = this.props.trigger as React.ReactPortal;


从下面推断出，trigger 类型必须是 React.cloneElement 允许的类型，且需要拥有 onKeyDown prop，查看React.cloneElement 的第一个参数类型是 ReactElement ，所以你这里需要将 props.trigger 类型修正为 ReactElement<{ onKeyDown?: (...args: unknown[]) => unknown }>

YSMJ1994 · 2024-01-03T03:41:45Z

components/dropdown/dropdown.tsx

@@ -177,7 +191,7 @@ export default class Dropdown extends Component {
                rtl={rtl}
                autoFocus={this.state.autoFocus}
                trigger={newTrigger}
-                visible={this.getVisible()}
+                visible={this.getVisible() as boolean}


这里应该调整的是 this.getVisible 的返回值类型，如果你正确的定义了State.visible类型，这里应该不需要做任何处理

YSMJ1994 · 2024-01-03T03:53:39Z

components/dropdown/types.ts

这里面其实有大量的属性来自 overlay.PopupProps，除了需要输出文档的属性，其它来自PopupProps的属性应该使用继承的方式添加在 DropdownProps 里面。
参考:
import {PopupProps} from '../overlay';
interface DropdownProps extends React.HTMLAttributes, CommonProps, PopupProps {}

然后把 skip 且属于 PopupProps 的属性都移除

YSMJ1994 · 2024-01-03T03:55:34Z

components/dropdown/__tests__/index-spec.tsx

@@ -179,36 +151,45 @@ describe('Dropdown', () => {
    //     });

    it('autoFocus=false should not have any activeElement', done => {
-        const mountNode = document.createElement('div');
-        document.body.appendChild(mountNode);
+        cy.document().then(document => {


这里为何不用 cy.mount

YSMJ1994 · 2024-01-03T03:56:00Z

components/dropdown/dropdown.tsx

@@ -1,7 +1,10 @@
-import React, { Component, Children } from 'react';
-import PropTypes from 'prop-types';
+/* eslint-disable tsdoc/syntax */


这里忘记移除了

… tests

暁仙 added 2 commits December 27, 2023 10:42

feat: 调整文件命名

e4209e5

chore: ts types

9e89fdf

github-actions bot reviewed Dec 27, 2023

View reviewed changes

YSMJ1994 added the Technical Upgrade label Dec 27, 2023

woshilaoge changed the title ~~chore(Typography): 「Dropdown」 ts & docs &test~~ chore(Technical upgrade): 「Dropdown」 ts & docs &test Dec 27, 2023

YSMJ1994 changed the title ~~chore(Technical upgrade): 「Dropdown」 ts & docs &test~~ chore(Dropdown): ts & docs &test Dec 27, 2023

woshilaoge requested a review from YSMJ1994 December 27, 2023 08:02

YSMJ1994 reviewed Dec 27, 2023

View reviewed changes

YSMJ1994 reviewed Jan 3, 2024

View reviewed changes

YSMJ1994 and others added 2 commits January 4, 2024 10:09

chore(BuildTool): rename index.d.ts to types.ts

41d5277

refactor(Paragraph): convert paragraph to TypeScript, impove docs and…

2747890

… tests

woshilaoge force-pushed the chore/xiaoxian-dropdown branch from a864802 to 2747890 Compare January 4, 2024 02:11

暁仙 added 3 commits January 4, 2024 10:15

chore: 合并 master

8ae03e0

chore: 同步 master

0e24072

chore: 处理 skip 中的继承

bbe5d7d

woshilaoge closed this Jan 4, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(Dropdown): ts & docs &test #4684

chore(Dropdown): ts & docs &test #4684

woshilaoge commented Dec 27, 2023

github-actions bot left a comment

YSMJ1994 Dec 27, 2023

woshilaoge Dec 28, 2023

YSMJ1994 Dec 27, 2023

YSMJ1994 Dec 27, 2023

woshilaoge Dec 28, 2023

YSMJ1994 Dec 27, 2023

woshilaoge Dec 28, 2023

YSMJ1994 Dec 27, 2023

woshilaoge Dec 28, 2023

YSMJ1994 Dec 27, 2023

YSMJ1994 Dec 27, 2023

woshilaoge Dec 28, 2023

YSMJ1994 Dec 27, 2023

woshilaoge Dec 28, 2023

YSMJ1994 Dec 27, 2023

woshilaoge Dec 28, 2023

YSMJ1994 Dec 27, 2023

YSMJ1994 Jan 3, 2024

YSMJ1994 Jan 3, 2024

YSMJ1994 Jan 3, 2024

YSMJ1994 Jan 3, 2024

YSMJ1994 Jan 3, 2024

YSMJ1994 Jan 3, 2024

YSMJ1994 Jan 3, 2024

woshilaoge Jan 4, 2024

YSMJ1994 Jan 3, 2024

YSMJ1994 Jan 3, 2024

		@@ -10,7 +13,10 @@ const Popup = Overlay.Popup;
		* Dropdown
		* @description 继承 Popup 的 API，除非特别说明

		@@ -1,198 +1,249 @@
		/// <reference types="react" />

		/* eslint-disable tsdoc/syntax */

chore(Dropdown): ts & docs &test #4684

chore(Dropdown): ts & docs &test #4684

Conversation

woshilaoge commented Dec 27, 2023

github-actions bot left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment