@egjs/react-flicking 4.15.0 → 4.16.0-beta.1

package/dev/archive/features/Snap.tsx

@@ -0,0 +1,95 @@
+import Flicking from "@dev/react-flicking";
+import * as React from "react";
+import { insertCode } from "../utils";
+import "../css/align.css";
+
+export default class Snap extends React.Component<{}> {
+  public render() {
+    return (
+      <div id="snap" className="container">
+        <h1>Snap</h1>
+        <ul className="extra">
+          <li>You can decide how many panels can be passed on a single snap.</li>
+        </ul>
+        <h2>Default (count: 1)</h2>
+        <Flicking className="flicking flicking0" gap={10} circular={true} moveType={["snap", { count: 1 }]}>
+          <div className="panel panel0"></div>
+          <div className="panel panel1"></div>
+          <div className="panel panel2"></div>
+          <div className="panel panel3"></div>
+          <div className="panel panel4"></div>
+        </Flicking>
+        <div className="pagination pagination0"></div>
+        <pre>
+          <code className="hljs html" data-script="flicking0"></code>
+        </pre>
+        <h2>count: 3</h2>
+        <Flicking className="flicking flicking1" gap={10} circular={true} moveType={["snap", { count: 3 }]}>
+          <div className="panel panel0"></div>
+          <div className="panel panel1"></div>
+          <div className="panel panel2"></div>
+          <div className="panel panel3"></div>
+          <div className="panel panel4"></div>
+        </Flicking>
+        <div className="pagination pagination1"></div>
+        <pre>
+          <code className="hljs html" data-script="flicking1"></code>
+        </pre>
+        <h2>count: Infinity</h2>
+        <Flicking className="flicking flicking2" gap={10} circular={true} moveType={["snap", { count: Infinity }]}>
+          <div className="panel panel0"></div>
+          <div className="panel panel1"></div>
+          <div className="panel panel2"></div>
+          <div className="panel panel3"></div>
+          <div className="panel panel4"></div>
+        </Flicking>
+        <div className="pagination pagination2"></div>
+        <pre>
+          <code className="hljs html" data-script="flicking2"></code>
+        </pre>
+      </div>
+    );
+  }
+  public componentDidMount() {
+    insertCode(
+      "snap",
+      0,
+      `
+  <Flicking className="flicking flicking0" gap={10} circular={true}>
+    <div className="panel"></div>
+    <div className="panel"></div>
+    <div className="panel"></div>
+    <div className="panel"></div>
+    <div className="panel"></div>
+  </Flicking>`
+    );
+    insertCode(
+      "snap",
+      1,
+      `
+  <Flicking
+    className="flicking flicking1" gap={10} circular={true}
+    moveType={{ type: "snap", count: 3 }}>
+    <div className="panel"></div>
+    <div className="panel"></div>
+    <div className="panel"></div>
+    <div className="panel"></div>
+    <div className="panel"></div>
+  </Flicking>`
+    );
+    insertCode(
+      "snap",
+      2,
+      `
+  <Flicking
+    className="flicking flicking2" gap={10} circular={true}
+    moveType={{ type: "snap", count: Infinity }}>
+    <div className="panel"></div>
+    <div className="panel"></div>
+    <div className="panel"></div>
+    <div className="panel"></div>
+    <div className="panel"></div>
+  </Flicking>`
+    );
+  }
+}

package/dev/archive/features/VariableSize.tsx

