@ohos-ports/flowbite-datepicker 2.0.0-beta.0

package/js/options/processOptions.js

@@ -0,0 +1,263 @@
+import {hasProperty, pushUnique} from '../lib/utils.js';
+import {dateValue} from '../lib/date.js';
+import {reFormatTokens, parseDate} from '../lib/date-format.js';
+import {parseHTML} from '../lib/dom.js';
+import defaultOptions from './defaultOptions.js';
+
+const {
+  language: defaultLang,
+  format: defaultFormat,
+  weekStart: defaultWeekStart,
+} = defaultOptions;
+
+// Reducer function to filter out invalid day-of-week from the input
+function sanitizeDOW(dow, day) {
+  return dow.length < 6 && day >= 0 && day < 7
+    ? pushUnique(dow, day)
+    : dow;
+}
+
+function calcEndOfWeek(startOfWeek) {
+  return (startOfWeek + 6) % 7;
+}
+
+// validate input date. if invalid, fallback to the original value
+function validateDate(value, format, locale, origValue) {
+  const date = parseDate(value, format, locale);
+  return date !== undefined ? date : origValue;
+}
+
+// Validate viewId. if invalid, fallback to the original value
+function validateViewId(value, origValue, max = 3) {
+  const viewId = parseInt(value, 10);
+  return viewId >= 0 && viewId <= max ? viewId : origValue;
+}
+
+// Create Datepicker configuration to set
+export default function processOptions(options, datepicker) {
+  const inOpts = Object.assign({}, options);
+  const config = {};
+  const locales = datepicker.constructor.locales;
+  let {
+    format,
+    language,
+    locale,
+    maxDate,
+    maxView,
+    minDate,
+    pickLevel,
+    startView,
+    weekStart,
+  } = datepicker.config || {};
+
+  if (inOpts.language) {
+    let lang;
+    if (inOpts.language !== language) {
+      if (locales[inOpts.language]) {
+        lang = inOpts.language;
+      } else {
+        // Check if langauge + region tag can fallback to the one without
+        // region (e.g. fr-CA → fr)
+        lang = inOpts.language.split('-')[0];
+        if (locales[lang] === undefined) {
+          lang = false;
+        }
+      }
+    }
+    delete inOpts.language;
+    if (lang) {
+      language = config.language = lang;
+
+      // update locale as well when updating language
+      const origLocale = locale || locales[defaultLang];
+      // use default language's properties for the fallback
+      locale = Object.assign({
+        format: defaultFormat,
+        weekStart: defaultWeekStart
+      }, locales[defaultLang]);
+      if (language !== defaultLang) {
+        Object.assign(locale, locales[language]);
+      }
+      config.locale = locale;
+      // if format and/or weekStart are the same as old locale's defaults,
+      // update them to new locale's defaults
+      if (format === origLocale.format) {
+        format = config.format = locale.format;
+      }
+      if (weekStart === origLocale.weekStart) {
+        weekStart = config.weekStart = locale.weekStart;
+        config.weekEnd = calcEndOfWeek(locale.weekStart);
+      }
+    }
+  }
+
+  if (inOpts.format) {
+    const hasToDisplay = typeof inOpts.format.toDisplay === 'function';
+    const hasToValue = typeof inOpts.format.toValue === 'function';
+    const validFormatString = reFormatTokens.test(inOpts.format);
+    if ((hasToDisplay && hasToValue) || validFormatString) {
+      format = config.format = inOpts.format;
+    }
+    delete inOpts.format;
+  }
+
+  //*** dates ***//
+  // while min and maxDate for "no limit" in the options are better to be null
+  // (especially when updating), the ones in the config have to be undefined
+  // because null is treated as 0 (= unix epoch) when comparing with time value
+  let minDt = minDate;
+  let maxDt = maxDate;
+  if (inOpts.minDate !== undefined) {
+    minDt = inOpts.minDate === null
+      ? dateValue(0, 0, 1)  // set 0000-01-01 to prevent negative values for year
+      : validateDate(inOpts.minDate, format, locale, minDt);
+    delete inOpts.minDate;
+  }
+  if (inOpts.maxDate !== undefined) {
+    maxDt = inOpts.maxDate === null
+      ? undefined
+      : validateDate(inOpts.maxDate, format, locale, maxDt);
+    delete inOpts.maxDate;
+  }
+  if (maxDt < minDt) {
+    minDate = config.minDate = maxDt;
+    maxDate = config.maxDate = minDt;
+  } else {
+    if (minDate !== minDt) {
+      minDate = config.minDate = minDt;
+    }
+    if (maxDate !== maxDt) {
+      maxDate = config.maxDate = maxDt;
+    }
+  }
+
+  if (inOpts.datesDisabled) {
+    config.datesDisabled = inOpts.datesDisabled.reduce((dates, dt) => {
+      const date = parseDate(dt, format, locale);
+      return date !== undefined ? pushUnique(dates, date) : dates;
+    }, []);
+    delete inOpts.datesDisabled;
+  }
+  if (inOpts.defaultViewDate !== undefined) {
+    const viewDate = parseDate(inOpts.defaultViewDate, format, locale);
+    if (viewDate !== undefined) {
+      config.defaultViewDate = viewDate;
+    }
+    delete inOpts.defaultViewDate;
+  }
+
+  //*** days of week ***//
+  if (inOpts.weekStart !== undefined) {
+    const wkStart = Number(inOpts.weekStart) % 7;
+    if (!isNaN(wkStart)) {
+      weekStart = config.weekStart = wkStart;
+      config.weekEnd = calcEndOfWeek(wkStart);
+    }
+    delete inOpts.weekStart;
+  }
+  if (inOpts.daysOfWeekDisabled) {
+    config.daysOfWeekDisabled = inOpts.daysOfWeekDisabled.reduce(sanitizeDOW, []);
+    delete inOpts.daysOfWeekDisabled;
+  }
+  if (inOpts.daysOfWeekHighlighted) {
+    config.daysOfWeekHighlighted = inOpts.daysOfWeekHighlighted.reduce(sanitizeDOW, []);
+    delete inOpts.daysOfWeekHighlighted;
+  }
+
+  //*** multi date ***//
+  if (inOpts.maxNumberOfDates !== undefined) {
+    const maxNumberOfDates = parseInt(inOpts.maxNumberOfDates, 10);
+    if (maxNumberOfDates >= 0) {
+      config.maxNumberOfDates = maxNumberOfDates;
+      config.multidate = maxNumberOfDates !== 1;
+    }
+    delete inOpts.maxNumberOfDates;
+  }
+  if (inOpts.dateDelimiter) {
+    config.dateDelimiter = String(inOpts.dateDelimiter);
+    delete inOpts.dateDelimiter;
+  }
+
+  //*** pick level & view ***//
+  let newPickLevel = pickLevel;
+  if (inOpts.pickLevel !== undefined) {
+    newPickLevel = validateViewId(inOpts.pickLevel, 2);
+    delete inOpts.pickLevel;
+  }
+  if (newPickLevel !== pickLevel) {
+    pickLevel = config.pickLevel = newPickLevel;
+  }
+
+  let newMaxView = maxView;
+  if (inOpts.maxView !== undefined) {
+    newMaxView = validateViewId(inOpts.maxView, maxView);
+    delete inOpts.maxView;
+  }
+  // ensure max view >= pick level
+  newMaxView = pickLevel > newMaxView ? pickLevel : newMaxView;
+  if (newMaxView !== maxView) {
+    maxView = config.maxView = newMaxView;
+  }
+
+  let newStartView = startView;
+  if (inOpts.startView !== undefined) {
+    newStartView = validateViewId(inOpts.startView, newStartView);
+    delete inOpts.startView;
+  }
+  // ensure pick level <= start view <= max view
+  if (newStartView < pickLevel) {
+    newStartView = pickLevel;
+  } else if (newStartView > maxView) {
+    newStartView = maxView;
+  }
+  if (newStartView !== startView) {
+    config.startView = newStartView;
+  }
+
+  //*** template ***//
+  if (inOpts.prevArrow) {
+    const prevArrow = parseHTML(inOpts.prevArrow);
+    if (prevArrow.childNodes.length > 0) {
+      config.prevArrow = prevArrow.childNodes;
+    }
+    delete inOpts.prevArrow;
+  }
+  if (inOpts.nextArrow) {
+    const nextArrow = parseHTML(inOpts.nextArrow);
+    if (nextArrow.childNodes.length > 0) {
+      config.nextArrow = nextArrow.childNodes;
+    }
+    delete inOpts.nextArrow;
+  }
+
+  //*** misc ***//
+  if (inOpts.disableTouchKeyboard !== undefined) {
+    config.disableTouchKeyboard = 'ontouchstart' in document && !!inOpts.disableTouchKeyboard;
+    delete inOpts.disableTouchKeyboard;
+  }
+  if (inOpts.orientation) {
+    const orientation = inOpts.orientation.toLowerCase().split(/\s+/g);
+    config.orientation = {
+      x: orientation.find(x => (x === 'left' || x === 'right')) || 'auto',
+      y: orientation.find(y => (y === 'top' || y === 'bottom')) || 'auto',
+    };
+    delete inOpts.orientation;
+  }
+  if (inOpts.todayBtnMode !== undefined) {
+    switch(inOpts.todayBtnMode) {
+      case 0:
+      case 1:
+        config.todayBtnMode = inOpts.todayBtnMode;
+    }
+    delete inOpts.todayBtnMode;
+  }
+
+  //*** copy the rest ***//
+  Object.keys(inOpts).forEach((key) => {
+    if (inOpts[key] !== undefined && hasProperty(defaultOptions, key)) {
+      config[key] = inOpts[key];
+    }
+  });
+
+  return config;
+}

