@wangxinowo/vue-datepicker-next 1.0.0

package/src/components/date-picker/WeekPicker.jsx

@@ -0,0 +1,235 @@
+import * as moment from 'moment';
+import Calendar from '../vc-calendar';
+import VcDatePicker from '../vc-calendar/src/Picker';
+import Icon from '../icon';
+import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
+import {
+  hasProp,
+  getOptionProps,
+  initDefaultProps,
+  getComponentFromProp,
+  getListeners,
+} from '../_util/props-util';
+import BaseMixin from '../_util/BaseMixin';
+import { WeekPickerProps } from './interface';
+import interopDefault from '../_util/interopDefault';
+import InputIcon from './InputIcon';
+
+function formatValue(value, format) {
+  return (value && value.format(format)) || '';
+}
+function noop() {}
+
+export default {
+  // static defaultProps = {
+  //   format: 'YYYY-wo',
+  //   allowClear: true,
+  // };
+
+  // private input: any;
+  name: 'AWeekPicker',
+  mixins: [BaseMixin],
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+  props: initDefaultProps(WeekPickerProps(), {
+    format: 'gggg-wo',
+    allowClear: true,
+  }),
+  inject: {
+    configProvider: { default: () => ConfigConsumerProps },
+  },
+  data() {
+    const value = this.value || this.defaultValue;
+    if (value && !interopDefault(moment).isMoment(value)) {
+      throw new Error(
+        'The value/defaultValue of WeekPicker or MonthPicker must be ' + 'a moment object',
+      );
+    }
+    return {
+      _value: value,
+      _open: this.open,
+    };
+  },
+  watch: {
+    value(val) {
+      const state = { _value: val };
+      this.setState(state);
+      this.prevState = { ...this.$data, ...state };
+    },
+    open(val) {
+      const state = { _open: val };
+      this.setState(state);
+      this.prevState = { ...this.$data, ...state };
+    },
+    _open(val, oldVal) {
+      this.$nextTick(() => {
+        if (!hasProp(this, 'open') && oldVal && !val) {
+          this.focus();
+        }
+      });
+    },
+  },
+  mounted() {
+    this.prevState = { ...this.$data };
+  },
+  updated() {
+    this.$nextTick(() => {
+      if (!hasProp(this, 'open') && this.prevState._open && !this._open) {
+        this.focus();
+      }
+    });
+  },
+  methods: {
+    weekDateRender(current) {
+      const selectedValue = this.$data._value;
+      const { _prefixCls: prefixCls, $scopedSlots } = this;
+      const dateRender = this.dateRender || $scopedSlots.dateRender;
+      const dateNode = dateRender ? dateRender(current) : current.date();
+      if (
+        selectedValue &&
+        current.year() === selectedValue.year() &&
+        current.week() === selectedValue.week()
+      ) {
+        return (
+          <div class={`${prefixCls}-selected-day`}>
+            <div class={`${prefixCls}-date`}>{dateNode}</div>
+          </div>
+        );
+      }
+      return <div class={`${prefixCls}-date`}>{dateNode}</div>;
+    },
+    handleChange(value) {
+      if (!hasProp(this, 'value')) {
+        this.setState({ _value: value });
+      }
+      this.$emit('change', value, formatValue(value, this.format));
+    },
+    handleOpenChange(open) {
+      if (!hasProp(this, 'open')) {
+        this.setState({ _open: open });
+      }
+      this.$emit('openChange', open);
+    },
+    clearSelection(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      this.handleChange(null);
+    },
+    focus() {
+      this.$refs.input.focus();
+    },
+
+    blur() {
+      this.$refs.input.blur();
+    },
+    renderFooter(...args) {
+      const { _prefixCls: prefixCls, $scopedSlots } = this;
+      const renderExtraFooter = this.renderExtraFooter || $scopedSlots.renderExtraFooter;
+      return renderExtraFooter ? (
+        <div class={`${prefixCls}-footer-extra`}>{renderExtraFooter(...args)}</div>
+      ) : null;
+    },
+  },
+
+  render() {
+    const props = getOptionProps(this);
+    let suffixIcon = getComponentFromProp(this, 'suffixIcon');
+    suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
+    const {
+      prefixCls: customizePrefixCls,
+      disabled,
+      pickerClass,
+      popupStyle,
+      pickerInputClass,
+      format,
+      allowClear,
+      locale,
+      localeCode,
+      disabledDate,
+      defaultPickerValue,
+      $data,
+      $scopedSlots,
+    } = this;
+    const listeners = getListeners(this);
+    const getPrefixCls = this.configProvider.getPrefixCls;
+    const prefixCls = getPrefixCls('calendar', customizePrefixCls);
+    this._prefixCls = prefixCls;
+
+    const { _value: pickerValue, _open: open } = $data;
+    const { focus = noop, blur = noop } = listeners;
+
+    if (pickerValue && localeCode) {
+      pickerValue.locale(localeCode);
+    }
+
+    const placeholder = hasProp(this, 'placeholder') ? this.placeholder : locale.lang.placeholder;
+    const weekDateRender = this.dateRender || $scopedSlots.dateRender || this.weekDateRender;
+    const calendar = (
+      <Calendar
+        showWeekNumber
+        dateRender={weekDateRender}
+        prefixCls={prefixCls}
+        format={format}
+        locale={locale.lang}
+        showDateInput={false}
+        showToday={false}
+        disabledDate={disabledDate}
+        renderFooter={this.renderFooter}
+        defaultValue={defaultPickerValue}
+      />
+    );
+    const clearIcon =
+      !disabled && allowClear && $data._value ? (
+        <Icon
+          type="close-circle"
+          class={`${prefixCls}-picker-clear`}
+          onClick={this.clearSelection}
+          theme="filled"
+        />
+      ) : null;
+
+    const inputIcon = <InputIcon suffixIcon={suffixIcon} prefixCls={prefixCls} />;
+
+    const input = ({ value }) => {
+      return (
+        <span style={{ display: 'inline-block', width: '100%' }}>
+          <input
+            ref="input"
+            disabled={disabled}
+            readOnly
+            value={(value && value.format(format)) || ''}
+            placeholder={placeholder}
+            class={pickerInputClass}
+            onFocus={focus}
+            onBlur={blur}
+          />
+          {clearIcon}
+          {inputIcon}
+        </span>
+      );
+    };
+    const vcDatePickerProps = {
+      props: {
+        ...props,
+        calendar,
+        prefixCls: `${prefixCls}-picker-container`,
+        value: pickerValue,
+        open,
+      },
+      on: {
+        ...listeners,
+        change: this.handleChange,
+        openChange: this.handleOpenChange,
+      },
+      style: popupStyle,
+      scopedSlots: { default: input, ...$scopedSlots },
+    };
+    return (
+      <span class={pickerClass}>
+        <VcDatePicker {...vcDatePickerProps} />
+      </span>
+    );
+  },
+};

