UniqueSoft/serpbear
2
0
Fork 0
mirror of https://github.com/towfiqi/serpbear synced 2025-06-26 18:15:54 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added Animation

Browse Source
This commit is contained in:
Towfiq
2022-11-27 23:10:47 +06:00
parent 277db6943f
commit 0d8a79cf28
7 changed files with 148 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/common/Modal.tsx
View File

@@ -30,7 +30,7 @@ const Modal = ({ children, width = '1/2', closeModal, title }:ModalProps) => {
return (
<div className='modal fixed top-0 left-0 bg-white/[.7] w-full h-screen z-50' onClick={closeOnBGClick}>
<div
className={` max-w-[340px] absolute top-1/4 left-0 right-0 ml-auto mr-auto w-${width}
className={`modal__content max-w-[340px] absolute top-1/4 left-0 right-0 ml-auto mr-auto w-${width}
lg:max-w-md bg-white shadow-md rounded-md p-5 border-t-[1px] border-gray-100 text-base`}>
{title && <h3 className=' font-semibold mb-3'>{title}</h3>}
<button

20
components/domains/DomainSettings.tsx
View File

@@ -5,7 +5,7 @@ import Modal from '../common/Modal';
import { useDeleteDomain, useUpdateDomain } from '../../services/domains';
type DomainSettingsProps = {
domain:Domain,
domain:Domain|false,
domains: Domain[],
closeModal: Function
}
@@ -24,15 +24,17 @@ const DomainSettings = ({ domain, domains, closeModal }: DomainSettingsProps) =>
const { mutate: updateMutate } = useUpdateDomain(() => closeModal(false));
const { mutate: deleteMutate } = useDeleteDomain(() => {
closeModal(false);
const fitleredDomains = domains.filter((d:Domain) => d.domain !== domain.domain);
if (fitleredDomains[0] && fitleredDomains[0].slug) {
const fitleredDomains = domain && domains.filter((d:Domain) => d.domain !== domain.domain);
if (fitleredDomains && fitleredDomains[0] && fitleredDomains[0].slug) {
router.push(`/domain/${fitleredDomains[0].slug}`);
}
});
useEffect(() => {
setDomainSettings({ notification_interval: domain.notification_interval, notification_emails: domain.notification_emails });
}, [domain.notification_interval, domain.notification_emails]);
if (domain) {
setDomainSettings({ notification_interval: domain.notification_interval, notification_emails: domain.notification_emails });
}
}, [domain]);
const updateNotiEmails = (event:React.FormEvent<HTMLInputElement>) => {
setDomainSettings({ ...domainSettings, notification_emails: event.currentTarget.value });
@@ -55,9 +57,9 @@ const DomainSettings = ({ domain, domains, closeModal }: DomainSettingsProps) =>
setTimeout(() => {
setSettingsError({ type: '', msg: '' });
}, 3000);
} else {
updateMutate({ domainSettings, domain });
}
} else if (domain) {
updateMutate({ domainSettings, domain });
}
};
return (
@@ -91,7 +93,7 @@ const DomainSettings = ({ domain, domains, closeModal }: DomainSettingsProps) =>
</button>
</div>
</Modal>
{showRemoveDomain && (
{showRemoveDomain && domain && (
<Modal closeModal={() => setShowRemoveDomain(false) } title={`Remove Domain ${domain.domain}`}>
<div className='text-sm'>
<p>Are you sure you want to remove this Domain? Removing this domain will remove all its keywords.</p>

7
components/keywords/KeywordsTable.tsx
View File

@@ -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 =
</div>
</Modal>
)}
{showAddModal && domain && (
<CSSTransition in={showAddModal} timeout={300} classNames="modal_anim" unmountOnExit mountOnEnter>
<AddKeywords
domain={domain.domain}
domain={domain?.domain || ''}
keywords={keywords}
closeModal={() => setShowAddModal(false)}
/>
)}
</CSSTransition>
{showTagManager && (
<KeywordTagManager
allTags={allDomainTags}

70
package-lock.json generated
View File

@@ -9,6 +9,7 @@
"version": "0.1.0",
"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",
@@ -31,6 +32,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",
@@ -1998,6 +2000,14 @@
"@types/react": "*"
}
},
"node_modules/@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==",
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@types/scheduler": {
"version": "0.16.2",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
@@ -3622,6 +3632,15 @@
"resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.14.tgz",
"integrity": "sha512-NMt+m9zFMPZe0JcY9gN224Qvk6qLIdqex29clBvc/y75ZBX9YA9wNK3frsYvu2DI1xcCIwxwnX+TlsJ2DSOADg=="
},
"node_modules/dom-helpers": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
"integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
"dependencies": {
"@babel/runtime": "^7.8.7",
"csstype": "^3.0.2"
}
},
"node_modules/dom-serializer": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@@ -8393,7 +8412,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,
"dependencies": {
"loose-envify": "^1.4.0",
"object-assign": "^4.1.1",
@@ -8508,8 +8526,7 @@
"node_modules/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=="
},
"node_modules/react-query": {
"version": "3.39.2",
@@ -8544,6 +8561,21 @@
"react": "^16.0.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/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==",
"dependencies": {
"@babel/runtime": "^7.5.5",
"dom-helpers": "^5.0.1",
"loose-envify": "^1.4.0",
"prop-types": "^15.6.2"
},
"peerDependencies": {
"react": ">=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",

4
package.json
View File

@@ -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",

19
pages/domain/[slug]/index.tsx
View File

@@ -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 = () => {
/>
</div>
</div>
{showAddDomain && <AddDomain closeModal={() => setShowAddDomain(false)} />}
{showDomainSettings && theDomains && activDomain && activDomain.domain
&& <DomainSettings
domain={activDomain}
<CSSTransition in={showAddDomain} timeout={300} classNames="modal_anim" unmountOnExit mountOnEnter>
<AddDomain closeModal={() => setShowAddDomain(false)} />
</CSSTransition>
<CSSTransition in={showDomainSettings} timeout={300} classNames="modal_anim" unmountOnExit mountOnEnter>
<DomainSettings
domain={showDomainSettings && theDomains && activDomain && activDomain.domain ? activDomain : false}
domains={theDomains}
closeModal={setShowDomainSettings}
/>
}
{showSettings && <Settings closeSettings={() => setShowSettings(false)} />}
</CSSTransition>
<CSSTransition in={showSettings} timeout={300} classNames="settings_anim" unmountOnExit mountOnEnter>
<Settings closeSettings={() => setShowSettings(false)} />
</CSSTransition>
</div>
);
};

52
styles/globals.css
View File

@@ -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;
}