plain-design 1.0.0-beta.12 → 1.0.0-beta.120

package/src/packages/utils/createDraggier.ts

@@ -0,0 +1,256 @@
+import {iMouseEvent, iTouchEvent} from "@peryl/react-compose";
+import {MouseEvent, TouchEvent} from "react";
+import {deepcopy} from "@peryl/utils/deepcopy";
+import {doNothing} from "@peryl/utils/doNothing";
+import {createEffects, iEffects} from "@peryl/utils/createEffects";
+import {addWindowListener} from "@peryl/utils/addWindowListener";
+import {disabledUserSelect} from "@peryl/utils/disabledUserSelect";
+import {enableUserSelect} from "@peryl/utils/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/createFlagManager.ts

@@ -3,7 +3,7 @@
  * @author  韦胜健
  * @date    2020/11/27 11:38
  */
-import {reactive, UnwrapRef} from "plain-design-composition";
+import {reactive, UnwrapRef} from "@peryl/react-compose";
 
 export function createFlagManager<T = boolean>() {
   return {

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

@@ -1,10 +1,10 @@
 import {ReactNode} from "react";
 import {isElement, isFragment} from 'react-is';
-import {RenderNode} from "plain-design-composition";
+import {RenderNode} from "@peryl/react-compose";
 
 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

@@ -1,4 +1,4 @@
-import {createEnum} from "plain-utils/utils/createEnum";
+import {createEnum} from "@peryl/utils/createEnum";
 import {isSSR} from "./isSSR";
 
 export const eDeviceType = createEnum(['mobile', 'tablet', 'desktop'] as const);
@@ -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;
 

package/src/packages/utils/getRowEl.ts

@@ -3,8 +3,8 @@
  * @author  韦胜健
  * @date    2020/8/19 23:55
  */
-import {hasClass} from "plain-utils/dom/hasClass";
-import {iMouseEvent} from "plain-design-composition";
+import {hasClass} from "@peryl/utils/hasClass";
+import {iMouseEvent} from "@peryl/react-compose";
 
 /**
  * 节点位置信息

package/src/packages/utils/incrementalMerge.ts

@@ -1,4 +1,4 @@
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 
 export function incrementalMerge(sourceObject: PlainObject, newObject: PlainObject) {
   return Object.keys({ ...sourceObject, ...newObject }).reduce((prev, key) => {

package/src/packages/utils/inheritSlots.ts

@@ -0,0 +1,30 @@
+import {RenderNode} from "@peryl/react-compose";
+
+export function inheritSlots<
+  Slots extends Record<string, (() => RenderNode) & { isExist: () => boolean }>,
+  ScopeSlots extends Record<string, ((...args: any[]) => RenderNode) & { isExist: () => boolean }>,
+>(
+  {
+    slots,
+    scopeSlots,
+    defaultSlots,
+    defaultScopeSlots,
+  }: {
+    slots?: Slots,
+    scopeSlots?: ScopeSlots,
+    defaultSlots?: { [k in keyof Slots]: Omit<Slots[k], 'isExist'> },
+    defaultScopeSlots?: { [k in keyof ScopeSlots]: Omit<ScopeSlots[k], 'isExist'> },
+  }
+) {
+  const ret = {} as any;
+
+  !!defaultSlots && Object.entries(defaultSlots).forEach(([key, val]) => {ret[key] = val;});
+  !!defaultScopeSlots && Object.entries(defaultScopeSlots).forEach(([key, val]) => {ret[key] = val;});
+
+  !!slots && Object.keys(slots).forEach((k: keyof Slots) => {if (slots[k].isExist()) {ret[k] = () => slots[k]();}});
+  !!scopeSlots && Object.keys(scopeSlots).forEach((k: keyof ScopeSlots) => {if (scopeSlots[k].isExist()) {ret[k] = (...args: any[]) => scopeSlots[k](...args);}});
+
+  if (!Object.keys(ret).length) {return undefined;}
+
+  return ret;
+}

package/src/packages/utils/installAllIcons.ts

@@ -1,5 +1,5 @@
 // @ts-ignore
-import allIcons from 'plain-icons/dist/icons.js';
+import allIcons from '@peryl/icon/dist/icons.js';
 // @ts-ignore
 import {Icon} from 'plain-design';
 

package/src/packages/utils/installAllLazyIcons.ts

@@ -8,7 +8,7 @@ import {Icon} from 'plain-design';
  */
 export function installAllLazyIcons() {
   Icon.PlainIcon.props.getIcon.default = async (icon: string) => {
-    const iconMeta = (await import('plain-icons/dist/es/' + icon + '.js')).default;
+    const iconMeta = (await import('@peryl/icon/dist/es/' + icon + '.js')).default;
     if (!iconMeta) {
       throw new Error(`getIcon: can't find icon match ${icon}`);
     }

package/src/packages/utils/isObjectCommonMatch.ts

@@ -1,4 +1,4 @@
-import {PropType} from 'plain-design-composition';
+import {PropType} from '@peryl/react-compose';
 
 export type iIsMatchParam = { option: any; value: any };
 export type iIsMatch = (param: iIsMatchParam) => boolean;

package/src/packages/utils/onParentElementsScroll.tsx

@@ -1,5 +1,5 @@
-import {SimpleFunction} from "plain-design-composition";
-import {doNothing} from "./doNothing";
+import {SimpleFunction} from "@peryl/react-compose";
+import {doNothing} from "@peryl/utils/doNothing";
 
 /**
  * 监听某个父节点滚动动作

package/src/packages/utils/plainDate.ts

@@ -4,7 +4,7 @@ import WeekYear from 'dayjs/plugin/weekYear';
 import WeekOfYear from 'dayjs/plugin/weekOfYear';
 import AdvanceFormat from 'dayjs/plugin/advancedFormat';
 import 'dayjs/locale/de';
-import {zeroize} from "plain-utils/string/zeroize";
+import {zeroize} from "@peryl/utils/zeroize";
 
 DayJs.locale('de');
 DayJs.extend(Format);
@@ -192,8 +192,12 @@ const parse = (str: string | undefined | null, format: string) => {
  * @author  韦胜健
  * @date    2021/1/18 10:30
  */
-const today = (displayFormat: string, valueFormat: string) => {
+const today = (displayFormat = 'YYYY-MM-DD', valueFormat = 'YYYY-MM-DD') => {
   return wrapDate(new Date(), { displayFormat, valueFormat });
 };
 
-export const plainDate = Object.assign(wrapDate, { defaultDate, format, parse, today, DayJs });
+const now = (displayFormat = 'YYYY-MM-DD HH:mm:ss', valueFormat = 'YYYY-MM-DD HH:mm:ss') => {
+  return wrapDate(new Date(), { displayFormat, valueFormat });
+};
+
+export const plainDate = Object.assign(wrapDate, { defaultDate, format, parse, today, now, DayJs });

package/src/packages/utils/renderInputModeTextRangeValue.tsx

@@ -0,0 +1,25 @@
+import {tStyleComputed} from "../uses/useStyle";
+import Icon from "../components/Icon";
+
+export const renderInputModeTextRangeValue = (
+  {
+    styleComputed,
+    startValue,
+    endValue,
+    defaultRender,
+  }: {
+    styleComputed: tStyleComputed,
+    startValue: any,
+    endValue: any,
+    defaultRender: () => any,
+  }) => {
+  if (styleComputed.value.inputMode !== 'text') {
+    return defaultRender();
+  } else {
+    return <>
+      {startValue != null && <span>{startValue}</span>}
+      <Icon icon="pi-arrow-right" className="input-mode-text-separate-icon"/>
+      {endValue != null && <span>{endValue}</span>}
+    </>;
+  }
+};

package/src/packages/utils/useMove.tsx

@@ -1,6 +1,6 @@
-import {createEffects} from "plain-utils/utils/createEffects";
-import {watch} from "plain-design-composition";
-import {removeUnit} from "plain-utils/string/removeUnit";
+import {createEffects} from "@peryl/utils/createEffects";
+import {watch} from "@peryl/react-compose";
+import {removeUnit} from "@peryl/utils/removeUnit";
 import {ClientZoom} from "../components/ClientZoom";
 
 export function useMove(

package/src/packages/utils/watchEffectAutoClear.ts

@@ -1,4 +1,5 @@
-import {onBeforeUnmount, SimpleFunction, watch} from "plain-design-composition";
+import {onBeforeUnmount, watch} from "@peryl/react-compose";
+import {createEffects} from "@peryl/utils/createEffects";
 
 /**
  * watch函数封装，支持清理副作用
@@ -6,11 +7,22 @@ import {onBeforeUnmount, SimpleFunction, watch} from "plain-design-composition";
  * @date    2022.7.3 13:15
  */
 export function useWatchAutoClear<T>(watcher: () => T, handler: (newVal: T, oldVal: undefined | T) => (() => void)) {
-  let clear: SimpleFunction | null = null;
-  watch(() => watcher(), (newVal, oldVal) => {
-    clear?.();
-    clear = handler(newVal, oldVal);
-  }, { immediate: true });
 
-  onBeforeUnmount(() => clear?.());
+  const { effects: setupEffects } = createEffects();
+  const { effects: watchEffects } = createEffects();
+
+  setupEffects.push(
+    watch(() => watcher(), (newVal, oldVal) => {
+      watchEffects.clear();
+      watchEffects.push(
+        handler(newVal, oldVal)
+      );
+    }, { immediate: true })
+  );
+
+  onBeforeUnmount(() => {
+    setupEffects.clear();
+    watchEffects.clear();
+  });
 }
+