fleetcor-lwc 3.3.0 → 3.4.0

package/README.md

@@ -375,6 +375,7 @@ Add / update `lwc.config.json` file in your project
 | change        | event.detail | object | Return full data of component's state |
 
 ### Input Email
+
 This component fully extends from `Input Text`
 
 ```html
@@ -488,6 +489,10 @@ You can override them as you wish by global css variables as priority.
 
 ## Release Notes:
 
+- v.3.4.0
+  - Added `Animation` util class
+  - Updated `Modal` view animation with `fadeIn` and `fadeOut`
+
 - v.3.3.0
   - Added components `flt-input-text`, `flt-input-email`, `flt-modal`
   - For modal added new interface `ModalViewer` for dynamically creation modals

package/frontend/components/flt/modal/__test__/modal.test.js

@@ -24,7 +24,9 @@ describe('flt-modal', () => {
 
         const glassEl = modalElement.querySelector('.flt-modal__glass')
         glassEl.click()
-        const removedModalElement = document.body.querySelector('flt-modal')
-        expect(removedModalElement).toBeFalsy()
+        setTimeout(() => {
+            const removedModalElement = document.body.querySelector('flt-modal')
+            expect(removedModalElement).toBeFalsy()
+        }, 1000)
     })
 })

package/frontend/components/flt/modal/modal.scss

@@ -8,7 +8,6 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    animation: fadeIn 0.3s ease-in-out;
 
     &__glass {
         position: absolute;
@@ -23,12 +22,3 @@
         position: relative;
     }
 }
-
-@keyframes fadeIn {
-    0% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
-}

package/frontend/core/index.js

@@ -7,6 +7,7 @@ export { default as CheckboxElement } from './interface/CheckboxElement'
 export { default as SelectElement } from './interface/SelectElement'
 export { default as InputElement } from './interface/InputElement'
 export { default as ModalViewer } from './interface/ModalViewer'
+export { default as Animation } from './interface/Animation'
 
 // ERROR
 export * from './error/errors'

package/frontend/core/interface/Animation.js

@@ -0,0 +1,78 @@
+export default class Animation {
+    static fadeIn = ({
+        el,
+        duration = 300,
+        beforeAction,
+        afterAction,
+        timing = (timeFraction) => timeFraction
+    }) => {
+        if (typeof beforeAction === 'function') {
+            beforeAction()
+        }
+        el.style.opacity = 0
+        document.body.style.overflow = 'hidden'
+
+        Animation.animate({
+            duration: duration,
+            timing: timing,
+            draw: (progress) => {
+                if (progress < 0) progress = 0
+                el.style.opacity = progress
+            },
+            complete: () => {
+                el.style.opacity = null
+                if (typeof afterAction === 'function') {
+                    afterAction()
+                }
+            }
+        })
+    }
+    
+    static fadeOut = ({
+        el,
+        duration = 300,
+        beforeAction,
+        afterAction,
+        timing = (timeFraction) => 1 - timeFraction
+    }) => {
+        if (typeof beforeAction === 'function') {
+            beforeAction()
+        }
+
+        Animation.animate({
+            duration: duration,
+            timing: timing,
+            draw: (progress) => {
+                if (progress > 1) progress = 1
+                el.style.opacity = progress
+            },
+            complete: () => {
+                el.style.opacity = null
+                if (typeof afterAction === 'function') {
+                    afterAction()
+                }
+            }
+        })
+    }
+
+    static animate({ timing, duration, draw = () => {}, complete = () => {} }) {
+        let start = performance.now()
+
+        requestAnimationFrame(function animate(time) {
+            // timeFraction изменяется от 0 до 1
+            let timeFraction = (time - start) / duration
+            if (timeFraction > 1) timeFraction = 1
+
+            // вычисление текущего состояния анимации
+            let progress = timing(timeFraction)
+
+            draw(progress) // отрисовать её
+
+            if (timeFraction < 1) {
+                requestAnimationFrame(animate)
+            } else if (complete) {
+                complete()
+            }
+        })
+    }
+}

package/frontend/core/interface/ModalViewer.js

@@ -1,4 +1,5 @@
 import { createElement } from 'lwc'
+import { Animation } from 'fleetcor-lwc'
 import Modal from 'flt/modal'
 
 /**
@@ -7,20 +8,45 @@ import Modal from 'flt/modal'
  * @description This class is used to show and hide modal view
  */
 export default class ModalViewer {
-    static showModalWithComponent(cmp) {
+    static showModalWithComponent(cmp, options = { duration: 300 }) {
         const appEl = createElement('flt-modal', { is: Modal })
         document.body.appendChild(appEl)
-        document.body.style.overflow = 'hidden'
-        if (cmp) {
-            appEl.querySelector('.flt-modal__container').appendChild(cmp)
-        }
+        appEl.querySelector('.flt-modal__container').appendChild(cmp)
+        Animation.fadeIn({
+            el: appEl,
+            duration: options?.duration || 300,
+            beforeAction: () => {
+                appEl.style.position = 'relative'
+                appEl.style.zIndex = 1000000
+            },
+            afterAction: () => {
+                appEl.style.position = null
+                appEl.style.zIndex = null
+            },
+            timing: (timeProgress) => {
+                return Math.pow(timeProgress, 2)
+            }
+        })
     }
 
-    static hideModals() {
+    static hideModals(options = { duration: 300 }) {
         document.body.style.overflow = null
         const items = document.body.querySelectorAll('flt-modal')
         items.forEach((item) => {
-            item.remove()
+            Animation.fadeOut({
+                el: item,
+                duration: options?.duration || 300,
+                beforeAction: () => {
+                    item.style.position = 'relative'
+                    item.style.zIndex = 1000000
+                },
+                afterAction: () => {
+                    item.remove()
+                },
+                timing: (timeProgress) => {
+                    return Math.pow(1 - timeProgress, 2)
+                }
+            })
         })
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "fleetcor-lwc",
-    "version": "3.3.0",
+    "version": "3.4.0",
     "description": "LWC framework by Fleetcor",
     "repository": {
         "type": "git",