The beneath is the code in react.js the place I’ve applied the function of double faucet. When consumer double faucets on the talent, it removes the tapped talent from expertise record and provides it to the groups record and vice-versa.
It’s engaged on each browser in android however it isn’t working in Duckduckgo browser and courageous browser in IOS.
NOTE that it’s working in each different browsers in IOS.
“”The beneath code has the features and variables””
const [team, setTeam] = useState([]);
const [skills, setSkills] = useState([
{ name: 'Acupuncturist' },
{ name: 'Alexander Technique' },
{ name: 'AromaDome Therapy' },
{ name: 'Aromatherapist' },
{ name: 'Body Code' },
{ name: 'Pro Skill' }
]);
// for double faucet
const [lastTapTime, setLastTapTime] = useState(0);
const [lastTappedIndex, setLastTappedIndex] = useState(-1);
const handleSkillTouch = (index, isTeamSkill) => {
const now = new Date().getTime();
const timeSinceLastTap = now - lastTapTime;
if (timeSinceLastTap < 300 && index === lastTappedIndex) {
// Double faucet detected
if (isTeamSkill) {
const selectedSkill = crew[index];
const newTeam = crew.filter((_, i) => i !== index);
setTeam(newTeam);
setSkills([...skills, selectedSkill]);
} else {
const selectedSkill = expertise[index];
const newSkills = expertise.filter((_, i) => i !== index);
setSkills(newSkills);
setTeam([...team, selectedSkill]);
}
}
setLastTapTime(now);
setLastTappedIndex(index);
};
“”The beneath is the returned code””
<div className="to_flex">
<div className="button_list_scrollable " fashion={{ backgroundColor: '#f6faf3' }}>
{expertise.map((talent, index) => (
<div className="w-embed" key={index} onTouchStart={() => handleSkillTouch(index, false)}>
<a className="button small-tag tag-shape">
<i className="fas fa-circle"></i> {talent.identify}
</a>
</div>
))}
</div>
<div className="button_list_scrollable" fashion={{ backgroundColor: '#f6faf3', border: crew.size > 0 ? '#8a68a3 2px strong' : '' }}>
<div className="drag-drop_text my-2" fashion={{ show: 'block' }}>
Double faucet expertise so as to add
</div>
{crew.map((talent, index) => (
<div className="w-embed" key={index} onTouchStart={() => handleSkillTouch(index, true)}>
<a className="button small-tag tag-shape">
<i className="fas fa-circle"></i> {talent.identify}
</a>
</div>
))}
</div>
</div>
I attempted one other double faucet codes however they’re additionally not working.