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

Merge branch 'feat-3.10.3' of https://github.com/vueComponent/ant-design into feat-3.10.3

pull/309/head
tangjinzhou 2018-12-04 09:45:10 +08:00
parent 9f3cefcbfb 380331df80
commit e51a6e9691
28 changed files with 334 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
components/cascader/__tests__/__snapshots__/index.test.js.snap
View File

@ -5,11 +5,11 @@ exports[`Cascader can be selected 1`] = `
<div class="ant-cascader-menus ant-cascader-menus-placement-bottomLeft" style="left: -999px; top: -995px;"> <div class="ant-cascader-menus ant-cascader-menus-placement-bottomLeft" style="left: -999px; top: -995px;">
<div class="ant-cascader-menus-content"> <div class="ant-cascader-menus-content">
<ul class="ant-cascader-menu"> <ul class="ant-cascader-menu">
<li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang<span class="ant-cascader-menu-item-expand-icon">&gt;</span></li> <li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
<li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu<span class="ant-cascader-menu-item-expand-icon">&gt;</span></li> <li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
</ul> </ul>
<ul class="ant-cascader-menu"> <ul class="ant-cascader-menu">
<li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Hangzhou<span class="ant-cascader-menu-item-expand-icon">&gt;</span></li> <li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Hangzhou<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
</ul> </ul>
</div> </div>
</div> </div>
@ -21,11 +21,11 @@ exports[`Cascader can be selected 2`] = `
<div class="ant-cascader-menus ant-cascader-menus-placement-bottomLeft" style="left: -999px; top: -995px;"> <div class="ant-cascader-menus ant-cascader-menus-placement-bottomLeft" style="left: -999px; top: -995px;">
<div class="ant-cascader-menus-content"> <div class="ant-cascader-menus-content">
<ul class="ant-cascader-menu"> <ul class="ant-cascader-menu">
<li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang<span class="ant-cascader-menu-item-expand-icon">&gt;</span></li> <li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
<li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu<span class="ant-cascader-menu-item-expand-icon">&gt;</span></li> <li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
</ul> </ul>
<ul class="ant-cascader-menu"> <ul class="ant-cascader-menu">
<li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Hangzhou<span class="ant-cascader-menu-item-expand-icon">&gt;</span></li> <li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Hangzhou<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
</ul> </ul>
<ul class="ant-cascader-menu"> <ul class="ant-cascader-menu">
<li title="West Lake" class="ant-cascader-menu-item">West Lake</li> <li title="West Lake" class="ant-cascader-menu-item">West Lake</li>
@ -40,11 +40,11 @@ exports[`Cascader can be selected 3`] = `
<div class="ant-cascader-menus ant-cascader-menus-placement-bottomLeft" style="display: none;"> <div class="ant-cascader-menus ant-cascader-menus-placement-bottomLeft" style="display: none;">
<div class="ant-cascader-menus-content"> <div class="ant-cascader-menus-content">
<ul class="ant-cascader-menu"> <ul class="ant-cascader-menu">
<li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang<span class="ant-cascader-menu-item-expand-icon">&gt;</span></li> <li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
<li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu<span class="ant-cascader-menu-item-expand-icon">&gt;</span></li> <li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
</ul> </ul>
<ul class="ant-cascader-menu"> <ul class="ant-cascader-menu">
<li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Hangzhou<span class="ant-cascader-menu-item-expand-icon">&gt;</span></li> <li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Hangzhou<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
</ul> </ul>
<ul class="ant-cascader-menu"> <ul class="ant-cascader-menu">
<li title="West Lake" class="ant-cascader-menu-item ant-cascader-menu-item-active">West Lake</li> <li title="West Lake" class="ant-cascader-menu-item ant-cascader-menu-item-active">West Lake</li>
@ -67,8 +67,8 @@ exports[`Cascader popup correctly when panel is open 1`] = `
<div class="ant-cascader-menus ant-cascader-menus-placement-bottomLeft" style="left: -999px; top: -995px;"> <div class="ant-cascader-menus ant-cascader-menus-placement-bottomLeft" style="left: -999px; top: -995px;">
<div class="ant-cascader-menus-content"> <div class="ant-cascader-menus-content">
<ul class="ant-cascader-menu"> <ul class="ant-cascader-menu">
<li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Zhejiang<span class="ant-cascader-menu-item-expand-icon">&gt;</span></li> <li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Zhejiang<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
<li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu<span class="ant-cascader-menu-item-expand-icon">&gt;</span></li> <li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
</ul> </ul>
</div> </div>
</div> </div>
@ -80,11 +80,11 @@ exports[`Cascader popup correctly with defaultValue 1`] = `
<div class="ant-cascader-menus ant-cascader-menus-placement-bottomLeft" style="left: -999px; top: -995px;"> <div class="ant-cascader-menus ant-cascader-menus-placement-bottomLeft" style="left: -999px; top: -995px;">
<div class="ant-cascader-menus-content"> <div class="ant-cascader-menus-content">
<ul class="ant-cascader-menu"> <ul class="ant-cascader-menu">
<li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang<span class="ant-cascader-menu-item-expand-icon">&gt;</span></li> <li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
<li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu<span class="ant-cascader-menu-item-expand-icon">&gt;</span></li> <li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
</ul> </ul>
<ul class="ant-cascader-menu"> <ul class="ant-cascader-menu">
<li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Hangzhou<span class="ant-cascader-menu-item-expand-icon">&gt;</span></li> <li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Hangzhou<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
</ul> </ul>
<ul class="ant-cascader-menu"> <ul class="ant-cascader-menu">
<li title="West Lake" class="ant-cascader-menu-item">West Lake</li> <li title="West Lake" class="ant-cascader-menu-item">West Lake</li>
@ -95,8 +95,9 @@ exports[`Cascader popup correctly with defaultValue 1`] = `
`; `;
exports[`Cascader support controlled mode 1`] = ` exports[`Cascader support controlled mode 1`] = `
<span tabindex="0" class="ant-cascader-picker"><input value="" type="text" readonly="true" class="ant-input ant-cascader-input ant-cascader-input "><span class="ant-cascader-picker-label">Zhejiang / Hangzhou / West Lake</span><i class="anticon anticon-cross-circle"> <span tabindex="0" class="ant-cascader-picker"><input value="" type="text" readonly="true" class="ant-input ant-cascader-input ant-cascader-input "><span class="ant-cascader-picker-label">Zhejiang / Hangzhou / West Lake</span><i class="ant-cascader-picker-clear anticon anticon-close-circle"><svg viewBox="64 64 896 896" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
<!----></i><i class="anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""> <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path>
</svg></i><i class="ant-cascader-picker-arrow anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
<path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path> <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
</svg></i></span> </svg></i></span>
`; `;

