plain-design 1.0.0-beta.10 → 1.0.0-beta.101

package/src/packages/uses/useCollapseStyles.tsx

@@ -0,0 +1,56 @@
+import {computed, iTransitionEvent, reactive, StyleProperties, useStyleCache, watch} from "plain-design-composition";
+import {delay} from "plain-utils/utils/delay";
+
+export function useCollapseStyles(
+  {
+    isShow,
+    active,
+    inactive
+  }: {
+    isShow: () => boolean,
+    active: () => StyleProperties,
+    inactive: () => StyleProperties,
+  }
+) {
+
+  const state = (() => {
+    const show = isShow();
+    return reactive({
+      isMount: show,
+      styles: show ? active() : inactive(),
+
+      onTransitionEnd: undefined as undefined | ((e: iTransitionEvent) => void)
+    });
+  })();
+
+  watch(() => isShow(), async show => {
+    if (show) {
+      if (!state.isMount) {
+        state.isMount = true;
+        await delay(23);
+      }
+      state.styles = active();
+      state.onTransitionEnd = undefined;
+    } else {
+      if (!state.isMount) {
+        return;
+      }
+      await delay(23);
+      state.styles = inactive();
+      state.onTransitionEnd = () => {
+        state.isMount = false;
+        state.onTransitionEnd = undefined;
+      };
+    }
+  });
+
+  const styles = useStyleCache(styles => {
+    Object.assign(styles, state.styles);
+  });
+
+  return reactive({
+    styles,
+    show: computed(() => state.isMount),
+    onTransitionEnd: (e: iTransitionEvent) => state.onTransitionEnd?.(e)
+  });
+}

package/src/packages/uses/useDragHorizontalScroll.ts

@@ -0,0 +1,82 @@
+import {createEffects} from "plain-utils/utils/createEffects";
+import {ClientZoom} from "../utils/ClientZoom";
+import {watch} from "plain-design-composition";
+
+export function useDragHorizontalScroll(getEl: () => HTMLElement | null | undefined, config?: { onDragStart: () => void, onDragEnd: () => void }) {
+
+  const staticState = {
+    isDragging: false,
+    el: null as null | undefined | HTMLElement,
+    start: {
+      x: 0,
+      left: 0,
+      width: 0,
+    },
+    move: {
+      x: 0
+    }
+  };
+
+  const { effects } = createEffects();
+
+  const handler = {
+    mousedown: (e: MouseEvent) => {
+      const { clientX } = ClientZoom.getClientPosition(e);
+      staticState.isDragging = false;
+      staticState.start = {
+        x: clientX,
+        left: staticState.el!.scrollLeft,
+        width: staticState.el!.scrollWidth,
+      };
+      document.documentElement.addEventListener('mousemove', handler.mousemove, true);
+      document.documentElement.addEventListener('mouseup', handler.mouseup, true);
+    },
+    mousemove: (e: MouseEvent) => {
+      const { clientX } = ClientZoom.getClientPosition(e);
+      staticState.move.x = clientX;
+      const durX = staticState.move.x - staticState.start.x;
+      if (!staticState.isDragging) {
+        if (Math.abs(durX) > 5) {
+          staticState.isDragging = true;
+          config?.onDragStart();
+        }
+      }
+      if (!staticState.isDragging) {
+        return;
+      }
+      staticState.el!.scrollLeft = staticState.start.left - durX;
+    },
+    mouseup: () => {
+      config?.onDragEnd();
+      document.documentElement.removeEventListener('mousemove', handler.mousemove, true);
+      document.documentElement.removeEventListener('mouseup', handler.mouseup, true);
+    },
+    onWheel: (e: WheelEvent) => {
+      e.stopPropagation();
+      e.preventDefault();
+      const el = e.currentTarget as HTMLElement;
+      const delta = e.deltaX + e.deltaY;
+      el.scrollLeft += delta;
+    },
+  };
+
+  effects.push(watch(() => getEl(), el => {
+    if (!!staticState.el) {
+      staticState.el.removeEventListener('mousedown', handler.mousedown);
+      staticState.el.removeEventListener('wheel', handler.onWheel);
+    }
+    staticState.el = el;
+    if (!staticState.el) {return;}
+    staticState.el.addEventListener('mousedown', handler.mousedown);
+    staticState.el.addEventListener('wheel', handler.onWheel);
+  }));
+
+  effects.push(() => {
+    if (!!staticState.el) {
+      staticState.el.removeEventListener('mousedown', handler.mousedown);
+      staticState.el.removeEventListener('wheel', handler.onWheel);
+    }
+  });
+
+  return effects.clear;
+}