package/js/picker/Picker.js

@@ -0,0 +1,334 @@
+import {hasProperty, lastItemOf, isInRange, limitToRange} from '../lib/utils.js';
+import {today} from '../lib/date.js';
+import {parseHTML, showElement, hideElement, emptyChildNodes} from '../lib/dom.js';
+import {registerListeners} from '../lib/event.js';
+import pickerTemplate from './templates/pickerTemplate.js';
+import DaysView from './views/DaysView.js';
+import MonthsView from './views/MonthsView.js';
+import YearsView from './views/YearsView.js';
+import {triggerDatepickerEvent} from '../events/functions.js';
+import {
+  onClickTodayBtn,
+  onClickClearBtn,
+  onClickViewSwitch,
+  onClickPrevBtn,
+  onClickNextBtn,
+  onClickView,
+  onClickPicker,
+} from '../events/pickerListeners.js';
+
+function processPickerOptions(picker, options) {
+  if (options.title !== undefined) {
+    if (options.title) {
+      picker.controls.title.textContent = options.title;
+      showElement(picker.controls.title);
+    } else {
+      picker.controls.title.textContent = '';
+      hideElement(picker.controls.title);
+    }
+  }
+  if (options.prevArrow) {
+    const prevBtn = picker.controls.prevBtn;
+    emptyChildNodes(prevBtn);
+    options.prevArrow.forEach((node) => {
+      prevBtn.appendChild(node.cloneNode(true));
+    });
+  }
+  if (options.nextArrow) {
+    const nextBtn = picker.controls.nextBtn;
+    emptyChildNodes(nextBtn);
+    options.nextArrow.forEach((node) => {
+      nextBtn.appendChild(node.cloneNode(true));
+    });
+  }
+  if (options.locale) {
+    picker.controls.todayBtn.textContent = options.locale.today;
+    picker.controls.clearBtn.textContent = options.locale.clear;
+  }
+  if (options.todayBtn !== undefined) {
+    if (options.todayBtn) {
+      showElement(picker.controls.todayBtn);
+    } else {
+      hideElement(picker.controls.todayBtn);
+    }
+  }
+  if (hasProperty(options, 'minDate') || hasProperty(options, 'maxDate')) {
+    const {minDate, maxDate} = picker.datepicker.config;
+    picker.controls.todayBtn.disabled = !isInRange(today(), minDate, maxDate);
+  }
+  if (options.clearBtn !== undefined) {
+    if (options.clearBtn) {
+      showElement(picker.controls.clearBtn);
+    } else {
+      hideElement(picker.controls.clearBtn);
+    }
+  }
+}
+
+// Compute view date to reset, which will be...
+// - the last item of the selected dates or defaultViewDate if no selection
+// - limitted to minDate or maxDate if it exceeds the range
+function computeResetViewDate(datepicker) {
+  const {dates, config} = datepicker;
+  const viewDate = dates.length > 0 ? lastItemOf(dates) : config.defaultViewDate;
+  return limitToRange(viewDate, config.minDate, config.maxDate);
+}
+
+// Change current view's view date
+function setViewDate(picker, newDate) {
+  const oldViewDate = new Date(picker.viewDate);
+  const newViewDate = new Date(newDate);
+  const {id, year, first, last} = picker.currentView;
+  const viewYear = newViewDate.getFullYear();
+
+  picker.viewDate = newDate;
+  if (viewYear !== oldViewDate.getFullYear()) {
+    triggerDatepickerEvent(picker.datepicker, 'changeYear');
+  }
+  if (newViewDate.getMonth() !== oldViewDate.getMonth()) {
+    triggerDatepickerEvent(picker.datepicker, 'changeMonth');
+  }
+
+  // return whether the new date is in different period on time from the one
+  // displayed in the current view
+  // when true, the view needs to be re-rendered on the next UI refresh.
+  switch (id) {
+    case 0:
+      return newDate < first || newDate > last;
+    case 1:
+      return viewYear !== year;
+    default:
+      return viewYear < first || viewYear > last;
+  }
+}
+
+function getTextDirection(el) {
+  return window.getComputedStyle(el).direction;
+}
+
+// Class representing the picker UI
+export default class Picker {
+  constructor(datepicker) {
+    this.datepicker = datepicker;
+
+    const template = pickerTemplate.replace(/%buttonClass%/g, datepicker.config.buttonClass);
+    const element = this.element = parseHTML(template).firstChild;
+    const [header, main, footer] = element.firstChild.children;
+    const title = header.firstElementChild;
+    const [prevBtn, viewSwitch, nextBtn] = header.lastElementChild.children;
+    const [todayBtn, clearBtn] = footer.firstChild.children;
+    const controls = {
+      title,
+      prevBtn,
+      viewSwitch,
+      nextBtn,
+      todayBtn,
+      clearBtn,
+    };
+    this.main = main;
+    this.controls = controls;
+
+    const elementClass = datepicker.inline ? 'inline' : 'dropdown';
+    element.classList.add(`datepicker-${elementClass}`);
+    elementClass === 'dropdown' ? element.classList.add('dropdown', 'absolute', 'top-0', 'left-0', 'z-50', 'pt-2') : null;
+
+    processPickerOptions(this, datepicker.config);
+    this.viewDate = computeResetViewDate(datepicker);
+
+    // set up event listeners
+    registerListeners(datepicker, [
+      [element, 'click', onClickPicker.bind(null, datepicker), {capture: true}],
+      [main, 'click', onClickView.bind(null, datepicker)],
+      [controls.viewSwitch, 'click', onClickViewSwitch.bind(null, datepicker)],
+      [controls.prevBtn, 'click', onClickPrevBtn.bind(null, datepicker)],
+      [controls.nextBtn, 'click', onClickNextBtn.bind(null, datepicker)],
+      [controls.todayBtn, 'click', onClickTodayBtn.bind(null, datepicker)],
+      [controls.clearBtn, 'click', onClickClearBtn.bind(null, datepicker)],
+    ]);
+
+    // set up views
+    this.views = [
+      new DaysView(this),
+      new MonthsView(this),
+      new YearsView(this, {id: 2, name: 'years', cellClass: 'year', step: 1}),
+      new YearsView(this, {id: 3, name: 'decades', cellClass: 'decade', step: 10}),
+    ];
+    this.currentView = this.views[datepicker.config.startView];
+
+    this.currentView.render();
+    this.main.appendChild(this.currentView.element);
+    datepicker.config.container.appendChild(this.element);
+  }
+
+  setOptions(options) {
+    processPickerOptions(this, options);
+    this.views.forEach((view) => {
+      view.init(options, false);
+    });
+    this.currentView.render();
+  }
+
+  detach() {
+    this.datepicker.config.container.removeChild(this.element);
+  }
+
+  show() {
+    if (this.active) {
+      return;
+    }
+    this.element.classList.add('active', 'block');
+    this.element.classList.remove('hidden');
+    this.active = true;
+
+    const datepicker = this.datepicker;
+    if (!datepicker.inline) {
+      // ensure picker's direction matches input's
+      const inputDirection = getTextDirection(datepicker.inputField);
+      if (inputDirection !== getTextDirection(datepicker.config.container)) {
+        this.element.dir = inputDirection;
+      } else if (this.element.dir) {
+        this.element.removeAttribute('dir');
+      }
+
+      this.place();
+      if (datepicker.config.disableTouchKeyboard) {
+        datepicker.inputField.blur();
+      }
+    }
+    triggerDatepickerEvent(datepicker, 'show');
+  }
+
+  hide() {
+    if (!this.active) {
+      return;
+    }
+    this.datepicker.exitEditMode();
+    this.element.classList.remove('active', 'block');
+    this.element.classList.add('active', 'block', 'hidden');
+    this.active = false;
+    triggerDatepickerEvent(this.datepicker, 'hide');
+  }
+
+  place() {
+    const {classList, style} = this.element;
+    const {config, inputField} = this.datepicker;
+    const container = config.container;
+    const {
+      width: calendarWidth,
+      height: calendarHeight,
+    } = this.element.getBoundingClientRect();
+    const {
+      left: containerLeft,
+      top: containerTop,
+      width: containerWidth,
+    } = container.getBoundingClientRect();
+    const {
+      left: inputLeft,
+      top: inputTop,
+      width: inputWidth,
+      height: inputHeight
+    } = inputField.getBoundingClientRect();
+    let {x: orientX, y: orientY} = config.orientation;
+    let scrollTop;
+    let left;
+    let top;
+
+    if (container === document.body) {
+      scrollTop = window.scrollY;
+      left = inputLeft + window.scrollX;
+      top = inputTop + scrollTop;
+    } else {
+      scrollTop = container.scrollTop;
+      left = inputLeft - containerLeft;
+      top = inputTop - containerTop + scrollTop;
+    }
+
+    if (orientX === 'auto') {
+      if (left < 0) {
+        // align to the left and move into visible area if input's left edge < window's
+        orientX = 'left';
+        left = 10;
+      } else if (left + calendarWidth > containerWidth) {
+        // align to the right if canlendar's right edge > container's
+        orientX = 'right';
+      } else {
+        orientX = getTextDirection(inputField) === 'rtl' ? 'right' : 'left';
+      }
+    }
+    if (orientX === 'right') {
+      left -= calendarWidth - inputWidth;
+    }
+
+    if (orientY === 'auto') {
+      orientY = top - calendarHeight < scrollTop ? 'bottom' : 'top';
+    }
+    if (orientY === 'top') {
+      top -= calendarHeight;
+    } else {
+      top += inputHeight;
+    }
+
+    classList.remove(
+      'datepicker-orient-top',
+      'datepicker-orient-bottom',
+      'datepicker-orient-right',
+      'datepicker-orient-left'
+    );
+    classList.add(`datepicker-orient-${orientY}`, `datepicker-orient-${orientX}`);
+
+    style.top = top ? `${top}px` : top;
+    style.left = left ? `${left}px` : left;
+  }
+
+  setViewSwitchLabel(labelText) {
+    this.controls.viewSwitch.textContent = labelText;
+  }
+
+  setPrevBtnDisabled(disabled) {
+    this.controls.prevBtn.disabled = disabled;
+  }
+
+  setNextBtnDisabled(disabled) {
+    this.controls.nextBtn.disabled = disabled;
+  }
+
+  changeView(viewId) {
+    const oldView = this.currentView;
+    const newView =  this.views[viewId];
+    if (newView.id !== oldView.id) {
+      this.currentView = newView;
+      this._renderMethod = 'render';
+      triggerDatepickerEvent(this.datepicker, 'changeView');
+      this.main.replaceChild(newView.element, oldView.element);
+    }
+    return this;
+  }
+
+  // Change the focused date (view date)
+  changeFocus(newViewDate) {
+    this._renderMethod = setViewDate(this, newViewDate) ? 'render' : 'refreshFocus';
+    this.views.forEach((view) => {
+      view.updateFocus();
+    });
+    return this;
+  }
+
+  // Apply the change of the selected dates
+  update() {
+    const newViewDate = computeResetViewDate(this.datepicker);
+    this._renderMethod = setViewDate(this, newViewDate) ? 'render' : 'refresh';
+    this.views.forEach((view) => {
+      view.updateFocus();
+      view.updateSelection();
+    });
+    return this;
+  }
+
+  // Refresh the picker UI
+  render(quickRender = true) {
+    const renderMethod = (quickRender && this._renderMethod) || 'render';
+    delete this._renderMethod;
+
+    this.currentView[renderMethod]();
+  }
+}

