china-diff 1.0.1

package/src/components/CollapsiblePanel.tsx

@@ -0,0 +1,139 @@
+import { createSignal, splitProps } from 'solid-js';
+
+import { JSX } from '../jsx';
+import { defineProperty } from '../reactive';
+
+const COLLAPSED_CLASS = 'collapsed';
+
+/**
+ * 可收拢面板外部调用接口
+ */
+export interface CollapsiblePanelApi {
+  /**
+   * 是否收拢
+   */
+  collapsed: boolean;
+
+  /**
+   * 从当前或指定开始大小过渡到指定大小
+   *
+   * @param size 指定大小
+   * @param fromSize 开始大小
+   */
+  transitionTo(size: string, fromSize?: string): void;
+}
+
+/**
+ * 可收拢面板（第一个子项为头部区域，收拢时会增加 class "collapsed"）
+ */
+export const CollapsiblePanel = (
+  props: JSX.HTMLAttributes<never> & {
+    /**
+     * 是否默认收拢
+     */
+    collapsed?: boolean;
+    /**
+     * 收拢时的大小（默认为 ''）
+     */
+    collapsedSize?: string;
+    /**
+     * 自定义获取展开时的大小（默认为滚动区的大小）
+     */
+    getExpandedSize?: () => string;
+    /**
+     * 是否使用过渡动画（需自己设置 height transition，如：will-change: height; transition: height 0.2s linear）
+     */
+    useTransition?: boolean;
+    /**
+     * 外部调用接口
+     */
+    api?: (api: CollapsiblePanelApi) => void;
+  },
+) => {
+  let ref: HTMLElement;
+
+  const [thisProps, restProps] = splitProps(props, [
+    'class',
+    'collapsed',
+    'collapsedSize',
+    'getExpandedSize',
+    'useTransition',
+    'api',
+  ]);
+  const [collapsed, setCollapsed] = createSignal(thisProps.collapsed || false);
+
+  const transitionTo = (size: string, fromSize?: string) => {
+    let style = ref.style;
+    let transition = style.transition;
+
+    style.transition = 'none';
+
+    fromSize && (style.height = fromSize);
+    style.height = ref.offsetHeight + 'px';
+
+    style.transition = transition;
+
+    setTimeout(() => {
+      style.height = size || '';
+    });
+  };
+
+  const update = (value: boolean) => {
+    if (value !== collapsed()) {
+      let classList = ref.classList;
+      let style = ref.style;
+
+      // 设置成收拢状态
+      if (value) {
+        if (thisProps.useTransition) {
+          style.height = ref.offsetHeight + 'px';
+
+          setTimeout(() => {
+            style.height = thisProps.collapsedSize || '';
+            classList.add(COLLAPSED_CLASS);
+          });
+        } else {
+          style.height = thisProps.collapsedSize || '';
+          classList.add(COLLAPSED_CLASS);
+        }
+      } else {
+        let getExpandedSize = thisProps.getExpandedSize;
+
+        // 设置成展开状态
+        if (thisProps.useTransition) {
+          style.height = ref.offsetHeight + 'px';
+
+          setTimeout(() => {
+            style.height = (getExpandedSize && getExpandedSize()) || ref.scrollHeight + 'px';
+            // 移除收拢的 class
+            classList.remove(COLLAPSED_CLASS);
+          });
+        } else {
+          style.height = (getExpandedSize && getExpandedSize()) || '';
+          // 移除收拢的 class
+          classList.remove(COLLAPSED_CLASS);
+        }
+      }
+
+      setCollapsed(value);
+    }
+  };
+
+  thisProps.api &&
+    thisProps.api(
+      defineProperty({ transitionTo }, 'collapsed', {
+        get: collapsed,
+        set: update,
+      }) as CollapsiblePanelApi,
+    );
+
+  return (
+    <div
+      ref={ref as any}
+      class={['collapsed-panel', thisProps.collapsed && COLLAPSED_CLASS, thisProps.class]
+        .filter((item) => item)
+        .join(' ')}
+      {...restProps}
+    ></div>
+  );
+};

package/src/components/ComboBox.tsx

