From 2c587c6c9deb07e55985a0973992ecad484569c0 Mon Sep 17 00:00:00 2001 From: Charles Lee <cpylua@users.noreply.github.com> Date: Thu, 5 Dec 2019 17:08:54 +0800 Subject: [PATCH] Fix typo in datetimepicker (#1277) --- .../__tests__/datetimepicker/DatePicker.js | 32 +++++++++---------- .../datetimepicker/DateRangePicker.js | 16 ++++++---- .../__tests__/datetimepicker/MonthPicker.js | 10 +++--- .../zent/src/datetimepicker/MonthPicker.tsx | 12 +++---- .../zent/src/datetimepicker/TimePicker.tsx | 6 ++-- .../src/datetimepicker/TimeRangePicker.tsx | 4 +-- .../zent/src/datetimepicker/YearPicker.tsx | 6 ++-- .../src/datetimepicker/constants/index.ts | 2 +- 8 files changed, 45 insertions(+), 43 deletions(-) diff --git a/packages/zent/__tests__/datetimepicker/DatePicker.js b/packages/zent/__tests__/datetimepicker/DatePicker.js index dcb4de3a02..7f5a153726 100644 --- a/packages/zent/__tests__/datetimepicker/DatePicker.js +++ b/packages/zent/__tests__/datetimepicker/DatePicker.js @@ -33,7 +33,7 @@ describe('DateTimePicker', () => { * {palceholder||value} * span.zenticon-calendar-o */ - const wrapper = mount(<DatePicker showTime isFooterVisble />); + const wrapper = mount(<DatePicker showTime isFooterVisible />); expect(wrapper.find('DatePicker').length).toBe(1); expect(wrapper.find('.picker-input').length).toBe(1); expect(wrapper.find('.zenticon').length).toBe(2); @@ -41,7 +41,7 @@ describe('DateTimePicker', () => { }); it('DatePicker has its default behavior(DatePanel, MonthPanel and YearPanel 3 level transition)', () => { - const wrapper = mount(<DatePicker isFooterVisble />); + const wrapper = mount(<DatePicker isFooterVisible />); wrapper.find('.picker-input').simulate('click'); // get pop from ref after simulate click. @@ -71,7 +71,7 @@ describe('DateTimePicker', () => { }); it('DatePicker with showTime switch (some kind of 5-level panel)', () => { - const wrapper = mount(<DatePicker showTime isFooterVisble />); + const wrapper = mount(<DatePicker showTime isFooterVisible />); wrapper.find('.picker-input').simulate('click'); const pop = new ReactWrapper(wrapper.instance().picker, true); pop.find('.link--current').simulate('click'); @@ -129,7 +129,7 @@ describe('DateTimePicker', () => { const getMonthNumber = string => +string.match(/\d{4}.{1}(\d{1,2})/)[1]; const getYearNumber = string => +string.match(/(\d{4})/)[1]; const getYearRangeTail = string => +string.match(/(\d{4}).*(\d{4})/)[2]; - const wrapper = mount(<DatePicker showTime isFooterVisble />); + const wrapper = mount(<DatePicker showTime isFooterVisible />); // DatePanel wrapper.find('.picker-input').simulate('click'); @@ -219,7 +219,7 @@ describe('DateTimePicker', () => { value="2017-01-01" onChange={onChangeMock} onHover={hoverMock} - isFooterVisble + isFooterVisible /> ); wrapper.find('.picker-input').simulate('click'); @@ -257,12 +257,12 @@ describe('DateTimePicker', () => { // HACK: branch description is not clear it('DatePicker will set actived to Date.now() when value prop is unable to parse', () => { - let wrapper = mount(<DatePicker value="2001年9月11日" isFooterVisble />); + let wrapper = mount(<DatePicker value="2001年9月11日" isFooterVisible />); expect( wrapper.find('DatePicker').getNode().state.actived instanceof Date ).toBe(true); - wrapper = mount(<DatePicker isFooterVisble />); + wrapper = mount(<DatePicker isFooterVisible />); wrapper.setProps({ prefix: 'zent-custom' }); expect(wrapper.find('.zent-custom-datetime-picker').length).toBe(1); wrapper.setProps({ value: false }); @@ -296,13 +296,13 @@ describe('DateTimePicker', () => { <DatePicker onChange={onChangeMock} value={new Date(2017, 1, 1).getTime()} - isFooterVisble + isFooterVisible /> ); changeValue(wrapper); expect(typeof onChangeMock.mock.calls[0][0]).toBe('number'); wrapper = mount( - <DatePicker onChange={onChangeMock} value={new Date()} isFooterVisble /> + <DatePicker onChange={onChangeMock} value={new Date()} isFooterVisible /> ); changeValue(wrapper); expect(onChangeMock.mock.calls[1][0] instanceof Date).toBe(true); @@ -312,7 +312,7 @@ describe('DateTimePicker', () => { // total disable switch const getMonthNumber = string => +string.match(/\d{4}.{1}(\d{1,2})/)[1]; const getYearNumber = string => +string.match(/(\d{4})/)[1]; - let wrapper = mount(<DatePicker disabled isFooterVisble />); + let wrapper = mount(<DatePicker disabled isFooterVisible />); expect(wrapper.find('DatePanel').length).toBe(0); wrapper.find('.picker-input').simulate('click'); expect(wrapper.find('DatePanel').length).toBe(0); @@ -321,14 +321,14 @@ describe('DateTimePicker', () => { const disFunc = val => { return val.getFullYear() > 2000; }; - wrapper = mount(<DatePicker disabledDate={disFunc} isFooterVisble />); + wrapper = mount(<DatePicker disabledDate={disFunc} isFooterVisible />); wrapper.find('.picker-input').simulate('click'); let pop = new ReactWrapper(wrapper.instance().picker, true); expect(pop.find('.panel__cell').every('.panel__cell--disabled')).toBe(true); // max const now = new Date(); - wrapper = mount(<DatePicker max="2010.01.01" isFooterVisble />); + wrapper = mount(<DatePicker max="2010.01.01" isFooterVisible />); wrapper.find('.picker-input').simulate('click'); pop = new ReactWrapper(wrapper.instance().picker, true); expect(getMonthNumber(pop.find('DatePanel .panel__title').text())).toBe( @@ -340,7 +340,7 @@ describe('DateTimePicker', () => { expect(pop.find('.panel__cell').every('.panel__cell--disabled')).toBe(true); // min - wrapper = mount(<DatePicker min="3000.01.01" isFooterVisble />); + wrapper = mount(<DatePicker min="3000.01.01" isFooterVisible />); wrapper.find('.picker-input').simulate('click'); pop = new ReactWrapper(wrapper.instance().picker, true); expect(getMonthNumber(pop.find('DatePanel .panel__title').text())).toBe( @@ -367,7 +367,7 @@ describe('DateTimePicker', () => { }; }; const wrapper = mount( - <DatePicker showTime disabledTime={getDisabledTime} isFooterVisble /> + <DatePicker showTime disabledTime={getDisabledTime} isFooterVisible /> ); wrapper.find('.picker-input').simulate('click'); const pop = new ReactWrapper(wrapper.instance().picker, true); @@ -401,7 +401,7 @@ describe('DateTimePicker', () => { it('support disabled time with min', () => { const now = setTime(new Date(), TIME); - const wrapper = mount(<DatePicker showTime min={now} isFooterVisble />); + const wrapper = mount(<DatePicker showTime min={now} isFooterVisible />); wrapper.find('.picker-input').simulate('click'); const pop = new ReactWrapper(wrapper.instance().picker, true); @@ -455,7 +455,7 @@ describe('DateTimePicker', () => { it('support disabled time with max', () => { const now = setTime(new Date(), TIME); - const wrapper = mount(<DatePicker showTime max={now} isFooterVisble />); + const wrapper = mount(<DatePicker showTime max={now} isFooterVisible />); wrapper.find('.picker-input').simulate('click'); const pop = new ReactWrapper(wrapper.instance().picker, true); diff --git a/packages/zent/__tests__/datetimepicker/DateRangePicker.js b/packages/zent/__tests__/datetimepicker/DateRangePicker.js index d02c2ee32e..7ef527f35c 100644 --- a/packages/zent/__tests__/datetimepicker/DateRangePicker.js +++ b/packages/zent/__tests__/datetimepicker/DateRangePicker.js @@ -6,7 +6,7 @@ import isArray from 'lodash/isArray'; describe('DateRangePicker', () => { it('DateRangePicker has its core function', () => { let pop; - const wrapper = mount(<DateRangePicker showTime isFooterVisble />); + const wrapper = mount(<DateRangePicker showTime isFooterVisible />); wrapper .find('.picker-input') .at(0) @@ -41,7 +41,7 @@ describe('DateRangePicker', () => { it('DateRangePicker render value', () => { let pop; const wrapper = mount( - <DateRangePicker value={['2017-01-01', '2017-12-30']} isFooterVisble /> + <DateRangePicker value={['2017-01-01', '2017-12-30']} isFooterVisible /> ); expect(wrapper.find('.zent-input').at(0).node.value).toBe('2017-01-01'); wrapper @@ -64,7 +64,9 @@ describe('DateRangePicker', () => { const onChangeMock = jest.fn().mockImplementation(value => { wrapper.setProps({ value }); }); - wrapper = mount(<DateRangePicker onChange={onChangeMock} isFooterVisble />); + wrapper = mount( + <DateRangePicker onChange={onChangeMock} isFooterVisible /> + ); wrapper .find('.picker-input') .at(0) @@ -102,7 +104,7 @@ describe('DateRangePicker', () => { const onClose = jest.fn(); const onOpen = jest.fn(); wrapper = mount( - <DateRangePicker onClose={onClose} onOpen={onOpen} isFooterVisble /> + <DateRangePicker onClose={onClose} onOpen={onOpen} isFooterVisible /> ); wrapper .find('.picker-input') @@ -128,7 +130,7 @@ describe('DateRangePicker', () => { const onChangeMock = jest.fn(); let pop; let wrapper = mount( - <DateRangePicker onChange={onChangeMock} isFooterVisble /> + <DateRangePicker onChange={onChangeMock} isFooterVisible /> ); wrapper .find('.picker-input') @@ -160,7 +162,7 @@ describe('DateRangePicker', () => { // default disabledDate is noop // HACK: branch - wrapper = mount(<DateRangePicker disabled isFooterVisble />); + wrapper = mount(<DateRangePicker disabled isFooterVisible />); wrapper .find('.picker-input') .at(0) @@ -169,7 +171,7 @@ describe('DateRangePicker', () => { // support min and max pop = mount( - <DateRangePicker min="2000-01-01" max="2001-01-01" isFooterVisble /> + <DateRangePicker min="2000-01-01" max="2001-01-01" isFooterVisible /> ); pop .find('.picker-input') diff --git a/packages/zent/__tests__/datetimepicker/MonthPicker.js b/packages/zent/__tests__/datetimepicker/MonthPicker.js index f12d95f992..07dd17149a 100644 --- a/packages/zent/__tests__/datetimepicker/MonthPicker.js +++ b/packages/zent/__tests__/datetimepicker/MonthPicker.js @@ -22,7 +22,7 @@ describe('MonthPicker', () => { it('MonthPicker has 2 level panel', () => { let pop; - const wrapper = mount(<MonthPicker isFooterVisble />); + const wrapper = mount(<MonthPicker isFooterVisible />); const inst = wrapper.instance(); expect(inst.state.openPanel).toBe(false); expect(inst.state.showPlaceholder).toBe(true); @@ -67,7 +67,7 @@ describe('MonthPicker', () => { let wrapper; const onChangeMock = jest.fn(); wrapper = mount( - <MonthPicker value="2010-01" onChange={onChangeMock} isFooterVisble /> + <MonthPicker value="2010-01" onChange={onChangeMock} isFooterVisible /> ); wrapper .find('.zenticon-close-circle') @@ -78,10 +78,10 @@ describe('MonthPicker', () => { it('MonthPicker support default value', () => { let wrapper; - wrapper = mount(<MonthPicker defaultValue="2010-01" isFooterVisble />); + wrapper = mount(<MonthPicker defaultValue="2010-01" isFooterVisible />); expect(wrapper.instance().state.actived).toBeInstanceOf(Date); - wrapper = mount(<MonthPicker vaule="xxxx-xx" isFooterVisble />); + wrapper = mount(<MonthPicker vaule="xxxx-xx" isFooterVisible />); expect(wrapper.instance().state.showPlaceholder).toBe(true); }); @@ -92,7 +92,7 @@ describe('MonthPicker', () => { wrapper.setProps({ value }); }); wrapper = mount( - <MonthPicker value="2010-01" onChange={onChangeMock} isFooterVisble /> + <MonthPicker value="2010-01" onChange={onChangeMock} isFooterVisible /> ); const inst = wrapper.instance(); diff --git a/packages/zent/src/datetimepicker/MonthPicker.tsx b/packages/zent/src/datetimepicker/MonthPicker.tsx index 8ec9c81ca4..506030a745 100644 --- a/packages/zent/src/datetimepicker/MonthPicker.tsx +++ b/packages/zent/src/datetimepicker/MonthPicker.tsx @@ -15,7 +15,7 @@ import { DatePickers } from './common/types'; export interface IMonthPickerProps extends DatePickers.ICommonProps { disabled?: boolean; - isFooterVisble?: boolean; + isFooterVisible?: boolean; onBeforeClear?: () => unknown; } @@ -104,7 +104,7 @@ export class MonthPicker extends PureComponent<IMonthPickerProps, any> { }; onSelectMonth = (val, isYear = false) => { - const { onClick, isFooterVisble } = this.props; + const { onClick, isFooterVisible } = this.props; const month = val.getMonth(); if (!isYear && this.isDisabled(month)) return; @@ -115,7 +115,7 @@ export class MonthPicker extends PureComponent<IMonthPickerProps, any> { actived: val, }, () => { - if (!isFooterVisble) { + if (!isFooterVisible) { this.onConfirm(); } } @@ -168,14 +168,14 @@ export class MonthPicker extends PureComponent<IMonthPickerProps, any> { renderPicker(i18n) { const { - props: { confirmText, isFooterVisble }, + props: { confirmText, isFooterVisible }, state: { actived, openPanel, selected }, } = this; let monthPicker; if (openPanel) { const monthPickerCls = cx({ 'month-picker': true, - small: isFooterVisble, + small: isFooterVisible, }); monthPicker = ( <div className={monthPickerCls}> @@ -187,7 +187,7 @@ export class MonthPicker extends PureComponent<IMonthPickerProps, any> { disabledDate={this.isDisabled} i18n={i18n} /> - {isFooterVisble ? ( + {isFooterVisible ? ( <PanelFooter buttonText={confirmText || i18n.confirm} linkText={i18n.current.month} diff --git a/packages/zent/src/datetimepicker/TimePicker.tsx b/packages/zent/src/datetimepicker/TimePicker.tsx index abb8c54bc8..ce8acae32f 100644 --- a/packages/zent/src/datetimepicker/TimePicker.tsx +++ b/packages/zent/src/datetimepicker/TimePicker.tsx @@ -65,7 +65,7 @@ function extractStateFromProps(props: ITimePickerProps): ITimePickerState { } export interface ITimePickerProps extends DatePickers.ICommonProps { - isFooterVisble?: boolean; + isFooterVisible?: boolean; showSecond?: boolean; hourStep?: number; minuteStep?: number; @@ -90,7 +90,7 @@ export class TimePicker extends PureComponent< ...commonProps, placeholder: '', format: 'HH:mm:ss', - isFooterVisble: true, + isFooterVisible: true, hourStep: 1, minuteStep: 1, secondStep: 1, @@ -388,7 +388,7 @@ export class TimePicker extends PureComponent< <div className="time-picker-panel__content"> {this.renderPanelContent(i18n)} </div> - {this.props.isFooterVisble ? ( + {this.props.isFooterVisible ? ( <div className="time-picker-panel__footer"> <PanelFooter buttonText={confirmText || i18n.confirm} diff --git a/packages/zent/src/datetimepicker/TimeRangePicker.tsx b/packages/zent/src/datetimepicker/TimeRangePicker.tsx index 6a20dee156..de79f0cde8 100644 --- a/packages/zent/src/datetimepicker/TimeRangePicker.tsx +++ b/packages/zent/src/datetimepicker/TimeRangePicker.tsx @@ -30,7 +30,7 @@ export interface ITimeRangePickerProps 'placeholder' > { placeholder: [string?, string?]; - isFooterVisble?: boolean; + isFooterVisible?: boolean; showSecond?: boolean; hourStep?: number; minuteStep?: number; @@ -42,7 +42,7 @@ export class TimeRangePicker extends PureComponent<ITimeRangePickerProps> { static defaultProps = { ...commonProps, format: 'HH:mm:ss', - isFooterVisble: true, + isFooterVisible: true, hourStep: 1, minuteStep: 1, secondStep: 1, diff --git a/packages/zent/src/datetimepicker/YearPicker.tsx b/packages/zent/src/datetimepicker/YearPicker.tsx index 9393271e4e..26d97d60e9 100644 --- a/packages/zent/src/datetimepicker/YearPicker.tsx +++ b/packages/zent/src/datetimepicker/YearPicker.tsx @@ -23,7 +23,7 @@ function getYear(val) { export interface IYearPickerProps extends DatePickers.ICommonProps { needConfirm?: boolean; - isFooterVisble?: boolean; + isFooterVisible?: boolean; onBeforeClear?: () => boolean; } @@ -97,13 +97,13 @@ export class YearPicker extends PureComponent<IYearPickerProps, any> { onSelectYear = val => { if (this.isDisabled(val)) return; const { - props: { isFooterVisble, onChange }, + props: { isFooterVisible, onChange }, state: { actived }, } = this; const acp = new Date(actived); acp.setFullYear(val); - if (!isFooterVisble) { + if (!isFooterVisible) { this.setState({ value: acp, selected: acp, diff --git a/packages/zent/src/datetimepicker/constants/index.ts b/packages/zent/src/datetimepicker/constants/index.ts index 502d407b89..89010c3d92 100644 --- a/packages/zent/src/datetimepicker/constants/index.ts +++ b/packages/zent/src/datetimepicker/constants/index.ts @@ -35,7 +35,7 @@ export const commonProps = { popPosition: 'left', openPanel: false, onChange: noop, - isFooterVisble: false, + isFooterVisible: false, canClear: true, autoComplete: 'off', };