mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 14:13:37 +08:00
3.14.0 Changelog (#15145)
* add responsive property to carousel (#15071) * add responsive property to carousel #15065 * extend carousel props from Slick type definitions #15065 * rm key in OptionProps (#15104) * update doc * fix cascader should tab twice to exist (#15117) * fix cascader should tab twice to exist * update snapshot * Drawer Body padding should be variable * fix DatePicker to support an array of formats (#15116) ref #13148 * table reader mobile friendly * up * up * doc: add 3.14.0 changelog * doc: fix ci warning * doc: fix ci warning * doc: fix typo * doc: fix ci warning * doc: fix ci warning * doc: fix cr warring * doc: fix cr warring * doc: fix cr warring * doc: fix cr warring * doc: fix cr warring * doc: fix cr warring * doc: fix cr warring * -m * -m * doc: fix cr warning
This commit is contained in:
陈帅
GitHub
parent
dee8f93fe7
commit
5e298dba51
@ -14,7 +14,30 @@ timeline: true
|
||||
* Major version release is not included in this schedule for breaking change and new features.
|
||||
|
||||
---
|
||||
## 3.14.0
|
||||
|
||||
`2019-03-02`
|
||||
|
||||
- Two new components added this month:
|
||||
- 🔥🔥🔥[Typography](https://github.com/ant-design/ant-design/pull/14250) provides basic formatting and common operations for text.
|
||||
- 🔥🔥🔥[PageHeader](https://github.com/ant-design/ant-design/pull/13637) can be used to declare the page theme, display important information about the page that the user is interested in, and host the relevant page. Action item.
|
||||
- 🌟 TimePicker provides `clearIcon` prop for customizing clear icon. [#14556](https://github.com/ant-design/ant-design/pull/14556)
|
||||
- 🌟 Statistic.Countdown supports `onFinish` prop. [#14791](https://github.com/ant-design/ant-design/pull/14791)
|
||||
- 🌟 Collapse.Panel support `extra` prop. [62e65d](https://github.com/ant-design/ant-design/commit/62e65d955065b1862240f9f30d84de44349a0cf9)
|
||||
- DatePicker
|
||||
- 🐞 Fix not support name prop. [#15029](https://github.com/ant-design/ant-design/pull/15029)
|
||||
- 🌟 Supports `separator` prop. [#15055](https://github.com/ant-design/ant-design/pull/15055)
|
||||
- 🌟 The Form supports `labelCol` & `wrapperCol` prop. [#15038](https://github.com/ant-design/ant-design/pull/15038)
|
||||
- 🌟 Add type `more` for Icon. [#15047](https://github.com/ant-design/ant-design/pull/15047)
|
||||
- 🐞 Fix Table filter can not support other type of value. [#15046](https://github.com/ant-design/ant-design/pull/15046)
|
||||
- 🐞 Fix Spin `wrapperClassName` setting `padding` icon is not centered. [#15056](https://github.com/ant-design/ant-design/pull/15056)
|
||||
- 🐞 Fix Calendar won't trigger `onPanelChange` correctly in some cases. [#15063](https://github.com/ant-design/ant-design/pull/15063)
|
||||
- 🌟 Select supports `showArrow` in multi-select mode. [#15091](https://github.com/ant-design/ant-design/pull/15091)
|
||||
- 🌟 Adjusted multiple TypeScript types
|
||||
- 🐞 Fixed a problem with the `onPanelChange` TypeScript declaration missing. [#15043](https://github.com/ant-design/ant-design/pull/15043)
|
||||
- 🐞 Fix the TypeScript type problem for Table `Column Filter`. [#15056](https://github.com/ant-design/ant-design/pull/15056)
|
||||
- 🌟 Support goto button in Pagination. [#14819](https://github.com/ant-design/ant-design/pull/14819)
|
||||
|
||||
## 3.13.6
|
||||
|
||||
`2019-02-23`
|
||||
|
||||
@ -15,6 +15,30 @@ timeline: true
|
||||
|
||||
---
|
||||
|
||||
## 3.14.0
|
||||
|
||||
`2019-03-02`
|
||||
|
||||
- 本月新增了两个组件：
|
||||
- 🔥🔥🔥 [Typography](https://github.com/ant-design/ant-design/pull/14250) 提供了文本的基本格式及常见操作。
|
||||
- 🔥🔥🔥 [PageHeader](https://github.com/ant-design/ant-design/pull/13637) 可用于声明页面主题、展示用户所关注的页面重要信息，以及承载与当前页相关的操作项。
|
||||
- 🌟 TimePicker 新增了 `clearIcon` prop，用于自定义清除图标。[#14556](https://github.com/ant-design/ant-design/pull/14556)
|
||||
- 🌟Statistic.Countdown 支持 `onFinish` prop。[#14791](https://github.com/ant-design/ant-design/pull/14791)
|
||||
- 🌟 Collapse.Panel 新增了 `extra`。[62e65d](https://github.com/ant-design/ant-design/commit/62e65d955065b1862240f9f30d84de44349a0cf9)
|
||||
- DatePicker
|
||||
- 🐞 修复 `name` prop 无效的问题。[#15029](https://github.com/ant-design/ant-design/pull/15029)
|
||||
- 🌟 支持 `separator` prop。[#15055](https://github.com/ant-design/ant-design/pull/15055)
|
||||
- 🌟 Form 支持 `labelCol` & `wrapperCol` prop。[#15038](https://github.com/ant-design/ant-design/pull/15038)
|
||||
- 🌟 Icon 增加了 `more` 的图标。[#15047](https://github.com/ant-design/ant-design/pull/15047)
|
||||
- 🐞 修复 Table 筛选不支持 string 以外类型的问题。[#15046](https://github.com/ant-design/ant-design/pull/15046)
|
||||
- 🐞 修复 Spin `wrapperClassName` 设置 `padding` 图标不居中的问题。[#15056](https://github.com/ant-design/ant-design/pull/15056)
|
||||
- 🐞 修复 Calendar `onPanelChange` 在某些情况下不会触发的问题。[#15063](https://github.com/ant-design/ant-design/pull/15063)
|
||||
- 🌟 Select 在多选模式下支持 `showArrow`。[#15091](https://github.com/ant-design/ant-design/pull/15091)
|
||||
- 🐞 调整了多处 TypeScript 的类型
|
||||
- 🐞 修复 `onPanelChange` TypeScript 声明缺失的问题。[#15043](https://github.com/ant-design/ant-design/pull/15043)
|
||||
- 🐞 订正了 Table `column filter` 的 TypeScript 类型问题。[#14777](https://github.com/ant-design/ant-design/issues/14777)
|
||||
- 🌟 Pagination 支持添加分页跳转按钮。 [#14819](https://github.com/ant-design/ant-design/pull/14819)
|
||||
|
||||
## 3.13.6
|
||||
|
||||
`2019-02-23`
|
||||
@ -423,7 +447,7 @@ timeline: true
|
||||
- 🐞 修复 RangePicker 在 `small` 模式不对齐的问题。[#13105](https://github.com/ant-design/ant-design/issues/13105)
|
||||
- 🐞 修复 Dropdown 字体大小影响到头像的问题。[#13091](https://github.com/ant-design/ant-design/issues/13091)
|
||||
- 🐞 修复 tabBarGutter 无法在垂直模式下工作的问题。[#12968](https://github.com/ant-design/ant-design/issues/12968)
|
||||
- 🌟 调整了多处 typescript 的类型。
|
||||
- 🌟 调整了多处 TypeScript 的类型。
|
||||
|
||||
## 3.10.7
|
||||
|
||||
@ -957,7 +981,7 @@ timeline: true
|
||||
* 🌟 支持 Ant Design 站点的离线模式。[#10625](https://github.com/ant-design/ant-design/issues/10625)
|
||||
* 🌟 `Transfer` 新增 `style` 以及 `operationStyle` 属性配置样式。[@eduludi](https://github.com/eduludi)
|
||||
* 🌟 `Message` 增加 promise 化的回调接口。[#10421](https://github.com/ant-design/ant-design/issues/10421) [@zhujinxuan](https://github.com/zhujinxuan)
|
||||
* 🐞 修复编译时 typescript v2.9.1兼容性问题。[#10729](https://github.com/ant-design/ant-design/issues/10729) [@karol-majewski](https://github.com/karol-majewski)
|
||||
* 🐞 修复编译时 TypeScript v2.9.1兼容性问题。[#10729](https://github.com/ant-design/ant-design/issues/10729) [@karol-majewski](https://github.com/karol-majewski)
|
||||
* 🐞 修复 `Menu` 嵌套超过两层时选中最里层后对应最外层没有亮起问题。[#8666](https://github.com/ant-design/ant-design/issues/8666) [@stonehank](https://github.com/stonehank)
|
||||
* 🐞 修复 `Affix` 组件 offsetBottom 无效问题。[#10674](https://github.com/ant-design/ant-design/issues/10674)
|
||||
|
||||
@ -1039,13 +1063,13 @@ timeline: true
|
||||
- Select
|
||||
- 🐞 修复 `placeholder` 的 ts 类型问题。[#10282](https://github.com/ant-design/ant-design/pull/10282) [@thomasthiebaud](https://github.com/thomasthiebaud)
|
||||
- 🐞 修复不显示箭头时多余的空白。[#10296](https://github.com/ant-design/ant-design/pull/10296)
|
||||
- 🐞 修复属性 `value` 的 typescript 类型错误。[#10336](https://github.com/ant-design/ant-design/pull/10336) [@paranoidjk](https://github.com/paranoidjk)
|
||||
- 🐞 修复属性 `value` 的 TypeScript 类型错误。[#10336](https://github.com/ant-design/ant-design/pull/10336) [@paranoidjk](https://github.com/paranoidjk)
|
||||
- Input
|
||||
- 🐞 修复 `Input.Search` 当 disabled 为 true 时按钮没有被禁用的问题。[#10040](https://github.com/ant-design/ant-design/issues/10040)
|
||||
- 🐞 修复 `Input.Group` 在表单中对齐的问题。[#10281](https://github.com/ant-design/ant-design/issues/10281)
|
||||
- Form
|
||||
- 🐞 修复 `Form.onValuesChange` 的 ts 类型错误。[#10231](https://github.com/ant-design/ant-design/pull/10231) [@whtsky](https://github.com/whtsky)
|
||||
- 🐞 修复 `ComponentDecorator` typescript 定义的错误。[#10324](https://github.com/ant-design/ant-design/pull/10324) [@paranoidjk](https://github.com/paranoidjk)
|
||||
- 🐞 修复 `ComponentDecorator` TypeScript 定义的错误。[#10324](https://github.com/ant-design/ant-design/pull/10324) [@paranoidjk](https://github.com/paranoidjk)
|
||||
- 🐞 修复 `Divider` 为 dashed 时的样式问题。[#10216](https://github.com/ant-design/ant-design/issues/10216)
|
||||
- 🐞 修复 `Spin` 覆盖层的展示问题。[#10227](https://github.com/ant-design/ant-design/issues/10227)
|
||||
- 🐞 修复 `Notification` 鼠标 hover 是图标的颜色问题。[#10272](https://github.com/ant-design/ant-design/issues/10272)
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import * as React from 'react';
|
||||
import debounce from 'lodash/debounce';
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
import { Settings } from 'react-slick';
|
||||
|
||||
// matchMedia polyfill for
|
||||
// https://github.com/WickyNilliams/enquire.js/issues/82
|
||||
@ -23,45 +24,10 @@ const SlickCarousel = require('react-slick').default;
|
||||
|
||||
export type CarouselEffect = 'scrollx' | 'fade';
|
||||
// Carousel
|
||||
export interface CarouselProps {
|
||||
export interface CarouselProps extends Settings {
|
||||
effect?: CarouselEffect;
|
||||
dots?: boolean;
|
||||
vertical?: boolean;
|
||||
autoplay?: boolean;
|
||||
easing?: string;
|
||||
beforeChange?: (from: number, to: number) => void;
|
||||
afterChange?: (current: number) => void;
|
||||
style?: React.CSSProperties;
|
||||
prefixCls?: string;
|
||||
accessibility?: boolean;
|
||||
nextArrow?: HTMLElement | any;
|
||||
prevArrow?: HTMLElement | any;
|
||||
pauseOnHover?: boolean;
|
||||
className?: string;
|
||||
adaptiveHeight?: boolean;
|
||||
arrows?: boolean;
|
||||
autoplaySpeed?: number;
|
||||
centerMode?: boolean;
|
||||
centerPadding?: string | any;
|
||||
cssEase?: string | any;
|
||||
dotsClass?: string;
|
||||
draggable?: boolean;
|
||||
fade?: boolean;
|
||||
focusOnSelect?: boolean;
|
||||
infinite?: boolean;
|
||||
initialSlide?: number;
|
||||
lazyLoad?: boolean;
|
||||
rtl?: boolean;
|
||||
slide?: string;
|
||||
slidesToShow?: number;
|
||||
slidesToScroll?: number;
|
||||
speed?: number;
|
||||
swipe?: boolean;
|
||||
swipeToSlide?: boolean;
|
||||
touchMove?: boolean;
|
||||
touchThreshold?: number;
|
||||
variableWidth?: boolean;
|
||||
useCSS?: boolean;
|
||||
slickGoTo?: number;
|
||||
}
|
||||
|
||||
|
||||
@ -13,6 +13,7 @@ exports[`renders ./components/cascader/demo/basic.md correctly 1`] = `
|
||||
class="ant-input ant-cascader-input "
|
||||
placeholder="Please select"
|
||||
readonly=""
|
||||
tabindex="-1"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
@ -50,6 +51,7 @@ exports[`renders ./components/cascader/demo/change-on-select.md correctly 1`] =
|
||||
class="ant-input ant-cascader-input "
|
||||
placeholder="Please select"
|
||||
readonly=""
|
||||
tabindex="-1"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
@ -101,6 +103,7 @@ exports[`renders ./components/cascader/demo/custom-render.md correctly 1`] = `
|
||||
autocomplete="off"
|
||||
class="ant-input ant-cascader-input "
|
||||
readonly=""
|
||||
tabindex="-1"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
@ -170,6 +173,7 @@ exports[`renders ./components/cascader/demo/default-value.md correctly 1`] = `
|
||||
autocomplete="off"
|
||||
class="ant-input ant-cascader-input "
|
||||
readonly=""
|
||||
tabindex="-1"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
@ -226,6 +230,7 @@ exports[`renders ./components/cascader/demo/disabled-option.md correctly 1`] = `
|
||||
class="ant-input ant-cascader-input "
|
||||
placeholder="Please select"
|
||||
readonly=""
|
||||
tabindex="-1"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
@ -263,6 +268,7 @@ exports[`renders ./components/cascader/demo/fields-name.md correctly 1`] = `
|
||||
class="ant-input ant-cascader-input "
|
||||
placeholder="Please select"
|
||||
readonly=""
|
||||
tabindex="-1"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
@ -300,6 +306,7 @@ exports[`renders ./components/cascader/demo/hover.md correctly 1`] = `
|
||||
class="ant-input ant-cascader-input "
|
||||
placeholder="Please select"
|
||||
readonly=""
|
||||
tabindex="-1"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
@ -337,6 +344,7 @@ exports[`renders ./components/cascader/demo/lazy.md correctly 1`] = `
|
||||
class="ant-input ant-cascader-input "
|
||||
placeholder="Please select"
|
||||
readonly=""
|
||||
tabindex="-1"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
@ -373,6 +381,7 @@ exports[`renders ./components/cascader/demo/search.md correctly 1`] = `
|
||||
autocomplete="off"
|
||||
class="ant-input ant-cascader-input "
|
||||
placeholder="Please select"
|
||||
tabindex="-1"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
@ -411,6 +420,7 @@ exports[`renders ./components/cascader/demo/size.md correctly 1`] = `
|
||||
class="ant-input ant-cascader-input ant-input-lg"
|
||||
placeholder="Please select"
|
||||
readonly=""
|
||||
tabindex="-1"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
@ -447,6 +457,7 @@ exports[`renders ./components/cascader/demo/size.md correctly 1`] = `
|
||||
class="ant-input ant-cascader-input "
|
||||
placeholder="Please select"
|
||||
readonly=""
|
||||
tabindex="-1"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
@ -483,6 +494,7 @@ exports[`renders ./components/cascader/demo/size.md correctly 1`] = `
|
||||
class="ant-input ant-cascader-input ant-input-sm"
|
||||
placeholder="Please select"
|
||||
readonly=""
|
||||
tabindex="-1"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
@ -524,6 +536,7 @@ exports[`renders ./components/cascader/demo/suffix.md correctly 1`] = `
|
||||
class="ant-input ant-cascader-input "
|
||||
placeholder="Please select"
|
||||
readonly=""
|
||||
tabindex="-1"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
@ -559,6 +572,7 @@ exports[`renders ./components/cascader/demo/suffix.md correctly 1`] = `
|
||||
class="ant-input ant-cascader-input "
|
||||
placeholder="Please select"
|
||||
readonly=""
|
||||
tabindex="-1"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
|
||||
@ -1237,6 +1237,7 @@ exports[`Cascader support controlled mode 1`] = `
|
||||
autocomplete="off"
|
||||
class="ant-input ant-cascader-input "
|
||||
readonly=""
|
||||
tabindex="-1"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
|
||||
@ -520,6 +520,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
|
||||
<span className={`${prefixCls}-picker-label`}>{this.getLabel()}</span>
|
||||
<Input
|
||||
{...inputProps}
|
||||
tabIndex="-1"
|
||||
ref={this.saveInput}
|
||||
prefixCls={inputPrefixCls}
|
||||
placeholder={value && value.length > 0 ? undefined : placeholder}
|
||||
|
||||
@ -5799,6 +5799,7 @@ exports[`ConfigProvider components Cascader configProvider 1`] = `
|
||||
autocomplete="off"
|
||||
class="config-input config-cascader-input "
|
||||
placeholder="Please select"
|
||||
tabindex="-1"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
@ -5835,6 +5836,7 @@ exports[`ConfigProvider components Cascader normal 1`] = `
|
||||
autocomplete="off"
|
||||
class="ant-input ant-cascader-input "
|
||||
placeholder="Please select"
|
||||
tabindex="-1"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
@ -5871,6 +5873,7 @@ exports[`ConfigProvider components Cascader prefixCls 1`] = `
|
||||
autocomplete="off"
|
||||
class="ant-input prefix-Cascader-input "
|
||||
placeholder="Please select"
|
||||
tabindex="-1"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
|
||||
@ -12,6 +12,7 @@ import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
import warning from '../_util/warning';
|
||||
import interopDefault from '../_util/interopDefault';
|
||||
import { RangePickerValue, RangePickerPresetRange } from './interface';
|
||||
import { formatDate } from './utils';
|
||||
|
||||
export interface RangePickerState {
|
||||
value?: RangePickerValue;
|
||||
@ -30,10 +31,6 @@ function getShowDateFromValue(value: RangePickerValue) {
|
||||
return [start, newEnd] as RangePickerValue;
|
||||
}
|
||||
|
||||
function formatValue(value: moment.Moment | undefined, format: string): string {
|
||||
return (value && value.format(format)) || '';
|
||||
}
|
||||
|
||||
function pickerValueAdapter(
|
||||
value?: moment.Moment | RangePickerValue,
|
||||
): RangePickerValue | undefined {
|
||||
@ -149,7 +146,7 @@ class RangePicker extends React.Component<any, RangePickerState> {
|
||||
}));
|
||||
}
|
||||
const [start, end] = value;
|
||||
props.onChange(value, [formatValue(start, props.format), formatValue(end, props.format)]);
|
||||
props.onChange(value, [formatDate(start, props.format), formatDate(end, props.format)]);
|
||||
};
|
||||
|
||||
handleOpenChange = (open: boolean) => {
|
||||
@ -386,7 +383,7 @@ class RangePicker extends React.Component<any, RangePickerState> {
|
||||
<input
|
||||
disabled={props.disabled}
|
||||
readOnly
|
||||
value={(start && start.format(props.format)) || ''}
|
||||
value={formatDate(start, props.format)}
|
||||
placeholder={startPlaceholder}
|
||||
className={`${prefixCls}-range-picker-input`}
|
||||
tabIndex={-1}
|
||||
@ -395,7 +392,7 @@ class RangePicker extends React.Component<any, RangePickerState> {
|
||||
<input
|
||||
disabled={props.disabled}
|
||||
readOnly
|
||||
value={(end && end.format(props.format)) || ''}
|
||||
value={formatDate(end, props.format)}
|
||||
placeholder={endPlaceholder}
|
||||
className={`${prefixCls}-range-picker-input`}
|
||||
tabIndex={-1}
|
||||
|
||||
@ -203,4 +203,11 @@ describe('DatePicker', () => {
|
||||
expect(extraNode.length).toBe(1);
|
||||
expect(extraNode.text()).toBe('decade');
|
||||
});
|
||||
|
||||
it('supports multiple formats', () => {
|
||||
const wrapper = mount(<DatePicker format={['DD/MM/YYYY', 'DD/MM/YY']} />);
|
||||
openPanel(wrapper);
|
||||
wrapper.find('.ant-calendar-input').simulate('change', { target: { value: '02/07/18' } });
|
||||
expect(wrapper.find('.ant-calendar-picker-input').getDOMNode().value).toBe('02/07/2018');
|
||||
});
|
||||
});
|
||||
|
||||
@ -700,6 +700,56 @@ exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
|
||||
</div>
|
||||
</span>
|
||||
<br />
|
||||
<span
|
||||
class="ant-calendar-picker"
|
||||
>
|
||||
<div>
|
||||
<input
|
||||
class="ant-calendar-picker-input ant-input"
|
||||
placeholder="Select date"
|
||||
readonly=""
|
||||
value="01/01/2015"
|
||||
/>
|
||||
<i
|
||||
aria-label="icon: close-circle"
|
||||
class="anticon anticon-close-circle ant-calendar-picker-clear"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="close-circle"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
<i
|
||||
aria-label="icon: calendar"
|
||||
class="anticon anticon-calendar ant-calendar-picker-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="calendar"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</div>
|
||||
</span>
|
||||
<br />
|
||||
<span
|
||||
class="ant-calendar-picker"
|
||||
>
|
||||
|
||||
@ -11,6 +11,7 @@ import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
import warning from '../_util/warning';
|
||||
import interopDefault from '../_util/interopDefault';
|
||||
import getDataOrAriaProps from '../_util/getDataOrAriaProps';
|
||||
import { formatDate } from './utils';
|
||||
|
||||
export interface PickerProps {
|
||||
value?: moment.Moment;
|
||||
@ -98,7 +99,7 @@ export default function createPicker(TheCalendar: React.ComponentClass): any {
|
||||
showDate: value,
|
||||
});
|
||||
}
|
||||
props.onChange(value, (value && value.format(props.format)) || '');
|
||||
props.onChange(value, formatDate(value, props.format));
|
||||
};
|
||||
|
||||
handleCalendarChange = (value: moment.Moment) => {
|
||||
@ -227,7 +228,7 @@ export default function createPicker(TheCalendar: React.ComponentClass): any {
|
||||
ref={this.saveInput}
|
||||
disabled={props.disabled}
|
||||
readOnly
|
||||
value={(inputValue && inputValue.format(props.format)) || ''}
|
||||
value={formatDate(inputValue, props.format)}
|
||||
placeholder={placeholder}
|
||||
className={props.pickerInputClass}
|
||||
tabIndex={props.tabIndex}
|
||||
|
||||
@ -21,9 +21,14 @@ const { MonthPicker, RangePicker } = DatePicker;
|
||||
|
||||
const dateFormat = 'YYYY/MM/DD';
|
||||
const monthFormat = 'YYYY/MM';
|
||||
|
||||
const dateFormatList = ['DD/MM/YYYY','DD/MM/YY']
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={dateFormat} />
|
||||
<br />
|
||||
<DatePicker defaultValue={moment('01/01/2015', dateFormatList[0])} format={dateFormatList} />
|
||||
<br />
|
||||
<MonthPicker defaultValue={moment('2015/01', monthFormat)} format={monthFormat} />
|
||||
<br />
|
||||
|
||||
@ -80,7 +80,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
|
||||
| defaultValue | to set default date | [moment](http://momentjs.com/) | - |
|
||||
| defaultPickerValue | to set default picker date | [moment](http://momentjs.com/) | - |
|
||||
| disabledTime | to specify the time that cannot be selected | function(date) | - |
|
||||
| format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-MM-DD" |
|
||||
| format | to set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting. | string \| string[] | "YYYY-MM-DD" |
|
||||
| renderExtraFooter | render extra footer in panel | (mode) => React.ReactNode | - |
|
||||
| showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](/components/time-picker/#API) |
|
||||
| showTime.defaultValue | to set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/) | moment() |
|
||||
@ -95,7 +95,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| defaultValue | to set default date | [moment](http://momentjs.com/) | - |
|
||||
| defaultPickerValue | to set default picker date | [moment](http://momentjs.com/) | - |
|
||||
| format | to set the date format. When an array is provided, all values are used for parsing and first value for display. refer to [moment.js](http://momentjs.com/) | string \| string[] | "YYYY-MM" |
|
||||
| format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-MM" |
|
||||
| monthCellContentRender | Custom month cell content render method | function(date, locale): ReactNode | - |
|
||||
| renderExtraFooter | render extra footer in panel | () => React.ReactNode | - |
|
||||
| value | to set date | [moment](http://momentjs.com/) | - |
|
||||
@ -119,7 +119,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
|
||||
| defaultValue | to set default date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | |
|
||||
| defaultPickerValue | to set default picker date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)\] | - | |
|
||||
| disabledTime | to specify the time that cannot be selected | function(dates: \[moment, moment], partial: `'start'|'end'`) | - | |
|
||||
| format | to set the date format | string | "YYYY-MM-DD HH:mm:ss" | |
|
||||
| format | to set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting. | string \| string[] | "YYYY-MM-DD HH:mm:ss" | |
|
||||
| ranges | preseted ranges for quick selection | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | - | |
|
||||
| renderExtraFooter | render extra footer in panel | () => React.ReactNode | - | |
|
||||
| separator | set separator between inputs | string | '~' | 3.14.0 |
|
||||
|
||||
11
components/date-picker/utils.ts
Normal file
11
components/date-picker/utils.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import * as moment from 'moment';
|
||||
|
||||
export function formatDate(value: moment.Moment | undefined | null, format: string | string[]): string {
|
||||
if (!value) {
|
||||
return '';
|
||||
}
|
||||
if (Array.isArray(format)) {
|
||||
format = format[0];
|
||||
}
|
||||
return value.format(format);
|
||||
}
|
||||
@ -150,7 +150,7 @@
|
||||
|
||||
&-header {
|
||||
position: relative;
|
||||
padding: 16px 24px;
|
||||
padding: @drawer-header-padding;
|
||||
color: @text-color;
|
||||
background: @component-background;
|
||||
border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||
@ -163,7 +163,7 @@
|
||||
}
|
||||
|
||||
&-body {
|
||||
padding: 24px;
|
||||
padding: @drawer-body-padding;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
word-wrap: break-word;
|
||||
|
||||
@ -146,6 +146,7 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
|
||||
autocomplete="off"
|
||||
class="ant-input ant-cascader-input "
|
||||
placeholder="Please select"
|
||||
tabindex="-1"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
|
||||
@ -1718,6 +1718,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
|
||||
data-__meta="[object Object]"
|
||||
id="register_residence"
|
||||
readonly=""
|
||||
tabindex="-1"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
@ -4705,6 +4706,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
|
||||
autocomplete="off"
|
||||
class="ant-input ant-cascader-input "
|
||||
readonly=""
|
||||
tabindex="-1"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
|
||||
@ -1,7 +1,25 @@
|
||||
import React from 'react';
|
||||
import { render } from 'enzyme';
|
||||
import { render, mount } from 'enzyme';
|
||||
import { Col, Row } from '..';
|
||||
|
||||
jest.mock('enquire.js', () => {
|
||||
let that;
|
||||
let unmatchFun;
|
||||
return {
|
||||
unregister: jest.fn(),
|
||||
register: (meidia, options) => {
|
||||
if (meidia === '(max-width: 575px)') {
|
||||
that = this;
|
||||
options.match.call(that);
|
||||
unmatchFun = options.unmatch;
|
||||
}
|
||||
},
|
||||
callunmatch() {
|
||||
unmatchFun.call(that);
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
describe('Grid', () => {
|
||||
it('should render Col', () => {
|
||||
const wrapper = render(<Col span={2} />);
|
||||
@ -13,6 +31,25 @@ describe('Grid', () => {
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should work correct when gutter is object', () => {
|
||||
// eslint-disable-next-line global-require
|
||||
const enquire = require('enquire.js');
|
||||
const wrapper = mount(<Row gutter={{ xs: 20 }} />);
|
||||
expect(wrapper.find('div').prop('style')).toEqual({
|
||||
marginLeft: -10,
|
||||
marginRight: -10,
|
||||
});
|
||||
enquire.callunmatch();
|
||||
expect(
|
||||
wrapper
|
||||
.update()
|
||||
.find('div')
|
||||
.prop('style'),
|
||||
).toEqual(undefined);
|
||||
wrapper.unmount();
|
||||
expect(enquire.unregister).toBeCalledTimes(6);
|
||||
});
|
||||
|
||||
it('renders wrapped Col correctly', () => {
|
||||
const MyCol = () => <Col span={12} />;
|
||||
const wrapper = render(
|
||||
|
||||
@ -898,6 +898,7 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
|
||||
class="ant-input ant-cascader-input "
|
||||
placeholder="Select Address"
|
||||
readonly=""
|
||||
tabindex="-1"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
|
||||
@ -44,6 +44,23 @@ describe('TextArea', () => {
|
||||
expect(mockFunc).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
|
||||
it('should support onPressEnter and onKeyDown', () => {
|
||||
const fakeHandleKeyDown = jest.fn();
|
||||
const fakeHandlePressEnter = jest.fn();
|
||||
const wrapper = mount(
|
||||
<TextArea onKeyDown={fakeHandleKeyDown} onPressEnter={fakeHandlePressEnter} />,
|
||||
);
|
||||
/** keyCode 65 is A */
|
||||
wrapper.find('textarea').simulate('keydown', { keyCode: 65 });
|
||||
expect(fakeHandleKeyDown).toHaveBeenCalledTimes(1);
|
||||
expect(fakeHandlePressEnter).toHaveBeenCalledTimes(0);
|
||||
|
||||
/** keyCode 13 is Enter */
|
||||
wrapper.find('textarea').simulate('keydown', { keyCode: 13 });
|
||||
expect(fakeHandleKeyDown).toHaveBeenCalledTimes(2);
|
||||
expect(fakeHandlePressEnter).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('should support disabled', () => {
|
||||
const wrapper = mount(<TextArea disabled />);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
@ -83,7 +83,6 @@ export interface OptionProps {
|
||||
title?: string;
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
key?: string;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
|
||||
@ -585,3 +585,8 @@
|
||||
@statistic-content-font-size: 24px;
|
||||
@statistic-unit-font-size: 16px;
|
||||
@statistic-font-family: Tahoma, 'Helvetica Neue', @font-family;
|
||||
|
||||
// Drawer
|
||||
// ---
|
||||
@drawer-header-padding: 16px 24px;
|
||||
@drawer-body-padding: 24px;
|
||||
|
||||
@ -133,7 +133,7 @@ Alibaba pays us.
|
||||
|
||||
---
|
||||
|
||||
## Errors & Warnings
|
||||
## Errors and Warnings
|
||||
|
||||
Here are some errors & warnings that you may meet while using antd, but most of them are not bugs of antd.
|
||||
|
||||
|
||||
@ -41,6 +41,7 @@
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "~1.2.0",
|
||||
"@ant-design/icons-react": "~1.1.2",
|
||||
"@types/react-slick": "^0.23.3",
|
||||
"array-tree-filter": "^2.1.0",
|
||||
"babel-runtime": "6.x",
|
||||
"classnames": "~2.2.6",
|
||||
@ -99,7 +100,6 @@
|
||||
"@types/react": "~16.8.1",
|
||||
"@types/react-dom": "^16.0.11",
|
||||
"@types/react-intl": "^2.3.14",
|
||||
"@types/react-slick": "^0.23.2",
|
||||
"@types/warning": "^3.0.0",
|
||||
"@yesmeck/offline-plugin": "^5.0.5",
|
||||
"ansi-styles": "^3.2.1",
|
||||
|
||||
@ -204,35 +204,39 @@
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown.api-container table {
|
||||
margin: 2em 0;
|
||||
font-size: @font-size-base;
|
||||
font-family: @code-family;
|
||||
line-height: @line-height-base;
|
||||
border-width: 0;
|
||||
th,
|
||||
td {
|
||||
padding: 14px 16px;
|
||||
border-width: 1px 0;
|
||||
border-color: @border-color-split;
|
||||
}
|
||||
th {
|
||||
border-width: 0 0 2px 0;
|
||||
}
|
||||
td:first-child {
|
||||
width: 20%;
|
||||
color: @blue-9;
|
||||
font-weight: 500;
|
||||
}
|
||||
td:nth-child(3) {
|
||||
width: 22%;
|
||||
color: @magenta-7;
|
||||
font-size: @font-size-base - 1px;
|
||||
word-break: break-all;
|
||||
}
|
||||
td:last-child {
|
||||
width: 13%;
|
||||
font-size: @font-size-base - 1px;
|
||||
.markdown.api-container {
|
||||
overflow-x: auto;
|
||||
table {
|
||||
min-width: 719px;
|
||||
margin: 2em 0;
|
||||
font-size: @font-size-base;
|
||||
font-family: @code-family;
|
||||
line-height: @line-height-base;
|
||||
border-width: 0;
|
||||
th,
|
||||
td {
|
||||
padding: 14px 16px;
|
||||
border-width: 1px 0;
|
||||
border-color: @border-color-split;
|
||||
}
|
||||
th {
|
||||
border-width: 0 0 2px 0;
|
||||
}
|
||||
td:first-child {
|
||||
width: 20%;
|
||||
color: @blue-9;
|
||||
font-weight: 500;
|
||||
}
|
||||
td:nth-child(3) {
|
||||
width: 22%;
|
||||
color: @magenta-7;
|
||||
font-size: @font-size-base - 1px;
|
||||
word-break: break-all;
|
||||
}
|
||||
td:last-child {
|
||||
width: 13%;
|
||||
font-size: @font-size-base - 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user