@wangxinowo/vue-datepicker-next 1.0.0

package/src/components/time-picker/__tests__/index.test.js

@@ -0,0 +1,55 @@
+import { mount } from '@vue/test-utils';
+import VcTimePicker from '../../vc-time-picker/TimePicker';
+import TimePicker from '..';
+import moment from 'moment';
+import focusTest from '../../../tests/shared/focusTest';
+import mountTest from '../../../tests/shared/mountTest';
+
+describe('TimePicker', () => {
+  const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+  afterEach(() => {
+    errorSpy.mockReset();
+  });
+
+  afterAll(() => {
+    errorSpy.mockRestore();
+  });
+
+  focusTest(TimePicker);
+  mountTest(TimePicker);
+
+  it('renders addon correctly', () => {
+    const wrapper = mount({
+      render() {
+        return <TimePicker addon={() => <button type="button">Ok</button>} />;
+      },
+    });
+    const vcTimePicker = wrapper.find({ name: VcTimePicker.name });
+    const addonWrapper = mount({
+      render() {
+        return vcTimePicker.vm.addon();
+      },
+    });
+    expect(addonWrapper.html()).toMatchSnapshot();
+  });
+
+  it('allowEmpty deprecated', () => {
+    mount({
+      render() {
+        return <TimePicker allowEmpty />;
+      },
+    });
+    expect(errorSpy).toBeCalledWith(
+      'Warning: [antdv: TimePicker] `allowEmpty` is deprecated. Please use `allowClear` instead.',
+    );
+  });
+  it('not render clean icon when allowClear is false', () => {
+    const wrapper = mount({
+      render() {
+        return <TimePicker defaultValue={moment('2000-01-01 00:00:00')} allowClear={false} />;
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});

package/src/components/time-picker/index.jsx

@@ -0,0 +1,267 @@
+import omit from 'omit.js';
+import VcTimePicker from '../vc-time-picker';
+import LocaleReceiver from '../locale-provider/LocaleReceiver';
+import BaseMixin from '../_util/BaseMixin';
+import PropTypes from '../_util/vue-types';
+import warning from '../_util/warning';
+import Icon from '../icon';
+import enUS from './locale/en_US';
+import {
+  initDefaultProps,
+  hasProp,
+  getOptionProps,
+  getComponentFromProp,
+  isValidElement,
+  getListeners,
+} from '../_util/props-util';
+import { cloneElement } from '../_util/vnode';
+import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
+import Base from '../base';
+import {
+  checkValidate,
+  stringToMoment,
+  momentToString,
+  TimeOrTimesType,
+} from '../_util/moment-util';
+
+export function generateShowHourMinuteSecond(format) {
+  // Ref: http://momentjs.com/docs/#/parsing/string-format/
+  return {
+    showHour: format.indexOf('H') > -1 || format.indexOf('h') > -1 || format.indexOf('k') > -1,
+    showMinute: format.indexOf('m') > -1,
+    showSecond: format.indexOf('s') > -1,
+  };
+}
+
+export const TimePickerProps = () => ({
+  size: PropTypes.oneOf(['large', 'default', 'small']),
+  value: TimeOrTimesType,
+  defaultValue: TimeOrTimesType,
+  open: PropTypes.bool,
+  format: PropTypes.string,
+  disabled: PropTypes.bool,
+  placeholder: PropTypes.string,
+  prefixCls: PropTypes.string,
+  hideDisabledOptions: PropTypes.bool,
+  disabledHours: PropTypes.func,
+  disabledMinutes: PropTypes.func,
+  disabledSeconds: PropTypes.func,
+  getPopupContainer: PropTypes.func,
+  use12Hours: PropTypes.bool,
+  focusOnOpen: PropTypes.bool,
+  hourStep: PropTypes.number,
+  minuteStep: PropTypes.number,
+  secondStep: PropTypes.number,
+  allowEmpty: PropTypes.bool,
+  allowClear: PropTypes.bool,
+  inputReadOnly: PropTypes.bool,
+  clearText: PropTypes.string,
+  defaultOpenValue: PropTypes.object,
+  popupClassName: PropTypes.string,
+  popupStyle: PropTypes.object,
+  suffixIcon: PropTypes.any,
+  align: PropTypes.object,
+  placement: PropTypes.any,
+  transitionName: PropTypes.string,
+  autoFocus: PropTypes.bool,
+  addon: PropTypes.any,
+  clearIcon: PropTypes.any,
+  locale: PropTypes.object,
+  valueFormat: PropTypes.string,
+});
+
+const TimePicker = {
+  name: 'ATimePicker',
+  mixins: [BaseMixin],
+  props: initDefaultProps(TimePickerProps(), {
+    align: {
+      offset: [0, -2],
+    },
+    disabled: false,
+    disabledHours: undefined,
+    disabledMinutes: undefined,
+    disabledSeconds: undefined,
+    hideDisabledOptions: false,
+    placement: 'bottomLeft',
+    transitionName: 'slide-up',
+    focusOnOpen: true,
+    allowClear: true,
+  }),
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+  provide() {
+    return {
+      savePopupRef: this.savePopupRef,
+    };
+  },
+  inject: {
+    configProvider: { default: () => ConfigConsumerProps },
+  },
+  data() {
+    const { value, defaultValue, valueFormat } = this;
+
+    checkValidate('TimePicker', defaultValue, 'defaultValue', valueFormat);
+    checkValidate('TimePicker', value, 'value', valueFormat);
+    warning(
+      !hasProp(this, 'allowEmpty'),
+      'TimePicker',
+      '`allowEmpty` is deprecated. Please use `allowClear` instead.',
+    );
+    return {
+      sValue: stringToMoment(value || defaultValue, valueFormat),
+    };
+  },
+  watch: {
+    value(val) {
+      checkValidate('TimePicker', val, 'value', this.valueFormat);
+      this.setState({ sValue: stringToMoment(val, this.valueFormat) });
+    },
+  },
+  methods: {
+    getDefaultFormat() {
+      const { format, use12Hours } = this;
+      if (format) {
+        return format;
+      } else if (use12Hours) {
+        return 'h:mm:ss a';
+      }
+      return 'HH:mm:ss';
+    },
+
+    getAllowClear() {
+      const { allowClear, allowEmpty } = this.$props;
+      if (hasProp(this, 'allowClear')) {
+        return allowClear;
+      }
+      return allowEmpty;
+    },
+    getDefaultLocale() {
+      const defaultLocale = {
+        ...enUS,
+        ...this.$props.locale,
+      };
+      return defaultLocale;
+    },
+    savePopupRef(ref) {
+      this.popupRef = ref;
+    },
+    handleChange(value) {
+      if (!hasProp(this, 'value')) {
+        this.setState({ sValue: value });
+      }
+      const { format = 'HH:mm:ss' } = this;
+      this.$emit(
+        'change',
+        this.valueFormat ? momentToString(value, this.valueFormat) : value,
+        (value && value.format(format)) || '',
+      );
+    },
+
+    handleOpenClose({ open }) {
+      this.$emit('openChange', open);
+      this.$emit('update:open', open);
+    },
+
+    focus() {
+      this.$refs.timePicker.focus();
+    },
+
+    blur() {
+      this.$refs.timePicker.blur();
+    },
+
+    renderInputIcon(prefixCls) {
+      let suffixIcon = getComponentFromProp(this, 'suffixIcon');
+      suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
+      const clockIcon = (suffixIcon &&
+        isValidElement(suffixIcon) &&
+        cloneElement(suffixIcon, {
+          class: `${prefixCls}-clock-icon`,
+        })) || <Icon type="clock-circle" class={`${prefixCls}-clock-icon`} />;
+
+      return <span class={`${prefixCls}-icon`}>{clockIcon}</span>;
+    },
+
+    renderClearIcon(prefixCls) {
+      const clearIcon = getComponentFromProp(this, 'clearIcon');
+      const clearIconPrefixCls = `${prefixCls}-clear`;
+
+      if (clearIcon && isValidElement(clearIcon)) {
+        return cloneElement(clearIcon, {
+          class: clearIconPrefixCls,
+        });
+      }
+
+      return <Icon type="close-circle" class={clearIconPrefixCls} theme="filled" />;
+    },
+
+    renderTimePicker(locale) {
+      let props = getOptionProps(this);
+      props = omit(props, ['defaultValue', 'suffixIcon', 'allowEmpty', 'allowClear']);
+
+      const { prefixCls: customizePrefixCls, getPopupContainer, placeholder, size } = props;
+      const getPrefixCls = this.configProvider.getPrefixCls;
+      const prefixCls = getPrefixCls('time-picker', customizePrefixCls);
+
+      const format = this.getDefaultFormat();
+      const pickerClassName = {
+        [`${prefixCls}-${size}`]: !!size,
+      };
+      const tempAddon = getComponentFromProp(this, 'addon', {}, false);
+      const pickerAddon = panel => {
+        return tempAddon ? (
+          <div class={`${prefixCls}-panel-addon`}>
+            {typeof tempAddon === 'function' ? tempAddon(panel) : tempAddon}
+          </div>
+        ) : null;
+      };
+      const inputIcon = this.renderInputIcon(prefixCls);
+      const clearIcon = this.renderClearIcon(prefixCls);
+      const { getPopupContainer: getContextPopupContainer } = this.configProvider;
+      const timeProps = {
+        props: {
+          ...generateShowHourMinuteSecond(format),
+          ...props,
+          allowEmpty: this.getAllowClear(),
+          prefixCls,
+          getPopupContainer: getPopupContainer || getContextPopupContainer,
+          format,
+          value: this.sValue,
+          placeholder: placeholder === undefined ? locale.placeholder : placeholder,
+          addon: pickerAddon,
+          inputIcon,
+          clearIcon,
+        },
+        class: pickerClassName,
+        ref: 'timePicker',
+        on: {
+          ...getListeners(this),
+          change: this.handleChange,
+          open: this.handleOpenClose,
+          close: this.handleOpenClose,
+        },
+      };
+      return <VcTimePicker {...timeProps} />;
+    },
+  },
+
+  render() {
+    return (
+      <LocaleReceiver
+        componentName="TimePicker"
+        defaultLocale={this.getDefaultLocale()}
+        scopedSlots={{ default: this.renderTimePicker }}
+      />
+    );
+  },
+};
+
+/* istanbul ignore next */
+TimePicker.install = function(Vue) {
+  Vue.use(Base);
+  Vue.component(TimePicker.name, TimePicker);
+};
+
+export default TimePicker;

package/src/components/time-picker/locale/ar_EG.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'اختيار الوقت',
+};
+
+export default locale;

package/src/components/time-picker/locale/bg_BG.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Избор на час',
+};
+
+export default locale;

package/src/components/time-picker/locale/ca_ES.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Seleccionar hora',
+};
+
+export default locale;

package/src/components/time-picker/locale/cs_CZ.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Vybrat čas',
+};
+
+export default locale;

package/src/components/time-picker/locale/da_DK.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Vælg tid',
+};
+
+export default locale;

