Feature/collapse

src/collapse/__tests__/index.test.jsx

@@ -128,10 +128,14 @@ describe('Collapse', () => {
       );
 
       const panel = wrapper.findComponent({ ref: '1' });
-      expect(panel.find('.t-collapse-panel__header svg').classes()).toContain('t-collapse-panel__icon--left');
+      expect(panel.find('.t-collapse-panel__header .t-collapse-panel__icon').classes()).toContain(
+        't-collapse-panel__icon--left',
+      );
 
       await wrapper.setData({ expandIconPlacement: 'right' });
-      expect(panel.find('.t-collapse-panel__header svg').classes()).toContain('t-collapse-panel__icon--right');
+      expect(panel.find('.t-collapse-panel__header .t-collapse-panel__icon').classes()).toContain(
+        't-collapse-panel__icon--right',
+      );
     });
 
     test(':expandMutex', async () => {

src/collapse/_example/icon.vue

@@ -1,6 +1,6 @@
 <template>
   <t-space direction="vertical">
-    <t-collapse :expand-icon="showArrow" :expand-icon-placement="direction" :expand-on-row-click="!onlyIcon">
+    <t-collapse :expand-icon-placement="direction" :expand-on-row-click="!onlyIcon">
       <t-collapse-panel value="0" header="这是一个折叠标题">
         这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
       </t-collapse-panel>
@@ -11,15 +11,15 @@
         >
       </t-collapse-panel>
       <t-collapse-panel value="2">
-        <template #header>这是一个折叠标题</template>
+        <template #expandIcon><star-icon /></template>
+        <template #header>自定义icon1</template>
         这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
       </t-collapse-panel>
-      <t-collapse-panel value="3" header="这是一个折叠标题">
+      <t-collapse-panel value="3" :expand-icon="renderLogo" header="自定义icon2">
         这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
       </t-collapse-panel>
     </t-collapse>
     <t-space>
-      <t-checkbox v-model="showArrow">显示箭头</t-checkbox>
       <t-radio-group v-model="direction">
         <t-radio value="left">左边</t-radio>
         <t-radio value="right">右边</t-radio>
@@ -30,15 +30,24 @@
     </div>
   </t-space>
 </template>
-<script>
+<script lang="jsx">
+import { StarIcon, LogoGithubIcon } from 'tdesign-icons-vue';
+
 export default {
+  components: {
+    StarIcon,
+  },
   data() {
     return {
-      showArrow: true,
       direction: 'left',
       disable: false,
       onlyIcon: false,
     };
   },
+  methods: {
+    renderLogo() {
+      return <LogoGithubIcon />;
+    },
+  },
 };
 </script>

src/collapse/_example/other.vue

@@ -1,6 +1,6 @@
 <template>
   <t-space direction="vertical">
-    <t-collapse :disabled="disabled" :borderless="borderless" @Change="handlePanelChange">
+    <t-collapse :expand-icon="showArrow" :disabled="disabled" :borderless="borderless" @Change="handlePanelChange">
       <t-collapse-panel value="0" header="这是一个折叠标题">
         这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
       </t-collapse-panel>
@@ -21,6 +21,7 @@
     <div class="button-area">
       <t-checkbox v-model="disabled">全部禁用</t-checkbox>
       <t-checkbox v-model="borderless">无边框模式</t-checkbox>
+      <t-checkbox v-model="showArrow">显示箭头</t-checkbox>
     </div>
   </t-space>
 </template>
@@ -30,6 +31,7 @@ export default {
     return {
       disabled: false,
       borderless: false,
+      showArrow: true,
     };
   },
   methods: {

src/collapse/collapse-panel.tsx

@@ -5,14 +5,14 @@ import props from './collapse-panel-props';
 import FakeArrow from '../common-components/fake-arrow';
 import { CollapseValue, TdCollapsePanelProps } from './type';
 import { usePrefixClass } from '../hooks/useConfig';
+import { useTNodeJSX, useContent } from '../hooks/tnode';
 import useCollapseAnimation from './useCollapseAnimation';
-import { renderTNodeJSX, renderContent } from '../utils/render-tnode';
 
 export default defineComponent({
   name: 'TCollapsePanel',
   props,
-  setup(props: TdCollapsePanelProps) {
-    const { value, disabled, expandIcon } = toRefs(props);
+  setup(props: TdCollapsePanelProps, { slots }) {
+    const { value, disabled } = toRefs(props);
     const componentName = usePrefixClass('collapse-panel');
     const disableClass = usePrefixClass('is-disabled');
     const clickableClass = usePrefixClass('is-clickable');
@@ -25,10 +25,9 @@ export default defineComponent({
       disabled: disableAll,
       expandIconPlacement,
       expandOnRowClick,
-      expandIcon: expandIconAll,
-    } = inject('collapseProps');
+    } = inject<any>('collapseProps');
+    const renderParentTNode: Function = inject('renderParentTNode');
     const innerValue = value.value || getUniqId();
-    const showExpandIcon = computed(() => (expandIcon.value === undefined ? expandIconAll.value : expandIcon.value));
     if (defaultExpandAll.value) {
       updateCollapseValue(innerValue);
     }
@@ -37,7 +36,9 @@ export default defineComponent({
       ? collapseValue.value.includes(innerValue)
       : collapseValue.value === innerValue);
     const classes = computed(() => [componentName.value, { [disableClass.value]: isDisabled.value }]);
-
+    const panelExpandIcon = computed(() => slots.expandIcon || props.expandIcon);
+    const renderTNodeJSX = useTNodeJSX();
+    const renderContent = useContent();
     return {
       isDisabled,
       classes,
@@ -49,22 +50,44 @@ export default defineComponent({
       componentName,
       clickableClass,
       transitionClass,
-      showExpandIcon,
+      panelExpandIcon,
+      renderParentTNode,
+      renderTNodeJSX,
+      renderContent,
     };
   },
   methods: {
-    renderIcon(direction: string) {
+    renderDefaultIcon() {
+      const { componentName } = this;
+      return <FakeArrow overlayClassName={`${componentName}__icon--default`} />;
+    },
+    renderIcon() {
+      const {
+        panelExpandIcon,
+        renderParentTNode,
+        componentName,
+        expandIconPlacement,
+        isActive,
+        handleClick,
+        renderDefaultIcon,
+        renderTNodeJSX,
+      } = this;
+      const tNodeRender = panelExpandIcon === undefined ? renderParentTNode : renderTNodeJSX;
       return (
-        <FakeArrow
-          name="arrow"
-          isActive={this.isActive}
-          overlayClassName={`${this.componentName}__icon ${this.componentName}__icon--${direction}`}
-        />
+        <div
+          ref="iconRef"
+          class={`${componentName}__icon ${componentName}__icon--${expandIconPlacement} ${
+            isActive ? `${componentName}__icon--active` : ''
+          }`}
+          onClick={handleClick}
+        >
+          {tNodeRender('expandIcon', renderDefaultIcon())}
+        </div>
       );
     },
     renderHeader() {
       const {
-        showExpandIcon, isDisabled, handleClick, renderIcon, renderBlank,
+        isDisabled, handleClick, renderIcon, renderBlank,
       } = this;
       const cls = [
         `${this.componentName}__header`,
@@ -73,17 +96,15 @@ export default defineComponent({
         },
       ];
       return (
-        <div ref={'headRef'} class={cls} onClick={handleClick}>
-          <div class={`${this.componentName}__header-left`}>
-            {showExpandIcon && this.expandIconPlacement === 'left' ? renderIcon(this.expandIconPlacement) : null}
-          </div>
-          <div class={`${this.componentName}__header-content`}>{renderTNodeJSX(this, 'header')}</div>
+        <div class={cls} onClick={handleClick}>
+          <div class={`${this.componentName}__header-left`}>{this.expandIconPlacement === 'left' && renderIcon()}</div>
+          <div class={`${this.componentName}__header-content`}>{this.renderTNodeJSX('header')}</div>
           {renderBlank()}
           <div class={`${this.componentName}__header-right`}>
             <div class={`${this.componentName}__header-right-content`} onClick={(e: MouseEvent) => e.stopPropagation()}>
-              {renderTNodeJSX(this, 'headerRightContent')}
+              {this.renderTNodeJSX('headerRightContent')}
             </div>
-            {showExpandIcon && this.expandIconPlacement === 'right' ? renderIcon(this.expandIconPlacement) : null}
+            {this.expandIconPlacement === 'right' && renderIcon()}
           </div>
         </div>
       );
@@ -97,22 +118,26 @@ export default defineComponent({
     renderBodyByNormal() {
       return (
         <div v-show={this.isActive} class={`${this.componentName}__body`}>
-          <div class={`${this.componentName}__content`}>{renderContent(this, 'default', 'content')}</div>
+          <div class={`${this.componentName}__content`}>{this.renderContent('default', 'content')}</div>
         </div>
       );
     },
     renderBodyDestroyOnCollapse() {
       return this.isActive ? (
         <div class={`${this.componentName}__body`}>
-          <div class={`${this.componentName}__content`}>{renderContent(this, 'default', 'content')}</div>
+          <div class={`${this.componentName}__content`}>{this.renderContent('default', 'content')}</div>
         </div>
       ) : null;
     },
     handleClick(e: MouseEvent) {
-      const canExpand = this.expandOnRowClick || (e.target as Element).getAttribute('name') === 'arrow';
-      if (canExpand && !this.isDisabled) {
-        this.updateCollapseValue(this.innerValue);
+      const {
+        expandOnRowClick, updateCollapseValue, innerValue, isDisabled,
+      } = this;
+      const canExpand = expandOnRowClick || e.currentTarget === this.$refs.iconRef;
+      if (canExpand && !isDisabled) {
+        updateCollapseValue(innerValue);
       }
+      e.stopPropagation();
     },
   },
   render() {

src/collapse/collapse.tsx

@@ -37,17 +37,19 @@ export default defineComponent({
       let index = 0;
       return () => (index += 1);
     })();
+    const renderTNodeJSX = useTNodeJSX();
     provide('collapseValue', collapseValue);
     provide('updateCollapseValue', updateCollapseValue);
     provide('collapseProps', toRefs(props));
     provide('getUniqId', getUniqId);
+    provide('renderParentTNode', useTNodeJSX());
     return {
       classes,
+      renderTNodeJSX,
     };
   },
   render() {
-    const renderTNodeJSX = useTNodeJSX();
-    const nodes = renderTNodeJSX('default');
+    const nodes = this.renderTNodeJSX('default');
     return <div class={this.classes}>{nodes}</div>;
   },
 });