vevet 3.2.2 → 3.3.0

package/src/components/Marquee/stories/index.tsx

@@ -0,0 +1,69 @@
+import React, { FC, useEffect, useRef, useState } from 'react';
+import { Marquee, NMarquee } from '..';
+
+interface IProps extends NMarquee.IChangeableProps {}
+
+export const Component: FC<IProps> = ({
+  speed,
+  isEnabled,
+  pauseOnHover,
+  prependWhitespace,
+  isFpsNormalized,
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  const [width, setWidth] = useState(400);
+  const [marquee, setMarquee] = useState<Marquee | undefined>();
+
+  useEffect(() => {
+    if (!ref.current) {
+      return undefined;
+    }
+
+    const instance = new Marquee({
+      container: ref.current,
+      speed,
+      isEnabled,
+      pauseOnHover,
+      prependWhitespace,
+      isFpsNormalized,
+    });
+
+    setMarquee(instance);
+
+    return () => instance.destroy();
+  }, [isEnabled, isFpsNormalized, pauseOnHover, prependWhitespace, speed]);
+
+  return (
+    <>
+      <button type="button" onClick={() => setWidth((val) => val + 20)}>
+        Rezize
+      </button>
+
+      <button
+        type="button"
+        onClick={() => marquee?.changeProps({ isEnabled: true })}
+      >
+        Play
+      </button>
+
+      <button
+        type="button"
+        onClick={() => marquee?.changeProps({ isEnabled: false })}
+      >
+        Pause
+      </button>
+
+      <button type="button" onClick={() => marquee?.render()}>
+        Manual render
+      </button>
+
+      <br />
+      <br />
+
+      <div style={{ background: '#ccc', width }}>
+        <span ref={ref}>Marquee</span>
+      </div>
+    </>
+  );
+};

package/src/components/Marquee/types.ts

@@ -0,0 +1,55 @@
+import { NComponent } from '@/base/Component/types';
+import { TOnResizeTarget } from '@/utils/listeners/onResize';
+
+export namespace NMarquee {
+  export interface IStaticProps extends NComponent.IStaticProps {
+    /**
+     * Marquee container. You may use a CSS selector or the element itself.
+     * @default '#v-marquee'
+     */
+    container?: string | HTMLElement;
+    /**
+     * Viewport target
+     * @default 'width'
+     */
+    viewportTarget?: TOnResizeTarget;
+    /**
+     * Timeout of resize event
+     * @default 0
+     */
+    resizeDebounce?: number;
+  }
+
+  export interface IChangeableProps extends NComponent.IChangeableProps {
+    /**
+     * Marquee speed
+     * @default 1
+     */
+    speed?: number;
+    /**
+     * Enable animation
+     * @default true
+     */
+    isEnabled?: boolean;
+    /**
+     * Pause on hover
+     * @default false
+     */
+    pauseOnHover?: boolean;
+    /**
+     * Prepend a whitespace
+     * @default true
+     */
+    prependWhitespace?: boolean;
+    /**
+     * On different screens with different FPS, animation may be slower or faster.
+     * This property is to normalize animation speed across different screens.
+     * @default true
+     */
+    isFpsNormalized?: boolean;
+  }
+
+  export interface ICallbacksTypes extends NComponent.ICallbacksTypes {
+    render: undefined;
+  }
+}

package/src/components/ScrollBar/Bar/index.ts

@@ -262,6 +262,9 @@ export default class Bar {
 
     const { minSize, shouldAutoSize } = this.props;
 
+    // define if empty before other calculations
+    outer.classList.toggle(this.className('_is-empty'), scrollLine === 0);
+
     // get outer sizes
     this._outerHeight = outer.clientHeight;
     this._outerWidth = outer.clientWidth;
@@ -287,9 +290,6 @@ export default class Bar {
     this._thumbHeight = thumb.clientHeight;
     this._thumbWidth = thumb.clientWidth;
 
-    // define if empty
-    outer.classList.toggle(this.className('_is-empty'), scrollLine === 0);
-
     // render elements
     this._renderThumb();
   }

package/src/components/index.ts

@@ -5,6 +5,7 @@ export * from './Ctx2DPrerender';
 export * from './CustomCursor';
 export * from './DraggerDirection';
 export * from './DraggerMove';
+export * from './Marquee';
 export * from './Preloader';
 export * from './ProgressPreloader';
 export * from './ScrollBar';

package/src/utils/listeners/onResize.ts

@@ -107,7 +107,7 @@ export function onResize({
 
       debounceResize(
         { trigger: 'ResizeObserver' },
-        window.vevetApp.props.resizeDebounce
+        window.vevetApp.props.resizeDebounce + resizeDebounce
       );
     });
 

package/src/version.ts

@@ -1,2 +1,2 @@
-const version = '3.2.2';
+const version = '3.3.0';
 export default version;