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

added stacking context for the hint

Browse Source
This commit is contained in:
Daria Golova
2022-07-11 15:08:12 +03:00
parent e837f7cc89
commit 47dfcf347c
1 changed files with 60 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/pages/digitalId/ProfileId.jsx
View File

@@ -10,10 +10,10 @@ import Image from '../../images/transactions-image-04.svg';
const defaultValues = { const defaultValues = {
label: '', label: '',
value: '', value: '',
seed: parseInt(Math.floor(Math.random() * 90000000000000000000), 10) seed: String(Math.floor(Math.random() * 90000000000000000000), 10)
}; };
const initialPropertyValues = ['First name', 'Second name', 'Birthdate', 'Gender', 'National doctype', 'National doc id', 'National doc issue date', 'National doc expiry date']; const initialPropertyValues = ['First name', 'Second name', 'Birthdate', 'Gender', 'National doctype', 'National doc ID', 'National doc issue date', 'National doc expiry date'];
const Profile = observer (() => { const Profile = observer (() => {
const [sidebarOpen, setSidebarOpen] = useState(false); const [sidebarOpen, setSidebarOpen] = useState(false);
@@ -52,18 +52,24 @@ const Profile = observer (() => {
) )
}; };
const closeHint = (element) => { const selectHint = (element) => {
changeAddedValues(element, 'label'); changeAddedValues(element, 'label');
setPropertyValues([]); setPropertyValues([]);
} }
const closeHint = (eventTarget) => {
if (!eventTarget || eventTarget.tabIndex !== -1) {
setPropertyValues([]);
}
};
const handleSelectedItems = (selectedItems) => { const handleSelectedItems = (selectedItems) => {
setSelectedItems([...selectedItems]); setSelectedItems([...selectedItems]);
setUpdatedValues(userDataStore.decryptedData.filter(({ key }) => selectedItems.includes(key)) setUpdatedValues(userDataStore.decryptedData.filter(({ key }) => selectedItems.includes(key))
.map(elem => ( .map(elem => (
(!elem.seed) ? { (!elem.seed) ? {
...elem, ...elem,
seed: parseInt(Math.floor(Math.random() * 90000000000000000000), 10) seed: String(Math.floor(Math.random() * 90000000000000000000), 10)
}: elem))); }: elem)));
if (selectedItems.length > 0) { if (selectedItems.length > 0) {
setButtonPanelOpen(false); setButtonPanelOpen(false);
@@ -88,7 +94,7 @@ const Profile = observer (() => {
const sendAddedData = () => { const sendAddedData = () => {
const checkingAddedData = !userDataStore.decryptedData const checkingAddedData = !userDataStore.decryptedData
some((element) => element.label === addedValues.label) && (addedValues.seed.length === 20); .some((element) => element.label === addedValues.label) && (addedValues.seed.length === 20);
if (checkingAddedData) { if (checkingAddedData) {
setAddPanelOpen(false); setAddPanelOpen(false);
setButtonPanelOpen(true); setButtonPanelOpen(true);
@@ -226,9 +232,8 @@ const Profile = observer (() => {
</div> </div>
<div className="ml-2.5"> <div className="ml-2.5">
{/* Add panel */} {/* Add panel */}
<div className={`${!addPanelOpen && 'hidden'} bg-white p-5 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-11`}> <div className={`${!addPanelOpen && 'hidden'} relative flex flex-col bg-white p-5 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-11`}>
<div className="flex flex-col gap-y-3"> <div className='relative z-20'>
<div>
<label className="block text-sm font-medium mb-1" htmlFor="mandatory">Property <span className="text-rose-500">*</span></label> <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Property <span className="text-rose-500">*</span></label>
<input <input
autoComplete='off' autoComplete='off'
@@ -239,17 +244,17 @@ const Profile = observer (() => {
onInput={(e) => handleInput(e.target.value, 'label')} onInput={(e) => handleInput(e.target.value, 'label')}
value={addedValues.label} value={addedValues.label}
onClick={openHint} onClick={openHint}
onBlur={() => setPropertyValues([])} onBlur={(e) => closeHint(e.relatedTarget)}
/> />
<div className={`flex flex-col gap-y-2 py-2 pl-2 border border-t-0 border-slate-200 rounded ${(propertyValues.length > 0) || 'hidden'}`}> <div tabIndex='-1' className={`absolute w-full box-border bg-white flex flex-col gap-y-2 py-2 pl-2 border border-t-0 border-slate-200 rounded ${(propertyValues.length > 0) || 'hidden'}`}>
<ul> <ul>
{propertyValues.map((element, index) => ( {propertyValues.map((element, index) => (
<li className='hover:text-indigo-600 cursor-pointer' key={index} onClick={() => closeHint(element)}>{element}</li> <li className='hover:text-indigo-600 cursor-pointer' key={index} onClick={() => selectHint(element)}>{element}</li>
))} ))}
</ul> </ul>
</div> </div>
</div> </div>
<div> <div className='my-3 z-10'>
<label className="block text-sm font-medium mb-1" htmlFor="mandatory">Value <span className="text-rose-500">*</span></label> <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Value <span className="text-rose-500">*</span></label>
<input <input
autoComplete='off' autoComplete='off'
@@ -262,7 +267,7 @@ const Profile = observer (() => {
value={addedValues.value} value={addedValues.value}
/> />
</div> </div>
<div> <div className='z-10'>
<label className="block text-sm font-medium mb-1" htmlFor="mandatory">Seed <span className="text-rose-500">*</span></label> <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Seed <span className="text-rose-500">*</span></label>
<input <input
autoComplete='off' autoComplete='off'
@@ -275,8 +280,7 @@ const Profile = observer (() => {
value={addedValues.seed} value={addedValues.seed}
/> />
</div> </div>
</div> <div className="flex flex-row z-10 justify-between pt-[18px] pb-[23px] items-center border-b border-slate-200">
<div className="flex flex-row justify-between pt-[16px] pb-[23px] items-center border-b border-slate-200">
<span className="block text-sm font-medium">Store data on blockchain</span> <span className="block text-sm font-medium">Store data on blockchain</span>
<div className="flex items-center"> <div className="flex items-center">
<div className="form-switch"> <div className="form-switch">
@@ -288,7 +292,7 @@ const Profile = observer (() => {
</div> </div>
</div> </div>
{/* Buttons */} {/* Buttons */}
<div className="flex flex-row justify-end gap-x-2 pt-[18px] pb-[14px] items-end"> <div className="flex flex-row z-10 justify-end gap-x-2 pt-[18px] pb-[14px] items-end">
<button <button
className="btn-sm bg-white border-slate-200 hover:bg-slate-50 text-slate-600" className="btn-sm bg-white border-slate-200 hover:bg-slate-50 text-slate-600"
onClick={cancelAddPanel} onClick={cancelAddPanel}