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

fix popup hint

Browse Source
This commit is contained in:
Daria Golova
2022-06-23 18:52:19 +03:00
parent fe1105e9d6
commit 54ccd3ed9f
1 changed files with 11 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
import React, { useState} from 'react'; import React, { useState } from 'react';
import Sidebar from '../../partials/Sidebar'; import Sidebar from '../../partials/Sidebar';
import Header from '../../partials/Header'; import Header from '../../partials/Header';
import ProfileTable from '../../partials/digitalId/ProfileTable'; import ProfileTable from '../../partials/digitalId/ProfileTable';
@@ -16,7 +16,6 @@ function Profile () {
const [toggle, setToggle] = useState(true); const [toggle, setToggle] = useState(true);
const [addPanelOpen, setAddPanelOpen] = useState(false); const [addPanelOpen, setAddPanelOpen] = useState(false);
const [selectedItems, setSelectedItems] = useState([]); const [selectedItems, setSelectedItems] = useState([]);
const [hintOpen, setHintOpen] = useState(false);
const defaultValues = { const defaultValues = {
property: '', property: '',
@@ -25,13 +24,12 @@ function Profile () {
}; };
const initialPropertyValues = ['First name', 'Second name', 'Birthdate', 'Gender', 'Residence', 'Document type', 'Document ID', 'Issue date', 'Expiry date']; const initialPropertyValues = ['First name', 'Second name', 'Birthdate', 'Gender', 'Residence', 'Document type', 'Document ID', 'Issue date', 'Expiry date'];
const [propertyValues, setPropertyValues] = useState(initialPropertyValues); const [propertyValues, setPropertyValues] = useState([]);
const [currentValues, setCurrentValues] = useState(defaultValues); const [currentValues, setCurrentValues] = useState(defaultValues);
const openHint = () => { const openHint = () => {
if (!currentValues.property) { if (!currentValues.property) {
setPropertyValues(initialPropertyValues); setPropertyValues(initialPropertyValues);
setHintOpen(true);
} }
} }
@@ -44,7 +42,7 @@ function Profile () {
const closeHint = (element) => { const closeHint = (element) => {
changeCurrentValues(element, 'property'); changeCurrentValues(element, 'property');
setHintOpen(false); setPropertyValues([]);
} }
const handleSelectedItems = (selectedItems) => { const handleSelectedItems = (selectedItems) => {
@@ -74,7 +72,6 @@ function Profile () {
setAddPanelOpen(false); setAddPanelOpen(false);
setButtonPanelOpen(true); setButtonPanelOpen(true);
setCurrentValues(defaultValues); setCurrentValues(defaultValues);
setHintOpen(false);
} }
} }
@@ -97,13 +94,9 @@ function Profile () {
const handleInput = (text, field) => { const handleInput = (text, field) => {
changeCurrentValues(text, field); changeCurrentValues(text, field);
setPropertyValues(initialPropertyValues); setPropertyValues(initialPropertyValues);
setHintOpen(true);
if (text) { if (text) {
let reg = new RegExp(`^${text}`, 'img'); let reg = new RegExp(`^${text}`, 'img');
setPropertyValues((prevState) => prevState.filter((element) => element.match(reg))); setPropertyValues((prevState) => prevState.filter((element) => element.match(reg)));
if (propertyValues.length === 0) {
setHintOpen(false);
}
} }
}; };
@@ -300,15 +293,16 @@ function Profile () {
<div> <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'
id="property" id="property"
className="form-input w-full" className="form-input w-full"
type="text" type="text"
required required
onClick={openHint}
onInput={(e) => handleInput(e.target.value, 'property')} onInput={(e) => handleInput(e.target.value, 'property')}
value={currentValues.property} value={currentValues.property}
onClick={openHint}
/> />
<div className={`flex flex-col gap-y-2 py-2 pl-2 border border-t-0 border-slate-200 rounded ${hintOpen || 'hidden'}`}> <div className={`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 key={index} onClick={() => closeHint(element)}>{element}</li> <li key={index} onClick={() => closeHint(element)}>{element}</li>
@@ -319,11 +313,12 @@ function Profile () {
<div> <div>
<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'
id="value" id="value"
className="form-input w-full" className="form-input w-full"
type="text" type="text"
required required
onClick={() => setHintOpen(false)} onClick={() => setPropertyValues([])}
onChange={(e) => changeCurrentValues(e.target.value, 'value')} onChange={(e) => changeCurrentValues(e.target.value, 'value')}
value={currentValues.value} value={currentValues.value}
/> />
@@ -331,11 +326,12 @@ function Profile () {
<div> <div>
<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'
id="seed" id="seed"
className="form-input w-full" className="form-input w-full"
type="text" type="text"
required required
onClick={() => setHintOpen(false)} onClick={() => setPropertyValues([])}
onChange={(e) => changeCurrentValues(e.target.value, 'seed')} onChange={(e) => changeCurrentValues(e.target.value, 'seed')}
value={currentValues.seed} value={currentValues.seed}
/> />