plain-design 1.0.0-beta.73 → 1.0.0-beta.75

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

@@ -1,163 +1,163 @@
-import {delay} from "plain-utils/utils/delay";
-
-export function createScrollUtils(
-  {
-    getScrollElement, getAutoScrollSpeed, onStop,
-  }: {
-    getScrollElement: () => HTMLElement | null | undefined,
-    getAutoScrollSpeed?: () => number | null | undefined,
-    onStop?: () => void,
-  }
-) {
-
-  let cancelAnimate: number | null = null;
-
-  const _getAutoScrollSpeed = () => (getAutoScrollSpeed ? getAutoScrollSpeed() : 400) || 400;
-
-  const scroll = (
-    {
-      top,
-      left,
-      time,
-      onBegin,
-      onFinish,
-    }: {
-      top?: number,
-      left?: number,
-      time?: number,
-      onFinish?: () => void,
-      onBegin?: () => void,
-    }
-  ) => {
-
-    const scrollElement = getScrollElement();
-    if (!scrollElement) return;
-    if (top == null && left == null) {return;}
-
-    onBegin?.();
-
-    const done = () => {onFinish?.();};
-
-    if (!time) {
-      if (left != null) scrollElement.scrollLeft = left;
-      if (top != null) scrollElement.scrollTop = top;
-      delay(23).then(done);
-    } else {
-
-      if (!!cancelAnimate) {
-        cancelAnimationFrame(cancelAnimate);
-        cancelAnimate = null;
-      }
-
-      let ny = scrollElement.scrollTop;
-      let nx = scrollElement.scrollLeft;
-
-      let ky = top == null ? 0 : (top - ny) / time;
-      let kx = left == null ? 0 : (left - nx) / time;
-
-      let startTime = Date.now();
-
-      const run = () => {
-        let nowTime = Date.now();
-        let delta = nowTime - startTime;
-        let top;
-        let left;
-
-        if (delta >= time) {
-          cancelAnimate = null;
-          top = time * ky + ny;
-          left = time * kx + nx;
-
-          if (scrollElement) {
-            top != null && (scrollElement.scrollTop = top);
-            left != null && (scrollElement.scrollLeft = left);
-            delay(23).then(done);
-          }
-        } else {
-          top = delta * ky + ny;
-          left = delta * kx + nx;
-
-          if (!!scrollElement) {
-            top != null && (scrollElement.scrollTop = top);
-            left != null && (scrollElement.scrollLeft = left);
-          }
-          cancelAnimate = requestAnimationFrame(run);
-        }
-      };
-
-      run();
-    }
-
-  };
-
-  const scrollTop = (top: number, time?: number) => {
-    const scrollElement = getScrollElement();
-    if (!scrollElement || scrollElement.scrollTop === top) {return;}
-    scroll({ top, time });
-  };
-
-  const scrollLeft = (left: number, time?: number) => {
-    const scrollElement = getScrollElement();
-    if (!scrollElement || scrollElement.scrollLeft === left) {return;}
-    scroll({ left, time });
-  };
-
-  const scrollEnd = ({ top, left }: { top?: boolean, left?: boolean } = { top: true, left: true }) => {
-    const scrollElement = getScrollElement();
-    if (!scrollElement) {return;}
-    scroll({ top: top ? scrollElement.scrollHeight : undefined, left: left ? scrollElement.scrollWidth : undefined, });
-  };
-
-  const autoScrollTop = () => {
-    const scrollElement = getScrollElement();
-    if (!scrollElement) {return;}
-    const { scrollHeight, offsetHeight } = scrollElement;
-    if (scrollHeight <= offsetHeight) {return;}
-    const duration = (scrollElement.scrollTop / _getAutoScrollSpeed()) * 1000;
-    scrollTop(0, duration);
-  };
-
-  const autoScrollBottom = () => {
-    const scrollElement = getScrollElement();
-    if (!scrollElement) {return;}
-    const { scrollHeight, offsetHeight } = scrollElement;
-    if (scrollHeight <= offsetHeight) {return;}
-    const duration = ((scrollHeight - offsetHeight - scrollElement.scrollTop) / _getAutoScrollSpeed()) * 1000;
-    scrollTop(scrollHeight - offsetHeight + 17, duration);
-  };
-
-  const autoScrollLeft = () => {
-    const scrollElement = getScrollElement();
-    if (!scrollElement) {return;}
-    const { scrollWidth, offsetWidth } = scrollElement;
-    if (scrollWidth <= offsetWidth) {return;}
-    const duration = (scrollElement.scrollLeft / _getAutoScrollSpeed()) * 1000;
-    scrollLeft(0, duration);
-  };
-
-  const autoScrollRight = () => {
-    const scrollElement = getScrollElement();
-    if (!scrollElement) {return;}
-    const { scrollWidth, offsetWidth } = scrollElement;
-    if (scrollWidth <= offsetWidth) {return;}
-    const duration = ((scrollWidth - offsetWidth - scrollElement.scrollLeft) / _getAutoScrollSpeed()) * 1000;
-    scrollLeft(scrollWidth - offsetWidth + 17, duration);
-  };
-
-  const stopAutoScroll = () => {
-    if (!!cancelAnimate) {
-      cancelAnimationFrame(cancelAnimate);
-      cancelAnimate = null;
-      onStop?.();
-    }
-  };
-
-  return {
-    scroll, scrollTop, scrollLeft, autoScrollLeft, autoScrollRight, autoScrollTop, autoScrollBottom, stopAutoScroll, scrollEnd,
-    getScrollElement,
-  };
-}
-
-export type iScrollUtils = ReturnType<typeof createScrollUtils>
-
-export type iScrollUtilsParameter = Parameters<typeof createScrollUtils>[0]
+import {delay} from "plain-utils/utils/delay";
+
+export function createScrollUtils(
+  {
+    getScrollElement, getAutoScrollSpeed, onStop,
+  }: {
+    getScrollElement: () => HTMLElement | null | undefined,
+    getAutoScrollSpeed?: () => number | null | undefined,
+    onStop?: () => void,
+  }
+) {
+
+  let cancelAnimate: number | null = null;
+
+  const _getAutoScrollSpeed = () => (getAutoScrollSpeed ? getAutoScrollSpeed() : 400) || 400;
+
+  const scroll = (
+    {
+      top,
+      left,
+      time,
+      onBegin,
+      onFinish,
+    }: {
+      top?: number,
+      left?: number,
+      time?: number,
+      onFinish?: () => void,
+      onBegin?: () => void,
+    }
+  ) => {
+
+    const scrollElement = getScrollElement();
+    if (!scrollElement) return;
+    if (top == null && left == null) {return;}
+
+    onBegin?.();
+
+    const done = () => {onFinish?.();};
+
+    if (!time) {
+      if (left != null) scrollElement.scrollLeft = left;
+      if (top != null) scrollElement.scrollTop = top;
+      delay(23).then(done);
+    } else {
+
+      if (!!cancelAnimate) {
+        cancelAnimationFrame(cancelAnimate);
+        cancelAnimate = null;
+      }
+
+      let ny = scrollElement.scrollTop;
+      let nx = scrollElement.scrollLeft;
+
+      let ky = top == null ? 0 : (top - ny) / time;
+      let kx = left == null ? 0 : (left - nx) / time;
+
+      let startTime = Date.now();
+
+      const run = () => {
+        let nowTime = Date.now();
+        let delta = nowTime - startTime;
+        let top;
+        let left;
+
+        if (delta >= time) {
+          cancelAnimate = null;
+          top = time * ky + ny;
+          left = time * kx + nx;
+
+          if (scrollElement) {
+            top != null && (scrollElement.scrollTop = top);
+            left != null && (scrollElement.scrollLeft = left);
+            delay(23).then(done);
+          }
+        } else {
+          top = delta * ky + ny;
+          left = delta * kx + nx;
+
+          if (!!scrollElement) {
+            top != null && (scrollElement.scrollTop = top);
+            left != null && (scrollElement.scrollLeft = left);
+          }
+          cancelAnimate = requestAnimationFrame(run);
+        }
+      };
+
+      run();
+    }
+
+  };
+
+  const scrollTop = (top: number, time?: number) => {
+    const scrollElement = getScrollElement();
+    if (!scrollElement || scrollElement.scrollTop === top) {return;}
+    scroll({ top, time });
+  };
+
+  const scrollLeft = (left: number, time?: number) => {
+    const scrollElement = getScrollElement();
+    if (!scrollElement || scrollElement.scrollLeft === left) {return;}
+    scroll({ left, time });
+  };
+
+  const scrollEnd = ({ top, left }: { top?: boolean, left?: boolean } = { top: true, left: true }) => {
+    const scrollElement = getScrollElement();
+    if (!scrollElement) {return;}
+    scroll({ top: top ? scrollElement.scrollHeight : undefined, left: left ? scrollElement.scrollWidth : undefined, });
+  };
+
+  const autoScrollTop = () => {
+    const scrollElement = getScrollElement();
+    if (!scrollElement) {return;}
+    const { scrollHeight, offsetHeight } = scrollElement;
+    if (scrollHeight <= offsetHeight) {return;}
+    const duration = (scrollElement.scrollTop / _getAutoScrollSpeed()) * 1000;
+    scrollTop(0, duration);
+  };
+
+  const autoScrollBottom = () => {
+    const scrollElement = getScrollElement();
+    if (!scrollElement) {return;}
+    const { scrollHeight, offsetHeight } = scrollElement;
+    if (scrollHeight <= offsetHeight) {return;}
+    const duration = ((scrollHeight - offsetHeight - scrollElement.scrollTop) / _getAutoScrollSpeed()) * 1000;
+    scrollTop(scrollHeight - offsetHeight + 17, duration);
+  };
+
+  const autoScrollLeft = () => {
+    const scrollElement = getScrollElement();
+    if (!scrollElement) {return;}
+    const { scrollWidth, offsetWidth } = scrollElement;
+    if (scrollWidth <= offsetWidth) {return;}
+    const duration = (scrollElement.scrollLeft / _getAutoScrollSpeed()) * 1000;
+    scrollLeft(0, duration);
+  };
+
+  const autoScrollRight = () => {
+    const scrollElement = getScrollElement();
+    if (!scrollElement) {return;}
+    const { scrollWidth, offsetWidth } = scrollElement;
+    if (scrollWidth <= offsetWidth) {return;}
+    const duration = ((scrollWidth - offsetWidth - scrollElement.scrollLeft) / _getAutoScrollSpeed()) * 1000;
+    scrollLeft(scrollWidth - offsetWidth + 17, duration);
+  };
+
+  const stopAutoScroll = () => {
+    if (!!cancelAnimate) {
+      cancelAnimationFrame(cancelAnimate);
+      cancelAnimate = null;
+      onStop?.();
+    }
+  };
+
+  return {
+    scroll, scrollTop, scrollLeft, autoScrollLeft, autoScrollRight, autoScrollTop, autoScrollBottom, stopAutoScroll, scrollEnd,
+    getScrollElement,
+  };
+}
+
+export type iScrollUtils = ReturnType<typeof createScrollUtils>
+
+export type iScrollUtilsParameter = Parameters<typeof createScrollUtils>[0]

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

