refactor(Collapse): imporve docs and types

alibaba-fusion · Jan 31, 2024 · 8f8037e · 8f8037e
1 parent 493cc91
commit 8f8037e
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 34 deletions.
diff --git a/components/collapse/__docs__/demo/event/index.tsx b/components/collapse/__docs__/demo/event/index.tsx
@@ -4,31 +4,23 @@ import { Collapse } from '@alifd/next';
 
 const Panel = Collapse.Panel;
 
-class Demo extends React.Component<
-    unknown,
-    {
-        expandedKeys: string[];
-    }
-> {
-    constructor(props: unknown, context: any) {
-        super(props, context);
-        this.state = {
-            expandedKeys: [],
-        };
-    }
+class Demo extends React.Component {
+    state = {
+        expandedKeys: [],
+    };
 
-    onExpand(expandedKeys: string[]) {
+    onExpand = (expandedKeys: string[]) => {
         this.setState({
             expandedKeys,
         });
-    }
+    };
 
-    onClick(key: any) {
+    onClick = (key: any) => {
         console.log('clicked', key);
-    }
+    };
     render() {
         return (
-            <Collapse onExpand={this.onExpand.bind(this)} expandedKeys={this.state.expandedKeys}>
+            <Collapse onExpand={this.onExpand} expandedKeys={this.state.expandedKeys}>
                 <Panel title="simple tile" onClick={this.onClick}>
                     Promotions are marketing campaigns ran by Marketplace. Participate to sale your
                     products during that promotion and make a profit

diff --git a/components/collapse/collapse.tsx b/components/collapse/collapse.tsx
@@ -1,11 +1,11 @@
-import React, { MouseEventHandler, ReactElement } from 'react';
+import React, { type MouseEventHandler, type ReactElement } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { polyfill } from 'react-lifecycles-compat';
 import ConfigProvider from '../config-provider';
 import { func, obj } from '../util';
 import Panel from './panel';
-import { CollapseProps, DataItem } from './types';
+import { PanelProps, type CollapseProps, type DataItem } from './types';
 
 /** Collapse */
 class Collapse extends React.Component<
@@ -78,7 +78,7 @@ class Collapse extends React.Component<
         }
 
         this.state = {
-            expandedKeys: typeof expandedKeys === 'undefined' ? [] : (expandedKeys as string[]),
+            expandedKeys: typeof expandedKeys === 'undefined' ? [] : expandedKeys,
         };
     }
 
@@ -109,7 +109,7 @@ class Collapse extends React.Component<
         this.setExpandedKey(expandedKeys);
     }
 
-    genratePanelId(itemId: string | number, index: number) {
+    genratePanelId(itemId: string | number | undefined, index: number) {
         const { id: collapseId } = this.props;
         let id;
         if (itemId) {
@@ -152,21 +152,21 @@ class Collapse extends React.Component<
             });
         }
 
-        const id = this.genratePanelId(item.id as number, index) as string;
+        const id = this.genratePanelId(item.id, index);
         return {
             key,
             title,
             isExpanded,
             disabled,
             id,
             onClick: disabled
-                ? undefined
+                ? null
                 : ((() => {
                       this.onItemClick(key);
                       if ('onClick' in item) {
                           item.onClick?.(key);
                       }
-                  }) as MouseEventHandler<HTMLDivElement>),
+                  }) as PanelProps['onClick']),
         };
     }
 
@@ -219,11 +219,11 @@ class Collapse extends React.Component<
 
     render() {
         const { prefix, style, disabled, dataSource, id, rtl } = this.props;
-        const className = this.props!.className as string;
+        const className = this.props.className;
         const collapseClassName = classNames({
             [`${prefix}collapse`]: true,
             [`${prefix}collapse-disabled`]: disabled,
-            [className]: Boolean(className),
+            [className!]: Boolean(className),
         });
 
         const others = obj.pickOthers(Collapse.propTypes, this.props);

diff --git a/components/collapse/panel.tsx b/components/collapse/panel.tsx
@@ -1,10 +1,10 @@
-import React, { KeyboardEvent } from 'react';
+import React, { type KeyboardEvent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import ConfigProvider from '../config-provider';
 import Icon from '../icon';
 import { func, KEYCODE } from '../util';
-import { PanelProps } from './types';
+import { type PanelProps } from './types';
 
 /** Collapse.Panel */
 class Panel extends React.Component<PanelProps> {
@@ -43,12 +43,12 @@ class Panel extends React.Component<PanelProps> {
 
     static isNextPanel = true; //
 
-    onKeyDown = (e: KeyboardEvent) => {
+    onKeyDown = (e: KeyboardEvent<HTMLElement>) => {
         const { keyCode } = e;
         if (keyCode === KEYCODE.SPACE) {
             const { onClick } = this.props;
             e.preventDefault();
-            onClick && onClick(e as unknown as React.MouseEvent<HTMLDivElement>);
+            onClick && onClick(e);
         }
     };
     render() {
@@ -74,11 +74,11 @@ class Panel extends React.Component<PanelProps> {
         const headingId = id ? `${id}-heading` : undefined;
         const regionId = id ? `${id}-region` : undefined;
         return (
-            <div className={cls} style={style} id={id} {...others}>
+            <div className={cls} style={style} id={id as string} {...others}>
                 <div
                     id={headingId}
                     className={`${prefix}collapse-panel-title`}
-                    onClick={onClick}
+                    onClick={onClick!}
                     onKeyDown={this.onKeyDown}
                     tabIndex={0}
                     aria-disabled={disabled}

diff --git a/components/collapse/types.ts b/components/collapse/types.ts
@@ -1,8 +1,11 @@
 import React from 'react';
 import { CommonProps } from '../util';
 
-type HTMLAttributesWeak = Omit<React.HTMLAttributes<HTMLElement>, 'title'>;
+type HTMLAttributesWeak = Omit<React.HTMLAttributes<HTMLElement>, 'title' | 'id' | 'onClick'>;
 
+/**
+ * @api Panel
+ */
 export interface PanelProps extends HTMLAttributesWeak, CommonProps {
     /**
      * 样式类名的品牌前缀
@@ -40,9 +43,24 @@ export interface PanelProps extends HTMLAttributesWeak, CommonProps {
      */
     className?: string;
 
-    // onClick?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void
+    /**
+     * 唯一标识
+     * @en Unique identifier
+     */
+    id?: string | number;
+
+    /**
+     * 点击回调函数
+     * @en Click callback function
+     */
+    onClick?:
+        | ((e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void)
+        | null;
 }
 
+/**
+ * @api Collapse
+ */
 export type DataItem = {
     id?: string | number;
     title?: React.ReactNode;
@@ -53,6 +71,9 @@ export type DataItem = {
     [propName: string]: unknown;
 };
 
+/**
+ * @api Collapse
+ */
 export interface CollapseProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
     /**
      * 样式前缀