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

package/dev/archive/features/InfiniteFlicking.tsx

@@ -1,192 +0,0 @@
-import Flicking from "@dev/react-flicking";
-import * as React from "react";
-import "../css/infinite.css";
-import { insertCode } from "../utils";
-import PlaceHolderItem from "./PlaceHolderItem";
-
-export default class InfiniteFlicking extends React.Component<
-  {},
-  { list0: number[]; list1: number[]; list2: number[] }
-> {
-  public container?: HTMLElement;
-  public state = {
-    list0: [0, 1, 2, 3, 4],
-    list1: [0, 1, 2, 3, 4],
-    list2: [0, 1, 2, 3, 4]
-  };
-
-  public render() {
-    return (
-      <div id="infinite" className="container">
-        <h1>Infinite Flicking</h1>
-        <h2>Append &amp; Prepend panel dynamically</h2>
-        <ul className="extra">
-          <li>You can dynamically add panels to the flicking.</li>
-          <li>The panel's indexes are zero-based integer.</li>
-          <li>Note: The number displayed above each panel is not panel's index.</li>
-        </ul>
-        <Flicking className="flicking flicking0" gap={10}>
-          {this.state.list0.map(num => {
-            return (
-              <div key={num} className={`infinite infinite${Math.abs(num) % 5}`}>
-                {num}
-              </div>
-            );
-          })}
-        </Flicking>
-        <div className="buttons">
-          <button
-            id="prepend"
-            onClick={_e =>
-              this.setState(state => {
-                const start = state.list0[0] || 0;
-                return { list0: [start - 2, start - 1, ...state.list0] };
-              })
-            }
-          >
-            {" "}
-            Prepend
-          </button>
-          <button
-            id="append"
-            onClick={_e =>
-              this.setState(state => {
-                const end = state.list0[state.list0.length - 1] || 0;
-                return { list0: [...state.list0, end + 1, end + 2] };
-              })
-            }
-          >
-            Append
-          </button>
-        </div>
-        <pre>
-          <code className="hljs html" data-script="flicking0"></code>
-        </pre>
-        <h2>infinite: true &amp; needPanel event</h2>
-        <ul className="extra">
-          <li>
-            Enabling the infinite option can make <strong>needPanel</strong> event to be triggered when more panels at
-            moving direction should be fetched within <strong>infiniteThreshold</strong> value.
-          </li>
-        </ul>
-        <Flicking
-          className="flicking flicking1"
-          gap={10}
-          needPanelThreshold={50}
-          onNeedPanel={e => {
-            if (e.direction !== "NEXT") return;
-
-            this.setState(state => {
-              const end = state.list1[state.list1.length - 1] || 0;
-
-              return { list1: [...state.list1, end + 1, end + 2] };
-            });
-          }}
-        >
-          {this.state.list1.map(num => {
-            return (
-              <div key={num} className={`infinite infinite${Math.abs(num) % 5}`}>
-                {num}
-              </div>
-            );
-          })}
-        </Flicking>
-        <pre>
-          <code className="hljs html" data-script="flicking1"></code>
-        </pre>
-        <h2>infinite: true &amp; placeholder</h2>
-        <ul className="extra">
-          <li>
-            You can make continuous carousel UI with asynchronous data by adding placeholder panel first, then update
-            panel with fetched data later.
-          </li>
-        </ul>
-        <Flicking
-          className="flicking flicking2"
-          gap={10}
-          moveType={"freeScroll"}
-          onNeedPanel={e => {
-            if (e.direction !== "NEXT") return;
-
-            this.setState(state => {
-              const end = state.list2[state.list2.length - 1] || 0;
-
-              return { list2: [...state.list2, end + 1, end + 2] };
-            });
-          }}
-        >
-          {this.state.list2.map(num => {
-            return <PlaceHolderItem key={num} num={num} />;
-          })}
-        </Flicking>
-        <pre>
-          <code className="hljs html" data-script="flicking2"></code>
-        </pre>
-      </div>
-    );
-  }
-
-  public componentDidMount() {
-    insertCode(
-      "infinite",
-      0,
-      `
-<Flicking className="flicking flicking0" gap={10}>
-  {this.state.list0.map(num => {
-    return <div key={num} className={"infinite infinite" + Math.abs(num) % 5}>{num}</div>;
-  })}
-</Flicking>
-<div className="buttons">
-  <button id="prepend" onClick={e => this.setState(state => {
-    const start = state.list0[0] || 0;
-    return { list0: [start - 2, start - 1, ...state.list0] };
-  })}> Prepend</button>
-  <button id="append" onClick={e => this.setState(state => {
-    const end = state.list0[state.list0.length - 1] || 0;
-    return { list0: [...state.list0, end + 1, end + 2] };
-  })}>Append</button>
-</div>
-`
-    );
-    insertCode(
-      "infinite",
-      1,
-      `
-<Flicking
-  className="flicking flicking1" gap={10} infiniteThreshold={50}
-  onNeedPanel={() => {
-    this.setState(state => {
-      const end = state.list1[state.list1.length - 1] || 0;
-
-      return { list1: [...state.list1, end + 1, end + 2] };
-    });
-  }}
->
-  {this.state.list1.map(num => {
-    return <div key={num} className={"infinite infinite" + Math.abs(num) % 5}>{num}</div>;
-  })}
-</Flicking>
-    `
-    );
-    insertCode(
-      "infinite",
-      2,
-      `
-<Flicking
-  className="flicking flicking2" gap={10} moveType={"freeScroll"}
-  onNeedPanel={() => {
-    this.setState(state => {
-      const end = state.list2[state.list2.length - 1] || 0;
-
-      return { list2: [...state.list2, end + 1, end + 2] };
-    });
-  }}
->
-  {this.state.list2.map(num => {
-    return <PlaceHolderItem key={num} num={num} />;
-  })}
-</Flicking>
-    `
-    );
-  }
-}

