reacthub-pixitweenjs 0.2.9 → 0.2.11

package/src/index.css

@@ -1,457 +0,0 @@
-* {
-  box-sizing: border-box;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  -webkit-tap-highlight-color: transparent;
-}
-
-html,
-body {
-  margin: 0;
-  padding: 0;
-  font-size: 100%;
-  outline: none;
-  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-style: 400;
-  color: #333;
-  font-size: 16px;
-  background-color: #26c6da;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-h1,
-p,
-label {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font-weight: normal;
-  font-style: normal;
-  font-size: 100%;
-  line-height: 1;
-  font-family: inherit;
-  vertical-align: baseline;
-  line-height: normal;
-  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-  border: 0;
-  padding: 0;
-}
-
-button,
-input[type="button"],
-input[type="reset"],
-input[type="submit"] {
-  cursor: pointer;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(359deg);
-  }
-}
-
-@keyframes glow {
-  0%,
-  100% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: 0.5;
-  }
-}
-
-@font-face {
-  font-family: "Nunito Sans";
-  font-style: italic;
-  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/nunitosans/v6/pe0oMImSLYBIv1o4X1M8cce4E9lKcw.ttf)
-    format("truetype");
-}
-
-@font-face {
-  font-family: "Nunito Sans";
-  font-style: normal;
-  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/nunitosans/v6/pe0qMImSLYBIv1o4X1M8cce9I94.ttf)
-    format("truetype");
-}
-
-@font-face {
-  font-family: "Nunito Sans";
-  font-style: normal;
-  font-weight: 800;
-  src: url(https://fonts.gstatic.com/s/nunitosans/v6/pe03MImSLYBIv1o4X1M8cc8aBc5tU1Q.ttf)
-    format("truetype");
-}
-
-.type-light {
-  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-weight: 300;
-}
-
-.type-bold {
-  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-weight: 800;
-}
-
-.type-italic {
-  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-weight: 400;
-  font-style: italic;
-}
-
-input[type="text"],
-input[type="email"],
-input[type="password"],
-textarea {
-  font-size: 14px;
-  line-height: 20px;
-  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-style: 400;
-  padding: 0.75rem 0;
-  line-height: 1.5rem !important;
-  border: none;
-  border-radius: 0;
-  box-sizing: border-box;
-  color: #333;
-  outline: none;
-}
-
-.checkbox {
-  display: inline-block;
-  height: 3rem;
-  position: relative;
-  vertical-align: middle;
-  width: 44px;
-}
-
-.checkbox input[type="checkbox"] {
-  font-size: 1em;
-  visibility: hidden;
-}
-
-.checkbox input[type="checkbox"] + span:before {
-  position: absolute;
-  top: 50%;
-  right: auto;
-  bottom: auto;
-  left: 50%;
-  width: 0.85em;
-  height: 0.85em;
-  transform: translate3d(-50%, -50%, 0);
-  background: transparent;
-  box-shadow: #2cc5d2 0 0 0 1px inset;
-  content: "";
-  display: block;
-}
-
-.checkbox input[type="checkbox"]:checked + span:before {
-  font-size: 16px;
-  line-height: 24px;
-  box-shadow: none;
-  color: #2cc5d2;
-  margin-top: -1px;
-  font-family: "percolate";
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-
-  content: "\e65e";
-}
-
-.input-symbol {
-  display: inline-block;
-  position: relative;
-}
-
-.input-symbol.error [class^="icon-"],
-.input-symbol.error [class*=" icon-"] {
-  color: #ff4400;
-}
-
-.input-symbol [class^="icon-"],
-.input-symbol [class*=" icon-"] {
-  left: 1em;
-}
-
-.input-symbol input {
-  padding-left: 3em;
-}
-
-.input-symbol input {
-  width: 100%;
-}
-
-.input-symbol input:focus + [class^="icon-"],
-.input-symbol input:focus + [class*=" icon-"] {
-  color: #2cc5d2;
-}
-
-.input-symbol [class^="icon-"],
-.input-symbol [class*=" icon-"] {
-  transition: all 300ms ease-in;
-  transform: translate3d(0, -50%, 0);
-  background: transparent;
-  color: #aaa;
-  font-size: 1em;
-  height: 1em;
-  position: absolute;
-  top: 50%;
-  width: 1em;
-}
-
-@font-face {
-  font-family: "percolate";
-  src: url("./assets/icon/percolate.eot?-5w3um4");
-  src: url("./assets/icon/percolate.eot?#iefix5w3um4")
-      format("embedded-opentype"),
-    url("./assets/icon/percolate.woff?5w3um4") format("woff"),
-    url("./assets/icon/percolate.ttf?5w3um4") format("truetype"),
-    url("./assets/icon/percolate.svg?5w3um4") format("svg");
-  font-weight: normal;
-  font-style: normal;
-}
-
-[class^="icon-"],
-[class*=" icon-"] {
-  font-family: "percolate";
-
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-}
-
-.icon-star:before {
-  content: "\e608";
-}
-
-.icon-face-sad:before {
-  content: "\e60f";
-}
-
-.icon-check:before {
-  content: "\e65e";
-}
-
-.list-heading {
-  letter-spacing: 0.3em;
-  text-indent: 0.3em;
-  text-transform: uppercase;
-  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-weight: 800;
-  font-size: 11px;
-  padding-left: 15px;
-  line-height: 40px;
-  background: #f8f8f8;
-  color: #aaa;
-}
-
-.list-heading .icon-sync {
-  opacity: 1;
-  animation: spin 2s infinite linear;
-  display: inline-block;
-  margin-right: 4px;
-}
-
-.list-item {
-  font-size: 14px;
-  line-height: 20px;
-  display: flex;
-  flex-wrap: wrap;
-  height: 3rem;
-  width: 100%;
-  background: white;
-  transition: all ease-out 150ms;
-}
-
-.list-item .title {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-}
-
-.list-item input[type="text"] {
-  background: transparent;
-  width: 100%;
-}
-
-.list-item input[type="text"]:focus {
-  cursor: text;
-}
-
-.pin-button {
-  width: 3rem;
-  height: 3rem;
-  background: transparent;
-  border: none;
-  text-align: center;
-  transition: all 200ms ease-in;
-  color: #eee;
-  font-size: 16px;
-  line-height: 3rem;
-  outline: none;
-}
-
-.pin-button:hover {
-  color: #2cc5d2;
-}
-.pin-button:focus {
-  outline-color: transparent;
-}
-
-.pin-button:active {
-  color: #555;
-}
-
-.list-item.TASK_PINNED .icon-star {
-  color: #2cc5d2;
-}
-
-.list-item.TASK_ARCHIVED input[type="text"] {
-  color: #a0aec0;
-  text-decoration: line-through;
-}
-
-.list-item:hover {
-  background-image: linear-gradient(to bottom, #e5f9f7 0%, #f0fffd 100%);
-}
-
-.list-item:hover .checkbox {
-  cursor: pointer;
-}
-
-.list-item + .list-item {
-  border-top: 1px solid #f0f9fb;
-}
-
-.list-item.checked input[type="text"] {
-  color: #ccc;
-  text-decoration: line-through;
-}
-
-.list-item.checked .delete-item {
-  display: inline-block;
-}
-
-.loading-item {
-  height: 3rem;
-  width: 100%;
-  background: white;
-  display: flex;
-  align-items: center;
-  line-height: 1rem;
-  padding-left: 16px;
-}
-
-.loading-item .glow-checkbox,
-.loading-item .glow-text span {
-  animation: glow 1.5s ease-in-out infinite;
-  background: #eee;
-  color: transparent;
-  cursor: progress;
-  display: inline-block;
-}
-
-.loading-item .glow-checkbox {
-  margin-right: 16px;
-  width: 12px;
-  height: 12px;
-}
-
-.loading-item + .loading-item {
-  border-top: 1px solid #f0f9fb;
-}
-
-.list-items {
-  position: relative;
-  background: white;
-  min-height: 288px;
-}
-
-.list-items .select-placeholder {
-  border: none;
-  width: 48px;
-}
-
-.wrapper-message {
-  position: absolute;
-  top: 45%;
-  right: 0;
-  bottom: auto;
-  left: 0;
-  width: auto;
-  height: auto;
-  transform: translate3d(0, -50%, 0);
-  text-align: center;
-}
-
-.wrapper-message [class^="icon-"],
-.wrapper-message [class*=" icon-"] {
-  font-size: 48px;
-  line-height: 56px;
-  color: #2cc5d2;
-  display: block;
-}
-
-.wrapper-message .title-message {
-  font-size: 16px;
-  line-height: 24px;
-  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-weight: 800;
-  color: #4a5568;
-}
-
-.wrapper-message .subtitle-message {
-  font-size: 14px;
-  line-height: 20px;
-  color: #4a5568;
-}
-
-.page.lists-show {
-  min-height: 100vh;
-  background: white;
-}
-
-.page.lists-show nav {
-  background: #d3edf4;
-  padding: 1.5rem 1.25rem;
-  text-align: center;
-}
-
-@media screen and (min-width: 40em) {
-  .page.lists-show nav {
-    text-align: left;
-  }
-}
-
-.page.lists-show nav .title-page {
-  font-size: 20px;
-  line-height: 24px;
-  line-height: 2rem;
-  cursor: pointer;
-  white-space: nowrap;
-  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-weight: 800;
-  color: #1c3f53;
-  display: inline-block;
-  vertical-align: top;
-  max-width: 100%;
-}

package/src/index.ts

@@ -1,3 +0,0 @@
-export * from "./components";
-// Path: src\index.js
-export * from "./providers";

package/src/main.tsx

@@ -1,11 +0,0 @@
-import * as React from "react";
-import * as ReactDOM from "react-dom/client";
-import App from "./App";
-import "./index.css";
-
-// @ts-ignore
-ReactDOM.createRoot(document.getElementById("root")).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);

package/src/providers/GsapPixieContextProvider.tsx

@@ -1,245 +0,0 @@
-import * as React from "react";
-import {
-  useState,
-  useEffect,
-  useCallback,
-  useRef,
-  useLayoutEffect,
-} from "react";
-import gsap from "gsap";
-import { emitCustomEvent, useCustomEventListener } from "react-custom-events";
-import { useDebounce } from "../utils/useDebounce";
-
-interface GsapPixieContextProps {
-  gsapCtx: React.MutableRefObject<any>;
-  tl: React.MutableRefObject<any>;
-  play: boolean;
-  isDragging: boolean;
-  handlePlay: () => void;
-  handlePause: () => void;
-  handleReset: () => void;
-  handleSeek: (value: number) => void;
-  handleSeekTest: () => void;
-  handleRestart: () => void;
-  handleRepeat: () => void;
-  playerTimeRef: React.MutableRefObject<number>;
-  totalDuration: number;
-}
-
-// Context has been created
-// @ts-ignore
-const GsapPixieContext = React.createContext<GsapPixieContextProps>({});
-
-const Events = {
-  STOP: "GSAP_STOP",
-  PAUSE: "GSAP_PAUSE",
-  PLAY: "GSAP_PLAY",
-  RESUME: "GSAP_RESUME",
-  RESTART: "GSAP_RESTART",
-  REPEAT: "GSAP_REPEAT",
-  SEEK: "GSAP_SEEK",
-  RESET: "GSAP_RESET",
-  DRAGGING_START: "GSAP_DRAGGING_START",
-  DRAGGING_END: "GSAP_DRAGGING_END",
-};
-
-// Provider
-const GsapPixieContextProvider: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => {
-  const [play, setPlay] = useState<boolean>(false);
-  const [isDragging, setIsDragging] = useState<boolean>(false);
-  const [internalDuration, setInternalDuration] = useState<number>(0);
-  const [totalDuration, setTotalDuration] = useState<number>(0);
-  const delayedDuration = useDebounce(internalDuration, 600);
-
-  const tl = useRef<any>();
-  const gsapCtx = useRef<any>();
-  const playerTimeRef = useRef<number>(0.001);
-
-  // const parentElementRef = useRef<any>();
-  // передаем предка анимируемых элементов
-  // const q = gsap.utils.selector(parentElementRef);
-
-  useLayoutEffect(() => {
-    gsapCtx.current = gsap.context(() => {
-      // add a box and circle animation to our timeline and play on first render
-      // console.log("creating timeline");
-      tl.current && tl.current.progress(0).kill();
-      tl.current = gsap.timeline({
-        paused: true,
-        defaults: { duration: 0 },
-      });
-    });
-    return () => gsapCtx.current.revert();
-  }, []);
-
-  gsap.ticker.add(() => {
-    // console.log("timeframe", time, deltaTime, frame);
-    // setFrameNumber(frame);
-    if (tl.current && getTimelineDuration) {
-      setInternalDuration(getTimelineDuration());
-    }
-  });
-
-  const onUpdate = useCallback(() => {
-    /// console.log("update event callback");
-    const timeline = tl.current;
-    let now = timeline.time();
-    // let elapsedTime;
-    // if (playerTimeRef.current) {
-    //   elapsedTime = now - playerTimeRef.current;
-    // }
-    //  console.log(`elapseTime :${elapsedTime} and frame: ${frameNumber}`);
-    //time = now;
-    playerTimeRef.current = now;
-  }, []);
-
-  // set the total duration based on the delayed duration value
-  useEffect(() => {
-    setTotalDuration(delayedDuration);
-  }, [delayedDuration]);
-
-  useEffect(() => {
-    const timeline = tl.current;
-    timeline
-      .eventCallback("onStart", function () {
-        // console.log("onstart", timeline.progress());
-        // setPlay(true);
-        // onUpdate();
-      })
-      .eventCallback("onInterrupt", function () {
-        /// console.log("onInterrupt", timeline.progress());
-        setPlay(false);
-        onUpdate();
-      })
-      .eventCallback("onUpdate", function () {
-        /// console.log("onupdate", timeline.progress());
-        onUpdate();
-      })
-      // .eventCallback("onRepeat", function () {
-      //   /// console.log("onrepeat", timeline.progress());
-      //   onUpdate();
-      // })
-      // .eventCallback("onReverseComplete", function () {
-      //   /// console.log("onReverseComplete", timeline.progress());
-      //   onUpdate();
-      // })
-      // write a pause event
-      .eventCallback("onPause", function () {
-        console.log("onPause", timeline.progress());
-        setPlay(false);
-        onUpdate();
-      })
-      .eventCallback("onResume", function () {
-        console.log("onResume", timeline.progress());
-        setPlay(true);
-        onUpdate();
-      })
-      .eventCallback("onComplete", function () {
-        timeline.seek(0);
-        timeline.pause();
-        setPlay(false);
-        onUpdate();
-      });
-  }, []);
-
-  useEffect(() => {
-    const timeline = tl.current;
-    if (!play) {
-      timeline.pause();
-    } else {
-      timeline.resume();
-    }
-  }, [play]);
-
-  const handleReset = useCallback(() => {
-    const timeline = tl.current;
-
-    timeline.revert();
-  }, []);
-
-  const handleRestart = useCallback(() => {
-    const timeline = tl.current;
-    timeline.restart();
-    setPlay(true);
-  }, []);
-
-  const handleRepeat = useCallback(() => {
-    const timeline = tl.current;
-    timeline.repeat(1);
-    timeline.restart();
-    // setPlay(true);
-  }, []);
-
-  const handleSeek = useCallback((value: number) => {
-    const timeline = tl.current;
-    timeline.seek(value);
-  }, []);
-
-  const handleSeekTest = useCallback(() => {
-    const timeline = tl.current;
-    timeline.seek(4);
-  }, []);
-
-  // const setTimelineDuration = useCallback(() => {
-  //   const timeline = tl.current;
-  //   timeline.totalDuration(3);
-  // }, []);
-
-  const getTimelineDuration = useCallback(() => {
-    const timeline = tl.current;
-    if (!timeline) return 0;
-    return timeline.totalDuration();
-  }, []);
-
-  const handlePause = () => {
-    const timeline = tl.current;
-    timeline.pause();
-    emitCustomEvent(Events.PAUSE);
-    setPlay(false);
-  };
-
-  const handlePlay = () => {
-    const timeline = tl.current;
-    setPlay(true);
-    timeline.resume();
-    emitCustomEvent(Events.RESUME);
-  };
-
-  /** Event listener dragging */
-  useCustomEventListener(Events.DRAGGING_START, () => {
-    console.log("dragging start");
-    setIsDragging(true);
-  });
-
-  useCustomEventListener(Events.DRAGGING_END, () => {
-    setIsDragging(false);
-    console.log("dragging end");
-  });
-
-  console.log("set play updated", play);
-  return (
-    <GsapPixieContext.Provider
-      value={{
-        gsapCtx,
-        tl,
-        handlePlay,
-        handlePause,
-        handleReset,
-        handleSeek,
-        handleSeekTest,
-        handleRestart,
-        handleRepeat,
-        playerTimeRef,
-        play,
-        totalDuration,
-        isDragging,
-      }}
-    >
-      {children}
-    </GsapPixieContext.Provider>
-  );
-};
-
-export { GsapPixieContext, GsapPixieContextProvider, Events };

package/src/providers/index.ts

@@ -1 +0,0 @@
-export * from "./GsapPixieContextProvider";