@@ -0,0 +1,42 @@
+import Flicking from "@dev/react-flicking";
+import * as React from "react";
+import { insertCode } from "../utils";
+import "../css/variable-size.css";
+
+export default class VariableSize extends React.Component<{}> {
+  public render() {
+    return (
+      <div id="variable-size" className="container">
+        <h1>Multiple Panel &amp; Variable Size</h1>
+        <ul className="extra">
+          <li>You can place multiple panels in the flicking area.</li>
+          <li>You can specify various sizes for each panel.</li>
+        </ul>
+        <Flicking className="flicking flicking0" circular={true} gap={10}>
+          <div className="panel panel0"></div>
+          <div className="panel panel1"></div>
+          <div className="panel panel2"></div>
+          <div className="panel panel3"></div>
+          <div className="panel panel4"></div>
+        </Flicking>
+        <pre>
+          <code className="hljs html" data-script="flicking0"></code>
+        </pre>
+      </div>
+    );
+  }
+  public componentDidMount() {
+    insertCode(
+      "variable-size",
+      0,
+      `
+  <Flicking className="flicking flicking0" circular={true} gap={10}>
+    <div className="panel"></div>
+    <div className="panel"></div>
+    <div className="panel"></div>
+    <div className="panel"></div>
+    <div className="panel"></div>
+  </Flicking>`
+    );
+  }
+}

package/dev/archive/features/Virtual.tsx

@@ -0,0 +1,45 @@
+import Flicking from "@dev/react-flicking";
+import * as React from "react";
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default () => {
+  const [num, setNum] = React.useState(1);
+  const flicking = React.useRef<Flicking>();
+  const virtual = React.useMemo(
+    () => ({
+      cache: true,
+      panelClass: "panel",
+      renderPanel: panel => `<span>Panel ${panel.index}</span>`,
+      initialPanelCount: 100
+    }),
+    []
+  );
+
+  return (
+    <div className="container">
+      <h1>virtual</h1>
+      <button onClick={() => setNum(num + 1)}>{num}</button>
+      <Flicking
+        ref={flicking as any}
+        className="flicking flicking0"
+        panelsPerView={5}
+        circular={true}
+        virtual={virtual}
+      />
+      <button
+        onClick={() => {
+          flicking.current?.virtual.prepend(100);
+        }}
+      >
+        PREPEND
+      </button>
+      <button
+        onClick={() => {
+          flicking.current?.virtual.append(100);
+        }}
+      >
+        APPEND
+      </button>
+    </div>
+  );
+};

package/dev/archive/plugins/Arrow.tsx

@@ -0,0 +1,25 @@
+import { Arrow } from "@dev/plugins";
+import Flicking, { ViewportSlot } from "@dev/react-flicking";
+import * as React from "react";
+import "../css/plugins.css";
+
+export default class ArrowDemo extends React.Component<{}> {
+  private plugins = [new Arrow()];
+  public render() {
+    return (
+      <div id="arrow" className="container">
+        <Flicking className="flicking" circular={true} gap={10} duration={500} plugins={this.plugins}>
+          <div className="panel panel0"></div>
+          <div className="panel panel1"></div>
+          <div className="panel panel2"></div>
+          <div className="panel panel3"></div>
+          <div className="panel panel4"></div>
+          <ViewportSlot>
+            <span slot="viewport" className="flicking-arrow-prev"></span>
+            <span slot="viewport" className="flicking-arrow-next"></span>
+          </ViewportSlot>
+        </Flicking>
+      </div>
+    );
+  }
+}

package/dev/archive/plugins/AutoPlay.tsx

