plain-design 1.0.0-beta.4 → 1.0.0-beta.41

package/src/packages/utils/ClientZoom.ts

@@ -1,8 +1,10 @@
+import {iMouseEvent} from 'plain-design-composition';
+
 export const ClientZoom = (() => {
   let zoom: '' | number = '';
   return {
-    get: () => {
-      return zoom;
+    get: (): number => {
+      return zoom === '' ? 1 : zoom;
     },
     set: (_zoom: number | null) => {
       const __zoom = _zoom == null ? '' : _zoom;
@@ -24,5 +26,25 @@ export const ClientZoom = (() => {
         };
       }
     },
+    getClientPosition: (e: iMouseEvent | MouseEvent): { clientX: number, clientY: number, offsetX: number, offsetY: number, } => {
+      const { clientX, clientY, offsetX, offsetY } = 'nativeEvent' in e ? e.nativeEvent : e;
+      return {
+        clientX: ClientZoom.formatClientValue(clientX),
+        clientY: ClientZoom.formatClientValue(clientY),
+        offsetX: ClientZoom.formatClientValue(offsetX),
+        offsetY: ClientZoom.formatClientValue(offsetY),
+      };
+    },
+    formatClientValue: (val: number) => {
+      return ClientZoom.zoomPosition(val);
+    },
+    zoomPosition(val: number) {
+      const zoom = ClientZoom.get();
+      return Number((val / zoom).toFixed(2));
+    },
+    zoomSize(val: number) {
+      const zoom = ClientZoom.get();
+      return Number((val * zoom).toFixed(2));
+    },
   };
 })();

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/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;
 

package/src/packages/utils/getRectAutoFormat.ts

@@ -0,0 +1,9 @@
+export function getRectAutoFormat(el: HTMLElement) {
+  const { top, left, height, width } = el.getBoundingClientRect();
+  return {
+    top: Number(top.toFixed(0)),
+    left: Number(left.toFixed(0)),
+    height: Number(height.toFixed(0)),
+    width: Number(width.toFixed(0)),
+  };
+}

package/src/packages/utils/inheritSlots.ts

@@ -0,0 +1,28 @@
+import {RenderNode} from "plain-design-composition";
+
+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);}});
+
+  return ret;
+}

package/src/packages/utils/notNull.ts

@@ -0,0 +1,9 @@
+export function notNull<T, D>(val: T, defaultValue: D | (() => D)): Exclude<T, null | undefined> | D {
+  // @ts-ignore
+  return val != null ? val : (typeof defaultValue === "function" ? defaultValue() : defaultValue);
+}
+
+export function notNullFunction<T, D>(val: T, defaultValue: D): Exclude<T, null | undefined> | D {
+  // @ts-ignore
+  return val != null ? val : defaultValue;
+}

package/src/packages/utils/useMove.tsx

@@ -1,6 +1,7 @@
 import {createEffects} from "plain-utils/utils/createEffects";
 import {watch} from "plain-design-composition";
 import {removeUnit} from "plain-utils/string/removeUnit";
+import {ClientZoom} from "../components/ClientZoom";
 
 export function useMove(
   {
@@ -26,6 +27,8 @@ export function useMove(
 
   const onMousedown = (e: MouseEvent) => {
 
+    const { clientX, clientY } = ClientZoom.getClientPosition(e);
+
     const { effects: draggierEffects } = createEffects();
 
     const el = e.currentTarget as HTMLElement;
@@ -35,16 +38,19 @@ export function useMove(
     const dragState = {
       isDragging: false,
       start: {
-        x: e.clientX,
-        y: e.clientY,
+        x: clientX,
+        y: clientY,
         left: Number(removeUnit(style.left) || 0),
         top: Number(removeUnit(style.top) || 0),
       }
     };
 
     const onMousemove = (e: MouseEvent) => {
-      const durX = e.clientX - dragState.start.x;
-      const durY = e.clientY - dragState.start.y;
+
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
+
+      const durX = clientX - dragState.start.x;
+      const durY = clientY - dragState.start.y;
 
       if (!dragState.isDragging) {
         if (durX >= 5 || durY >= 5) {

package/src/packages/utils/watchEffectAutoClear.ts

@@ -1,4 +1,5 @@
-import {onBeforeUnmount, SimpleFunction, watch} from "plain-design-composition";
+import {onBeforeUnmount, watch} from "plain-design-composition";
+import {createEffects} from "plain-utils/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();
+  });
 }
+

package/src/packages/components/CarouselGroup/carousel.scss

@@ -1,143 +0,0 @@
-@include prefix(carousel-group) {
-  position: relative;
-
-  &:not(.carousel-vertical) {
-    overflow-x: hidden;
-  }
-
-  .#{componentName(carousel)}, .carousel-cover, .carousel-operator, .carousel-indicator {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    pointer-events: none;
-
-    &.carousel-cover, &.carousel-operator, &.carousel-indicator {
-      z-index: 99;
-    }
-  }
-
-  .#{componentName(carousel)} {
-    &.carousel-animating {
-      transition: transform ease 600ms;
-    }
-
-    pointer-events: auto;
-  }
-
-  .carousel-cover {
-    pointer-events: auto;
-  }
-
-  .carousel-operator {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 20px;
-
-    .carousel-operator-btn {
-      transition: background-color 300ms linear;
-      cursor: pointer;
-      pointer-events: auto;
-      background-color: rgba(#ffffff, 0.45);
-      color: white;
-      width: 36px;
-      height: 36px;
-      border-radius: 36px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      user-select: none;
-
-      &:hover:not(:active) {
-        background-color: rgba(#ffffff, 0.65);
-      }
-    }
-  }
-
-  .carousel-indicator {
-    top: initial;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 20px;
-    flex-wrap: nowrap;
-
-    .carousel-indicator-item {
-      pointer-events: auto;
-      width: 20px;
-      height: 2px;
-      background-color: plv(background-color);
-      opacity: 0.6;
-      transition: all 200ms linear;
-      cursor: pointer;
-
-      &:not(:last-child) {
-        margin-right: 8px;
-      }
-
-      &.carousel-indicator-item-active {
-        opacity: 1;
-        width: 30px;
-        height: 4px;
-      }
-
-      &:hover {
-        opacity: 0.8;
-      }
-    }
-  }
-
-  &.carousel-vertical {
-    overflow-y: hidden;
-
-    .carousel-operator {
-      flex-direction: column;
-      padding: 20px;
-      align-items: flex-end;
-
-      .carousel-operator-btn:nth-child(1) {
-        transform: rotate(90deg);
-      }
-
-      .carousel-operator-btn:nth-child(2) {
-        transform: rotate(90deg);
-      }
-    }
-
-    .carousel-indicator {
-      flex-direction: column;
-      padding: 20px 36px;
-      left: initial;
-      top: 0;
-
-      .carousel-indicator-item {
-        height: 8px;
-        width: 2px;
-        margin-right: 0;
-
-        &.carousel-indicator-item-active {
-          height: 16px;
-          width: 4px;
-        }
-
-        &:not(:last-child) {
-          margin-bottom: 4px;
-        }
-      }
-    }
-  }
-
-  &.carousel-card {
-    .#{componentName(carousel)} {
-      right: initial;
-    }
-
-    .carousel-indicator {
-      .carousel-indicator-item {
-        background-color: rgba(black, 0.5);
-      }
-    }
-  }
-}