package/src/components/time-picker/locale/de_DE.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Zeit auswählen',
+};
+
+export default locale;

package/src/components/time-picker/locale/el_GR.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Επιλέξτε ώρα',
+};
+
+export default locale;

package/src/components/time-picker/locale/en_GB.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Select time',
+};
+
+export default locale;

package/src/components/time-picker/locale/en_US.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Select time',
+};
+
+export default locale;

package/src/components/time-picker/locale/es_ES.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Seleccionar hora',
+};
+
+export default locale;

package/src/components/time-picker/locale/et_EE.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Vali aeg',
+};
+
+export default locale;

package/src/components/time-picker/locale/fa_IR.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'انتخاب زمان',
+};
+
+export default locale;

package/src/components/time-picker/locale/fi_FI.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Valitse aika',
+};
+
+export default locale;

package/src/components/time-picker/locale/fr_BE.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: "Sélectionner l'heure",
+};
+
+export default locale;

package/src/components/time-picker/locale/fr_FR.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: "Sélectionner l'heure",
+};
+
+export default locale;

package/src/components/time-picker/locale/ga_IE.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Roghnaigh am',
+};
+
+export default locale;

package/src/components/time-picker/locale/he_IL.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'בחר שעה',
+};
+
+export default locale;

package/src/components/time-picker/locale/hi_IN.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'समय का चयन करें',
+};
+
+export default locale;

