mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-07-26 00:26:53 +08:00
Code Issues Actions 39 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 RcDatePicker from 'rc-calendar/lib/Picker';
import classNames from 'classnames'; import classNames from 'classnames';
import Icon from '../icon'; import Icon from '../icon';
import Tag from '../tag';
import warning from '../_util/warning'; import warning from '../_util/warning';
import interopDefault from '../_util/interopDefault'; import interopDefault from '../_util/interopDefault';
import { RangePickerValue, RangePickerPresetRange } from './interface'; 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 operations = Object.keys(ranges || {}).map((range) => {
const value = ranges[range]; const value = ranges[range];
return ( return (
<a <Tag
key={range} key={range}
color="blue"
onClick={() => this.handleRangeClick(value)} onClick={() => this.handleRangeClick(value)}
onMouseEnter={() => this.setState({ hoverValue: value })} onMouseEnter={() => this.setState({ hoverValue: value })}
onMouseLeave={this.handleRangeMouseLeave} onMouseLeave={this.handleRangeMouseLeave}
> >
{range} {range}
</a> </Tag>
); );
}); });
const rangeNode = ( 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()); 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'); .simulate('click');
expect(render(wrapper.find('Trigger').instance().getComponent())) expect(render(wrapper.find('Trigger').instance().getComponent()))
.toMatchSnapshot(); .toMatchSnapshot();
@ -69,7 +69,7 @@ describe('RangePicker', () => {
); );
let rangeCalendarWrapper = mount(wrapper.find('Trigger').instance().getComponent()); 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'); .simulate('mouseEnter');
rangeCalendarWrapper = mount(wrapper.find('Trigger').instance().getComponent()); rangeCalendarWrapper = mount(wrapper.find('Trigger').instance().getComponent());
expect(rangeCalendarWrapper.find('.ant-calendar-selected-day').length).toBe(2); 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-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( expect(
wrapper.find('.ant-calendar-range-picker-input').first().getDOMNode().value wrapper.find('.ant-calendar-range-picker-input').first().getDOMNode().value
).toBe(range[0].format(format)); ).toBe(range[0].format(format));
@ -171,7 +171,7 @@ describe('RangePicker', () => {
/> />
); );
wrapper.find('.ant-calendar-picker-input').simulate('click'); 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( expect(
wrapper.find('.ant-calendar-range-picker-input').first().getDOMNode().value wrapper.find('.ant-calendar-range-picker-input').first().getDOMNode().value
).toBe(range[0].format(format)); ).toBe(range[0].format(format));
@ -200,7 +200,7 @@ describe('RangePicker', () => {
/> />
); );
wrapper.find('.ant-calendar-picker-input').simulate('click'); 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); 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 <div
class="ant-calendar-footer-extra ant-calendar-range-quick-selector" class="ant-calendar-footer-extra ant-calendar-range-quick-selector"
> >
<a> <div
class="ant-tag ant-tag-blue"
data-show="true"
>
My Birthday My Birthday
</a> </div>
</div> </div>
<div <div
class="ant-calendar-footer-btn" class="ant-calendar-footer-btn"

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

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