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 drawer

pull/309/head
tangjinzhou 2018-12-08 19:07:04 +08:00
parent 3fb4067d1a
commit 3ca22aa070
15 changed files with 12459 additions and 12305 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap
View File

@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DatePicker prop locale should works 1`] = `<span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Избери дата" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-clear anticon anticon-cross-circle"><!----></i><span class="ant-calendar-picker-icon"></span></div></span>`;
exports[`DatePicker prop locale should works 1`] = `<span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Избери дата" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-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=""><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-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span>`;

2
components/date-picker/__tests__/__snapshots__/WeekPicker.test.js.snap
View File

@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`WeekPicker should support style prop 1`] = `<span class="ant-calendar-picker" style="width: 400px;"><span class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></span></span>`;
exports[`WeekPicker should support style prop 1`] = `<span class="ant-calendar-picker" style="width: 400px;"><span class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></span></span>`;

19
components/drawer/__tests__/Drawer.test.js
View File

@ -57,6 +57,25 @@ describe('Drawer', () => {
})
})
it('render top drawer', async () => {
const props = {
propsData: {
visible: true,
height: 400,
placement: 'top',
getContainer: false,
},
slots: {
default: 'Here is content of Drawer',
},
sync: false,
}
const wrapper = mount(Drawer, props)
await asyncExpect(() => {
expect(wrapper.html()).toMatchSnapshot()
})
})
it('have a title', async () => {
const props = {
propsData: {

30
components/drawer/__tests__/MultiDrawer.test.js
View File

@ -2,7 +2,9 @@ import { mount } from '@vue/test-utils'
import Drawer from '..'
import Button from '../../button'
import { asyncExpect } from '@/tests/utils'
export function $$ (className) {
return document.body.querySelectorAll(className)
}
const MultiDrawer = {
props: {
placement: {
@ -27,6 +29,7 @@ const MultiDrawer = {
this.childrenDrawer = true
},
onChildrenDrawerClose () {
console.log('hello')
this.childrenDrawer = false
},
},
@ -35,7 +38,6 @@ const MultiDrawer = {
props: {
title: 'Multi-level drawer',
width: 520,
closable: false,
visible: this.visible,
getContainer: false,
wrapClassName: 'test_drawer',
@ -49,7 +51,7 @@ const MultiDrawer = {
props: {
title: 'Two-level Drawer',
width: 320,
closable: false,
wrapClassName: 'Two-level',
visible: this.childrenDrawer,
getContainer: false,
placement: this.placement,
@ -137,7 +139,7 @@ describe('Drawer', () => {
}, 1000)
})
it('render right MultiDrawer', async () => {
it('render left MultiDrawer', async () => {
document.body.innerHTML = ''
const wrapper = mount(MultiDrawer, {
propsData: {
@ -157,4 +159,24 @@ describe('Drawer', () => {
expect(wrapper.find('#two_drawer_text').exists()).toBe(true)
}, 1000)
})
it('render top MultiDrawer', async () => {
const wrapper = mount(MultiDrawer, {
propsData: {
placement: 'top',
},
sync: false,
})
await asyncExpect(() => {
wrapper.find('#open_drawer').trigger('click')
}, 0)
await asyncExpect(() => {
wrapper.find('#open_two_drawer').trigger('click')
}, 0)
await asyncExpect(() => {
const translateY = wrapper.find('.ant-drawer.test_drawer').element.parentElement.style.transform
expect(translateY).toEqual('translateY(180px)')
expect(wrapper.find('#two_drawer_text').exists()).toBe(true)
}, 1000)
})
})

21
components/drawer/__tests__/__snapshots__/Drawer.test.js.snap
View File

@ -6,7 +6,7 @@ exports[`Drawer class is test_drawer 1`] = `
<div class="ant-drawer-mask"></div>
<div class="ant-drawer-content-wrapper" style="transform: translateX(100%); width: 256px;">
<div class="ant-drawer-content">
<div class="ant-drawer-wrapper-body" style="overflow: auto; height: 100%; opacity: 0;"><button aria-label="Close" class="ant-drawer-close"><span class="ant-drawer-close-x"></span></button>
<div class="ant-drawer-wrapper-body" style="overflow: auto; height: 100%; opacity: 0;"><button aria-label="Close" class="ant-drawer-close"><span class="ant-drawer-close-x"><i class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span></button>
<div class="ant-drawer-body">Here is content of Drawer</div>
</div>
</div>
@ -54,7 +54,7 @@ exports[`Drawer have a title 1`] = `
<div class="ant-drawer-wrapper-body" style="overflow: auto; height: 100%;">
<div class="ant-drawer-header">
<div class="ant-drawer-title">Test Title</div>
</div><button aria-label="Close" class="ant-drawer-close"><span class="ant-drawer-close-x"></span></button>
</div><button aria-label="Close" class="ant-drawer-close"><span class="ant-drawer-close-x"><i class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span></button>
<div class="ant-drawer-body">Here is content of Drawer</div>
</div>
</div>
@ -69,7 +69,22 @@ exports[`Drawer render correctly 1`] = `
<div class="ant-drawer-mask"></div>
<div class="ant-drawer-content-wrapper" style="transform: translateX(100%); width: 400px;">
<div class="ant-drawer-content">
<div class="ant-drawer-wrapper-body" style="overflow: auto; height: 100%;"><button aria-label="Close" class="ant-drawer-close"><span class="ant-drawer-close-x"></span></button>
<div class="ant-drawer-wrapper-body" style="overflow: auto; height: 100%;"><button aria-label="Close" class="ant-drawer-close"><span class="ant-drawer-close-x"><i class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span></button>
<div class="ant-drawer-body">Here is content of Drawer</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`Drawer render top drawer 1`] = `
<div>
<div class="ant-drawer ant-drawer-top">
<div class="ant-drawer-mask"></div>
<div class="ant-drawer-content-wrapper" style="transform: translateY(-100%); height: 400px;">
<div class="ant-drawer-content">
<div class="ant-drawer-wrapper-body"><button aria-label="Close" class="ant-drawer-close"><span class="ant-drawer-close-x"><i class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span></button>
<div class="ant-drawer-body">Here is content of Drawer</div>
</div>
</div>

13
components/drawer/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1,11 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/drawer/demo/basic-left.md correctly 1`] = `
<div><button type="button" class="ant-btn ant-btn-primary"><span>Open</span></button>
<!---->
</div>
`;
exports[`renders ./components/drawer/demo/basic-right.md correctly 1`] = `
<div><button type="button" class="ant-btn ant-btn-primary"><span>Open</span></button>
<!---->
@ -18,6 +12,13 @@ exports[`renders ./components/drawer/demo/multi-level-drawer.md correctly 1`] =
</div>
`;
exports[`renders ./components/drawer/demo/placement.md correctly 1`] = `
<div>
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" style="margin-right: 8px;"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="top"><span class="ant-radio-inner"></span></span><span>top</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="right"><span class="ant-radio-inner"></span></span><span>right</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="bottom"><span class="ant-radio-inner"></span></span><span>bottom</span></label><label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input" value="left"><span class="ant-radio-inner"></span></span><span>left</span></label></div> <button type="button" class="ant-btn ant-btn-primary"><span>Open</span></button>
<!---->
</div>
`;
exports[`renders ./components/drawer/demo/user-profile.md correctly 1`] = `
<div>
<div class="ant-list ant-list-split ant-list-bordered">

47
components/drawer/demo/basic-left.md
View File

@ -1,47 +0,0 @@
<cn>
#### 左侧滑出
基础抽屉，点击触发按钮抽屉从左滑出，点击遮罩区关闭
</cn>
<us>
#### Left Slider
Basic drawer.
</us>
```html
<template>
<div>
<a-button type="primary" @click="showDrawer">
Open
</a-button>
<a-drawer
placement="left"
:closable="false"
@close="onClose"
:visible="visible"
>
<span slot="title">Basic Drawer</span>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</a-drawer>
</div>
</template>
<script>
export default {
data() {
return {
visible: false,
}
},
methods: {
showDrawer() {
this.visible = true
},
onClose() {
this.visible = false
},
},
}
</script>
```

30
components/drawer/demo/index.vue
View File

@ -1,6 +1,6 @@
<script>
import BasicRight from './basic-right'
import BasicLeft from './basic-left'
import Placement from './placement'
import UserProfile from './user-profile'
import MultiLevelDrawer from './multi-level-drawer'
import FromDrawer from './from-drawer'
@ -14,26 +14,34 @@ import '../style'
const md = {
cn: `# Drawer 抽屉
抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到到原任务。
## 何时使用
屏幕边缘滑出的浮层面板。
## 何时使用
抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到到原任务。
* 当需要一个附加的面板来控制父窗体内容，这个面板在需要时呼出。比如，控制界面展示样式，往界面中添加内容。
* 当需要在当前任务流中插入临时任务，创建或预览附加内容。比如展示协议条款，创建子对象。
* 当需要一个附加的面板来控制父窗体内容，这个面板在需要时呼出。比如，控制界面展示样式，往界面中添加内容。
* 当需要在当前任务流中插入临时任务，创建或预览附加内容。比如展示协议条款，创建子对象。
## 代码演示
`,
us: `# Drawer
A Drawer is a panel that is typically overlaid on top of a page and slides in from the side. It contains a set of information or actions. Since that user can interact with the Drawer without leaving the current page, tasks can be achieved more efficient within the same context.
## When To Use
Panel slides from screen edge.
* Use a Form to create or edit a set of information.
* Processing subtasks. When subtasks are too heavy for Popover and we still want to keep the subtasks in the context of the main task, Drawer comes very handy.
* When a same Form is needed in multiple places.
## When To Use
A Drawer is a panel that is typically overlaid on top of a page and slides in from the side. It contains a set of information or actions. Since that user can interact with the Drawer without leaving the current page, tasks can be achieved more efficient within the same context.
* Use a Form to create or edit a set of information.
* Processing subtasks. When subtasks are too heavy for Popover and we still want to keep the subtasks in the context of the main task, Drawer comes very handy.
* When a same Form is needed in multiple places.
## Examples
`,
}
export default {
category: 'Components',
type: 'Feedback',
zhType: '反馈',
title: 'Drawer',
subtitle: '抽屉',
render () {
@ -41,7 +49,7 @@ export default {
<div>
<md cn={md.cn} us={md.us} />
<BasicRight />
<BasicLeft />
<Placement />
<FromDrawer />
<UserProfile />
<MultiLevelDrawer />

61
components/drawer/demo/placement.md Normal file
View File

@ -0,0 +1,61 @@
<cn>
#### 自定义位置
自定义位置，点击触发按钮抽屉从相应的位置滑出，点击遮罩区关闭
</cn>
<us>
#### Custom Placement
Basic drawer.
</us>
```html
<template>
<div>
<a-radio-group
style="margin-right: 8px"
:defaultValue="placement"
@change="onChange"
>
<a-radio value="top">top</a-radio>
<a-radio value="right">right</a-radio>
<a-radio value="bottom">bottom</a-radio>
<a-radio value="left">left</a-radio>
</a-radio-group>
<a-button type="primary" @click="showDrawer">
Open
</a-button>
<a-drawer
title="Basic Drawer"
:placement="placement"
:closable="false"
@close="onClose"
:visible="visible"
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</a-drawer>
</div>
</template>
<script>
export default {
data() {
return {
visible: false,
placement: 'left'
}
},
methods: {
showDrawer() {
this.visible = true
},
onClose() {
this.visible = false
},
onChange(e) {
this.placement = e.target.value
}
},
}
</script>
```

6
components/drawer/index.en-US.md
View File

@ -12,10 +12,12 @@
| maskStyle | Style for Drawer's mask element. | object | {} |
| title | The title for Drawer. | string\|slot | - |
| visible | Whether the Drawer dialog is visible or not. | boolean | false |
| width | Width of the Drawer dialog. | string\|number | 256 |
| wrapClassName | The class name of the container of the Drawer dialog. | string | - |
| width | Width of the Drawer dialog. | string\|number | 256 |
| height | placement is `top` or `bottom`, height of the Drawer dialog. | string\|number | - |
| className | The class name of the container of the Drawer dialog. | string | - |
| zIndex | The `z-index` of the Drawer. | Number | 1000 |
| placement | The placement of the Drawer. | 'left' \| 'right' | 'right'
| placement | The placement of the Drawer. | 'top' \| 'right' \| 'bottom' \| 'left' | 'right' |
## Methods

71
components/drawer/index.jsx
View File

@ -1,7 +1,10 @@
import warning from 'warning'
import classNames from 'classnames'
import VcDrawer from '../vc-drawer/src'
import PropTypes from '../_util/vue-types'
import BaseMixin from '../_util/BaseMixin'
import { getComponentFromProp, getOptionProps } from '../_util/props-util'
import Icon from '../icon'
import { getComponentFromProp, getOptionProps, getClass } from '../_util/props-util'
const Drawer = {
name: 'ADrawer',
@ -10,14 +13,15 @@ const Drawer = {
destroyOnClose: PropTypes.bool,
getContainer: PropTypes.any,
maskClosable: PropTypes.bool.def(true),
mask: PropTypes.bool,
mask: PropTypes.bool.def(true),
maskStyle: PropTypes.object,
title: PropTypes.any,
visible: PropTypes.bool,
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).def(256),
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).def(256),
zIndex: PropTypes.number,
prefixCls: PropTypes.string.def('ant-drawer'),
placement: PropTypes.string.def('right'),
placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']).def('right'),
level: PropTypes.any.def(null),
wrapClassName: PropTypes.string,
},
@ -88,7 +92,16 @@ const Drawer = {
getDestoryOnClose () {
return this.destroyOnClose && !this.visible
},
// get drawar push width or height
getPushTransform (placement) {
if (placement === 'left' || placement === 'right') {
return `translateX(${placement === 'left' ? 180 : -180}px)`
}
if (placement === 'top' || placement === 'bottom') {
return `translateY(${placement === 'top' ? 180 : -180}px)`
}
},
// render drawer body dom
renderBody () {
if (this.destoryClose && !this.visible) {
return null
@ -110,6 +123,7 @@ const Drawer = {
}
const { prefixCls, closable } = this.$props
const title = getComponentFromProp(this, 'title')
// is have header dom
let header
if (title) {
header = (
@ -118,6 +132,7 @@ const Drawer = {
</div>
)
}
// is have closer button
let closer
if (closable) {
closer = (
@ -127,7 +142,9 @@ const Drawer = {
aria-label='Close'
class={`${prefixCls}-close`}
>
<span class={`${prefixCls}-close-x`} />
<span class={`${prefixCls}-close-x`}>
<Icon type='close'/>
</span>
</button>
)
}
@ -146,31 +163,49 @@ const Drawer = {
</div>
)
},
getRcDrawerStyle () {
const { zIndex, placement, maskStyle } = this.$props
return this.$data._push
? {
...maskStyle,
zIndex,
transform: this.getPushTransform(placement),
}
: {
...maskStyle,
zIndex,
}
},
},
render () {
const props = getOptionProps(this)
const { zIndex, visible, placement, mask, wrapClassName, ...rest } = props
const vcDrawerStyle = this.$data._push
? {
zIndex,
transform: `translateX(${placement === 'left' ? 180 : -180}px)`,
}
: { zIndex }
const { width, height, visible, placement, wrapClassName, ...rest } = props
const haveMask = rest.mask ? '' : 'no-mask'
const offsetStyle = {}
if (placement === 'left' || placement === 'right') {
offsetStyle.width = typeof width === 'number' ? `${width}px` : width
} else {
offsetStyle.height = typeof height === 'number' ? `${height}px` : height
}
const vcDrawerProps = {
props: {
handler: false,
open: visible,
showMask: mask,
placement,
wrapClassName,
...rest,
...offsetStyle,
open: visible,
showMask: props.mask,
placement,
wrapClassName: classNames({
[wrapClassName]: !!wrapClassName,
[haveMask]: !!haveMask,
}),
},
on: {
maskClick: this.onMaskClick,
...this.$listeners,
},
style: vcDrawerStyle,
style: this.getRcDrawerStyle(),
}
return (
<VcDrawer

5
components/drawer/index.zh-CN.md
View File

@ -10,10 +10,11 @@
| maskStyle | 遮罩样式 | object | {} |
| title | 标题 | string \| slot | - |
| visible | Drawer 是否可见 | boolean | - |
| width | 宽度 | string \| number | 256 |
| wrapClassName | 对话框外层容器的类名 | string | - |
| width | 宽度 | string \| number | 256 |
| height | 高度, 在 `placement` 为 `top` 或 `bottom` 时使用 | string \| number | 256 |
| zIndex | 设置 Drawer 的 `z-index` | Number | 1000 |
| placement | 抽屉的方向 | 'left' \| 'right' | 'right'
| placement | 抽屉的方向 | 'top' \| 'right' \| 'bottom' \| 'left' | 'right'
## 方法

2
components/input/__tests__/__snapshots__/demo.test.js.snap
View File

@ -20,7 +20,7 @@ exports[`renders ./components/input/demo/basic.md correctly 1`] = `<input placeh
exports[`renders ./components/input/demo/group.md correctly 1`] = `
<div><span class="ant-input-group ant-input-group-lg"><div class="ant-col-5"><input defaultvalue="0571" type="text" class="ant-input"></div><div class="ant-col-8"><input defaultvalue="26888888" type="text" class="ant-input"></div></span> <br> <span class="ant-input-group ant-input-group-compact"><input defaultvalue="0571" type="text" class="ant-input" style="width: 20%;"><input defaultvalue="26888888" type="text" class="ant-input" style="width: 30%;"></span> <br> <span class="ant-input-group ant-input-group-compact"><div class="ant-select ant-select-enabled"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="Zhejiang" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Zhejiang</div></div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon"></i></span></div>
</div><input defaultvalue="Xihu District, Hangzhou" type="text" class="ant-input" style="width: 50%;"></span> <br> <span class="ant-input-group ant-input-group-compact"><div class="ant-select ant-select-enabled"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="Option1" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Option1</div></div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon"></i></span></div>
</div><input defaultvalue="input content" type="text" class="ant-input" style="width: 50%;"></span> <br> <span class="ant-input-group ant-input-group-compact"><input defaultvalue="input content" type="text" class="ant-input" style="width: 50%;"><span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></div></span></span> <br> <span class="ant-input-group ant-input-group-compact"><div class="ant-select ant-select-enabled"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="Option1-1" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Option1-1</div></div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon"></i></span></div>
</div><input defaultvalue="input content" type="text" class="ant-input" style="width: 50%;"></span> <br> <span class="ant-input-group ant-input-group-compact"><input defaultvalue="input content" type="text" class="ant-input" style="width: 50%;"><span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span></span> <br> <span class="ant-input-group ant-input-group-compact"><div class="ant-select ant-select-enabled"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="Option1-1" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Option1-1</div></div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon"></i></span></div>
</div>
<div class="ant-select ant-select-enabled">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single">

653
components/locale-provider/__tests__/__snapshots__/demo.test.js.snap
View File

@ -35,345 +35,346 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
</div>
</div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon"></i></span>
</div>
</div> <span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span>
</div></span> <span class="ant-time-picker"><input type="text" placeholder="Select time" id="" class="ant-time-picker-input"><span class="ant-time-picker-icon"></span></span> <span tabindex="0" class="ant-calendar-picker" style="width: 200px;"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon"></span></span></span>
</div>
<div class="example"><button type="button" class="ant-btn ant-btn-primary"><span>Show Modal</span></button> <button type="button" class="ant-btn ant-btn-default"><span>Show info</span></button> <button type="button" class="ant-btn ant-btn-default"><span>Show confirm</span></button> <a href="#" class="">Click to confirm</a></div>
<div classname="example">
<div class="ant-transfer">
<div class="ant-transfer-list">
<div class="ant-transfer-list-header"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label><span class="ant-transfer-list-header-selected"><span>0 item</span><span class="ant-transfer-list-header-title"></span></span></div>
<div class="ant-transfer-list-body ant-transfer-list-body-with-search">
<div class="ant-transfer-list-body-search-wrapper">
<div><input value="" placeholder="Search here" type="text" class="ant-input ant-transfer-list-search ant-transfer-list-search"><span class="ant-transfer-list-search-action"><i class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></i></span></div>
</div> <span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span> <span class="ant-time-picker"><input type="text" placeholder="Select time" id="" class="ant-time-picker-input"><span class="ant-time-picker-icon"></span></span> <span tabindex="0" class="ant-calendar-picker" style="width: 200px;"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
<path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path>
</svg></i></span></span>
</div>
<div class="example"><button type="button" class="ant-btn ant-btn-primary"><span>Show Modal</span></button> <button type="button" class="ant-btn ant-btn-default"><span>Show info</span></button> <button type="button" class="ant-btn ant-btn-default"><span>Show confirm</span></button> <a href="#" class="">Click to confirm</a></div>
<div classname="example">
<div class="ant-transfer">
<div class="ant-transfer-list">
<div class="ant-transfer-list-header"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label><span class="ant-transfer-list-header-selected"><span>0 item</span><span class="ant-transfer-list-header-title"></span></span></div>
<div class="ant-transfer-list-body ant-transfer-list-body-with-search">
<div class="ant-transfer-list-body-search-wrapper">
<div><input value="" placeholder="Search here" type="text" class="ant-input ant-transfer-list-search ant-transfer-list-search"><span class="ant-transfer-list-search-action"><i class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></i></span></div>
</div>
<ul class="ant-transfer-list-content"></ul>
<div class="ant-transfer-list-body-not-found">Not Found</div>
</div>
<ul class="ant-transfer-list-content"></ul>
<div class="ant-transfer-list-body-not-found">Not Found</div>
</div>
</div>
<div class="ant-transfer-operation"><button type="button" disabled="disabled" class="ant-btn ant-btn-primary ant-btn-sm"><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></button><button type="button" disabled="disabled" class="ant-btn ant-btn-primary ant-btn-sm"><i class="anticon anticon-left"><svg viewBox="64 64 896 896" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
<path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path>
</svg></i></button></div>
<div class="ant-transfer-list">
<div class="ant-transfer-list-header"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label><span class="ant-transfer-list-header-selected"><span>0 item</span><span class="ant-transfer-list-header-title"></span></span></div>
<div class="ant-transfer-list-body ant-transfer-list-body-with-search">
<div class="ant-transfer-list-body-search-wrapper">
<div><input value="" placeholder="Search here" type="text" class="ant-input ant-transfer-list-search ant-transfer-list-search"><span class="ant-transfer-list-search-action"><i class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></i></span></div>
<div class="ant-transfer-operation"><button type="button" disabled="disabled" class="ant-btn ant-btn-primary ant-btn-sm"><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></button><button type="button" disabled="disabled" class="ant-btn ant-btn-primary ant-btn-sm"><i class="anticon anticon-left"><svg viewBox="64 64 896 896" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
<path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path>
</svg></i></button></div>
<div class="ant-transfer-list">
<div class="ant-transfer-list-header"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label><span class="ant-transfer-list-header-selected"><span>0 item</span><span class="ant-transfer-list-header-title"></span></span></div>
<div class="ant-transfer-list-body ant-transfer-list-body-with-search">
<div class="ant-transfer-list-body-search-wrapper">
<div><input value="" placeholder="Search here" type="text" class="ant-input ant-transfer-list-search ant-transfer-list-search"><span class="ant-transfer-list-search-action"><i class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></i></span></div>
</div>
<ul class="ant-transfer-list-content"></ul>
<div class="ant-transfer-list-body-not-found">Not Found</div>
</div>
<ul class="ant-transfer-list-content"></ul>
<div class="ant-transfer-list-body-not-found">Not Found</div>
</div>
</div>
</div>
</div>
<div style="width: 319px; border: 1px solid #d9d9d9; border-radius: 4px;">
<div class="">
<div class="ant-fullcalendar-header">
<div class="ant-select ant-select-enabled ant-select-sm ant-fullcalendar-year-select">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single">
<div class="ant-select-selection__rendered">
<div title="2016" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">2016</div>
</div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon"></i></span>
<div style="width: 319px; border: 1px solid #d9d9d9; border-radius: 4px;">
<div class="">
<div class="ant-fullcalendar-header">
<div class="ant-select ant-select-enabled ant-select-sm ant-fullcalendar-year-select">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single">
<div class="ant-select-selection__rendered">
<div title="2016" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">2016</div>
</div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon"></i></span>
</div>
</div>
</div>
<div class="ant-select ant-select-enabled ant-select-sm ant-fullcalendar-month-select">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single">
<div class="ant-select-selection__rendered">
<div title="Nov" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Nov</div>
</div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon"></i></span>
<div class="ant-select ant-select-enabled ant-select-sm ant-fullcalendar-month-select">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single">
<div class="ant-select-selection__rendered">
<div title="Nov" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Nov</div>
</div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon"></i></span>
</div>
</div>
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-small"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="date"><span class="ant-radio-button-inner"></span></span><span>Month</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="month"><span class="ant-radio-button-inner"></span></span><span>Year</span></label></div>
</div>
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-small"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="date"><span class="ant-radio-button-inner"></span></span><span>Month</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="month"><span class="ant-radio-button-inner"></span></span><span>Year</span></label></div>
</div>
<div tabindex="0" class="ant-fullcalendar ant-fullcalendar-full">
<div class="ant-fullcalendar-calendar-body">
<table cellspacing="0" role="grid" class="ant-fullcalendar-table">
<thead>
<tr role="row">
<th role="columnheader" title="Sun" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Su</span></th>
<th role="columnheader" title="Mon" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Mo</span></th>
<th role="columnheader" title="Tue" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Tu</span></th>
<th role="columnheader" title="Wed" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">We</span></th>
<th role="columnheader" title="Thu" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Th</span></th>
<th role="columnheader" title="Fri" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Fr</span></th>
<th role="columnheader" title="Sat" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Sa</span></th>
</tr>
</thead>
<tbody class="ant-fullcalendar-tbody">
<tr role="row" class="">
<td role="gridcell" title="October 30, 2016" class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">30</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="October 31, 2016" class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell ant-fullcalendar-last-day-of-month">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">31</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 1, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">01</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 2, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">02</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 3, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">03</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 4, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">04</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 5, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">05</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" title="November 6, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">06</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 7, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">07</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 8, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">08</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 9, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">09</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 10, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">10</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 11, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">11</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 12, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">12</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" title="November 13, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">13</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 14, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">14</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 15, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">15</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 16, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">16</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 17, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">17</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 18, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">18</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 19, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">19</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
</tr>
<tr role="row" class="ant-fullcalendar-current-week ant-fullcalendar-active-week">
<td role="gridcell" title="November 20, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">20</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 21, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">21</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 22, 2016" class="ant-fullcalendar-cell ant-fullcalendar-today ant-fullcalendar-selected-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">22</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 23, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">23</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 24, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">24</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 25, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">25</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 26, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">26</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" title="November 27, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">27</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 28, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">28</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 29, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">29</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 30, 2016" class="ant-fullcalendar-cell ant-fullcalendar-last-day-of-month">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">30</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="December 1, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">01</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="December 2, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">02</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="December 3, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">03</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" title="December 4, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">04</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="December 5, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">05</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="December 6, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">06</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="December 7, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">07</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="December 8, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">08</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="December 9, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">09</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="December 10, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">10</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
</tr>
</tbody>
</table>
<div tabindex="0" class="ant-fullcalendar ant-fullcalendar-full">
<div class="ant-fullcalendar-calendar-body">
<table cellspacing="0" role="grid" class="ant-fullcalendar-table">
<thead>
<tr role="row">
<th role="columnheader" title="Sun" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Su</span></th>
<th role="columnheader" title="Mon" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Mo</span></th>
<th role="columnheader" title="Tue" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Tu</span></th>
<th role="columnheader" title="Wed" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">We</span></th>
<th role="columnheader" title="Thu" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Th</span></th>
<th role="columnheader" title="Fri" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Fr</span></th>
<th role="columnheader" title="Sat" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Sa</span></th>
</tr>
</thead>
<tbody class="ant-fullcalendar-tbody">
<tr role="row" class="">
<td role="gridcell" title="October 30, 2016" class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">30</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="October 31, 2016" class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell ant-fullcalendar-last-day-of-month">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">31</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 1, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">01</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 2, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">02</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 3, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">03</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 4, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">04</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 5, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">05</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" title="November 6, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">06</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 7, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">07</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 8, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">08</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 9, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">09</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 10, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">10</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 11, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">11</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 12, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">12</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" title="November 13, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">13</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 14, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">14</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 15, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">15</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 16, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">16</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 17, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">17</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 18, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">18</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 19, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">19</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
</tr>
<tr role="row" class="ant-fullcalendar-current-week ant-fullcalendar-active-week">
<td role="gridcell" title="November 20, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">20</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 21, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">21</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 22, 2016" class="ant-fullcalendar-cell ant-fullcalendar-today ant-fullcalendar-selected-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">22</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 23, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">23</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 24, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">24</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 25, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">25</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 26, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">26</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" title="November 27, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">27</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 28, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">28</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 29, 2016" class="ant-fullcalendar-cell">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">29</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="November 30, 2016" class="ant-fullcalendar-cell ant-fullcalendar-last-day-of-month">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">30</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="December 1, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">01</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="December 2, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">02</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="December 3, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">03</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" title="December 4, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">04</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="December 5, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">05</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="December 6, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">06</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="December 7, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">07</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="December 8, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">08</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="December 9, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">09</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
<td role="gridcell" title="December 10, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value">10</div>
<div class="ant-fullcalendar-content"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!---->
</div>
<!---->
</div>
</div>
`;

23802
components/locale-provider/__tests__/__snapshots__/index.test.js.snap
View File

File diff suppressed because it is too large Load Diff