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

package/dev/archive/App.css

@@ -0,0 +1,32 @@
+.flicking-viewport {
+  width: 500px;
+  height: 200px;
+  margin: 0px auto;
+  border-radius: 5px;
+}
+.panel {
+  position: relative;
+  width: 400px;
+  height: 200px;
+  background: #f55;
+  border-radius: 5px;
+  overflow: hidden;
+}
+.panel:after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.1);
+}
+.panel img {
+  top: -100%;
+  bottom: -100%;
+  min-width: 100%;
+  margin: auto;
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%);
+}

package/dev/archive/App.tsx

@@ -0,0 +1,52 @@
+import { Component } from "react";
+import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
+import "./css/common.css";
+import "./css/features.css";
+import "./css/highlight.css";
+import "@dev/flicking-css";
+import "@dev/plugins-css";
+import hljs from "highlight.js";
+import Align from "./features/Align";
+import Bound from "./features/Bound";
+import CrossFlicking from "./features/CrossFlicking";
+import FreeScroll from "./features/FreeScroll";
+import InfiniteFlicking from "./features/InfiniteFlicking";
+import Progress from "./features/Progress";
+import PropChange from "./features/PropChange";
+import Snap from "./features/Snap";
+import VariableSize from "./features/VariableSize";
+import Virtual from "./features/Virtual";
+import Header from "./Header";
+import Arrow from "./plugins/Arrow";
+import AutoPlay from "./plugins/AutoPlay";
+import Fade from "./plugins/Fade";
+import Parallax from "./plugins/Parallax";
+
+export default class App extends Component<{}> {
+  public render() {
+    return (
+      <Router>
+        <Header />
+        <Routes>
+          <Route path="/infinite" element={<InfiniteFlicking />} />
+          <Route path="/free-scroll" element={<FreeScroll />} />
+          <Route path="/variable-size" element={<VariableSize />} />
+          <Route path="/align" element={<Align />} />
+          <Route path="/snap" element={<Snap />} />
+          <Route path="/progress" element={<Progress />} />
+          <Route path="/bound" element={<Bound />} />
+          <Route path="/virtual" element={<Virtual />} />
+          <Route path="/parallax" element={<Parallax />} />
+          <Route path="/fade" element={<Fade />} />
+          <Route path="/autoplay" element={<AutoPlay />} />
+          <Route path="/arrow" element={<Arrow />} />
+          <Route path="/prop" element={<PropChange />} />
+          <Route path="/cross" element={<CrossFlicking />} />
+        </Routes>
+      </Router>
+    );
+  }
+  public componentDidMount() {
+    hljs.initHighlighting();
+  }
+}

package/dev/archive/DebugPage.css

@@ -0,0 +1,21 @@
+.flicking-viewport {
+  background-color: aliceblue;
+}
+
+.item-list {
+  width: 100%;
+}
+
+.item {
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 5px;
+  background-color: skyblue;
+}
+
+.dummy-container {
+  background-color: green;
+  height: 500px;
+}

package/dev/archive/DebugPage.tsx

@@ -0,0 +1,93 @@
+import Flicking from "@dev/react-flicking";
+
+import "@dev/flicking-css";
+import "./DebugPage.css";
+import { useRef } from "react";
+
+// 이후에 AI에게 데모 페이지 구성의 퓨샷 예시로 제공하기.
+// (이슈 환경 페이지의 이미지도 같이 제공하기)
+// (위 이슈 페이지의 데모 환경 페이지를 극도로 단순화시킨 페이지라고 알려주고 데모 환경은 이런식으로 단순화시켜 표현하라고 지침)
+// - 특징
+//   - 바닐라 플리킹 css는 직접 임포트
+//   - 리액트 플리킹 컴포넌트는 로컬에서 임포트
+//   - 최대한 단순화한 페이지 레이아웃
+const DebugPage: React.FC = () => {
+  const flickingRef = useRef<Flicking>(null);
+  const onClickPrev = () => {
+    flickingRef.current?.prev();
+  };
+  const onClickNext = () => {
+    flickingRef.current?.next();
+  };
+
+  return (
+    <div className="debug-page">
+      <h2>Basic Flicking Demo</h2>
+      <Flicking
+        ref={flickingRef}
+        className="flicking"
+        circular={false}
+        moveType="strict"
+        renderOnlyVisible={true}
+        autoResize={true}
+        bounce={[10, 10]}
+        duration={100}
+        optimizeSizeUpdate={true}
+      >
+        <div className="item-list">
+          <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>
+        <div className="item-list">
+          <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 className="item-list">
+          <div className="item">11</div>
+          <div className="item">12</div>
+          <div className="item">13</div>
+          <div className="item">14</div>
+          <div className="item">15</div>
+        </div>
+        <div className="item-list">
+          <div className="item">16</div>
+          <div className="item">17</div>
+          <div className="item">18</div>
+          <div className="item">19</div>
+          <div className="item">20</div>
+        </div>
+        <div className="item-list">
+          <div className="item">21</div>
+          <div className="item">22</div>
+          <div className="item">23</div>
+          <div className="item">24</div>
+          <div className="item">25</div>
+        </div>
+        <div className="item-list">
+          <div className="item">26</div>
+          <div className="item">27</div>
+          <div className="item">28</div>
+          <div className="item">29</div>
+          <div className="item">30</div>
+        </div>
+        <div className="item-list">
+          <div className="item">31</div>
+          <div className="item">32</div>
+        </div>
+      </Flicking>
+      <div style={{ display: "flex", justifyContent: "center" }}>
+        <button onClick={onClickPrev}>Prev</button>
+        <button onClick={onClickNext}>Next</button>
+      </div>
+      <div className="dummy-container"></div>
+    </div>
+  );
+};
+
+export default DebugPage;

