mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 13:09:40 +08:00
Code Issues Actions 50 Packages Projects Releases Wiki Activity

Improve design of RangePicker presets link

Browse Source
This commit is contained in:
afc163 2018-07-11 20:09:58 +08:00
parent 722b24b813
commit 00afce3a4b
4 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,6 +5,7 @@ import RangeCalendar from 'rc-calendar/lib/RangeCalendar';
import RcDatePicker from 'rc-calendar/lib/Picker';
import classNames from 'classnames';
import Icon from '../icon';
import Tag from '../tag';
import warning from '../_util/warning';
import interopDefault from '../_util/interopDefault';
import { RangePickerValue, RangePickerPresetRange } from './interface';
@ -211,14 +212,15 @@ export default class RangePicker extends React.Component<any, RangePickerState>
const operations = Object.keys(ranges || {}).map((range) => {
const value = ranges[range];
return (
<a
<Tag
key={range}
color="blue"
onClick={() => this.handleRangeClick(value)}
onMouseEnter={() => this.setState({ hoverValue: value })}
onMouseLeave={this.handleRangeMouseLeave}
>
{range}
</a>
</Tag>
);
});
const rangeNode = (

10
components/date-picker/__tests__/RangePicker.test.js
View File

@ -50,7 +50,7 @@ describe('RangePicker', () => {
);
const rangeCalendarWrapper = mount(wrapper.find('Trigger').instance().getComponent());
rangeCalendarWrapper.find('.ant-calendar-range-quick-selector a')
rangeCalendarWrapper.find('.ant-calendar-range-quick-selector Tag')
.simulate('click');
expect(render(wrapper.find('Trigger').instance().getComponent()))
.toMatchSnapshot();
@ -69,7 +69,7 @@ describe('RangePicker', () => {
);
let rangeCalendarWrapper = mount(wrapper.find('Trigger').instance().getComponent());
rangeCalendarWrapper.find('.ant-calendar-range-quick-selector a')
rangeCalendarWrapper.find('.ant-calendar-range-quick-selector Tag')
.simulate('mouseEnter');
rangeCalendarWrapper = mount(wrapper.find('Trigger').instance().getComponent());
expect(rangeCalendarWrapper.find('.ant-calendar-selected-day').length).toBe(2);
@ -152,7 +152,7 @@ describe('RangePicker', () => {
/>
);
wrapper.find('.ant-calendar-picker-input').simulate('click');
wrapper.find('.ant-calendar-range-quick-selector a').simulate('click');
wrapper.find('.ant-calendar-range-quick-selector Tag').simulate('click');
expect(
wrapper.find('.ant-calendar-range-picker-input').first().getDOMNode().value
).toBe(range[0].format(format));
@ -171,7 +171,7 @@ describe('RangePicker', () => {
/>
);
wrapper.find('.ant-calendar-picker-input').simulate('click');
wrapper.find('.ant-calendar-range-quick-selector a').simulate('click');
wrapper.find('.ant-calendar-range-quick-selector Tag').simulate('click');
expect(
wrapper.find('.ant-calendar-range-picker-input').first().getDOMNode().value
).toBe(range[0].format(format));
@ -200,7 +200,7 @@ describe('RangePicker', () => {
/>
);
wrapper.find('.ant-calendar-picker-input').simulate('click');
wrapper.find('.ant-calendar-range-quick-selector a').simulate('click');
wrapper.find('.ant-calendar-range-quick-selector Tag').simulate('click');
expect(handleOk).toBeCalledWith(range);
});

7
components/date-picker/__tests__/__snapshots__/RangePicker.test.js.snap
View File

@ -2990,9 +2990,12 @@ exports[`RangePicker switch to corresponding month panel when click presetted ra
<div
class="ant-calendar-footer-extra ant-calendar-range-quick-selector"
>
<a>
<div
class="ant-tag ant-tag-blue"
data-show="true"
>
My Birthday
</a>
</div>
</div>
<div
class="ant-calendar-footer-btn"

1
components/date-picker/style/index.tsx
View File

@ -4,3 +4,4 @@ import './index.less';
// style dependencies
import '../../input/style';
import '../../time-picker/style';
import '../../tag/style';