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

package/src/packages/uses/useCollapseStyles.tsx

@@ -0,0 +1,56 @@
+import {computed, iTransitionEvent, reactive, StyleProperties, useStyleCache, watch} from "@peryl/react-compose";
+import {delay} from "@peryl/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,81 @@
+import {ClientZoom} from "../utils/ClientZoom";
+import {createEffectsOfReaction} from "@peryl/react-compose";
+
+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, effectWatch } = createEffectsOfReaction();
+
+  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;
+    },
+  };
+
+  effectWatch(() => 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

@@ -1,5 +1,5 @@
 import {useFunctionWrapper} from "./useFunctionWrapper";
-import {computed, inject, onBeforeUnmount, PropType, provide, reactive} from 'plain-design-composition';
+import {computed, inject, onBeforeUnmount, PropType, provide, reactive} from '@peryl/react-compose';
 import {eMultipleValueType} from "./useMultipleModel";
 
 export const EDIT_PROVIDER = '@@EDIT_PROVIDER';
@@ -14,7 +14,8 @@ export const EditProps = {
   multiple: { type: Boolean },                                            // 是否多选
 } as const;
 
-interface EditProvideData {
+export interface EditProvideData {
+  editable: boolean | null,
   disabled: boolean | null,
   readonly: boolean | null,
   loading: boolean | null,
@@ -32,7 +33,10 @@ export const useEdit = useFunctionWrapper(
 
     const editState = reactive({ loading: null as null | boolean });
 
-    const editComputed = computed(() => {
+    const editComputed = computed((): EditProvideData => {
+
+      if (ctx.isDestroyed) {return {} as EditProvideData;}
+
       const {
         disabled,
         readonly,
@@ -40,7 +44,7 @@ export const useEdit = useFunctionWrapper(
         placeholder
       } = ctx.props as any as EditProvideData;
 
-      let data = { disabled, readonly, loading, placeholder };
+      let data: EditProvideData = { disabled, readonly, loading, placeholder, editable: false };
 
       if (data.disabled == null) data.disabled = !!parentEditComputed ? parentEditComputed.value.disabled : false;
       if (data.readonly == null) data.readonly = !!parentEditComputed ? parentEditComputed.value.readonly : false;
@@ -74,6 +78,10 @@ export const useEdit = useFunctionWrapper(
       }
     }
 
+    onBeforeUnmount(() => {
+      editComputed.effect.stop();
+    });
+
     return {
       editState,
       editComputed,

package/src/packages/uses/useFocusHandler.ts

@@ -1,5 +1,6 @@
-import {reactive, watchEffect} from "plain-design-composition";
-import {toArray} from 'plain-utils/utils/toArray';
+import {globalWatchEffect, onBeforeUnmount, reactive} from "@peryl/react-compose";
+import {toArray} from '@peryl/utils/toArray';
+import {createEffects, iEffects} from "@peryl/utils/createEffects";
 
 /**
  * 得到元素(input,textarea,editable div,button)的focus状态，如果是多个元素，则元素在失去焦点之后的100ms之后才会派发blur事件，否则期间任何一个元素获取焦点，都会取消派发blur事件这个动作
@@ -10,19 +11,26 @@ export function useFocusHandler(
   {
     getEls,
     onFocus,
-    onBlur
+    onBlur,
+    effects: setupEffects
   }: {
     getEls: () => (HTMLElement | null | undefined) | (HTMLElement | null | undefined)[],
     onFocus: (e: FocusEvent) => void,
     onBlur: (e: FocusEvent) => void,
+    effects?: iEffects,
   }
 ) {
 
+  if (!setupEffects) {
+    setupEffects = createEffects().effects;
+    onBeforeUnmount(() => setupEffects!.clear());
+  }
+
   const isFocus = reactive({ value: false });
+
   let blurTimer: any = null;
 
   const handler = {
-    elements: [] as (HTMLElement | null | undefined)[],
     onFocus: (e: FocusEvent) => {
       if (!!blurTimer) {
         clearTimeout(blurTimer);
@@ -41,20 +49,25 @@ export function useFocusHandler(
     },
   };
 
-  watchEffect(() => {
-    handler.elements.forEach(el => {
-      if (!el) {return;}
-      el.removeEventListener('focus', handler.onFocus);
-      el.removeEventListener('blur', handler.onBlur);
-    });
-    handler.elements = toArray(getEls());
-    handler.elements.forEach(el => {
+  const { effects } = createEffects();
+
+  setupEffects.push(globalWatchEffect(() => {
+    effects.clear();
+
+    const elements = toArray(getEls());
+    elements.forEach(el => {
       if (!el) {return;}
       el.addEventListener('focus', handler.onFocus);
       el.addEventListener('blur', handler.onBlur);
     });
+    effects.push(() => elements.forEach(el => {
+      if (!el) {return;}
+      el.removeEventListener('focus', handler.onFocus);
+      el.removeEventListener('blur', handler.onBlur);
+    }));
+  }));
 
-  });
+  setupEffects.push(() => effects.clear());
 
   return { isFocus };
 }

package/src/packages/uses/useFunctionWrapper.ts

@@ -1,4 +1,5 @@
-import {getCurrentDesignInstance} from 'plain-design-composition';
+import {getCurrentDesignInstance, onBeforeUnmount} from '@peryl/react-compose';
+import {delay} from "@peryl/utils/delay";
 
 type Shift<T> = T extends [infer L, ...infer R] ? R : T
 
@@ -9,6 +10,7 @@ export function useFunctionWrapper<T extends (ctx: any, ...args: any[]) => any>(
   return (...args) => {
     const ctx = getCurrentDesignInstance() as any;
     if (!ctx._use) ctx._use = {};
+    onBeforeUnmount(() => delay().then(() => {delete ctx._use;}));
 
     if (!!ctx._use[key]) {
       throw new Error(`use ${key} can only be executed once!`);

package/src/packages/uses/useMultipleModel.tsx

@@ -1,6 +1,7 @@
-import {UseModelConfig} from "plain-design-composition/src/use/useModel";
-import {useModel} from "plain-design-composition";
-import {createEnum} from "plain-utils/utils/createEnum";
+import {UseModelConfig} from "@peryl/react-compose/src/use/useModel";
+import {useModel} from "@peryl/react-compose";
+import {createEnum} from "@peryl/utils/createEnum";
+import {iEffects} from "@peryl/utils/createEffects";
 
 /**
  * 多选的时候值的类型
@@ -23,6 +24,7 @@ export function useMultipleModel<T>(
   emitter: (val: T) => void,
   props: { valueType?: typeof eMultipleValueType.TYPE, multiple?: boolean },
   config?: UseModelConfig<T>,
+  effects?: iEffects
 ) {
 
   /*最后一次emit的值*/
@@ -59,5 +61,5 @@ export function useMultipleModel<T>(
       }
       emitter(val);
     }
-  }, config);
+  }, config, effects);
 }

package/src/packages/uses/useRenderReference.tsx

@@ -1,4 +1,4 @@
-import {reactive, RenderNode} from "plain-design-composition";
+import {reactive, RenderNode} from "@peryl/react-compose";
 import {Reference} from "../components/Reference";
 
 /**

package/src/packages/uses/useStyle.tsx

@@ -1,6 +1,6 @@
-import {computed, inject, PropType, provide} from "plain-design-composition";
+import {computed, inject, onBeforeUnmount, PropType, provide} from "@peryl/react-compose";
 import {useFunctionWrapper} from "./useFunctionWrapper";
-import {createEnum} from "plain-utils/utils/createEnum";
+import {createEnum} from "@peryl/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,17 @@ 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);
+    if (ctx.isDestroyed) {return {} as UseStyleProvideData;}
+
+    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 +70,12 @@ export const useStyle = useFunctionWrapper('style', (ctx, option: UseStyleOption
 
   provide(USE_STYLE_PROVIDER, styleComputed);
 
+  onBeforeUnmount(() => {
+    setTimeout(() => {
+      styleComputed.effect.stop();
+    });
+  });
+
   return { styleComputed };
 });
 

package/src/packages/utils/ClientZoom.ts

@@ -1,4 +1,4 @@
-import {iMouseEvent} from 'plain-design-composition';
+import {iMouseEvent} from '@peryl/react-compose';
 
 export const ClientZoom = (() => {
   let zoom: '' | number = '';

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/FixInput.ts

@@ -1,3 +1,3 @@
-import {fixInputCursor} from "plain-design-composition";
+import {fixInputCursor} from "@peryl/react-compose";
 
 export const FixInput = fixInputCursor('input')

package/src/packages/utils/InnerTransition.ts

@@ -1,5 +1,5 @@
-import {addClass} from "plain-utils/dom/addClass";
-import {removeClass} from "plain-utils/dom/removeClass";
+import {addClass} from "@peryl/utils/addClass";
+import {removeClass} from "@peryl/utils/removeClass";
 
 const cls = "plain-disable-inner-transition";
 

package/src/packages/utils/LoadingText.ts

@@ -1,4 +1,4 @@
-import {reactive} from "plain-design-composition";
+import {reactive} from "@peryl/react-compose";
 
 export const LoadingText = reactive({ value: '...' });
 

package/src/packages/utils/OpenController.ts

@@ -1,4 +1,4 @@
-import {inject, provide} from "plain-design-composition";
+import {inject, provide} from "@peryl/react-compose";
 
 export const OpenController = (() => {
 

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/constant.tsx

@@ -1,4 +1,4 @@
-import {createEnum} from "plain-utils/utils/createEnum";
+import {createEnum} from "@peryl/utils/createEnum";
 
 export const CheckboxStatus = createEnum(['uncheck', 'check', 'minus'] as const);