minwork / react

Useful react hooks and components libraries

Minwork - PHP Framework

Disclaimer

Currently minwork framework is in alpha stage and can have breaking changes between releases, which also means that examples may be out of date.

It is not recommended to use it in production environment, but if you still want to, then specify exact library version to avoid updates that can break your application.

What is Minwork?

Minwork is a PHP 7 micro framework designed to be fast, compact, easy to use, with interchangeable modules.

Main advantages of Minwork are:

• Flexible - every part of the framework can be replaced with your own as long as it implements specified interface
• Event based - all major actions trigger corresponding events for easy hooking and modifying application flow
• Operations - model utilizes command design pattern which allows to execute, queue and revert any CRUD operation
• Fast - due to light weight, small and simple modules with only most necessary functionality as well as no external dependencies Minwork is incredibly fast
• Minimum effort - you can create basic application under 1 minute with less than 15 lines of code
• PHP 7 - utilizes every benefit of PHP 7 to make your work even smoother and more comfortable
• IDE friendly - everything you need to know about any module or method is well documented using PHPDoc

Example

This is how to create simple Hello World application

<?php
require 'vendor/autoload.php';

use Minwork\Core\Framework;
use Minwork\Http\Utility\Environment;
use Minwork\Http\Object\Router;
use Minwork\Basic\Controller\Controller;

$controller = new class() extends Controller {
  public function show() {
    return 'Hello world!';
  }
};
$framework = new Framework(new Router(['test' => $controller]), new Environment());
$framework->run('/test');

But what if we want to parse real website url? In that case you will need .htaccess file with content as follows

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.php?URL=$1 [L,QSA]

And your index.php should look like this

<?php
require 'vendor/autoload.php';

use Minwork\Core\Framework;
use Minwork\Http\Utility\Environment;
use Minwork\Http\Object\Router;
use Minwork\Basic\Controller\Controller;

$controller = new class() extends Controller {
    public function show($name)
    {
        return "Hello {$name}!";
    }
};
$framework = new Framework(new Router(['default_controller' => $controller]), new Environment());
$framework->run($_GET['URL']);

Because show is default controller method, as a result of calling address http://yourwebsitename.com/John framework will output Hello John!

If you want output to be returned instead of printed just change last line to $content = $framework->run($_GET['URL'], true);

react's Issues

Separate build and test workflows

Extract test workflow from current build + test workflow

Move time param to options

Move use-double-tap threshold and react-interval-hook interval params to options object

Add tests for case when trying to read position from unrecognised event

Migrate use-double-tap documentation to GitBook

Add pause method to controls

On Chrome for mobile, the click event triggers event if element was created after the pointerup event

I use use-long-press to implement this features:

• open a dialog box on a short click to show & explain the options
• play the default option on a long click

The dialog box has a backdrop. When the backdrop is clicked, the dialog is closed.

I works fine except for Chrome on mobile devices. I that case, a short click produces this behavior:

1. pointer up, cancel reason is "CancelledByRelease", open the dialog box.
2. if the pointer is on the backdrop, Chrome fires the "pointer click": dialog is immediately closed.

A workaround:

  const clicked = useRef(false)

  const bind = useLongPress(() => /* whatever long press does */, {
    onCancel: (event, { reason }) => {
      if (reason === LongPressCallbackReason.CancelledByRelease) {
        clicked.current = true
      }
    }
  })
  
  const onClick = useCallback(() => {
    if (clicked.current) {
      clicked.current = false
      /* whatever short press does */
    }
  }, [])
  
  return <div ref={ref} onClick={onClick} {...bind()}/>

Maybe use-long-press could evolve to offer this workaround or something similar? It was painful to sort out.

Add 'stateful' option to react-interval-hook

Add flag to enable hook to return isActive as state instead of function

Migrate react-interval-hook documentation to GitBook

Change default value of onFinish callback to undefined

useLongPress: Cancel when multiple touches occur

Hi! Thanks for the useLongPress hook. I like it a lot. I just noticed a difference between this library and iOS's native long press, so I thought I would make this issue.

---

Problem

On native iOS, if a second touch starts before the long press finishes, the long press is cancelled.

This can be observed in the native iOS Mail app by simply putting on finger down, and then placing another finger before the long press has a chance to fire.

