Fix typo in datetimepicker (#1277)

youzan · Dec 5, 2019 · 2c587c6 · 2c587c6
1 parent 49bf67f
commit 2c587c6
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 43 deletions.
diff --git a/packages/zent/__tests__/datetimepicker/DatePicker.js b/packages/zent/__tests__/datetimepicker/DatePicker.js
@@ -33,15 +33,15 @@ 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);
     wrapper.find('.picker-input').simulate('click');
   });
 
   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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -35,7 +35,7 @@ export const commonProps = {
   popPosition: 'left',
   openPanel: false,
   onChange: noop,
-  isFooterVisble: false,
+  isFooterVisible: false,
   canClear: true,
   autoComplete: 'off',
 };