package/src/components/date-picker/__tests__/DatePicker.test.js

@@ -0,0 +1,189 @@
+import { mount } from '@vue/test-utils';
+import { asyncExpect } from '@/tests/utils';
+import moment from 'moment';
+import MockDate from 'mockdate';
+import DatePicker from '..';
+import {
+  selectDateFromBody,
+  openPanel,
+  clearInput,
+  nextYear,
+  nextMonth,
+  hasSelected,
+  $$,
+} from './utils';
+import focusTest from '../../../tests/shared/focusTest';
+
+describe('DatePicker', () => {
+  focusTest(DatePicker);
+
+  beforeEach(() => {
+    document.body.outerHTML = '';
+    MockDate.set(moment('2016-11-22'));
+  });
+
+  afterEach(() => {
+    MockDate.reset();
+  });
+
+  it('prop locale should works', async () => {
+    const locale = {
+      lang: {
+        placeholder: 'Избери дата',
+        rangePlaceholder: ['Начална дата', 'Крайна дата'],
+        today: 'Днес',
+        now: 'Сега',
+        backToToday: 'Към днес',
+        ok: 'Добре',
+        clear: 'Изчистване',
+        month: 'Месец',
+        year: 'Година',
+        timeSelect: 'Избор на час',
+        dateSelect: 'Избор на дата',
+        monthSelect: 'Избор на месец',
+        yearSelect: 'Избор на година',
+        decadeSelect: 'Десетилетие',
+        previousMonth: 'Предишен месец (PageUp)',
+        nextMonth: 'Следващ месец (PageDown)',
+        previousYear: 'Последна година (Control + left)',
+        nextYear: 'Следваща година (Control + right)',
+        previousDecade: 'Предишно десетилетие',
+        nextDecade: 'Следващо десетилетие',
+        previousCentury: 'Последен век',
+        nextCentury: 'Следващ век',
+        yearFormat: 'YYYY',
+        dateFormat: 'D M YYYY',
+        dayFormat: 'D',
+        dateTimeFormat: 'D M YYYY HH:mm:ss',
+        monthBeforeYear: true,
+      },
+      timePickerLocale: {
+        placeholder: 'Избор на час',
+      },
+    };
+    const birthday = moment('2000-01-01', 'YYYY-MM-DD');
+    const wrapper = mount({
+      render() {
+        return <DatePicker open locale={locale} value={birthday} />;
+      },
+    });
+    await asyncExpect(() => {
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+  });
+
+  // Fix https://github.com/ant-design/ant-design/issues/8885
+  it('control value after panel closed', async () => {
+    const Test = {
+      data() {
+        return {
+          cleared: false,
+          value: moment(),
+        };
+      },
+      methods: {
+        onChange(value) {
+          let cleared = this.cleared;
+
+          if (cleared) {
+            value = moment(moment(value).format('YYYY-MM-DD 12:12:12'));
+            cleared = false;
+          }
+
+          if (!value) {
+            cleared = true;
+          }
+          this.value = value;
+          this.cleared = cleared;
+        },
+      },
+      render() {
+        return (
+          <DatePicker
+            showTime
+            value={this.value}
+            format="YYYY-MM-DD HH:mm:ss"
+            onChange={this.onChange}
+          />
+        );
+      },
+    };
+
+    const wrapper = mount(Test, { sync: false, attachToDocument: true });
+    await asyncExpect(() => {
+      // clear input
+      clearInput(wrapper);
+    });
+    await asyncExpect(() => {
+      openPanel(wrapper);
+    });
+    await asyncExpect(() => {
+      // selectDateFromBody时(点击其它元素)没有触发input blur事件，强制执行blur
+      $$('.ant-calendar-input')[0].blur();
+    }, 0);
+    await asyncExpect(() => {
+      selectDateFromBody(moment('2016-11-13'));
+    }, 0);
+    await asyncExpect(() => {
+      expect($$('.ant-calendar-input')[0].value).toBe('2016-11-13 12:12:12');
+    });
+    await asyncExpect(() => {
+      selectDateFromBody(moment('2016-11-14'));
+    });
+    await asyncExpect(() => {
+      expect($$('.ant-calendar-input')[0].value).toBe('2016-11-14 12:12:12');
+    });
+  });
+
+  it('triggers onChange only when date was selected', async () => {
+    const handleChange = jest.fn();
+    const wrapper = mount(
+      {
+        render() {
+          return <DatePicker onChange={handleChange} />;
+        },
+      },
+      { sync: false, attachToDocument: true },
+    );
+    await asyncExpect(() => {
+      openPanel(wrapper);
+    }, 0);
+    await asyncExpect(() => {
+      nextYear();
+    }, 1000);
+    await asyncExpect(() => {
+      expect(handleChange).not.toBeCalled();
+    }, 0);
+    await asyncExpect(() => {
+      nextMonth();
+    }, 0);
+    await asyncExpect(() => {
+      expect(handleChange).not.toBeCalled();
+    });
+    await asyncExpect(() => {
+      selectDateFromBody(moment('2017-12-22'));
+    }, 1000);
+    await asyncExpect(() => {
+      expect(handleChange).toBeCalled();
+    }, 0);
+  });
+
+  it('clear input', async () => {
+    const wrapper = mount(DatePicker, { sync: false, attachToDocument: true });
+    await asyncExpect(() => {
+      openPanel(wrapper);
+    }, 0);
+    await asyncExpect(() => {
+      selectDateFromBody(moment('2016-11-23'));
+    }, 100);
+    await asyncExpect(() => {
+      clearInput(wrapper);
+    }, 1000);
+    await asyncExpect(() => {
+      openPanel(wrapper);
+    }, 0);
+    await asyncExpect(() => {
+      expect(hasSelected(wrapper, moment('2016-11-22'))).toBe(true);
+    }, 0);
+  });
+});

package/src/components/date-picker/__tests__/MonthPicker.test.js

@@ -0,0 +1,29 @@
+import { mount } from '@vue/test-utils';
+import { asyncExpect } from '@/tests/utils';
+import moment from 'moment';
+import DatePicker from '..';
+import focusTest from '../../../tests/shared/focusTest';
+import { openPanel, $$ } from './utils';
+
+const { MonthPicker } = DatePicker;
+
+describe('MonthPicker', () => {
+  focusTest(MonthPicker);
+  it('reset select item when popup close', async () => {
+    const wrapper = mount(MonthPicker, {
+      propsData: { value: moment('2018-07-01') },
+      sync: false,
+      attachToDocument: true,
+    });
+    await asyncExpect(() => {
+      openPanel(wrapper);
+    }, 0);
+    await asyncExpect(() => {
+      $$('.ant-calendar-month-panel-month')[0].click();
+      $$('.ant-calendar-month-panel-cell')[6]
+        .getAttribute('class')
+        .split(' ')
+        .includes('ant-calendar-month-panel-selected-cell');
+    }, 1000);
+  });
+});