@wangxinowo/vue-datepicker-next 1.0.0

package/src/components/vc-select/util.js

@@ -0,0 +1,223 @@
+import {
+  getPropsData,
+  getSlotOptions,
+  getKey,
+  getAttrs,
+  getComponentFromProp,
+} from '../_util/props-util';
+import { cloneVNodes } from '../_util/vnode';
+
+export function toTitle(title) {
+  if (typeof title === 'string') {
+    return title.trim();
+  }
+  return '';
+}
+export function getValuePropValue(child) {
+  if (!child) {
+    return null;
+  }
+  const props = getPropsData(child);
+  if ('value' in props) {
+    return props.value;
+  }
+  if (getKey(child) !== undefined) {
+    return getKey(child);
+  }
+  if (getSlotOptions(child).isSelectOptGroup) {
+    const label = getComponentFromProp(child, 'label');
+    if (label) {
+      return label;
+    }
+  }
+  throw new Error(`Need at least a key or a value or a label (only for OptGroup) for ${child}`);
+}
+
+export function getPropValue(child, prop) {
+  if (prop === 'value') {
+    return getValuePropValue(child);
+  }
+  if (prop === 'children') {
+    const newChild = child.$slots
+      ? cloneVNodes(child.$slots.default, true)
+      : cloneVNodes(child.componentOptions.children, true);
+    if (newChild.length === 1 && !newChild[0].tag) {
+      return newChild[0].text;
+    }
+    return newChild;
+  }
+  const data = getPropsData(child);
+  if (prop in data) {
+    return data[prop];
+  } else {
+    return getAttrs(child)[prop];
+  }
+}
+
+export function isMultiple(props) {
+  return props.multiple;
+}
+
+export function isCombobox(props) {
+  return props.combobox;
+}
+
+export function isMultipleOrTags(props) {
+  return props.multiple || props.tags;
+}
+
+export function isMultipleOrTagsOrCombobox(props) {
+  return isMultipleOrTags(props) || isCombobox(props);
+}
+
+export function isSingleMode(props) {
+  return !isMultipleOrTagsOrCombobox(props);
+}
+
+export function toArray(value) {
+  let ret = value;
+  if (value === undefined) {
+    ret = [];
+  } else if (!Array.isArray(value)) {
+    ret = [value];
+  }
+  return ret;
+}
+
+export function getMapKey(value) {
+  return `${typeof value}-${value}`;
+}
+
+export function preventDefaultEvent(e) {
+  e.preventDefault();
+}
+
+export function findIndexInValueBySingleValue(value, singleValue) {
+  let index = -1;
+  if (value) {
+    for (let i = 0; i < value.length; i++) {
+      if (value[i] === singleValue) {
+        index = i;
+        break;
+      }
+    }
+  }
+  return index;
+}
+
+export function getLabelFromPropsValue(value, key) {
+  let label;
+  value = toArray(value);
+  if (value) {
+    for (let i = 0; i < value.length; i++) {
+      if (value[i].key === key) {
+        label = value[i].label;
+        break;
+      }
+    }
+  }
+  return label;
+}
+
+export function getSelectKeys(menuItems, value) {
+  if (value === null || value === undefined) {
+    return [];
+  }
+  let selectedKeys = [];
+  menuItems.forEach(item => {
+    if (getSlotOptions(item).isMenuItemGroup) {
+      selectedKeys = selectedKeys.concat(getSelectKeys(item.componentOptions.children, value));
+    } else {
+      const itemValue = getValuePropValue(item);
+      const itemKey = item.key;
+      if (findIndexInValueBySingleValue(value, itemValue) !== -1 && itemKey !== undefined) {
+        selectedKeys.push(itemKey);
+      }
+    }
+  });
+  return selectedKeys;
+}
+
+export const UNSELECTABLE_STYLE = {
+  userSelect: 'none',
+  WebkitUserSelect: 'none',
+};
+
+export const UNSELECTABLE_ATTRIBUTE = {
+  unselectable: 'on',
+};
+
+export function findFirstMenuItem(children) {
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i];
+    const props = getPropsData(child);
+    if (getSlotOptions(child).isMenuItemGroup) {
+      const found = findFirstMenuItem(child.componentOptions.children);
+      if (found) {
+        return found;
+      }
+    } else if (!(props.disabled || props.disabled === '')) {
+      return child;
+    }
+  }
+  return null;
+}
+
+export function includesSeparators(str, separators) {
+  for (let i = 0; i < separators.length; ++i) {
+    if (str.lastIndexOf(separators[i]) > 0) {
+      return true;
+    }
+  }
+  return false;
+}
+
+export function splitBySeparators(str, separators) {
+  const reg = new RegExp(`[${separators.join()}]`);
+  return str.split(reg).filter(token => token);
+}
+
+export function defaultFilterFn(input, child) {
+  const props = getPropsData(child);
+  if (props.disabled) {
+    return false;
+  }
+  let value = getPropValue(child, this.optionFilterProp);
+  if (value.length && value[0].text) {
+    value = value[0].text;
+  } else {
+    value = String(value);
+  }
+  return value.toLowerCase().indexOf(input.toLowerCase()) > -1;
+}
+
+export function validateOptionValue(value, props) {
+  if (isSingleMode(props) || isMultiple(props)) {
+    return;
+  }
+  if (typeof value !== 'string') {
+    throw new Error(
+      `Invalid \`value\` of type \`${typeof value}\` supplied to Option, ` +
+        `expected \`string\` when \`tags/combobox\` is \`true\`.`,
+    );
+  }
+}
+
+export function saveRef(instance, name) {
+  return node => {
+    instance[name] = node;
+  };
+}
+
+export function generateUUID() {
+  if (process.env.NODE_ENV === 'test') {
+    return 'test-uuid';
+  }
+  let d = new Date().getTime();
+  const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+    const r = (d + Math.random() * 16) % 16 | 0;
+    d = Math.floor(d / 16);
+    return (c === 'x' ? r : (r & 0x7) | 0x8).toString(16);
+  });
+  return uuid;
+}

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