package/js/picker/templates/calendarWeeksTemplate.js

@@ -0,0 +1,8 @@
+import {createTagRepeat, optimizeTemplateHTML} from '../../lib/utils.js';
+
+const calendarWeeksTemplate = optimizeTemplateHTML(`<div class="calendar-weeks">
+  <div class="days-of-week flex"><span class="dow h-6 leading-6 text-sm font-medium text-fg-disabled"></span></div>
+  <div class="weeks">${createTagRepeat('span', 6, {class: 'week block flex-1 leading-9 border-0 rounded-base cursor-default text-center text-body font-medium text-sm'})}</div>
+</div>`);
+
+export default calendarWeeksTemplate;

package/js/picker/templates/daysTemplate.js

@@ -0,0 +1,8 @@
+import {createTagRepeat, optimizeTemplateHTML} from '../../lib/utils.js';
+
+const daysTemplate = optimizeTemplateHTML(`<div class="days">
+  <div class="days-of-week grid grid-cols-7 mb-1">${createTagRepeat('span', 7, {class: 'dow block flex-1 leading-9 border-0 rounded-base cursor-default text-center text-body font-medium text-sm'})}</div>
+  <div class="datepicker-grid w-64 grid grid-cols-7">${createTagRepeat('span', 42 , {class: 'block flex-1 leading-9 border-0 rounded-base cursor-default text-center text-body font-medium text-sm h-6 leading-6 text-sm font-medium text-fg-disabled'})}</div>
+</div>`);
+
+export default daysTemplate;