@@ -0,0 +1,70 @@
+import { AutoPlay, Fade } from "@dev/plugins";
+import Flicking from "@dev/react-flicking";
+import * as React from "react";
+import { insertCode } from "../utils";
+import "../css/plugins.css";
+
+export default class AutoPlayDemo extends React.Component<{}> {
+  private plugins = [new Fade(), new AutoPlay({ duration: 2000, direction: "NEXT" })];
+  public render() {
+    return (
+      <div id="autoplay" className="plugins container">
+        <h1>
+          AutoPlay
+          <a
+            href="https://naver.github.io/egjs-flicking-plugins/release/latest/doc/eg.Flicking.plugins.AutoPlay.html"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            API
+          </a>
+        </h1>
+        <ul className="extra">
+          <li>You can set flicking to move to the next/previous panel periodically.</li>
+        </ul>
+        <Flicking className="flicking" circular={true} gap={10} duration={500} plugins={this.plugins}>
+          <div className="panel">
+            <img alt="img" src="https://naver.github.io/egjs-flicking/images/bg01.jpg" />
+          </div>
+          <div className="panel">
+            <img alt="img" src="https://naver.github.io/egjs-flicking/images/bg02.jpg" />
+          </div>
+          <div className="panel">
+            <img alt="img" src="https://naver.github.io/egjs-flicking/images/bg03.jpg" />
+          </div>
+        </Flicking>
+        <div className="pagination"></div>
+        <pre>
+          <code className="hljs html" data-script="flicking0"></code>
+        </pre>
+      </div>
+    );
+  }
+  public componentDidMount() {
+    insertCode(
+      "autoplay",
+      0,
+      `
+import { Fade, AutoPlay } from "@egjs/flicking-plugins";
+this.plugins = [new Fade(), new AutoPlay(2000, "NEXT")];
+
+<Flicking
+  className="flicking"
+  circular={true}
+  gap={10}
+  duration={500}
+  plugins={this.plugins}
+>
+  <div className="panel">
+    <img src="https://naver.github.io/egjs-flicking/images/bg01.jpg" />
+  </div>
+  <div className="panel">
+    <img src="https://naver.github.io/egjs-flicking/images/bg02.jpg" />
+  </div>
+  <div className="panel">
+    <img src="https://naver.github.io/egjs-flicking/images/bg03.jpg" />
+  </div>
+</Flicking>`
+    );
+  }
+}

package/dev/archive/plugins/Fade.tsx

@@ -0,0 +1,69 @@
+import { Fade } from "@dev/plugins";
+import Flicking from "@dev/react-flicking";
+import * as React from "react";
+import { insertCode } from "../utils";
+import "../css/plugins.css";
+
+export default class FadeDemo extends React.Component<{}> {
+  private plugins = [new Fade()];
+  public render() {
+    return (
+      <div id="fade" className="plugins container">
+        <h1>
+          Fade
+          <a
+            href="https://naver.github.io/egjs-flicking-plugins/release/latest/doc/eg.Flicking.plugins.Fade.html"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            API
+          </a>
+        </h1>
+        <ul className="extra">
+          <li>You can give fade in / out effect while moving panels. </li>
+        </ul>
+        <Flicking className="flicking" circular={true} gap={10} plugins={this.plugins}>
+          <div className="panel">
+            <img alt="img" src="https://naver.github.io/egjs-flicking/images/bg01.jpg" />
+          </div>
+          <div className="panel">
+            <img alt="img" src="https://naver.github.io/egjs-flicking/images/bg02.jpg" />
+          </div>
+          <div className="panel">
+            <img alt="img" src="https://naver.github.io/egjs-flicking/images/bg03.jpg" />
+          </div>
+        </Flicking>
+        <div className="pagination"></div>
+        <pre>
+          <code className="hljs html" data-script="flicking0"></code>
+        </pre>
+      </div>
+    );
+  }
+  public componentDidMount() {
+    insertCode(
+      "fade",
+      0,
+      `
+import { Fade } from "@egjs/flicking-plugins";
+this.plugins = [new Fade()];
+
+<Flicking
+  className="flicking"
+  gap={10}
+  circular={true}
+  plugins={this.plugins}
+>
+  <div className="panel">
+    <img src="https://naver.github.io/egjs-flicking/images/bg01.jpg" />
+  </div>
+  <div className="panel">
+    <img src="https://naver.github.io/egjs-flicking/images/bg02.jpg" />
+  </div>
+  <div className="panel">
+    <img src="https://naver.github.io/egjs-flicking/images/bg03.jpg" />
+  </div>
+</Flicking>`
+    );
+  }
+}

package/dev/archive/plugins/Parallax.tsx

