@wangxinowo/vue-datepicker-next 1.0.0

package/src/components/vc-time-picker/Panel.jsx

@@ -0,0 +1,225 @@
+import moment from 'moment';
+import PropTypes from '../_util/vue-types';
+import BaseMixin from '../_util/BaseMixin';
+import Header from './Header';
+import Combobox from './Combobox';
+import { getComponentFromProp, getListeners } from '../_util/props-util';
+
+function noop() {}
+
+function generateOptions(length, disabledOptions, hideDisabledOptions, step = 1) {
+  const arr = [];
+  for (let value = 0; value < length; value += step) {
+    if (!disabledOptions || disabledOptions.indexOf(value) < 0 || !hideDisabledOptions) {
+      arr.push(value);
+    }
+  }
+  return arr;
+}
+
+function toNearestValidTime(time, hourOptions, minuteOptions, secondOptions) {
+  const hour = hourOptions
+    .slice()
+    .sort((a, b) => Math.abs(time.hour() - a) - Math.abs(time.hour() - b))[0];
+  const minute = minuteOptions
+    .slice()
+    .sort((a, b) => Math.abs(time.minute() - a) - Math.abs(time.minute() - b))[0];
+  const second = secondOptions
+    .slice()
+    .sort((a, b) => Math.abs(time.second() - a) - Math.abs(time.second() - b))[0];
+  return moment(`${hour}:${minute}:${second}`, 'HH:mm:ss');
+}
+
+const Panel = {
+  mixins: [BaseMixin],
+  props: {
+    clearText: PropTypes.string,
+    prefixCls: PropTypes.string.def('rc-time-picker-panel'),
+    defaultOpenValue: {
+      type: Object,
+      default: () => {
+        return moment();
+      },
+    },
+    value: PropTypes.any,
+    defaultValue: PropTypes.any,
+    placeholder: PropTypes.string,
+    format: PropTypes.string,
+    inputReadOnly: PropTypes.bool.def(false),
+    disabledHours: PropTypes.func.def(noop),
+    disabledMinutes: PropTypes.func.def(noop),
+    disabledSeconds: PropTypes.func.def(noop),
+    hideDisabledOptions: PropTypes.bool,
+    // onChange: PropTypes.func,
+    // onEsc: PropTypes.func,
+    allowEmpty: PropTypes.bool,
+    showHour: PropTypes.bool,
+    showMinute: PropTypes.bool,
+    showSecond: PropTypes.bool,
+    // onClear: PropTypes.func,
+    use12Hours: PropTypes.bool.def(false),
+    hourStep: PropTypes.number,
+    minuteStep: PropTypes.number,
+    secondStep: PropTypes.number,
+    addon: PropTypes.func.def(noop),
+    focusOnOpen: PropTypes.bool,
+    // onKeydown: PropTypes.func,
+    clearIcon: PropTypes.any,
+  },
+  data() {
+    return {
+      sValue: this.value,
+      selectionRange: [],
+      currentSelectPanel: '',
+    };
+  },
+  watch: {
+    value(val) {
+      this.setState({
+        sValue: val,
+      });
+    },
+  },
+
+  methods: {
+    onChange(newValue) {
+      this.setState({ sValue: newValue });
+      this.__emit('change', newValue);
+    },
+
+    onAmPmChange(ampm) {
+      this.__emit('amPmChange', ampm);
+    },
+
+    onCurrentSelectPanelChange(currentSelectPanel) {
+      this.setState({ currentSelectPanel });
+    },
+
+    // https://github.com/ant-design/ant-design/issues/5829
+    close() {
+      this.__emit('esc');
+    },
+    onEsc(e) {
+      this.__emit('esc', e);
+    },
+    disabledHours2() {
+      const { use12Hours, disabledHours } = this;
+      let disabledOptions = disabledHours();
+      if (use12Hours && Array.isArray(disabledOptions)) {
+        if (this.isAM()) {
+          disabledOptions = disabledOptions.filter(h => h < 12).map(h => (h === 0 ? 12 : h));
+        } else {
+          disabledOptions = disabledOptions.map(h => (h === 12 ? 12 : h - 12));
+        }
+      }
+      return disabledOptions;
+    },
+
+    isAM() {
+      const value = this.sValue || this.defaultOpenValue;
+      return value.hour() >= 0 && value.hour() < 12;
+    },
+  },
+
+  render() {
+    const {
+      prefixCls,
+      placeholder,
+      disabledMinutes,
+      addon,
+      disabledSeconds,
+      hideDisabledOptions,
+      showHour,
+      showMinute,
+      showSecond,
+      format,
+      defaultOpenValue,
+      clearText,
+      use12Hours,
+      focusOnOpen,
+      hourStep,
+      minuteStep,
+      secondStep,
+      inputReadOnly,
+      sValue,
+      currentSelectPanel,
+    } = this;
+    const clearIcon = getComponentFromProp(this, 'clearIcon');
+    const { esc = noop, keydown = noop } = getListeners(this);
+
+    const disabledHourOptions = this.disabledHours2();
+    const disabledMinuteOptions = disabledMinutes(sValue ? sValue.hour() : null);
+    const disabledSecondOptions = disabledSeconds(
+      sValue ? sValue.hour() : null,
+      sValue ? sValue.minute() : null,
+    );
+    const hourOptions = generateOptions(24, disabledHourOptions, hideDisabledOptions, hourStep);
+    const minuteOptions = generateOptions(
+      60,
+      disabledMinuteOptions,
+      hideDisabledOptions,
+      minuteStep,
+    );
+    const secondOptions = generateOptions(
+      60,
+      disabledSecondOptions,
+      hideDisabledOptions,
+      secondStep,
+    );
+    const validDefaultOpenValue = toNearestValidTime(
+      defaultOpenValue,
+      hourOptions,
+      minuteOptions,
+      secondOptions,
+    );
+    return (
+      <div class={`${prefixCls}-inner`}>
+        <Header
+          clearText={clearText}
+          prefixCls={prefixCls}
+          defaultOpenValue={validDefaultOpenValue}
+          value={sValue}
+          currentSelectPanel={currentSelectPanel}
+          onEsc={esc}
+          format={format}
+          placeholder={placeholder}
+          hourOptions={hourOptions}
+          minuteOptions={minuteOptions}
+          secondOptions={secondOptions}
+          disabledHours={this.disabledHours2}
+          disabledMinutes={disabledMinutes}
+          disabledSeconds={disabledSeconds}
+          onChange={this.onChange}
+          focusOnOpen={focusOnOpen}
+          onKeydown={keydown}
+          inputReadOnly={inputReadOnly}
+          clearIcon={clearIcon}
+        />
+        <Combobox
+          prefixCls={prefixCls}
+          value={sValue}
+          defaultOpenValue={validDefaultOpenValue}
+          format={format}
+          onChange={this.onChange}
+          onAmPmChange={this.onAmPmChange}
+          showHour={showHour}
+          showMinute={showMinute}
+          showSecond={showSecond}
+          hourOptions={hourOptions}
+          minuteOptions={minuteOptions}
+          secondOptions={secondOptions}
+          disabledHours={this.disabledHours2}
+          disabledMinutes={disabledMinutes}
+          disabledSeconds={disabledSeconds}
+          onCurrentSelectPanelChange={this.onCurrentSelectPanelChange}
+          use12Hours={use12Hours}
+          onEsc={this.onEsc}
+          isAM={this.isAM()}
+        />
+        {addon(this)}
+      </div>
+    );
+  },
+};
+
+export default Panel;

