admin/BlockchainUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add prettier

Browse Source
This commit is contained in:
kandrusyak
2022-12-01 13:50:14 +03:00
parent 8e4b6c832e
commit a8bb75b2f5
55 changed files with 2687 additions and 1666 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/DropdownProfile.jsx
View File

@@ -1,15 +1,12 @@
import React, { useState, useRef, useEffect } from 'react';
import {observer} from "mobx-react-lite";
import { observer } from 'mobx-react-lite';
import { Link } from 'react-router-dom';
import Transition from '../utils/Transition';
import {store} from "../store/store";
import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
import { store } from '../store/store';
import { generateSvgAvatar } from '../images/GenerateOnboardingSvg/GenerateSvg';
import UserAvatar from '../images/user-avatar-32.png';
const DropdownProfile = observer(({
align
})=>{
const DropdownProfile = observer(({ align }) => {
const [dropdownOpen, setDropdownOpen] = useState(false);
const trigger = useRef(null);
@@ -19,7 +16,12 @@ import UserAvatar from '../images/user-avatar-32.png';
useEffect(() => {
const clickHandler = ({ target }) => {
if (!dropdown.current) return;
if (!dropdownOpen || dropdown.current.contains(target) || trigger.current.contains(target)) return;
if (
!dropdownOpen ||
dropdown.current.contains(target) ||
trigger.current.contains(target)
)
return;
setDropdownOpen(false);
};
document.addEventListener('click', clickHandler);
@@ -37,9 +39,9 @@ import UserAvatar from '../images/user-avatar-32.png';
});
const logOut = () => {
sessionStorage.removeItem('passPhrase')
store.fetchPassPhrase()
}
sessionStorage.removeItem('passPhrase');
store.fetchPassPhrase();
};
return (
<div className="relative inline-flex">
@@ -50,17 +52,30 @@ import UserAvatar from '../images/user-avatar-32.png';
onClick={() => setDropdownOpen(!dropdownOpen)}
aria-expanded={dropdownOpen}
>
<img className="w-8 h-8 rounded-full" src={generateSvgAvatar(store.pubKey) || UserAvatar} width="32" height="32" alt="User" />
<img
className="w-8 h-8 rounded-full"
src={generateSvgAvatar(store.pubKey) || UserAvatar}
width="32"
height="32"
alt="User"
/>
<div className="flex items-center truncate">
<span className="truncate ml-2 text-sm font-medium group-hover:text-slate-800">{store.accountName}</span>
<svg className="w-3 h-3 shrink-0 ml-1 fill-current text-slate-400" viewBox="0 0 12 12">
<span className="truncate ml-2 text-sm font-medium group-hover:text-slate-800">
{store.accountName}
</span>
<svg
className="w-3 h-3 shrink-0 ml-1 fill-current text-slate-400"
viewBox="0 0 12 12"
>
<path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
</svg>
</div>
</button>
<Transition
className={`origin-top-right z-10 absolute top-full min-w-44 bg-white border border-slate-200 py-1.5 rounded shadow-lg overflow-hidden mt-1 ${align === 'right' ? 'right-0' : 'left-0'}`}
className={`origin-top-right z-10 absolute top-full min-w-44 bg-white border border-slate-200 py-1.5 rounded shadow-lg overflow-hidden mt-1 ${
align === 'right' ? 'right-0' : 'left-0'
}`}
show={dropdownOpen}
enter="transition ease-out duration-200 transform"
enterStart="opacity-0 -translate-y-2"
@@ -75,7 +90,9 @@ import UserAvatar from '../images/user-avatar-32.png';
onBlur={() => setDropdownOpen(false)}
>
<div className="pt-0.5 pb-2 px-3 mb-1 border-b border-slate-200">
<div className="font-medium text-slate-800">{store.accountName}</div>
<div className="font-medium text-slate-800">
{store.accountName}
</div>
</div>
<ul>
<li>
@@ -99,7 +116,7 @@ import UserAvatar from '../images/user-avatar-32.png';
</div>
</Transition>
</div>
)
})
);
});
export default DropdownProfile;

18
src/components/DropdownTransaction.jsx
View File