@@ -0,0 +1,70 @@
+import { Parallax } from "@dev/plugins";
+import Flicking from "@dev/react-flicking";
+import * as React from "react";
+import { insertCode } from "../utils";
+import "../css/plugins.css";
+import "../css/parallax.css";
+
+export default class ParallaxDemo extends React.Component<{}> {
+  private plugins = [new Parallax("img", 4)];
+  public render() {
+    return (
+      <div id="parallax" className="plugins container">
+        <h1>
+          Parallax{" "}
+          <a
+            href="https://naver.github.io/egjs-flicking-plugins/release/latest/doc/eg.Flicking.plugins.Parallax.html"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            API
+          </a>
+        </h1>
+        <ul className="extra">
+          <li>Parallax effect will be applied to each panel while moving.</li>
+        </ul>
+        <Flicking className="flicking" gap={10} circular={true} plugins={this.plugins}>
+          <div className="panel">
+            <img alt="img" src="https://naver.github.io/egjs-flicking/images/bg01.jpg" />
+          </div>
+          <div className="panel">
+            <img alt="img" src="https://naver.github.io/egjs-flicking/images/bg02.jpg" />
+          </div>
+          <div className="panel">
+            <img alt="img" src="https://naver.github.io/egjs-flicking/images/bg03.jpg" />
+          </div>
+        </Flicking>
+        <div className="pagination"></div>
+        <pre>
+          <code className="hljs html" data-script="flicking0"></code>
+        </pre>
+      </div>
+    );
+  }
+  public componentDidMount() {
+    insertCode(
+      "parallax",
+      0,
+      `
+import { Parallax } from "@egjs/flicking-plugins";
+this.plugins = [new Parallax("img", 4)];
+
+<Flicking
+  className="flicking"
+  gap={10}
+  circular={true}
+  plugins={this.plugins}
+>
+  <div className="panel">
+    <img src="https://naver.github.io/egjs-flicking/images/bg01.jpg" />
+  </div>
+  <div className="panel">
+    <img src="https://naver.github.io/egjs-flicking/images/bg02.jpg" />
+  </div>
+  <div className="panel">
+    <img src="https://naver.github.io/egjs-flicking/images/bg03.jpg" />
+  </div>
+</Flicking>`
+    );
+  }
+}

package/dev/archive/utils.ts

@@ -0,0 +1,3 @@
+export function insertCode(id: string, index: string | number, code: string) {
+  document.querySelector<HTMLElement>(`#${id} [data-script=flicking${index}]`)!.innerText = code.trim();
+}

package/dev/basic-sample/App.tsx

@@ -0,0 +1,36 @@
+import Flicking from "@dev/react-flicking";
+
+const css: Record<string, React.CSSProperties> = {
+  container: {
+    maxWidth: 800,
+    margin: "0 auto",
+    padding: 20
+  },
+  panel: {
+    minWidth: 200,
+    height: 200,
+    margin: "0 5px",
+    background: "#e0e7ff",
+    borderRadius: 8,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: 24,
+    fontWeight: "bold"
+  }
+};
+
+export default function App() {
+  return (
+    <div style={css.container}>
+      <h1>Basic Sample</h1>
+      <Flicking align="prev" circular={true}>
+        <div style={css.panel}>1</div>
+        <div style={css.panel}>2</div>
+        <div style={css.panel}>3</div>
+        <div style={css.panel}>4</div>
+        <div style={css.panel}>5</div>
+      </Flicking>
+    </div>
+  );
+}

package/dev/basic-sample/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Basic Sample - React Flicking</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

package/dev/basic-sample/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "@dev/flicking-css";
+import App from "./App";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

package/dev/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>React Flicking - Dev</title>
+    <style>
+      body { margin: 0; padding: 40px; font-family: sans-serif; }
+      a { display: block; margin: 8px 0; font-size: 18px; }
+    </style>
+  </head>
+  <body>
+    <h1>React Flicking Dev</h1>
+    <a href="/basic-sample/">Basic Sample</a>
+    <a href="/plugin-check/">Plugin Check (마이그레이션 검증용)</a>
+    <a href="/scratch/">Scratch (이슈 재현)</a>
+  </body>
+</html>