ui: remove pickadate

Author: undefined-moe

packages/ui-default/components/datepicker/datepicker.page.tsx

@@ -2,26 +2,92 @@ import 'flatpickr/dist/flatpickr.min.css';
 
 import flatpickr from 'flatpickr';
 import $ from 'jquery';
-import Picker from 'pickadate/lib/picker';
 import { AutoloadPage } from 'vj/misc/Page';
-import TimePicker from './timepicker';
+
+function padTwo(n: number) {
+  return n < 10 ? `0${n}` : `${n}`;
+}
+
+function initTimePicker(input: HTMLInputElement) {
+  const $input = $(input);
+  const interval = 15;
+  const $wrapper = $('<div>').css({ position: 'relative', display: 'inline-block', width: '100%' });
+  $input.wrap($wrapper);
+
+  const $dropdown = $('<div>').css({
+    position: 'absolute',
+    top: $input.outerHeight(),
+    left: 0,
+    right: 0,
+    maxHeight: 0,
+    overflowY: 'auto',
+    background: 'var(--bg-color, #fff)',
+    border: '1px solid #ccc',
+    borderTop: 'none',
+    borderRadius: '0 0 4px 4px',
+    zIndex: 1000,
+    opacity: 0,
+    boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+    transition: 'max-height .2s ease, opacity .2s ease',
+    pointerEvents: 'none',
+  }).addClass('time-picker-dropdown');
+
+  for (let h = 0; h < 24; h++) {
+    for (let m = 0; m < 60; m += interval) {
+      const time = `${padTwo(h)}:${padTwo(m)}`;
+      const $item = $('<div>').text(time).css({
+        padding: '6px 12px',
+        cursor: 'pointer',
+      }).on('mousedown', (e) => {
+        e.preventDefault();
+        $input.val(time).trigger('change');
+        closeDropdown();
+      }).on('mouseenter', function () {
+        $(this).css('background', 'var(--highlight-color, #e8f0fe)');
+      }).on('mouseleave', function () {
+        $(this).css('background', '');
+      });
+      $dropdown.append($item);
+    }
+  }
+
+  let isOpen = false;
+
+  function openDropdown() {
+    if (isOpen) return;
+    isOpen = true;
+    $dropdown.css({ maxHeight: '200px', opacity: 1, pointerEvents: 'auto' });
+    const val = $input.val() as string;
+    if (val) {
+      $dropdown.children().each(function cb() {
+        if ($(this).text() !== val) return;
+        const el = this as HTMLElement;
+        el.parentElement!.scrollTop = el.offsetTop - el.parentElement!.offsetTop - 80;
+      });
+    }
+  }
+
+  function closeDropdown() {
+    if (!isOpen) return;
+    isOpen = false;
+    $dropdown.css({ maxHeight: 0, opacity: 0, pointerEvents: 'none' });
+  }
+
+  $input.after($dropdown);
+  $input.on('focus', openDropdown);
+  // Only close when the element actually loses focus within the page,
+  // not when the whole window loses focus (alt-tab)
+  $input.on('blur', () => {
+    if (document.hasFocus()) closeDropdown();
+  });
+}
 
 const datepickerPage = new AutoloadPage('datepickerPage', async () => {
   $('[data-pick-date]').each(function () {
     flatpickr(this, { allowInput: true });
   });
   $('[data-pick-time]').each(function () {
-    const $this = $(this);
-    if (!$this.data('pickatime')) {
-      // eslint-disable-next-line no-new
-      new Picker(this, 'pickatime', TimePicker, {
-        format: 'H:i',
-        editable: true,
-        interval: 15,
-        clear: false,
-        onSet() { $this.trigger('change'); },
-      });
-    }
+    initTimePicker(this as HTMLInputElement);
   });
 });