docs: add useSideWheel demo (#16)

* docs: add useSideWheel docs

* chore: change default value of useSideWheel

package.json

@@ -21,7 +21,7 @@
     "type": "git",
     "url": "https://github.com/naver/egjs-conveyer"
   },
-  "author": "NAVER Crop.",
+  "author": "NAVER Corp.",
   "license": "MIT",
   "keywords": [
     "scroll",

packages/conveyer/src/Conveyer.ts

@@ -108,7 +108,7 @@ class Conveyer extends Component<ConveyerEvents> {
     this._options = {
       horizontal: true,
       useDrag: true,
-      useSideWheel: true,
+      useSideWheel: false,
       autoInit: true,
       scrollDebounce: 100,
       ...options,

packages/docs/docs/codes/SideWheel/angularHTML.txt

@@ -0,0 +1,14 @@
+<div class="examples">
+  <div class="items horizontal" [ngxConveyer]="{ useSideWheel: true }">
+    <div class="item">1</div>
+    <div class="item">2</div>
+    <div class="item">3</div>
+    <div class="item">4</div>
+    <div class="item">5</div>
+    <div class="item">6</div>
+    <div class="item">7</div>
+    <div class="item">8</div>
+    <div class="item">9</div>
+    <div class="item">10</div>
+  </div>
+</div>

packages/docs/docs/codes/SideWheel/html.txt

@@ -0,0 +1,14 @@
+<div class="examples">
+  <div class="items horizontal">
+    <div class="item">1</div>
+    <div class="item">2</div>
+    <div class="item">3</div>
+    <div class="item">4</div>
+    <div class="item">5</div>
+    <div class="item">6</div>
+    <div class="item">7</div>
+    <div class="item">8</div>
+    <div class="item">9</div>
+    <div class="item">10</div>
+  </div>
+</div>

packages/docs/docs/codes/SideWheel/js.txt

@@ -0,0 +1,5 @@
+import Conveyer from "@egjs/conveyer";
+
+const conveyer = new Conveyer(".items", {
+  useSideWheel: true,
+});

packages/docs/docs/codes/SideWheel/svelte.txt

@@ -0,0 +1,23 @@
+<script>
+  import { useConveyer } from "@egjs/svelte-conveyer";
+
+  const {
+    ref,
+  } = useConveyer({
+    horizontal: false,
+  });
+</script>
+<div class="examples">
+  <div class="items horizontal" use:ref>
+    <div class="item">1</div>
+    <div class="item">2</div>
+    <div class="item">3</div>
+    <div class="item">4</div>
+    <div class="item">5</div>
+    <div class="item">6</div>
+    <div class="item">7</div>
+    <div class="item">8</div>
+    <div class="item">9</div>
+    <div class="item">10</div>
+  </div>
+</div>

packages/docs/docs/codes/SideWheel/vue.txt

@@ -0,0 +1,31 @@
+<template>
+<div class="examples">
+  <div class="items horizontal" ref="ref">
+    <div class="item">1</div>
+    <div class="item">2</div>
+    <div class="item">3</div>
+    <div class="item">4</div>
+    <div class="item">5</div>
+    <div class="item">6</div>
+    <div class="item">7</div>
+    <div class="item">8</div>
+    <div class="item">9</div>
+    <div class="item">10</div>
+  </div>
+</div>
+</template>
+<script lang="ts">
+import { useConveyer } from "@egjs/vue-conveyer";
+
+export default {
+  setup() {
+    const { ref } = useConveyer({
+      useSideWheel: true,
+    });
+
+    return {
+      ref,
+    };
+  },
+};
+</script>

packages/docs/docs/examples/HorizontalScroll.mdx

@@ -11,7 +11,7 @@ You can use drag-based scrolling with NativeScroll.
 
 |Property|Type|Description|
 |:---:|:---:|---|
-|[horizontal](/docs/api/ConveyerOptions)|string|scroll direction. (default: true)|
+|[horizontal](/docs/api/ConveyerOptions)|boolean|scroll direction. (default: true)|
 
 <HorizontalScroll />
 <ConveyerCodeTabs folder="HorizontalScroll" reactCode={require("!!raw-loader!@site/src/examples/HorizontalScroll.tsx").default} />

packages/docs/docs/examples/SideWheel.mdx

@@ -0,0 +1,21 @@
+---
+title: Using Side Wheel
+custom_edit_url: null
+---
+
+You can move conveyer by using the mouse wheel in a direction aside from the scroll direction.
+
+If the useSideWheel option is set to true, horizontal conveyer can be moved with the vertical mouse wheel and the vertical conveyer can be moved with the horizontal mouse wheel.
+
+|Property|Type|Description|
+|:---:|:---:|---|
+|[useSideWheel](/docs/api/ConveyerOptions)|boolean|Whether to use the mouse wheel in a direction aside from the scroll direction (default: false)|
+
+import ConveyerCodeTabs from "@site/docs/codes/ConveyerCodeTabs";
+import SideWheel from "@site/src/examples/SideWheel";
+
+
+
+
+<SideWheel />
+<ConveyerCodeTabs folder="SideWheel" reactCode={require("!!raw-loader!@site/src/examples/SideWheel.tsx").default} />

packages/docs/docs/examples/VerticalScroll.mdx

@@ -9,7 +9,7 @@ If the horizontal option is set to false, vertical scrolling is possible.
 
 |Property|Type|Description|
 |:---:|:---:|---|
-|[horizontal](/docs/api/ConveyerOptions)|string|scroll direction. (default: true)|
+|[horizontal](/docs/api/ConveyerOptions)|boolean|scroll direction. (default: true)|
 
 import ConveyerCodeTabs from "@site/docs/codes/ConveyerCodeTabs";
 import VerticalScroll from "@site/src/examples/VerticalScroll";

packages/docs/package.json

@@ -35,7 +35,7 @@
     "@egjs/flicking-plugins": "^4.2.1",
     "@egjs/react-conveyer": "~1.3.0",
     "@egjs/react-flicking": "^4.2.1",
-    "@egjs/react-infinitegrid": "^4.2.0-beta.0",
+    "@egjs/react-infinitegrid": "^4.5.0",
     "@mdx-js/react": "^1.6.21",
     "@types/react": "^17.0.45",
     "bulma": "^0.9.2",

packages/docs/sidebars.js

@@ -12,6 +12,7 @@ module.exports = {
     "examples/Properties",
     "examples/Methods",
     "examples/InfiniteScroll",
+    "examples/SideWheel",
   ],
   ...require("./sidebars-api.js")
 };

packages/docs/src/examples/SideWheel.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { useConveyer } from "@egjs/react-conveyer";
+
+export default function SideWheel() {
+  const ref = React.useRef<HTMLDivElement>();
+  useConveyer(ref, {
+    horizontal: true,
+    useSideWheel: true,
+  });
+  return <div className="examples">
+    <div className="items horizontal" ref={ref}>
+      <div className="item">1</div>
+      <div className="item">2</div>
+      <div className="item">3</div>
+      <div className="item">4</div>
+      <div className="item">5</div>
+      <div className="item">6</div>
+      <div className="item">7</div>
+      <div className="item">8</div>
+      <div className="item">9</div>
+      <div className="item">10</div>
+    </div>
+  </div>;
+}