package/dev/archive/Header.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+import { Link } from "react-router-dom";
+export default class Header extends React.Component {
+  public render() {
+    return (
+      <ul className="header">
+        <li>
+          <Link to="/infinite">Infinite Flicking</Link>
+        </li>
+        <li>
+          <Link to="/free-scroll">Free Scroll</Link>
+        </li>
+        <li>
+          <Link to="/variable-size">Variable Size</Link>
+        </li>
+        <li>
+          <Link to="/align">Align</Link>
+        </li>
+        <li>
+          <Link to="/snap">Snap</Link>
+        </li>
+        <li>
+          <Link to="/progress">Progress</Link>
+        </li>
+        <li>
+          <Link to="/bound">Bound</Link>
+        </li>
+        <li>
+          <Link to="/virtual">Virtual</Link>
+        </li>
+        <li>
+          <Link to="/parallax">Parallax</Link>
+        </li>
+        <li>
+          <Link to="/fade">Fade</Link>
+        </li>
+        <li>
+          <Link to="/autoplay">AutoPlay</Link>
+        </li>
+        <li>
+          <Link to="/arrow">Arrow</Link>
+        </li>
+        <li>
+          <Link to="/prop">Prop Change</Link>
+        </li>
+        <li>
+          <Link to="/cross">Cross Flicking</Link>
+        </li>
+      </ul>
+    );
+  }
+}

package/dev/archive/StatePage.css

@@ -0,0 +1,21 @@
+.flicking-viewport {
+  background-color: aliceblue;
+}
+
+.item-list {
+  width: 100%;
+}
+
+.item {
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 5px;
+  background-color: skyblue;
+}
+
+.dummy-container {
+  background-color: green;
+  height: 500px;
+}

package/dev/archive/StatePage.tsx