@@ -0,0 +1,163 @@
+import { splitProps } from 'solid-js';
+
+import { JSX } from '../jsx';
+
+import { disableAutoCloseEvent, registerAutoClose } from '../dom';
+
+const POPUP_TOP_CLASS = 'combobox-popup-top';
+const POPUP_RIGHT_CLASS = 'combobox-popup-right';
+
+/**
+ * 当前弹出层
+ */
+let currentPopup: ComboBoxApi;
+
+/**
+ * 关闭当前弹出层
+ */
+export const closePopup = () => {
+  currentPopup && currentPopup.closePupup();
+};
+
+/**
+ * 是否使用下拉动画
+ */
+export let useDropdownTransition = true;
+
+/**
+ * 设置是否使用下拉动画
+ *
+ * @param use 是否使用
+ */
+export const setUseDropdownTransition = (use: boolean) => {
+  useDropdownTransition = use;
+};
+
+// 注册点击关闭弹出层的方法
+registerAutoClose(closePopup);
+
+/**
+ * 下拉框组件外部访问接口
+ */
+export interface ComboBoxApi {
+  /**
+   * 打开弹出框
+   */
+  openPopup(): void;
+  /**
+   * 关闭弹出框
+   */
+  closePupup(): void;
+}
+
+/**
+ * 下拉框组件
+ */
+export const ComboBox = <T, U extends JSX.Element>(
+  props?: JSX.HTMLAttributes<never> & {
+    /**
+     * 值
+     */
+    value?: string;
+    /**
+     * 是否只读
+     */
+    readonly?: boolean;
+    /**
+     * 外部调用接口
+     */
+    api?: (api: ComboBoxApi) => void;
+  },
+) => {
+  let [thisProps, restProps] = splitProps(props, ['class', 'value', 'readonly', 'api', 'children']);
+  let popup: HTMLElement;
+  let opened: boolean;
+
+  const toggle = (event?: Event) => {
+    if (popup) {
+      let combobox = popup.parentNode as HTMLElement;
+      let rect = combobox.getBoundingClientRect();
+      let style = popup.style;
+
+      if ((opened = !opened)) {
+        let windowWidth = window.innerWidth;
+        let windowHeight = window.innerHeight;
+        let classList = popup.classList;
+
+        if (currentPopup) {
+          currentPopup.closePupup();
+        }
+
+        // 设置当前弹出层
+        currentPopup = api;
+
+        style.height = 'auto';
+        style.display = 'block';
+
+        let height = popup.offsetHeight;
+
+        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 >= 0) {
+          classList.add(POPUP_RIGHT_CLASS);
+        } else {
+          classList.remove(POPUP_RIGHT_CLASS);
+        }
+
+        if (useDropdownTransition) {
+          style.height = '0';
+
+          setTimeout(() => {
+            style.height = height + 'px';
+          });
+        }
+      } else {
+        currentPopup = null;
+
+        if (useDropdownTransition) {
+          style.height = popup.offsetHeight + 'px';
+
+          setTimeout(() => {
+            style.height = '0';
+          });
+        } else {
+          style.display = 'none';
+        }
+      }
+    }
+
+    event && event.stopPropagation();
+  };
+
+  const api = {
+    openPopup: () => opened || toggle(),
+    closePupup: () => opened && toggle(),
+  };
+
+  // 初始化外部调用接口
+  props.api && props.api(api);
+
+  return (
+    <div class={'combobox' + (thisProps.class ? ' ' + thisProps.class : '')} {...restProps}>
+      <div class="combobox-host" {...disableAutoCloseEvent} onclick={() => thisProps.readonly && toggle()}>
+        <input value={thisProps.value ?? ''} readonly={thisProps.readonly} style={{ border: 'none' }}></input>
+        <svg class="icon icon-s" aria-hidden={true} style={{ height: '100%', padding: '0 4px' }} onclick={toggle}>
+          <use href="#icon-dropdown"></use>
+        </svg>
+      </div>
+      <div
+        ref={popup as any}
+        class="combobox-popup"
+        style={{ display: 'none' }}
+        {...disableAutoCloseEvent}
+        ontransitionend={() => opened || (popup.style.display = 'none')}
+      >
+        {thisProps.children}
+      </div>
+    </div>
+  );
+};

package/src/components/Dialog.tsx

@@ -0,0 +1,36 @@
+import { createRoot } from 'solid-js';
+
+import { JSX } from '../jsx';
+
+/**
+ * 对话框
+ */
+export type Dialog = HTMLElement & {
+  /**
+   * 关闭对话框方法
+   */
+  close(): void;
+};
+
+/**
+ * 显示对话框
+ *
+ * @param component 对话框组件
+ * @returns 关闭对话框方法
+ */
+export const showDialog = (component: () => JSX.Element): Dialog => {
+  return createRoot((dispose) => {
+    let body = document.body;
+    let dialog = component() as Dialog;
+
+    dialog.style.cssText = 'position:fixed;z-index:9';
+    body.appendChild(dialog);
+
+    dialog.close = () => {
+      body.removeChild(dialog);
+      dispose();
+    };
+
+    return dialog;
+  });
+};

