react-use#useLongPress JavaScript 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: HeaderCell.js    From covid19india-react with MIT License 5 votes vote down vote up 
function StateHeaderCell({handleSort, sortData, setSortData, statistic}) {
  const {t} = useTranslation();
  const wasLongPressed = useRef(false);

  const onLongPress = () => {
    if (sortData.sortColumn === statistic) {
      wasLongPressed.current = true;
      setSortData(
        produce(sortData, (sortDataDraft) => {
          sortDataDraft.delta = !sortData.delta;
        })
      );
    }
  };
  const longPressEvent = useLongPress(onLongPress, {isPreventDefault: false});

  const handleClick = useCallback(
    (statistic) => {
      if (wasLongPressed.current) {
        wasLongPressed.current = false;
      } else {
        handleSort(statistic);
      }
    },
    [handleSort]
  );

  const statisticConfig = STATISTIC_CONFIGS[statistic];

  return (
    <div
      className={classnames('cell', 'heading')}
      onClick={handleClick.bind(this, statistic)}
      {...longPressEvent}
    >
      {sortData.sortColumn === statistic && (
        <div
          className={classnames('sort-icon', {
            [`is-${statistic}`]: sortData.delta,
          })}
        >
          {sortData.isAscending ? (
            <SortAscIcon size={12} />
          ) : (
            <SortDescIcon size={12} />
          )}
        </div>
      )}
      {statisticConfig?.tableConfig?.notes && (
        <Tooltip message={t(statisticConfig.tableConfig.notes)}>
          <InfoIcon size={14} />
        </Tooltip>
      )}
      <div>
        {t(
          toTitleCase(
            statisticConfig?.tableConfig?.displayName ||
              statisticConfig.displayName
          )
        )}
      </div>
    </div>
  );
}
Example #2
Source File: LayerControl.js    From FSE-Planner with MIT License 4 votes vote down vote up 
function Layer(props) {
  const longPressEvent = useLongPress(props.onContextMenu, {isPreventDefault: false});

  return (
    <Box
      sx={{
        width: 100,
        textAlign: 'center',
        cursor: 'pointer',
        position: 'relative',
        '&:hover img': {
          filter: 'brightness(0.95)'
        },
        '&:hover div': {
          filter: 'brightness(0.95)'
        },
        '&:hover p': {
          color: 'primary.main'
        },
        '&:hover .layerBtn': {
          display: 'block'
        }
      }}
      onClick={() => props.onChange(!props.visible)}
      onContextMenu={props.onContextMenu}
      {...longPressEvent}
    >
      <Box
        component="span"
        sx={{
          display: 'inline-block',
          position: 'relative',
          borderRadius: '8px',
          padding: '2px',
          border: '2px solid #fff',
          borderColor: props.visible ? 'secondary.main' : '#fff',
          transition: 'all .1s ease-in'
        }}
      >
        {props.img ?
          <img
            style={{
              display: 'block',
              borderRadius: '5px',
              transition: 'all .1s ease-in'
            }}
            src={props.img}
            alt={props.label}
          />
        :
          <Box
            sx={{
              width: 50,
              height: 50,
              borderRadius: '5px',
              transition: 'all .1s ease-in',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              color: '#fff',
              backgroundColor: props.color ? props.color : 'transparent'
            }}
          >
            {props.shared && <ShareIcon />}
          </Box>
        }
        {props.loading &&
          <CircularProgress
            size={24}
            thickness={10}
            color="secondary"
            disableShrink
            sx={{
              position: 'absolute',
              top: '50%',
              left: '50%',
              marginTop: '-12px',
              marginLeft: '-12px'
            }}
          />
        }
      </Box>
      <Typography
        variant="body2"
        sx={{
          lineHeight: 1,
          transition: 'all .1s ease-in'
        }}
      >
        {props.label}
      </Typography>
      { props.handleRemove &&
        <Box
          component="span"
          sx={{
            position: 'absolute',
            top: -8,
            right: 12,
            width: 20,
            height: 20,
            padding: '3px',
            borderRadius: '50%',
            background: '#fafafa',
            color: '#777',
            display: 'none',
            '&:hover': {
              color: '#000'
            }
          }}
          className="layerBtn"
          onClick={(evt) => {
            evt.stopPropagation();
            props.handleRemove();
          }}
          alt="Delete layer"
        >
          <CancelIcon fontSize="small" />
        </Box>
      }
      { props.handleEdit &&
        <Box
          component="span"
          sx={{
            position: 'absolute',
            top: -8,
            left: 12,
            width: 20,
            height: 20,
            padding: '3px',
            borderRadius: '50%',
            background: '#f4f4f4',
            color: '#777',
            display: 'none',
            '&:hover': {
              color: '#000'
            }
          }}
          className="layerBtn"
          onClick={(evt) => {
            evt.stopPropagation();
            props.handleEdit();
          }}
          alt="Edit layer"
        >
          <EditIcon fontSize="small" />
        </Box>
      }
    </Box>
  )
}