package/src/components/time-picker/locale/hr_HR.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Odaberite vrijeme',
+};
+
+export default locale;

package/src/components/time-picker/locale/hu_HU.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Válasszon időt',
+};
+
+export default locale;

package/src/components/time-picker/locale/id_ID.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Pilih waktu',
+};
+
+export default locale;

package/src/components/time-picker/locale/is_IS.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Velja tíma',
+};
+
+export default locale;

package/src/components/time-picker/locale/it_IT.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: "Selezionare l'orario",
+};
+
+export default locale;

package/src/components/time-picker/locale/ja_JP.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: '時刻を選択',
+};
+
+export default locale;

package/src/components/time-picker/locale/kn_IN.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'ಸಮಯ ಆಯ್ಕೆಮಾಡಿ',
+};
+
+export default locale;

package/src/components/time-picker/locale/ko_KR.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: '날짜 선택',
+};
+
+export default locale;

package/src/components/time-picker/locale/ku_IQ.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Demê hilbijêre',
+};
+
+export default locale;

package/src/components/time-picker/locale/lv_LV.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Izvēlieties laiku',
+};
+
+export default locale;

package/src/components/time-picker/locale/mk_MK.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Избери време',
+};
+
+export default locale;

package/src/components/time-picker/locale/mn_MN.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Цаг сонгох',
+};
+
+export default locale;

