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',
};