cdui-js 1.0.22 → 1.0.24

package/src/components/MobileDatePicker.tsx

@@ -1,444 +0,0 @@
-import { JSX } from '../jsx';
-import { animateScrollTo } from '../animate-scroll-to';
-import {
-  batch,
-  combineClass,
-  createEffect,
-  createMemo,
-  createSignal,
-  omitProps,
-  onCleanup,
-  onMount,
-  untrack,
-} from '../reactive';
-
-import { For } from './For';
-import { parseDate } from './Canlendar';
-
-const ITEM_HEIGHT = 44;
-const VIEWPORT_ROWS = 5;
-/** 上下各多渲染的行数，保证快速滑动时不断档 */
-const ROW_OVERSCAN = 5;
-const REPEAT_BLOCKS = 99;
-const TELEPORT_SHIFT = 35;
-
-const PAD = ((VIEWPORT_ROWS * ITEM_HEIGHT - ITEM_HEIGHT) / 2) | 0;
-
-const daysInMonth = (year: number, month: number) => new Date(year, month, 0).getDate();
-
-type LoopColumnProps = {
-  class?: string;
-  values: readonly number[];
-  value: () => number;
-  onChange: (v: number) => void;
-  format: (v: number) => string;
-  /**
-   * 额外依赖，用于在同长度列表变化时（如换月）重置滚动位置
-   */
-  scrollToken?: () => void;
-};
-
-type VisibleRow = { r: number; v: number };
-
-/**
- * 单列循环滚动（年 / 月 / 日），可视区域虚拟化，仅挂载少量行节点
- */
-const MobileDateLoopColumn = (props: LoopColumnProps) => {
-  let wheelEl: HTMLDivElement;
-  let teleporting = false;
-  let settleTimer: ReturnType<typeof setTimeout>;
-  let dragging = false;
-  let scrollRaf = 0;
-
-  const [scrollTop, setScrollTop] = createSignal(0);
-
-  const blockHeight = () => props.values.length * ITEM_HEIGHT;
-
-  const rowCount = () => {
-    const n = props.values.length;
-    return n ? REPEAT_BLOCKS * n : 0;
-  };
-
-  const innerHeightPx = () => {
-    const rc = rowCount();
-    return rc ? PAD * 2 + rc * ITEM_HEIGHT : PAD * 2;
-  };
-
-  const visibleRows = createMemo((): VisibleRow[] => {
-    const vals = props.values;
-    const n = vals.length;
-    const rc = rowCount();
-    if (!n || !rc) {
-      return [];
-    }
-
-    const st = scrollTop();
-    const ch = VIEWPORT_ROWS * ITEM_HEIGHT;
-    const y0 = st;
-    const y1 = st + ch;
-    let r0 = Math.floor((y0 - PAD) / ITEM_HEIGHT) - ROW_OVERSCAN;
-    let r1 = Math.ceil((y1 - PAD) / ITEM_HEIGHT) + ROW_OVERSCAN;
-    if (r0 < 0) {
-      r0 = 0;
-    }
-    if (r1 > rc - 1) {
-      r1 = rc - 1;
-    }
-
-    const out: VisibleRow[] = [];
-    for (let r = r0; r <= r1; r++) {
-      out.push({ r, v: vals[r % n] });
-    }
-
-    return out;
-  });
-
-  const flushScrollTop = () => {
-    if (wheelEl) {
-      setScrollTop(wheelEl.scrollTop);
-    }
-  };
-
-  const scheduleScrollTop = () => {
-    if (scrollRaf) {
-      return;
-    }
-
-    scrollRaf = requestAnimationFrame(() => {
-      scrollRaf = 0;
-      flushScrollTop();
-    });
-  };
-
-  const syncScroll = () => {
-    if (!wheelEl || !props.values.length) {
-      return;
-    }
-
-    let idx = props.values.indexOf(props.value());
-    if (idx < 0) {
-      idx = 0;
-    }
-
-    const n = props.values.length;
-    const mid = (REPEAT_BLOCKS / 2) | 0;
-    const R = mid * n + idx;
-    teleporting = true;
-    wheelEl.scrollTop = R * ITEM_HEIGHT;
-    setScrollTop(wheelEl.scrollTop);
-    requestAnimationFrame(() => {
-      teleporting = false;
-    });
-  };
-
-  const maybeTeleport = () => {
-    if (teleporting || !wheelEl) {
-      return;
-    }
-
-    const block = blockHeight();
-    const n = props.values.length;
-    if (!n) {
-      return;
-    }
-
-    const st = wheelEl.scrollTop;
-    const low = TELEPORT_SHIFT * block;
-    const high = (REPEAT_BLOCKS - TELEPORT_SHIFT) * block;
-
-    if (st < low) {
-      teleporting = true;
-      wheelEl.scrollTop = st + TELEPORT_SHIFT * block;
-      requestAnimationFrame(() => {
-        teleporting = false;
-        flushScrollTop();
-      });
-    } else if (st > high) {
-      teleporting = true;
-      wheelEl.scrollTop = st - TELEPORT_SHIFT * block;
-      requestAnimationFrame(() => {
-        teleporting = false;
-        flushScrollTop();
-      });
-    }
-  };
-
-  const snapAndCommit = () => {
-    if (!wheelEl || !props.values.length) {
-      return;
-    }
-
-    const n = props.values.length;
-    const rc = rowCount();
-    const st = wheelEl.scrollTop;
-    const ch = wheelEl.clientHeight;
-    const center = st + ch / 2;
-    let R = Math.round((center - PAD - ITEM_HEIGHT / 2) / ITEM_HEIGHT);
-    if (R < 0) {
-      R = 0;
-    }
-    if (R > rc - 1) {
-      R = rc - 1;
-    }
-
-    const idx = R % n;
-    const next = props.values[idx];
-    const target = R * ITEM_HEIGHT;
-
-    animateScrollTo(wheelEl, undefined, target, 120).then(() => {
-      setScrollTop(wheelEl.scrollTop);
-      if (next !== props.value()) {
-        props.onChange(next);
-      }
-    });
-  };
-
-  const scheduleSettle = () => {
-    clearTimeout(settleTimer);
-    settleTimer = setTimeout(() => {
-      if (!dragging) {
-        snapAndCommit();
-      }
-    }, 80);
-  };
-
-  onMount(() => {
-    syncScroll();
-
-    const onScroll = () => {
-      if (!teleporting) {
-        maybeTeleport();
-      }
-
-      scheduleScrollTop();
-      scheduleSettle();
-    };
-
-    wheelEl.addEventListener('scroll', onScroll, { passive: true });
-
-    const onTouchStart = () => {
-      dragging = true;
-      clearTimeout(settleTimer);
-    };
-
-    const onTouchEnd = () => {
-      dragging = false;
-      scheduleSettle();
-    };
-
-    wheelEl.addEventListener('touchstart', onTouchStart, { passive: true });
-    wheelEl.addEventListener('touchend', onTouchEnd);
-    wheelEl.addEventListener('touchcancel', onTouchEnd);
-
-    const onScrollEnd = () => {
-      dragging = false;
-      flushScrollTop();
-      snapAndCommit();
-    };
-
-    wheelEl.addEventListener('scrollend', onScrollEnd);
-
-    onCleanup(() => {
-      clearTimeout(settleTimer);
-      cancelAnimationFrame(scrollRaf);
-      scrollRaf = 0;
-      wheelEl.removeEventListener('scroll', onScroll);
-      wheelEl.removeEventListener('touchstart', onTouchStart);
-      wheelEl.removeEventListener('touchend', onTouchEnd);
-      wheelEl.removeEventListener('touchcancel', onTouchEnd);
-      wheelEl.removeEventListener('scrollend', onScrollEnd);
-    });
-  });
-
-  createEffect(() => {
-    props.scrollToken?.();
-    props.value();
-    props.values.length;
-
-    untrack(() => {
-      queueMicrotask(syncScroll);
-    });
-  });
-
-  return (
-    <div class={combineClass('mobile-date-picker-column', props.class)}>
-      <div ref={wheelEl as any} class="mobile-date-picker-wheel scrollbar-hidden">
-        <div class="mobile-date-picker-wheel-inner" style={{ height: `${innerHeightPx()}px` }}>
-          <For each={visibleRows()}>
-            {(row) => (
-              <div class="mobile-date-picker-item" style={{ top: `${PAD + row.r * ITEM_HEIGHT}px` }} data-value={row.v}>
-                {props.format(row.v)}
-              </div>
-            )}
-          </For>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const pad2 = (n: number) => (n > 9 ? String(n) : '0' + n);
-
-const defaultYearRange = (min: number, max: number) => {
-  const a: number[] = [];
-
-  for (let y = min; y <= max; y++) {
-    a.push(y);
-  }
-
-  return a;
-};
-
-const monthValues = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
-
-/**
- * 移动端日期触控选择：年、月、日三栏循环滚动
- */
-export const MobileDatePicker = (
-  props?: JSX.HTMLAttributes<never> & {
-    /**
-     * 当前日期
-     */
-    value?: Date | string | number;
-    /**
-     * 值变化回调
-     */
-    onValueChange?: (value: Date) => void;
-    /**
-     * 最小年份
-     */
-    minYear?: number;
-    /**
-     * 最大年份
-     */
-    maxYear?: number;
-  },
-) => {
-  const minY = () => props.minYear ?? 1970;
-  const maxY = () => props.maxYear ?? 2100;
-
-  const init = () => {
-    let d = props.value != null ? parseDate(props.value) : null;
-    d = d || new Date();
-    let y = d.getFullYear();
-    let m = d.getMonth() + 1;
-    let day = d.getDate();
-    y = Math.min(maxY(), Math.max(minY(), y));
-    const dim = daysInMonth(y, m);
-    day = Math.min(dim, Math.max(1, day));
-    return { y, m, day };
-  };
-
-  const [year, setYear] = createSignal(init().y);
-  const [month, setMonth] = createSignal(init().m);
-  const [day, setDay] = createSignal(init().day);
-
-  const years = createMemo(() => defaultYearRange(minY(), maxY()));
-
-  const days = createMemo(() => {
-    const dim = daysInMonth(year(), month());
-    const a: number[] = [];
-
-    for (let i = 1; i <= dim; i++) {
-      a.push(i);
-    }
-
-    return a;
-  });
-
-  createEffect(() => {
-    const v = props.value;
-
-    if (v == null) {
-      return;
-    }
-
-    let d = parseDate(v);
-    if (!d) {
-      return;
-    }
-
-    let y = d.getFullYear();
-    let m = d.getMonth() + 1;
-    let dd = d.getDate();
-    y = Math.min(maxY(), Math.max(minY(), y));
-    const dim = daysInMonth(y, m);
-    dd = Math.min(dim, Math.max(1, dd));
-
-    batch(() => {
-      setYear(y);
-      setMonth(m);
-      setDay(dd);
-    });
-  });
-
-  createEffect(() => {
-    minY();
-    maxY();
-    const y = year();
-    const c = Math.min(maxY(), Math.max(minY(), y));
-    if (c !== y) {
-      setYear(c);
-    }
-  });
-
-  createEffect(() => {
-    const dim = daysInMonth(year(), month());
-    if (day() > dim) {
-      setDay(dim);
-    }
-  });
-
-  const emit = (y: number, m: number, d: number) => {
-    const dim = daysInMonth(y, m);
-    const dd = Math.min(dim, Math.max(1, d));
-    props.onValueChange?.(new Date(y, m - 1, dd));
-  };
-
-  const onYear = (y: number) => {
-    setYear(y);
-    const dim = daysInMonth(y, month());
-    const dd = Math.min(dim, day());
-    if (dd !== day()) {
-      setDay(dd);
-    }
-
-    emit(y, month(), dd);
-  };
-
-  const onMonth = (m: number) => {
-    setMonth(m);
-    const dim = daysInMonth(year(), m);
-    const dd = Math.min(dim, day());
-    if (dd !== day()) {
-      setDay(dd);
-    }
-
-    emit(year(), m, dd);
-  };
-
-  const onDay = (d: number) => {
-    setDay(d);
-    emit(year(), month(), d);
-  };
-
-  return (
-    <div
-      class={combineClass('mobile-date-picker', props.class)}
-      {...omitProps(props, ['class', 'value', 'onValueChange', 'minYear', 'maxYear'])}
-    >
-      <MobileDateLoopColumn values={years()} value={year} onChange={onYear} format={(y) => String(y)} />
-      <MobileDateLoopColumn values={monthValues} value={month} onChange={onMonth} format={(m) => pad2(m)} />
-      <MobileDateLoopColumn
-        values={days()}
-        value={day}
-        onChange={onDay}
-        format={(d) => pad2(d)}
-        scrollToken={() => {
-          year();
-          month();
-        }}
-      />
-    </div>
-  );
-};

package/src/components/Popup.tsx

@@ -1,228 +0,0 @@
-import { JSX } from '../jsx';
-import { layout } from '../layout';
-import { omitProps } from '../reactive';
-import { disableAutoCloseEvent, hideMaskLayer, registerAutoClose, showMaskLayer } from '../dom';
-
-const POPUP_TOP_CLASS = 'popup-top';
-const POPUP_RIGHT_CLASS = 'popup-right';
-
-/**
- * 当前弹出层
- */
-const currentPopup = {
-  /**
-   * 当前 DOM 对象
-   */
-  dom: null as HTMLElement,
-  /**
-   * 是否显示了遮罩层
-   */
-  mask: false,
-};
-
-/**
- * 是否使用下拉动画
- */
-let useDropdownTransition = true;
-
-/**
- * 显示遮罩层方法
- */
-let showMaskLayerFn = () => layout['le-480'];
-
-/**
- * 设置是否使用下拉动画
- *
- * @param use 是否使用
- */
-export const setUseDropdownTransition = (use: boolean) => {
-  useDropdownTransition = use;
-};
-
-/**
- * 设置显示遮罩层的方法
- *
- * @param fn 显示遮罩层的方法
- */
-export const setShowMaskLayerFn = (fn: () => boolean) => {
-  showMaskLayerFn = fn || showMaskLayerFn;
-};
-
-const showPopup = (dom: HTMLElement, onPopup?: (dom: HTMLElement) => void | false) => {
-  // 下拉钩子
-  if (onPopup && onPopup(dom) === false) {
-    return;
-  }
-
-  let windowWidth = window.innerWidth;
-  let windowHeight = window.innerHeight;
-  let classList = dom.classList;
-  let style = dom.style;
-
-  // 有下拉
-  if (currentPopup.dom) {
-    // 先关闭
-    hidePopup();
-  }
-
-  // 记录当前弹出层
-  currentPopup.dom = dom;
-
-  if ((currentPopup.mask = showMaskLayerFn())) {
-    showMaskLayer(closePopup);
-  }
-
-  let host = dom.parentNode as HTMLElement;
-
-  // 先显示
-  style.width = host.offsetWidth + 'px';
-  style.height = 'auto';
-  style.display = 'block';
-
-  // 获取宽高及计算位置
-  let width = (dom.firstElementChild as HTMLElement).offsetWidth;
-  let height = dom.offsetHeight;
-  let rect = host.getBoundingClientRect();
-
-  // 同步子组件宽度
-  style.width = width + 'px';
-
-  if (windowHeight - rect.top - rect.height < height + 4 && rect.top >= height) {
-    classList.add(POPUP_TOP_CLASS);
-  } else {
-    classList.remove(POPUP_TOP_CLASS);
-  }
-
-  if (windowWidth - rect.left - rect.width > width + 4 && rect.left >= width) {
-    classList.add(POPUP_RIGHT_CLASS);
-  } else {
-    classList.remove(POPUP_RIGHT_CLASS);
-  }
-
-  // 过渡动画
-  if (useDropdownTransition) {
-    style.height = '0';
-
-    setTimeout(() => {
-      style.height = height + 'px';
-    });
-  }
-};
-
-const hidePopup = () => {
-  let popup = currentPopup;
-  let dom = popup.dom;
-  let style = dom.style;
-
-  currentPopup.dom = null;
-
-  if (popup.mask) {
-    hideMaskLayer();
-  }
-
-  // 过渡动画
-  if (useDropdownTransition) {
-    style.height = dom.offsetHeight + 'px';
-
-    setTimeout(() => {
-      style.height = '0';
-    });
-  } else {
-    style.display = 'none';
-  }
-};
-
-const togglePopup = (dom: HTMLElement, onPopup?: (dom: HTMLElement) => void | false, event?: Event) => {
-  // 有显示下拉
-  if (currentPopup.dom) {
-    // 不是当前下拉框
-    if (currentPopup.dom !== dom) {
-      // 先关闭
-      closePopup();
-    }
-
-    showPopup(dom, onPopup);
-  } else {
-    showPopup(dom, onPopup);
-  }
-
-  event && event.stopPropagation();
-};
-
-const OMIT_PROPS = ['onPopup', 'api', 'children'] as const;
-
-/**
- * 弹出层外部访问接口
- */
-export interface PopupApi {
-  /**
-   * 是否已经弹出
-   */
-  popup: boolean;
-  /**
-   * 打开弹出框
-   */
-  openPopup(): void;
-  /**
-   * 关闭弹出框
-   */
-  closePopup(): void;
-  /**
-   * 显示或关闭弹出层
-   */
-  togglePopup(): void;
-}
-
-/**
- * 弹出层属性
- */
-export interface PopupProps {
-  /**
-   * 弹出对话框钩子
-   */
-  onPopup?: (dom: HTMLElement) => void | false;
-  /**
-   * 外部调用接口
-   */
-  api?: (api: PopupApi) => void;
-}
-
-/**
- * 弹出层组件
- */
-export const Popup = (props?: JSX.HTMLAttributes<never> & PopupProps) => {
-  let popup: HTMLElement;
-
-  // 初始化外部调用接口
-  props.api &&
-    props.api({
-      get popup() {
-        return currentPopup.dom === popup;
-      },
-      openPopup: () => showPopup(popup, props.onPopup),
-      closePopup: () => currentPopup.dom === popup && hidePopup(),
-      togglePopup: () => togglePopup(popup, props.onPopup),
-    });
-
-  return (
-    <div
-      ref={popup as any}
-      class="popup"
-      style={{ display: 'none' }}
-      {...disableAutoCloseEvent}
-      ontransitionend={() => currentPopup.dom === popup || (popup.style.display = 'none')}
-    >
-      <div {...omitProps(props, OMIT_PROPS)}>{props.children}</div>
-    </div>
-  );
-};
-
-/**
- * 关闭当前弹出层
- */
-export const closePopup = () => {
-  currentPopup.dom && hidePopup();
-};
-
-// 注册点击关闭弹出层的方法
-registerAutoClose(closePopup);