From 0d8a79cf2820f5a030b2c4f5db0adf8817c34cd7 Mon Sep 17 00:00:00 2001 From: Towfiq Date: Sun, 27 Nov 2022 23:10:47 +0600 Subject: [PATCH] Added Animation --- components/common/Modal.tsx | 2 +- components/domains/DomainSettings.tsx | 20 ++++---- components/keywords/KeywordsTable.tsx | 7 +-- package-lock.json | 70 ++++++++++++++++++++++++--- package.json | 4 +- pages/domain/[slug]/index.tsx | 19 +++++--- styles/globals.css | 52 ++++++++++++++++++++ 7 files changed, 148 insertions(+), 26 deletions(-) diff --git a/components/common/Modal.tsx b/components/common/Modal.tsx index 3dbc68a..e001b7a 100644 --- a/components/common/Modal.tsx +++ b/components/common/Modal.tsx @@ -30,7 +30,7 @@ const Modal = ({ children, width = '1/2', closeModal, title }:ModalProps) => { return (
{title &&

{title}

}
- {showRemoveDomain && ( + {showRemoveDomain && domain && ( setShowRemoveDomain(false) } title={`Remove Domain ${domain.domain}`}>

Are you sure you want to remove this Domain? Removing this domain will remove all its keywords.

diff --git a/components/keywords/KeywordsTable.tsx b/components/keywords/KeywordsTable.tsx index f5fc915..31adaaf 100644 --- a/components/keywords/KeywordsTable.tsx +++ b/components/keywords/KeywordsTable.tsx @@ -1,5 +1,6 @@ import React, { useState, useMemo } from 'react'; import { Toaster } from 'react-hot-toast'; +import { CSSTransition } from 'react-transition-group'; import AddKeywords from './AddKeywords'; import { filterKeywords, keywordsByDevice, sortKeywords } from '../../utils/sortFilter'; import Icon from '../common/Icon'; @@ -156,13 +157,13 @@ const KeywordsTable = ({ domain, keywords = [], isLoading = true, showAddModal =
)} - {showAddModal && domain && ( + setShowAddModal(false)} /> - )} + {showTagManager && ( =16.6.0", + "react-dom": ">=16.6.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -11599,6 +11631,14 @@ "@types/react": "*" } }, + "@types/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==", + "requires": { + "@types/react": "*" + } + }, "@types/scheduler": { "version": "0.16.2", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", @@ -12782,6 +12822,15 @@ "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.14.tgz", "integrity": "sha512-NMt+m9zFMPZe0JcY9gN224Qvk6qLIdqex29clBvc/y75ZBX9YA9wNK3frsYvu2DI1xcCIwxwnX+TlsJ2DSOADg==" }, + "dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "requires": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "dom-serializer": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", @@ -16270,7 +16319,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "requires": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -16346,8 +16394,7 @@ "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "react-query": { "version": "3.39.2", @@ -16365,6 +16412,17 @@ "integrity": "sha512-rouF7MiEm55fH791Y8cg+VobIJgx8gtNJ+gjr86R4ZqO1WKPkXiXjdT/lRzrvEkUzsxT1exHqV2V+Zdi114H3A==", "requires": {} }, + "react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "requires": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + } + }, "read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index 725aef8..94bf02a 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "build": "next build", "start": "next start", "cron": "node cron.js", - "start:all": "concurrently npm:start npm:cron", + "start:all": "concurrently npm:start npm:cron", "lint": "next lint", "test": "jest --watch --verbose", "test:ci": "jest --ci", @@ -15,6 +15,7 @@ }, "dependencies": { "@testing-library/react": "^13.4.0", + "@types/react-transition-group": "^4.4.5", "axios": "^1.1.3", "axios-retry": "^3.3.1", "chart.js": "^3.9.1", @@ -37,6 +38,7 @@ "react-hot-toast": "^2.4.0", "react-query": "^3.39.2", "react-timeago": "^7.1.0", + "react-transition-group": "^4.4.5", "reflect-metadata": "^0.1.13", "sequelize": "^6.25.2", "sequelize-typescript": "^2.1.5", diff --git a/pages/domain/[slug]/index.tsx b/pages/domain/[slug]/index.tsx index af69f8e..1061b43 100644 --- a/pages/domain/[slug]/index.tsx +++ b/pages/domain/[slug]/index.tsx @@ -4,6 +4,7 @@ import Head from 'next/head'; import { useRouter } from 'next/router'; // import { useQuery } from 'react-query'; // import toast from 'react-hot-toast'; +import { CSSTransition } from 'react-transition-group'; import Sidebar from '../../../components/common/Sidebar'; import TopBar from '../../../components/common/TopBar'; import DomainHeader from '../../../components/domains/DomainHeader'; @@ -81,15 +82,21 @@ const SingleDomain: NextPage = () => { />
- {showAddDomain && setShowAddDomain(false)} />} - {showDomainSettings && theDomains && activDomain && activDomain.domain - && + setShowAddDomain(false)} /> + + + + - } - {showSettings && setShowSettings(false)} />} + + + setShowSettings(false)} /> + ); }; diff --git a/styles/globals.css b/styles/globals.css index f8e2333..44aab96 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -94,4 +94,56 @@ body{ .settings__content{ height: calc(100vh - 185px); overflow: auto; +} + + +/* Animation */ +.modal_anim-enter { + opacity: 0; +} +.modal_anim-enter-active { + opacity: 1; + transition: opacity 300ms; +} +.modal_anim-enter .modal__content{ + transform: translateY(50px); +} +.modal_anim-enter-active .modal__content{ + transform: translateY(0); + transition: all 300ms; +} + +.modal_anim-exit { + opacity: 1; +} +.modal_anim-exit-active { + opacity: 0; + transition: all 300ms; +} +.modal_anim-exit .modal__content{ + transform: translateY(0px); +} +.modal_anim-exit-active .modal__content{ + transform: translateY(50px); + transition: all 300ms; +} + + +.settings_anim-enter { + opacity: 0; + transform: translateX(400px); +} +.settings_anim-enter-active { + opacity: 1; + transform: translateX(0); + transition: all 300ms; +} +.settings_anim-exit { + opacity: 1; + transform: translateX(0); +} +.settings_anim-exit-active { + opacity: 0; + transform: translateX(400px); + transition: all 300ms; } \ No newline at end of file