feat(collapse): feat: support multiple types of expandIcon property

feat: support multiple types of expandIcon property closed Tencent#1661
asbstty · Oct 31, 2022 · 94f73fc · 94f73fc
1 parent 6cfbda9
commit 94f73fc
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 14 deletions.
diff --git a/src/collapse/_example/base.vue b/src/collapse/_example/base.vue
@@ -1,7 +1,7 @@
 <template>
   <t-space direction="vertical">
     <t-collapse :default-value="[1]" @change="handlePanelChange">
-      <t-collapse-panel header="这是一个折叠标题">
+      <t-collapse-panel :expand-icon="renderStarIcon" header="这是一个折叠标题">
         这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
       </t-collapse-panel>
       <t-collapse-panel destroy-on-collapse header="设置默认展开项">
@@ -29,15 +29,15 @@
     <p>当前展开项:{{ currentItem }}</p>
   </t-space>
 </template>
-<script setup>
+<script setup lang="jsx">
 import { ref } from 'vue';
+import { StarIcon, LogoGithubIcon, HeartFilledIcon } from 'tdesign-icons-vue-next';
 
 const currentItem = ref([1]);
 const tags1 = ref(['Vue', 'React']);
 const tags2 = ref(['Vue', 'React']);
 const tags3 = ref(['Vue', 'React']);
 const handlePanelChange = (val) => {
-  console.log('val>>>>>>', val);
   currentItem.value = val;
 };
 
@@ -51,6 +51,10 @@ const onChange = (val, context) => {
 const onPaste = (context) => {
   console.log(context);
 };
+
+const renderStarIcon = () => {
+  return <LogoGithubIcon />;
+};
 </script>
 <style lang="less">
 .accordion-demo {

diff --git a/src/collapse/collapse-panel.tsx b/src/collapse/collapse-panel.tsx
@@ -25,10 +25,9 @@ export default defineComponent({
       disabled: disableAll,
       expandIconPlacement,
       expandOnRowClick,
-      expandIcon: expandIconAll,
     } = 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);
     }
@@ -45,19 +44,28 @@ export default defineComponent({
     });
     const handleClick = (e: MouseEvent) => {
       const canExpand =
-        (expandOnRowClick.value && e.target === headRef.value) ||
-        (e.target as Element).getAttribute('name') === 'arrow';
+        (expandOnRowClick.value && e.currentTarget === headRef.value) ||
+        (e.currentTarget as Element).getAttribute('name') === 'arrow';
       if (canExpand && !isDisabled.value) {
         updateCollapseValue(innerValue);
       }
+      e.stopPropagation();
     };
-    const renderIcon = (direction: string) => {
+    const renderDefaultIcon = () => {
+      return <FakeArrow overlayClassName={`${componentName.value}__icon--default`} />;
+    };
+    const renderIcon = () => {
+      const tNodeRender = expandIcon.value === undefined ? renderParentTNode : renderTNodeJSX;
       return (
-        <FakeArrow
+        <div
           name="arrow"
-          isActive={isActive.value}
-          overlayClassName={`${componentName.value}__icon ${componentName.value}__icon--${direction}`}
-        />
+          class={`${componentName.value}__icon ${componentName.value}__icon--${expandIconPlacement.value} ${
+            isActive.value ? `${componentName.value}__icon--active` : ''
+          }`}
+          onClick={handleClick}
+        >
+          {tNodeRender('expandIcon', renderDefaultIcon())}
+        </div>
       );
     };
     const renderBlank = () => {
@@ -72,11 +80,11 @@ export default defineComponent({
       ];
       return (
         <div ref={headRef} class={cls} onClick={handleClick}>
-          {showExpandIcon.value && expandIconPlacement.value === 'left' ? renderIcon(expandIconPlacement.value) : null}
+          {expandIconPlacement.value === 'left' && renderIcon()}
           {renderTNodeJSX('header')}
           {renderBlank()}
           {renderTNodeJSX('headerRightContent')}
-          {showExpandIcon.value && expandIconPlacement.value === 'right' ? renderIcon(expandIconPlacement.value) : null}
+          {expandIconPlacement.value === 'right' && renderIcon()}
         </div>
       );
     };

diff --git a/src/collapse/collapse.tsx b/src/collapse/collapse.tsx
@@ -43,6 +43,7 @@ export default defineComponent({
     provide('updateCollapseValue', updateCollapseValue);
     provide('collapseProps', toRefs(props));
     provide('getUniqId', getUniqId);
+    provide('renderParentTNode', renderTNodeJSX);
     return () => {
       const nodes = renderTNodeJSX('default');
       return <div class={classes.value}>{nodes}</div>;