plain-design 1.0.0-beta.11 → 1.0.0-beta.111

package/src/packages/components/createScrollDraggier/index.ts

@@ -0,0 +1,341 @@
+import {getComponentCls, iMouseEvent, iTouchEvent, reactive, StyleProperties} from "@peryl/react-compose";
+import {doNothing} from "@peryl/utils/doNothing";
+import {findParentElement} from "@peryl/utils/findParentElement";
+import {hasClass} from "@peryl/utils/hasClass";
+import {getElementRect} from "../../utils/getElementRect";
+import {createWebDraggier} from "../../utils/createDraggier";
+import {delay} from "@peryl/utils/delay";
+import {PlainScroll} from "../Scroll";
+import {createDefaultDraggierReactiveState, createDefaultDraggierStaticState, iVirtualDraggierHandler} from "../VirtualList/createVirtualDraggier";
+import {iVirtualNode} from "../VirtualList/useVirtualList";
+import {createAutoScrollManager} from "../createAutoScrollManager";
+
+/**
+ * 创建虚拟列表的拖拽移动节点管理对象
+ * @author  韦胜健
+ * @date    2024/5/29 14:55
+ */
+export function createScrollDraggier(
+  {
+    props,
+    getScroll,
+    dataModel,
+    getItemElements,
+    getHost,
+    getStrut,
+    onDraggierStart,
+    onDraggierMove,
+    onDraggierEnd,
+    onDraggierTap,
+  }: {
+    props: { horizontal: boolean },
+    getScroll: undefined | null | (() => PlainScroll | undefined),
+    dataModel: { value: any[] | undefined | null },
+    getItemElements: () => HTMLElement[],
+    getHost?: () => HTMLElement,
+    getStrut?: () => HTMLElement,
+
+    onDraggierStart?: iVirtualDraggierHandler,
+    onDraggierMove?: iVirtualDraggierHandler,
+    onDraggierEnd?: iVirtualDraggierHandler,
+    onDraggierTap?: iVirtualDraggierHandler,
+  }
+) {
+
+  /*管理自动滚动*/
+  const autoScrollManager = !getScroll ? null : createAutoScrollManager(getScroll);
+
+  /*静态变量*/
+  const dragStaticState = {
+    ...createDefaultDraggierStaticState(),
+    nodes: [] as iVirtualNode[],
+  };
+
+  /*响应式变量*/
+  const dragReactiveState = reactive(createDefaultDraggierReactiveState());
+
+  const start = (e: iMouseEvent | iTouchEvent, startIndex: number) => {
+
+    const itemElements = getItemElements();
+
+    dragStaticState.nodes = (() => {
+      let tempStart = 0;
+      return itemElements.map((item, index) => {
+        const start = tempStart;
+        const size = item[props.horizontal ? 'offsetWidth' : 'offsetHeight'];
+        const end = start + size;
+        tempStart += size;
+        return {
+          id: String(index),
+          size,
+          start,
+          end,
+          index,
+          item: dataModel.value?.[index],
+        };
+      });
+    })();
+
+    /*重置静态变量*/
+    Object.assign(dragReactiveState, createDefaultDraggierReactiveState());
+    /*重置响应式变量*/
+    Object.assign(dragReactiveState, createDefaultDraggierStaticState());
+
+    /*初始化部分静态变量*/
+    dragStaticState.dragElement = itemElements[startIndex];
+    if (!dragStaticState.dragElement) {
+      throw new Error(`Can't find [data-vid] elements!`);
+    }
+
+    dragStaticState.hostElement = getHost ? getHost() : findParentElement(dragStaticState.dragElement, el => hasClass(el, getComponentCls('scroll')))!;
+    if (!dragStaticState.hostElement) {
+      throw new Error(`Can't find host elements`);
+    }
+    dragStaticState.strutElement = getStrut ? getStrut() : findParentElement(dragStaticState.dragElement, el => hasClass(el, 'scroll-content'))!;
+    if (!dragStaticState.strutElement) {
+      throw new Error(`Can't find strut elements`);
+    }
+
+    dragStaticState.initDragElementRect = getElementRect(dragStaticState.dragElement);
+    dragStaticState.dragIndex = startIndex;
+    if (dragStaticState.dragIndex == -1) {
+      throw new Error(`Can't find index of drag elements`);
+    }
+
+    draggier.start(e);
+  };
+
+  const update = () => {
+
+    const { strutElement } = dragStaticState;
+
+    const offsetStart = props.horizontal ?
+      draggier.staticState.moveX - getElementRect(strutElement!).left :
+      draggier.staticState.moveY - getElementRect(strutElement!).top;
+
+    const newPointIndex = dragStaticState.nodes.findIndex(node => node.start <= offsetStart && node.end > offsetStart);
+
+    /*值有效的时候才更新值，新值无效的话，就用老的值，因为如果超出边界的话就会得到无效的新值，此时用老值即可*/
+    if (newPointIndex != null && newPointIndex != -1) {
+      dragReactiveState.pointIndex = newPointIndex || 0;
+    }
+  };
+
+  const getItemStyles = (index: number) => {
+    const { dragIndex, initDragElementRect } = dragStaticState;
+    if (dragReactiveState.pointIndex == null || dragIndex == null) {
+      return;
+    }
+    const styles: StyleProperties = {};
+    styles.transition = 'transform ease 300ms';
+    if (dragReactiveState.pointIndex >= index && index > dragIndex) {
+      styles.transform = props.horizontal ?
+        `translateX(-${initDragElementRect?.width || 0}px)` :
+        `translateY(-${initDragElementRect?.height || 0}px)`;
+    } else if (dragReactiveState.pointIndex <= index && index < dragIndex) {
+      styles.transform = props.horizontal ?
+        `translateX(${initDragElementRect?.width || 0}px)` :
+        `translateY(${initDragElementRect?.height || 0}px)`;
+    } else {
+      styles.transform = props.horizontal ?
+        `translateX(0px)` :
+        `translateY(0px)`;
+    }
+    return styles;
+  };
+
+  const draggier = createWebDraggier({
+    horizontal: props.horizontal,
+    vertical: !props.horizontal,
+    onInit: () => {
+    },
+    onStart: (draggierData) => {
+
+      const { draggierEffects } = draggierData;
+
+      const { dragElement, initDragElementRect, hostElement } = dragStaticState;
+
+      if (!dragElement || !initDragElementRect || !hostElement) {
+        return;
+      }
+
+      const dragElementShadow = dragStaticState.dragElementShadow = dragElement.cloneNode(true) as any;
+
+      if (!dragElementShadow) {
+        return;
+      }
+
+      /*强制启用动画，避免被Scroll禁用*/
+      dragElementShadow.setAttribute('data-force-transition', 'true');
+      dragElementShadow.style.height = initDragElementRect.height + 'px';
+      dragElementShadow.style.width = initDragElementRect.width + 'px';
+      dragElementShadow.style.position = 'fixed';
+      dragElementShadow.style.top = initDragElementRect.top + 'px';
+      dragElementShadow.style.left = initDragElementRect.left + 'px';
+      dragElementShadow.style.pointerEvents = 'none';
+      dragElementShadow.style.transition = 'none';
+
+      /*添加克隆节点*/
+      hostElement.appendChild(dragElementShadow);
+      draggierEffects.push(async () => {
+        if (!dragElementShadow || !hostElement) {
+          return;
+        }
+        await dragReactiveState.endingDefer.promise;
+        await delay(23);
+        hostElement.removeChild(dragElementShadow);
+        dragStaticState.dragElementShadow = null as any;
+      });
+
+      /*隐藏原始对象*/
+      dragStaticState.oldDragElementStyles.opacity = dragElement.style.opacity;
+      dragElement.style.opacity = "0";
+      draggierEffects.push(async () => {
+        if (!dragElement) {
+          return;
+        }
+        await dragReactiveState.endingDefer.promise;
+        await delay(23);
+        dragElement.style.opacity = dragStaticState.oldDragElementStyles.opacity;
+        dragStaticState.dragElement = null as any;
+      });
+
+      /*监听滚动*/
+      dragReactiveState.onScroll = (e: Event) => {
+        update();
+      };
+      const ejectOnScroll = !getScroll ? null : getScroll()?.on.onScroll(dragReactiveState.onScroll);
+      draggierEffects.push(() => {
+        ejectOnScroll?.();
+        dragReactiveState.onScroll = doNothing;
+      });
+
+      /*拖拽结束的时候停止自动滚动*/
+      draggierEffects.push(() => getScroll?.()?.methods.stopAutoScroll());
+      draggierEffects.push(async () => {
+        await dragReactiveState.endingDefer.promise;
+        dragReactiveState.pointIndex = null;
+      });
+
+      /*标记拖拽中响应式变量*/
+      dragReactiveState.isDragging = true;
+      draggierEffects.push(async () => {
+        await dragReactiveState.endingDefer.promise;
+        dragReactiveState.isDragging = false;
+      });
+
+      /*操作结束之后的更新数据动作*/
+      draggierEffects.push(async () => {
+        const { strutElement, dragIndex } = dragStaticState;
+        if (!initDragElementRect || dragReactiveState.pointIndex == null || !dragElementShadow || !strutElement || dragIndex == null) {
+          return;
+        }
+        // console.log('==>>', dragReactiveState.pointIndex);
+        const pointNode = dragStaticState.nodes[dragReactiveState.pointIndex];
+        // console.log(pointNode, dragElementShadow);
+        const afterTransition = () => {
+          if (dragReactiveState && dragReactiveState.pointIndex != null && dragIndex != null && dragReactiveState.pointIndex != dragIndex) {
+            const insertIndex = dragReactiveState.pointIndex;
+            const newList = [...dataModel.value || []];
+            const spliceArr = newList.splice(dragIndex, 1);
+            newList.splice(insertIndex, 0, ...spliceArr);
+            dataModel.value = (newList);
+          }
+          dragReactiveState.endingDefer.resolve();
+        };
+
+        const newStart = Math.ceil((() => {
+          if (props.horizontal) {
+            return dragReactiveState.pointIndex < dragIndex ?
+              (getElementRect(strutElement).left + pointNode.start) :
+              (getElementRect(strutElement).left + pointNode.end - initDragElementRect.width);
+          } else {
+            return dragReactiveState.pointIndex < dragIndex ?
+              (getElementRect(strutElement).top + pointNode.start) :
+              (getElementRect(strutElement).top + pointNode.end - initDragElementRect.height);
+          }
+        })()) + 'px';
+
+        const styleName = props.horizontal ? 'left' : 'top';
+
+        // console.log(newStart, dragElementShadow.style[styleName]);
+
+        if (dragElementShadow.style[styleName] == newStart) {
+          /*位置没有变化，直接更新数据，因为值没有变化，导致就算复制也不会触发transition动画*/
+          afterTransition();
+        } else {
+          /*位置有变化，等transition动画结束之后再更新数据*/
+          dragElementShadow.style.transition = 'all ease 300ms';
+          dragElementShadow.addEventListener('transitionend', async () => {
+            afterTransition();
+          });
+        }
+        dragElementShadow.style[styleName] = newStart;
+      });
+
+      onDraggierStart?.({ ...draggierData, dragStaticState, dragReactiveState });
+    },
+    onMove: (draggierData) => {
+
+      const { staticState } = draggierData;
+
+      const { dragElementShadow, initDragElementRect, hostElement, strutElement } = dragStaticState;
+
+      if (!dragElementShadow || !initDragElementRect || !hostElement || !strutElement) {
+        return;
+      }
+
+      const strutRect = getElementRect(strutElement);
+      const hostRect = getElementRect(hostElement);
+
+      const newStart = props.horizontal ?
+        initDragElementRect.left + staticState.durX :
+        initDragElementRect.top + staticState.durY;
+      const minStart = props.horizontal ?
+        getElementRect(hostElement).left :
+        getElementRect(hostElement).top;
+      const maxStart1 = props.horizontal ?
+        strutRect.left + strutRect.width - initDragElementRect.width :
+        strutRect.top + strutRect.height - initDragElementRect.height;
+      const maxStart2 = props.horizontal ?
+        hostRect.left + hostRect.width - initDragElementRect.width :
+        hostRect.top + hostRect.height - initDragElementRect.height;
+      const maxStart = Math.min(maxStart1, maxStart2);
+
+      const resultStart = Math.max(minStart, Math.min(maxStart, newStart));
+
+      if (resultStart == minStart) {
+        autoScrollManager?.set(props.horizontal ? 'left' : 'top');
+      } else if (resultStart == maxStart) {
+        autoScrollManager?.set(props.horizontal ? 'right' : 'bottom');
+      } else {
+        autoScrollManager?.set(null);
+      }
+
+      const styleName = props.horizontal ? 'left' : 'top';
+      dragElementShadow.style[styleName] = resultStart + 'px';
+
+      update();
+
+      onDraggierMove?.({ ...draggierData, dragStaticState, dragReactiveState });
+    },
+    onEnd: (draggierData) => {
+      onDraggierEnd?.({ ...draggierData, dragStaticState, dragReactiveState });
+    },
+    onTap: (draggierData) => {
+      onDraggierTap?.({ ...draggierData, dragStaticState, dragReactiveState });
+    },
+  });
+
+  const emitScroll = (e: any) => {
+    dragReactiveState.onScroll(e);
+  };
+
+  return {
+    dragStaticState,
+    dragReactiveState,
+    start,
+    getItemStyles,
+    emitScroll,
+  };
+}

