feat: update rc-collapse to 1.11.1
wangxueliang
parent
487fe2a268
commit
1e1b869166
|
|
@ -8,7 +8,7 @@ export default {
|
|||
prop: 'activeKey',
|
||||
event: 'change',
|
||||
},
|
||||
props: initDefaultProps(collapseProps, {
|
||||
props: initDefaultProps(collapseProps(), {
|
||||
prefixCls: 'ant-collapse',
|
||||
bordered: true,
|
||||
openAnimation: animation,
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import VcCollapse, { panelProps } from '../vc-collapse';
|
|||
export default {
|
||||
name: 'ACollapsePanel',
|
||||
props: {
|
||||
...panelProps,
|
||||
...panelProps(),
|
||||
},
|
||||
render() {
|
||||
const { prefixCls, showArrow = true, $listeners } = this;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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: </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>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
|
@ -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: </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>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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 (!disabled && disabled !== '') {
|
||||
panelEvents = {
|
||||
itemClick: () => {
|
||||
this.onClickItem(key);
|
||||
},
|
||||
};
|
||||
}
|
||||
// If there is no key provide, use the panel order as default key
|
||||
const key = child.key || String(index);
|
||||
const { header, headerClass, disabled } = getPropsData(child);
|
||||
let isActive = false;
|
||||
|
||||
const props = {
|
||||
props: {
|
||||
header,
|
||||
headerClass,
|
||||
isActive,
|
||||
prefixCls,
|
||||
destroyInactivePanel,
|
||||
openAnimation: this.currentOpenAnimations,
|
||||
accordion,
|
||||
expandIcon,
|
||||
},
|
||||
on: {
|
||||
...panelEvents,
|
||||
if (accordion) {
|
||||
isActive = activeKey[0] === key;
|
||||
} else {
|
||||
isActive = activeKey.indexOf(key) > -1;
|
||||
}
|
||||
|
||||
let panelEvents = {};
|
||||
if (!disabled && disabled !== '') {
|
||||
panelEvents = {
|
||||
itemClick: panelKey => {
|
||||
this.onClickItem(panelKey);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
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;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
|
|
|
|||
Loading…
Reference in New Issue