@@ -0,0 +1,214 @@
+import PropTypes from '../_util/vue-types';
+import Select from './Select';
+import BaseMixin from '../_util/BaseMixin';
+
+const formatOption = (option, disabledOptions) => {
+  let value = `${option}`;
+  if (option < 10) {
+    value = `0${option}`;
+  }
+
+  let disabled = false;
+  if (disabledOptions && disabledOptions.indexOf(option) >= 0) {
+    disabled = true;
+  }
+
+  return {
+    value,
+    disabled,
+  };
+};
+
+const Combobox = {
+  mixins: [BaseMixin],
+  name: 'Combobox',
+  props: {
+    format: PropTypes.string,
+    defaultOpenValue: PropTypes.object,
+    prefixCls: PropTypes.string,
+    value: PropTypes.object,
+    // onChange: PropTypes.func,
+    // onAmPmChange: PropTypes.func,
+    showHour: PropTypes.bool,
+    showMinute: PropTypes.bool,
+    showSecond: PropTypes.bool,
+    hourOptions: PropTypes.array,
+    minuteOptions: PropTypes.array,
+    secondOptions: PropTypes.array,
+    disabledHours: PropTypes.func,
+    disabledMinutes: PropTypes.func,
+    disabledSeconds: PropTypes.func,
+    // onCurrentSelectPanelChange: PropTypes.func,
+    use12Hours: PropTypes.bool,
+    isAM: PropTypes.bool,
+  },
+  methods: {
+    onItemChange(type, itemValue) {
+      const { defaultOpenValue, use12Hours, value: propValue, isAM } = this;
+      const value = (propValue || defaultOpenValue).clone();
+
+      if (type === 'hour') {
+        if (use12Hours) {
+          if (isAM) {
+            value.hour(+itemValue % 12);
+          } else {
+            value.hour((+itemValue % 12) + 12);
+          }
+        } else {
+          value.hour(+itemValue);
+        }
+      } else if (type === 'minute') {
+        value.minute(+itemValue);
+      } else if (type === 'ampm') {
+        const ampm = itemValue.toUpperCase();
+        if (use12Hours) {
+          if (ampm === 'PM' && value.hour() < 12) {
+            value.hour((value.hour() % 12) + 12);
+          }
+
+          if (ampm === 'AM') {
+            if (value.hour() >= 12) {
+              value.hour(value.hour() - 12);
+            }
+          }
+        }
+        this.__emit('amPmChange', ampm);
+      } else {
+        value.second(+itemValue);
+      }
+      this.__emit('change', value);
+    },
+
+    onEnterSelectPanel(range) {
+      this.__emit('currentSelectPanelChange', range);
+    },
+    onEsc(e) {
+      this.__emit('esc', e);
+    },
+
+    getHourSelect(hour) {
+      const { prefixCls, hourOptions, disabledHours, showHour, use12Hours } = this;
+      if (!showHour) {
+        return null;
+      }
+      const disabledOptions = disabledHours();
+      let hourOptionsAdj;
+      let hourAdj;
+      if (use12Hours) {
+        hourOptionsAdj = [12].concat(hourOptions.filter(h => h < 12 && h > 0));
+        hourAdj = hour % 12 || 12;
+      } else {
+        hourOptionsAdj = hourOptions;
+        hourAdj = hour;
+      }
+
+      return (
+        <Select
+          prefixCls={prefixCls}
+          options={hourOptionsAdj.map(option => formatOption(option, disabledOptions))}
+          selectedIndex={hourOptionsAdj.indexOf(hourAdj)}
+          type="hour"
+          onSelect={this.onItemChange}
+          onMouseenter={() => this.onEnterSelectPanel('hour')}
+          onEsc={this.onEsc}
+        />
+      );
+    },
+
+    getMinuteSelect(minute) {
+      const {
+        prefixCls,
+        minuteOptions,
+        disabledMinutes,
+        defaultOpenValue,
+        showMinute,
+        value: propValue,
+      } = this;
+      if (!showMinute) {
+        return null;
+      }
+      const value = propValue || defaultOpenValue;
+      const disabledOptions = disabledMinutes(value.hour());
+
+      return (
+        <Select
+          prefixCls={prefixCls}
+          options={minuteOptions.map(option => formatOption(option, disabledOptions))}
+          selectedIndex={minuteOptions.indexOf(minute)}
+          type="minute"
+          onSelect={this.onItemChange}
+          onMouseenter={() => this.onEnterSelectPanel('minute')}
+          onEsc={this.onEsc}
+        />
+      );
+    },
+
+    getSecondSelect(second) {
+      const {
+        prefixCls,
+        secondOptions,
+        disabledSeconds,
+        showSecond,
+        defaultOpenValue,
+        value: propValue,
+      } = this;
+      if (!showSecond) {
+        return null;
+      }
+      const value = propValue || defaultOpenValue;
+      const disabledOptions = disabledSeconds(value.hour(), value.minute());
+
+      return (
+        <Select
+          prefixCls={prefixCls}
+          options={secondOptions.map(option => formatOption(option, disabledOptions))}
+          selectedIndex={secondOptions.indexOf(second)}
+          type="second"
+          onSelect={this.onItemChange}
+          onMouseenter={() => this.onEnterSelectPanel('second')}
+          onEsc={this.onEsc}
+        />
+      );
+    },
+
+    getAMPMSelect() {
+      const { prefixCls, use12Hours, format, isAM } = this;
+      if (!use12Hours) {
+        return null;
+      }
+
+      const AMPMOptions = ['am', 'pm'] // If format has A char, then we should uppercase AM/PM
+        .map(c => (format.match(/\sA/) ? c.toUpperCase() : c))
+        .map(c => ({ value: c }));
+
+      const selected = isAM ? 0 : 1;
+
+      return (
+        <Select
+          prefixCls={prefixCls}
+          options={AMPMOptions}
+          selectedIndex={selected}
+          type="ampm"
+          onSelect={this.onItemChange}
+          onMouseenter={() => this.onEnterSelectPanel('ampm')}
+          onEsc={this.onEsc}
+        />
+      );
+    },
+  },
+
+  render() {
+    const { prefixCls, defaultOpenValue, value: propValue } = this;
+    const value = propValue || defaultOpenValue;
+    return (
+      <div class={`${prefixCls}-combobox`}>
+        {this.getHourSelect(value.hour())}
+        {this.getMinuteSelect(value.minute())}
+        {this.getSecondSelect(value.second())}
+        {this.getAMPMSelect(value.hour())}
+      </div>
+    );
+  },
+};
+
+export default Combobox;

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

