React-picky’s keepOpen :false property is not working

I am using react-picky package with react v18.3.1,

My code is

<Picky 
  id="filter_flag" 
  placeholder="Select..." 
  value={this.state.flag} 
  options={this.state.flagList} 
  onChange={(selectedOption) => this.handleChange(selectedOption, "flag")} 
  valueKey="id" 
  labelKey="name" 
  keepOpen={false} 
  multiple={false} 
  includeFilter={true} 
/>

Here keepOpen property is not working, this filter is not opening after using this property, if I remove this filter will open but it will not close automatically.

What should be the solution for it, is there any alternative of it?

Easepick – dynamically change minDate

I have 2 easepick calendars and want to dynamically change minDate – if first calendar changed, test if date is bigger than checkout date and if so change minDate for checkout calendar. But when I call pickerOut.renderAll(); LockPlugin is ignored and I can select all the dates. Any ideas what I did wrong? Thank you.

    const picker = new easepick.create({
        element: "#checkin",
        format: "DD.MM.YYYY",
        grid: 2,
        calendars: 2,
        LockPlugin: {
            minDate: new Date(),
        },
        setup(picker) {
            picker.on('select', (e) => {
                if (pickerOut.getDate() <= e.detail.date) {
                    const newDate = new Date(e.detail.date);
                    newDate.setDate(e.detail.date.getDate() + 1);
                    pickerOut.setDate(newDate);
                    pickerOut.PluginManager.getInstance('LockPlugin').options.minDate = newDate;
                    pickerOut.renderAll();
                }
            });
        },
        plugins: ["LockPlugin"]
    });

    const pickerOut = new easepick.create({
        element: "#checkout",
        format: "DD.MM.YYYY",
        grid: 2,
        calendars: 2,
        lang: pickerLng,
        LockPlugin: {
            minDate: new Date(),
        },
        plugins: ["LockPlugin"],
    });

format each date in an array of dates

I have the following array of dates. How can I format each date in this array to ‘mm/dd/yyyy’?

I am attempting something like this which isn’t formatting correctly.
const formattedDates = this.displayEffectiveDate.map(date => new Date(date));

[ "2024-02-29T00:00:00", "2024-03-31T00:00:00" ]

Writing Cyrillic characters to a dbf file, react.js

Using the DBF library, I am trying to create a converter from a CSV file to DBF. The conversion should take place on the browser side. I have a problem – the Cyrillic characters are not displayed correctly in the created dbf file. I tried many options, but nothing worked.
csv file can have different encodings

  const [csvData, setCsvData] = useState(null);
  const handleFileUpload = (event) => {
    const file = event.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        const text = e.target.result;
        const result = parse(text, { header: true });
        setCsvData(result.data);
      };
      reader.readAsText(file);
    }
  };
  const convertToDBF = () => {
    if (csvData) {
      try {
        const fields = Object.keys(csvData[0]).map(key => ({
          name: key,
          type: 'C',
          size: 10
        }));  
        const records = csvData.map(row => {
          const record = {};
          Object.keys(row).forEach(key => {
            record[key] = row[key] ? row[key].toString() : ''; 
          });  
          for (const key in record) {
            if (typeof record[key] === 'string') {
              record[key] = iconv.encode(record[key], 'UTF-8'); 
            }     }
          return record;
        });
        const dbfBuffer = structure(records, fields);
        const blob = new Blob([dbfBuffer], { type: 'application/octet-stream' });
        saveAs(blob, 'output.dbf');
      } catch (error) {
        console.error('Error during DBF conversion:', error);
      }
    }
  };

  return (
    <div>
      
      <input type="file" accept=".csv" onChange={handleFileUpload} />
      <button onClick={convertToDBF} disabled={!csvData}>to DBF</button>
    </div>
  );
};