package/src/components/For.tsx

@@ -0,0 +1,26 @@
+import { createMemo, mapArray } from 'solid-js';
+
+import { JSX } from '../jsx';
+
+export const For = <T, U extends JSX.Element>(props: {
+  /**
+   * 要循环的数据集合
+   */
+  each: readonly T[];
+  /**
+   * 子节点
+   *
+   * @param item 数据项
+   * @param index 索引
+   * @returns JSX.Element
+   */
+  children: (item: T, index: () => number) => U;
+}) => {
+  return createMemo(
+    mapArray(() => props.each, props.children),
+    void 0,
+    {
+      name: 'value',
+    }
+  ) as unknown as JSX.Element;
+};

package/src/components/Icon.tsx

@@ -0,0 +1,39 @@
+import { splitProps } from 'solid-js';
+
+import { JSX } from '../jsx';
+
+/**
+ * 图标组件
+ */
+export const Icon = (props?: JSX.SvgSVGAttributes<never> & { name: string }) => {
+  let [thisProps, restProps] = splitProps(props, ['class', 'name']);
+
+  return (
+    <svg class={'icon' + (thisProps.class ? ' ' + thisProps.class : '')} aria-hidden={true} {...restProps}>
+      <use href={'#icon-' + thisProps.name}></use>
+    </svg>
+  );
+};
+
+/**
+ * 加载 svg 图标集
+ *
+ * @param svgSymbols svg symbol 内容（由 icons 构建工具生成）
+ */
+export const loadSvgIcons = (svgSymbols: string) => {
+  let body = document.body;
+  let svg = document.getElementById('ICONS');
+
+  if (svg) {
+    svg.insertAdjacentHTML('beforeend', svgSymbols);
+  } else {
+    svg = document.createElement('svg');
+    svg.id = 'ICONS';
+    svg.ariaHidden = 'true';
+    svg.style.cssText = 'position:absolute;width:0px;height:0px;overflow:hidden;';
+    svg.innerHTML = svgSymbols;
+    svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+
+    body.insertBefore(svg, body.firstChild);
+  }
+};

package/src/components/If.tsx

@@ -0,0 +1,14 @@
+import { createMemo } from 'solid-js';
+
+import { JSX } from '../jsx';
+
+/**
+ * 条件渲染
+ *
+ * @param props 属性集合
+ */
+export const If = (props: { when: any; children: JSX.Element | JSX.Element[]; else?: JSX.Element | JSX.Element[] }) => {
+  return createMemo(() => {
+    return props.when ? props.children : props.else;
+  }) as unknown as JSX.Element;
+};

package/src/components/KeepAlive.tsx

@@ -0,0 +1,26 @@
+import { JSX, createMemo, createRoot, onCleanup } from 'solid-js';
+
+export const KeepAlive = (props: {
+  /**
+   * 是否显示
+   */
+  show: boolean;
+  children: JSX.Element | JSX.Element[];
+}) => {
+  let root, ondestory;
+
+  onCleanup(() => {
+    ondestory && ondestory();
+  });
+
+  return createMemo(() => {
+    return (
+      props.show &&
+      (root ||
+        (root = createRoot((dispose) => {
+          ondestory = dispose;
+          return props.children;
+        })))
+    );
+  }) as unknown as JSX.Element;
+};

package/src/components/Pulldown.tsx

