plain-design 1.0.0-beta.147 → 1.0.0-beta.149

package/src/packages/components/useMessage/MessageManager.tsx

@@ -1,58 +1,58 @@
-import {designComponent, getComponentCls, onMounted, PropType, reactive, useRefList} from "@peryl/react-compose";
-import {iApplicationManagerData} from "../Application/service/useApplicationService";
-import {MessageDirection} from "./message.service.utils";
-import {MessageContainer} from "./MessageContainer";
-import {createServiceReadyObserver} from "../Application/utils/createServiceReadyObserver";
-
-interface iContainerOption {
-  horizontal: typeof MessageDirection.TYPE,
-  vertical: typeof MessageDirection.TYPE
-}
-
-export const MessageManager = designComponent({
-  name: 'message-manager',
-  props: {
-    getManagerData: { type: Function as PropType<() => iApplicationManagerData>, required: true },
-  },
-  emits: {
-    onReady: () => true,
-  },
-  setup: function ({ props, event }) {
-
-    onMounted(() => event.emit.onReady());
-    const serviceReadyObserver = createServiceReadyObserver<iContainerOption>();
-    const state = reactive({ containers: [{ horizontal: MessageDirection.center, vertical: MessageDirection.start, }] as iContainerOption[] });
-    const { refList, onRefList } = useRefList(MessageContainer);
-
-    const getContainer = async (config: { horizontal: typeof MessageDirection.TYPE, vertical: typeof MessageDirection.TYPE }): Promise<typeof MessageContainer.use.class> => {
-      for (let i = 0; i < refList.length; i++) {
-        const ref = refList[i];
-        if (ref.props.horizontal === config.horizontal && ref.props.vertical === config.vertical) {
-          return ref;
-        }
-      }
-      state.containers.push(config);
-      return serviceReadyObserver.getNewIns(state.containers);
-    };
-
-    return {
-      refer: {
-        props,
-        getContainer,
-        event,
-      },
-      render: () => (
-        <div className={getComponentCls('message-manager')}>
-          {state.containers.map((container, index) =>
-            <MessageContainer
-              key={index}
-              horizontal={container.horizontal}
-              vertical={container.vertical}
-              ref={onRefList(index)}
-              onReady={() => serviceReadyObserver.onReady({ option: container, ins: refList[index] })}
-            />)}
-        </div>
-      )
-    };
-  },
-});
+import {designComponent, getComponentCls, onMounted, PropType, reactive, useRefList} from "@peryl/react-compose";
+import {iApplicationManagerData} from "../Application/service/useApplicationService";
+import {MessageDirection} from "./message.service.utils";
+import {MessageContainer} from "./MessageContainer";
+import {createServiceReadyObserver} from "../Application/utils/createServiceReadyObserver";
+
+interface iContainerOption {
+  horizontal: typeof MessageDirection.TYPE,
+  vertical: typeof MessageDirection.TYPE
+}
+
+export const MessageManager = designComponent({
+  name: 'message-manager',
+  props: {
+    getManagerData: { type: Function as PropType<() => iApplicationManagerData>, required: true },
+  },
+  emits: {
+    onReady: () => true,
+  },
+  setup: function ({ props, event }) {
+
+    onMounted(() => event.emit.onReady());
+    const serviceReadyObserver = createServiceReadyObserver<iContainerOption>();
+    const state = reactive({ containers: [{ horizontal: MessageDirection.center, vertical: MessageDirection.start, }] as iContainerOption[] });
+    const { refList, onRefList } = useRefList(MessageContainer);
+
+    const getContainer = async (config: { horizontal: typeof MessageDirection.TYPE, vertical: typeof MessageDirection.TYPE }): Promise<typeof MessageContainer.use.class> => {
+      for (let i = 0; i < refList.length; i++) {
+        const ref = refList[i];
+        if (ref.props.horizontal === config.horizontal && ref.props.vertical === config.vertical) {
+          return ref;
+        }
+      }
+      state.containers.push(config);
+      return serviceReadyObserver.getNewIns(state.containers);
+    };
+
+    return {
+      refer: {
+        props,
+        getContainer,
+        event,
+      },
+      render: () => (
+        <div className={getComponentCls('message-manager')}>
+          {state.containers.map((container, index) =>
+            <MessageContainer
+              key={index}
+              horizontal={container.horizontal}
+              vertical={container.vertical}
+              ref={onRefList(index)}
+              onReady={() => serviceReadyObserver.onReady({ option: container, ins: refList[index] })}
+            />)}
+        </div>
+      )
+    };
+  },
+});

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

