From 10b25b0ec75a0cdca763277a16e392e85e9a31b1 Mon Sep 17 00:00:00 2001
From: tanjinzhou <415800467@qq.com>
Date: Thu, 16 Jul 2020 16:24:44 +0800
Subject: [PATCH] feat: update collapse
---
antdv-demo | 2 +-
breakChange-2.x.md | 4 ++++
components/collapse/Collapse.jsx | 5 ++++-
components/collapse/CollapsePanel.jsx | 5 ++++-
components/vc-collapse/src/Collapse.jsx | 10 +++++++---
components/vc-collapse/src/openAnimationFactory.js | 4 ++--
examples/App.vue | 2 +-
examples/index.js | 2 ++
8 files changed, 25 insertions(+), 9 deletions(-)
diff --git a/antdv-demo b/antdv-demo
index f2b37285a..59b0f4906 160000
--- a/antdv-demo
+++ b/antdv-demo
@@ -1 +1 @@
-Subproject commit f2b37285a631c364fdc6eef119aeb0fab0793da0
+Subproject commit 59b0f4906bf50dcd93edfd55ec9ae26ed9578d21
diff --git a/breakChange-2.x.md b/breakChange-2.x.md
index 5602da0e1..4e3d50b2e 100644
--- a/breakChange-2.x.md
+++ b/breakChange-2.x.md
@@ -83,3 +83,7 @@ v-model -> v-model:value
## Collapse
v-model -> v-model:activeKey
+
+## List
+
+renderItem(item, index) => renderItem({item, index}) 该用单参数
diff --git a/components/collapse/Collapse.jsx b/components/collapse/Collapse.jsx
index 880b9643b..98b9f10a1 100644
--- a/components/collapse/Collapse.jsx
+++ b/components/collapse/Collapse.jsx
@@ -14,6 +14,7 @@ import { ConfigConsumerProps } from '../config-provider';
export default {
name: 'ACollapse',
+ inheritAttrs: false,
props: initDefaultProps(collapseProps(), {
bordered: true,
openAnimation: animation,
@@ -39,8 +40,9 @@ export default {
const { prefixCls: customizePrefixCls, bordered, expandIconPosition } = this;
const getPrefixCls = this.configProvider.getPrefixCls;
const prefixCls = getPrefixCls('collapse', customizePrefixCls);
-
+ const { class: className, ...restAttrs } = this.$attrs;
const collapseClassName = {
+ [className]: className,
[`${prefixCls}-borderless`]: !bordered,
[`${prefixCls}-icon-position-${expandIconPosition}`]: true,
};
@@ -49,6 +51,7 @@ export default {
prefixCls,
expandIcon: panelProps => this.renderExpandIcon(panelProps, prefixCls),
class: collapseClassName,
+ ...restAttrs,
};
return <VcCollapse {...rcCollapeProps}>{getSlot(this)}</VcCollapse>;
diff --git a/components/collapse/CollapsePanel.jsx b/components/collapse/CollapsePanel.jsx
index dc6ce97d4..7452d50ba 100644
--- a/components/collapse/CollapsePanel.jsx
+++ b/components/collapse/CollapsePanel.jsx
@@ -5,6 +5,7 @@ import { ConfigConsumerProps } from '../config-provider';
export default {
name: 'ACollapsePanel',
+ inheritAttrs: false,
props: {
...panelProps(),
},
@@ -17,8 +18,9 @@ export default {
const { prefixCls: customizePrefixCls, showArrow = true } = this;
const getPrefixCls = this.configProvider.getPrefixCls;
const prefixCls = getPrefixCls('collapse', customizePrefixCls);
-
+ const { class: className, ...restAttrs } = this.$attrs;
const collapsePanelClassName = {
+ [className]: className,
[`${prefixCls}-no-arrow`]: !showArrow,
};
@@ -28,6 +30,7 @@ export default {
prefixCls,
extra: getComponent(this, 'extra'),
class: collapsePanelClassName,
+ ...restAttrs,
};
return <VcCollapse.Panel {...rcCollapePanelProps}>{getSlot(this)}</VcCollapse.Panel>;
},
diff --git a/components/vc-collapse/src/Collapse.jsx b/components/vc-collapse/src/Collapse.jsx
index fe7a791cd..72edc0739 100644
--- a/components/vc-collapse/src/Collapse.jsx
+++ b/components/vc-collapse/src/Collapse.jsx
@@ -20,6 +20,7 @@ function _toArray(activeKey) {
export default {
name: 'Collapse',
mixins: [BaseMixin],
+ inheritAttrs: false,
props: initDefaultProps(collapseProps(), {
prefixCls: 'rc-collapse',
accordion: false,
@@ -108,8 +109,9 @@ export default {
},
getItems() {
const newChildren = [];
- getSlot(this) &&
- getSlot(this).forEach((child, index) => {
+ const children = getSlot(this);
+ children &&
+ children.forEach((child, index) => {
newChildren.push(this.getNewChild(child, index));
});
return newChildren;
@@ -122,11 +124,13 @@ export default {
},
render() {
const { prefixCls, accordion } = this.$props;
+ const { class: className, style } = this.$attrs;
const collapseClassName = {
[prefixCls]: true,
+ [className]: className,
};
return (
- <div class={collapseClassName} role={accordion ? 'tablist' : null}>
+ <div class={collapseClassName} style={style} role={accordion ? 'tablist' : null}>
{this.getItems()}
</div>
);
diff --git a/components/vc-collapse/src/openAnimationFactory.js b/components/vc-collapse/src/openAnimationFactory.js
index 5f1e9dbdc..bbe3e9ddb 100644
--- a/components/vc-collapse/src/openAnimationFactory.js
+++ b/components/vc-collapse/src/openAnimationFactory.js
@@ -23,10 +23,10 @@ function animate(node, show, transitionName, done) {
function animation(prefixCls) {
return {
- enter(node, done) {
+ onEnter(node, done) {
return animate(node, true, `${prefixCls}-anim`, done);
},
- leave(node, done) {
+ onLeave(node, done) {
return animate(node, false, `${prefixCls}-anim`, done);
},
};
diff --git a/examples/App.vue b/examples/App.vue
index 7043977a5..22a8dc78f 100644
--- a/examples/App.vue
+++ b/examples/App.vue
@@ -4,7 +4,7 @@
</div>
</template>
<script>
-import demo from '../antdv-demo/docs/list/demo/basic';
+import demo from '../antdv-demo/docs/list/demo/grid';
export default {
components: {
diff --git a/examples/index.js b/examples/index.js
index 3eee6292c..a020ddfaf 100644
--- a/examples/index.js
+++ b/examples/index.js
@@ -25,6 +25,7 @@ import {
Pagination,
List,
Collapse,
+ Card,
Avatar,
notification,
message,
@@ -72,4 +73,5 @@ app
.use(List)
.use(Collapse)
.use(Avatar)
+ .use(Card)
.mount('#app');