plain-design 1.0.0-beta.73 → 1.0.0-beta.74

package/src/packages/utils/createProvider.tsx

@@ -1,35 +1,35 @@
-import {designComponent, inject, PropType, provide} from "plain-design-composition";
-
-interface iInjection<T> {
-  (): T,
-
-  <D>(data: D): T | D,
-}
-
-export function createProvider<T>(provideKey: string) {
-
-  const Provider = designComponent({
-    props: {
-      value: { type: Object as PropType<T>, required: true }
-    },
-    slots: ['default'],
-    setup({ props, slots }) {
-      // @ts-ignore
-      !!props.value && provide(provideKey, props.value);
-      return () => slots.default();
-    },
-  });
-
-  return {
-    provideKey,
-    Provider,
-    provide: (context: T) => {
-      provide(provideKey, context);
-    },
-    inject: ((defaultData?: any) => inject(provideKey, defaultData)) as iInjection<T>,
-  };
-}
-
-// const AppProvider = createProvider<HTMLDivElement>('@@APP_PROVIDER');
-// const a = AppProvider.inject();           // HTMLDivElement，注入不到东西会报错
-// const b = AppProvider.inject(null);       // HTMLDivElement|null，注入不到东西会返回默认值
+import {designComponent, inject, PropType, provide} from "plain-design-composition";
+
+interface iInjection<T> {
+  (): T,
+
+  <D>(data: D): T | D,
+}
+
+export function createProvider<T>(provideKey: string) {
+
+  const Provider = designComponent({
+    props: {
+      value: { type: Object as PropType<T>, required: true }
+    },
+    slots: ['default'],
+    setup({ props, slots }) {
+      // @ts-ignore
+      !!props.value && provide(provideKey, props.value);
+      return () => slots.default();
+    },
+  });
+
+  return {
+    provideKey,
+    Provider,
+    provide: (context: T) => {
+      provide(provideKey, context);
+    },
+    inject: ((defaultData?: any) => inject(provideKey, defaultData)) as iInjection<T>,
+  };
+}
+
+// const AppProvider = createProvider<HTMLDivElement>('@@APP_PROVIDER');
+// const a = AppProvider.inject();           // HTMLDivElement，注入不到东西会报错
+// const b = AppProvider.inject(null);       // HTMLDivElement|null，注入不到东西会返回默认值

package/src/packages/utils/customDeepClone.ts

@@ -1,15 +1,15 @@
-export function customDeepClone<EL extends HTMLElement>(el: EL, customDeepCloneHandler: (el: EL) => EL | null | undefined): EL {
-  let cloneEl = customDeepCloneHandler(el);
-  if (!!cloneEl) {
-    return cloneEl;
-  }
-  cloneEl = el.cloneNode(false) as EL;
-
-  const children = el.childNodes;
-  for (let i = 0; i < children.length; i++) {
-    let childNode = customDeepClone(children[i] as any, customDeepCloneHandler);
-    cloneEl.appendChild(childNode);
-  }
-
-  return cloneEl;
-}
+export function customDeepClone<EL extends HTMLElement>(el: EL, customDeepCloneHandler: (el: EL) => EL | null | undefined): EL {
+  let cloneEl = customDeepCloneHandler(el);
+  if (!!cloneEl) {
+    return cloneEl;
+  }
+  cloneEl = el.cloneNode(false) as EL;
+
+  const children = el.childNodes;
+  for (let i = 0; i < children.length; i++) {
+    let childNode = customDeepClone(children[i] as any, customDeepCloneHandler);
+    cloneEl.appendChild(childNode);
+  }
+
+  return cloneEl;
+}

package/src/packages/utils/deepCloneRenderNode.ts

