plain-design 1.0.0-beta.83 → 1.0.0-beta.84

package/src/packages/components/useLoading/LoadingService.tsx

@@ -0,0 +1,106 @@
+import {createApplicationServiceComponent} from "../Application/service/createApplicationServiceComponent";
+import {closeLoadingServiceHook, iLoadingServiceOption} from "./loading.service.utils";
+import {computed, createHooks, getComponentCls, iHTMLDivElement, onBeforeUnmount, reactive, ref, useClasses, useRefs, useStyles} from "plain-design-composition";
+import {ThemeStatus} from "../../uses/useStyle";
+import {createTransitionHandler} from "../createTransitionHandler";
+import './loading.service.scss';
+import {delay} from "plain-utils/utils/delay";
+import {createEffects} from "plain-utils/utils/createEffects";
+
+export const LoadingService = createApplicationServiceComponent<iLoadingServiceOption>({
+  name: 'loading-service',
+  setup({ option, destroy }) {
+
+    const { refs, onRef } = useRefs({ el: iHTMLDivElement });
+
+    const isShow = ref(false);
+    const isOpen = ref(false);
+
+    const { effects: setupEffects } = createEffects();
+    const { effects: timerEffects } = createEffects();
+
+    const state = reactive({
+      option,
+      percent: 0,
+    });
+
+    const classes = useClasses(() => [
+      getComponentCls('loading-service'),
+      {
+        'loading-service-show': isShow.value
+      }
+    ]);
+
+    const innerStyles = useStyles(style => {style.transform = `scaleX(${state.percent})`;});
+
+    const hooks = {
+      onOpen: createHooks(),
+      onClose: createHooks(),
+    };
+
+    const targetOption = computed(() => {
+      return {
+        ...state.option,
+        status: state.option.status || ThemeStatus.primary,
+        maxTime: state.option.maxTime === undefined ? 60 * 1000 : state.option.maxTime
+      };
+    });
+
+    async function service(option: iLoadingServiceOption) {
+      state.option = option;
+      await delay(23);
+      isShow.value = true;
+      handleTransition();
+      await delay(78);
+      state.percent = 0.2;
+
+      if (targetOption.value.maxTime) {
+        const timer = setTimeout(() => hide(), targetOption.value.maxTime);
+        timerEffects.push(() => clearTimeout(timer));
+      }
+
+      const maxPercent = 0.9;
+      let spacePrefix = '0.0';
+      const interval = setInterval(() => {
+        const space = Number(`${spacePrefix}${Math.ceil(Math.random() * 10)}`);
+        state.percent = Math.min(maxPercent, state.percent + (space));
+        if (state.percent > 0.75 && spacePrefix.length === 3) {spacePrefix += '0';}
+        if (state.percent >= maxPercent) {clearInterval(interval);}
+      }, 500);
+      timerEffects.push(() => clearInterval(interval));
+    }
+
+    const hide = async () => {
+      state.percent = 1;
+      timerEffects.clear();
+      await delay(150);
+      isShow.value = false;
+      handleTransition();
+    };
+
+    const handleTransition = createTransitionHandler({
+      getTransitionElement: () => refs.el,
+      isShow, isOpen,
+      onOpen: () => hooks.onOpen.exec(undefined),
+      onClose: () => hooks.onClose.exec(undefined),
+    });
+
+    setupEffects.push(closeLoadingServiceHook.use(id => {(!id || (id === state.option.id)) && (hide());}));
+    setupEffects.push(hooks.onClose.use(() => {destroy();}));
+
+    onBeforeUnmount(setupEffects.clear);
+
+    return {
+      refer: {
+        service,
+        isShow,
+        isOpen,
+      },
+      render: () => (
+        <div ref={onRef.el} className={classes.value} data-service-id={state.option.id}>
+          <div className="loading-service-inner" style={innerStyles.value}/>
+        </div>
+      )
+    };
+  },
+});

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

@@ -0,0 +1,31 @@
+import {closeLoadingServiceHook, iLoadingServiceOption} from "./loading.service.utils";
+import {createApplicationService} from "../Application/service/createApplicationService";
+import {createApplicationServiceManager} from "../Application/service/createApplicationServiceManager";
+import {LoadingService} from "./LoadingService";
+import {createCounter} from "plain-utils/utils/createCounter";
+
+interface iLoadingServiceFunction {
+  (option?: iLoadingServiceOption): () => void;
+}
+
+const nextLoadingId = createCounter('loading');
+
+export const useLoading = createApplicationService(
+  'loading',
+  createApplicationServiceManager({ name: 'loading', Service: LoadingService }),
+  (getManager) => {
+
+    const service: iLoadingServiceFunction = (_option) => {
+      const option: iLoadingServiceOption = _option || {};
+      !option.id && (option.id = nextLoadingId());
+
+      getManager().then(async manager => {await manager.service(option);});
+
+      return () => closeLoadingServiceHook.exec(option!.id!);
+    };
+
+    return { $loading: service };
+  },
+);
+
+export default useLoading;

package/src/packages/components/useLoading/loading.service.scss