package/dev/archive/features/PlaceHolderItem.tsx

@@ -1,36 +0,0 @@
-import * as React from "react";
-
-class PlaceHolderItem extends React.Component<{ num: number; domRef: React.Ref<HTMLDivElement> }, { loaded: boolean }> {
-  public state = {
-    loaded: false
-  };
-
-  private _timer: number = -1;
-
-  public render() {
-    const num = this.props.num;
-    const loaded = this.state.loaded;
-    return (
-      <div
-        ref={this.props.domRef}
-        className={`infinite infinite${Math.abs(num) % 5} ${loaded ? "" : "placeholder"} flicking-panel`}
-      >
-        {num}
-      </div>
-    );
-  }
-
-  public componentDidMount() {
-    this._timer = window.setTimeout(() => {
-      this.setState({ loaded: true });
-    }, 1500);
-  }
-
-  public componentWillUnmount() {
-    clearTimeout(this._timer);
-  }
-}
-
-export default React.forwardRef<HTMLDivElement, { num: number }>((props, ref) => (
-  <PlaceHolderItem domRef={ref} {...props} />
-));

package/dev/archive/features/Progress.tsx

@@ -1,241 +0,0 @@
-import Flicking from "@dev/react-flicking";
-import * as React from "react";
-import { insertCode } from "../utils";
-import "../css/progress.css";
-
-export default class Progress extends React.Component<{}> {
-  private thumb: HTMLElement;
-  private flicking1: Flicking;
-  private flicking2: Flicking;
-  private flicking3: Flicking;
-  public render() {
-    return (
-      <div id="progress" className="container">
-        <h1>e.progress</h1>
-        <ul className="extra">
-          <li>Indicates the overall progress of the Flicking.</li>
-        </ul>
-        <Flicking
-          className="flicking flicking0"
-          gap={10}
-          circular={true}
-          moveType="snap"
-          onMove={e => {
-            const progress =
-              Math.min(Math.max(-e.currentTarget.panels[0].progress, 0), e.currentTarget.panelCount - 1) /
-              (e.currentTarget.panelCount - 1);
-
-            this.thumb.style.width = `${progress * 100}%`;
-          }}
-        >
-          <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="progress">
-          <div
-            className="thumb"
-            ref={e => {
-              this.thumb = e as HTMLElement;
-            }}
-          ></div>
-        </div>
-        <pre>
-          <code className="hljs html" data-script="flicking0"></code>
-        </pre>
-        <h1>panel.getProgress()</h1>
-        <ul className="extra">
-          <li>Indicates the progress of the relative index of each panel.</li>
-        </ul>
-        <Flicking
-          className="flicking flicking1"
-          gap={10}
-          circular={true}
-          moveType="snap"
-          ref={e => {
-            this.flicking1 = e as Flicking;
-          }}
-          onMove={e => {
-            const flicking = e.currentTarget;
-
-            flicking.panels.forEach(panel => {
-              panel.element.innerHTML = panel.progress.toFixed(2);
-            });
-          }}
-        >
-          <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>
-
-        <h1>panel.getOutsetProgress()</h1>
-        <ul className="extra">
-          <li>
-            When panel is completely invisible, outsetProgress becomes -1 at left(up), 1 at right(down) direction, and 0
-            when panel's anchor and hanger is overlapped.
-          </li>
-        </ul>
-        <Flicking
-          className="flicking flicking2"
-          gap={10}
-          circular={true}
-          moveType="snap"
-          ref={e => {
-            this.flicking2 = e as Flicking;
-          }}
-          onMove={e => {
-            const flicking = e.currentTarget;
-
-            flicking.panels.forEach(panel => {
-              panel.element.innerHTML = panel.outsetProgress.toFixed(2);
-            });
-          }}
-        >
-          <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>
-
-        <h1>panel.getVisibleRatio()</h1>
-        <ul className="extra">
-          <li>Indicates the percentage of areas within the viewport that the panel occupies.</li>
-        </ul>
-        <Flicking
-          className="flicking flicking3"
-          gap={10}
-          circular={true}
-          moveType="snap"
-          ref={e => {
-            this.flicking3 = e as Flicking;
-          }}
-          onMove={e => {
-            const flicking = e.currentTarget;
-
-            flicking.panels.forEach(panel => {
-              panel.element.innerHTML = panel.visibleRatio.toFixed(2);
-            });
-          }}
-        >
-          <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 pagination3"></div>
-        <pre>
-          <code className="hljs html" data-script="flicking3"></code>
-        </pre>
-      </div>
-    );
-  }
-  public componentDidMount() {
-    // this.flicking1.getAllPanels(true).forEach(panel => {
-    //   panel.getElement().innerHTML = panel.getVisibleRatio().toFixed(2);
-    // });
-    // this.flicking2.getAllPanels(true).forEach(panel => {
-    //   panel.getElement().innerHTML = panel.getOutsetProgress().toFixed(2);
-    // });
-    // this.flicking3.getAllPanels(true).forEach(panel => {
-    //   panel.getElement().innerHTML = panel.getVisibleRatio().toFixed(2);
-    // });
-    insertCode(
-      "progress",
-      0,
-      `
-  <Flicking className="flicking flicking0"
-    gap={10}
-    circular={true}
-    moveType={{type: "snap", count: 5}}
-    onMove={e => {
-      this.thumb.style.width = (e.progress * 100) + "%";
-    }}>
-    <div className="panel"></div>
-    <div className="panel"></div>
-    <div className="panel"></div>
-    <div className="panel"></div>
-    <div className="panel"></div>
-  </Flicking>`
-    );
-    insertCode(
-      "progress",
-      1,
-      `
-<Flicking className="flicking flicking1"
-  gap={10}
-  circular={true}
-  moveType={{type: "snap", count: 5}}
-  onMove={e => {
-    const flicking = e.currentTarget;
-
-    flicking.getAllPanels(true).forEach(panel => {
-      panel.getElement().innerHTML = panel.getProgress().toFixed(2);
-    });
-  }}>
-  <div className="panel"></div>
-  <div className="panel"></div>
-  <div className="panel"></div>
-  <div className="panel"></div>
-  <div className="panel"></div>
-</Flicking>`
-    );
-    insertCode(
-      "progress",
-      2,
-      `
-  <Flicking className="flicking flicking2"
-    gap={10}
-    circular={true}
-    moveType={{type: "snap", count: 5}}
-    onMove={e => {
-      const flicking = e.currentTarget;
-
-      flicking.getAllPanels(true).forEach(panel => {
-        panel.getElement().innerHTML = panel.getOutsetProgress().toFixed(2);
-      });
-    }}>
-    <div className="panel"></div>
-    <div className="panel"></div>
-    <div className="panel"></div>
-    <div className="panel"></div>
-    <div className="panel"></div>
-  </Flicking>`
-    );
-    insertCode(
-      "progress",
-      3,
-      `
-  <Flicking className="flicking flicking3"
-    gap={10}
-    circular={true}
-    moveType={{type: "snap", count: 5}}
-    onMove={e => {
-      const flicking = e.currentTarget;
-
-      flicking.getAllPanels(true).forEach(panel => {
-        panel.getElement().innerHTML = panel.getVisibleRatio().toFixed(2);
-      });
-    }}>
-    <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/PropChange.tsx

@@ -1,171 +0,0 @@
-import Flicking from "@dev/react-flicking";
-import * as React from "react";
-
-export default class PropChange extends React.Component<{}, Record<string, any>> {
-  public constructor(props) {
-    super(props);
-
-    this.state = {
-      align: 0,
-      panelsPerView: 5,
-      horizontal: true,
-      circular: true,
-      bound: true,
-      adaptive: true,
-      noPanelStyleOverride: true,
-      moveType: "snap"
-    };
-  }
-
-  public render() {
-    return (
-      <div className="container">
-        <h1>align</h1>
-        <Flicking className="flicking" align={`${this.state.align}%`}>
-          <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>
-        <button
-          onClick={() => {
-            this.setState({ align: (this.state.align + 50) % 150 });
-          }}
-        >
-          Change
-        </button>
-
-        <h1>horizontal</h1>
-        <Flicking className="flicking" horizontal={this.state.horizontal}>
-          <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>
-        <button
-          onClick={() => {
-            this.setState({ horizontal: !this.state.horizontal });
-          }}
-        >
-          Change
-        </button>
-
-        <h1>circular</h1>
-        <Flicking className="flicking" circular={this.state.circular}>
-          <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>
-        <button
-          onClick={() => {
-            this.setState({ circular: !this.state.circular });
-          }}
-        >
-          Change
-        </button>
-
-        <h1>bound</h1>
-        <Flicking className="flicking" bound={this.state.bound}>
-          <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>
-        <button
-          onClick={() => {
-            this.setState({ bound: !this.state.bound });
-          }}
-        >
-          Change
-        </button>
-
-        <h1>adaptive</h1>
-        <Flicking className="flicking" adaptive={this.state.adaptive}>
-          <div className="panel panel0" style={{ height: "200px" }}></div>
-          <div className="panel panel1" style={{ height: "300px" }}></div>
-          <div className="panel panel2" style={{ height: "400px" }}></div>
-          <div className="panel panel3" style={{ height: "500px" }}></div>
-          <div className="panel panel4" style={{ height: "600px" }}></div>
-        </Flicking>
-        <button
-          onClick={() => {
-            this.setState({ adaptive: !this.state.adaptive });
-          }}
-        >
-          Change
-        </button>
-
-        <h1>panelsPerView</h1>
-        <Flicking className="flicking" panelsPerView={this.state.panelsPerView}>
-          <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>
-        <button
-          onClick={() => {
-            this.setState({ panelsPerView: this.state.panelsPerView - 1 });
-          }}
-        >
-          Change
-        </button>
-
-        <h1>noPanelStyleOverride</h1>
-        <Flicking className="flicking" panelsPerView={5} noPanelStyleOverride={this.state.noPanelStyleOverride}>
-          <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>
-        <button
-          onClick={() => {
-            this.setState({ noPanelStyleOverride: !this.state.noPanelStyleOverride });
-          }}
-        >
-          Change
-        </button>
-
-        <h1>moveType</h1>
-        <Flicking className="flicking" moveType={this.state.moveType}>
-          <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>
-        <button
-          onClick={() => {
-            this.setState({ moveType: this.state.moveType === "snap" ? "freeScroll" : "snap" });
-          }}
-        >
-          Change
-        </button>
-
-        <h1>moveType</h1>
-        <Flicking className="flicking" moveType={this.state.moveType}>
-          <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>
-        <button
-          onClick={() => {
-            this.setState({ moveType: this.state.moveType === "snap" ? "freeScroll" : "snap" });
-          }}
-        >
-          Change
-        </button>
-      </div>
-    );
-  }
-
-  public componentDidMount() {}
-}