@@ -0,0 +1,107 @@
+import Flicking, { useFlickingReactiveAPI } from "@dev/react-flicking";
+import Button from "@mui/material/Button";
+import Pagination from "@mui/material/Pagination";
+import Stack from "@mui/material/Stack";
+import { useRef } from "react";
+
+import "@dev/flicking-css";
+import "./StatePage.css";
+import LinearProgress from "@mui/material/LinearProgress";
+
+const DebugPage: React.FC = () => {
+  const flickingRef = useRef<Flicking>(null);
+
+  const { isReachStart, isReachEnd, progress, currentPanelIndex, totalPanelCount, moveTo } =
+    useFlickingReactiveAPI(flickingRef);
+
+  const onClickPrev = () => {
+    flickingRef.current?.prev();
+  };
+  const onClickNext = () => {
+    flickingRef.current?.next();
+  };
+
+  return (
+    <div className="debug-page">
+      <h2>Basic Flicking Demo</h2>
+      <Flicking
+        ref={flickingRef}
+        className="flicking"
+        moveType="strict"
+        renderOnlyVisible={true}
+        autoResize={true}
+        bounce={[10, 10]}
+        duration={100}
+        optimizeSizeUpdate={true}
+      >
+        <div className="item-list">
+          <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>
+        <div className="item-list">
+          <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 className="item-list">
+          <div className="item">11</div>
+          <div className="item">12</div>
+          <div className="item">13</div>
+          <div className="item">14</div>
+          <div className="item">15</div>
+        </div>
+        <div className="item-list">
+          <div className="item">16</div>
+          <div className="item">17</div>
+          <div className="item">18</div>
+          <div className="item">19</div>
+          <div className="item">20</div>
+        </div>
+        <div className="item-list">
+          <div className="item">21</div>
+          <div className="item">22</div>
+          <div className="item">23</div>
+          <div className="item">24</div>
+          <div className="item">25</div>
+        </div>
+        <div className="item-list">
+          <div className="item">26</div>
+          <div className="item">27</div>
+          <div className="item">28</div>
+          <div className="item">29</div>
+          <div className="item">30</div>
+        </div>
+        <div className="item-list">
+          <div className="item">31</div>
+          <div className="item">32</div>
+        </div>
+      </Flicking>
+      <div style={{ display: "flex", justifyContent: "center" }}>
+        <Button variant="contained" onClick={onClickPrev} disabled={isReachStart}>
+          Prev
+        </Button>
+        <Button variant="contained" onClick={onClickNext} disabled={isReachEnd}>
+          Next
+        </Button>
+      </div>
+      <Stack>
+        <Pagination
+          count={totalPanelCount}
+          page={currentPanelIndex + 1}
+          onChange={(e, v) => {
+            moveTo(v - 1);
+          }}
+        />
+        <LinearProgress variant="determinate" value={progress} />
+        {/* <LinearProgress variant="determinate" value={scrollProgress}/> */}
+      </Stack>
+    </div>
+  );
+};
+
+export default DebugPage;

package/dev/archive/css/align.css

@@ -0,0 +1,79 @@
+#align .hanger {
+  position: relative;
+  max-width: 500px;
+  width: 100%;
+  margin: 10px auto;
+  height: 20px;
+  z-index: 2002;
+  top: 10px;
+}
+#align .hanger:after {
+  position: absolute;
+  content: "hanger: 50%";
+  font-weight: bold;
+  left: 50%;
+  transform: translate(-50%);
+}
+#align .hanger:before {
+  position: absolute;
+  content: "";
+  font-weight: bold;
+  top: 100%;
+  left: 50%;
+  background: #333;
+  width: 2px;
+  height: 25px;
+}
+
+#align .anchor {
+  position: absolute;
+  font-weight: bold;
+  bottom: 5px;
+  left: 50%;
+  background: #333;
+  width: 2px;
+  height: 25px;
+  z-index: 10;
+}
+#align .anchor:after {
+  position: absolute;
+  content: "anchor: 50%";
+  font-weight: bold;
+  left: -40px;
+  white-space: nowrap;
+  bottom: 100%;
+}
+
+#align .hanger1:after {
+  content: "hanger: 0";
+  left: 0;
+}
+#align .hanger1:before {
+  left: 0;
+}
+#align .flicking1 .anchor {
+  left: 0;
+}
+#align .flicking1 .anchor:after {
+  content: "anchor: 0";
+  left: 0;
+}
+
+#align .hanger2:after {
+  content: "hanger: 30%";
+  left: 30%;
+}
+#align .hanger2:before {
+  left: 30%;
+}
+#align .flicking2 .anchor {
+  left: 50px;
+}
+#align .flicking2 .anchor:after {
+  content: "anchor: 50px";
+  left: -20px;
+}
+#align .extra li:first-child {
+  margin-left: -20px;
+  list-style: none;
+}

package/dev/archive/css/bound.css

