test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 12:09:14 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

fix: update quarter picker placeholder for RangePicker (#34089)

Browse Source
This commit is contained in:
黑雨 2022-02-17 13:38:49 +08:00 committed by GitHub
parent 2258335e6c
commit 483ebb9da1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 401 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,6 +5,7 @@ import DatePicker from '..';
import { setMockDate, resetMockDate } from '../../../tests/utils';
import { openPicker, selectCell, closePicker } from './utils';
import focusTest from '../../../tests/shared/focusTest';
import enUS from '../locale/en_US';
const { RangePicker } = DatePicker;
@ -96,4 +97,10 @@ describe('RangePicker', () => {
expect(wrapper.find('input').first().props().placeholder).toEqual('Start date');
expect(wrapper.find('input').last().props().placeholder).toEqual('End date');
});
it('RangePicker picker quarter placeholder', () => {
const wrapper = mount(<RangePicker picker="quarter" locale={enUS} />);
expect(wrapper.find('input').at(0).props().placeholder).toEqual('Start quarter');
expect(wrapper.find('input').at(1).props().placeholder).toEqual('End quarter');
});
});

299
components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -38619,6 +38619,305 @@ exports[`renders ./components/date-picker/demo/range-picker.md extend context co
</div>
</div>
</div>
<div
class="ant-space-item"
style="margin-bottom:12px"
>
<div
class="ant-picker ant-picker-range"
>
<div
class="ant-picker-input ant-picker-input-active"
>
<input
autocomplete="off"
placeholder="Start quarter"
readonly=""
size="12"
value=""
/>
</div>
<div
class="ant-picker-range-separator"
>
<span
aria-label="to"
class="ant-picker-separator"
>
<span
aria-label="swap-right"
class="anticon anticon-swap-right"
role="img"
>
<svg
aria-hidden="true"
data-icon="swap-right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-picker-input"
>
<input
autocomplete="off"
placeholder="End quarter"
readonly=""
size="12"
value=""
/>
</div>
<div
class="ant-picker-active-bar"
style="left:0;width:0;position:absolute"
/>
<span
class="ant-picker-suffix"
>
<span
aria-label="calendar"
class="anticon anticon-calendar"
role="img"
>
<svg
aria-hidden="true"
data-icon="calendar"
fill="currentColor"
focusable="false"
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>
</span>
</span>
</div>
<div>
<div
class="ant-picker-dropdown ant-picker-dropdown-range"
style="opacity:0;pointer-events:none"
>
<div
class="ant-picker-range-wrapper ant-picker-quarter-range-wrapper"
style="min-width:0"
>
<div
class="ant-picker-range-arrow"
style="left:0"
/>
<div
class="ant-picker-panel-container"
style="margin-left:0"
>
<div
class="ant-picker-panels"
>
<div
class="ant-picker-panel ant-picker-panel-focused"
tabindex="-1"
>
<div
class="ant-picker-quarter-panel"
>
<div
class="ant-picker-header"
>
<button
class="ant-picker-header-super-prev-btn"
tabindex="-1"
type="button"
>
<span
class="ant-picker-super-prev-icon"
/>
</button>
<div
class="ant-picker-header-view"
>
<button
class="ant-picker-year-btn"
type="button"
>
2016
</button>
</div>
<button
class="ant-picker-header-super-next-btn"
style="visibility:hidden"
tabindex="-1"
type="button"
>
<span
class="ant-picker-super-next-icon"
/>
</button>
</div>
<div
class="ant-picker-body"
>
<table
class="ant-picker-content"
>
<tbody>
<tr>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2016-Q1"
>
<div
class="ant-picker-cell-inner"
>
Q1
</div>
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2016-Q2"
>
<div
class="ant-picker-cell-inner"
>
Q2
</div>
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2016-Q3"
>
<div
class="ant-picker-cell-inner"
>
Q3
</div>
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2016-Q4"
>
<div
class="ant-picker-cell-inner"
>
Q4
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div
class="ant-picker-panel ant-picker-panel-focused"
tabindex="-1"
>
<div
class="ant-picker-quarter-panel"
>
<div
class="ant-picker-header"
>
<button
class="ant-picker-header-super-prev-btn"
style="visibility:hidden"
tabindex="-1"
type="button"
>
<span
class="ant-picker-super-prev-icon"
/>
</button>
<div
class="ant-picker-header-view"
>
<button
class="ant-picker-year-btn"
type="button"
>
2017
</button>
</div>
<button
class="ant-picker-header-super-next-btn"
tabindex="-1"
type="button"
>
<span
class="ant-picker-super-next-icon"
/>
</button>
</div>
<div
class="ant-picker-body"
>
<table
class="ant-picker-content"
>
<tbody>
<tr>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2017-Q1"
>
<div
class="ant-picker-cell-inner"
>
Q1
</div>
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2017-Q2"
>
<div
class="ant-picker-cell-inner"
>
Q2
</div>
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2017-Q3"
>
<div
class="ant-picker-cell-inner"
>
Q3
</div>
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2017-Q4"
>
<div
class="ant-picker-cell-inner"
>
Q4
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="ant-space-item"
>

86
components/date-picker/__tests__/__snapshots__/demo.test.js.snap
View File

@ -3085,6 +3085,92 @@ exports[`renders ./components/date-picker/demo/range-picker.md correctly 1`] = `
</span>
</div>
</div>
<div
class="ant-space-item"
style="margin-bottom:12px"
>
<div
class="ant-picker ant-picker-range"
>
<div
class="ant-picker-input ant-picker-input-active"
>
<input
autocomplete="off"
placeholder="Start quarter"
readonly=""
size="12"
value=""
/>
</div>
<div
class="ant-picker-range-separator"
>
<span
aria-label="to"
class="ant-picker-separator"
>
<span
aria-label="swap-right"
class="anticon anticon-swap-right"
role="img"
>
<svg
aria-hidden="true"
data-icon="swap-right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-picker-input"
>
<input
autocomplete="off"
placeholder="End quarter"
readonly=""
size="12"
value=""
/>
</div>
<div
class="ant-picker-active-bar"
style="left:0;width:0;position:absolute"
/>
<span
class="ant-picker-suffix"
>
<span
aria-label="calendar"
class="anticon anticon-calendar"
role="img"
>
<svg
aria-hidden="true"
data-icon="calendar"
fill="currentColor"
focusable="false"
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>
</span>
</span>
</div>
</div>
<div
class="ant-space-item"
>

1
components/date-picker/demo/range-picker.md
View File

@ -24,6 +24,7 @@ ReactDOM.render(
<RangePicker showTime />
<RangePicker picker="week" />
<RangePicker picker="month" />
<RangePicker picker="quarter" />
<RangePicker picker="year" />
</Space>,
mountNode,

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

@ -102,6 +102,7 @@ export type AdditionalPickerLocaleLangProps = {
monthPlaceholder?: string;
weekPlaceholder?: string;
rangeYearPlaceholder?: [string, string];
rangeQuarterPlaceholder?: [string, string];
rangeMonthPlaceholder?: [string, string];
rangeWeekPlaceholder?: [string, string];
rangePlaceholder?: [string, string];

1
components/date-picker/locale/en_GB.tsx
View File

@ -12,6 +12,7 @@ const locale: PickerLocale = {
weekPlaceholder: 'Select week',
rangePlaceholder: ['Start date', 'End date'],
rangeYearPlaceholder: ['Start year', 'End year'],
rangeQuarterPlaceholder: ['Start quarter', 'End quarter'],
rangeMonthPlaceholder: ['Start month', 'End month'],
rangeWeekPlaceholder: ['Start week', 'End week'],
...CalendarLocale,

1
components/date-picker/locale/en_US.tsx
View File

@ -12,6 +12,7 @@ const locale: PickerLocale = {
weekPlaceholder: 'Select week',
rangePlaceholder: ['Start date', 'End date'],
rangeYearPlaceholder: ['Start year', 'End year'],
rangeQuarterPlaceholder: ['Start quarter', 'End quarter'],
rangeMonthPlaceholder: ['Start month', 'End month'],
rangeWeekPlaceholder: ['Start week', 'End week'],
...CalendarLocale,

1
components/date-picker/locale/zh_CN.tsx
View File

@ -13,6 +13,7 @@ const locale: PickerLocale = {
rangePlaceholder: ['开始日期', '结束日期'],
rangeYearPlaceholder: ['开始年份', '结束年份'],
rangeMonthPlaceholder: ['开始月份', '结束月份'],
rangeQuarterPlaceholder: ['开始季度', '结束季度'],
rangeWeekPlaceholder: ['开始周', '结束周'],
...CalendarLocale,
},

1
components/date-picker/locale/zh_TW.tsx
View File

@ -13,6 +13,7 @@ const locale: PickerLocale = {
rangePlaceholder: ['開始日期', '結束日期'],
rangeYearPlaceholder: ['開始年份', '結束年份'],
rangeMonthPlaceholder: ['開始月份', '結束月份'],
rangeQuarterPlaceholder: ['開始季度', '結束季度'],
rangeWeekPlaceholder: ['開始周', '結束周'],
...CalendarLocale,
},

3
components/date-picker/util.ts
View File

@ -42,6 +42,9 @@ export function getRangePlaceholder(
if (picker === 'year' && locale.lang.yearPlaceholder) {
return locale.lang.rangeYearPlaceholder;
}
if (picker === 'quarter' && locale.lang.quarterPlaceholder) {
return locale.lang.rangeQuarterPlaceholder;
}
if (picker === 'month' && locale.lang.monthPlaceholder) {
return locale.lang.rangeMonthPlaceholder;
}