package/src/packages/uses/useEdit.ts

@@ -14,7 +14,7 @@ export const EditProps = {
   multiple: { type: Boolean },                                            // 是否多选
 } as const;
 
-interface EditProvideData {
+export interface EditProvideData {
   disabled: boolean | null,
   readonly: boolean | null,
   loading: boolean | null,
@@ -74,6 +74,10 @@ export const useEdit = useFunctionWrapper(
       }
     }
 
+    onBeforeUnmount(() => {
+      editComputed.effect.stop();
+    });
+
     return {
       editState,
       editComputed,

package/src/packages/uses/useStyle.tsx

@@ -1,4 +1,4 @@
-import {computed, inject, PropType, provide} from "plain-design-composition";
+import {computed, inject, onBeforeUnmount, PropType, provide} from "plain-design-composition";
 import {useFunctionWrapper} from "./useFunctionWrapper";
 import {createEnum} from "plain-utils/utils/createEnum";
 import {ApplicationConfigurationProvider} from "../components/Application/utils/application.utils";
@@ -8,25 +8,30 @@ import {ApplicationConfigurationProvider} from "../components/Application/utils/
  * @author  韦胜健
  * @date    2022.4.27 0:22
  */
-export const ThemeMode = createEnum(['fill', 'flat', 'outline', 'text'] as const);
+export const ThemeMode = createEnum(['fill', 'flat', 'outline', 'text', 'stroke'] as const);
 export const ThemeStatus = createEnum(['secondary', 'primary', 'success', 'warn', 'error'] as const);
 export const ThemeShape = createEnum(['square', 'round', 'none'] as const);
 export const ThemeSize = createEnum(['large', 'normal', 'small', 'mini'] as const);
+export const InputMode = createEnum(['flat', 'stroke', 'text'] as const);
 
 export const StyleProps = {
   shape: { type: String as PropType<typeof ThemeShape.TYPE> },                      //  'square', 'round'
   size: { type: String as PropType<typeof ThemeSize.TYPE> },                        //  'large', 'normal', 'small', 'mini'
   status: { type: String as PropType<typeof ThemeStatus.TYPE> },                    //  'secondary', 'primary', 'success', 'warn', 'error'
+  inputMode: { type: String as PropType<typeof InputMode.TYPE> },                   // input的样式类型,flat填充，stroke线型
 } as const;
 
-interface UseStyleProvideData {
+export interface UseStyleProvideData {
   shape: typeof ThemeShape.TYPE,
   size: typeof ThemeSize.TYPE,
   status?: typeof ThemeStatus.TYPE,
+  inputMode?: typeof InputMode.TYPE,
+
   default: {
     shape: typeof ThemeShape.TYPE,
     size: typeof ThemeSize.TYPE,
-    inputMode: 'stroke' | 'flat',
+    inputMode: typeof InputMode.TYPE,
+    buttonMode: typeof ThemeMode.TYPE,
   },
 }
 
@@ -42,14 +47,15 @@ export const useStyle = useFunctionWrapper('style', (ctx, option: UseStyleOption
   const parent = inject(USE_STYLE_PROVIDER, null) as null | { value: UseStyleProvideData };
 
   const styleComputed = computed(() => {
-    const defaultData = Object.assign({ shape: applicationConfiguration.value.default.shape, size: applicationConfiguration.value.default.size }, option);
+    const defaultData = Object.assign({ shape: applicationConfiguration.value.default.shape, size: applicationConfiguration.value.default.size, inputMode: applicationConfiguration.value.default.inputMode }, option);
 
-    const { shape, size, status } = ctx.props;
+    const { shape, size, status, inputMode } = ctx.props;
     const parentData = !!parent ? parent.value : {} as any;
     let data: UseStyleProvideData = {
       shape: shape || parentData.shape || defaultData.shape,
       size: size || parentData.size || defaultData.size,
       status: status || parentData.status || defaultData.status,
+      inputMode: inputMode || parentData.inputMode || defaultData.inputMode,
       default: applicationConfiguration.value.default
     };
     if (!!defaultData.adjust) {
@@ -62,6 +68,14 @@ export const useStyle = useFunctionWrapper('style', (ctx, option: UseStyleOption
 
   provide(USE_STYLE_PROVIDER, styleComputed);
 
+  onBeforeUnmount(() => {
+    setTimeout(() => {
+      (styleComputed.value as any).ctx = null;
+      (styleComputed.value as any).parent = null;
+      styleComputed.effect.stop();
+    });
+  });
+
   return { styleComputed };
 });
 

package/src/packages/utils/ComponentUtils.ts

@@ -0,0 +1,10 @@
+export const ComponentUtils = {
+  /**
+   * 适配taro ui的一些写法
+   * @author  韦胜健
+   * @date    2024/1/3 16:48
+   */
+  getElInfo: async (selector: string) => {
+    return document.querySelector(selector)!.getBoundingClientRect();
+  },
+};

package/src/packages/utils/buildCycleIndexList.ts

@@ -0,0 +1,31 @@
+export function buildCycleIndexList({ length, current }: { length: number, current: number }) {
+
+  const sourceList = new Array(length).fill(null).map((_, index) => index);
+  const cycleIndexList = (() => {
+
+    if (sourceList.length <= 2) {
+      return sourceList;
+    }
+
+    const leftList = sourceList.slice(0, current);
+    const rightList = sourceList.slice(current + 1);
+
+    while (Math.abs(leftList.length - rightList.length) >= 2) {
+      if (leftList.length > rightList.length) {
+        rightList.push(leftList.shift()!);
+      } else {
+        leftList.unshift(rightList.pop()!);
+      }
+    }
+    return [...leftList, current, ...rightList];
+  })();
+
+  const currentIndexInCycle = cycleIndexList.indexOf(current);
+
+  const index2distance = cycleIndexList.reduce((prev, item, cycleIndex) => {
+    prev[item] = cycleIndex - currentIndexInCycle;
+    return prev;
+  }, {} as Record<number, number>);
+
+  return { cycleIndexList, currentIndexInCycle, index2distance };
+}

package/src/packages/utils/createDraggier.ts

@@ -0,0 +1,256 @@
+import {iMouseEvent, iTouchEvent} from "plain-design-composition";
+import {MouseEvent, TouchEvent} from "react";
+import {deepcopy} from "plain-utils/object/deepcopy";
+import {doNothing} from "plain-utils/utils/doNothing";
+import {createEffects, iEffects} from "plain-utils/utils/createEffects";
+import {addWindowListener} from "plain-utils/dom/addWindowListener";
+import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
+import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
+
+/**
+ * 拖拽时调用回调函数的数据类型
+ * @author  韦胜健
+ * @date    2024/5/27 11:38
+ */
+export interface iDraggierData {
+  staticState: iDraggierState,
+  draggierEffects: iEffects,
+  e: any
+}
+
+/**
+ * 拖拽回调函数类型
+ * @author  韦胜健
+ * @date    2024/5/27 11:38
+ */
+export interface iDraggierHandler {
+  (draggierData: iDraggierData): void;
+}
+
+/**
+ * 拖拽配置类型
+ * @author  韦胜健
+ * @date    2024/5/27 11:38
+ */
+export interface iDraggierConfig {
+  minDurSpace: number,              // 开始拖拽的最小移动距离
+  horizontal: boolean,              // 可以横向拖拽
+  vertical: boolean,                // 可以纵向拖拽
+  onInit: iDraggierHandler,         // 初始化动作，鼠标/手指摁下时触发；此时可能是拖拽，也可能是点击
+  onStart: iDraggierHandler,        // 拖拽开始，拖拽超过一定距离之后的首次触发动作，此时一定是拖拽
+  onMove: iDraggierHandler,         // 拖拽移动中，拖拽超过一定距离之后随着鼠标/手指移动频繁触发的移动动作
+  onEnd: iDraggierHandler,          // 拖拽结束，与onStart同理，超过一定距离之后松开鼠标/手指之后触发
+  onTap: iDraggierHandler,          // 拖拽没有超过一定距离之后就松开鼠标/手指，识别为点击动作
+}
+
+/**
+ * 适配web端的拖拽配置类型
+ * @author  韦胜健
+ * @date    2024/5/27 11:39
+ */
+export interface iDraggierWebConfig {
+  disableUserSelect?: boolean,      // 拖拽过程中禁用用户选择
+}
+
+/**
+ * 适配小程序端的拖拽配置类型
+ * @author  韦胜健
+ * @date    2024/5/27 11:39
+ */
+export interface iDraggierMpConfig {
+  mpOption?: any;
+}
+
+/**
+ * 拖拽时的内部状态
+ * @author  韦胜健
+ * @date    2024/5/27 11:39
+ */
+export interface iDraggierState {
+  startX: number,                   // 拖拽开始时鼠标x轴定位
+  startY: number,                   // 拖拽开始时鼠标y轴定位
+  moveX: number,                    // 拖拽移动时鼠标x轴定位
+  moveY: number,                    // 拖拽移动时鼠标y轴定位
+  durX: number,                     // 拖拽移动时鼠标x轴移动距离
+  durY: number,                     // 拖拽移动时鼠标y轴移动距离
+  isTouching: boolean,              // 是否已经鼠标/手指摁下
+  isDragging: boolean,              // 当前是否已经开启拖拽状态
+}
+
+/**
+ * 拖拽的内部状态的初始值
+ * @author  韦胜健
+ * @date    2024/5/27 11:40
+ */
+export const INITIAL_DRAGGIER_STATE: iDraggierState = {
+  startX: 0,
+  startY: 0,
+  moveX: 0,
+  moveY: 0,
+  durX: 0,
+  durY: 0,
+  isTouching: false,
+  isDragging: false,
+};
+
+/**
+ * 创建一个拖拽管理对象
+ * @author  韦胜健
+ * @date    2024/5/27 11:40
+ */
+const createDraggier = (_config: Partial<iDraggierConfig>) => {
+  const config: iDraggierConfig = {
+    minDurSpace: 5,
+    horizontal: true,
+    vertical: true,
+    onInit: doNothing,
+    onStart: doNothing,
+    onMove: doNothing,
+    onEnd: doNothing,
+    onTap: doNothing,
+    ..._config,
+  };
+
+  const staticState = deepcopy(INITIAL_DRAGGIER_STATE);
+  const { effects: draggierEffects } = createEffects();
+
+  const getDraggierData = (e: any): iDraggierData => ({ draggierEffects, staticState, e });
+
+  /**
+   * 开始触发拖拽动作
+   * @author  韦胜健
+   * @date    2024/5/27 11:40
+   */
+  const start = (e: iMouseEvent | iTouchEvent | MouseEvent | TouchEvent) => {
+    draggierEffects.clear();
+
+    const { clientX, clientY } = 'touches' in e ? e.touches[0] : e;
+
+    Object.assign(staticState, deepcopy(INITIAL_DRAGGIER_STATE));
+    draggierEffects.push(() => Object.assign(staticState, deepcopy(INITIAL_DRAGGIER_STATE)));
+
+    if (config.horizontal) {
+      staticState.startX = staticState.moveX = clientX;
+    }
+
+    if (config.vertical) {
+      staticState.startY = staticState.moveY = clientY;
+    }
+
+    staticState.isTouching = true;
+
+    draggierEffects.push(() => {
+      staticState.isTouching = false;
+    });
+
+    config.onInit(getDraggierData(e));
+  };
+
+  /**
+   * 移动中，超过一定距离才会触发真正的拖拽移动事件
+   * @author  韦胜健
+   * @date    2024/5/27 11:41
+   */
+  const move = (e: MouseEvent | TouchEvent | iMouseEvent | iTouchEvent) => {
+    if (!staticState.isTouching) {
+      return;
+    }
+
+    const { clientX, clientY } = 'touches' in e ? e.touches[0] : e;
+
+    if (config.horizontal) {
+      staticState.moveX = clientX;
+      staticState.durX = staticState.moveX - staticState.startX;
+    }
+
+    if (config.vertical) {
+      staticState.moveY = clientY;
+      staticState.durY = staticState.moveY - staticState.startY;
+    }
+
+    if (!staticState.isDragging) {
+      if (config.horizontal && Math.abs(staticState.durX) > config.minDurSpace) {
+        staticState.isDragging = true;
+        config.onStart(getDraggierData(e));
+        draggierEffects.push(() => config.onEnd(getDraggierData(e)));
+      }
+    }
+
+    if (!staticState.isDragging) {
+      if (config.vertical && Math.abs(staticState.durY) > config.minDurSpace) {
+        staticState.isDragging = true;
+        config.onStart(getDraggierData(e));
+        draggierEffects.push(() => config.onEnd(getDraggierData(e)));
+      }
+    }
+
+    if (!staticState.isDragging) {
+      return;
+    }
+
+    config.onMove(getDraggierData(e));
+  };
+
+  /**
+   * 拖拽结束
+   * @author  韦胜健
+   * @date    2024/5/27 11:41
+   */
+  const end = (e: iMouseEvent | iTouchEvent | MouseEvent | TouchEvent) => {
+    if (!staticState.isTouching) {return;}
+    if (!staticState.isDragging) {config.onTap(getDraggierData(e));}
+    draggierEffects.clear();
+  };
+
+  return {
+    staticState,
+    draggierEffects,
+    start,
+    move,
+    end,
+  };
+};
+
+/**
+ * 拖拽对象
+ * @author  韦胜健
+ * @date    2024/5/27 11:41
+ */
+export type iDraggier = ReturnType<typeof createDraggier>
+
+/**
+ * 创建一个适配web端的拖拽管理对象
+ * @author  韦胜健
+ * @date    2024/5/27 11:41
+ */
+export function createWebDraggier(_config: Partial<iDraggierConfig> & iDraggierWebConfig) {
+  const draggier = createDraggier({
+    ..._config,
+    onInit: (draggierData) => {
+      draggierData.draggierEffects.push(addWindowListener('mousemove', draggier.move as any));
+      draggierData.draggierEffects.push(addWindowListener('touchmove', draggier.move as any));
+      draggierData.draggierEffects.push(addWindowListener('mouseup', draggier.end as any));
+      draggierData.draggierEffects.push(addWindowListener('touchend', draggier.end as any));
+      _config.onInit?.(draggierData);
+    },
+    onStart: (draggierData) => {
+      if (_config.disableUserSelect !== false) {
+        disabledUserSelect();
+        draggierData.draggierEffects.push(() => {
+          enableUserSelect();
+        });
+      }
+      _config.onStart?.(draggierData);
+    },
+  });
+  return draggier;
+}
+
+/**
+ * 创建一个适配小程序端的draggier对象
+ * @author  韦胜健
+ * @date    2024/5/27 11:46
+ */
+export function createMpDraggier(_config: Partial<iDraggierConfig>) {
+  return createDraggier(_config);
+}

package/src/packages/utils/createListUtils.ts

@@ -0,0 +1,38 @@
+export function createListUtils<T>(
+  {
+    getList,
+    current,
+  }: {
+    getList: () => T[],
+    current: () => number | undefined | null,
+  }
+) {
+  return {
+    prevIndex: () => {
+      const list = getList();
+      if (!list.length) {
+        return -1;
+      }
+      let curIdx = current();
+      if (curIdx == null || curIdx - 1 < 0) {
+        curIdx = list.length - 1;
+      } else {
+        curIdx = curIdx - 1;
+      }
+      return curIdx;
+    },
+    nextIndex: () => {
+      const list = getList();
+      if (!list.length) {
+        return -1;
+      }
+      let curIdx = current();
+      if (curIdx == null || curIdx + 1 > list.length - 1) {
+        curIdx = 0;
+      } else {
+        curIdx = curIdx + 1;
+      }
+      return curIdx;
+    },
+  };
+}

package/src/packages/utils/findReactElement.tsx

@@ -4,7 +4,7 @@ import {RenderNode} from "plain-design-composition";
 
 type FindRenderNode = Exclude<ReactNode, string | number | null | undefined | void | boolean>
 
-export function findReactElement(node: ReactNode, isMatch: (node: FindRenderNode) => boolean): ReactNode[] | null {
+export function findReactElement(node: ReactNode, isMatch: (node: any) => boolean): ReactNode[] | null {
 
   /*内容为空，不匹配*/
   if (node == null) {return null;}
@@ -63,7 +63,7 @@ export function findReactElement(node: ReactNode, isMatch: (node: FindRenderNode
  * @author  韦胜健
  * @date    2022/10/28 9:53
  */
-function processArrayRenderNode({ array, ret, isMatch }: { array: RenderNode[], ret: FindRenderNode[], isMatch: (node: FindRenderNode) => boolean }) {
+function processArrayRenderNode({ array, ret, isMatch }: { array: RenderNode[], ret: FindRenderNode[], isMatch: (node: any) => boolean }) {
   array.forEach(n => {
     const findList = findReactElement(n, isMatch);
     if (!!findList && findList.length > 0) {

package/src/packages/utils/getDeviceInfo.ts

@@ -9,50 +9,50 @@ interface iDeviceInfo {
   osType: typeof eOsType.TYPE,
 }
 
-export const getDeviceInfo = (() => {
-  let info: iDeviceInfo | null = null;
-
-  return () => {
-    if (isSSR()) {
-      throw new Error('服务端渲染的情况下不可以获取设备信息');
-    }
-    if (!info) {
-      const userAgent = navigator.userAgent;
-
-      info = {
-        deviceType: (() => {
-          const isMobile = /Mobile|Android|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
-          if (isMobile) {
-            return eDeviceType.mobile;
-          }
-          if (/iPad|Android/i.test(userAgent) && !isMobile) {
-            return eDeviceType.tablet;
-          }
-          return eDeviceType.desktop;
-        })(),
-        osType: (() => {
-          if (/Win/i.test(userAgent)) {
-            return eOsType.win;
-          }
-          if (/Mac/i.test(userAgent)) {
-            return eOsType.mac;
-          }
-          if (/Linux/i.test(userAgent)) {
-            return eOsType.linux;
-          }
-          if (/iPad|iPhone|iPod/.test(userAgent) && !(window as any).MSStream) {
-            return eOsType.ios;
-          }
-          if (/Android/.test(userAgent)) {
-            return eOsType.android;
-          }
-          return 'unknown';
-        })()
-      };
-    }
-    return info;
-  };
-})();
+let info: iDeviceInfo | null = null;
+
+export const getDeviceInfo = () => {
+  if (isSSR()) {
+    throw new Error('服务端渲染的情况下不可以获取设备信息');
+  }
+  if (!info) {
+    const userAgent = navigator.userAgent;
+
+    info = {
+      deviceType: (() => {
+        const isMobile = /Mobile|Android|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
+        if (isMobile) {
+          return eDeviceType.mobile;
+        }
+        if (/iPad|Android/i.test(userAgent) && !isMobile) {
+          return eDeviceType.tablet;
+        }
+        return eDeviceType.desktop;
+      })(),
+      osType: (() => {
+        if (/Win/i.test(userAgent)) {
+          return eOsType.win;
+        }
+        if (/Mac/i.test(userAgent)) {
+          return eOsType.mac;
+        }
+        if (/Linux/i.test(userAgent)) {
+          return eOsType.linux;
+        }
+        if (/iPad|iPhone|iPod/.test(userAgent) && !(window as any).MSStream) {
+          return eOsType.ios;
+        }
+        if (/Android/.test(userAgent)) {
+          return eOsType.android;
+        }
+        return 'unknown';
+      })()
+    };
+  }
+  return info;
+};
+
+export const clearDeviceInfo = () => {info = null;};
 
 export const isPC = () => getDeviceInfo().deviceType === eDeviceType.desktop;