package/src/packages/components/createScrollUtils/index.tsx

@@ -1,4 +1,4 @@
-import {delay} from "plain-utils/utils/delay";
+import {delay} from "@peryl/utils/delay";
 
 export function createScrollUtils(
   {

package/src/packages/components/createTransitionHandler/index.ts

@@ -0,0 +1,46 @@
+import {delay} from "@peryl/utils/delay";
+
+/**
+ * 创建一个transition管理器
+ * @author  韦胜健
+ * @date    2024.7.1 13:39
+ */
+export function createTransitionHandler(
+  {
+    getTransitionElement,
+    isShow,
+    isOpen,
+    onOpen,
+    onClose,
+  }: {
+    /*获取执行transition动画的元素对象*/
+    getTransitionElement: () => HTMLElement | null | undefined,
+    /*当前是否显示，此时过度动画准备开始*/
+    isShow: { value: boolean },
+    /*当前是否已经显示/隐藏，此时过度动画已经结束*/
+    isOpen: { value: boolean },
+    /*已经显示触发动作*/
+    onOpen?: () => void,
+    /*已经隐藏触发动作*/
+    onClose?: () => void,
+  }
+): (() => void) {
+  const processState = { timer: null as any };
+  const process = async () => {
+    if (processState.timer != null) {
+      clearTimeout(processState.timer);
+      processState.timer = null;
+    }
+    /*等Transition相应show属性之后，再处理，不然读取的transitionDuration为0*/
+    await delay(23);
+    const el = getTransitionElement();
+    if (!el) {return;}
+    const transitionDuration = Number(window.getComputedStyle(el).transitionDuration.replace('s', '')) * 1000;
+    processState.timer = setTimeout(() => {
+      isOpen.value = isShow.value;
+      isShow.value ? onOpen?.() : onClose?.();
+      processState.timer = null;
+    }, transitionDuration);
+  };
+  return process;
+}

package/src/packages/components/createVirtualDraggier/index.ts

@@ -0,0 +1,5 @@
+import {createVirtualDraggier} from "../VirtualList/createVirtualDraggier";
+
+export {createVirtualDraggier};
+
+export default createVirtualDraggier;

package/src/packages/components/createWebDraggier/index.ts

@@ -0,0 +1,5 @@
+import {createWebDraggier} from "../../utils/createDraggier";
+
+export {createWebDraggier};
+
+export default createWebDraggier;

package/src/packages/components/loadFile/index.ts

@@ -0,0 +1,20 @@
+export function loadFile<T = any>(filePath: string, globalName?: string, Win?: Window): Promise<T> {
+  const _window = Win || window;
+  return new Promise<T>((resolve, reject) => {
+    if (/\.js(\?.*)?/.test(filePath)) {
+      const el = _window.document.createElement('script') as HTMLScriptElement;
+      el.setAttribute('src', filePath);
+      el.onload = () => resolve(!globalName ? undefined : (_window as any)[globalName]);
+      el.onerror = reject;
+      _window.document.body.appendChild(el);
+    } else if (/\.css(\?.*)?/.test(filePath)) {
+      const el = _window.document.createElement('link') as HTMLLinkElement;
+      el.setAttribute('rel', 'stylesheet');
+      el.setAttribute('type', 'text/css');
+      el.setAttribute('href', filePath);
+      el.onload = () => resolve(undefined as any);
+      el.onerror = reject;
+      _window.document.body.appendChild(el);
+    }
+  });
+}

package/src/packages/components/useAutoScrollUtils/index.tsx

@@ -1,8 +1,8 @@
-import {addClass} from "plain-utils/dom/addClass";
+import {addClass} from "@peryl/utils/addClass";
 import {createScrollUtils, iScrollUtils, iScrollUtilsParameter} from "../createScrollUtils";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {getComponentCls} from "plain-design-composition";
-import {getElementParents} from "../../utils/getElementParents";
+import {createEffects} from "@peryl/utils/createEffects";
+import {getComponentCls} from "@peryl/react-compose";
+import {getElementParents} from "@peryl/utils/getElementParents";
 import './auto-scroll-utils.scss';
 import {isWindows} from "../../utils/getDeviceInfo";
 

package/src/packages/components/useDialog/DialogService.tsx

@@ -1,6 +1,6 @@
 import {createApplicationServiceComponent} from "../Application/service/createApplicationServiceComponent";
 import {closeDialogServiceHook, destroyDialogServiceHook, dialogCustomOptionKeys, DialogServiceEditType, iDialogServiceCustomOption, iDialogServiceOption} from "./dialog.service.utils";
-import {computed, createHooks, getComponentCls, reactive, ref, toRaw, useRefs} from "plain-design-composition";
+import {computed, createHooks, getComponentCls, onBeforeUnmount, reactive, ref, toRaw, useRefs} from "@peryl/react-compose";
 import {Dialog} from "../Dialog";
 import {i18n} from "../../i18n";
 import {DialogAlign, DialogCloseType, DialogPositions} from "../Dialog/utils/dialog.utils";
@@ -10,6 +10,7 @@ import Icon from "../Icon";
 import {ThemeStatusIcons} from "../Application/theme/theme.utils";
 import Input from "../Input";
 import InputNumber from "../InputNumber";
+import $message from "../$message";
 
 /**
  * 弹框服务单个组件
@@ -51,7 +52,7 @@ export const DialogService = createApplicationServiceComponent<iDialogServiceOpt
        */
       if (dialogProps.position === DialogPositions.center) {
         if (!dialogProps.headAlign) {dialogProps.headAlign = DialogAlign.center;}
-        if (!dialogProps.contentAlign) {dialogProps.contentAlign = DialogAlign.center;}
+        if (!dialogProps.contentAlign && !customOption.render) {dialogProps.contentAlign = DialogAlign.center;}
         if (!dialogProps.footAlign) {dialogProps.footAlign = DialogAlign.center;}
         if (dialogProps.closeType === undefined) {dialogProps.closeType = DialogCloseType.triangle;}
         if (dialogProps.maxWidth == null) {dialogProps.maxWidth = '50vw';}
@@ -80,14 +81,14 @@ export const DialogService = createApplicationServiceComponent<iDialogServiceOpt
      * @author  韦胜健
      * @date    2022.5.4 21:46
      */
-    closeDialogServiceHook.use(id => {(!id || (id === state.option.id)) && (hide());});
+    onBeforeUnmount(closeDialogServiceHook.use(id => {(!id || (id === state.option.id)) && (hide());}));
 
     /**
      * 销毁dialog service观察者对象，用来销毁hold类型的服务
      * @author  韦胜健
      * @date    2022/6/2 18:00
      */
-    destroyDialogServiceHook.use(opt => {
+    onBeforeUnmount(destroyDialogServiceHook.use(opt => {
       if (opt === state.option || opt === toRaw(state.option)) {
         if (!isOpen.value) {
           /*如果已经关闭，则直接销毁*/
@@ -101,13 +102,13 @@ export const DialogService = createApplicationServiceComponent<iDialogServiceOpt
           });
         }
       }
-    });
+    }));
 
-    onClose.use(() => {
+    onBeforeUnmount(onClose.use(() => {
       targetOption.value.dialogProps.onClose?.();
       /*如果服务为持有服务，则关闭时不销毁*/
       !targetOption.value.customOption.hold && destroy();
-    });
+    }));
 
     return {
       refer: {
@@ -121,19 +122,27 @@ export const DialogService = createApplicationServiceComponent<iDialogServiceOpt
         const head = () => (
           <div className="dialog-service-head">
             {!!targetOption.value.customOption.status && <Icon icon={ThemeStatusIcons[targetOption.value.customOption.status]}/>}
-            <span>{targetOption.value.dialogProps.title || i18n('base.defaultTitle').d('提示')}</span>
+            <span>{targetOption.value.dialogProps.title || i18n.$it('base.defaultTitle').d('提示')}</span>
           </div>
         );
         /*---------------------------------------foot-------------------------------------------*/
         const foot = () => !targetOption.value.dialogProps.confirmButton && !targetOption.value.dialogProps.cancelButton && (
-          <Button mode="fill" label={i18n('base.close').d('关闭')} onClick={hide} status={targetOption.value.customOption.status || undefined}/>
+          <Button mode="fill" label={i18n.$it('base.close').d('关闭')} onClick={hide} status={targetOption.value.customOption.status || undefined}/>
         );
         /*---------------------------------------default-------------------------------------------*/
         let defaultSlot = null as any;
         const dialogProps = { ...targetOption.value.dialogProps };
 
         /*wrap handleConfirm*/
-        dialogProps.handleConfirm = async (close: () => void) => targetOption.value.customOption.handleConfirm?.({ close, editValue: state.editValue });
+        dialogProps.handleConfirm = async (close: () => void) => {
+          if (!!targetOption.value.customOption.editRequired) {
+            if (state.editValue == null || !state.editValue.trim().length) {
+              $message.warn('不能为空！');
+              return false;
+            }
+          }
+          return targetOption.value.customOption.handleConfirm?.({ close, editValue: state.editValue });
+        };
 
         /*wrap onClose*/
         dialogProps.onClose = () => onClose.exec(undefined);
@@ -165,6 +174,7 @@ export const DialogService = createApplicationServiceComponent<iDialogServiceOpt
                 v-model={state.editValue}
                 readonly={option.editReadonly}
                 onEnter={onEnter}
+                status={option.editRequired ? 'warn' : undefined}
               />
             );
             break;
@@ -176,6 +186,7 @@ export const DialogService = createApplicationServiceComponent<iDialogServiceOpt
                 v-model={state.editValue}
                 readonly={option.editReadonly}
                 onEnter={onEnter}
+                status={option.editRequired ? 'warn' : undefined}
               />
             );
             break;
@@ -189,6 +200,7 @@ export const DialogService = createApplicationServiceComponent<iDialogServiceOpt
                 v-model={state.editValue}
                 readonly={option.editReadonly}
                 onEnter={onEnter}
+                status={option.editRequired ? 'warn' : undefined}
               />
             );
             break;