package/src/components/vc-time-picker/Select.jsx

@@ -0,0 +1,140 @@
+import PropTypes from '../_util/vue-types';
+import BaseMixin from '../_util/BaseMixin';
+import classnames from 'classnames';
+import raf from 'raf';
+
+function noop() {}
+const scrollTo = (element, to, duration) => {
+  // jump to target if duration zero
+  if (duration <= 0) {
+    raf(() => {
+      element.scrollTop = to;
+    });
+    return;
+  }
+  const difference = to - element.scrollTop;
+  const perTick = (difference / duration) * 10;
+
+  raf(() => {
+    element.scrollTop += perTick;
+    if (element.scrollTop === to) return;
+    scrollTo(element, to, duration - 10);
+  });
+};
+
+const Select = {
+  mixins: [BaseMixin],
+  props: {
+    prefixCls: PropTypes.string,
+    options: PropTypes.array,
+    selectedIndex: PropTypes.number,
+    type: PropTypes.string,
+    // onSelect: PropTypes.func,
+    // onMouseEnter: PropTypes.func,
+  },
+  data() {
+    return {
+      active: false,
+    };
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      // jump to selected option
+      this.scrollToSelected(0);
+    });
+  },
+  watch: {
+    selectedIndex() {
+      this.$nextTick(() => {
+        // smooth scroll to selected option
+        this.scrollToSelected(120);
+      });
+    },
+  },
+  methods: {
+    onSelect(value) {
+      const { type } = this;
+      this.__emit('select', type, value);
+    },
+    onEsc(e) {
+      this.__emit('esc', e);
+    },
+    getOptions() {
+      const { options, selectedIndex, prefixCls } = this;
+      return options.map((item, index) => {
+        const cls = classnames({
+          [`${prefixCls}-select-option-selected`]: selectedIndex === index,
+          [`${prefixCls}-select-option-disabled`]: item.disabled,
+        });
+        const onClick = item.disabled
+          ? noop
+          : () => {
+              this.onSelect(item.value);
+            };
+        const onKeyDown = e => {
+          if (e.keyCode === 13) onClick();
+          else if (e.keyCode === 27) this.onEsc();
+        };
+        return (
+          <li
+            role="button"
+            onClick={onClick}
+            class={cls}
+            key={index}
+            disabled={item.disabled}
+            tabIndex="0"
+            onKeydown={onKeyDown}
+          >
+            {item.value}
+          </li>
+        );
+      });
+    },
+
+    handleMouseEnter(e) {
+      this.setState({ active: true });
+      this.__emit('mouseenter', e);
+    },
+
+    handleMouseLeave() {
+      this.setState({ active: false });
+    },
+
+    scrollToSelected(duration) {
+      // move to selected item
+      const select = this.$el;
+      const list = this.$refs.list;
+      if (!list) {
+        return;
+      }
+      let index = this.selectedIndex;
+      if (index < 0) {
+        index = 0;
+      }
+      const topOption = list.children[index];
+      const to = topOption.offsetTop;
+      scrollTo(select, to, duration);
+    },
+  },
+
+  render() {
+    const { prefixCls, options, active } = this;
+    if (options.length === 0) {
+      return null;
+    }
+
+    const cls = {
+      [`${prefixCls}-select`]: 1,
+      [`${prefixCls}-select-active`]: active,
+    };
+
+    return (
+      <div class={cls} onMouseenter={this.handleMouseEnter} onMouseleave={this.handleMouseLeave}>
+        <ul ref="list">{this.getOptions()}</ul>
+      </div>
+    );
+  },
+};
+
+export default Select;