@@ -1,5 +1,5 @@
-import {createTableOptionUser} from "../AutoTable/createTableOptionUser";
-
-export default createTableOptionUser;
-
-export {createTableOptionUser};
+import {createTableOptionUser} from "../AutoTable/createTableOptionUser";
+
+export default createTableOptionUser;
+
+export {createTableOptionUser};

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

@@ -1,5 +1,5 @@
-import {createUploadService} from "../$upload/createUploadService";
-
-export default createUploadService;
-
-export {createUploadService};
+import {createUploadService} from "../$upload/createUploadService";
+
+export default createUploadService;
+
+export {createUploadService};

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
-import {nextPopupId} from "../usePopup/utils/popup.utils";
-
-export default nextPopupId;
-
-export {nextPopupId};
+import {nextPopupId} from "../usePopup/utils/popup.utils";
+
+export default nextPopupId;
+
+export {nextPopupId};

package/src/packages/components/useAutoScrollUtils/auto-scroll-utils.scss

@@ -1,48 +1,48 @@
-@include comp(auto-scroll-utils-wrapper) {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 10;
-  pointer-events: none;
-
-  .#{componentName(auto-scroll-utils-shadow)} {
-    position: absolute;
-    opacity: 0.1;
-    pointer-events: auto;
-  }
-
-  &.auto-scroll-utils-wrapper-vertical {
-    .#{componentName(auto-scroll-utils-shadow)} {
-      left: 0;
-      right: 0;
-      height: 20px;
-
-      &.auto-scroll-utils-shadow-start {
-        top: 0;
-        background: linear-gradient(to top, transparent, plv(secondary-9));
-      }
-
-      &.auto-scroll-utils-shadow-end {
-        bottom: 0;
-        background: linear-gradient(to bottom, transparent, plv(secondary-9));
-      }
-    }
-  }
-  &.auto-scroll-utils-wrapper-horizontal {
-    .#{componentName(auto-scroll-utils-shadow)} {
-      top: 0;
-      bottom: 0;
-      width: 20px;
-
-      &.auto-scroll-utils-shadow-start {
-        left: 0;
-        background: linear-gradient(to left, transparent, plv(secondary-9));
-      }
-
-      &.auto-scroll-utils-shadow-end {
-        right: 0;
-        background: linear-gradient(to right, transparent, plv(secondary-9));
-      }
-    }
-  }
-}
+@include comp(auto-scroll-utils-wrapper) {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  pointer-events: none;
+
+  .#{componentName(auto-scroll-utils-shadow)} {
+    position: absolute;
+    opacity: 0.1;
+    pointer-events: auto;
+  }
+
+  &.auto-scroll-utils-wrapper-vertical {
+    .#{componentName(auto-scroll-utils-shadow)} {
+      left: 0;
+      right: 0;
+      height: 20px;
+
+      &.auto-scroll-utils-shadow-start {
+        top: 0;
+        background: linear-gradient(to top, transparent, plv(secondary-9));
+      }
+
+      &.auto-scroll-utils-shadow-end {
+        bottom: 0;
+        background: linear-gradient(to bottom, transparent, plv(secondary-9));
+      }
+    }
+  }
+  &.auto-scroll-utils-wrapper-horizontal {
+    .#{componentName(auto-scroll-utils-shadow)} {
+      top: 0;
+      bottom: 0;
+      width: 20px;
+
+      &.auto-scroll-utils-shadow-start {
+        left: 0;
+        background: linear-gradient(to left, transparent, plv(secondary-9));
+      }
+
+      &.auto-scroll-utils-shadow-end {
+        right: 0;
+        background: linear-gradient(to right, transparent, plv(secondary-9));
+      }
+    }
+  }
+}

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