@@ -0,0 +1,88 @@
+#bound .hanger {
+  position: relative;
+  max-width: 500px;
+  width: 100%;
+  margin: 10px auto;
+  height: 20px;
+  z-index: 2002;
+  top: 10px;
+}
+#bound .hanger {
+  position: relative;
+  max-width: 500px;
+  width: 100%;
+  margin: 10px auto;
+  height: 20px;
+  z-index: 2002;
+  top: 10px;
+}
+#bound .hanger:after {
+  position: absolute;
+  content: "hanger: 50%";
+  font-weight: bold;
+  left: 50%;
+  transform: translate(-50%);
+}
+#bound .hanger:before {
+  position: absolute;
+  content: "";
+  font-weight: bold;
+  top: 100%;
+  left: 50%;
+  background: #333;
+  width: 2px;
+  height: 25px;
+}
+#bound .anchor {
+  position: absolute;
+  font-weight: bold;
+  bottom: 5px;
+  left: 50%;
+  background: #333;
+  width: 2px;
+  height: 25px;
+  z-index: 10;
+}
+#bound .anchor:after {
+  position: absolute;
+  content: "anchor: 50%";
+  font-weight: bold;
+  left: -40px;
+  white-space: nowrap;
+  bottom: 100%;
+}
+#bound .hanger:after {
+  position: absolute;
+  content: "hanger: 50%";
+  font-weight: bold;
+  left: 50%;
+  transform: translate(-50%);
+}
+#bound .hanger:before {
+  position: absolute;
+  content: "";
+  font-weight: bold;
+  top: 100%;
+  left: 50%;
+  background: #333;
+  width: 2px;
+  height: 25px;
+}
+#bound .anchor {
+  position: absolute;
+  font-weight: bold;
+  bottom: 5px;
+  left: 50%;
+  background: #333;
+  width: 2px;
+  height: 25px;
+  z-index: 10;
+}
+#bound .anchor:after {
+  position: absolute;
+  content: "anchor: 50%";
+  font-weight: bold;
+  left: -40px;
+  white-space: nowrap;
+  bottom: 100%;
+}

package/dev/archive/css/common.css

@@ -0,0 +1,76 @@
+@import url("https://fonts.googleapis.com/css?family=Nanum+Gothic&subset=korean");
+body {
+  margin-top: 10px;
+}
+.header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  background: rgba(255, 255, 255, 0.5);
+  height: 40px;
+  z-index: 2010;
+  margin: 0;
+  padding: 10px;
+  list-style: none;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+.header li {
+  margin: 0px 10px;
+  padding: 0;
+  position: relative;
+  display: inline-block;
+  line-height: 40px;
+  vertical-align: top;
+}
+.header li a {
+  color: #333;
+  font-weight: bold;
+  padding: 0px 10px;
+  line-height: 40px;
+}
+body,
+em,
+i {
+  font-family: "Helvetica Neue", sans-serif;
+  font-weight: 300;
+  font-style: normal;
+}
+.hljs {
+  margin: 30px auto;
+  max-width: 800px;
+  padding: 10px;
+  border-radius: 5px;
+}
+.container {
+  max-width: 800px;
+  width: 100%;
+  margin: 30px auto;
+  padding-top: 40px;
+}
+h1 a {
+  position: relative;
+  color: #333;
+}
+pre {
+  max-width: 800px;
+  margin: 30px auto;
+}
+ul.extra {
+  max-width: 800px;
+  margin: 10px auto;
+  font-size: 16px;
+  padding: 10px 10px 10px 40px;
+  border-radius: 10px;
+  background: #f5f5f5;
+  box-sizing: border-box;
+  list-style: initial;
+}
+ul.extra li {
+  font-size: 16px;
+  margin: 10px 0px;
+  list-style: initial;
+  height: auto;
+  overflow: visible;
+}

package/dev/archive/css/cross.css

@@ -0,0 +1,21 @@
+#cross .flicking-viewport {
+  width: 400px;
+  height: 500px;
+}
+
+#cross .panel {
+  width: 400px;
+  margin-top: 0px;
+  font-size: 60px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 500px;
+  color: white;
+}
+
+#cross .panel img {
+  width: 100%;
+  height: 100%;
+}

package/dev/archive/css/features.css

@@ -0,0 +1,49 @@
+.flicking-viewport {
+  width: 500px;
+  height: 130px;
+  margin: 0px auto;
+  background: #eee;
+  background: rgba(55, 55, 55 0.1);
+  border-radius: 5px;
+}
+.panel {
+  position: relative;
+  display: block;
+  border-radius: 5px;
+  width: 200px;
+  margin-top: 5px;
+  background: #f55;
+  height: 120px;
+  text-align: center;
+  line-height: 120px;
+}
+.flicking-viewport .panel0 {
+  background: #f47071;
+}
+.flicking-viewport .panel1 {
+  background: #f69462;
+}
+.flicking-viewport .panel2 {
+  background: #ede484;
+}
+.flicking-viewport .panel3 {
+  background: #90f290;
+}
+.flicking-viewport .panel4 {
+  background: #78caff;
+}
+.flicking-viewport .infinite0 {
+  background: #f47071;
+}
+.flicking-viewport .infinite1 {
+  background: #f69462;
+}
+.flicking-viewport .infinite2 {
+  background: #ede484;
+}
+.flicking-viewport .infinite3 {
+  background: #90f290;
+}
+.flicking-viewport .infinite4 {
+  background: #78caff;
+}