mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-05 23:46:28 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

Merge from master

Browse Source
This commit is contained in:
afc163 2017-01-20 18:28:09 +08:00
commit 35523be6e9
414 changed files with 3867 additions and 2037 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.eslintignore Normal file
View File

@ -0,0 +1,6 @@
components/**/*.js
components/**/*.jsx
!.eslintrc.js
!components/*/__tests__/*
!components/*/demo/*
!components/*/style/*

3
.lesshintrc
View File

@ -6,9 +6,6 @@
"importantRule": false,
"zeroUnit": "no_unit",
"qualifyingElement": false,
"duplicateProperty": false,
"importPath": false,
"finalNewline": false,
"newlineAfterBlock": false,
"maxCharPerLine": false,
"excludedFiles": [

38
CHANGELOG.en-US.md
View File

@ -1,5 +1,5 @@
---
order: 6
order: 9
title: Change Log
toc: false
timeline: true
@ -9,6 +9,34 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi
---
## 2.6.3
`2017-01-15`
* Fixed issue introduced in `2.6.2` that Popconfirm is not working. [#4606](https://github.com/ant-design/ant-design/issues/4606)
## 2.6.2
`2017-01-14`
* Added a Third-Party Library Page for recommending other greet react components. [Link](/docs/react/recommendation)
* Fixed misplaced Sider of Layout. [#4459](https://github.com/ant-design/ant-design/issues/4459)
* Fixed Input.Search wrong block layout and misplaced icon. [#4540](https://github.com/ant-design/ant-design/issues/4540)
* Added a customize Collapse panel demo. [Link](/components/collapse/#components-collapse-demo-custom)
* Table
* Enlarged the width of selection column and expand column.
* Fixed not-available pagination issue when property `pagination` is changed. [#4532](https://github.com/ant-design/ant-design/issues/4532)
* Fixed that three level filter menu is not working. [#4541](https://github.com/ant-design/ant-design/issues/4541)
* Fixed `column.filteredValue` issue of cannot being set to `null`.
* Now Carousel is undragglble and text-selectable defaultly.
* Added warnings when non-BreadcrumbItem node is nested under Breadcrumb. [#4403](https://github.com/ant-design/ant-design/issues/4403)
* Fixed Tooltip hidden issue when `onVisibleChange(visible)` return `true`. [#4579](https://github.com/ant-design/ant-design/issues/4579)
* Make TreeSelect panel default height smaller than screen height. [#4537](https://github.com/ant-design/ant-design/pull/4537)
* Added less variables of TimePicker and Spin.
* Replaced arrows of DatePicker year panel by year text. [#4415](https://github.com/ant-design/ant-design/issues/4415)
* Fixed TypeScript definites of AutoComplete and Form `[options.validateTrigger]`.
* Improved the animation details of Spin and Progress.
## 2.6.1
`2017-1-6`
@ -54,7 +82,7 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi
* Supports TypeScript@2.1. [#4208](https://github.com/ant-design/ant-design/issues/4208)
* Fix style issue resulting in nested Tabs. [#4317](https://github.com/ant-design/ant-design/issues/4317)
* Fix `onChange` callback issue resulting in Radio. [#4242](https://github.com/ant-design/ant-design/issues/4242) [@ystarlongzi](https://github.com/ystarlongzi)
* Fix a FormItem mis-aligin bug。 [#4271](https://github.com/ant-design/ant-design/issues/4271)
* Fix a FormItem mis-aligin bug. [#4271](https://github.com/ant-design/ant-design/issues/4271)
* Fix background issue resulting in selected element of veritcal Menu.[#4253](https://github.com/ant-design/ant-design/issues/4253)
* Improve arguments type of `onVisibleChange` callback of Dropdown.[#4236](https://github.com/ant-design/ant-design/issues/4236) [@bang88](https://github.com/bang88)
* Improve first argument type of `onChange` callback of Cascader.[#4231](https://github.com/ant-design/ant-design/issues/4231) [@bang88](https://github.com/bang88)
@ -222,10 +250,10 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi
* Add `type`. [#3560](https://github.com/ant-design/ant-design/issues/3560)
* Add `checkable`. [#3560](https://github.com/ant-design/ant-design/issues/3560)
* Radio.Group
* Add `className`。
* Add `className`.
* `null` or `undefined` `children` will be ignored.
* Select
* Add `tokenSeparators` to support automatic tokenization。[#2071](https://github.com/ant-design/ant-design/issues/2071)
* Add `tokenSeparators` to support automatic tokenization. [#2071](https://github.com/ant-design/ant-design/issues/2071)
* Add `onFocus` callback. [#3587](https://github.com/ant-design/ant-design/issues/3587)
* Fix issue resulting in Select can't display correct selected item text in `combobox` mode. [#3401](https://github.com/ant-design/ant-design/issues/3401)
@ -466,4 +494,4 @@ The following change will throw some warnings in the console and it will still w
## 1.11.4
Visit [GitHub](https://github.com/ant-design/ant-design/blob/1.x-stable/CHANGELOG.md) to read change logs from `0.x` to `1.x`。
Visit [GitHub](https://github.com/ant-design/ant-design/blob/1.x-stable/CHANGELOG.md) to read change logs from `0.x` to `1.x`.

30
CHANGELOG.zh-CN.md
View File

@ -1,5 +1,5 @@
---
order: 6
order: 9
title: 更新日志
toc: false
timeline: true
@ -9,6 +9,34 @@ timeline: true
---
## 2.6.3
`2017-01-15`
* 修复 `2.6.2` 中 Popconfirm 不可用的问题。[#4606](https://github.com/ant-design/ant-design/issues/4606)
## 2.6.2
`2017-01-14`
* 新增社区精选组件页面。[链接](/docs/react/recommendation/)
* 修复一个内容过长导致 Layout 侧边布局错位的问题。[#4459](https://github.com/ant-design/ant-design/issues/4459)
* 修复 Input.Search 输入框和图标错位的问题。[#4540](https://github.com/ant-design/ant-design/issues/4540)
* 补充了一个自定义灰底样式的 Collapse 折叠面板的例子。[链接](/components/collapse-cn/#components-collapse-demo-custom)
* Table
* 调大了 Table 选择框和展开按钮的列宽度。
* 修复 `pagination` 属性切换后分页不可用的问题。[#4532](https://github.com/ant-design/ant-design/issues/4532)
* 修复不支持三级筛选菜单的问题。[#4541](https://github.com/ant-design/ant-design/issues/4541)
* 修复 `column.filteredValue` 无法设置为 `null` 的问题。
* 调整 Carousel 为默认不可拖拽和文字可选择。
* 增加了 Breadcrumb 内嵌非 Breadcrumb.Item 元素时的警告提示。[#4403](https://github.com/ant-design/ant-design/issues/4403)
* 修复 Tooltip 在 `onVisibleChange(visible)` 返回 `true` 时不展示的问题。[#4579](https://github.com/ant-design/ant-design/issues/4579)
* 优化 TreeSelect 内容过长时的面板高度。[#4537](https://github.com/ant-design/ant-design/pull/4537)
* 补充了 TimePicker 和 Spin 的组件样式变量。
* 用年份代替了 DatePicker 年份选择面板上的箭头。[#4415](https://github.com/ant-design/ant-design/issues/4415)
* 修复 AutoComplete 和 Form `[options.validateTrigger]` 的 TypeScript 定义。
* 优化 Spin、Progress 的动画细节效果。
## 2.6.1
`2017-1-6`

11
README-zh_CN.md
View File

@ -24,7 +24,7 @@
- 提炼和服务企业级中后台产品的交互语言和视觉风格。
- [React Component](http://react-component.github.io/badgeboard/) 基础上精心封装的高质量 UI 组件。
- 使用 TypeScript 构建，提供完整的类型定义文件。
- 基于 npm + webpack + babel + [dora](https://github.com/dora-js/dora) + [dva](https://github.com/dvajs/dva) 的企业级业务开发框架。
- 基于 npm + webpack + [dva](https://github.com/dvajs/dva) 的企业级开发框架。
## 安装
@ -96,7 +96,8 @@ tsconfig.json
## 发布周期
* 每周末会发布一个完全兼容的 patch 版本。
* 每月发布一个带有新特性的 minor 版本。
* 任何时候都可以发布紧急补丁。
* 大版本号不在此发布周期内。
遵循 [Semantic Versioning 2.0.0](http://semver.org/lang/zh-CN/) 语义化版本规范。
* patch 版本：每周末会进行日常 bugfix 更新。（如果有紧急的 bugfix，则任何时候都可发布）
* minor 版本：每月发布一个带有新特性的版本。
* 大版本号：含有破坏性更新和新特性，不再发布周期内。

12
README.md
View File

@ -24,7 +24,7 @@ An enterprise-class UI design language and React-based implementation.
- An enterprise-class design language and high quality UI.
- Graceful UI components out of the box, based on [React Component](http://react-component.github.io/badgeboard/).
- Written in TypeScript with complete define types.
- A npm + webpack + babel + [dora](https://github.com/dora-js/dora) + [dva](https://github.com/dvajs/dva) development framework.
- A npm + webpack + [dva](https://github.com/dvajs/dva) front-end development workflow.
## Let's build a better antd together [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
@ -123,7 +123,9 @@ We welcome all contributions, please read our [CONTRIBUTING.md](https://github.c
## Release Schedule
* Weekly release: patch version at the end of every week.
* Monthly release: minor version at the end of every month.
* Emergence release: emergence patch anytime if necessary.
* Major version release is not included in this schedule.
Follow [Semantic Versioning 2.0.0](http://semver.org/).
* Weekly release: patch version at the end of every week for routine bugfix.
* Monthly release: minor version at the end of every month for new features.
* Emergence release: emergence patch anytime if necessary for urgent bugfix.
* Major version release is not included in this schedule for breadking change and new features.

2
components/affix/demo/basic.md
View File

@ -13,7 +13,7 @@ title:
The simplest usage.
````jsx
````__react
import { Affix, Button } from 'antd';
ReactDOM.render(

2
components/affix/demo/on-change.md
View File

@ -13,7 +13,7 @@ title:
Callback with affixed state.
````jsx
````__react
import { Affix, Button } from 'antd';
ReactDOM.render(

2
components/affix/demo/target.md
View File

@ -13,7 +13,7 @@ title:
Set a `target` for 'Affix', which is listen to scroll event of target element (default is `window`).
````jsx
````__react
import { Affix, Button } from 'antd';
class Demo extends React.Component {

2
components/alert/demo/banner.md
View File

@ -13,7 +13,7 @@ title:
When `Alert` is used as banner, it has particular style, Icon and `type`(warning) are specified by default.
````jsx
````__react
import { Alert } from 'antd';
ReactDOM.render(

2
components/alert/demo/basic.md
View File

@ -13,7 +13,7 @@ title:
The simplest usage for short messages.
````jsx
````__react
import { Alert } from 'antd';
ReactDOM.render(

2
components/alert/demo/closable.md
View File

@ -13,7 +13,7 @@ title:
To show close button.
````jsx
````__react
import { Alert } from 'antd';
const onClose = function (e) {

2
components/alert/demo/close-text.md
View File

@ -13,7 +13,7 @@ title:
Replace the default icon with customized text.
````jsx
````__react
import { Alert } from 'antd';
ReactDOM.render(

2
components/alert/demo/description.md
View File

@ -13,7 +13,7 @@ title:
Additional description for alert message.
````jsx
````__react
import { Alert } from 'antd';
ReactDOM.render(<div>

2
components/alert/demo/icon.md
View File

@ -13,7 +13,7 @@ title:
Decent icon make information more clear and more friendly.
````jsx
````__react
import { Alert } from 'antd';
ReactDOM.render(<div>

2
components/alert/demo/style.md
View File

@ -13,7 +13,7 @@ title:
There are 4 types of Alert: `success`, `info`, `warning`, `error`.
````jsx
````__react
import { Alert } from 'antd';
ReactDOM.render(<div>

2
components/anchor/demo/basic.md
View File

@ -13,7 +13,7 @@ title:
The simplest usage.
```jsx
```__react
import { Anchor } from 'antd';
const { Link } = Anchor;

2
components/anchor/demo/fixed.md
View File

@ -13,7 +13,7 @@ title:
Do not change state when page is scrolling.
```jsx
```__react
import { Anchor } from 'antd';
const { Link } = Anchor;

2
components/auto-complete/demo/basic.md
View File

@ -13,7 +13,7 @@ title:
Basic Usage, set datasource of autocomplete with `dataSource` property.
````jsx
````__react
import { AutoComplete } from 'antd';
function onSelect(value) {

2
components/auto-complete/demo/options.md
View File

@ -13,7 +13,7 @@ title:
You could pass `AutoComplete.Option` as children of `AutoComplete`, instead of using `dataSource`。
````jsx
````__react
import { AutoComplete } from 'antd';
const Option = AutoComplete.Option;

2
components/auto-complete/index.en-US.md
View File

@ -30,4 +30,4 @@ Since `AutoComplete` is based on `Select`, so besides the following API, `AutoCo
| disabled | Whether disabled select | boolean | false |
| placeholder | placeholder of input | string | - |
| children (for dataSource) | Data source for autocomplet | React.ReactElement<OptionProps> / Array<React.ReactElement<OptionProps>> | - |
| children (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement / React.ReactElement<InputProps> | `<Input />` |
| children (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement / React.ReactElement<InputProps> | `<Input />` |

12
components/auto-complete/index.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import { findDOMNode } from 'react-dom';
import Select, { OptionProps, OptGroupProps } from '../select';
import Select, { AbstractSelectProps, OptionProps, OptGroupProps } from '../select';
import Input from '../input';
import { Option, OptGroup } from 'rc-select';
import classNames from 'classnames';
@ -23,20 +23,15 @@ export type ValidInputElement =
HTMLTextAreaElement |
React.ReactElement<InputProps>;
export interface AutoCompleteProps {
export interface AutoCompleteProps extends AbstractSelectProps {
size?: 'large' | 'small' | 'default';
className?: string;
notFoundContent?: Element;
dataSource: DataSourceItemType[];
prefixCls?: string;
transitionName?: string;
optionLabelProp?: string;
choiceTransitionName?: string;
showSearch?: boolean;
defaultValue?: string | Array<any> | SelectedValue | Array<SelectedValue>;
value?: string | Array<any> | SelectedValue | Array<SelectedValue>;
allowClear?: boolean;
onChange?: (value: string | Array<any> | SelectedValue | Array<SelectedValue>) => void;
onSelect?: (value: string | Array<any> | SelectedValue | Array<SelectedValue>, option: Object) => any;
disabled?: boolean;
children: ValidInputElement |
React.ReactElement<OptionProps> |
@ -82,6 +77,7 @@ export default class AutoComplete extends React.Component<AutoCompleteProps, any
<Input/>;
return <InputElement className="ant-input">{element}</InputElement>;
}
render() {
let {
size, className = '', notFoundContent, prefixCls, optionLabelProp, dataSource, children,

3
components/auto-complete/index.zh-CN.md
View File

@ -31,4 +31,5 @@ const dataSource = ['12345', '23456', '34567'];
| disabled | 是否禁用 | boolean | false |
| placeholder | 输入框提示 | string | - |
| children (自动完成的数据源) | 自动完成的数据源 | React.ReactElement<OptionProps> / Array<React.ReactElement<OptionProps>> | - |
| children (自定义输入框) | 自定义输入框 | HTMLInputElement / HTMLTextAreaElement / React.ReactElement<InputProps> | `<Input />` |
| children (自定义输入框) | 自定义输入框 | HTMLInputElement / HTMLTextAreaElement / React.ReactElement<InputProps> | `<Input />` |
| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` |

2
components/back-top/demo/basic.md
View File

@ -13,7 +13,7 @@ title:
The most basic usage.
````jsx
````__react
import { BackTop } from 'antd';
ReactDOM.render(

2
components/back-top/demo/custom.md
View File

@ -14,7 +14,7 @@ title:
You can customize the style of the button, just note the size limit: no more than `40px * 40px`.
````jsx
````__react
import { BackTop } from 'antd';
ReactDOM.render(

2
components/badge/demo/basic.md
View File

@ -13,7 +13,7 @@ title:
Simplest Usage.
````jsx
````__react
import { Badge } from 'antd';
ReactDOM.render(

2
components/badge/demo/change.md
View File

@ -13,7 +13,7 @@ title:
The count will be animated as it changes.
````jsx
````__react
import { Badge, Button, Icon, Switch } from 'antd';
const ButtonGroup = Button.Group;

2
components/badge/demo/dot.md
View File

@ -13,7 +13,7 @@ title:
This will simply display a red badge, without a specific count.
````jsx
````__react
import { Badge, Icon } from 'antd';
ReactDOM.render(<div>

2
components/badge/demo/link.md
View File

@ -13,7 +13,7 @@ title:
The badge can be wrapped with `a` tag to make it linkable.
````jsx
````__react
import { Badge } from 'antd';
ReactDOM.render(

2
components/badge/demo/no-wrapper.md
View File

@ -15,7 +15,7 @@ title:
Used in standalone when children is empty.
````jsx
````__react
import { Badge } from 'antd';
ReactDOM.render(<div>

2
components/badge/demo/overflow.md
View File

@ -13,7 +13,7 @@ title:
`${overflowCount}+` is displayed when count is larger than `overflowCount`. The default value of `overflowCount` is `99`.
````jsx
````__react
import { Badge } from 'antd';
ReactDOM.render(<div>

2
components/badge/demo/status.md
View File

@ -13,7 +13,7 @@ title:
Standalone badge with status.
````jsx
````__react
import { Badge } from 'antd';
ReactDOM.render(

4
components/breadcrumb/Breadcrumb.tsx
View File

@ -91,6 +91,10 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
});
} else if (children) {
crumbs = React.Children.map(children, (element: any, index) => {
warning(
element.type === BreadcrumbItem,
' `BreadcrumbItem` is required as the wrapper of children element. '
);
return cloneElement(element, {
separator,
key: index,

2
components/breadcrumb/demo/basic.md
View File

@ -13,7 +13,7 @@ title:
The simplest use
````jsx
````__react
import { Breadcrumb } from 'antd';
ReactDOM.render(

2
components/breadcrumb/demo/router.md
View File

@ -14,7 +14,7 @@ title:
Used together with `react-router@2+`.
````jsx
````__react
import { Router, Route, Link, hashHistory } from 'react-router';
import { Breadcrumb, Alert } from 'antd';

2
components/breadcrumb/demo/separator.md
View File

@ -13,7 +13,7 @@ title:
The separator can be customized by setting the separator property: separator=">"
````jsx
````__react
import { Breadcrumb } from 'antd';
ReactDOM.render(

2
components/breadcrumb/demo/withIcon.md
View File

@ -13,7 +13,7 @@ title:
The icon should be placed in front of the text.
````jsx
````__react
import { Breadcrumb, Icon } from 'antd';
ReactDOM.render(

2
components/button/demo/basic.md
View File

@ -21,7 +21,7 @@ There are primary button, default button, ghost button and dashed button in antd
Primary button and default button can be used without other button, but ghost button must be used with primary button.
````jsx
````__react
import { Button } from 'antd';
ReactDOM.render(

2
components/button/demo/button-group.md
View File

@ -17,7 +17,7 @@ Buttons can be grouped by placing multiple `Button` components into a `Button.Gr
The `size` can be set to `large`, `small` or left unset resulting in a default size.
````jsx
````__react
import { Button, Icon } from 'antd';
const ButtonGroup = Button.Group;

2
components/button/demo/disabled.md
View File

@ -13,7 +13,7 @@ title:
To mark a button as disabled, add the `disabled` property to the `Button`.
````jsx
````__react
import { Button } from 'antd';
ReactDOM.render(

2
components/button/demo/icon.md
View File

@ -17,7 +17,7 @@ title:
If you want specific control over the positioning and placement of the `Icon`, then that should be done by placing the `Icon` component within the `Button` rather than using the `icon` property.
````jsx
````__react
import { Button } from 'antd';
ReactDOM.render(

2
components/button/demo/loading.md
View File

@ -13,7 +13,7 @@ title:
A loading indicator can be added to a button by setting the `loading` property on the `Button`.
````jsx
````__react
import { Button } from 'antd';
const App = React.createClass({

2
components/button/demo/multiple.md
View File

@ -14,7 +14,7 @@ title:
If you need several buttons, we recommend that you use 1 primary button + n secondary buttons, and if there are more than three operations, you can group some of them into `Dropdown.Button`.
````jsx
````__react
import { Button, Menu, Dropdown, Icon } from 'antd';
function handleMenuClick(e) {

2
components/button/demo/size.md
View File

@ -17,7 +17,7 @@ Ant Design supports a default button size as well as a large and small size.
If a large or small button is desired, set the `size` property to either `large` or `small` respectively. Omit the `size` property for a button with the default size.
````jsx
````__react
import { Button, Radio, Icon } from 'antd';
class ButtonSize extends React.Component {

952
components/calendar/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1569,958 +1569,6 @@ exports[`test renders ./components/calendar/demo/card.md correctly 1`] = `
</div>
`;
exports[`test renders ./components/calendar/demo/custom-render.md correctly 1`] = `
<div
class=" ant-fullcalendar-fullscreen">
<div
class="ant-fullcalendar-header">
<div
class="ant-fullcalendar-year-select ant-select ant-select-enabled">
<div
aria-autocomplete="list"
aria-expanded="false"
aria-haspopup="true"
class="ant-select-selection
ant-select-selection--single"
role="combobox"
tabindex="0">
<div
class="ant-select-selection__rendered">
<div
class="ant-select-selection-selected-value"
style="display:block;opacity:1;"
title="2010年">
2010年
</div>
</div>
<span
class="ant-select-arrow"
style="user-select:none;-webkit-user-select:none;"
unselectable="unselectable">
<b />
</span>
</div>
</div>
<div
class="ant-fullcalendar-month-select ant-select ant-select-enabled">
<div
aria-autocomplete="list"
aria-expanded="false"
aria-haspopup="true"
class="ant-select-selection
ant-select-selection--single"
role="combobox"
tabindex="0">
<div
class="ant-select-selection__rendered">
<div
class="ant-select-selection-selected-value"
style="display:block;opacity:1;"
title="10月">
10月
</div>
</div>
<span
class="ant-select-arrow"
style="user-select:none;-webkit-user-select:none;"
unselectable="unselectable">
<b />
</span>
</div>
</div>
<div
class="ant-radio-group ant-radio-group-default">
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked">
<span
class="ant-radio-button ant-radio-button-checked ant-radio-button ant-radio-button-checked ant-radio-button-checked-1">
<span
class="ant-radio-button-inner" />
<input
checked=""
class="ant-radio-button-input"
type="radio" />
</span>
<span>
月
</span>
</label>
<label
class="ant-radio-button-wrapper">
<span
class="ant-radio-button">
<span
class="ant-radio-button-inner" />
<input
class="ant-radio-button-input"
type="radio" />
</span>
<span>
年
</span>
</label>
</div>
</div>
<div
class="ant-fullcalendar ant-fullcalendar-full ant-fullcalendar-fullscreen"
tabindex="0">
<div
class="ant-fullcalendar-calendar-body">
<table
cellspacing="0"
class="ant-fullcalendar-table"
role="grid">
<thead>
<tr
role="row">
<th
class="ant-fullcalendar-column-header"
role="columnheader"
title="周一">
<span
class="ant-fullcalendar-column-header-inner">
一
</span>
</th>
<th
class="ant-fullcalendar-column-header"
role="columnheader"
title="周二">
<span
class="ant-fullcalendar-column-header-inner">
二
</span>
</th>
<th
class="ant-fullcalendar-column-header"
role="columnheader"
title="周三">
<span
class="ant-fullcalendar-column-header-inner">
三
</span>
</th>
<th
class="ant-fullcalendar-column-header"
role="columnheader"
title="周四">
<span
class="ant-fullcalendar-column-header-inner">
四
</span>
</th>
<th
class="ant-fullcalendar-column-header"
role="columnheader"
title="周五">
<span
class="ant-fullcalendar-column-header-inner">
五
</span>
</th>
<th
class="ant-fullcalendar-column-header"
role="columnheader"
title="周六">
<span
class="ant-fullcalendar-column-header-inner">
六
</span>
</th>
<th
class="ant-fullcalendar-column-header"
role="columnheader"
title="周日">
<span
class="ant-fullcalendar-column-header-inner">
日
</span>
</th>
</tr>
</thead>
<tbody
class="ant-fullcalendar-tbody">
<tr
role="row">
<td
class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell"
role="gridcell"
title="2010-9-27">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
27
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 27
</div>
</div>
</div>
</td>
<td
class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell"
role="gridcell"
title="2010-9-28">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
28
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 28
</div>
</div>
</div>
</td>
<td
class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell"
role="gridcell"
title="2010-9-29">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
29
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 29
</div>
</div>
</div>
</td>
<td
class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell"
role="gridcell"
title="2010-9-30">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
30
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 30
</div>
</div>
</div>
</td>
<td
class="ant-fullcalendar-cell"
role="gridcell"
title="2010-10-1">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
01
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 1
</div>
</div>
</div>
</td>
<td
class="ant-fullcalendar-cell"
role="gridcell"
title="2010-10-2">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
02
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 2
</div>
</div>
</div>
</td>
<td
class="ant-fullcalendar-cell"
role="gridcell"
title="2010-10-3">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
03
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 3
</div>
</div>
</div>
</td>
</tr>
<tr
role="row">
<td
class="ant-fullcalendar-cell"
role="gridcell"
title="2010-10-4">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
04
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 4
</div>
</div>
</div>
</td>
<td
class="ant-fullcalendar-cell"
role="gridcell"
title="2010-10-5">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
05
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 5
</div>
</div>
</div>
</td>
<td
class="ant-fullcalendar-cell"
role="gridcell"
title="2010-10-6">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
06
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 6
</div>
</div>
</div>
</td>
<td
class="ant-fullcalendar-cell"
role="gridcell"
title="2010-10-7">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
07
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 7
</div>
</div>
</div>
</td>
<td
class="ant-fullcalendar-cell"
role="gridcell"
title="2010-10-8">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
08
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 8
</div>
</div>
</div>
</td>
<td
class="ant-fullcalendar-cell"
role="gridcell"
title="2010-10-9">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
09
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 9
</div>
</div>
</div>
</td>
<td
class="ant-fullcalendar-cell ant-fullcalendar-selected-day"
role="gridcell"
title="2010-10-10">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
10
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 10
</div>
</div>
</div>
</td>
</tr>
<tr
role="row">
<td
class="ant-fullcalendar-cell"
role="gridcell"
title="2010-10-11">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
11
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 11
</div>
</div>
</div>
</td>
<td
class="ant-fullcalendar-cell"
role="gridcell"
title="2010-10-12">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
12
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 12
</div>
</div>
</div>
</td>
<td
class="ant-fullcalendar-cell"
role="gridcell"
title="2010-10-13">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
13
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 13
</div>
</div>
</div>
</td>
<td
class="ant-fullcalendar-cell"
role="gridcell"
title="2010-10-14">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
14
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 14
</div>
</div>
</div>
</td>
<td
class="ant-fullcalendar-cell"
role="gridcell"
title="2010-10-15">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
15
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 15
</div>
</div>
</div>
</td>
<td
class="ant-fullcalendar-cell"
role="gridcell"
title="2010-10-16">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
16
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 16
</div>
</div>
</div>
</td>
<td
class="ant-fullcalendar-cell"
role="gridcell"
title="2010-10-17">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
17
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 17
</div>
</div>
</div>
</td>
</tr>
<tr
role="row">
<td
class="ant-fullcalendar-cell"
role="gridcell"
title="2010-10-18">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
18
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 18
</div>
</div>
</div>
</td>
<td
class="ant-fullcalendar-cell"
role="gridcell"
title="2010-10-19">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
19
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 19
</div>
</div>
</div>
</td>
<td
class="ant-fullcalendar-cell"
role="gridcell"
title="2010-10-20">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
20
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 20
</div>
</div>
</div>
</td>
<td
class="ant-fullcalendar-cell"
role="gridcell"
title="2010-10-21">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
21
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 21
</div>
</div>
</div>
</td>
<td
class="ant-fullcalendar-cell"
role="gridcell"
title="2010-10-22">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
22
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 22
</div>
</div>
</div>
</td>
<td
class="ant-fullcalendar-cell"
role="gridcell"
title="2010-10-23">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
23
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 23
</div>
</div>
</div>
</td>
<td
class="ant-fullcalendar-cell"
role="gridcell"
title="2010-10-24">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
24
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 24
</div>
</div>
</div>
</td>
</tr>
<tr
role="row">
<td
class="ant-fullcalendar-cell"
role="gridcell"
title="2010-10-25">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
25
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 25
</div>
</div>
</div>
</td>
<td
class="ant-fullcalendar-cell"
role="gridcell"
title="2010-10-26">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
26
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 26
</div>
</div>
</div>
</td>
<td
class="ant-fullcalendar-cell"
role="gridcell"
title="2010-10-27">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
27
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 27
</div>
</div>
</div>
</td>
<td
class="ant-fullcalendar-cell"
role="gridcell"
title="2010-10-28">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
28
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 28
</div>
</div>
</div>
</td>
<td
class="ant-fullcalendar-cell"
role="gridcell"
title="2010-10-29">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
29
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 29
</div>
</div>
</div>
</td>
<td
class="ant-fullcalendar-cell"
role="gridcell"
title="2010-10-30">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
30
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 30
</div>
</div>
</div>
</td>
<td
class="ant-fullcalendar-cell"
role="gridcell"
title="2010-10-31">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
31
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 31
</div>
</div>
</div>
</td>
</tr>
<tr
role="row">
<td
class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day"
role="gridcell"
title="2010-11-1">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
01
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 1
</div>
</div>
</div>
</td>
<td
class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day"
role="gridcell"
title="2010-11-2">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
02
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 2
</div>
</div>
</div>
</td>
<td
class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day"
role="gridcell"
title="2010-11-3">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
03
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 3
</div>
</div>
</div>
</td>
<td
class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day"
role="gridcell"
title="2010-11-4">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
04
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 4
</div>
</div>
</div>
</td>
<td
class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day"
role="gridcell"
title="2010-11-5">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
05
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 5
</div>
</div>
</div>
</td>
<td
class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day"
role="gridcell"
title="2010-11-6">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
06
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 6
</div>
</div>
</div>
</td>
<td
class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day"
role="gridcell"
title="2010-11-7">
<div
class="ant-fullcalendar-date">
<div
class="ant-fullcalendar-value">
07
</div>
<div
class="ant-fullcalendar-content">
<div>
Custom date 7
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
`;
exports[`test renders ./components/calendar/demo/locale.md correctly 1`] = `
<div
class=" ant-fullcalendar-fullscreen">

3
components/calendar/demo/basic.md
View File

@ -9,12 +9,11 @@ title:
一个通用的日历面板，支持年/月切换。
## en-US
A basic calendar component with Year/Month switch.
````jsx
````__react
import { Calendar } from 'antd';
function onPanelChange(value, mode) {

4
components/calendar/demo/card.md
View File

@ -1,5 +1,5 @@
---
order: 10
order: 2
title:
zh-CN: 卡片模式
en-US: Card
@ -13,7 +13,7 @@ title:
Nested inside a container element for rendering in limited space.
````jsx
````__react
import { Calendar } from 'antd';
function onPanelChange(value, mode) {

33
components/calendar/demo/custom-render.md
View File

@ -1,33 +0,0 @@
---
order: 1
title:
zh-CN: 自定义渲染
en-US: Custom Render
---
## zh-CN
用 `dateCellRender` 和 `monthCellRender` 函数来自定义需要渲染的数据。
## en-US
This component can be rendered by using `dateCellRender` and `monthCellRender` with the data you need.
````jsx
import { Calendar } from 'antd';
import moment from 'moment';
function dateCellRender(value) {
return <div>Custom date {value.date()}</div>;
}
function monthCellRender(value) {
return <div>Custom monthly {value.month()}</div>;
}
ReactDOM.render(
<Calendar defaultValue={moment('2010-10-10', 'YYYY-MM-DD')}
dateCellRender={dateCellRender} monthCellRender={monthCellRender}
/>
, mountNode);
````

4
components/calendar/demo/locale.md
View File

@ -1,5 +1,5 @@
---
order: 4
order: 3
title:
zh-CN: 国际化
en-US: locale
@ -13,7 +13,7 @@ title:
To set the language. en_US, zh_CN are supported by default.
````jsx
````__react
import { Calendar } from 'antd';
import enUS from 'antd/lib/calendar/locale/en_US';
import moment from 'moment';

12
components/calendar/demo/notice-calendar.md
View File

@ -1,19 +1,19 @@
---
order: 2
order: 1
title:
zh-CN: 通知事项日历演示
en-US: A demo of Notice Calendar
zh-CN: 通知事项日历
en-US: Notice Calendar
---
## zh-CN
一个复杂的应用示例。
一个复杂的应用示例，用 `dateCellRender` 和 `monthCellRender` 函数来自定义需要渲染的数据。
## en-US
A complex application.
This component can be rendered by using `dateCellRender` and `monthCellRender` with the data you need.
````jsx
````__react
import { Calendar } from 'antd';
function getListData(value) {

2
components/card/demo/basic.md
View File

@ -13,7 +13,7 @@ title:
A basic card containing a title, content and an extra corner content.
````jsx
````__react
import { Card } from 'antd';
ReactDOM.render(

2
components/card/demo/border-less.md
View File

@ -13,7 +13,7 @@ title:
A borderless card on a gray background.
````jsx
````__react
import { Card } from 'antd';
ReactDOM.render(

2
components/card/demo/grid.md
View File

@ -13,7 +13,7 @@ title:
Cards usually cooperate with grid layout in overview page.
````jsx
````__react
import { Card, Col, Row } from 'antd';
ReactDOM.render(

2
components/card/demo/loading.md
View File

@ -13,7 +13,7 @@ title:
Shows a loading indicator while the contents of the card is being fetched.
````jsx
````__react
import { Card } from 'antd';
ReactDOM.render(

2
components/card/demo/no-padding.md
View File

@ -14,7 +14,7 @@ title:
Customizing default width and margin.
````jsx
````__react
import { Card } from 'antd';
ReactDOM.render(

2
components/card/demo/simple.md
View File

@ -13,7 +13,7 @@ title:
A simple card only containing a content area.
````jsx
````__react
import { Card } from 'antd';
ReactDOM.render(

2
components/carousel/demo/autoplay.md
View File

@ -13,7 +13,7 @@ title:
Timing of scrolling to the next card/picture.
````jsx
````__react
import { Carousel } from 'antd';
ReactDOM.render(

2
components/carousel/demo/basic.md
View File

@ -13,7 +13,7 @@ title:
Basic usage.
````jsx
````__react
import { Carousel } from 'antd';
function onChange(a, b, c) {

2
components/carousel/demo/fade.md
View File

@ -13,7 +13,7 @@ title:
Slides use fade for transition.
````jsx
````__react
import { Carousel } from 'antd';
ReactDOM.render(

2
components/carousel/demo/vertical.md
View File

@ -13,7 +13,7 @@ title:
Vertical pagination.
````jsx
````__react
import { Carousel } from 'antd';
ReactDOM.render(

40
components/carousel/style/index.less
View File

@ -24,7 +24,6 @@
&.dragging {
cursor: pointer;
cursor: hand;
}
}
.slick-slider .slick-track,
@ -138,35 +137,33 @@
// Dots
.slick-dots {
position: absolute;
bottom: 6px;
bottom: 12px;
list-style: none;
display: block;
text-align: center;
padding: 0;
width: 100%;
height: @carousel-dot-height;
li {
position: relative;
display: inline-block;
height: 20px;
width: 20px;
line-height: 20px;
vertical-align: top;
text-align: center;
margin: 0 2px;
padding: 0;
button {
border: 0;
cursor: pointer;
background: #000;
background: #fff;
opacity: 0.3;
display: inline-block;
width: 7px;
height: 7px;
border-radius: 7px;
display: block;;
width: @carousel-dot-width;
height: @carousel-dot-height;
border-radius: 1px;
outline: none;
font-size: 0;
color: transparent;
cursor: pointer;
transition: all .3s;
transition: all .5s;
&:hover,
&:focus {
opacity: 0.75;
@ -175,7 +172,7 @@
&.slick-active button {
background: #fff;
opacity: 1;
box-shadow: 0 0 3px rgba(0, 0, 0, .25);
width: @carousel-dot-active-width;
&:hover,
&:focus {
opacity: 1;
@ -187,10 +184,23 @@
.@{ant-prefix}-carousel-vertical {
.slick-dots {
width: 20px;
width: @carousel-dot-height;
bottom: auto;
right: 8px;
right: 12px;
top: 50%;
transform: translateY(-50%);
height: auto;
li {
margin: 0 2px;
vertical-align: baseline;
button {
width: @carousel-dot-height;
height: @carousel-dot-width;
}
&.slick-active button {
width: @carousel-dot-height;
height: @carousel-dot-active-width;
}
}
}
}

2
components/cascader/demo/basic.md
View File

@ -13,7 +13,7 @@ title:
Cascade selection box for selecting province/city/district.
````jsx
````__react
import { Cascader } from 'antd';
const options = [{

2
components/cascader/demo/change-on-select.md
View File

@ -13,7 +13,7 @@ title:
Allow only select parent options.
````jsx
````__react
import { Cascader } from 'antd';
const options = [{

2
components/cascader/demo/custom-render.md
View File

@ -13,7 +13,7 @@ title:
For instance, add an external link after the selected value.
````jsx
````__react
import { Cascader } from 'antd';
const options = [{

2
components/cascader/demo/custom-trigger.md
View File

@ -13,7 +13,7 @@ title:
Separate trigger button and result.
````jsx
````__react
import { Cascader } from 'antd';
const options = [{

2
components/cascader/demo/default-value.md
View File

@ -13,7 +13,7 @@ title:
Specifies default value by an array.
````jsx
````__react
import { Cascader } from 'antd';
const options = [{

2
components/cascader/demo/disabled-option.md
View File

@ -13,7 +13,7 @@ title:
Disable option by specifying the `disabled` property in `options`.
````jsx
````__react
import { Cascader } from 'antd';
const options = [{

2
components/cascader/demo/hover.md
View File

@ -13,7 +13,7 @@ title:
Hover to expand sub menu, click to select option.
````jsx
````__react
import { Cascader } from 'antd';
const options = [{

2
components/cascader/demo/lazy.md
View File

@ -17,7 +17,7 @@ Load options lazily with `loadData`.
> Note: `loadData` cannot work with `showSearch`.
````jsx
````__react
import { Cascader } from 'antd';
const options = [{

2
components/cascader/demo/search.md
View File

@ -13,7 +13,7 @@ title:
Search and select options directly.
````jsx
````__react
import { Cascader } from 'antd';
const options = [{

2
components/cascader/demo/size.md
View File

@ -13,7 +13,7 @@ title:
Cascade selection box of different sizes.
````jsx
````__react
import { Cascader } from 'antd';
const options = [{

3
components/cascader/style/index.less
View File

@ -29,9 +29,10 @@
&-disabled {
cursor: not-allowed;
background: @input-disabled-bg;
color: @disabled-color;
.@{cascader-prefix-cls}-input {
cursor: not-allowed;
background: @input-disabled-bg;
}
}

2
components/checkbox/demo/basic.md
View File

@ -13,7 +13,7 @@ title:
Basic usage of checkbox.
````jsx
````__react
import { Checkbox } from 'antd';
function onChange(e) {

2
components/checkbox/demo/check-all.md
View File

@ -13,7 +13,7 @@ title:
The `indeterminate` property can help you to achieve a 'check all' effect.
````jsx
````__react
import { Checkbox } from 'antd';
const CheckboxGroup = Checkbox.Group;

2
components/checkbox/demo/controller.md
View File

@ -13,7 +13,7 @@ title:
Communicated with other components.
````jsx
````__react
import { Checkbox, Button } from 'antd';
const App = React.createClass({

2
components/checkbox/demo/disabled.md
View File

@ -13,7 +13,7 @@ checkbox 不可用。
Disabled checkbox.
````jsx
````__react
import { Checkbox } from 'antd';
ReactDOM.render(<div>

2
components/checkbox/demo/group.md
View File

@ -13,7 +13,7 @@ title:
Generate a group of checkboxes from an array.
````jsx
````__react
import { Checkbox } from 'antd';
const CheckboxGroup = Checkbox.Group;

2
components/collapse/demo/accordion.md
View File

@ -13,7 +13,7 @@ title:
Accordion mode, only one panel can be expanded at a time. The first panel will be expanded by default.
````jsx
````__react
import { Collapse } from 'antd';
const Panel = Collapse.Panel;

2
components/collapse/demo/basic.md
View File

@ -13,7 +13,7 @@ title:
More than one panel can be expanded at a time, the first panel is initialized to be active in this case.
````jsx
````__react
import { Collapse } from 'antd';
const Panel = Collapse.Panel;

2
components/collapse/demo/borderless.md
View File

@ -13,7 +13,7 @@ title:
A borderless style of Collapse.
````jsx
````__react
import { Collapse } from 'antd';
const Panel = Collapse.Panel;

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

@ -13,7 +13,7 @@ title:
Customize the background, border and margin styles for each panel.
````jsx
````__react
import { Collapse } from 'antd';
const Panel = Collapse.Panel;

2
components/collapse/demo/mix.md
View File

@ -13,7 +13,7 @@ title:
`Collapse` is nested inside the `Collapse`.
````jsx
````__react
import { Collapse } from 'antd';
const Panel = Collapse.Panel;

4
components/collapse/style/index.less
View File

@ -39,8 +39,8 @@
transition: transform 0.24s ease;
top: 0;
left: 16px;
top: ~"16px \9";
left: ~"0 \9";
top: ~"16px \9"; // lesshint duplicateProperty: false
left: ~"0 \9"; // lesshint duplicateProperty: false
&:before {
content: "\e606";
}

17
components/date-picker/RangePicker.tsx
View File

@ -37,9 +37,9 @@ export default class RangePicker extends React.Component<any, any> {
componentWillReceiveProps(nextProps) {
if ('value' in nextProps) {
this.setState({
value: nextProps.value || [],
});
const value = nextProps.value || [];
const showDate = value[0];
this.setState({ value, showDate });
}
if ('open' in nextProps) {
this.setState({
@ -58,7 +58,7 @@ export default class RangePicker extends React.Component<any, any> {
handleChange = (value) => {
const props = this.props;
if (!('value' in props)) {
this.setState({ value });
this.setState({ value, showDate: value[0] });
}
props.onChange(value, [
(value[0] && value[0].format(props.format)) || '',
@ -69,12 +69,14 @@ export default class RangePicker extends React.Component<any, any> {
handleOpenChange = (open) => {
this.setState({ open });
const onOpenChange = this.props.onOpenChange;
const { onOpenChange } = this.props;
if (onOpenChange) {
onOpenChange(open);
}
}
handleShowDateChange = showDate => this.setState({ showDate })
setValue(value) {
this.handleChange(value);
if (!this.props.showTime) {
@ -101,7 +103,7 @@ export default class RangePicker extends React.Component<any, any> {
render() {
const { state, props, context } = this;
const { value, open } = state;
const { value, showDate, open } = state;
const localeCode = getLocaleCode(context);
if (value && localeCode) {
if (value[0]) {
@ -154,7 +156,8 @@ export default class RangePicker extends React.Component<any, any> {
dateInputPlaceholder={[startPlaceholder, endPlaceholder]}
locale={locale.lang}
onOk={onOk}
defaultValue={props.defaultPickerValue || [moment(), moment()]}
value={showDate || props.defaultPickerValue || moment()}
onValueChange={this.handleShowDateChange}
showToday={showToday}
/>
);

42
components/date-picker/__tests__/RangePicker.test.js Normal file
View File

@ -0,0 +1,42 @@
import React from 'react';
import { mount, render } from 'enzyme';
import { renderToJson } from 'enzyme-to-json';
import moment from 'moment';
import { RangePicker } from '../';
describe('RangePicker', () => {
it('show month panel according to value', () => {
const birthday = moment('2000-01-01', 'YYYY-MM-DD');
const wrapper = mount(
<RangePicker
getCalendarContainer={trigger => trigger}
format="YYYY/MM/DD"
showTime open
/>
);
wrapper.setProps({ value: [birthday, birthday] });
expect(renderToJson(render(wrapper.find('Trigger').node.getComponent())))
.toMatchSnapshot();
});
it('switch to corresponding month panel when click presetted ranges', () => {
const birthday = moment('2000-01-01', 'YYYY-MM-DD');
const wrapper = mount(
<RangePicker
ranges={{
'My Birthday': [birthday, birthday],
}}
getCalendarContainer={trigger => trigger}
format="YYYY/MM/DD"
showTime open
/>
);
const rangeCalendarWrapper = mount(wrapper.find('Trigger').node.getComponent());
rangeCalendarWrapper.find('.ant-calendar-range-quick-selector a')
.simulate('click');
expect(renderToJson(render(wrapper.find('Trigger').node.getComponent())))
.toMatchSnapshot();
});
});

2493
components/date-picker/__tests__/__snapshots__/RangePicker.test.js.snap Normal file
View File

File diff suppressed because it is too large Load Diff

2
components/date-picker/demo/basic.md
View File

@ -13,7 +13,7 @@ title:
Basic use case. Users can select or input a date in panel.
````jsx
````__react
import { DatePicker } from 'antd';
const { MonthPicker, RangePicker } = DatePicker;

16
components/date-picker/demo/disabled-date.md
View File

@ -13,7 +13,7 @@ title:
Disabled part of dates and time by `disabledDate` and `disabledTime` respectively, and `disabledTime` only works with `showTime`.
````jsx
````__react
import { DatePicker } from 'antd';
const RangePicker = DatePicker.RangePicker;
@ -55,9 +55,19 @@ function disabledRangeTime(_, type) {
ReactDOM.render(
<div>
<DatePicker format="YYYY-MM-DD HH:mm:ss" disabledDate={disabledDate} disabledTime={disabledDateTime} showTime />
<DatePicker
format="YYYY-MM-DD HH:mm:ss"
disabledDate={disabledDate}
disabledTime={disabledDateTime}
showTime
/>
<br />
<RangePicker disabledDate={disabledDate} disabledTime={disabledRangeTime} showTime={{ hideDisabledOptions: true }} />
<RangePicker
disabledDate={disabledDate}
disabledTime={disabledRangeTime}
showTime={{ hideDisabledOptions: true }}
format="YYYY-MM-DD HH:mm:ss"
/>
</div>,
mountNode
);

2
components/date-picker/demo/disabled.md
View File

@ -13,7 +13,7 @@ title:
A disabled state of the `DatePicker`.
````jsx
````__react
import { DatePicker } from 'antd';
import moment from 'moment';
const { MonthPicker, RangePicker } = DatePicker;

2
components/date-picker/demo/format.md
View File

@ -13,7 +13,7 @@ title:
We can set the date format by `format`.
````jsx
````__react
import { DatePicker } from 'antd';
import moment from 'moment';
const { MonthPicker, RangePicker } = DatePicker;

2
components/date-picker/demo/locale.md
View File

@ -18,7 +18,7 @@ Use locale to set the language. `en_US`, `zh_CN` are supported by default.
moment will use your time zone automatically. If you want to set other time zone, please set it by yourself.
````jsx
````__react
import { DatePicker } from 'antd';
import enUS from 'antd/lib/date-picker/locale/en_US';
import moment from 'moment-timezone/moment-timezone';

2
components/date-picker/demo/presetted-ranges.md
View File

@ -13,7 +13,7 @@ RangePicker 可以设置常用的 预设范围 提高用户体验。
We can set presetted ranges to RangePicker to improve user experience.
````jsx
````__react
import { DatePicker } from 'antd';
import moment from 'moment';
const RangePicker = DatePicker.RangePicker;

2
components/date-picker/demo/size.md
View File

@ -14,7 +14,7 @@ title:
The input box comes in three sizes. `default` will be used if `size` is omitted.
````jsx
````__react
import { DatePicker, Radio } from 'antd';
const { MonthPicker, RangePicker } = DatePicker;

2
components/date-picker/demo/start-end.md
View File

@ -17,7 +17,7 @@ When `RangePicker` is not satisfied your requirements, try to implement similar
> * Use the `disabledDate` property to limit the start and end dates.
> * Imporve user experience with `open` `onOpenChange`.
````jsx
````__react
import { DatePicker } from 'antd';
class DateRange extends React.Component {

2
components/date-picker/demo/time.md
View File

@ -13,7 +13,7 @@ title:
This property provide an additional time selection. When `showTime` is an Object, its properties will be passed on to built-in `TimePicker`.
````jsx
````__react
import { DatePicker } from 'antd';
const { RangePicker } = DatePicker;

5
components/date-picker/style/Calendar.less
View File

@ -238,11 +238,8 @@
border-bottom-right-radius: 4px;
}
&-footer {
border-top: 1px solid @border-color-split;
}
&-footer-btn {
border-top: 1px solid @border-color-split;
text-align: center;
display: block;
line-height: 38px;

11
components/date-picker/style/DecadePanel.less
View File

@ -62,15 +62,6 @@
.@{calendar-prefix-cls}-decade-panel-next-century-cell {
.@{calendar-prefix-cls}-decade-panel-decade {
user-select: none;
}
.@{calendar-prefix-cls}-decade-panel-decade:before {
content: "\e61f";
font-family: "anticon" !important;
}
}
.@{calendar-prefix-cls}-decade-panel-last-century-cell {
.@{calendar-prefix-cls}-decade-panel-decade:before {
content: "\e620";
color: @disabled-color;
}
}

3
components/date-picker/style/RangePicker.less
View File

@ -149,10 +149,11 @@
}
}
// `div` for selector specificity
div&-quick-selector {
display: block;
text-align: left;
border-bottom: 1px solid @border-color-split;
border-top: 1px solid @border-color-split;
padding: 10.5px 10px;
> a {

3
components/date-picker/style/TimePicker.less
View File

@ -3,7 +3,6 @@
width: 100%;
top: 34px;
background-color: @component-background;
height: 206px;
&-panel {
z-index: @zindex-picker;
@ -57,6 +56,7 @@
width: 33.6%;
overflow: hidden;
position: relative; // Fix chrome weird render bug
height: 206px;
&:hover {
overflow-y: auto;
@ -128,7 +128,6 @@
}
.@{calendar-prefix-cls}-footer {
border-top: 1px solid @border-color-split;
text-align: right;
position: relative;
height: auto;

11
components/date-picker/style/YearPanel.less
View File

@ -61,15 +61,6 @@
.@{calendar-prefix-cls}-year-panel-next-decade-cell {
.@{calendar-prefix-cls}-year-panel-year {
user-select: none;
}
.@{calendar-prefix-cls}-year-panel-year:before {
content: "\e61f";
font-family: "anticon" !important;
}
}
.@{calendar-prefix-cls}-year-panel-last-decade-cell {
.@{calendar-prefix-cls}-year-panel-year:before {
content: "\e620";
color: @disabled-color;
}
}

Some files were not shown because too many files have changed in this diff Show More