3
components/cascader/demo/index.vue
View File

@ -10,6 +10,7 @@ import Lazy from './lazy'
import Search from './search' import Search from './search'
import Size from './size' import Size from './size'
import FieldsName from './fields-name' import FieldsName from './fields-name'
import Suffix from './suffix'
import CN from '../index.zh-CN.md' import CN from '../index.zh-CN.md'
import US from '../index.en-US.md' import US from '../index.en-US.md'
@ -33,6 +34,7 @@ const md = {
export default { export default {
category: 'Components', category: 'Components',
type: 'Data Entry', type: 'Data Entry',
zhType: '数据录入',
title: 'Cascader', title: 'Cascader',
subtitle: '级联选择', subtitle: '级联选择',
render () { render () {
@ -50,6 +52,7 @@ export default {
<Search/> <Search/>
<Size/> <Size/>
<FieldsName /> <FieldsName />
<Suffix />
<api> <api>
<CN slot='cn' /> <CN slot='cn' />
<US/> <US/>

58
components/cascader/demo/suffix.md Normal file
View File

@ -0,0 +1,58 @@
<cn>
#### 后缀图标
省市区级联。
</cn>
<us>
#### Suffix
Cascade selection box for selecting province/city/district.
</us>
```html
<template>
<div>
<a-cascader style="margin-top: 1rem" :options="options" @change="onChange" placeholder="Please select">
<a-icon type="smile" slot="suffixIcon" class="test"/>
</a-cascader>
<a-cascader suffixIcon="ab" style="margin-top: 1rem" :options="options" @change="onChange" placeholder="Please select" />
</div>
</template>
<script>
export default {
data() {
return {
options: [{
value: 'zhejiang',
label: 'Zhejiang',
children: [{
value: 'hangzhou',
label: 'Hangzhou',
children: [{
value: 'xihu',
label: 'West Lake',
}],
}],
}, {
value: 'jiangsu',
label: 'Jiangsu',
children: [{
value: 'nanjing',
label: 'Nanjing',
children: [{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
}],
}],
}]
}
},
methods: {
onChange(value) {
console.log(value);
}
}
}
</script>
```

1
components/cascader/index.en-US.md
View File

@ -26,6 +26,7 @@
| popupVisible | set visible of cascader popup | boolean | - | | popupVisible | set visible of cascader popup | boolean | - |
| showSearch | Whether show search input in single mode. | boolean\|object | false | | showSearch | Whether show search input in single mode. | boolean\|object | false |
| size | input size, one of `large` `default` `small` | string | `default` | | size | input size, one of `large` `default` `small` | string | `default` |
| suffixIcon | The custom suffix icon | string \| VNode \| slot | - |
| value(v-model) | selected value | string\[] | - | | value(v-model) | selected value | string\[] | - |
Fields in `showSearch`: Fields in `showSearch`:

59
components/cascader/index.jsx
View File

@ -7,8 +7,9 @@ import omit from 'omit.js'
import KeyCode from '../_util/KeyCode' import KeyCode from '../_util/KeyCode'
import Input from '../input' import Input from '../input'
import Icon from '../icon' import Icon from '../icon'
import { hasProp, filterEmpty, getOptionProps, getStyle, getClass, getAttrs } from '../_util/props-util' import { hasProp, filterEmpty, getOptionProps, getStyle, getClass, getAttrs, getComponentFromProp, isValidElement } from '../_util/props-util'
import BaseMixin from '../_util/BaseMixin' import BaseMixin from '../_util/BaseMixin'
import { cloneElement } from '../_util/vnode'
const CascaderOptionType = PropTypes.shape({ const CascaderOptionType = PropTypes.shape({
value: PropTypes.string, value: PropTypes.string,
@ -74,6 +75,7 @@ const CascaderProps = {
popupVisible: PropTypes.bool, popupVisible: PropTypes.bool,
fieldNames: FieldNamesType, fieldNames: FieldNamesType,
autoFocus: PropTypes.bool, autoFocus: PropTypes.bool,
suffixIcon: PropTypes.any,
} }
function defaultFilterOption (inputValue, path, names) { function defaultFilterOption (inputValue, path, names) {
@ -88,7 +90,7 @@ function defaultSortFilteredOption (a, b, inputValue, names) {
return a.findIndex(callback) - b.findIndex(callback) return a.findIndex(callback) - b.findIndex(callback)
} }
function getFilledFieldNames (fieldNames = {}) { function getFilledFieldNames ({ fieldNames = {}}) {
const names = { const names = {
children: fieldNames.children || 'children', children: fieldNames.children || 'children',
label: fieldNames.label || 'label', label: fieldNames.label || 'label',
@ -110,13 +112,13 @@ const Cascader = {
}, },
data () { data () {
this.cachedOptions = [] this.cachedOptions = []
const { value, defaultValue, popupVisible, showSearch, options, changeOnSelect, flattenTree, fieldNames } = this const { value, defaultValue, popupVisible, showSearch, options, flattenTree } = this
return { return {
sValue: value || defaultValue || [], sValue: value || defaultValue || [],
inputValue: '', inputValue: '',
inputFocused: false, inputFocused: false,
sPopupVisible: popupVisible, sPopupVisible: popupVisible,
flattenOptions: showSearch ? flattenTree(options, changeOnSelect, fieldNames) : undefined, flattenOptions: showSearch ? flattenTree(options, this.$props) : undefined,
} }
}, },
mounted () { mounted () {
@ -135,7 +137,7 @@ const Cascader = {
}, },
options (val) { options (val) {
if (this.showSearch) { if (this.showSearch) {
this.setState({ flattenOptions: this.flattenTree(this.options, this.changeOnSelect, this.fieldNames) }) this.setState({ flattenOptions: this.flattenTree(this.options, this.$props) })
} }
}, },
}, },
@ -218,8 +220,8 @@ const Cascader = {
}, },
getLabel () { getLabel () {
const { options, $scopedSlots, fieldNames } = this const { options, $scopedSlots } = this
const names = getFilledFieldNames(fieldNames) const names = getFilledFieldNames(this.$props)
const displayRender = this.displayRender || $scopedSlots.displayRender || defaultDisplayRender const displayRender = this.displayRender || $scopedSlots.displayRender || defaultDisplayRender
const value = this.sValue const value = this.sValue
const unwrappedValue = Array.isArray(value[0]) ? value[0] : value const unwrappedValue = Array.isArray(value[0]) ? value[0] : value
@ -242,18 +244,18 @@ const Cascader = {
} }
}, },
flattenTree (options, changeOnSelect, fieldNames, ancestor = []) { flattenTree (options, props, ancestor = []) {
const names = getFilledFieldNames(fieldNames) const names = getFilledFieldNames(props)
let flattenOptions = [] let flattenOptions = []
const childrenName = names.children const childrenName = names.children
options.forEach((option) => { options.forEach((option) => {
const path = ancestor.concat(option) const path = ancestor.concat(option)
if (changeOnSelect || !option[childrenName] || !option[childrenName].length) { if (props.changeOnSelect || !option[childrenName] || !option[childrenName].length) {
flattenOptions.push(path) flattenOptions.push(path)
} }
if (option[childrenName]) { if (option[childrenName]) {
flattenOptions = flattenOptions.concat( flattenOptions = flattenOptions.concat(
this.flattenTree(option[childrenName], changeOnSelect, fieldNames, path) this.flattenTree(option[childrenName], props, path)
) )
} }
}) })
@ -261,8 +263,8 @@ const Cascader = {
}, },
generateFilteredOptions (prefixCls) { generateFilteredOptions (prefixCls) {
const { showSearch, notFoundContent, $scopedSlots, fieldNames } = this const { showSearch, notFoundContent, $scopedSlots } = this
const names = getFilledFieldNames(fieldNames) const names = getFilledFieldNames(this.$props)
const { const {
filter = defaultFilterOption, filter = defaultFilterOption,
// render = this.defaultRenderFilteredOption, // render = this.defaultRenderFilteredOption,
@ -308,6 +310,7 @@ const Cascader = {
const { $slots, sPopupVisible, inputValue, $listeners } = this const { $slots, sPopupVisible, inputValue, $listeners } = this
const { sValue: value, inputFocused } = this.$data const { sValue: value, inputFocused } = this.$data
const props = getOptionProps(this) const props = getOptionProps(this)
const suffixIcon = getComponentFromProp(this, 'suffixIcon')
const { const {
prefixCls, inputPrefixCls, placeholder, size, disabled, prefixCls, inputPrefixCls, placeholder, size, disabled,
allowClear, showSearch = false, ...otherProps } = props allowClear, showSearch = false, ...otherProps } = props
@ -318,7 +321,8 @@ const Cascader = {
}) })
const clearIcon = (allowClear && !disabled && value.length > 0) || inputValue ? ( const clearIcon = (allowClear && !disabled && value.length > 0) || inputValue ? (
<Icon <Icon
type='cross-circle' type='close-circle'
theme='filled'
class={`${prefixCls}-picker-clear`} class={`${prefixCls}-picker-clear`}
onClick={this.clearSelection} onClick={this.clearSelection}
key='clear-icon' key='clear-icon'
@ -403,6 +407,19 @@ const Cascader = {
attrs: getAttrs(this), attrs: getAttrs(this),
} }
const children = filterEmpty($slots.default) const children = filterEmpty($slots.default)
const inputIcon = suffixIcon && (
isValidElement(suffixIcon[0])
? cloneElement(
suffixIcon[0],
{
class: {
[`${prefixCls}-picker-arrow`]: true,
},
},
) : <span class={`${prefixCls}-picker-arrow`}>{suffixIcon}</span>) || (
<Icon type='down' class={arrowCls} />
)
const input = children.length ? children : ( const input = children.length ? children : (
<span <span
class={pickerCls} class={pickerCls}
@ -417,7 +434,17 @@ const Cascader = {
{this.getLabel()} {this.getLabel()}
</span> : null} </span> : null}
{clearIcon} {clearIcon}
<Icon type='down' key='down-icon' class={arrowCls} /> {inputIcon}
</span>
)
const expandIcon = (
<Icon type='right' />
)
const loadingIcon = (
<span class={`${prefixCls}-menu-item-loading-icon`}>
<Icon type='redo' spin />
</span> </span>
) )
const cascaderProps = { const cascaderProps = {
@ -427,6 +454,8 @@ const Cascader = {
value: value, value: value,
popupVisible: sPopupVisible, popupVisible: sPopupVisible,
dropdownMenuColumnStyle: dropdownMenuColumnStyle, dropdownMenuColumnStyle: dropdownMenuColumnStyle,
expandIcon,
loadingIcon,
}, },
on: { on: {
...$listeners, ...$listeners,

1
components/cascader/index.zh-CN.md
View File

@ -26,6 +26,7 @@
| popupVisible | 控制浮层显隐 | boolean | - | | popupVisible | 控制浮层显隐 | boolean | - |
| showSearch | 在选择框中显示搜索框 | boolean | false | | showSearch | 在选择框中显示搜索框 | boolean | false |
| size | 输入框大小，可选 `large` `default` `small` | string | `default` | | size | 输入框大小，可选 `large` `default` `small` | string | `default` |
| suffixIcon | 自定义的选择框后缀图标 | string \| VNode \| slot | - |
| value(v-model) | 指定选中项 | string\[] | - | | value(v-model) | 指定选中项 | string\[] | - |
`showSearch` 为对象时，其中的字段： `showSearch` 为对象时，其中的字段：

5
components/checkbox/Checkbox.jsx
View File

@ -55,7 +55,10 @@ export default {
} = props } = props
const checkboxProps = { props: { ...restProps, prefixCls }, on: restListeners, attrs: getAttrs(this) } const checkboxProps = { props: { ...restProps, prefixCls }, on: restListeners, attrs: getAttrs(this) }
if (checkboxGroup) { if (checkboxGroup) {
checkboxProps.on.change = () => checkboxGroup.toggleOption({ label: children, value: props.value }) checkboxProps.on.change = (...args) => {
this.$emit('change', ...args)
checkboxGroup.toggleOption({ label: children, value: props.value })
}
checkboxProps.props.checked = checkboxGroup.sValue.indexOf(props.value) !== -1 checkboxProps.props.checked = checkboxGroup.sValue.indexOf(props.value) !== -1
checkboxProps.props.disabled = props.disabled || checkboxGroup.disabled checkboxProps.props.disabled = props.disabled || checkboxGroup.disabled
} else { } else {

3
components/checkbox/Group.jsx
View File

@ -1,6 +1,7 @@
import Checkbox from './Checkbox' import Checkbox from './Checkbox'
import hasProp from '../_util/props-util' import hasProp from '../_util/props-util'
function noop () {}
export default { export default {
name: 'ACheckboxGroup', name: 'ACheckboxGroup',
props: { props: {
@ -82,7 +83,7 @@ export default {
disabled={'disabled' in option ? option.disabled : props.disabled} disabled={'disabled' in option ? option.disabled : props.disabled}
value={option.value} value={option.value}
checked={state.sValue.indexOf(option.value) !== -1} checked={state.sValue.indexOf(option.value) !== -1}
onChange={() => this.toggleOption(option)} onChange={option.onChange || noop}
class={`${groupPrefixCls}-item`} class={`${groupPrefixCls}-item`}
> >
{option.label} {option.label}

17
components/checkbox/__tests__/group.test.js
View File

@ -103,4 +103,21 @@ describe('CheckboxGroup', () => {
expect(wrapper.vm.sValue).toEqual(['Apple']) expect(wrapper.vm.sValue).toEqual(['Apple'])
}) })
}) })
// https://github.com/ant-design/ant-design/issues/12642
it('should trigger onChange in sub Checkbox', () => {
const onChange = jest.fn()
const wrapper = mount({
render () {
return (
<Checkbox.Group>
<Checkbox value='my' onChange={onChange} />
</Checkbox.Group>
)
},
})
wrapper.findAll('.ant-checkbox-input').at(0).trigger('change')
expect(onChange).toBeCalled()
expect(onChange.mock.calls[0][0].target.value).toEqual('my')
})
}) })

1
components/checkbox/demo/index.vue
View File

@ -29,6 +29,7 @@
category: 'Components', category: 'Components',
subtitle: '多选框', subtitle: '多选框',
type: 'Data Entry', type: 'Data Entry',
zhType: '数据录入',
title: 'Checkbox', title: 'Checkbox',
render () { render () {
return ( return (

2
components/checkbox/index.en-US.md
View File

@ -23,7 +23,7 @@
| -------- | ----------- | ---- | ------- | | -------- | ----------- | ---- | ------- |
| defaultValue | Default selected value | string\[] | \[] | | defaultValue | Default selected value | string\[] | \[] |
| disabled | Disable all checkboxes | boolean | false | | disabled | Disable all checkboxes | boolean | false |
| options | Specifies options | string\[] \| Array&lt;{ label: string value: string disabled?: boolean }> | \[] | | options | Specifies options | string\[] \| Array&lt;{ label: string value: string disabled?: boolean, onChange?: function }> | \[] |
| value | Used for setting the currently selected value. | string\[] | \[] | | value | Used for setting the currently selected value. | string\[] | \[] |
#### events #### events

3
components/checkbox/index.zh-CN.md
View File

@ -25,9 +25,8 @@
| --- | --- | --- | --- | | --- | --- | --- | --- |
| defaultValue | 默认选中的选项 | string\[] | \[] | | defaultValue | 默认选中的选项 | string\[] | \[] |
| disabled | 整组失效 | boolean | false | | disabled | 整组失效 | boolean | false |
| options | 指定可选项 | string\[] \| Array&lt;{ label: string value: string disabled?: boolean }> | \[] | | options | 指定可选项 | string\[] \| Array&lt;{ label: string value: string disabled?: boolean, onChange?: function }> | \[] |
| value | 指定选中的选项 | string\[] | \[] | | value | 指定选中的选项 | string\[] | \[] |
| onChange | 变化时回调函数 | Function(checkedValue) | - |
#### 事件 #### 事件
| 事件名称 | 说明 | 回调参数 | | 事件名称 | 说明 | 回调参数 |

1
components/divider/demo/index.vue
View File

@ -23,6 +23,7 @@ const md = {
export default { export default {
category: 'Components', category: 'Components',
type: 'Other', type: 'Other',
zhType: '其他',
title: 'Divider', title: 'Divider',
subtitle: '分割线', subtitle: '分割线',
render () { render () {

1
components/dropdown/demo/index.vue
View File

@ -27,6 +27,7 @@ export default {
category: 'Components', category: 'Components',
subtitle: '下拉菜单', subtitle: '下拉菜单',
type: 'Navigation', type: 'Navigation',
zhType: '导航',
title: 'Dropdown', title: 'Dropdown',
render () { render () {
return ( return (

3
components/icon/index.js
View File

@ -11,7 +11,7 @@ import {
} from './utils' } from './utils'
import warning from '../_util/warning' import warning from '../_util/warning'
import { getTwoToneColor, setTwoToneColor } from './twoTonePrimaryColor' import { getTwoToneColor, setTwoToneColor } from './twoTonePrimaryColor'
import { filterEmpty } from '../_util/props-util' import { filterEmpty, getClass } from '../_util/props-util'
// Initial setting // Initial setting
VueIcon.add(...Object.keys(allIcons).map((key) => allIcons[key])) VueIcon.add(...Object.keys(allIcons).map((key) => allIcons[key]))
@ -51,6 +51,7 @@ const Icon = {
) )
const classString = classNames({ const classString = classNames({
...getClass(context),
[`anticon`]: true, [`anticon`]: true,
[`anticon-${type}`]: !!type, [`anticon-${type}`]: !!type,
}) })

111
components/spin/Spin.jsx
View File

@ -20,6 +20,10 @@ export const SpinProps = () => ({
// Render indicator // Render indicator
let defaultIndicator let defaultIndicator
function shouldDelay (spinning, delay) {
return !!spinning && !!delay && !isNaN(Number(delay))
}
export function setDefaultIndicator (content) { export function setDefaultIndicator (content) {
defaultIndicator = typeof content.indicator === 'function' ? content.indicator : (h) => { defaultIndicator = typeof content.indicator === 'function' ? content.indicator : (h) => {
return <content.indicator /> return <content.indicator />
@ -36,14 +40,64 @@ export default {
wrapperClassName: '', wrapperClassName: '',
}), }),
data () { data () {
const { spinning } = this const { spinning, delay } = this
this.debounceTimeout = null
this.delayTimeout = null
return { return {
stateSpinning: spinning, sSpinning: spinning && !shouldDelay(spinning, delay),
debounceTimeout: null,
delayTimeout: null, }
},
mounted () {
this.$nextTick(() => {
const { spinning, delay } = this
if (shouldDelay(spinning, delay)) {
this.delayTimeout = window.setTimeout(this.delayUpdateSpinning, delay)
}
})
},
updated () {
this.$nextTick(() => {
const { delay, spinning, sSpinning } = this
if (sSpinning === spinning) {
return
}
if (this.debounceTimeout) {
clearTimeout(this.debounceTimeout)
}
if (sSpinning && !spinning) {
this.debounceTimeout = window.setTimeout(() => this.setState({ sSpinning: spinning }), 200)
if (this.delayTimeout) {
clearTimeout(this.delayTimeout)
}
} else {
if (shouldDelay(spinning, delay)) {
if (this.delayTimeout) {
clearTimeout(this.delayTimeout)
}
this.delayTimeout = window.setTimeout(this.delayUpdateSpinning, delay)
} else {
this.setState({ sSpinning: spinning })
}
}
})
},
beforeDestroy () {
if (this.debounceTimeout) {
clearTimeout(this.debounceTimeout)
}
if (this.delayTimeout) {
clearTimeout(this.delayTimeout)
} }
}, },
methods: { methods: {
delayUpdateSpinning () {
const { spinning, sSpinning } = this
if (sSpinning !== spinning) {
this.setState({ sSpinning: spinning })
}
},
getChildren () { getChildren () {
if (this.$slots && this.$slots.default) { if (this.$slots && this.$slots.default) {
return filterEmpty(this.$slots.default) return filterEmpty(this.$slots.default)
@ -77,55 +131,14 @@ export default {
) )
}, },
}, },
mounted () {
this.$nextTick(() => {
const { spinning, delay } = this
if (spinning && delay && !isNaN(Number(delay))) {
this.setState({ stateSpinning: false })
this.delayTimeout = window.setTimeout(() => this.setState({ stateSpinning: spinning }), delay)
}
})
},
beforeDestroy () {
if (this.debounceTimeout) {
clearTimeout(this.debounceTimeout)
}
if (this.delayTimeout) {
clearTimeout(this.delayTimeout)
}
},
watch: {
spinning () {
const { delay, spinning } = this
if (this.debounceTimeout) {
clearTimeout(this.debounceTimeout)
}
if (!spinning) {
this.debounceTimeout = window.setTimeout(() => this.setState({ stateSpinning: spinning }), 200)
if (this.delayTimeout) {
clearTimeout(this.delayTimeout)
}
} else {
if (spinning && delay && !isNaN(Number(delay))) {
if (this.delayTimeout) {
clearTimeout(this.delayTimeout)
}
this.delayTimeout = window.setTimeout(() => this.setState({ stateSpinning: spinning }), delay)
} else {
this.setState({ stateSpinning: spinning })
}
}
},
},
render (h) { render (h) {
const { size, prefixCls, tip, wrapperClassName, ...restProps } = this.$props const { size, prefixCls, tip, wrapperClassName, ...restProps } = this.$props
const { stateSpinning } = this const { sSpinning } = this
const spinClassName = { const spinClassName = {
[prefixCls]: true, [prefixCls]: true,
[`${prefixCls}-sm`]: size === 'small', [`${prefixCls}-sm`]: size === 'small',
[`${prefixCls}-lg`]: size === 'large', [`${prefixCls}-lg`]: size === 'large',
[`${prefixCls}-spinning`]: stateSpinning, [`${prefixCls}-spinning`]: sSpinning,
[`${prefixCls}-show-text`]: !!tip, [`${prefixCls}-show-text`]: !!tip,
} }
@ -143,7 +156,7 @@ export default {
} }
const containerClassName = { const containerClassName = {
[`${prefixCls}-container`]: true, [`${prefixCls}-container`]: true,
[`${prefixCls}-blur`]: stateSpinning, [`${prefixCls}-blur`]: sSpinning,
} }
return ( return (
@ -152,7 +165,7 @@ export default {
tag='div' tag='div'
class={animateClassName} class={animateClassName}
> >
{stateSpinning && <div key='loading'>{spinElement}</div>} {sSpinning && <div key='loading'>{spinElement}</div>}
<div class={containerClassName} key='container'> <div class={containerClassName} key='container'>
{children} {children}
</div> </div>

2
components/spin/demo/custom-indicator.md
View File

@ -21,7 +21,7 @@ Use custom loading indicator.
export default { export default {
data () { data () {
return { return {
indicator: <i class="anticon anticon-loading anticon-spin ant-spin-dot" style="font-size: 24px;"></i> indicator: <a-icon type="loading" style="font-size: 24px" spin />
} }
}, },
} }

1
components/steps/index.en-US.md
View File

@ -10,6 +10,7 @@ The whole of the step bar.
| progressDot | Steps with progress dot style, customize the progress dot by setting a scoped slot. labelPlacement will be `vertical` | Boolean or slot="progressDot" slot-scope="{index, status, title, description, prefixCls})" | false | | progressDot | Steps with progress dot style, customize the progress dot by setting a scoped slot. labelPlacement will be `vertical` | Boolean or slot="progressDot" slot-scope="{index, status, title, description, prefixCls})" | false |
| size | to specify the size of the step bar, `default` and `small` are currently supported | string | `default` | | size | to specify the size of the step bar, `default` and `small` are currently supported | string | `default` |
| status | to specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process` | | status | to specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process` |
| initial | set the initial step, counting from 0 | number | 0 |
### Steps.Step ### Steps.Step

15
components/steps/index.jsx
View File

@ -1,13 +1,16 @@
import PropTypes from '../_util/vue-types' import PropTypes from '../_util/vue-types'
import { initDefaultProps, getOptionProps, getComponentFromProp } from '../_util/props-util' import { initDefaultProps, getOptionProps } from '../_util/props-util'
import VcSteps from '../vc-steps' import VcSteps from '../vc-steps'
import Icon from '../icon'
const getStepsProps = (defaultProps = {}) => { const getStepsProps = (defaultProps = {}) => {
const props = { const props = {
prefixCls: PropTypes.string, prefixCls: PropTypes.string,
iconPrefix: PropTypes.string, iconPrefix: PropTypes.string,
current: PropTypes.number, current: PropTypes.number,
initial: PropTypes.number,
labelPlacement: PropTypes.oneOf(['horizontal', 'vertical']),
status: PropTypes.oneOf(['wait', 'process', 'finish', 'error']), status: PropTypes.oneOf(['wait', 'process', 'finish', 'error']),
size: PropTypes.oneOf(['default', 'small']), size: PropTypes.oneOf(['default', 'small']),
direction: PropTypes.oneOf(['horizontal', 'vertical']), direction: PropTypes.oneOf(['horizontal', 'vertical']),
@ -29,13 +32,15 @@ const Steps = {
Step: { ...VcSteps.Step, name: 'AStep' }, Step: { ...VcSteps.Step, name: 'AStep' },
render () { render () {
const props = getOptionProps(this) const props = getOptionProps(this)
const { prefixCls } = props
const icons = {
finish: <Icon type='check' class={`${prefixCls}-finish-icon`} />,
error: <Icon type='close' class={`${prefixCls}-error-icon`} />,
}
const stepsProps = { const stepsProps = {
props: { props: {
icons,
...props, ...props,
icons: props.icons || {
error: getComponentFromProp(this, 'icons.error'),
finish: getComponentFromProp(this, 'icons.finish'),
},
}, },
on: this.$listeners, on: this.$listeners,
scopedSlots: this.$scopedSlots, scopedSlots: this.$scopedSlots,

1
components/steps/index.zh-CN.md
View File

@ -11,6 +11,7 @@
| progressDot | 点状步骤条，可以设置为一个 作用域插槽,labelPlacement 将强制为`vertical` | Boolean or slot="progressDot" slot-scope="{index, status, title, description, prefixCls})" | false | | progressDot | 点状步骤条，可以设置为一个 作用域插槽,labelPlacement 将强制为`vertical` | Boolean or slot="progressDot" slot-scope="{index, status, title, description, prefixCls})" | false |
| size | 指定大小，目前支持普通（`default`）和迷你（`small`） | string | default | | size | 指定大小，目前支持普通（`default`）和迷你（`small`） | string | default |
| status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | process | | status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | process |
| initial | 起始序号，从 0 开始记数 | number | 0 |
### Steps.Step ### Steps.Step

2
components/switch/demo/text.md
View File

@ -17,7 +17,7 @@ With text and icon.
<br> <br>
<a-switch defaultChecked > <a-switch defaultChecked >
<a-icon type="check" slot="checkedChildren"/> <a-icon type="check" slot="checkedChildren"/>
<a-icon type="cross" slot="unCheckedChildren"/> <a-icon type="close" slot="unCheckedChildren"/>
</a-switch> </a-switch>
</div> </div>
</template> </template>

8
components/switch/index.jsx
View File

@ -3,6 +3,7 @@ import PropTypes from '../_util/vue-types'
import { getOptionProps, getComponentFromProp } from '../_util/props-util' import { getOptionProps, getComponentFromProp } from '../_util/props-util'
import VcSwitch from '../vc-switch' import VcSwitch from '../vc-switch'
import Wave from '../_util/wave' import Wave from '../_util/wave'
import Icon from '../icon'
const Switch = { const Switch = {
name: 'ASwitch', name: 'ASwitch',
@ -38,10 +39,17 @@ const Switch = {
[`${prefixCls}-small`]: size === 'small', [`${prefixCls}-small`]: size === 'small',
[`${prefixCls}-loading`]: loading, [`${prefixCls}-loading`]: loading,
} }
const loadingIcon = loading ? (
<Icon
type='loading'
class={`${prefixCls}-loading-icon`}
/>
) : null
const switchProps = { const switchProps = {
props: { props: {
...restProps, ...restProps,
prefixCls, prefixCls,
loadingIcon,
}, },
on: this.$listeners, on: this.$listeners,
class: classes, class: classes,

1
components/vc-slick/src/index.js
View File

@ -1,3 +1,4 @@
// base react-slick 0.23.2
import Slider from './slider' import Slider from './slider'
export default Slider export default Slider

112
components/vc-slider/demo/handle.jsx
View File

@ -3,7 +3,10 @@ import Tooltip from '../../vc-tooltip'
import '../assets/index.less' import '../assets/index.less'
import '../../vc-tooltip/assets/bootstrap.less' import '../../vc-tooltip/assets/bootstrap.less'
const { Handle, Range } = Slider const { Handle } = Slider
const { createSliderWithTooltip } = Slider
const Range = createSliderWithTooltip(Slider.Range)
export default { export default {
data () { data () {
@ -18,18 +21,16 @@ export default {
}, },
}, },
render () { render () {
const handle = (h, props) => { const handle = (props) => {
const { value, dragging, index, refStr, style, ...restProps } = props const { value, dragging, index, ref, style, ...restProps } = props
const handleProps = { const handleProps = {
props: { props: {
...restProps, ...restProps,
value, value,
}, },
attrs: {
refStr,
},
key: index, key: index,
style, style,
ref,
} }
return ( return (
<Tooltip <Tooltip
@ -45,59 +46,60 @@ export default {
) )
} }
const handleRange = (h, { value, dragging, index, disabled, style, ...restProps }) => { // const handleRange = (h, { value, ref, dragging, index, disabled, style, ...restProps }) => {
const tipFormatter = value => `${value}%` // const tipFormatter = value => `${value}%`
const tipProps = {} // const tipProps = {}
const { // const {
prefixCls = 'rc-slider-tooltip', // prefixCls = 'rc-slider-tooltip',
overlay = tipFormatter(value), // overlay = tipFormatter(value),
placement = 'top', // placement = 'top',
visible = visible || false, // visible = visible || false,
...restTooltipProps } = tipProps // ...restTooltipProps } = tipProps
let handleStyleWithIndex // let handleStyleWithIndex
if (Array.isArray(style)) { // if (Array.isArray(style)) {
handleStyleWithIndex = style[index] || style[0] // handleStyleWithIndex = style[index] || style[0]
} else { // } else {
handleStyleWithIndex = style // handleStyleWithIndex = style
} // }
const tooltipProps = { // const tooltipProps = {
props: { // props: {
prefixCls, // prefixCls,
overlay, // overlay,
placement, // placement,
visible: (!disabled && (this.visibles[index] || dragging)) || visible, // visible: (!disabled && (this.visibles[index] || dragging)) || visible,
...restTooltipProps, // ...restTooltipProps,
}, // },
key: index, // key: index,
} // }
const handleProps = { // const handleProps = {
props: { // props: {
value, // value,
...restProps, // ...restProps,
}, // },
on: { // on: {
mouseenter: () => this.handleTooltipVisibleChange(index, true), // mouseenter: () => this.handleTooltipVisibleChange(index, true),
mouseleave: () => this.handleTooltipVisibleChange(index, false), // mouseleave: () => this.handleTooltipVisibleChange(index, false),
}, // },
style: { // style: {
...handleStyleWithIndex, // ...handleStyleWithIndex,
}, // },
} // ref,
// }
return ( // return (
<Tooltip // <Tooltip
{...tooltipProps} // {...tooltipProps}
> // >
<Handle // <Handle
{...handleProps} // {...handleProps}
/> // />
</Tooltip> // </Tooltip>
) // )
} // }
const wrapperStyle = 'width: 400px; margin: 50px' const wrapperStyle = 'width: 400px; margin: 50px'
return ( return (
@ -108,7 +110,7 @@ export default {
</div> </div>
<div style={wrapperStyle}> <div style={wrapperStyle}>
<p>Range with custom handle</p> <p>Range with custom handle</p>
<Range min={0} max={20} defaultValue={[3, 10]} handle={handleRange} /> <Range min={0} max={20} defaultValue={[3, 10]} tipFormatter={value => `${value}%`} />
</div> </div>
</div> </div>
) )

12
components/vc-slider/src/Range.jsx
View File

@ -118,7 +118,7 @@ const Range = {
this.onChange({ bounds: nextBounds }) this.onChange({ bounds: nextBounds })
}, },
onEnd () { onEnd () {
this.setState({ sHandle: null }, this.onBlur) this.setState({ sHandle: null }, this.blur)
this.removeDocumentEvents() this.removeDocumentEvents()
this.$emit('afterChange', this.bounds) this.$emit('afterChange', this.bounds)
}, },
@ -210,7 +210,7 @@ const Range = {
nextHandle = nextBounds.indexOf(value) nextHandle = nextBounds.indexOf(value)
} }
this.onChange({ this.onChange({
handle: nextHandle, sHandle: nextHandle,
bounds: nextBounds, bounds: nextBounds,
}) })
if (isFromKeyboardEvent) { if (isFromKeyboardEvent) {
@ -334,17 +334,17 @@ const Range = {
disabled, disabled,
min, min,
max, max,
handle: handleGenerator, handle,
defaultHandle,
trackStyle, trackStyle,
handleStyle, handleStyle,
tabIndex, tabIndex,
$createElement,
} = this } = this
const handleGenerator = handle || defaultHandle
const offsets = bounds.map(v => this.calcOffset(v)) const offsets = bounds.map(v => this.calcOffset(v))
const handleClassName = `${prefixCls}-handle` const handleClassName = `${prefixCls}-handle`
const handles = bounds.map((v, i) => handleGenerator($createElement, { const handles = bounds.map((v, i) => handleGenerator({
className: classNames({ className: classNames({
[handleClassName]: true, [handleClassName]: true,
[`${handleClassName}-${i + 1}`]: true, [`${handleClassName}-${i + 1}`]: true,

8
components/vc-slider/src/Slider.jsx
View File

@ -165,11 +165,13 @@ const Slider = {
tabIndex, tabIndex,
min, min,
max, max,
handle: handleGenerator, handle,
defaultHandle,
} = this } = this
const handleGenerator = handle || defaultHandle
const { sValue, dragging } = this const { sValue, dragging } = this
const offset = this.calcOffset(sValue) const offset = this.calcOffset(sValue)
const handle = handleGenerator(this.$createElement, { const handles = handleGenerator({
className: `${prefixCls}-handle`, className: `${prefixCls}-handle`,
prefixCls, prefixCls,
vertical, vertical,
@ -190,7 +192,7 @@ const Slider = {
const _trackStyle = trackStyle[0] || trackStyle const _trackStyle = trackStyle[0] || trackStyle
return { return {
tracks: this.getTrack({ prefixCls, vertical, included, offset, minimumTrackStyle, _trackStyle }), tracks: this.getTrack({ prefixCls, vertical, included, offset, minimumTrackStyle, _trackStyle }),
handles: handle, handles,
} }
}, },
}, },

39
components/vc-slider/src/common/createSlider.jsx
View File

@ -45,19 +45,19 @@ export default function createSlider (Component) {
max: 100, max: 100,
step: 1, step: 1,
marks: {}, marks: {},
handle (h, { index, ref, className, style, ...restProps }) { // handle ({ index, ref, className, style, ...restProps }) {
delete restProps.dragging // delete restProps.dragging
const handleProps = { // const handleProps = {
props: { // props: {
...restProps, // ...restProps,
}, // },
class: className, // class: className,
style, // style,
key: index, // key: index,
ref, // ref,
} // }
return <Handle {...handleProps} /> // return <Handle {...handleProps} />
}, // },
included: true, included: true,
disabled: false, disabled: false,
dots: false, dots: false,
@ -106,6 +106,19 @@ export default function createSlider (Component) {
}, },
}, },
methods: { methods: {
defaultHandle ({ index, ref, className, style, ...restProps }) {
delete restProps.dragging
const handleProps = {
props: {
...restProps,
},
class: className,
style,
key: index,
ref,
}
return <Handle {...handleProps} />
},
onMouseDown (e) { onMouseDown (e) {
if (e.button !== 0) { return } if (e.button !== 0) { return }
const isVertical = this.vertical const isVertical = this.vertical

2
components/vc-slider/src/createSliderWithTooltip.jsx
View File

@ -6,7 +6,7 @@ import Handle from './Handle'
export default function createSliderWithTooltip (Component) { export default function createSliderWithTooltip (Component) {
return { return {
mixins: [BaseMixin], mixins: [BaseMixin, Component],
props: { props: {
...Component.props, ...Component.props,
tipFormatter: PropTypes.func.def((value) => { return value }), tipFormatter: PropTypes.func.def((value) => { return value }),