@@ -1,86 +1,86 @@
-import {addClass} from "plain-utils/dom/addClass";
-import {createScrollUtils, iScrollUtils, iScrollUtilsParameter} from "../createScrollUtils";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {getComponentCls} from "plain-design-composition";
-import {getElementParents} from "plain-utils/dom/getElementParents";
-import './auto-scroll-utils.scss';
-import {isWindows} from "../../utils/getDeviceInfo";
-
-export function useAutoScrollUtils(
-  config: { vertical?: boolean, } & ({ scrollUtils: iScrollUtils } | { scrollUtilsParameter: iScrollUtilsParameter })
-) {
-
-  const { effects: showEffects } = createEffects();
-
-  const scrollUtils = 'scrollUtils' in config ? config.scrollUtils : createScrollUtils(config.scrollUtilsParameter);
-
-  function createIndicator(scrollElement: HTMLElement) {
-
-    const wrapper = document.createElement('div');
-    addClass(wrapper, `${getComponentCls('auto-scroll-utils-wrapper')} auto-scroll-utils-wrapper-${config.vertical ? 'vertical' : 'horizontal'}`);
-
-    const start = document.createElement('div');
-    addClass(start, `${getComponentCls('auto-scroll-utils-shadow')} auto-scroll-utils-shadow-start`);
-    wrapper.appendChild(start);
-
-    const end = document.createElement('div');
-    addClass(end, `${getComponentCls('auto-scroll-utils-shadow')} auto-scroll-utils-shadow-end`);
-    wrapper.appendChild(end);
-
-    document.body.appendChild(wrapper);
-    showEffects.push(() => {document.body.removeChild(wrapper);});
-
-    const refresh = () => {
-      const scrollRect = scrollElement.getBoundingClientRect();
-      const scrollStyle = window.getComputedStyle(scrollElement);
-      if (isWindows()) {
-        if (scrollElement.scrollWidth > scrollElement.offsetWidth || scrollStyle.overflowX === 'scroll') {
-          scrollRect.height -= 17;
-        }
-        if (scrollElement.scrollHeight > scrollElement.offsetWidth || scrollStyle.overflowY === 'scroll') {
-          scrollRect.width -= 17;
-        }
-      }
-      wrapper.style.transform = `translate3d(${scrollRect.left}px,${scrollRect.top}px,0)`;
-      wrapper.style.width = scrollRect.width + 'px';
-      wrapper.style.height = scrollRect.height + 'px';
-    };
-
-    refresh();
-
-    [...getElementParents(scrollElement), window].forEach(parent => {
-      if (!parent) {return;}
-      parent.addEventListener('scroll', refresh);
-      showEffects.push(() => {parent.removeEventListener('scroll', refresh);});
-    });
-
-    return { start, end, wrapper };
-  }
-
-  const show = () => {
-    const scrollElement = scrollUtils.getScrollElement();
-    if (!scrollElement) {return;}
-    const indicator = createIndicator(scrollElement);
-
-    const onEnterStart = () => config.vertical ? scrollUtils.autoScrollTop() : scrollUtils.autoScrollLeft();
-    const onEnterEnd = () => config.vertical ? scrollUtils.autoScrollBottom() : scrollUtils.autoScrollRight();
-    const onLeave = () => scrollUtils.stopAutoScroll();
-
-    indicator.start.addEventListener('mouseenter', onEnterStart);
-    indicator.end.addEventListener('mouseenter', onEnterEnd);
-    indicator.start.addEventListener('mouseleave', onLeave);
-    indicator.end.addEventListener('mouseleave', onLeave);
-
-    showEffects.push(() => {
-      indicator.start.removeEventListener('mouseenter', onEnterStart);
-      indicator.end.removeEventListener('mouseenter', onEnterEnd);
-      indicator.start.removeEventListener('mouseleave', onLeave);
-      indicator.end.removeEventListener('mouseleave', onLeave);
-    });
-  };
-  const hide = () => {
-    showEffects.clear();
-  };
-
-  return { show, hide, scrollUtils };
-}
+import {addClass} from "plain-utils/dom/addClass";
+import {createScrollUtils, iScrollUtils, iScrollUtilsParameter} from "../createScrollUtils";
+import {createEffects} from "plain-utils/utils/createEffects";
+import {getComponentCls} from "plain-design-composition";
+import {getElementParents} from "plain-utils/dom/getElementParents";
+import './auto-scroll-utils.scss';
+import {isWindows} from "../../utils/getDeviceInfo";
+
+export function useAutoScrollUtils(
+  config: { vertical?: boolean, } & ({ scrollUtils: iScrollUtils } | { scrollUtilsParameter: iScrollUtilsParameter })
+) {
+
+  const { effects: showEffects } = createEffects();
+
+  const scrollUtils = 'scrollUtils' in config ? config.scrollUtils : createScrollUtils(config.scrollUtilsParameter);
+
+  function createIndicator(scrollElement: HTMLElement) {
+
+    const wrapper = document.createElement('div');
+    addClass(wrapper, `${getComponentCls('auto-scroll-utils-wrapper')} auto-scroll-utils-wrapper-${config.vertical ? 'vertical' : 'horizontal'}`);
+
+    const start = document.createElement('div');
+    addClass(start, `${getComponentCls('auto-scroll-utils-shadow')} auto-scroll-utils-shadow-start`);
+    wrapper.appendChild(start);
+
+    const end = document.createElement('div');
+    addClass(end, `${getComponentCls('auto-scroll-utils-shadow')} auto-scroll-utils-shadow-end`);
+    wrapper.appendChild(end);
+
+    document.body.appendChild(wrapper);
+    showEffects.push(() => {document.body.removeChild(wrapper);});
+
+    const refresh = () => {
+      const scrollRect = scrollElement.getBoundingClientRect();
+      const scrollStyle = window.getComputedStyle(scrollElement);
+      if (isWindows()) {
+        if (scrollElement.scrollWidth > scrollElement.offsetWidth || scrollStyle.overflowX === 'scroll') {
+          scrollRect.height -= 17;
+        }
+        if (scrollElement.scrollHeight > scrollElement.offsetWidth || scrollStyle.overflowY === 'scroll') {
+          scrollRect.width -= 17;
+        }
+      }
+      wrapper.style.transform = `translate3d(${scrollRect.left}px,${scrollRect.top}px,0)`;
+      wrapper.style.width = scrollRect.width + 'px';
+      wrapper.style.height = scrollRect.height + 'px';
+    };
+
+    refresh();
+
+    [...getElementParents(scrollElement), window].forEach(parent => {
+      if (!parent) {return;}
+      parent.addEventListener('scroll', refresh);
+      showEffects.push(() => {parent.removeEventListener('scroll', refresh);});
+    });
+
+    return { start, end, wrapper };
+  }
+
+  const show = () => {
+    const scrollElement = scrollUtils.getScrollElement();
+    if (!scrollElement) {return;}
+    const indicator = createIndicator(scrollElement);
+
+    const onEnterStart = () => config.vertical ? scrollUtils.autoScrollTop() : scrollUtils.autoScrollLeft();
+    const onEnterEnd = () => config.vertical ? scrollUtils.autoScrollBottom() : scrollUtils.autoScrollRight();
+    const onLeave = () => scrollUtils.stopAutoScroll();
+
+    indicator.start.addEventListener('mouseenter', onEnterStart);
+    indicator.end.addEventListener('mouseenter', onEnterEnd);
+    indicator.start.addEventListener('mouseleave', onLeave);
+    indicator.end.addEventListener('mouseleave', onLeave);
+
+    showEffects.push(() => {
+      indicator.start.removeEventListener('mouseenter', onEnterStart);
+      indicator.end.removeEventListener('mouseenter', onEnterEnd);
+      indicator.start.removeEventListener('mouseleave', onLeave);
+      indicator.end.removeEventListener('mouseleave', onLeave);
+    });
+  };
+  const hide = () => {
+    showEffects.clear();
+  };
+
+  return { show, hide, scrollUtils };
+}