@@ -1,5 +1,5 @@
import React, { useState, useRef, useEffect } from "react";
import Transition from "../utils/Transition";
import React, { useState, useRef, useEffect } from 'react';
import Transition from '../utils/Transition';
function DropdownTransaction({ align, value, onChange }) {
const [dropdownOpen, setDropdownOpen] = useState(false);
@@ -24,8 +24,8 @@ function DropdownTransaction({ align, value, onChange }) {
return;
setDropdownOpen(false);
};
document.addEventListener("click", clickHandler);
return () => document.removeEventListener("click", clickHandler);
document.addEventListener('click', clickHandler);
return () => document.removeEventListener('click', clickHandler);
});
// close if the esc key is pressed
@@ -34,8 +34,8 @@ function DropdownTransaction({ align, value, onChange }) {
if (!dropdownOpen || keyCode !== 27) return;
setDropdownOpen(false);
};
document.addEventListener("keydown", keyHandler);
return () => document.removeEventListener("keydown", keyHandler);
document.addEventListener('keydown', keyHandler);
return () => document.removeEventListener('keydown', keyHandler);
});
return (
@@ -62,7 +62,7 @@ function DropdownTransaction({ align, value, onChange }) {
<Transition
className={`origin-top-right z-10 absolute top-full min-w-44 bg-white border border-slate-200 py-1.5 rounded shadow-lg overflow-hidden mt-1 ${
align === "right" ? "right-0" : "left-0"
align === 'right' ? 'right-0' : 'left-0'
}`}
show={dropdownOpen}
enter="transition ease-out duration-200 transform"
@@ -81,7 +81,7 @@ function DropdownTransaction({ align, value, onChange }) {
<li>
<span
className="font-medium text-sm text-slate-600 hover:text-slate-800 flex items-center py-1 px-3 cursor-pointer"
onClick={() => changeValue("Voiting")}
onClick={() => changeValue('Voiting')}
>
Voiting
</span>
@@ -89,7 +89,7 @@ function DropdownTransaction({ align, value, onChange }) {
<li>
<span
className="font-medium text-sm text-slate-600 hover:text-slate-800 flex items-center py-1 px-3 cursor-pointer"
onClick={() => changeValue("Unvoiting")}
onClick={() => changeValue('Unvoiting')}
>
Unvoiting
</span>

2
src/components/Filters.js
View File

@@ -1,4 +1,4 @@
import React from "react";
import React from 'react';
export const Filters = ({ value, onChange, values = [] }) => {
return (

26
src/components/LoadingOverlay.jsx
View File

@@ -1,15 +1,17 @@
import ReactDOM from 'react-dom';
import React from 'react';
import {ThreeCircles} from 'react-loader-spinner';
import { ThreeCircles } from 'react-loader-spinner';
export const LoadingOverlay = () => ReactDOM.createPortal((
<div className='absolute left-0 top-0 h-screen w-screen z-50 loading-overlay'>
<ThreeCircles
height="100"
width="100"
color="#6366f1"
visible={true}
ariaLabel="three-circles-rotating"
/>
</div>
), document.body)
export const LoadingOverlay = () =>
ReactDOM.createPortal(
<div className="absolute left-0 top-0 h-screen w-screen z-50 loading-overlay">
<ThreeCircles
height="100"
width="100"
color="#6366f1"
visible={true}
ariaLabel="three-circles-rotating"
/>
</div>,
document.body
);

41
src/components/PaginationClassic.jsx
View File

@@ -1,36 +1,49 @@
import React from 'react';
import cn from 'classnames'
import cn from 'classnames';
function PaginationClassic({count, limit, offset, onNextPage, onPrevPage}) {
function PaginationClassic({ count, limit, offset, onNextPage, onPrevPage }) {
return (
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
<nav className="mb-4 sm:mb-0 sm:order-1" role="navigation" aria-label="Navigation">
<nav
className="mb-4 sm:mb-0 sm:order-1"
role="navigation"
aria-label="Navigation"
>
<ul className="flex justify-center">
<li className="ml-3 first:ml-0">
<button
className={
cn(
"btn bg-white border-slate-200 text-indigo-500",
{'cursor-not-allowed text-slate-300': offset === 0},
{'hover:border-slate-300' : offset !== 0}
className={cn(
'btn bg-white border-slate-200 text-indigo-500',
{ 'cursor-not-allowed text-slate-300': offset === 0 },
{ 'hover:border-slate-300': offset !== 0 }
)}
disabled={offset === 0}
onClick={onPrevPage}>&lt;- Previous</button>
onClick={onPrevPage}
>
&lt;- Previous
</button>
</li>
<li className="ml-3 first:ml-0">
<button
className={cn(
"btn bg-white border-slate-200 text-indigo-500",
{'cursor-not-allowed text-slate-300': offset + limit >= count},
{'hover:border-slate-300' : offset + limit < count}
'btn bg-white border-slate-200 text-indigo-500',
{
'cursor-not-allowed text-slate-300': offset + limit >= count,
},
{ 'hover:border-slate-300': offset + limit < count }
)}
disabled={offset + limit >= count}
onClick={onNextPage}>Next -&gt;</button>
onClick={onNextPage}
>
Next -&gt;
</button>
</li>
</ul>
</nav>
<div className="text-sm text-slate-500 text-center sm:text-left">
Showing <span className="font-medium text-slate-600">{offset + 1}</span> to <span className="font-medium text-slate-600">{offset+limit}</span> of <span className="font-medium text-slate-600">{count}</span> results
Showing <span className="font-medium text-slate-600">{offset + 1}</span>{' '}
to <span className="font-medium text-slate-600">{offset + limit}</span>{' '}
of <span className="font-medium text-slate-600">{count}</span> results
</div>
</div>
);