@@ -0,0 +1,157 @@
+// import { onCleanup, onMount, splitProps } from 'solid-js';
+
+// import { JSX } from '../jsx';
+// import { addEventListener, removeEventListener } from '../dom';
+
+// /**
+//  * 下拉状态
+//  */
+// const state = {
+//   /**
+//    * 订阅数量
+//    */
+//   count: 0,
+//   /**
+//    * 按下时位置
+//    */
+//   y: 0,
+
+//   /**
+//    * 按下时的时间
+//    */
+//   time: 0,
+
+//   /**
+//    * 下拉组件节点
+//    */
+//   pulldown: null as HTMLElement,
+//   drag: null as HTMLElement,
+//   ready: null as HTMLElement,
+// };
+
+// const ontouchstart = (event: TouchEvent) => {
+//   let pulldown = (state.pulldown = document.querySelector('.pulldown'));
+
+//   state.y = (event.changedTouches[0] || event.touches[0]).screenY;
+
+//   if (pulldown) {
+//     let drag = (state.drag = pulldown.querySelector('.pulldown-drag'));
+//     let ready = (state.ready = pulldown.querySelector('.pulldown-ready'));
+
+//     if (drag || ready) {
+//       state.time = Date.now();
+
+//       // 有滚动则停止下拉
+//       addEventListener('scroll', removeListener, true);
+
+//       addEventListener('touchmove', ontouchmove, true);
+//       addEventListener('touchend', ontouchend, true);
+//     } else {
+//       console.error('Pulldown no pulldown-drag and pulldown-ready class child node');
+//     }
+//   }
+// };
+
+// const ontouchmove = (event: TouchEvent) => {
+//   let screenY = (event.changedTouches[0] || event.touches[0]).screenY;
+//   let distance = screenY - state.y;
+//   let pulldown = state.pulldown;
+//   let style = pulldown.style;
+
+//   if (distance <= 40 || Date.now() - state.time < 200) {
+//     style.display = 'none';
+//     return;
+//   }
+
+//   // 已经开始下拉
+//   if (style.display !== 'none') {
+//   } else {
+//     // 最小移动 20 像素的距离才显示
+//     style.display = 'flex';
+//     style.justifyContent = style.alignItems = 'center';
+//   }
+
+//   state.drag.style.display = distance <= 60 ? '' : 'none';
+//   state.ready.style.display = distance > 60 ? '' : 'none';
+
+//   style.height = distance + 'px';
+// };
+
+// const removeListener = () => {
+//   let pulldown = state.pulldown;
+//   let ready = state.ready;
+
+//   removeEventListener('scroll', removeListener, true);
+
+//   removeEventListener('touchmove', ontouchmove, true);
+//   removeEventListener('touchend', ontouchend, true);
+
+//   state.pulldown = state.drag = state.ready = null;
+
+//   if (pulldown && pulldown.style.display !== 'none') {
+//     pulldown.style.display = 'none';
+
+//     if (ready && ready.style.display !== 'none') {
+//       return pulldown;
+//     }
+//   }
+// };
+
+// const ontouchend = (event: TouchEvent) => {
+//   let pulldown = removeListener();
+
+//   if (pulldown) {
+//     pulldown.dispatchEvent(new Event('refresh'));
+//   }
+// };
+
+// /**
+//  * 默认子控件
+//  */
+// let pulldownChildren;
+
+// /**
+//  * 设置下拉刷新默认子组件
+//  *
+//  * @param children 子组件集合（需包含 class 分别为 pulldown-drag 及 pulldown-ready 的两个元素）
+//  */
+// export const setPulldownChildren = (children: JSX.Element | JSX.Element[]) => {
+//   pulldownChildren = children;
+// };
+
+// /**
+//  * 下拉刷新
+//  *
+//  * @param props 属性集
+//  */
+// export const Pulldown = (props: JSX.HTMLAttributes<never> & { onrefresh: Function }) => {
+//   const [thisProps, restProps] = splitProps(props, ['class', 'onrefresh', 'children']);
+//   let ref;
+
+//   onMount(() => {
+//     if (state.count++) {
+//     } else {
+//       addEventListener('touchstart', ontouchstart);
+//     }
+//   });
+
+//   onCleanup(() => {
+//     if (--state.count) {
+//     } else {
+//       removeEventListener('touchstart', ontouchstart);
+//     }
+//   });
+
+//   return (
+//     <div ref={ref} class={'pulldown' + (thisProps.class ? ' ' + thisProps.class : '')} {...restProps}>
+//       {props.children ||
+//         pulldownChildren ||
+//         (pulldownChildren = (
+//           <>
+//             <div class="pulldown-drag">下拉刷新</div>
+//             <div class="pulldown-ready">释放立即刷新</div>
+//           </>
+//         ))}
+//     </div>
+//   );
+// };

package/src/components/Switch.tsx

@@ -0,0 +1,49 @@
+import { JSX, createMemo, createRoot, onCleanup } from 'solid-js';
+
+export interface SwitchProps {
+  /**
+   * 要切换的分支
+   */
+  case?: {
+    /**
+     * 目标组件
+     */
+    component: () => JSX.Element;
+    /**
+     * 捉拿
+     */
+    keepalive?: string;
+  };
+}
+
+export const Switch = (props: SwitchProps) => {
+  let roots = {};
+  let disposes = {};
+
+  onCleanup(() => {
+    for (let key in disposes) {
+      disposes[key]();
+    }
+
+    roots = disposes = null;
+  });
+
+  return createMemo(() => {
+    let branch = props.case;
+    let keepalive;
+
+    if (branch) {
+      if ((keepalive = branch.keepalive)) {
+        return (
+          roots[keepalive] ||
+          (roots[keepalive] = createRoot((dispose) => {
+            disposes[keepalive] = dispose;
+            return branch.component();
+          }))
+        );
+      }
+
+      return branch.component();
+    }
+  }) as unknown as JSX.Element;
+};