@@ -1,41 +1,41 @@
-import {isElement} from "react-is";
-
-export function deepCloneRenderNode(renderNode: any): any {
-  if (renderNode == null) {
-    return renderNode;
-  }
-
-  switch (typeof renderNode) {
-    case "number":
-    case "string":
-    case "boolean":
-      return renderNode;
-  }
-
-  if (Array.isArray(renderNode)) {
-    return renderNode.map(i => deepCloneRenderNode(i));
-  }
-
-  if (!isElement(renderNode)) {
-    return Object.keys(renderNode).reduce((prev, key) => {
-      const slotValue = renderNode[key];
-      if (typeof slotValue === "function") {
-        if (slotValue.length === 0) {
-          const newSlotContent = deepCloneRenderNode(slotValue());
-          prev[key] = () => newSlotContent;
-          return prev;
-        }
-      }
-      prev[key] = slotValue;
-      return prev;
-    }, {} as Record<string, any>);
-  }
-
-  return {
-    ...renderNode,
-    props: {
-      ...renderNode.props,
-      children: deepCloneRenderNode(renderNode.props.children)
-    }
-  };
-}
+import {isElement} from "react-is";
+
+export function deepCloneRenderNode(renderNode: any): any {
+  if (renderNode == null) {
+    return renderNode;
+  }
+
+  switch (typeof renderNode) {
+    case "number":
+    case "string":
+    case "boolean":
+      return renderNode;
+  }
+
+  if (Array.isArray(renderNode)) {
+    return renderNode.map(i => deepCloneRenderNode(i));
+  }
+
+  if (!isElement(renderNode)) {
+    return Object.keys(renderNode).reduce((prev, key) => {
+      const slotValue = renderNode[key];
+      if (typeof slotValue === "function") {
+        if (slotValue.length === 0) {
+          const newSlotContent = deepCloneRenderNode(slotValue());
+          prev[key] = () => newSlotContent;
+          return prev;
+        }
+      }
+      prev[key] = slotValue;
+      return prev;
+    }, {} as Record<string, any>);
+  }
+
+  return {
+    ...renderNode,
+    props: {
+      ...renderNode.props,
+      children: deepCloneRenderNode(renderNode.props.children)
+    }
+  };
+}

package/src/packages/utils/deepIterateObject.ts

@@ -1,14 +1,14 @@
-/**
- * 深度遍历对象
- * @author  韦胜健
- * @date    2022.5.2 12:01
- */
-export function deepIterateObject(obj: any, handler: (key: string, value: any, accessPath: string[]) => void, nowAccessPath: string[] = []) {
-  Object.entries(obj).forEach(([key, value]) => {
-    const ap = [...nowAccessPath, key];
-    handler(key, value, ap);
-    if (Array.isArray(value) || typeof value === "object") {
-      deepIterateObject(value, handler, ap);
-    }
-  });
-}
+/**
+ * 深度遍历对象
+ * @author  韦胜健
+ * @date    2022.5.2 12:01
+ */
+export function deepIterateObject(obj: any, handler: (key: string, value: any, accessPath: string[]) => void, nowAccessPath: string[] = []) {
+  Object.entries(obj).forEach(([key, value]) => {
+    const ap = [...nowAccessPath, key];
+    handler(key, value, ap);
+    if (Array.isArray(value) || typeof value === "object") {
+      deepIterateObject(value, handler, ap);
+    }
+  });
+}

package/src/packages/utils/findReactElement.tsx

