vevet 2.17.0 → 3.0.0-beta.1

package/src/components/SmoothScroll/stories/WithHorizontal.tsx

@@ -0,0 +1,90 @@
+import React, { FC, useEffect, useRef, useState } from 'react';
+import { SmoothScroll } from '..';
+import { times } from '@/utils/common';
+
+export const WithHorizontalComponent: FC = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const [smoothScroll, setSmoothScroll] = useState<SmoothScroll>();
+
+  useEffect(() => {
+    if (!containerRef.current) {
+      return undefined;
+    }
+
+    const instance = new SmoothScroll({
+      container: containerRef.current,
+      elements: '.js-element',
+      direction: 'horizontal',
+      isInverseHandlerDirection: true,
+    });
+
+    setSmoothScroll(instance);
+
+    return () => instance.destroy();
+  }, []);
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => smoothScroll?.changeProps({ isEnabled: true })}
+      >
+        Enable
+      </button>
+
+      <button
+        type="button"
+        onClick={() => smoothScroll?.changeProps({ isEnabled: false })}
+      >
+        Disable
+      </button>
+
+      <br />
+      <br />
+
+      <div
+        ref={containerRef}
+        className="v-smooth-scroll"
+        style={{ height: 500, maxWidth: 500, backgroundColor: '#ccc' }}
+      >
+        <div className="v-smooth-scroll__wrapper">
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'flex-start',
+              width: 'max-content',
+            }}
+          >
+            {times(
+              (index, count) => (
+                <div
+                  key={index}
+                  className="js-element"
+                  data-smooth-scroll-lerp={0.1 - (index / count) * 0.035}
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+
+                    minWidth: 200,
+                    height: 200,
+
+                    background: '#333',
+                    color: '#fff',
+                  }}
+                >
+                  Lorem ipsum
+                </div>
+              ),
+              20
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/SmoothScroll/stories/WithInnerLerp.tsx

