github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: update checkbox && collapse

pull/666/head
wangxueliang 2019-03-15 11:20:37 +08:00
parent 64b3ab1a55
commit 52b3883cf2
8 changed files with 110 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
components/checkbox/Checkbox.jsx
View File

@ -2,6 +2,7 @@ import PropTypes from '../_util/vue-types';
import classNames from 'classnames';
import VcCheckbox from '../vc-checkbox';
import { getOptionProps, getAttrs } from '../_util/props-util';
import { ConfigConsumerProps } from '../config-provider';
function noop() {}
export default {
@ -11,22 +12,20 @@ export default {
prop: 'checked',
},
props: {
prefixCls: {
default: 'ant-checkbox',
type: String,
},
prefixCls: PropTypes.string,
defaultChecked: PropTypes.bool,
checked: PropTypes.bool,
disabled: PropTypes.bool,
isGroup: Boolean,
isGroup: PropTypes.bool,
value: PropTypes.any,
name: String,
id: String,
indeterminate: Boolean,
name: PropTypes.string,
id: PropTypes.string,
indeterminate: PropTypes.bool,
type: PropTypes.string.def('checkbox'),
autoFocus: Boolean,
autoFocus: PropTypes.bool,
},
inject: {
configProvider: { default: () => ({}) },
checkboxGroupContext: { default: () => null },
},
methods: {
@ -48,7 +47,10 @@ export default {
const props = getOptionProps(this);
const children = $slots.default;
const { mouseenter = noop, mouseleave = noop, ...restListeners } = $listeners;
const { prefixCls, indeterminate, ...restProps } = props;
const { prefixCls: customizePrefixCls, indeterminate, ...restProps } = props;
const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
const prefixCls = getPrefixCls('checkbox', customizePrefixCls);
const checkboxProps = {
props: { ...restProps, prefixCls },
on: restListeners,

11
components/checkbox/Group.jsx
View File

@ -1,5 +1,7 @@
import Checkbox from './Checkbox';
import hasProp from '../_util/props-util';
import { ConfigConsumerProps } from '../config-provider';
function noop() {}
export default {
name: 'ACheckboxGroup',
@ -8,7 +10,6 @@ export default {
},
props: {
prefixCls: {
default: 'ant-checkbox',
type: String,
},
defaultValue: {
@ -30,6 +31,9 @@ export default {
checkboxGroupContext: this,
};
},
inject: {
configProvider: { default: () => ({}) },
},
data() {
const { value, defaultValue } = this;
return {
@ -75,7 +79,10 @@ export default {
},
render() {
const { $props: props, $data: state, $slots } = this;
const { prefixCls, options } = props;
const { prefixCls: customizePrefixCls, options } = props;
const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
const prefixCls = getPrefixCls('checkbox', customizePrefixCls);
let children = $slots.default;
const groupPrefixCls = `${prefixCls}-group`;
if (options && options.length > 0) {

26
components/collapse/Collapse.jsx
View File

@ -1,7 +1,10 @@
import animation from '../_util/openAnimation';
import { getOptionProps, initDefaultProps } from '../_util/props-util';
import { getOptionProps, initDefaultProps, getComponentFromProp, isValidElement } from '../_util/props-util';
import { cloneElement } from '../_util/vnode';
import VcCollapse, { collapseProps } from '../vc-collapse';
import Icon from '../icon';
import { ConfigConsumerProps } from '../config-provider';
export default {
name: 'ACollapse',
model: {
@ -13,20 +16,33 @@ export default {
bordered: true,
openAnimation: animation,
}),
inject: {
configProvider: { default: () => ({}) },
},
methods: {
renderExpandIcon() {
return <Icon type="right" class="arrow" />;
renderExpandIcon(panelProps, prefixCls) {
const expandIcon = getComponentFromProp(this, 'expandIcon', panelProps);
const icon = expandIcon || <Icon type="right" rotate={panelProps.isActive ? 90 : undefined} />;
return isValidElement(expandIcon ? icon[0] : icon)
? cloneElement(icon, {
class: `${prefixCls}-arrow`,
})
: icon;
},
},
render() {
const { prefixCls, bordered, $listeners } = this;
const { prefixCls: customizePrefixCls, bordered, $listeners } = this;
const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
const prefixCls = getPrefixCls('collapse', customizePrefixCls);
const collapseClassName = {
[`${prefixCls}-borderless`]: !bordered,
};
const rcCollapeProps = {
props: {
...getOptionProps(this),
expandIcon: this.renderExpandIcon,
prefixCls,
expandIcon: (panelProps) => this.renderExpandIcon(panelProps, prefixCls),
},
class: collapseClassName,
on: $listeners,

10
components/collapse/CollapsePanel.jsx
View File

@ -1,19 +1,27 @@
import { getOptionProps, getComponentFromProp } from '../_util/props-util';
import VcCollapse, { panelProps } from '../vc-collapse';
import { ConfigConsumerProps } from '../config-provider';
export default {
name: 'ACollapsePanel',
props: {
...panelProps(),
},
inject: {
configProvider: { default: () => ({}) },
},
render() {
const { prefixCls, showArrow = true, $listeners } = this;
const { prefixCls: customizePrefixCls, showArrow = true, $listeners } = this;
const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
const prefixCls = getPrefixCls('collapse', customizePrefixCls);
const collapsePanelClassName = {
[`${prefixCls}-no-arrow`]: !showArrow,
};
const rcCollapePanelProps = {
props: {
...getOptionProps(this),
prefixCls,
},
class: collapsePanelClassName,
on: $listeners,

17
components/collapse/__tests__/index.test.js Normal file
View File

@ -0,0 +1,17 @@
import { mount } from '@vue/test-utils';
import Collapse from '..';
describe('Collapse', () => {
it('should support remove expandIcon', () => {
const wrapper = mount({
render() {
return (
<Collapse expandIcon={() => null}>
<Collapse.Panel header="header" />
</Collapse>
);
},
});
expect(wrapper.html()).toMatchSnapshot();
});
});

12
components/collapse/demo/custom.md
View File

@ -1,21 +1,21 @@
<cn>
#### 自定义面板
自定义各个面板的背景色、圆角和边距。
自定义各个面板的背景色、圆角、边距和图标。
</cn>
<us>
#### Custom Panel
Customize the background, border and margin styles for each panel.
Customize the background, border and margin styles and icon for each panel.
</us>
```html
<template>
<div>
<a-collapse defaultActiveKey="1" :bordered="false">
<a-collapse-panel key="1" :style="customStyle">
<template slot="header">
This is panel header 1<a-icon type="question-circle-o" />
</template>
<template v-slot:expandIcon="props">
<a-icon type="caret-right" rotate="{isActive ? 90 : 0}" />
</template>
<a-collapse-panel header="This is panel header 1" key="1" :style="customStyle">
<p>{{text}}</p>
</a-collapse-panel>
<a-collapse-panel header="This is panel header 2" key="2" :style="customStyle">

21
components/collapse/index.en-US.md
View File

@ -4,12 +4,14 @@
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| accordion | If `true`, `Collapse` renders as `Accordion` | boolean | `false` |
| activeKey(v-model) | Key of the active panel | string\[]\|string | No default value. In `accordion` mode, it's the key of the first panel. |
| bordered | Toggles rendering of the border around the collapse block | boolean | `true` |
| activeKey | Key of the active panel | string\[]\|string | No default value. In `accordion` mode, it's the key of the first panel. |
| defaultActiveKey | Key of the initial active panel | string | - |
| bordered | Toggles rendering of the border around the collapse block | boolean | `true` |
| accordion | If `true`, `Collapse` renders as `Accordion` | boolean | `false` |
| expandIcon | allow to customize collapse icon | Function(props):VNode \| slot="expandIcon" slot-scope="props"\|v-slot:expandIcon="props" |
| destroyInactivePanel | Destroy Inactive Panel | boolean | `false` |
### events
| Events Name | Description | Arguments |
| --- | --- | --- |
@ -24,3 +26,16 @@
| header | Title of the panel | string | - |
| key | Unique key identifying the panel from among its siblings | string | - |
| showArrow | If `false`, panel will not show arrow icon | boolean | `true` |
## FAQ
### How to let the arrow to be on the right?
You can adjust style of the arrow:
```
.ant-collapse .ant-collapse-item .ant-collapse-header .anticon {
left: initial;
right: 16px;
}
```

18
components/collapse/index.zh-CN.md
View File

@ -6,6 +6,10 @@
| --- | --- | --- | --- |
| activeKey(v-model) | 当前激活 tab 面板的 key | string\[]\|string | 默认无，accordion模式下默认第一个元素 |
| defaultActiveKey | 初始化选中面板的 key | string | 无 |
| bordered | 带边框风格的折叠面板 | boolean | `true` |
| accordion | 手风琴模式 | boolean | `false` |
| expandIcon | 自定义切换图标 | Function(props):VNode \| slot="expandIcon" slot-scope="props"\|v-slot:expandIcon="props" |
| destroyInactivePanel | 销毁折叠隐藏的面板 | boolean | `false` |
### 事件
| 事件名称 | 说明 | 回调参数 |
@ -20,3 +24,17 @@
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false |
| header | 面板头内容 | string\|slot | 无 |
| key | 对应 activeKey | string | 无 |
| showArrow | 是否展示当前面板上的箭头 | boolean | `true` |
## FAQ
### 我希望箭头在右边，怎么做？
通过样式调整，将箭头放到右边就行啦
```
.ant-collapse .ant-collapse-item .ant-collapse-header .anticon {
left: initial;
right: 16px;
}
```