@@ -1,51 +1,51 @@
-import {createApplicationService} from "../Application/service/createApplicationService";
-import {MessageManager} from "./MessageManager";
-import {closeMessageServiceHook, iMessageServiceOption, MessageDirection, nextMessageId} from "./message.service.utils";
-import {formatOptions} from "@peryl/utils/formatServiceOptions";
-import {ThemeStatus} from "../../uses/useStyle";
-import {ThemeStatusIcons} from "../Application/theme/theme.utils";
-
-/**
- * 消息服务函数类型
- * @author  韦胜健
- * @date    2020/11/7 18:21
- */
-interface MessageServiceFunction {
-  (message: string | iMessageServiceOption, option?: iMessageServiceOption): () => void;
-}
-
-export const useMessage = createApplicationService(
-  'message',
-  MessageManager,
-  (getManager) => {
-
-    const service: MessageServiceFunction = (sourceOption: string | iMessageServiceOption, externalOption?: iMessageServiceOption) => {
-      const option = formatOptions(sourceOption, externalOption);
-      if (!option.id) {option.id = nextMessageId();}
-      if (!option.horizontal) {option.horizontal = MessageDirection.center;}
-      if (!option.vertical) {option.vertical = MessageDirection.start;}
-      if (option.time === undefined) {option.time = 3000;}
-      if (option.status == null) {option.status = ThemeStatus.primary;}
-      if (!option.icon && !!option.status) {option.icon = ThemeStatusIcons[option.status];}
-      getManager().then(manager => manager.getContainer({ horizontal: option.horizontal!, vertical: option.vertical! }).then(container => container.getMessage(option)));
-      return () => closeMessageServiceHook.exec(option.id!);
-    };
-
-    function createStatusService(): Record<typeof ThemeStatus.TYPE, typeof service> {
-      return Object.keys(ThemeStatus).reduce((prev, key) => {
-        if (key !== 'TYPE') {
-          prev[key] = (sourceOption: string | iMessageServiceOption, externalOption?: iMessageServiceOption) => {
-            const option = formatOptions(sourceOption, externalOption);
-            option.status = key as any;
-            return service(option);
-          };
-        }
-        return prev;
-      }, {} as any);
-    }
-
-    return { $message: Object.assign(service, { ...createStatusService() }) };
-  }
-);
-
-export default useMessage;
+import {createApplicationService} from "../Application/service/createApplicationService";
+import {MessageManager} from "./MessageManager";
+import {closeMessageServiceHook, iMessageServiceOption, MessageDirection, nextMessageId} from "./message.service.utils";
+import {formatOptions} from "@peryl/utils/formatServiceOptions";
+import {ThemeStatus} from "../../uses/useStyle";
+import {ThemeStatusIcons} from "../Application/theme/theme.utils";
+
+/**
+ * 消息服务函数类型
+ * @author  韦胜健
+ * @date    2020/11/7 18:21
+ */
+interface MessageServiceFunction {
+  (message: string | iMessageServiceOption, option?: iMessageServiceOption): () => void;
+}
+
+export const useMessage = createApplicationService(
+  'message',
+  MessageManager,
+  (getManager) => {
+
+    const service: MessageServiceFunction = (sourceOption: string | iMessageServiceOption, externalOption?: iMessageServiceOption) => {
+      const option = formatOptions(sourceOption, externalOption);
+      if (!option.id) {option.id = nextMessageId();}
+      if (!option.horizontal) {option.horizontal = MessageDirection.center;}
+      if (!option.vertical) {option.vertical = MessageDirection.start;}
+      if (option.time === undefined) {option.time = 3000;}
+      if (option.status == null) {option.status = ThemeStatus.primary;}
+      if (!option.icon && !!option.status) {option.icon = ThemeStatusIcons[option.status];}
+      getManager().then(manager => manager.getContainer({ horizontal: option.horizontal!, vertical: option.vertical! }).then(container => container.getMessage(option)));
+      return () => closeMessageServiceHook.exec(option.id!);
+    };
+
+    function createStatusService(): Record<typeof ThemeStatus.TYPE, typeof service> {
+      return Object.keys(ThemeStatus).reduce((prev, key) => {
+        if (key !== 'TYPE') {
+          prev[key] = (sourceOption: string | iMessageServiceOption, externalOption?: iMessageServiceOption) => {
+            const option = formatOptions(sourceOption, externalOption);
+            option.status = key as any;
+            return service(option);
+          };
+        }
+        return prev;
+      }, {} as any);
+    }
+
+    return { $message: Object.assign(service, { ...createStatusService() }) };
+  }
+);
+
+export default useMessage;

package/src/packages/components/useMessage/message.scss

