Feature/collapse

src/collapse/CollapsePanel.tsx

@@ -39,8 +39,9 @@ const CollapsePanel = (props: CollapsePanelProps) => {
   const { classPrefix } = useConfig();
   const componentName = `${classPrefix}-collapse-panel`;
   const innerValue = value || index;
-  const showExpandIcon = expandIcon === undefined ? expandIconAll : expandIcon;
+  const finalExpandIcon = (expandIcon === undefined ? expandIconAll : expandIcon) || null;
   const headRef = useRef();
+  const iconRef = useRef();
   const contentRef = useRef<HTMLDivElement>();
   const bodyRef = useRef<HTMLDivElement>();
   const isDisabled = disabled || disableAll;
@@ -63,23 +64,35 @@ const CollapsePanel = (props: CollapsePanelProps) => {
   );
 
   const handleClick = (e) => {
-    const canExpand =
-      (expandOnRowClick && e.target === headRef.current) || ['svg', 'path'].includes((e.target as Element).tagName);
+    const canExpand = (expandOnRowClick && e.currentTarget === headRef.current) || e.currentTarget === iconRef.current;
 
     if (canExpand && !isDisabled) {
       updateCollapseValue(innerValue);
     }
+    e.stopPropagation();
   };
 
-  const renderIcon = (direction: string) => (
-    <FakeArrow
-      style={{
-        transform: isActive ? 'rotate(180deg)' : 'rotate(-90deg)',
-      }}
-      isActive={isActive}
-      overlayClassName={classnames(`${componentName}__icon`, `${componentName}__icon--${direction}`)}
-    />
-  );
+  const renderIcon = () => {
+    let iconNode = null;
+    if (React.isValidElement(finalExpandIcon)) {
+      iconNode = finalExpandIcon;
+    } else if (finalExpandIcon) {
+      iconNode = <FakeArrow overlayClassName={classnames(`${componentName}__icon--default`)} />;
+    }
+    return (
+      iconNode && (
+        <div
+          className={`${componentName}__icon ${componentName}__icon--${expandIconPlacement} ${
+            isActive ? `${componentName}__icon--active` : ''
+          }`}
+          ref={iconRef}
+          onClick={handleClick}
+        >
+          {iconNode}
+        </div>
+      )
+    );
+  };
 
   const renderHeader = () => {
     const cls = [
@@ -90,11 +103,11 @@ const CollapsePanel = (props: CollapsePanelProps) => {
     ];
     return (
       <div ref={headRef} className={classnames(cls)} onClick={handleClick}>
-        {showExpandIcon && expandIconPlacement === 'left' ? renderIcon(expandIconPlacement) : null}
+        {expandIconPlacement === 'left' && renderIcon()}
         {header}
         <div className={`${componentName}__header--blank`}></div>
         {headerRightContent}
-        {showExpandIcon && expandIconPlacement === 'right' ? renderIcon(expandIconPlacement) : null}
+        {expandIconPlacement === 'right' && renderIcon()}
       </div>
     );
   };

src/collapse/_example/icon.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Collapse, TagInput, Radio, Checkbox, Space } from 'tdesign-react';
+import { StarIcon } from 'tdesign-icons-react';
 
 const { Panel } = Collapse;
 
@@ -9,7 +10,6 @@ export default function CollapseExample() {
   const options = [
     { value: 1, label: '左边' },
     { value: 2, label: '右边' },
-    { value: 3, label: '不展示' },
   ];
   return (
     <Space direction="vertical">
@@ -29,6 +29,9 @@ export default function CollapseExample() {
             <TagInput defaultValue={['Vue', 'React']} clearable />
           </div>
         </Panel>
+        <Panel header="自定义图标" expandIcon={<StarIcon />}>
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </Panel>
       </Collapse>
       <Space direction="vertical">
         <Radio.Group value={radio} options={options} onChange={setRadio} />

src/collapse/_example/other.jsx

@@ -6,9 +6,10 @@ export default function CollapseExample() {
   const [collapseValue, setCollapseValue] = useState([]);
   const [disabledAll, setDisabledAll] = useState(false);
   const [borderless, setBorderless] = useState(false);
+  const [showIcon, setShowIcon] = useState(true);
   return (
     <Space direction="vertical">
-      <Collapse value={collapseValue} borderless={borderless} disabled={disabledAll} onChange={setCollapseValue}>
+      <Collapse expandIcon={showIcon} value={collapseValue} borderless={borderless} disabled={disabledAll} onChange={setCollapseValue}>
         <Panel header="这是一个折叠标题">
           这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
         </Panel>
@@ -38,6 +39,14 @@ export default function CollapseExample() {
         >
           无边框模式
         </Checkbox>
+        <Checkbox
+          checked={showIcon}
+          onChange={() => {
+            setShowIcon(!showIcon);
+          }}
+        >
+          显示icon
+        </Checkbox>
         <div style={{ marginTop: 10 }}>当前展开的Collapse Panel: {collapseValue.map((item) => `${item} `)}</div>
       </Space>
     </Space>