package/src/packages/components/useDialog/dialog.service.utils.tsx

@@ -1,8 +1,8 @@
-import {createEnum} from "plain-utils/utils/createEnum";
+import {createEnum} from "@peryl/utils/createEnum";
 import {Dialog} from "../Dialog";
 import {ThemeStatus} from "../../uses/useStyle";
-import {createHooks, RenderNode} from "plain-design-composition";
-import {createCounter} from "plain-utils/utils/createCounter";
+import {anonymousEffects, createHooks, RenderNode} from "@peryl/react-compose";
+import {createCounter} from "@peryl/utils/createCounter";
 
 /**
  * 给dialog option生成id
@@ -16,14 +16,14 @@ export const nextDialogId = createCounter('dialog-service');
  * @author  韦胜健
  * @date    2022.5.4 21:45
  */
-export const closeDialogServiceHook = createHooks<(id?: string) => void>();
+export const closeDialogServiceHook = createHooks<(id?: string) => void>(anonymousEffects);
 
 /**
  * 销毁dialog观察者对象
  * @author  韦胜健
  * @date    2022.5.4 21:45
  */
-export const destroyDialogServiceHook = createHooks<(option: any) => void>();
+export const destroyDialogServiceHook = createHooks<(option: any) => void>(anonymousEffects);
 
 /**
  * 弹框服务编辑框类型

package/src/packages/components/useDialog/index.tsx

@@ -1,11 +1,11 @@
 import {closeDialogServiceHook, destroyDialogServiceHook, iDialogServiceOption, nextDialogId} from "./dialog.service.utils";
-import {defer} from 'plain-utils/utils/defer';
+import {defer} from '@peryl/utils/defer';
 import {ThemeStatus} from "../../uses/useStyle";
 import {createApplicationServiceManager} from "../Application/service/createApplicationServiceManager";
 import {createApplicationService} from "../Application/service/createApplicationService";
 import {DialogService} from "./DialogService";
-import {formatOptions} from "../../utils/formatServiceOptions";
-import {onBeforeUnmount} from "plain-design-composition";
+import {formatOptions} from "@peryl/utils/formatServiceOptions";
+import {onBeforeUnmount} from "@peryl/react-compose";
 
 export const useDialog = createApplicationService(
   'dialog',
@@ -15,7 +15,7 @@ export const useDialog = createApplicationService(
     const service = (sourceOption: string | iDialogServiceOption, externalOption?: iDialogServiceOption): () => void => {
       const option = formatOptions(sourceOption, externalOption);
       !option.id && (option.id = nextDialogId());
-      option.minWidth !== null && (option.minWidth = '325px');
+      option.minWidth === null && (option.minWidth = '325px');
 
       getManager().then(async manager => {await manager.service(option);});