@@ -1,149 +1,149 @@
-@include prefix(message-manager) {
-  pointer-events: none;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 9999;
-}
-
-@include prefix(message-container) {
-  pointer-events: none;
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100vh;
-  width: 100vw;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-
-  @include prefix(item) {
-    position: relative;
-  }
-
-  @each $horizontal in (start, center, end) {
-    @each $vertical in (start, center, end) {
-      &.message-container-#{$horizontal}-#{$vertical} {
-        @if $vertical  == center {
-          justify-content: center;
-        } @else {
-          justify-content: flex-#{$vertical};
-        }
-
-        & > .#{componentName(list)} {
-          & > .#{componentName(item)} {
-            margin-bottom: 8px;
-            width: 100%;
-            $textAlign: center;
-            @if ($horizontal == "start") {
-              $textAlign: left;
-            }
-            @if ($horizontal == "end") {
-              $textAlign: right;
-            }
-            text-align: $textAlign;
-          }
-        }
-      }
-    }
-  }
-}
-
-@include prefix(message) {
-  text-align: initial;
-  padding: plv(message-padding);
-  white-space: nowrap;
-  pointer-events: auto;
-  display: inline-flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: plv(message-font-size);
-  box-shadow: plv(message-box-shadow);
-  position: relative;
-  overflow: hidden;
-  background-color: plv(bg-4);
-  color: plv(text-2);
-  border-radius: plv(box-size-normal-border-radius);
-
-  @include prefix(icon) {
-    font-size: 1.4em;
-    &:not(.message-close) + * {
-      margin-left: 8px;
-    }
-  }
-
-  .message-close {
-    position: absolute;
-    right: 0;
-    top: 0;
-    opacity: 0;
-    transition: opacity 300ms linear;
-    width: 20px;
-    height: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    @include prefix(icon) {
-      color: plv(bg-4);
-      position: relative;
-      z-index: 1;
-
-      transform: scale(0.6);
-      right: -3px;
-      top: -3px;
-    }
-
-    &:after {
-      position: absolute;
-      top: -21px;
-      left: 4px;
-      height: 40px;
-      width: 40px;
-      content: "";
-      transform: rotate(45deg);
-    }
-  }
-
-  &:hover {
-    .message-close {
-      opacity: initial
-    }
-  }
-
-  .message-content {
-    max-width: 75vw;
-    display: inline-block;
-    white-space: normal;
-  }
-
-  .message-close {
-    cursor: pointer;
-    user-select: none;
-  }
-
-  @include statusMixin(message) {
-    @include prefix(icon) {
-      color: $color-6;
-    }
-    .message-close {
-      @include prefix(icon) {
-       color: plv(pbfc);
-      }
-
-      &:after {
-        background-color: $color-6;
-      }
-
-      &:hover {
-        &:after {
-          background-color: $color-4;
-        }
-      }
-    }
-  }
-
-  @include sizeMixin(message, (font-size)) {
-    padding: calc(#{plv(dropdown-size-#{$name}-padding-y)} * 2);
-  }
-}
+@include prefix(message-manager) {
+  pointer-events: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+}
+
+@include prefix(message-container) {
+  pointer-events: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+
+  @include prefix(item) {
+    position: relative;
+  }
+
+  @each $horizontal in (start, center, end) {
+    @each $vertical in (start, center, end) {
+      &.message-container-#{$horizontal}-#{$vertical} {
+        @if $vertical  == center {
+          justify-content: center;
+        } @else {
+          justify-content: flex-#{$vertical};
+        }
+
+        & > .#{componentName(list)} {
+          & > .#{componentName(item)} {
+            margin-bottom: 8px;
+            width: 100%;
+            $textAlign: center;
+            @if ($horizontal == "start") {
+              $textAlign: left;
+            }
+            @if ($horizontal == "end") {
+              $textAlign: right;
+            }
+            text-align: $textAlign;
+          }
+        }
+      }
+    }
+  }
+}
+
+@include prefix(message) {
+  text-align: initial;
+  padding: plv(message-padding);
+  white-space: nowrap;
+  pointer-events: auto;
+  display: inline-flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: plv(message-font-size);
+  box-shadow: plv(message-box-shadow);
+  position: relative;
+  overflow: hidden;
+  background-color: plv(bg-4);
+  color: plv(text-2);
+  border-radius: plv(box-size-normal-border-radius);
+
+  @include prefix(icon) {
+    font-size: 1.4em;
+    &:not(.message-close) + * {
+      margin-left: 8px;
+    }
+  }
+
+  .message-close {
+    position: absolute;
+    right: 0;
+    top: 0;
+    opacity: 0;
+    transition: opacity 300ms linear;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    @include prefix(icon) {
+      color: plv(bg-4);
+      position: relative;
+      z-index: 1;
+
+      transform: scale(0.6);
+      right: -3px;
+      top: -3px;
+    }
+
+    &:after {
+      position: absolute;
+      top: -21px;
+      left: 4px;
+      height: 40px;
+      width: 40px;
+      content: "";
+      transform: rotate(45deg);
+    }
+  }
+
+  &:hover {
+    .message-close {
+      opacity: initial
+    }
+  }
+
+  .message-content {
+    max-width: 75vw;
+    display: inline-block;
+    white-space: normal;
+  }
+
+  .message-close {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  @include statusMixin(message) {
+    @include prefix(icon) {
+      color: $color-6;
+    }
+    .message-close {
+      @include prefix(icon) {
+       color: plv(pbfc);
+      }
+
+      &:after {
+        background-color: $color-6;
+      }
+
+      &:hover {
+        &:after {
+          background-color: $color-4;
+        }
+      }
+    }
+  }
+
+  @include sizeMixin(message, (font-size)) {
+    padding: calc(#{plv(dropdown-size-#{$name}-padding-y)} * 2);
+  }
+}

package/src/packages/components/useMessage/message.service.utils.tsx

@@ -1,43 +1,43 @@
-import {createEnum} from "@peryl/utils/createEnum";
-import {ThemeStatus} from "../../uses/useStyle";
-import {anonymousEffects, createHooks, iMouseEvent, RenderNode} from "@peryl/react-compose";
-import {createCounter} from "@peryl/utils/createCounter";
-
-/**
- * 消息提示服务位置方向
- * @author  韦胜健
- * @date    2022.5.4 22:31
- */
-export const MessageDirection = createEnum(['start', 'center', 'end'] as const);
-
-/**
- * 创建一个消息提示服务唯一标识id
- * @author  韦胜健
- * @date    2022.5.4 22:31
- */
-export const nextMessageId = createCounter('message-service');
-
-/**
- * 消息提示服务关闭观察者对象
- * @author  韦胜健
- * @date    2022.5.4 22:32
- */
-export const closeMessageServiceHook = createHooks<(id: string) => void>(anonymousEffects);
-
-/**
- * 消息提示服务对象参数类型
- * @author  韦胜健
- * @date    2022.5.4 22:32
- */
-export interface iMessageServiceOption {
-  id?: string,
-  message?: string,                                                                               // 消息文本
-  horizontal?: typeof MessageDirection.TYPE,                                                      // 横向位置
-  vertical?: typeof MessageDirection.TYPE,                                                        // 纵向位置
-  time?: number | null,                                                                           // 显示的时间
-  status?: typeof ThemeStatus.TYPE,                                                               // 消息状态
-  render?: () => RenderNode,                                                                      // 自定义内容渲染函数
-  icon?: string | null,                                                                           // 显示的图标
-  onClick?: (e: iMouseEvent) => void,                                                              // 自定义点击处理动作
-  onClose?: () => void,                                                                           // 处理消息关闭之后的动作
-}
+import {createEnum} from "@peryl/utils/createEnum";
+import {ThemeStatus} from "../../uses/useStyle";
+import {anonymousEffects, createHooks, iMouseEvent, RenderNode} from "@peryl/react-compose";
+import {createCounter} from "@peryl/utils/createCounter";
+
+/**
+ * 消息提示服务位置方向
+ * @author  韦胜健
+ * @date    2022.5.4 22:31
+ */
+export const MessageDirection = createEnum(['start', 'center', 'end'] as const);
+
+/**
+ * 创建一个消息提示服务唯一标识id
+ * @author  韦胜健
+ * @date    2022.5.4 22:31
+ */
+export const nextMessageId = createCounter('message-service');
+
+/**
+ * 消息提示服务关闭观察者对象
+ * @author  韦胜健
+ * @date    2022.5.4 22:32
+ */
+export const closeMessageServiceHook = createHooks<(id: string) => void>(anonymousEffects);
+
+/**
+ * 消息提示服务对象参数类型
+ * @author  韦胜健
+ * @date    2022.5.4 22:32
+ */
+export interface iMessageServiceOption {
+  id?: string,
+  message?: string,                                                                               // 消息文本
+  horizontal?: typeof MessageDirection.TYPE,                                                      // 横向位置
+  vertical?: typeof MessageDirection.TYPE,                                                        // 纵向位置
+  time?: number | null,                                                                           // 显示的时间
+  status?: typeof ThemeStatus.TYPE,                                                               // 消息状态
+  render?: () => RenderNode,                                                                      // 自定义内容渲染函数
+  icon?: string | null,                                                                           // 显示的图标
+  onClick?: (e: iMouseEvent) => void,                                                              // 自定义点击处理动作
+  onClose?: () => void,                                                                           // 处理消息关闭之后的动作
+}