react-use#useLongPress TypeScript Examples

The following examples show how to use react-use#useLongPress. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: TorrentListRow.tsx    From flood with GNU General Public License v3.0 5 votes vote down vote up 
TorrentListRow: FC<TorrentListRowProps> = observer(({hash, style}: TorrentListRowProps) => {
  const [rowLocation, setRowLocation] = useState<number>(0);
  const shouldDisplayTorrentDetails = useRef<boolean>(false);
  const rowRef = useRef<HTMLDivElement>(null);

  const isCondensed = SettingStore.floodSettings.torrentListViewSize === 'condensed';
  const isSelected = computed(() => TorrentStore.selectedTorrents.includes(hash)).get();

  const {status, upRate, downRate} = TorrentStore.torrents?.[hash] || {};
  const torrentClasses = torrentStatusClasses(
    {status, upRate, downRate},
    classnames({
      'torrent--is-selected': isSelected,
      'torrent--is-condensed': isCondensed,
      'torrent--is-expanded': !isCondensed,
    }),
    'torrent',
  );

  const {onTouchStart, onTouchEnd} = useLongPress((e) => {
    const curRowLocation = rowRef.current?.getBoundingClientRect().top;
    if (e != null && curRowLocation != null && Math.abs(curRowLocation - rowLocation) < 25) {
      displayContextMenu(hash, e as unknown as TouchEvent);
    }
  });

  const onTouchStartHooked = (e: TouchEvent) => {
    if (!TorrentStore.selectedTorrents.includes(hash)) {
      selectTorrent(hash, e);
    }

    if (shouldDisplayTorrentDetails.current) {
      displayTorrentDetails(hash);
    } else {
      shouldDisplayTorrentDetails.current = true;
      setTimeout(() => {
        shouldDisplayTorrentDetails.current = false;
      }, 200);
    }

    setRowLocation(rowRef.current?.getBoundingClientRect().top || 0);

    onTouchStart(e);
  };

  if (isCondensed) {
    return (
      <TorrentListRowCondensed
        className={torrentClasses}
        ref={rowRef}
        style={style}
        hash={hash}
        handleClick={selectTorrent}
        handleDoubleClick={displayTorrentDetails}
        handleRightClick={displayContextMenu}
        handleTouchStart={onTouchStartHooked}
        handleTouchEnd={onTouchEnd}
        handleKeyPress={(e) => onKeyPress(hash, e)}
      />
    );
  }

  return (
    <TorrentListRowExpanded
      className={torrentClasses}
      ref={rowRef}
      style={style}
      hash={hash}
      handleClick={selectTorrent}
      handleDoubleClick={displayTorrentDetails}
      handleRightClick={displayContextMenu}
      handleTouchStart={onTouchStartHooked}
      handleTouchEnd={onTouchEnd}
      handleKeyPress={(e) => onKeyPress(hash, e)}
    />
  );
})
Example #2
Source File: Button.tsx    From yugong with MIT License 4 votes vote down vote up 
Button: React.FC<ButtonProps> = (props) => {
  const {
    registersFunction,
    eventDispatch,
    classes,
  } = props;
  const { api } = props;
  const [text, setText] = useState<string>();
  const [disabled, setDisabled] = useState(false);
  const [hidden, setHidden] = useState(false);
  const [displayState, setDisplayState] = useState<string>();

  // 设置按钮
  const setButton = useCallback(
    (
      ...args: ArgumentsItem[]
    ) => {
      const resArg = getArguments(args);
      const {buttonText, disabled, hidden} = resArg;
      setText(buttonText);
      setDisabled(disabled);
      setHidden(hidden);
    },
    []
  );

  // 设置按钮显示样式
  const setButtonDisplay = useCallback((state: ArgumentsString) => {
    const getState = getArgumentsItem(state);
    setDisplayState(getState as string);
}, []);

  // 点击事件
  const onClick = useCallback(async () => {
    const apiArguments = api?.find((item) => item.apiId === 'beforeClick');
    // api 参数交由requester自行处理
    await requester(apiArguments || {});
    eventDispatch().click();
  }, [api, eventDispatch]);

  // 双击事件
  const onDoubleClick = useCallback(async () => {
    const apiArguments = api?.find(
      (item) => item.apiId === 'beforeDoubleClick'
    );
    if (apiArguments) {
      await requester(apiArguments || {});
    }
    eventDispatch().doubleClick();
  }, [api, eventDispatch]);

  // 长按事件
  const onLongPress = useCallback(async () => {
    const apiArguments = api?.find(
      (item) => item.apiId === 'beforeLongPress'
    );
    if (apiArguments) {
      await requester(apiArguments || {});
    }
    eventDispatch().longPress();
  }, [api, eventDispatch]);

  const longPressEvent = useLongPress(onLongPress, defaultOptions);

  useEffect(() => {
    registersFunction({
      setButton, setButtonDisplay
    })
  }, [registersFunction, setButton, setButtonDisplay])

  useEffect(() => {
    eventDispatch().mount()
    return () => {
      eventDispatch().unmount();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return (
    <Wrapper {...props} maxWidth maxHeight>
      {!hidden ? (
        <button
          onClick={onClick}
          onDoubleClick={onDoubleClick}
          {...longPressEvent}
          className={classNames(s.btn, classes.button, {
            [classes.disabled]: displayState === 'disabled',
            [classes.focus]: displayState === 'focus',
            [classes.active]: displayState === 'active',
            [classes.hover]: displayState === 'hover',
          })}
          disabled={disabled}
        >
          {text || '按钮'}
        </button>
      ) : null}
    </Wrapper>
  )
}