refactor(core): text animation functionalities

arwes · Feb 5, 2021 · d89a624 · d89a624
1 parent 17b555f
commit d89a624
Show file tree

Hide file tree

Showing 15 changed files with 24 additions and 16 deletions.
diff --git a/packages/core/src/Text/Text.animator.ts b/packages/core/src/Text/Text.animator.ts
@@ -5,7 +5,7 @@ import {
   TextAnimationRefs,
   startTextAnimation,
   stopTextAnimation
-} from './Text.animations';
+} from '../utils/textAnimations';
 
 const useAnimateEntering = (animator: AnimatorRef, refs: TextAnimationRefs, bleeps: Bleeps): void => {
   startTextAnimation(animator, refs, bleeps);

diff --git a/packages/core/src/Text/Text.component.ts b/packages/core/src/Text/Text.component.ts
@@ -5,8 +5,8 @@ import { jsx } from '@emotion/react';
 import { WithAnimatorInputProps } from '@arwes/animation';
 import { WithBleepsInputProps } from '@arwes/sounds';
 
+import { TextAnimationRefs, startTextAnimation } from '../utils/textAnimations';
 import { styles } from './Text.styles';
-import { TextAnimationRefs, startTextAnimation } from './Text.animations';
 
 // Browser normally renders 60 frames per second for requested animations.
 const FPS_NORMAL_DURATION = 1000 / 60;

diff --git a/packages/core/src/Text/Text.styles.ts b/packages/core/src/Text/Text.styles.ts
@@ -9,15 +9,6 @@ const styles: Record<string, CSSObject> = {
     display: 'inline-block',
     zIndex: 1
   },
-  cloneNode: {
-    display: 'inline-block',
-    position: 'absolute',
-    zIndex: 0,
-    left: '0',
-    right: '0',
-    top: '0',
-    overflow: 'hidden'
-  },
   blink: {
     position: 'relative',
     display: 'inline-block',

diff --git a/packages/core/src/utils/setTextNodesEnteringContentLength/index.ts b/packages/core/src/utils/setTextNodesEnteringContentLength/index.ts
@@ -0,0 +1 @@
+export * from './setTextNodesEnteringContentLength';
diff --git a/...setTextNodesEnteringContentLength.test.ts → ...setTextNodesEnteringContentLength.test.ts b/...setTextNodesEnteringContentLength.test.ts → ...setTextNodesEnteringContentLength.test.ts
diff --git a/...tils/setTextNodesEnteringContentLength.ts → ...ngth/setTextNodesEnteringContentLength.ts b/...tils/setTextNodesEnteringContentLength.ts → ...ngth/setTextNodesEnteringContentLength.ts
diff --git a/packages/core/src/utils/setTextNodesExitingContentLength/index.ts b/packages/core/src/utils/setTextNodesExitingContentLength/index.ts
@@ -0,0 +1 @@
+export * from './setTextNodesExitingContentLength';
diff --git a/.../setTextNodesExitingContentLength.test.ts → .../setTextNodesExitingContentLength.test.ts b/.../setTextNodesExitingContentLength.test.ts → .../setTextNodesExitingContentLength.test.ts
diff --git a/...utils/setTextNodesExitingContentLength.ts → ...ength/setTextNodesExitingContentLength.ts b/...utils/setTextNodesExitingContentLength.ts → ...ength/setTextNodesExitingContentLength.ts
diff --git a/packages/core/src/utils/textAnimations/index.ts b/packages/core/src/utils/textAnimations/index.ts
@@ -0,0 +1 @@
+export * from './textAnimations';
diff --git a/...ges/core/src/Text/Text.animations.test.ts → ...ils/textAnimations/textAnimations.test.ts b/...ges/core/src/Text/Text.animations.test.ts → ...ils/textAnimations/textAnimations.test.ts
diff --git a/packages/core/src/Text/Text.animations.ts → ...rc/utils/textAnimations/textAnimations.ts b/packages/core/src/Text/Text.animations.ts → ...rc/utils/textAnimations/textAnimations.ts
@@ -1,12 +1,11 @@
 import { RefObject, MutableRefObject } from 'react';
-import { css } from '@emotion/css';
+import { CSSObject, css } from '@emotion/css';
 import { AnimatorRef } from '@arwes/animation';
 import { Bleeps } from '@arwes/sounds';
 
-import { walkTextNodes } from './utils/walkTextNodes';
-import { setTextNodesEnteringContentLength } from './utils/setTextNodesEnteringContentLength';
-import { setTextNodesExitingContentLength } from './utils/setTextNodesExitingContentLength';
-import { styles } from './Text.styles';
+import { walkTextNodes } from '../walkTextNodes';
+import { setTextNodesEnteringContentLength } from '../setTextNodesEnteringContentLength';
+import { setTextNodesExitingContentLength } from '../setTextNodesExitingContentLength';
 
 type TextAnimationRefs = MutableRefObject<{
   rootRef: RefObject<HTMLElement>
@@ -16,6 +15,20 @@ type TextAnimationRefs = MutableRefObject<{
   animationFrame: MutableRefObject<number | null>
 }>;
 
+// TODO: Since these styles could be used simultaneously by many components,
+// should these styles be memoized to improve performance?
+const styles: Record<string, CSSObject> = {
+  cloneNode: {
+    display: 'inline-block',
+    position: 'absolute',
+    zIndex: 0,
+    left: '0',
+    right: '0',
+    top: '0',
+    overflow: 'hidden'
+  }
+};
+
 const stopTextAnimation = (animator: AnimatorRef, refs: TextAnimationRefs, bleeps: Bleeps): void => {
   const {
     rootRef,

diff --git a/packages/core/src/utils/walkTextNodes/index.ts b/packages/core/src/utils/walkTextNodes/index.ts
@@ -0,0 +1 @@
+export * from './walkTextNodes';
diff --git a/...core/src/Text/utils/walkTextNodes.test.ts → ...utils/walkTextNodes/walkTextNodes.test.ts b/...core/src/Text/utils/walkTextNodes.test.ts → ...utils/walkTextNodes/walkTextNodes.test.ts
diff --git a/...ages/core/src/Text/utils/walkTextNodes.ts → .../src/utils/walkTextNodes/walkTextNodes.ts b/...ages/core/src/Text/utils/walkTextNodes.ts → .../src/utils/walkTextNodes/walkTextNodes.ts