@@ -1,76 +1,76 @@
-import {ReactNode} from "react";
-import {isElement, isFragment} from 'react-is';
-import {RenderNode} from "plain-design-composition";
-
-type FindRenderNode = Exclude<ReactNode, string | number | null | undefined | void | boolean>
-
-export function findReactElement(node: ReactNode, isMatch: (node: any) => boolean): ReactNode[] | null {
-
-  /*内容为空，不匹配*/
-  if (node == null) {return null;}
-
-  const type = typeof node;
-  switch (type) {
-    case "number":
-    case "string":
-    case "boolean":
-      return null;
-  }
-
-  /*内容为数组，解析数组*/
-  if (Array.isArray(node) && node.length > 0) {
-    return processArrayRenderNode({ array: node, isMatch, ret: [] });
-  } else if (isFragment(node)) {
-    return findReactElement(node.props.children, isMatch);
-  } else if (isElement(node)) {
-    if (('type' in node) && typeof node.type === 'object' && ('use' in (node as any).type) && ('__render__' in (node as any).type.use)) {
-      node = (node as any).type.use.__render__();
-      if (node == null) {return null;}
-      if (typeof node !== "object") {return null;}
-    }
-    if (isMatch(node)) {
-      return [node];
-    }
-    const children = (node as any).props?.children;
-    /*解析节点的子节点*/
-    if (children) {
-
-      let arrayChildren: any = children;
-
-      /*如果children的default是个函数，并且函数参数数量为0，则证明是个插槽函数而不是作用域插槽函数，执行这个插槽函数的返回结果继续解析*/
-      if (!!arrayChildren.default && typeof arrayChildren.default === "function" && arrayChildren.default.length == 0) {
-        try {
-          arrayChildren = arrayChildren.default();
-        } catch (e) {
-          arrayChildren = [];
-        }
-        /*因为会修改arrayChildren中的值，所以这里修改default函数为新的函数指向已经修改过的内容*/
-        ((node as any).children).default = () => arrayChildren;
-      }
-      if (Array.isArray(arrayChildren)) {
-        return processArrayRenderNode({ array: arrayChildren, isMatch, ret: [] });
-      } else {
-        return findReactElement(arrayChildren, isMatch);
-      }
-    }
-  }
-
-  return null;
-}
-
-/**
- * 处理数组类型的节点
- * @author  韦胜健
- * @date    2022/10/28 9:53
- */
-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) {
-      findList.forEach(node => {
-        node != null && ret.push(node as any);
-      });
-    }
-  });
-  return ret;
-}
+import {ReactNode} from "react";
+import {isElement, isFragment} from 'react-is';
+import {RenderNode} from "plain-design-composition";
+
+type FindRenderNode = Exclude<ReactNode, string | number | null | undefined | void | boolean>
+
+export function findReactElement(node: ReactNode, isMatch: (node: any) => boolean): ReactNode[] | null {
+
+  /*内容为空，不匹配*/
+  if (node == null) {return null;}
+
+  const type = typeof node;
+  switch (type) {
+    case "number":
+    case "string":
+    case "boolean":
+      return null;
+  }
+
+  /*内容为数组，解析数组*/
+  if (Array.isArray(node) && node.length > 0) {
+    return processArrayRenderNode({ array: node, isMatch, ret: [] });
+  } else if (isFragment(node)) {
+    return findReactElement(node.props.children, isMatch);
+  } else if (isElement(node)) {
+    if (('type' in node) && typeof node.type === 'object' && ('use' in (node as any).type) && ('__render__' in (node as any).type.use)) {
+      node = (node as any).type.use.__render__();
+      if (node == null) {return null;}
+      if (typeof node !== "object") {return null;}
+    }
+    if (isMatch(node)) {
+      return [node];
+    }
+    const children = (node as any).props?.children;
+    /*解析节点的子节点*/
+    if (children) {
+
+      let arrayChildren: any = children;
+
+      /*如果children的default是个函数，并且函数参数数量为0，则证明是个插槽函数而不是作用域插槽函数，执行这个插槽函数的返回结果继续解析*/
+      if (!!arrayChildren.default && typeof arrayChildren.default === "function" && arrayChildren.default.length == 0) {
+        try {
+          arrayChildren = arrayChildren.default();
+        } catch (e) {
+          arrayChildren = [];
+        }
+        /*因为会修改arrayChildren中的值，所以这里修改default函数为新的函数指向已经修改过的内容*/
+        ((node as any).children).default = () => arrayChildren;
+      }
+      if (Array.isArray(arrayChildren)) {
+        return processArrayRenderNode({ array: arrayChildren, isMatch, ret: [] });
+      } else {
+        return findReactElement(arrayChildren, isMatch);
+      }
+    }
+  }
+
+  return null;
+}
+
+/**
+ * 处理数组类型的节点
+ * @author  韦胜健
+ * @date    2022/10/28 9:53
+ */
+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) {
+      findList.forEach(node => {
+        node != null && ret.push(node as any);
+      });
+    }
+  });
+  return ret;
+}

package/src/packages/utils/getDeviceInfo.ts

@@ -1,59 +1,59 @@
-import {createEnum} from "plain-utils/utils/createEnum";
-import {isSSR} from "./isSSR";
-
-export const eDeviceType = createEnum(['mobile', 'tablet', 'desktop'] as const);
-export const eOsType = createEnum(['win', 'mac', 'linux', 'ios', 'android', 'unknown'] as const);
-
-interface iDeviceInfo {
-  deviceType: typeof eDeviceType.TYPE,
-  osType: typeof eOsType.TYPE,
-}
-
-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;
-
-export const isWindows = () => getDeviceInfo().osType === eOsType.win;
+import {createEnum} from "plain-utils/utils/createEnum";
+import {isSSR} from "./isSSR";
+
+export const eDeviceType = createEnum(['mobile', 'tablet', 'desktop'] as const);
+export const eOsType = createEnum(['win', 'mac', 'linux', 'ios', 'android', 'unknown'] as const);
+
+interface iDeviceInfo {
+  deviceType: typeof eDeviceType.TYPE,
+  osType: typeof eOsType.TYPE,
+}
+
+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;
+
+export const isWindows = () => getDeviceInfo().osType === eOsType.win;

package/src/packages/utils/getElementRect.ts