export default App;```



I tried to change the encodings. I expect a readable display of Cyrillic characters

Calculate the time the user used offline – React JS

I want to calculate the time a user goes offline.

Am creating a mining app and I want the mining to continue even if the user goes offline, am saving the date to the localStorage every second to be able to calculate how many seconds has elapsed when user is offline so I can calculate the amount the user ought to have accumulated if the user were to be online

iOS numeric keyboard doesn’t have a period and the decimal inputmode is not considering properly the comma

I’m having a problem on iOS devices when filling a <input type="number" inputmode="decimal">. The iOS keyboard for these inputs shows numbers and a comma, only.

iOS keyboard

Both comma and period work well on Android or any desktop, but, on iOS mobile devices, the comma is getting me in troubles because it stops the JavaScript function that calculates the area:

const inputsDimensions = document.querySelectorAll('.form__input--dimensions');

function calculateSupportArea() {
  const height = inputsDimensions[0].value;
  const width = inputsDimensions[1].value;

  if (height && width) {
    const roundedArea = parseFloat(height) * parseFloat(width);
    result.innerHTML = Number(roundedArea).toFixed(2);
  } else {
    result.innerHTML = '0.00';
  }
}

However, if I type a decimal number using a dot elsewhere on the iOS mobile device and copy it to the input field, it works fine… but of course no one will do that.

copied value and succeed area calculation

I tried to replace the comma for a period in multiple ways, but nothing seems to solve the issue:

for (const input of inputsDimensions) {
  input.addEventListener('input', (event) => {
    event.target.value = event.target.value.replace(',', '.');
  });
}

Phaser 3, pause on minimize

I am creating an animation with phaser which contains a timer.

The issue occurs when I Alt-Tab or minimize the page as the timer keeps on running but the animation stops, so the GameObjects are not in sync with the timers.

I’ve looked through the config class of the phaser object and couldn’t find any parameter related to this.

I also tried using this.game.loop.wake() when changing visibility but it doesn’t seem to be working also (it still stops the animation while I’m not on the page)

create()
{
   //[...]
   this.setupVisibilityChangeListener();
}

setupVisibilityChangeListener() {

  document.addEventListener('visibilitychange', () => {
    this.game.loop.wake();
  });
}

AjaxQ jQuery plugin always undefined

I’m trying to use the AjaxQ plugin with jQuery to queue some ajax requests but seems to be just undefined whatever I try.

Getting the following error:

TypeError: Cannot read properties of undefined (reading 'isRunning')

jsfiddle Demo

The code is super simple, the AjaxQ library is included, and I’m just doing this console log as an initial step to see if the library is working properly, before even writing any other code:

$( document ).ready(function() {
    console.log($.ajaxq.isRunning('Test'));
});

What am I missing here?

Render image while keeping ratio in Echarts label

I have a bar chart that displays operators statistics, and I want to use the logo of each operator as a label. Currently, I have managed to make it display the image, but only with a fixed ratio.

Examples:
With no height and no width
With no height and no width

With width: 110, height: 20,
With width: 110, height: 20

With only height defined (20)
With only height defined (20)

 var operatorsChart = echarts.init(document.getElementById('chart-operators'));
    operatorsChart.setOption({
        title: { text: "{{operator}}" },
        tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'shadow' },
            formatter: function(params) {
                return commonTooltipFormatter(params);
            }
        },
        yAxis: {
            ...commonXAxisOptions,
            type: 'category',
            inverse: true,
            axisLabel: {
                rotate: 0,
                formatter: function(value) {
                    const normalizedKey = normalizeKey(value);
                    if (operatorImages[value]) {
                        return `{${normalizedKey}|}`;
                    } else {
                        return value;
                    }
                },
                rich: Object.assign({}, ...Object.keys(operatorImages).map(operator => {
                    const normalizedKey =  normalizeKey(operator);
                    return {
                        [normalizedKey]: {
                            width: 110,
                            height: 20,
                            backgroundColor: {
                                image: encodeURI(staticLink + operatorImages[operator])
                            }
                        }
                    };
                }))
            },
            data: dataToUse.operators[viewMode].map(item => item.operator)
        },
        xAxis: { type: 'value' },
        grid: hGridConfig,
        series: createSeries(viewMode === 'km' ? convertToKilometers(dataToUse.operators[viewMode]) : dataToUse.operators[viewMode], getColor(tripType))
    });

I can fix the height and width, but with my images having different ratios, the rendering is bad.
I can also remove the heigth and width, but there the sizes are wildly different.

2D Canvas | Smooth camera without jitter

In my demo, you can see that the player’s camera catches up with the player’s position with a slight delay. It follows him until the player finally stops, gradually reducing the distance.

Unfortunately, I noticed that using this camera causes the pixels to be displayed inaccurately and either blur or wobble back and forth. This is especially noticeable on larger screens if you minimize the screen height.

If you simply return the target position within handleCamera, the functionality of the camera disappears, of course, but this solves the problem.

I am looking for a solution to keep my camera, but to remove the inaccurate pixels. I have already tried to include a certain tolerance, but this worked rather poorly. Any ideas, tips or experience as to why this phenomenon occurs?

const game = document.querySelector('#game');
const context = game.getContext('2d');

const background = new Image();
background.src = 'https://i.imgur.com/Ti1uecQ.png';

const player = {
    down: new Image(),
    up: new Image(),
    left: new Image(),
    right: new Image(),
    currentDirection: 'down',
    frame: 0,
    maxFrames: 4,
    idle: true,
};

player.down.src = 'https://i.imgur.com/cx6ag4V.png';
player.up.src = 'https://i.imgur.com/oZNeLGC.png';
player.left.src = 'https://i.imgur.com/yU2GBiF.png';
player.right.src = 'https://i.imgur.com/F69aMwq.png';

const backgroundHeight = 480;
const backgroundWidth = 840;
const playerHeight = 16;
const playerWidth = 12;
const initialGameHeight = playerHeight * 10;
const fps = 60;
const speed = 64;
const dodgeSpeed = speed * 2;
const cameraSpeed = speed / 8;
const step = 1 / fps;
const keymap = [];
const keyAssignments = {
    up: ['ArrowUp', 'w'],
    left: ['ArrowLeft', 'a'],
    right: ['ArrowRight', 'd'],
    down: ['ArrowDown', 's'],
    dodge: [' ']
};
const dodgeSteps = 20;
const dodgeDelaySteps = 40;
let dodgeStep = 0;
let dodgeDelayStep = 0;
let x = backgroundWidth / 2; // Player Starting X
let y = backgroundHeight / 2; // Player Starting Y
let cameraX = x;
let cameraY = y;
let previousMs = 0;
let scale = 1;
let keyListenerPaused = false;
let lastTempChange = null;

const handleScreens = () => {
    game.height = Math.round(window.innerHeight / 2) * 2;
    game.width = Math.round(window.innerWidth / 2) * 2;

    scale = Math.round(window.innerHeight / initialGameHeight);
    document.documentElement.style.setProperty('--scale', scale);
};

const handleKey = (key) => {
    if (keyListenerPaused) return;
}

const handleCamera = (currentValue, destinationValue, delta) => {
    // return destinationValue;

    let currentCameraSpeed = cameraSpeed * delta;

    if (Math.abs(currentValue - destinationValue) < currentCameraSpeed) {
        return destinationValue;
    }

    return +parseFloat(currentValue * (1 - currentCameraSpeed) + destinationValue * currentCameraSpeed).toPrecision(15);
};

const handlePlayerMovement = (delta) => {
    let currentSpeed = speed;
    let tempChange = { x: 0, y: 0 };
    let dodgePressed = false;

    if (!keyListenerPaused && dodgeStep === 0) {
        player.idle = true;

        keymap.forEach(direction => {
            if (keyAssignments.right.includes(direction)) {
                tempChange.x = 1;
                player.currentDirection = 'right';
                player.idle = false;
            }

            if (keyAssignments.left.includes(direction)) {
                tempChange.x = -1;
                player.currentDirection = 'left';
                player.idle = false;
            }

            if (keyAssignments.up.includes(direction)) {
                tempChange.y = -1;
                player.currentDirection = 'up';
                player.idle = false;
            }

            if (keyAssignments.down.includes(direction)) {
                tempChange.y = 1;
                player.currentDirection = 'down';
                player.idle = false;
            }

            if (keyAssignments.dodge.includes(direction)) {
                dodgePressed = true;
            }
        });
    }

    if (dodgeStep > 0) {
        if (dodgeStep < dodgeSteps * delta * 5) {
            dodgeStep += delta;
            currentSpeed = dodgeSpeed;
            tempChange = lastTempChange;
            dodgeDelayStep = 0;
        } else {
            dodgeStep = 0;
            dodgeDelayStep += delta;
        }
    } else {
        if (dodgePressed && dodgeDelayStep === 0) {
            if (tempChange.x !== 0 || tempChange.y !== 0) {
                dodgeStep += delta;
                currentSpeed = dodgeSpeed;
                lastTempChange = tempChange;
                dodgeDelayStep = 0;
            }

            dodgeDelayStep+=delta;
        } else {
            if (dodgeDelayStep > 0) {
                if (dodgeDelayStep < dodgeDelaySteps * delta * 5) {
                    dodgeDelayStep += delta;
                } else {
                    dodgeDelayStep = 0;
                }
            }
        }
    }

    let angle = Math.atan2(tempChange.y, tempChange.x);

    if (tempChange.x !== 0) {
        x += Math.cos(angle) * currentSpeed * delta;
    }

    if (tempChange.y !== 0) {
        y += Math.sin(angle) * currentSpeed * delta;
    }

    x = +parseFloat(x).toPrecision(15);
    y = +parseFloat(y).toPrecision(15);

    cameraX = handleCamera(cameraX, x, delta);
    cameraY = handleCamera(cameraY, y, delta);
};

let savedDelta = 0;
const draw = (delta) => {
    context.imageSmoothingEnabled = false;
    context.clearRect(0, 0, game.width, game.height);
    context.save();
    context.scale(scale, scale);
    context.translate(-cameraX - (playerWidth / 2) + (game.width / 2 / scale), -cameraY - (playerHeight / 2) + (game.height / 2 / scale));
    context.drawImage(background, 0, 0, backgroundWidth, backgroundHeight);
    context.drawImage(player[player.currentDirection], playerWidth * player.frame, 0, playerWidth, playerHeight, x, y, playerWidth, playerHeight);
    context.restore();

    if (player.idle) {
        player.frame = 0;
        return;
    }

    if ((delta + savedDelta) * 1000 >= fps * 2) {
        player.frame++;
        savedDelta = 0;

        if (player.frame === player.maxFrames) {
            player.frame = 0;
        }
    }

    savedDelta += delta;
};

const main = (timestampMs) => {
    if (previousMs === 0) {
        previousMs = timestampMs;
    }

    const delta = +parseFloat((timestampMs - previousMs) / 1000).toPrecision(15);

    handlePlayerMovement(delta);
    draw(delta);

    previousMs = timestampMs;

    requestAnimationFrame(main);
};

window.addEventListener('keydown', event => {
    if (event.metaKey) {
        keymap.splice(0, keymap.length);
        return;
    }

    let index = keymap.indexOf(event.key);

    if (index > -1) {
        keymap.splice(index, 1);
    }

    keymap.push(event.key);
    handleKey(event.key);
});

window.addEventListener('keyup', event => {
    let index = keymap.indexOf(event.key);

    if (index > -1) {
        keymap.splice(index, 1);
    }
});

window.addEventListener("blur", _ => {
    keymap.splice(0, keymap.length);
});

window.addEventListener('resize', () => handleScreens());
handleScreens();

requestAnimationFrame(main);
* {
    margin: 0;
    padding: 0;
}

body {
    overflow: hidden;
    image-rendering: pixelated;
    height: 100vh;
}
<canvas id="game"></canvas>

Base64 image in new tab wont render unless refreshed

I’m trying to render an image from my API to a new tab. I do this by getting the image in Base64 encoding, then using the “data:image/…” method. When I press a link to any image a blank window opens. But once I reload the tab the image renders properly. I want the image to load as soon as I open the new tab.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

interface Note {
  id: string,
  fileName: string,
  file: string // Base64
}

interface Props {}

const Notes = (props: Props) => {
  const [notes, setNotes] = useState<Note[]>([]);

  useEffect(() => {
    const fetchNotes = async () => {
      try {
        const res = await axios.get<Note[]>('http://localhost:8080/notes');
        setNotes(res.data);
        console.log(res.data);
      } catch (error) {
        console.error('Error:', error);
      }
    };
    fetchNotes();
  }, []);


  return (
    <div>
      <h1>Notes</h1>
      {notes.map((note,index) => (
        <div key={index}>
          <a href={`data:image/png;base64,${note.file}`} target='_blank'>
          {note.fileName}
          </a>
        </div>
      ))}
    </div>
  );
};

export default Notes;

How to project a 3D cuboid onto a 2D camera image using SVG?

I’m working on a project where I need to render a 3D cuboid onto a 2D camera image using SVG. The image should be displayed with a width of 600px, maintaining its aspect ratio. Here are the details of my cuboid and camera calibration:

const cuboidData = {
    "id": "c90193ab-1812-4b52-a853-030d44a901fd",
    "objType": "3D_BOX",
    "viewIndex": 0,
    "center3D": { "x": 23.708989938369655, "y": -4.249143642992031, "z": 0 },
    "rotation3D": { "x": 0, "y": 0, "z": -1.5707965497209813 },
    "size3D": { "x": 2.0937808419650805, "y": 2.832762406310554, "z": 0.2 }
};

const cameraCalibration = {
    "camera_matrix": [7265.09513308939, 0.0, 2099.699693520321, 0.0, 0.0, 7265.09513308939, 1217.709330768128, 0.0, 0.0, 0.0, 1.0, 0.0],
    "distortion_coeffs": [-0.0878118, 0.0196239, 0.0, 0.0, 0.902557],
    "width_px": 4112,
    "height_px": 2504
};

const coordSystem = {
    "translation": [0.0609096, -0.136682, 3.51522],
    "quaternion": [-0.0121052, 0.0606543, 0.188524, 0.980119]
};

How can I correctly handle the camera calibration and transformations to render the 3D cuboid accurately on the 2D image using SVG?

req.headers.auth is undefined In jwt and express js

I’m new to use jwt library ..

So I made a login form and if it success it generates token and verify but it generates token and respond that token , but I can’t get that token in req.headers.authorization , i tried req.headers[‘authorization’] also , it shows undefined and I console logs req.headers it gives like host , connection , origin , accept , referrer , cookie …i try to add Authorization with token in my routes like this req.headers.authorization = token , it stores but can’t get it …

verify token.js

import { user } from './models/users.js'; 
export const verifyToken = async (req, res, next) => {
  const authHeader = req.headers['authorization'];
  
  if (!authHeader) {
    return res.status(401).send('Token is missing');
  }

  const token = authHeader.split('   ')[1];
  if (!token)
    return res.status(401).send('Token is missing');
  }

  try {
    jwt.verify(token, process.env.SECRET_KEY, async (err, decoded) => {
      if (err) {
        console.log('Token verification error:', err);
        return res.status(403).send('Invalid token');
      }
      const user1 = await user.findOne({ id: decoded.id });
      if (!user1) {
        return res.status(404).send('User not found');
      }

      req.user = user1;
      next();
    });
  } catch (e) {
    console.log('Error in verifyToken middleware:', e);
    return res.status(500).send('Server error');
  }
};

GenerateToken.js

export const generateToken = (user) => {
  try {
    return jwt.sign({ id: user.id }, process.env.SECRET_KEY, { expiresIn: '30m' });
  } catch (e) {
    console.log('Error generating token:', e);
  }
};
const router = express.Router();
routes.get('/' ,  startpage)
router.post('/register', register);
router.post('/login', login);
router.get('/home', verifyToken, homepage);
router.get('/buynow', verifyToken, buynow);

Here , / -> Startpage has two forms

Login form , register form

Loginform -> post method and /login action

Registerform -> post method and /register action

I use generateToken function on /login and it gives token./home -> will renders a home ejs file

I use generateToken () function in /login route

Like : let token= generateToken(userVar)

Token is generated correctly

It gives the token and but I can’t verify it , it responds missing token , but it can’t get req.headers.authorization and it displays undefined

How do i impliment sort by using algolia in nextjs

i am facing issue while adding sort by feature in my nextjs project using algolia

useEffect(() => {
    setLoading(true);
    const index = algoliaClient.initIndex(ALGOLIA_INDEX);
    const filters = choseFilters(cta_type);
    

    if (category_Item_name) {
      index
        .search("", {
          facetFilters: filters,
          page: page,
          hitsPerPage: 20,
          facets:['*']
        })
        .then(({ hits,facets }) => {
          if (page === 0) {
            setSearchResults(hits);
            const filteredFacets = Object.fromEntries(
              Object.entries(facets).filter(([key, _]) => !['Category_en','Object_Type','Sub_Category_en','price','disabled','Sub_Category',selected_language === "ar"?'Brand_name_en':'Brand_name'].includes(key))
            );
            
            setFacets((prevFacets) => {
              const updatedFacets = { ...prevFacets };
              Object.keys(filteredFacets).forEach(key => {
                updatedFacets[key] = {  ...prevFacets[key],...filteredFacets[key] };
              });
              
              return updatedFacets;
            });
          } else {
            setSearchResults((prevResults) => [...prevResults, ...hits]);
          }
          setLoading(false);
          setAlgoliaLength(hits?.length);
        })
        .catch((err) => {
          console.error("Search error:", err);
        });
    }
  }, [category_Item_name, choseFilters, cta_type, page,selected_language]);

above code is called in GlobalContext

and i have created a custom drop down as shown in the image currently i am looking for price only

how can i achieve it ?

here is my dropDOwn CODE for sort

const FilterDropdown = () => {
    const items = [
        {
          key: "Relevance",
          label: "Relevance",
        },
        {
          key: "High to Low",
          label: "Price : High to Low",
        },
        {
          key: "Low to High",
          label: "Price : Low to High",
        },
        {
          key: "Popularity",
          label: "Popularity",
        },
        {
          key: "Featured",
          label: "Featured",
        },
        
      ];
  return (
    <Dropdown >
      <DropdownTrigger>
        <Button 
          variant="bordered"
          className='pRegular text-primaryGrey z-9' 
        >
          Relevance <i className="fa-solid fa-angle-down"></i>
        </Button>
      </DropdownTrigger>
      <DropdownMenu aria-label="Dynamic Actions" items={items}>
        {(item) => (
          <DropdownItem
            key={item.key}
            // color={item.key === "delete" ? "danger" : "default"}
            // className={item.key === "delete" ? "text-danger" : ""}
          >
            {item.label}
          </DropdownItem>
        )}
      </DropdownMenu>
    </Dropdown>
  )
}

export default FilterDropdown 

i tried adding sortBy parameter this was not working

index
        .search("", {
          facetFilters: filters,
          page: page,
          hitsPerPage: 20,
          facets:['*'],
sortBy:['price:asc']
        })

Long Press Event in React Triggering Unintended Click Event on Second Press

I’m currently stuck on an issue and could use some advice.

I’m not a fan of drag-and-drop from a UX perspective, so I implemented a long press instead. This long press reveals some additional buttons between elements where you can move the item. I’ve also added a click-anywhere-on-the-document feature to cancel the operation.

The problem arises when I try to use the long press twice in a row. Here’s the scenario: I long-press on an item (button), and the long press is triggered. Then, I decide to move another element with a second mouse down and hold. While this works, the document click event listener is fired afterward, which prevents the second action from occurring smoothly.

Here’s my code snippet:

The issue seems to be with document.removeEventListener(‘click’, documentClickRef.current); in the longPress function. It appears that the event listener is not being removed correctly, either because the method reference is not the same or because the browser doesn’t cancel the event listener once the mouse is down. I’ve tried using a clickAllowed ref, but clickAllowed.current is still true for some reason.

Any insights or solutions would be greatly appreciated!


const clickAllowed = useRef<boolean>(false);

const isLongPress = useRef<boolean>(false);

const documentClickRef = useRef(() => {
  if (!clickAllowed.current) {
    return;
  }
  document.removeEventListener('click', documentClickRef.current);
  setTimeout(() => {
    dispatch(formItemMoving(false));
  }, 0);
});

const windowMouseUpRef = useRef(() => {
  window.removeEventListener('mouseup', windowMouseUpRef.current);
  setTimeout(() => {
    isLongPress.current = false;
    document.addEventListener('click', documentClickRef.current);
    clickAllowed.current = true;
  }, 0);
});

const longPress = useLongPress(() => {
  isLongPress.current = true;
  dispatch(formItemMoving(true));
  document.removeEventListener('click', documentClickRef.current);
  clickAllowed.current = false;
  window.addEventListener('mouseup', windowMouseUpRef.current);
});

useEffect(() => {
  return () => {
    window.removeEventListener('mouseup', windowMouseUpRef.current);
    document.removeEventListener('click', documentClickRef.current);
  };
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

...

<button
    onClick={() => {
        if (!isLongPress.current) {
            dispatch(formSetItemModal(...));
        }
    }}
    {...longPress()}
></button>