feat: update rc-collapse to 1.11.1

components/collapse/Collapse.jsx

@@ -8,7 +8,7 @@ export default {
     prop: 'activeKey',
     event: 'change',
   },
-  props: initDefaultProps(collapseProps, {
+  props: initDefaultProps(collapseProps(), {
     prefixCls: 'ant-collapse',
     bordered: true,
     openAnimation: animation,

components/collapse/CollapsePanel.jsx

@@ -4,7 +4,7 @@ import VcCollapse, { panelProps } from '../vc-collapse';
 export default {
   name: 'ACollapsePanel',
   props: {
-    ...panelProps,
+    ...panelProps(),
   },
   render() {
     const { prefixCls, showArrow = true, $listeners } = this;

components/vc-collapse/assets/index.less

@@ -0,0 +1,100 @@
+@prefixCls: rc-collapse;
+@text-color: #666;
+@borderStyle: 1px solid #d9d9d9;
+
+#arrow {
+  .common() {
+    width: 0;
+    height: 0;
+    font-size: 0;
+    line-height: 0;
+  }
+  .right(@w, @h, @color) {
+    border-top: @w solid transparent;
+    border-bottom: @w solid transparent;
+    border-left: @h solid @color;
+  }
+
+  .bottom(@w, @h, @color) {
+    border-left: @w solid transparent;
+    border-right: @w solid transparent;
+    border-top: @h solid @color;
+  }
+}
+
+.@{prefixCls} {
+  background-color: #f7f7f7;
+  border-radius: 3px;
+  border: @borderStyle;
+
+  &-anim-active {
+    transition: height 0.2s ease-out;
+  }
+
+  & > &-item {
+    border-top: @borderStyle;
+    &:first-child {
+      border-top: none;
+    }
+
+    > .@{prefixCls}-header {
+      display: flex;
+      align-items: center;
+      line-height: 22px;
+      padding: 10px 16px;
+      color: #666;
+      cursor: pointer;
+      .arrow {
+        display: inline-block;
+        content: '\20';
+        #arrow > .common();
+        #arrow > .right(3px, 4px, #666);
+        vertical-align: middle;
+        margin-right: 8px;
+      }
+
+      .@{prefixCls}-extra {
+        margin: 0 16px 0 auto;
+      }
+    }
+  }
+
+  & > &-item-disabled > .@{prefixCls}-header {
+    cursor: not-allowed;
+    color: #999;
+    background-color: #f3f3f3;
+  }
+
+  &-content {
+    overflow: hidden;
+    color: @text-color;
+    padding: 0 16px;
+    background-color: #fff;
+
+    & > &-box {
+      margin-top: 16px;
+      margin-bottom: 16px;
+    }
+
+    &-inactive {
+      display: none;
+    }
+  }
+
+  &-item:last-child {
+    > .@{prefixCls}-content {
+      border-radius: 0 0 3px 3px;
+    }
+  }
+
+  & > &-item-active {
+    > .@{prefixCls}-header {
+      .arrow {
+        position: relative;
+        top: 2px;
+        #arrow > .bottom(3px, 4px, #666);
+        margin-right: 6px;
+      }
+    }
+  }
+}

components/vc-collapse/demo/custom-icon.jsx

@@ -0,0 +1,127 @@
+import '../assets/index.less';
+import Collapse from '../index';
+
+const text = `
+  A dog is a type of domesticated animal.
+  Known for its loyalty and faithfulness,
+  it can be found as a welcome guest in many households across the world.
+`;
+
+function random() {
+  return parseInt(Math.random() * 10, 10) + 1;
+}
+
+const arrowPath =
+  'M869 487.8L491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h-88' +
+  '.5c-7.4 0-10.8 9.2-5.2 14l350.2 304H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.' +
+  '6 8 8 8h585.1L386.9 854c-5.6 4.9-2.2 14 5.2 14h91.5c1.9 0 3.8-0.7 5.' +
+  '2-2L869 536.2c14.7-12.8 14.7-35.6 0-48.4z';
+
+const { Panel } = Collapse;
+export default {
+  data() {
+    return {
+      time: random(),
+      accordion: false,
+      activeKey: ['4'],
+    };
+  },
+  methods: {
+    onChange(activeKey) {
+      this.activeKey = activeKey;
+    },
+    getItems() {
+      const items = [];
+      for (let i = 0, len = 3; i < len; i++) {
+        const key = i + 1;
+        items.push(
+          <Panel header={`This is panel header ${key}`} key={String(key)} disabled={i === 0}>
+            <p>{text.repeat(this.time)}</p>
+          </Panel>,
+        );
+      }
+      items.push(
+        <Panel header={`This is panel header 4`} key="4">
+          <Collapse defaultActiveKey="1" expandIcon={this.expandIcon}>
+            <Panel header={`This is panel nest panel`} key="1" id="header-test">
+              <p>{text}</p>
+            </Panel>
+          </Collapse>
+        </Panel>,
+      );
+
+      items.push(
+        <Panel header={`This is panel header 5`} key="5">
+          <Collapse defaultActiveKey="1">
+            <Panel header={`This is panel nest panel`} key="1" id="another-test">
+              <form>
+                <label for="test">Name:&nbsp;</label>
+                <input type="text" id="test" />
+              </form>
+            </Panel>
+          </Collapse>
+        </Panel>,
+      );
+
+      items.push(
+        <Panel header={`This is panel header 6`} key="6" extra={<span>Extra Node</span>}>
+          <p>Panel with extra</p>
+        </Panel>,
+      );
+
+      return items;
+    },
+    setActivityKey() {
+      this.activeKey = ['2'];
+    },
+    reRender() {
+      this.time = random();
+    },
+    toggle() {
+      this.accordion = !this.accordion;
+    },
+    expandIcon({ isActive }) {
+      return (
+        <i style={{ marginRight: '.5rem' }}>
+          <svg
+            viewBox="0 0 1024 1024"
+            width="1em"
+            height="1em"
+            fill="currentColor"
+            style={{
+              verticalAlign: '-.125em',
+              transition: 'transform .2s',
+              transform: `rotate(${isActive ? 90 : 0}deg)`,
+            }}
+          >
+            <path d={arrowPath} p-id="5827" />
+          </svg>
+        </i>
+      );
+    },
+  },
+  render() {
+    const accordion = this.accordion;
+    const btn = accordion ? 'Mode: accordion' : 'Mode: collapse';
+    const activeKey = this.activeKey;
+    return (
+      <div style={{ margin: '20px', width: '400px' }}>
+        <button onClick={this.reRender}>reRender</button>
+        <button onClick={this.toggle}>{btn}</button>
+        <br />
+        <br />
+        <button onClick={this.setActivityKey}>active header 2</button>
+        <br />
+        <br />
+        <Collapse
+          accordion={accordion}
+          onChange={this.onChange}
+          activeKey={activeKey}
+          expandIcon={this.expandIcon}
+        >
+          {this.getItems()}
+        </Collapse>
+      </div>
+    );
+  },
+};

components/vc-collapse/demo/simple.jsx

@@ -0,0 +1,97 @@
+import '../assets/index.less';
+import Collapse from '../index';
+
+const text = `
+  A dog is a type of domesticated animal.
+  Known for its loyalty and faithfulness,
+  it can be found as a welcome guest in many households across the world.
+`;
+
+function random() {
+  return parseInt(Math.random() * 10, 10) + 1;
+}
+
+const { Panel } = Collapse;
+export default {
+  data() {
+    return {
+      time: random(),
+      accordion: false,
+      activeKey: ['4'],
+    };
+  },
+  methods: {
+    onChange(activeKey) {
+      this.activeKey = activeKey;
+    },
+    getItems() {
+      const items = [];
+      for (let i = 0, len = 3; i < len; i++) {
+        const key = i + 1;
+        items.push(
+          <Panel header={`This is panel header ${key}`} key={String(key)} disabled={i === 0}>
+            <p>{text.repeat(this.time)}</p>
+          </Panel>,
+        );
+      }
+      items.push(
+        <Panel header={`This is panel header 4`} key="4">
+          <Collapse defaultActiveKey="1">
+            <Panel header={`This is panel nest panel`} key="1" id="header-test">
+              <p>{text}</p>
+            </Panel>
+          </Collapse>
+        </Panel>,
+      );
+
+      items.push(
+        <Panel header={`This is panel header 5`} key="5">
+          <Collapse defaultActiveKey="1">
+            <Panel header={`This is panel nest panel`} key="1" id="another-test">
+              <form>
+                <label for="test">Name:&nbsp;</label>
+                <input type="text" id="test" />
+              </form>
+            </Panel>
+          </Collapse>
+        </Panel>,
+      );
+
+      items.push(
+        <Panel header={`This is panel header 6`} key="6" extra={<span>Extra Node</span>}>
+          <p>Panel with extra</p>
+        </Panel>,
+      );
+
+      return items;
+    },
+    setActivityKey() {
+      this.activeKey = ['2'];
+    },
+    reRender() {
+      this.time = random();
+    },
+    toggle() {
+      this.accordion = !this.accordion;
+    },
+  },
+  render() {
+    const accordion = this.accordion;
+    const btn = accordion ? 'Mode: accordion' : 'Mode: collapse';
+    const activeKey = this.activeKey;
+    return (
+      <div style={{ margin: '20px', width: '400px' }}>
+        <button onClick={this.reRender}>reRender</button>
+        <button onClick={this.toggle}>{btn}</button>
+        <br />
+        <br />
+        <button onClick={this.setActivityKey}>active header 2</button>
+        <br />
+        <br />
+        <Collapse accordion={accordion} onChange={this.onChange} activeKey={activeKey}>
+          {this.getItems()}
+        </Collapse>
+      </div>
+    );
+  },
+};

components/vc-collapse/index.js

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

components/vc-collapse/src/Collapse.jsx

@@ -11,7 +11,6 @@ function _toArray(activeKey) {
   }
   return currentActiveKey;
 }
-
 export default {
   name: 'Collapse',
   mixins: [BaseMixin],
@@ -19,7 +18,7 @@ export default {
     prop: 'activeKey',
     event: 'change',
   },
-  props: initDefaultProps(collapseProps, {
+  props: initDefaultProps(collapseProps(), {
     prefixCls: 'rc-collapse',
     accordion: false,
     destroyInactivePanel: false,
@@ -66,47 +65,55 @@ export default {
       }
       this.setActiveKey(activeKey);
     },
-    getItems() {
+    getNewChild(child, index) {
+      if (isEmptyElement(child)) return;
       const activeKey = this.stateActiveKey;
       const { prefixCls, accordion, destroyInactivePanel, expandIcon } = this.$props;
-      const newChildren = [];
-      this.$slots.default.forEach((child, index) => {
-        if (isEmptyElement(child)) return;
-        const { header, headerClass, disabled } = getPropsData(child);
-        let isActive = false;
-        const key = child.key || String(index);
-        if (accordion) {
-          isActive = activeKey[0] === key;
-        } else {
-          isActive = activeKey.indexOf(key) > -1;
-        }
 
-        let panelEvents = {};
+      // If there is no key provide, use the panel order as default key
-        if (!disabled && disabled !== '') {
+      const key = child.key || String(index);
-          panelEvents = {
+      const { header, headerClass, disabled } = getPropsData(child);
-            itemClick: () => {
+      let isActive = false;
-              this.onClickItem(key);
-            },
-          };
-        }
 
-        const props = {
+      if (accordion) {
-          props: {
+        isActive = activeKey[0] === key;
-            header,
+      } else {
-            headerClass,
+        isActive = activeKey.indexOf(key) > -1;
-            isActive,
+      }
-            prefixCls,
+
-            destroyInactivePanel,
+      let panelEvents = {};
-            openAnimation: this.currentOpenAnimations,
+      if (!disabled && disabled !== '') {
-            accordion,
+        panelEvents = {
-            expandIcon,
+          itemClick: panelKey => {
-          },
+            this.onClickItem(panelKey);
-          on: {
-            ...panelEvents,
           },
         };
+      }
 
-        newChildren.push(cloneElement(child, props));
+      const props = {
+        props: {
+          key,
+          panelKey: key,
+          header,
+          headerClass,
+          isActive,
+          prefixCls,
+          destroyInactivePanel,
+          openAnimation: this.currentOpenAnimations,
+          accordion,
+          expandIcon,
+        },
+        on: {
+          ...panelEvents,
+        },
+      };
+
+      return cloneElement(child, props);
+    },
+    getItems() {
+      const newChildren = [];
+      this.$slots.default.forEach((child, index) => {
+        newChildren.push(this.getNewChild(child, index));
       });
       return newChildren;
     },

components/vc-collapse/src/Panel.jsx

@@ -5,7 +5,7 @@ import { panelProps } from './commonProps';
 
 export default {
   name: 'Panel',
-  props: initDefaultProps(panelProps, {
+  props: initDefaultProps(panelProps(), {
     showArrow: true,
     isActive: false,
     destroyInactivePanel: false,
@@ -14,7 +14,7 @@ export default {
   }),
   methods: {
     handleItemClick() {
-      this.$emit('itemClick');
+      this.$emit('itemClick', this.panelKey);
     },
     handleKeyPress(e) {
       if (e.key === 'Enter' || e.keyCode === 13 || e.which === 13) {
@@ -34,6 +34,7 @@ export default {
       accordion,
       forceRender,
       expandIcon,
+      extra,
     } = this.$props;
     const { $slots } = this;
 
@@ -70,6 +71,7 @@ export default {
         >
           {showArrow && (icon || <i class="arrow" />)}
           {header}
+          {extra && <div class={`${prefixCls}-extra`}>{extra}</div>}
         </div>
         <transition {...transitionProps}>
           <PanelContent

components/vc-collapse/src/commonProps.js

@@ -1,6 +1,6 @@
 import PropTypes from '../../_util/vue-types';
 
-const collapseProps = {
+const collapseProps = () => ({
   prefixCls: PropTypes.string,
   activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
   defaultActiveKey: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
@@ -9,9 +9,9 @@ const collapseProps = {
   bordered: PropTypes.bool,
   expandIcon: PropTypes.func,
   openAnimation: PropTypes.object,
-};
+});
 
-const panelProps = {
+const panelProps = () => ({
   openAnimation: PropTypes.object,
   prefixCls: PropTypes.string,
   header: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node]),
@@ -23,6 +23,8 @@ const panelProps = {
   accordion: PropTypes.bool,
   forceRender: PropTypes.bool,
   expandIcon: PropTypes.func,
-};
+  extra: PropTypes.any,
+  panelKey: PropTypes.any,
+});
 
 export { collapseProps, panelProps };