@@ -0,0 +1,69 @@
+import React, { FC, useEffect, useRef, useState } from 'react';
+import { SmoothScroll } from '..';
+import { times } from '@/utils/common';
+
+export const WithInnerLerpComponent: FC = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const [smoothScroll, setSmoothScroll] = useState<SmoothScroll>();
+
+  useEffect(() => {
+    if (!containerRef.current) {
+      return undefined;
+    }
+
+    const instance = new SmoothScroll({
+      container: containerRef.current,
+      elements: '.js-element',
+    });
+
+    setSmoothScroll(instance);
+
+    return () => instance.destroy();
+  }, []);
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => smoothScroll?.changeProps({ isEnabled: true })}
+      >
+        Enable
+      </button>
+
+      <button
+        type="button"
+        onClick={() => smoothScroll?.changeProps({ isEnabled: false })}
+      >
+        Disable
+      </button>
+
+      <br />
+      <br />
+
+      <div
+        ref={containerRef}
+        className="v-smooth-scroll"
+        style={{ height: 500, maxWidth: 500, backgroundColor: '#ccc' }}
+      >
+        <div className="v-smooth-scroll__wrapper">
+          {times(
+            (index, count) => (
+              <div
+                key={index}
+                className="js-element"
+                data-smooth-scroll-lerp={0.5 - (index / count) * 0.35}
+              >
+                Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                Pariatur quibusdam fugit at quos. Quod repellendus placeat
+                provident. Iste saepe veniam iure, reiciendis a dolor in commodi
+                dolores placeat mollitia illum?
+              </div>
+            ),
+            40
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,23 @@
+import type { Meta, StoryFn } from '@storybook/react';
+import React from 'react';
+import { DefaultComponent } from './Default';
+import { WithInnerLerpComponent } from './WithInnerLerp';
+import { WithHorizontalComponent } from './WithHorizontal';
+
+const meta: Meta = {
+  title: 'Components/SmoothScroll',
+};
+
+export default meta;
+
+export const Default: StoryFn<typeof DefaultComponent> = (props) => (
+  <DefaultComponent {...props} />
+);
+
+export const WithInnerLerp: StoryFn<typeof WithInnerLerpComponent> = (
+  props
+) => <WithInnerLerpComponent {...props} />;
+
+export const WithHorizontal: StoryFn<typeof WithHorizontalComponent> = (
+  props
+) => <WithHorizontalComponent {...props} />;

package/src/components/SmoothScroll/types.ts

@@ -0,0 +1,114 @@
+import { NComponent } from '@/base/Component/types';
+import { AnimationFrame } from '../AnimationFrame';
+import { TOnResizeTarget } from '@/utils/internal/onResize';
+
+export namespace NSmoothScroll {
+  export interface IStaticProps extends NComponent.IStaticProps {
+    /**
+     * Container selector
+     * @default '#v-smooth-scroll'
+     */
+    container?: string | HTMLElement;
+    /**
+     * Scrollable elements inside the wrapper
+     * @default false
+     */
+    elements?:
+      | false
+      | string
+      | NodeListOf<HTMLElement>
+      | HTMLElement
+      | HTMLElement[];
+    /**
+     * Pass an `AnimationFrame` instance if you want to control scrolling animation outside this class.
+     * @default false
+     */
+    animationFrame?: false | AnimationFrame;
+    /**
+     * Viewport target
+     * @default 'any'
+     */
+    viewportTarget?: TOnResizeTarget;
+    /**
+     * Timeout of resize event
+     * @default 0
+     */
+    resizeDebounce?: number;
+    /**
+     * If need to add will-change to scrollable elements
+     * @default true
+     */
+    hasWillChange?: boolean;
+    /**
+     * Sometimes scrolling may be choppy because of large decimal values in transforms.
+     * In such cases you may want to use this property.
+     * It works on the basis of "toFixed()" method. Only integers
+     * @default 2
+     */
+    translatePrecision?: false | number;
+  }
+
+  export interface IChangeableProps extends NComponent.IChangeableProps {
+    /**
+     * Scrolling is enabled
+     * @default true
+     */
+    isEnabled?: boolean;
+    /**
+     * Use wheel
+     * @default true
+     */
+    hasWheel?: boolean;
+    /**
+     * Main scrolling direction
+     * @default 'vertical'
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * Inverse scrolling values
+     * @default false
+     */
+    isInverseHandlerDirection?: boolean;
+    /**
+     * Automatically stop animation frame when the target and current values are equal
+     * @default true
+     */
+    isAutoStop?: boolean;
+    /**
+     * Stop propagation when scrolling
+     * @default true
+     */
+    hasStopPropagation?: boolean;
+    /**
+     * Linear interpolation (from 0 to 1). Scroll elements may have different lerp values: via `smoothScrollLerp` property or the attribute `data-smooth-scroll-lerp`.
+     * @default 0.1
+     */
+    lerp?: number;
+    /**
+     * 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;
+    /**
+     * @default 0.1
+     */
+    lerpApproximation?: number;
+  }
+
+  export interface ICallbacksTypes extends NComponent.ICallbacksTypes {
+    render: undefined;
+    resize: undefined;
+    wheel: IWheelParameter;
+  }
+
+  export interface IWheelParameter {
+    event: WheelEvent;
+  }
+
+  export interface IElement extends HTMLElement {
+    smoothScrollTop: number;
+    smoothScrollLeft: number;
+    smoothScrollLerp?: number;
+  }
+}

package/src/components/SmoothScrollDragPlugin/index.ts

@@ -0,0 +1,225 @@
+import { Plugin } from '@/base/Plugin';
+import { NSmoothScrollDragPlugin } from './types';
+import type { SmoothScroll as SmoothScrollInstance } from '../SmoothScroll';
+import { DraggerMove, NDraggerMove } from '../DraggerMove';
+import { NCallbacks } from '@/base/Callbacks';
+
+export type { NSmoothScrollDragPlugin };
+
+/**
+ * Add dragger to `SmoothScroll`
+ */
+export class SmoothScrollDragPlugin<
+  StaticProp extends NSmoothScrollDragPlugin.IStaticProps = NSmoothScrollDragPlugin.IStaticProps,
+  ChangeableProp extends NSmoothScrollDragPlugin.IChangeableProps = NSmoothScrollDragPlugin.IChangeableProps,
+  CallbacksTypes extends NSmoothScrollDragPlugin.ICallbacksTypes = NSmoothScrollDragPlugin.ICallbacksTypes
+> extends Plugin<
+  StaticProp,
+  ChangeableProp,
+  CallbacksTypes,
+  SmoothScrollInstance
+> {
+  protected _getDefaultProps() {
+    return {
+      ...super._getDefaultProps(),
+      isEnabled: true,
+      speed: 1,
+      lerp: false,
+      stopPropagationThreshold: false,
+      stopPropagationDirection: 'y',
+    };
+  }
+
+  /** Dragger component */
+  private _dragger?: DraggerMove;
+
+  /** Component callbacks */
+  private _componentCallbacks?: NCallbacks.IAddedCallback[];
+
+  /** If is dragging at the moment */
+  get isDragging() {
+    return this._dragger?.isDragging ?? false;
+  }
+
+  /**
+   * Current lerp of SmoothScroll
+   */
+  private _prevComponentLerp?: number;
+
+  /** Initialize the class */
+  protected _init() {
+    super._init();
+
+    this._toggleDragger();
+  }
+
+  protected _onPropsMutate() {
+    super._onPropsMutate();
+
+    this._toggleDragger();
+  }
+
+  /** Add or remove dragger */
+  private _toggleDragger() {
+    if (this.props.isEnabled) {
+      this._addDragger();
+    } else {
+      this._removeDragger();
+    }
+  }
+
+  /** Add dragger */
+  private _addDragger() {
+    if (this._dragger) {
+      return;
+    }
+
+    const { component } = this;
+
+    this._dragger = new DraggerMove({
+      container: component.container,
+    });
+
+    this._dragger.addCallback('start', () => this._handleDragStart());
+
+    this._dragger.addCallback('move', (data) => this._handleDragMove(data));
+
+    this._dragger.addCallback('end', () => this._handleDragEnd());
+
+    if (!this._componentCallbacks) {
+      this._componentCallbacks = [];
+    }
+
+    this._componentCallbacks.push(
+      component.addCallback('wheel', () => this._dragger?.cancel(), {
+        name: this.name,
+      })
+    );
+  }
+
+  /** Remove dragger */
+  private _removeDragger() {
+    if (!this._dragger) {
+      return;
+    }
+
+    this._dragger.destroy();
+    this._dragger = undefined;
+
+    this._componentCallbacks?.forEach((callback) => callback.remove());
+    this._componentCallbacks = [];
+  }
+
+  /** Check if dragging is available */
+  private _getIsDragAvailable() {
+    const { component } = this;
+
+    if (!component.props.isEnabled) {
+      return false;
+    }
+
+    // check scrollable area
+    if (
+      component.maxScrollableWidth <= 0 &&
+      component.maxScrollableHeight <= 0
+    ) {
+      return false;
+    }
+
+    return true;
+  }
+
+  /** Callback on dragging start */
+  private _handleDragStart() {
+    if (!this._getIsDragAvailable()) {
+      return;
+    }
+
+    const { component } = this;
+
+    // change lerp
+    if (typeof this.props.lerp === 'number') {
+      this._prevComponentLerp = component.props.lerp;
+      component.changeProps({ lerp: this.props.lerp });
+    }
+
+    // launch callbacks
+    this.callbacks.tbt('start', undefined);
+  }
+
+  /** Callback on drag move */
+  private _handleDragMove({
+    event,
+    coords,
+    start,
+    step,
+  }: NDraggerMove.ICallbacksTypes['move']) {
+    if (!this._getIsDragAvailable()) {
+      return;
+    }
+
+    const { component } = this;
+    const { props } = this;
+
+    // get difference between coordinates and decide
+    // if we need to stop propagation
+    const {
+      stopPropagationThreshold: threshold,
+      stopPropagationDirection: direction,
+    } = this.props;
+    if (typeof threshold === 'number' && event.cancelable) {
+      const diffX = Math.abs(coords.x - start.x);
+      const diffY = Math.abs(coords.y - start.y);
+
+      if (
+        (diffX > threshold && direction === 'x') ||
+        (diffY > threshold && direction === 'y')
+      ) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    }
+
+    // get coordinates
+    const x = step.x * props.speed;
+    const y = step.y * props.speed;
+
+    // update scroll values
+    component.targetLeft -= x;
+    component.targetTop -= y;
+
+    // update styles
+    component.wrapper.style.pointerEvents = 'none';
+    component.wrapper.style.userSelect = 'none';
+
+    // launch callbacks
+    this.callbacks.tbt('move', undefined);
+  }
+
+  /**
+   * Callback on dragging end
+   */
+  private _handleDragEnd() {
+    const { component } = this;
+
+    // update styles
+    component.wrapper.style.pointerEvents = '';
+    component.wrapper.style.userSelect = '';
+
+    // restore SmoothScroll Lerp
+    if (typeof this._prevComponentLerp === 'number') {
+      component.changeProps({ lerp: this._prevComponentLerp });
+      this._prevComponentLerp = undefined;
+    }
+
+    // launch callbacks
+    this.callbacks.tbt('end', undefined);
+  }
+
+  /** Destroy the plugin */
+  protected _destroy() {
+    super._destroy();
+
+    this._removeDragger();
+  }
+}

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

@@ -0,0 +1,13 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { Component } from '.';
+
+type TComponent = typeof Component;
+
+const meta: Meta<TComponent> = {
+  title: 'Components/SmoothScrollDragPlugin',
+  component: Component,
+};
+
+export default meta;
+
+export const Default: StoryObj<TComponent> = {};

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

@@ -0,0 +1,76 @@
+import React, { FC, useEffect, useRef, useState } from 'react';
+import { SmoothScrollDragPlugin } from '..';
+import { SmoothScroll } from '@/components/SmoothScroll';
+import { times } from '@/utils/common';
+
+export const Component: FC = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const [smoothScroll, setSmoothScroll] = useState<SmoothScroll>();
+
+  useEffect(() => {
+    if (!containerRef.current) {
+      return undefined;
+    }
+
+    const instance = new SmoothScroll({
+      container: containerRef.current,
+    });
+
+    setSmoothScroll(instance);
+
+    instance.addPlugin(new SmoothScrollDragPlugin());
+
+    return () => instance.destroy();
+  }, []);
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => smoothScroll?.changeProps({ isEnabled: true })}
+      >
+        Enable
+      </button>
+
+      <button
+        type="button"
+        onClick={() => smoothScroll?.changeProps({ isEnabled: false })}
+      >
+        Disable
+      </button>
+
+      <br />
+      <br />
+
+      <div
+        ref={containerRef}
+        className="v-smooth-scroll"
+        style={{ height: 500, maxWidth: 500, backgroundColor: '#ccc' }}
+      >
+        <div className="v-smooth-scroll__wrapper">
+          <button type="button">Test button</button>
+
+          <br />
+          <br />
+
+          <input type="text" placeholder="Test input" />
+
+          {times(
+            (index) => (
+              <div key={index}>
+                Lorem ipsum dolor sit amet
+                <br />
+                <br />
+                <button type="button">Test button</button>
+              </div>
+            ),
+            40
+          )}
+
+          <button type="button">Test button</button>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/SmoothScrollDragPlugin/types.ts

@@ -0,0 +1,40 @@
+import { NPlugin } from '@/base/Plugin/types';
+
+export namespace NSmoothScrollDragPlugin {
+  export interface IStaticProps extends NPlugin.IStaticProps {}
+
+  export interface IChangeableProps extends NPlugin.IChangeableProps {
+    /**
+     * Enable dragger
+     * @default true
+     */
+    isEnabled?: boolean;
+    /**
+     * Dragger speed
+     * @default 1
+     */
+    speed?: number;
+    /**
+     * Linear interpolation for `SmoothScroll` (from 0 to 1);
+     * If false, the value of `SmoothScroll.props.lerp` will be used.
+     * @default false
+     */
+    lerp?: number | false;
+    /**
+     * Stop propagation
+     * @default false
+     */
+    stopPropagationThreshold?: false | number;
+    /**
+     * Stop propagation direction
+     * @default 'y'
+     */
+    stopPropagationDirection?: 'x' | 'y';
+  }
+
+  export interface ICallbacksTypes extends NPlugin.ICallbacksTypes {
+    start: undefined;
+    move: undefined;
+    end: undefined;
+  }
+}