package/src/components/time-picker/locale/ms_MY.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Sila pilih masa',
+};
+
+export default locale;

package/src/components/time-picker/locale/nb_NO.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Velg tid',
+};
+
+export default locale;

package/src/components/time-picker/locale/nl_BE.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Selecteer tijd',
+};
+
+export default locale;

package/src/components/time-picker/locale/nl_NL.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Selecteer tijd',
+};
+
+export default locale;

package/src/components/time-picker/locale/pl_PL.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Wybierz godzinę',
+};
+
+export default locale;

package/src/components/time-picker/locale/pt_BR.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Hora',
+};
+
+export default locale;

package/src/components/time-picker/locale/pt_PT.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Hora',
+};
+
+export default locale;

package/src/components/time-picker/locale/ro_RO.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Selectează ora',
+};
+
+export default locale;

package/src/components/time-picker/locale/ru_RU.js

@@ -0,0 +1,8 @@
+/**
+ * Created by Andrey Gayvoronsky on 13/04/16.
+ */
+const locale = {
+  placeholder: 'Выберите время',
+};
+
+export default locale;

package/src/components/time-picker/locale/sk_SK.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Vybrať čas',
+};
+
+export default locale;

package/src/components/time-picker/locale/sl_SI.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Izberite čas',
+};
+
+export default locale;

package/src/components/time-picker/locale/sr_RS.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Izaberite vreme',
+};
+
+export default locale;

package/src/components/time-picker/locale/sv_SE.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Välj tid',
+};
+
+export default locale;

package/src/components/time-picker/locale/ta_IN.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'நேரத்தைத் தேர்ந்தெடுக்கவும்',
+};
+
+export default locale;

package/src/components/time-picker/locale/th_TH.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'เลือกเวลา',
+};
+
+export default locale;

package/src/components/time-picker/locale/tr_TR.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Zaman Seç',
+};
+
+export default locale;

package/src/components/time-picker/locale/uk_UA.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Оберіть час',
+};
+
+export default locale;

package/src/components/time-picker/locale/vi_VN.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Chọn thời gian',
+};
+
+export default locale;

package/src/components/time-picker/locale/zh_CN.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: '请选择时间',
+};
+
+export default locale;