@@ -0,0 +1,25 @@
+@include comp(loading-service) {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  transition: all ease 300ms;
+
+  &:not(.loading-service-show) {
+    opacity: 0;
+  }
+
+  &.loading-service-show {
+    opacity: 1;
+  }
+
+  .loading-service-inner {
+    position: absolute;
+    inset: 0;
+    height: 100%;
+    background-color: plv(primary-6);
+    transition: all ease 500ms;
+    transform-origin: top left;
+  }
+}

package/src/packages/components/useLoading/loading.service.utils.tsx

@@ -0,0 +1,13 @@
+import {ThemeStatus} from "../../uses/useStyle";
+import {createHooks} from "plain-design-composition";
+
+export interface iLoadingServiceOption {
+  id?: string,
+  hold?: boolean,
+  status?: typeof ThemeStatus.TYPE,
+  color?: string,
+  maxTime?: number | null,
+  onClose?: () => void,
+}
+
+export const closeLoadingServiceHook = createHooks<(id?: string) => void>();

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

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, iMouseEvent, nextIndex, onMounted, PropType, useClasses} from "plain-design-composition";
+import {designComponent, getComponentCls, iMouseEvent, nextIndex, onBeforeUnmount, onMounted, PropType, useClasses} from "plain-design-composition";
 import {closeMessageServiceHook, iMessageServiceOption} from "./message.service.utils";
 import Icon from "../Icon";
 import './message.scss';
@@ -51,7 +51,9 @@ export const Message = designComponent({
     let closeTimer: number | null = null;
     !!props.option.time && (closeTimer = setTimeout(close, props.option.time) as any);
 
-    closeMessageServiceHook.use(id => {(!id || id === props.option.id) && close();});
+    onBeforeUnmount(
+      closeMessageServiceHook.use(id => {(!id || id === props.option.id) && close();})
+    );
 
     return {
       refer: {

package/src/packages/components/useNotice/Notice.tsx

@@ -1,5 +1,5 @@
 import './notice.scss';
-import {designComponent, getComponentCls, iMouseEvent, nextIndex, onMounted, PropType, useClasses} from "plain-design-composition";
+import {designComponent, getComponentCls, iMouseEvent, nextIndex, onBeforeUnmount, onMounted, PropType, useClasses} from "plain-design-composition";
 import {closeNoticeServiceHook, iNoticeServiceOption} from "./noitice.service.utils";
 import Icon from "../Icon";
 
@@ -47,7 +47,9 @@ export const Notice = designComponent({
     let closeTimer: number | null = null;
     !!props.option.time && (closeTimer = setTimeout(close, props.option.time) as any);
 
-    closeNoticeServiceHook.use(id => {(!id || id === props.option.id) && close();});
+    onBeforeUnmount(
+      closeNoticeServiceHook.use(id => {(!id || id === props.option.id) && close();})
+    );
 
     return {
       refer: {

package/src/packages/entry.tsx

@@ -74,6 +74,7 @@ export {ImageUploader} from './components/ImageUploader';
 export {Upload} from './components/Upload';
 export {$file} from './components/$file';
 export {$image} from './components/$image';
+export {$loading} from './components/$loading';
 export {useTooltip} from './components/useTooltip';
 export {i18n} from './components/i18n';
 export {KeepAlive} from './components/KeepAlive';
@@ -123,6 +124,7 @@ export {PageCardContent} from './components/PageCardContent';
 export {RollingNumber} from './components/RollingNumber';
 export {Paragraph} from './components/Paragraph';
 export {ParagraphItem} from './components/ParagraphItem';
+export {ImagePreviewer} from './components/ImagePreviewer/ImagePreviewer';
 
 export {VirtualTable} from './components/VirtualTable';
 export {Table} from './components/Table';
@@ -275,6 +277,7 @@ export type{iRequestInterceptor} from './components/createRequestInterceptor';
 export {createVirtualDraggier} from './components/createVirtualDraggier';
 export {createWebDraggier} from './components/createWebDraggier';
 export {createScrollDraggier} from './components/createScrollDraggier';
+export {loadFile} from './components/loadFile'
 
 // @ts-ignore
 setComponentPrefix(globalComponentPrefix);

package/src/packages/utils/plainDate.ts

@@ -192,11 +192,11 @@ const parse = (str: string | undefined | null, format: string) => {
  * @author  韦胜健
  * @date    2021/1/18 10:30
  */
-const today = (displayFormat: string = 'YYYY-MM-DD', valueFormat: string = 'YYYY-MM-DD') => {
+const today = (displayFormat = 'YYYY-MM-DD', valueFormat = 'YYYY-MM-DD') => {
   return wrapDate(new Date(), { displayFormat, valueFormat });
 };
 
-const now = (displayFormat: string = 'YYYY-MM-DD HH:mm:ss', valueFormat: string = 'YYYY-MM-DD HH:mm:ss') => {
+const now = (displayFormat = 'YYYY-MM-DD HH:mm:ss', valueFormat = 'YYYY-MM-DD HH:mm:ss') => {
   return wrapDate(new Date(), { displayFormat, valueFormat });
 };