cr vc-collapse and update to 1.11.7

Author: tangjinzhou

components/collapse/__tests__/__snapshots__/demo.test.js.snap

@@ -87,7 +87,7 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
 <div>
   <div class="ant-collapse ant-collapse-borderless">
     <div role="tablist" class="ant-collapse-item ant-collapse-item-active" style="background: rgb(247, 247, 247); border-radius: 4px; margin-bottom: 24px; border: 0px; overflow: hidden;">
-      <div role="button" tabindex="0" aria-expanded="true" class="ant-collapse-header"><i aria-label="icon: caret-right" class="anticon anticon-caret-right ant-collapse-arrow"><svg viewBox="0 0 1024 1024" data-icon="caret-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="" style="transform: rotate({isActive ? 90 : 0}deg);">
+      <div role="button" tabindex="0" aria-expanded="true" class="ant-collapse-header"><i aria-label="icon: caret-right" class="anticon anticon-caret-right ant-collapse-arrow"><svg viewBox="0 0 1024 1024" data-icon="caret-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="" style="transform: rotate(90deg);">
             <path d="M715.8 493.5L335 165.1c-14.2-12.2-35-1.2-35 18.5v656.8c0 19.7 20.8 30.7 35 18.5l380.8-328.4c10.9-9.4 10.9-27.6 0-37z"></path>
           </svg></i>This is panel header 1</div>
       <div class="ant-collapse-content ant-collapse-content-active ant-motion-collapse">
@@ -97,13 +97,13 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
       </div>
     </div>
     <div role="tablist" class="ant-collapse-item" style="background: rgb(247, 247, 247); border-radius: 4px; margin-bottom: 24px; border: 0px; overflow: hidden;">
-      <div role="button" tabindex="0" class="ant-collapse-header"><i aria-label="icon: caret-right" class="anticon anticon-caret-right ant-collapse-arrow"><svg viewBox="0 0 1024 1024" data-icon="caret-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="" style="transform: rotate({isActive ? 90 : 0}deg);">
+      <div role="button" tabindex="0" class="ant-collapse-header"><i aria-label="icon: caret-right" class="anticon anticon-caret-right ant-collapse-arrow"><svg viewBox="0 0 1024 1024" data-icon="caret-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
             <path d="M715.8 493.5L335 165.1c-14.2-12.2-35-1.2-35 18.5v656.8c0 19.7 20.8 30.7 35 18.5l380.8-328.4c10.9-9.4 10.9-27.6 0-37z"></path>
           </svg></i>This is panel header 2</div>
       <!---->
     </div>
     <div role="tablist" class="ant-collapse-item" style="background: rgb(247, 247, 247); border-radius: 4px; margin-bottom: 24px; border: 0px; overflow: hidden;">
-      <div role="button" tabindex="0" class="ant-collapse-header"><i aria-label="icon: caret-right" class="anticon anticon-caret-right ant-collapse-arrow"><svg viewBox="0 0 1024 1024" data-icon="caret-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="" style="transform: rotate({isActive ? 90 : 0}deg);">
+      <div role="button" tabindex="0" class="ant-collapse-header"><i aria-label="icon: caret-right" class="anticon anticon-caret-right ant-collapse-arrow"><svg viewBox="0 0 1024 1024" data-icon="caret-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
             <path d="M715.8 493.5L335 165.1c-14.2-12.2-35-1.2-35 18.5v656.8c0 19.7 20.8 30.7 35 18.5l380.8-328.4c10.9-9.4 10.9-27.6 0-37z"></path>
           </svg></i>This is panel header 3</div>
       <!---->

components/collapse/demo/custom.md

@@ -13,7 +13,7 @@ Customize the background, border and margin styles and icon for each panel.
   <div>
     <a-collapse defaultActiveKey="1" :bordered="false">
       <template v-slot:expandIcon="props">
-        <a-icon  type="caret-right" rotate="{isActive ? 90 : 0}" />
+        <a-icon  type="caret-right" :rotate="props.isActive ? 90 : 0" />
       </template>
       <a-collapse-panel  header="This is panel header 1" key="1" :style="customStyle">
         <p>{{text}}</p>

components/vc-collapse/index.js

@@ -1,4 +1,4 @@
-// based on rc-collapse 1.11.1
+// based on rc-collapse 1.11.7
 import CollapsePanel from './src/Panel';
 import Collapse from './src/Collapse';
 import { collapseProps, panelProps } from './src/commonProps';

components/vc-collapse/src/Collapse.jsx

@@ -9,7 +9,7 @@ function _toArray(activeKey) {
   if (!Array.isArray(currentActiveKey)) {
     currentActiveKey = currentActiveKey ? [currentActiveKey] : [];
   }
-  return currentActiveKey;
+  return currentActiveKey.map(key => String(key));
 }
 export default {
   name: 'Collapse',
@@ -84,15 +84,13 @@ export default {
       let panelEvents = {};
       if (!disabled && disabled !== '') {
         panelEvents = {
-          itemClick: panelKey => {
-            this.onClickItem(panelKey);
-          },
+          itemClick:  this.onClickItem,
         };
       }
 
       const props = {
+        key,
         props: {
-          key,
           panelKey: key,
           header,
           headerClass,
@@ -103,9 +101,7 @@ export default {
           accordion,
           expandIcon,
         },
-        on: {
-          ...panelEvents,
-        },
+        on: panelEvents,
       };
 
       return cloneElement(child, props);

components/vc-collapse/src/Panel.jsx

@@ -55,9 +55,9 @@ export default {
       [`${prefixCls}-item-active`]: isActive,
       [`${prefixCls}-item-disabled`]: disabled,
     };
-    let icon = null;
+    let icon = <i class="arrow" />;
     if (showArrow && typeof expandIcon === 'function') {
-      icon = cloneElement(expandIcon(this.$props));
+      icon = expandIcon(this.$props);
     }
     return (
       <div class={itemCls} role="tablist">
@@ -69,7 +69,7 @@ export default {
           tabIndex={disabled ? -1 : 0}
           aria-expanded={isActive}
         >
-          {showArrow && (icon || <i class="arrow" />)}
+          {showArrow && icon}
           {header}
           {extra && <div class={`${prefixCls}-extra`}>{extra}</div>}
         </div>

components/vc-collapse/src/commonProps.js

@@ -2,8 +2,16 @@ import PropTypes from '../../_util/vue-types';
 
 const collapseProps = () => ({
   prefixCls: PropTypes.string,
-  activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-  defaultActiveKey: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  activeKey: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
+  ]),
+  defaultActiveKey: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
+  ]),
   accordion: PropTypes.bool,
   destroyInactivePanel: PropTypes.bool,
   bordered: PropTypes.bool,