This is important for accessibility reasons (see: aeharding/voyager#1254).

Proposed Solution

I would like to see an extra option, cancelOnTouches (or something like that) where any time multiple touches occur, the long press is cancelled.

Always sending last item context (v3)

When rendering a list of buttons (using array.map with each button having different context), then no matter which button to press and hold, the context is always last element's context.

It was okay with v2.0.4.

use-long-press@3 requires node@^16

Is this really a requirement for the package, or just for dev tools used in development? Any chance engines.node requirement could be lowered?

did not detect when mouse move out

I use use-long-press in my react app to enter in edit mode in a card. It work fine but when the use enter the long press on the card and release it out of it your library still count it as a long press, even if the press was shorter than the threshold

This is my card:

<div
      className="w-[300px] h-[200px] relative"
      {...bind()}
      style={{
        animationName: selected ? "shake" : "none",
        animationDuration: "0.5s",
        animationTimingFunction: "ease-in-out",
      }}
    >
      Content here
      <EditItemOverlay
        item={item}
        selected={selected}
        setSelected={setSelected}
        editItem={editItem}
      />
    </div>

package.json should have the types property inside 'exports' field so that TS types can be correctly imported

This is the error I get when trying to import the use-long-press hook:

import { useLongPress } from "use-long-press";

Could not find a declaration file for module 'use-long-press'. '/Users/[...]/node_modules/use-long-press/index.mjs' implicitly has an 'any' type. There are types at '/Users/[...]/node_modules/use-long-press/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'use-long-press' library may need to update its package.json or typings.ts(7016)

Add support for key long press

Add new detect option and ability to filter events by specified key

how to cancel a long press after it has started using custom logic?

I want to cancel a longpress if it has a certain parent.

I tried doing like:

longPressOpts={{
onStart: (e) => {
const el = e.target as HTMLDivElement;
if (el.closest(".sp-wrapper")) {
console.log("stopping longpress");
e.preventDefault();
e.stopPropagation();
}
},
}}

which I thought should cancel the long press if the click was instead a parent with class .sp-wrapper, but it does not. Can a long press be canceled?

error when using in tests with jest

hi! after upgrading from v2.0.3 to v3.1.0, i get this error in one of my test suites:

PointerEvent is not defined
ReferenceError: PointerEvent is not defined
    at PointerEvent (/home/r/workspace/perdoo/frontend/node_modules/use-long-press/index.js:1:534)

i'm using the library only in one place, like this:

  const toggleDevModeWhenLongPressedThreeTimes = useLongPress(toggleDevMode, {
    onCancel: switchBetweenDevModes,
  });

i'm using jest with testing-library in a react + next.js project. here's my relevant dependencies:

"@testing-library/dom": "8.19.0",
"@testing-library/jest-dom": "5.16.5",
"@testing-library/react": "13.4.0",
"@testing-library/user-event": "13.5.0",

"jest": "29.4.3",
"next": "13.2.4",
"react": "18.2.0",
"use-long-press": "3.1.0",

multiple tests fail in one spec file. nothing special, just clicks a button, not even using long press here so not sure what's happening. here's one of the tests:

it("can export and print", async () => {
  await renderGroupProfile();
  const exportBtn = screen.getByText(/file_download/i);
  userEvent.click(exportBtn);
  expect(screen.getByText(/export as pdf/i)).toBeInTheDocument();
  expect(screen.getByText(/print full page/i)).toBeInTheDocument();
});

Migrate react-interval-hook

Move react-interval-hook to this repository

Not working on Next.js

I'm getting the following error trying to use this on a Next.js app, I would assume because part of the code is running server side and the library is not correctly considering that possibility:

ReferenceError: window is not defined

Thanks

Remove npm-publish library

Remove shared/npm-publish library since everything should be handled by semantic-release

Expand Codecov workflow action to cover all packages

Add coverage upload for use-double-tap and exclude shared libraries

Add GitHub actions for PRs and Releases

[QUESTION]How to avoid children triger onClick when longPress is trigger?

<div onLongPress={()=>{console.log(2)}}>
   <div onClick={()=>{console.log(1)}}>children</div>
</div>

When trigger longpress，the children still trigger onClick? how can i avoid this?

Add support for pointer events

Refactor type names and structure