@@ -1,32 +1,32 @@
-/**
- * 得到元素的位置信息
- * @author  韦胜健
- * @date    2022/4/3 20:12
- */
-import {iElementRect} from "./getRowEl";
-import {ClientZoom} from "./ClientZoom";
-
-export function getElementRect(el: HTMLElement): iElementRect {
-
-  const { clientHeight, clientWidth } = ClientZoom.getClientSize();
-
-  // @ts-ignore
-  if (el === window) {el = document.documentElement;}
-
-  if (el === document.documentElement) {
-    return { top: 0, left: 0, right: 0, bottom: 0, height: clientHeight, width: clientWidth };
-  } else {
-    const { top, left, width, height } = el.getBoundingClientRect()!;
-    const { offsetWidth, offsetHeight } = el;
-    return {
-      top,
-      left,
-      /*当body的高度不够盛满documentElement的时候，right以及bottom的值不可信。这里用总的页面宽高计算right以及bottom*/
-      right: clientWidth - left - width,
-      bottom: clientHeight - top - height,
-      /*svg元素的 offsetWidth,offsetHeight 为undefined，而内联元素的 clientWidth以及clientHeight为0*/
-      width: offsetWidth || Math.ceil(width),
-      height: offsetHeight || Math.ceil(height),
-    };
-  }
-}
+/**
+ * 得到元素的位置信息
+ * @author  韦胜健
+ * @date    2022/4/3 20:12
+ */
+import {iElementRect} from "./getRowEl";
+import {ClientZoom} from "./ClientZoom";
+
+export function getElementRect(el: HTMLElement): iElementRect {
+
+  const { clientHeight, clientWidth } = ClientZoom.getClientSize();
+
+  // @ts-ignore
+  if (el === window) {el = document.documentElement;}
+
+  if (el === document.documentElement) {
+    return { top: 0, left: 0, right: 0, bottom: 0, height: clientHeight, width: clientWidth };
+  } else {
+    const { top, left, width, height } = el.getBoundingClientRect()!;
+    const { offsetWidth, offsetHeight } = el;
+    return {
+      top,
+      left,
+      /*当body的高度不够盛满documentElement的时候，right以及bottom的值不可信。这里用总的页面宽高计算right以及bottom*/
+      right: clientWidth - left - width,
+      bottom: clientHeight - top - height,
+      /*svg元素的 offsetWidth,offsetHeight 为undefined，而内联元素的 clientWidth以及clientHeight为0*/
+      width: offsetWidth || Math.ceil(width),
+      height: offsetHeight || Math.ceil(height),
+    };
+  }
+}

package/src/packages/utils/getRowEl.ts

@@ -1,33 +1,33 @@
-/**
- * 获取拖拽的rowEl对象
- * @author  韦胜健
- * @date    2020/8/19 23:55
- */
-import {hasClass} from "plain-utils/dom/hasClass";
-import {iMouseEvent} from "plain-design-composition";
-
-/**
- * 节点位置信息
- * @author  韦胜健
- * @date    2022.10.3 20:53
- */
-export interface iElementRect {
-  height: number,
-  width: number,
-  left: number,
-  right: number,
-  top: number,
-  bottom: number,
-}
-
-export function getRowEl(e: MouseEvent | iMouseEvent, rowClass: string): HTMLElement {
-  let rowEl = e.target as HTMLElement;
-  while (!!rowEl && !hasClass(rowEl, rowClass)) {
-    rowEl = rowEl.parentNode as HTMLElement;
-  }
-  if (!rowEl) {
-    console.log({ e, rowClass });
-    throw new Error(`can't find item element!`);
-  }
-  return rowEl;
-}
+/**
+ * 获取拖拽的rowEl对象
+ * @author  韦胜健
+ * @date    2020/8/19 23:55
+ */
+import {hasClass} from "plain-utils/dom/hasClass";
+import {iMouseEvent} from "plain-design-composition";
+
+/**
+ * 节点位置信息
+ * @author  韦胜健
+ * @date    2022.10.3 20:53
+ */
+export interface iElementRect {
+  height: number,
+  width: number,
+  left: number,
+  right: number,
+  top: number,
+  bottom: number,
+}
+
+export function getRowEl(e: MouseEvent | iMouseEvent, rowClass: string): HTMLElement {
+  let rowEl = e.target as HTMLElement;
+  while (!!rowEl && !hasClass(rowEl, rowClass)) {
+    rowEl = rowEl.parentNode as HTMLElement;
+  }
+  if (!rowEl) {
+    console.log({ e, rowClass });
+    throw new Error(`can't find item element!`);
+  }
+  return rowEl;
+}

package/src/packages/utils/incrementalMerge.ts

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