Блог

вот мой компонент ,кажется, все в порядке, но он не стреляет :

 /** @jsx jsx */
import { useState, useRef } from 'react';
import { jsx } from 'theme-ui';
import PropTypes from 'prop-types';
import { useGesture } from 'react-use-gesture';
import { useContext } from '../MyContext';

const ImageCropper = ({ children }) => {
  const { state, dispatch } = useContext();

  const imageWrapperRef = useRef();
  const [position, setPosition] = useState({
    left: 0,
    top: 0,
  });
  const [scale, setScale] = useState(1);

  useGesture(
    {
      onDoubleClick: () => {
        //this is not firing 
        setScale(scale === 1 ? 1.8 : 1);
        toggleDisableSwiping(scale === 1);
      },
      onDragEnd: () => {
        console.log('drag end');
      },
      onDrag: ({ offset: [left, top] }) => {
        setPosition({
          left,
          top,
        });
      },
    },
    {
      domTarget: imageWrapperRef,
    },
  );

  const toggleDisableSwiping = disabled => {
    dispatch({
      type: 'media_gallery_toggle_disabel_swiping',
      disabled,
    });
  };

  const { left, top } = position;
  return (
    <div
      sx={{
        position: 'relative',
        height: '100vh',
        width: 375,
        overflow: 'hidden',
      }}
    >
      <div
        ref={imageWrapperRef}
        className="imageWrapper"
        style={{
          left,
          top,
        }}
        sx={{
          position: 'absolute',
          display: 'flex',
          alignItems: 'center',
          transform: `scale(${scale})`,
          justifyContent: 'center',
          height: '100%',
          width: '100%',
        }}
      >
        {children}
      </div>
    </div>
  );
};

ImageCropper.propTypes = {
  children: PropTypes.node,
};

export default ImageCropper;

 

версия пакета является : 9.1.3