GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Fix dateRender not supported at WeekPicker 

close #13957
pull/13958/head
afc163 6 years ago
parent
03855d3ed1
commit
465b85f773
No known key found for this signature in database GPG Key ID: 738F973FCE5C6B48
3 changed files with 805 additions and 6 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      components/date-picker/WeekPicker.tsx
  2. 16
      components/date-picker/__tests__/WeekPicker.test.js
  3. 785
      components/date-picker/__tests__/__snapshots__/WeekPicker.test.js.snap

10
components/date-picker/WeekPicker.tsx
View File

@ -55,7 +55,8 @@ class WeekPicker extends React.Component<any, WeekPickerState> {
weekDateRender = (current: any) => {
const selectedValue = this.state.value;
const { prefixCls } = this.props;
const { prefixCls, dateRender } = this.props;
const dateNode = dateRender ? dateRender(current) : current.date();
if (
selectedValue &&
current.year() === selectedValue.year() &&
@ -63,11 +64,11 @@ class WeekPicker extends React.Component<any, WeekPickerState> {
) {
return (
<div className={`${prefixCls}-selected-day`}>
<div className={`${prefixCls}-date`}>{current.date()}</div>
<div className={`${prefixCls}-date`}>{dateNode}</div>
</div>
);
}
return <div className={`${prefixCls}-date`}>{current.date()}</div>;
return <div className={`${prefixCls}-date`}>{dateNode}</div>;
};
handleChange = (value: moment.Moment | null) => {
@ -130,8 +131,7 @@ class WeekPicker extends React.Component<any, WeekPickerState> {
suffixIcon,
} = this.props;
const { open } = this.state;
const pickerValue = this.state.value;
const { open, value: pickerValue } = this.state;
if (pickerValue && localeCode) {
pickerValue.locale(localeCode);
}

16
components/date-picker/__tests__/WeekPicker.test.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import { mount } from 'enzyme';
import { mount, render } from 'enzyme';
import DatePicker from '..';
import focusTest from '../../../tests/shared/focusTest';
@ -12,4 +12,18 @@ describe('WeekPicker', () => {
const wrapper = mount(<WeekPicker style={{ width: 400 }} />);
expect(wrapper.render()).toMatchSnapshot();
});
it('should support dateRender', () => {
const wrapper = mount(
<WeekPicker open dateRender={current => <span>{current.format('YYYY-MM-DD')}</span>} />,
);
expect(
render(
wrapper
.find('Trigger')
.instance()
.getComponent(),
),
).toMatchSnapshot();
});
});

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

@ -1,5 +1,790 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`WeekPicker should support dateRender 1`] = `
<div>
<div
class="ant-calendar-picker-container ant-calendar-picker-container-placement-bottomLeft "
>
<div
class="ant-calendar ant-calendar-week-number"
tabindex="0"
>
<div
class="ant-calendar-panel"
>
<div
class="ant-calendar-date-panel"
>
<div
class="ant-calendar-header"
>
<div
style="position:relative"
>
<a
class="ant-calendar-prev-year-btn"
role="button"
title="Last year (Control + left)"
/>
<a
class="ant-calendar-prev-month-btn"
role="button"
title="Previous month (PageUp)"
/>
<span
class="ant-calendar-my-select"
>
<a
class="ant-calendar-month-select"
role="button"
title="Choose a month"
>
Dec
</a>
<a
class="ant-calendar-year-select"
role="button"
title="Choose a year"
>
2018
</a>
</span>
<a
class="ant-calendar-next-month-btn"
title="Next month (PageDown)"
/>
<a
class="ant-calendar-next-year-btn"
title="Next year (Control + right)"
/>
</div>
</div>
<div
class="ant-calendar-body"
>
<table
cellspacing="0"
class="ant-calendar-table"
role="grid"
>
<thead>
<tr
role="row"
>
<th
class="ant-calendar-column-header ant-calendar-week-number-header"
role="columnheader"
>
<span
class="ant-calendar-column-header-inner"
>
x
</span>
</th>
<th
class="ant-calendar-column-header"
role="columnheader"
title="Sun"
>
<span
class="ant-calendar-column-header-inner"
>
Su
</span>
</th>
<th
class="ant-calendar-column-header"
role="columnheader"
title="Mon"
>
<span
class="ant-calendar-column-header-inner"
>
Mo
</span>
</th>
<th
class="ant-calendar-column-header"
role="columnheader"
title="Tue"
>
<span
class="ant-calendar-column-header-inner"
>
Tu
</span>
</th>
<th
class="ant-calendar-column-header"
role="columnheader"
title="Wed"
>
<span
class="ant-calendar-column-header-inner"
>
We
</span>
</th>
<th
class="ant-calendar-column-header"
role="columnheader"
title="Thu"
>
<span
class="ant-calendar-column-header-inner"
>
Th
</span>
</th>
<th
class="ant-calendar-column-header"
role="columnheader"
title="Fri"
>
<span
class="ant-calendar-column-header-inner"
>
Fr
</span>
</th>
<th
class="ant-calendar-column-header"
role="columnheader"
title="Sat"
>
<span
class="ant-calendar-column-header-inner"
>
Sa
</span>
</th>
</tr>
</thead>
<tbody
class="ant-calendar-tbody"
>
<tr
class=""
role="row"
>
<td
class="ant-calendar-week-number-cell"
role="gridcell"
>
48
</td>
<td
class="ant-calendar-cell ant-calendar-last-month-cell"
role="gridcell"
title="November 25, 2018"
>
<div
class="ant-calendar-date"
>
<span>
2018-11-25
</span>
</div>
</td>
<td
class="ant-calendar-cell ant-calendar-last-month-cell"
role="gridcell"
title="November 26, 2018"
>
<div
class="ant-calendar-date"
>
<span>
2018-11-26
</span>
</div>
</td>
<td
class="ant-calendar-cell ant-calendar-last-month-cell"
role="gridcell"
title="November 27, 2018"
>
<div
class="ant-calendar-date"
>
<span>
2018-11-27
</span>
</div>
</td>
<td
class="ant-calendar-cell ant-calendar-last-month-cell"
role="gridcell"
title="November 28, 2018"
>
<div
class="ant-calendar-date"
>
<span>
2018-11-28
</span>
</div>
</td>
<td
class="ant-calendar-cell ant-calendar-last-month-cell"
role="gridcell"
title="November 29, 2018"
>
<div
class="ant-calendar-date"
>
<span>
2018-11-29
</span>
</div>
</td>
<td
class="ant-calendar-cell ant-calendar-last-month-cell ant-calendar-last-day-of-month"
role="gridcell"
title="November 30, 2018"
>
<div
class="ant-calendar-date"
>
<span>
2018-11-30
</span>
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="December 1, 2018"
>
<div
class="ant-calendar-date"
>
<span>
2018-12-01
</span>
</div>
</td>
</tr>
<tr
class=""
role="row"
>
<td
class="ant-calendar-week-number-cell"
role="gridcell"
>
49
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="December 2, 2018"
>
<div
class="ant-calendar-date"
>
<span>
2018-12-02
</span>
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="December 3, 2018"
>
<div
class="ant-calendar-date"
>
<span>
2018-12-03
</span>
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="December 4, 2018"
>
<div
class="ant-calendar-date"
>
<span>
2018-12-04
</span>
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="December 5, 2018"
>
<div
class="ant-calendar-date"
>
<span>
2018-12-05
</span>
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="December 6, 2018"
>
<div
class="ant-calendar-date"
>
<span>
2018-12-06
</span>
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="December 7, 2018"
>
<div
class="ant-calendar-date"
>
<span>
2018-12-07
</span>
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="December 8, 2018"
>
<div
class="ant-calendar-date"
>
<span>
2018-12-08
</span>
</div>
</td>
</tr>
<tr
class=""
role="row"
>
<td
class="ant-calendar-week-number-cell"
role="gridcell"
>
50
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="December 9, 2018"
>
<div
class="ant-calendar-date"
>
<span>
2018-12-09
</span>
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="December 10, 2018"
>
<div
class="ant-calendar-date"
>
<span>
2018-12-10
</span>
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="December 11, 2018"
>
<div
class="ant-calendar-date"
>
<span>
2018-12-11
</span>
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="December 12, 2018"
>
<div
class="ant-calendar-date"
>
<span>
2018-12-12
</span>
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="December 13, 2018"
>
<div
class="ant-calendar-date"
>
<span>
2018-12-13
</span>
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="December 14, 2018"
>
<div
class="ant-calendar-date"
>
<span>
2018-12-14
</span>
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="December 15, 2018"
>
<div
class="ant-calendar-date"
>
<span>
2018-12-15
</span>
</div>
</td>
</tr>
<tr
class=""
role="row"
>
<td
class="ant-calendar-week-number-cell"
role="gridcell"
>
51
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="December 16, 2018"
>
<div
class="ant-calendar-date"
>
<span>
2018-12-16
</span>
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="December 17, 2018"
>
<div
class="ant-calendar-date"
>
<span>
2018-12-17
</span>
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="December 18, 2018"
>
<div
class="ant-calendar-date"
>
<span>
2018-12-18
</span>
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="December 19, 2018"
>
<div
class="ant-calendar-date"
>
<span>
2018-12-19
</span>
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="December 20, 2018"
>
<div
class="ant-calendar-date"
>
<span>
2018-12-20
</span>
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="December 21, 2018"
>
<div
class="ant-calendar-date"
>
<span>
2018-12-21
</span>
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="December 22, 2018"
>
<div
class="ant-calendar-date"
>
<span>
2018-12-22
</span>
</div>
</td>
</tr>
<tr
class="ant-calendar-current-week ant-calendar-active-week"
role="row"
>
<td
class="ant-calendar-week-number-cell"
role="gridcell"
>
52
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="December 23, 2018"
>
<div
class="ant-calendar-date"
>
<span>
2018-12-23
</span>
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="December 24, 2018"
>
<div
class="ant-calendar-date"
>
<span>
2018-12-24
</span>
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="December 25, 2018"
>
<div
class="ant-calendar-date"
>
<span>
2018-12-25
</span>
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="December 26, 2018"
>
<div
class="ant-calendar-date"
>
<span>
2018-12-26
</span>
</div>
</td>
<td
class="ant-calendar-cell ant-calendar-today ant-calendar-selected-day"
role="gridcell"
title="December 27, 2018"
>
<div
class="ant-calendar-date"
>
<span>
2018-12-27
</span>
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="December 28, 2018"
>
<div
class="ant-calendar-date"
>
<span>
2018-12-28
</span>
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="December 29, 2018"
>
<div
class="ant-calendar-date"
>
<span>
2018-12-29
</span>
</div>
</td>
</tr>
<tr
class=""
role="row"
>
<td
class="ant-calendar-week-number-cell"
role="gridcell"
>
1
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="December 30, 2018"
>
<div
class="ant-calendar-date"
>
<span>
2018-12-30
</span>
</div>
</td>
<td
class="ant-calendar-cell ant-calendar-last-day-of-month"
role="gridcell"
title="December 31, 2018"
>
<div
class="ant-calendar-date"
>
<span>
2018-12-31
</span>
</div>
</td>
<td
class="ant-calendar-cell ant-calendar-next-month-btn-day"
role="gridcell"
title="January 1, 2019"
>
<div
class="ant-calendar-date"
>
<span>
2019-01-01
</span>
</div>
</td>
<td
class="ant-calendar-cell ant-calendar-next-month-btn-day"
role="gridcell"
title="January 2, 2019"
>
<div
class="ant-calendar-date"
>
<span>
2019-01-02
</span>
</div>
</td>
<td
class="ant-calendar-cell ant-calendar-next-month-btn-day"
role="gridcell"
title="January 3, 2019"
>
<div
class="ant-calendar-date"
>
<span>
2019-01-03
</span>
</div>
</td>
<td
class="ant-calendar-cell ant-calendar-next-month-btn-day"
role="gridcell"
title="January 4, 2019"
>
<div
class="ant-calendar-date"
>
<span>
2019-01-04
</span>
</div>
</td>
<td
class="ant-calendar-cell ant-calendar-next-month-btn-day"
role="gridcell"
title="January 5, 2019"
>
<div
class="ant-calendar-date"
>
<span>
2019-01-05
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`WeekPicker should support style prop 1`] = `
<span
class="ant-calendar-picker"

Write Preview
Loading…
Cancel
Save