@@ -0,0 +1,187 @@
+import PropTypes from '../_util/vue-types';
+import BaseMixin from '../_util/BaseMixin';
+import moment from 'moment';
+
+const Header = {
+  mixins: [BaseMixin],
+  props: {
+    format: PropTypes.string,
+    prefixCls: PropTypes.string,
+    disabledDate: PropTypes.func,
+    placeholder: PropTypes.string,
+    clearText: PropTypes.string,
+    value: PropTypes.object,
+    inputReadOnly: PropTypes.bool.def(false),
+    hourOptions: PropTypes.array,
+    minuteOptions: PropTypes.array,
+    secondOptions: PropTypes.array,
+    disabledHours: PropTypes.func,
+    disabledMinutes: PropTypes.func,
+    disabledSeconds: PropTypes.func,
+    // onChange: PropTypes.func,
+    // onClear: PropTypes.func,
+    // onEsc: PropTypes.func,
+    allowEmpty: PropTypes.bool,
+    defaultOpenValue: PropTypes.object,
+    currentSelectPanel: PropTypes.string,
+    focusOnOpen: PropTypes.bool,
+    // onKeyDown: PropTypes.func,
+    clearIcon: PropTypes.any,
+  },
+  data() {
+    const { value, format } = this;
+    return {
+      str: (value && value.format(format)) || '',
+      invalid: false,
+    };
+  },
+
+  mounted() {
+    if (this.focusOnOpen) {
+      // Wait one frame for the panel to be positioned before focusing
+      const requestAnimationFrame = window.requestAnimationFrame || window.setTimeout;
+      requestAnimationFrame(() => {
+        this.$refs.input.focus();
+        this.$refs.input.select();
+      });
+    }
+  },
+  watch: {
+    value(val) {
+      this.$nextTick(() => {
+        this.setState({
+          str: (val && val.format(this.format)) || '',
+          invalid: false,
+        });
+      });
+    },
+  },
+
+  methods: {
+    onInputChange(e) {
+      const { value: str, composing } = e.target;
+      const { str: oldStr = '' } = this;
+      if (e.isComposing || composing || oldStr === str) return;
+
+      this.setState({
+        str,
+      });
+      const {
+        format,
+        hourOptions,
+        minuteOptions,
+        secondOptions,
+        disabledHours,
+        disabledMinutes,
+        disabledSeconds,
+        value: originalValue,
+      } = this;
+
+      if (str) {
+        const value = this.getProtoValue().clone();
+        const parsed = moment(str, format, true);
+        if (!parsed.isValid()) {
+          this.setState({
+            invalid: true,
+          });
+          return;
+        }
+        value
+          .hour(parsed.hour())
+          .minute(parsed.minute())
+          .second(parsed.second());
+
+        // if time value not allowed, response warning.
+        if (
+          hourOptions.indexOf(value.hour()) < 0 ||
+          minuteOptions.indexOf(value.minute()) < 0 ||
+          secondOptions.indexOf(value.second()) < 0
+        ) {
+          this.setState({
+            invalid: true,
+          });
+          return;
+        }
+
+        // if time value is disabled, response warning.
+        const disabledHourOptions = disabledHours();
+        const disabledMinuteOptions = disabledMinutes(value.hour());
+        const disabledSecondOptions = disabledSeconds(value.hour(), value.minute());
+        if (
+          (disabledHourOptions && disabledHourOptions.indexOf(value.hour()) >= 0) ||
+          (disabledMinuteOptions && disabledMinuteOptions.indexOf(value.minute()) >= 0) ||
+          (disabledSecondOptions && disabledSecondOptions.indexOf(value.second()) >= 0)
+        ) {
+          this.setState({
+            invalid: true,
+          });
+          return;
+        }
+
+        if (originalValue) {
+          if (
+            originalValue.hour() !== value.hour() ||
+            originalValue.minute() !== value.minute() ||
+            originalValue.second() !== value.second()
+          ) {
+            // keep other fields for rc-calendar
+            const changedValue = originalValue.clone();
+            changedValue.hour(value.hour());
+            changedValue.minute(value.minute());
+            changedValue.second(value.second());
+            this.__emit('change', changedValue);
+          }
+        } else if (originalValue !== value) {
+          this.__emit('change', value);
+        }
+      } else {
+        this.__emit('change', null);
+      }
+
+      this.setState({
+        invalid: false,
+      });
+    },
+
+    onKeyDown(e) {
+      if (e.keyCode === 27) {
+        this.__emit('esc');
+      }
+      this.__emit('keydown', e);
+    },
+
+    getProtoValue() {
+      return this.value || this.defaultOpenValue;
+    },
+
+    getInput() {
+      const { prefixCls, placeholder, inputReadOnly, invalid, str } = this;
+      const invalidClass = invalid ? `${prefixCls}-input-invalid` : '';
+      return (
+        <input
+          class={`${prefixCls}-input ${invalidClass}`}
+          ref="input"
+          onKeydown={this.onKeyDown}
+          value={str}
+          placeholder={placeholder}
+          onInput={this.onInputChange}
+          readOnly={!!inputReadOnly}
+          {...{
+            directives: [
+              {
+                name: 'ant-input',
+              },
+            ],
+          }}
+        />
+      );
+    },
+  },
+
+  render() {
+    const { prefixCls } = this;
+    return <div class={`${prefixCls}-input-wrap`}>{this.getInput()}</div>;
+  },
+};
+
+export default Header;