package/js/picker/templates/pickerTemplate.js

@@ -0,0 +1,23 @@
+import {optimizeTemplateHTML} from '../../lib/utils.js';
+
+const pickerTemplate = optimizeTemplateHTML(`<div class="datepicker hidden">
+  <div class="datepicker-picker inline-block rounded-base bg-neutral-primary-medium border border-default-medium p-4">
+    <div class="datepicker-header">
+      <div class="datepicker-title bg-neutral-primary-medium text-heading px-2 py-3 text-center font-medium"></div>
+      <div class="datepicker-controls flex justify-between mb-2">
+        <button type="button" class="bg-neutral-primary-medium rounded-base text-body hover:bg-neutral-tertiary-medium hover:text-heading text-lg p-2.5 focus:outline-none focus:ring-2 focus:ring-neutral-tertiary prev-btn"></button>
+        <button type="button" class="text-sm rounded-base text-heading bg-neutral-primary-medium font-medium py-2.5 px-5 hover:bg-neutral-tertiary-medium focus:outline-none focus:ring-2 focus:ring-neutral-tertiary view-switch"></button>
+        <button type="button" class="bg-neutral-primary-medium rounded-base text-body hover:bg-neutral-tertiary-medium hover:text-heading text-lg p-2.5 focus:outline-none focus:ring-2 focus:ring-neutral-tertiary next-btn"></button>
+      </div>
+    </div>
+    <div class="datepicker-main p-1"></div>
+    <div class="datepicker-footer">
+      <div class="datepicker-controls flex space-x-2 rtl:space-x-reverse mt-2">
+        <button type="button" class="%buttonClass% today-btn text-white bg-brand hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium font-medium rounded-base text-sm px-5 py-2 text-center w-1/2"></button>
+        <button type="button" class="%buttonClass% clear-btn text-body bg-neutral-secondary-medium border border-default-medium hover:bg-neutral-tertiary-medium focus:ring-4 focus:ring-neutral-tertiary font-medium rounded-base text-sm px-5 py-2 text-center w-1/2"></button>
+      </div>
+    </div>
+  </div>
+</div>`);
+
+export default pickerTemplate;